Make import tab/form active when importing project by URL and validation fails43261-fix-import-from-url-name-collision-active-tab

See https://gitlab.com/gitlab-org/gitlab-ce/issues/43261

4 files changed, 28 insertions, 9 deletions

diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index 72573e0765d..f437929bc85 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -45,7 +45,7 @@ class ProjectsController < Projects::ApplicationController
         notice: _("Project '%{project_name}' was successfully created.") % { project_name: @project.name }
       )
     else
-      render 'new'
+      render 'new', locals: { active_tab: ('import' if project_params[:import_url].present?) }
     end
   end
 
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 61ae0ebbce6..8e169ccea08 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -4,6 +4,7 @@
 - page_title    'New Project'
 - header_title  "Projects", dashboard_projects_path
 - visibility_level = params.dig(:project, :visibility_level) || default_project_visibility
+- active_tab = local_assigns.fetch(:active_tab, 'blank')
 
 .project-edit-container
   .project-edit-errors
@@ -20,32 +21,32 @@
         = brand_new_project_guidelines
     .col-lg-9.js-toggle-container
       %ul.nav-links.gitlab-tabs{ role: 'tablist' }
-        %li.active{ role: 'presentation' }
+        %li{ class: ('active' if active_tab == 'blank'), role: 'presentation' }
           %a{ href: '#blank-project-pane', id: 'blank-project-tab', data: { toggle: 'tab' }, role: 'tab' }
             %span.hidden-xs Blank project
             %span.visible-xs Blank
-        %li{ role: 'presentation' }
+        %li{ class: ('active' if active_tab == 'template'), role: 'presentation' }
           %a{ href: '#create-from-template-pane', id: 'create-from-template-tab', data: { toggle: 'tab' }, role: 'tab' }
             %span.hidden-xs Create from template
             %span.visible-xs Template
-        %li{ role: 'presentation' }
+        %li{ class: ('active' if active_tab == 'import'), role: 'presentation' }
           %a{ href: '#import-project-pane', id: 'import-project-tab', data: { toggle: 'tab' }, role: 'tab' }
             %span.hidden-xs Import project
             %span.visible-xs Import
 
       .tab-content.gitlab-tab-content
-        .tab-pane.active{ id: 'blank-project-pane', role: 'tabpanel' }
+        .tab-pane{ id: 'blank-project-pane', class: ('active' if active_tab == 'blank'), role: 'tabpanel' }
           = form_for @project, html: { class: 'new_project' } do |f|
             = render 'new_project_fields', f: f, project_name_id: "blank-project-name"
 
-        .tab-pane.no-padding{ id: 'create-from-template-pane', role: 'tabpanel' }
+        .tab-pane.no-padding{ id: 'create-from-template-pane', class: ('active' if active_tab == 'template'), role: 'tabpanel' }
           = form_for @project, html: { class: 'new_project' } do |f|
             .project-template
               .form-group
                 %div
                   = render 'project_templates', f: f
 
-        .tab-pane.import-project-pane{ id: 'import-project-pane', role: 'tabpanel' }
+        .tab-pane.import-project-pane{ id: 'import-project-pane', class: ('active' if active_tab == 'import'), role: 'tabpanel' }
           = form_for @project, html: { class: 'new_project' } do |f|
             - if import_sources_enabled?
               .project-import.row
@@ -92,7 +93,7 @@
                           %button.btn.js-toggle-button.import_git{ type: "button" }
                             = icon('git', text: 'Repo by URL')
                 .col-lg-12
-                  .js-toggle-content.hide.toggle-import-form
+                  .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
                     %hr
                       = render "shared/import_form", f: f
                       = render 'new_project_fields', f: f, project_name_id: "import-url-name"
diff --git a/changelogs/unreleased/43261-fix-import-from-url-name-collision-active-tab.yml b/changelogs/unreleased/43261-fix-import-from-url-name-collision-active-tab.yml
new file mode 100644
index 00000000000..71073b2e214
--- /dev/null
+++ b/changelogs/unreleased/43261-fix-import-from-url-name-collision-active-tab.yml
@@ -0,0 +1,6 @@
+---
+title: Keep "Import project" tab/form active when validation fails trying to import
+  "Repo by URL"
+merge_request: 17136
+author:
+type: fixed
diff --git a/spec/features/projects/new_project_spec.rb b/spec/features/projects/new_project_spec.rb
index 6f097ad16c7..b5104747d00 100644
--- a/spec/features/projects/new_project_spec.rb
+++ b/spec/features/projects/new_project_spec.rb
@@ -140,7 +140,7 @@ feature 'New project' do
       find('#import-project-tab').click
     end
 
-    context 'from git repository url' do
+    context 'from git repository url, "Repo by URL"' do
       before do
         first('.import_git').click
       end
@@ -157,6 +157,18 @@ feature 'New project' do
         expect(git_import_instructions).to be_visible
         expect(git_import_instructions).to have_content 'Git repository URL'
       end
+
+      it 'keeps "Import project" tab open after form validation error' do
+        collision_project = create(:project, name: 'test-name-collision', namespace: user.namespace)
+
+        fill_in 'project_import_url', with: collision_project.http_url_to_repo
+        fill_in 'project_path', with: collision_project.path
+
+        click_on 'Create project'
+
+        expect(page).to have_css('#import-project-pane.active')
+        expect(page).not_to have_css('.toggle-import-form.hide')
+      end
     end
 
     context 'from GitHub' do