Merge branch 'ph/202656/fixNewDirectory' into 'master'

Fixes new directory not working corretly

Closes #202656

See merge request gitlab-org/gitlab!24705

app/assets/javascripts/repository/utils/dom.js

+import { joinPaths } from '~/lib/utils/url_utility';
+
 export const updateElementsVisibility = (selector, isVisible) => {
   document.querySelectorAll(selector).forEach(elem => elem.classList.toggle('hidden', !isVisible));
 };
@@ -6,6 +8,6 @@ export const updateFormAction = (selector, basePath, path) => {
   const form = document.querySelector(selector);
 
   if (form) {
-    form.action = `${basePath}${path}`;
+    form.action = joinPaths(basePath, path);
   }
 };

spec/features/projects/files/user_creates_directory_spec.rb

@@ -16,6 +16,8 @@ describe 'Projects > Files > User creates a directory', :js do
     project.add_developer(user)
     sign_in(user)
     visit project_tree_path(project, 'master')
+
+    wait_for_requests
   end
 
   context 'with default target branch' do
@@ -43,6 +45,25 @@ describe 'Projects > Files > User creates a directory', :js do
     end
   end
 
+  context 'inside sub-folder' do
+    it 'creates new directory' do
+      click_link 'files'
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('files')
+      end
+
+      first('.add-to-tree').click
+      click_link('New directory')
+
+      fill_in(:dir_name, with: 'new_directory')
+      click_button('Create directory')
+
+      expect(page).to have_content('files')
+      expect(page).to have_content('new_directory')
+    end
+  end
+
   context 'with a new target branch' do
     before do
       first('.add-to-tree').click

spec/frontend/repository/utils/dom_spec.js

@@ -20,11 +20,18 @@ describe('updateElementsVisibility', () => {
 });
 
 describe('updateFormAction', () => {
-  it('updates form action', () => {
+  it.each`
+    path
+    ${'/test'}
+    ${'test'}
+    ${'/'}
+  `('updates form action for $path', ({ path }) => {
     setHTMLFixture('<form class="js-test" action="/"></form>');
 
-    updateFormAction('.js-test', '/gitlab/create', '/test');
+    updateFormAction('.js-test', '/gitlab/create', path);
 
-    expect(document.querySelector('.js-test').action).toBe('http://localhost/gitlab/create/test');
+    expect(document.querySelector('.js-test').action).toBe(
+      `http://localhost/gitlab/create/${path.replace(/^\//, '')}`,
+    );
   });
 });