Fix projectPath input not updating when adding urls to the import project page40607-importing-project-by-url-should-default-project-name

3 files changed, 27 insertions, 15 deletions

diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 3ecc0c2a6e5..d180feeceae 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -1,6 +1,6 @@
 let hasUserDefinedProjectPath = false;
 
-const deriveProjectPathFromUrl = ($projectImportUrl, $projectPath) => {
+const deriveProjectPathFromUrl = ($projectImportUrl, projectPath) => {
   if (hasUserDefinedProjectPath) {
     return;
   }
@@ -21,7 +21,11 @@ const deriveProjectPathFromUrl = ($projectImportUrl, $projectPath) => {
   // extract everything after the last slash
   const pathMatch = /\/([^/]+)$/.exec(importUrl);
   if (pathMatch) {
-    $projectPath.val(pathMatch[1]);
+    const projectPathInputs = document.querySelectorAll(projectPath);
+    projectPathInputs.forEach((el) => {
+      const input = el;
+      input.value = pathMatch[1];
+    });
   }
 };
 
@@ -96,7 +100,7 @@ const bindEvents = () => {
     hasUserDefinedProjectPath = $projectPath.val().trim().length > 0;
   });
 
-  $projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl, $projectPath));
+  $projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl, '#project_path'));
 };
 
 document.addEventListener('DOMContentLoaded', bindEvents);
diff --git a/changelogs/unreleased/40607-importing-project-by-url-should-default-project-name.yml b/changelogs/unreleased/40607-importing-project-by-url-should-default-project-name.yml
new file mode 100644
index 00000000000..badc95dcc97
--- /dev/null
+++ b/changelogs/unreleased/40607-importing-project-by-url-should-default-project-name.yml
@@ -0,0 +1,6 @@
+---
+title: Fix projectPath input not updating when adding a URL to the import project
+  page
+merge_request: 40607
+author:
+type: fixed
diff --git a/spec/javascripts/projects/project_new_spec.js b/spec/javascripts/projects/project_new_spec.js
index 850768f0e4f..facfa907a7e 100644
--- a/spec/javascripts/projects/project_new_spec.js
+++ b/spec/javascripts/projects/project_new_spec.js
@@ -3,6 +3,7 @@ import projectNew from '~/projects/project_new';
 describe('New Project', () => {
   let $projectImportUrl;
   let $projectPath;
+  let projectPathSelector;
 
   beforeEach(() => {
     setFixtures(`
@@ -12,6 +13,7 @@ describe('New Project', () => {
 
     $projectImportUrl = $('#project_import_url');
     $projectPath = $('#project_path');
+    projectPathSelector = '#project_path';
   });
 
   describe('deriveProjectPathFromUrl', () => {
@@ -25,7 +27,7 @@ describe('New Project', () => {
     it('does not change project path for disabled $projectImportUrl', () => {
       $projectImportUrl.attr('disabled', true);
 
-      projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+      projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
       expect($projectPath.val()).toEqual(dummyImportUrl);
     });
@@ -38,7 +40,7 @@ describe('New Project', () => {
       it('does not change project path if it is set by user', () => {
         $projectPath.keyup();
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual(dummyImportUrl);
       });
@@ -46,7 +48,7 @@ describe('New Project', () => {
       it('does not change project path for empty $projectImportUrl', () => {
         $projectImportUrl.val('');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual(dummyImportUrl);
       });
@@ -54,7 +56,7 @@ describe('New Project', () => {
       it('does not change project path for whitespace $projectImportUrl', () => {
         $projectImportUrl.val('   ');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual(dummyImportUrl);
       });
@@ -62,7 +64,7 @@ describe('New Project', () => {
       it('does not change project path for $projectImportUrl without slashes', () => {
         $projectImportUrl.val('has-no-slash');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual(dummyImportUrl);
       });
@@ -70,7 +72,7 @@ describe('New Project', () => {
       it('changes project path to last $projectImportUrl component', () => {
         $projectImportUrl.val('/this/is/last');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual('last');
       });
@@ -78,7 +80,7 @@ describe('New Project', () => {
       it('ignores trailing slashes in $projectImportUrl', () => {
         $projectImportUrl.val('/has/trailing/slash/');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual('slash');
       });
@@ -86,7 +88,7 @@ describe('New Project', () => {
       it('ignores fragment identifier in $projectImportUrl', () => {
         $projectImportUrl.val('/this/has/a#fragment-identifier/');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual('a');
       });
@@ -94,7 +96,7 @@ describe('New Project', () => {
       it('ignores query string in $projectImportUrl', () => {
         $projectImportUrl.val('/url/with?query=string');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual('with');
       });
@@ -102,7 +104,7 @@ describe('New Project', () => {
       it('ignores trailing .git in $projectImportUrl', () => {
         $projectImportUrl.val('/repository.git');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual('repository');
       });
@@ -110,7 +112,7 @@ describe('New Project', () => {
       it('changes project path for HTTPS URL in $projectImportUrl', () => {
         $projectImportUrl.val('https://username:password@gitlab.company.com/group/project.git');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual('project');
       });
@@ -118,7 +120,7 @@ describe('New Project', () => {
       it('changes project path for SSH URL in $projectImportUrl', () => {
         $projectImportUrl.val('git@gitlab.com:gitlab-org/gitlab-ce.git');
 
-        projectNew.deriveProjectPathFromUrl($projectImportUrl, $projectPath);
+        projectNew.deriveProjectPathFromUrl($projectImportUrl, projectPathSelector);
 
         expect($projectPath.val()).toEqual('gitlab-ce');
       });