Use slugs for default project path and sanitize names before import

Users importing from Bitbucket Cloud, Bitbucket Server, or GitHub
often complained about getting failed imports due to 422 errors.
This change ensures that project names are imported with names that
are guaranteed to pass the regular expression validation.

Part of #50021

app/helpers/import_helper.rb

@@ -5,6 +5,10 @@ module ImportHelper
     false
   end
 
+  def sanitize_project_name(name)
+    name.gsub(/[^\w\-]/, '-')
+  end
+
   def import_project_target(owner, name)
     namespace = current_user.can_create_group? ? owner : current_user.namespace_path
     "#{namespace}/#{name}"

app/views/import/_githubish_status.html.haml

@@ -45,7 +45,7 @@
                   = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true
               %span.input-group-prepend
                 .input-group-text /
-              = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
+              = text_field_tag :path, sanitize_project_name(repo.name), class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
               = has_ci_cd_only_params? ? _('Connect') : _('Import')

app/views/import/bitbucket/status.html.haml

@@ -63,7 +63,7 @@
                   = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true
               %span.input-group-prepend
                 .input-group-text /
-              = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
+              = text_field_tag :path, sanitize_project_name(repo.slug), class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
           %td.import-actions.job-status
             = button_tag class: 'btn btn-import js-add-to-import' do
               = _('Import')

app/views/import/bitbucket_server/status.html.haml

@@ -61,7 +61,7 @@
                   = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true
               %span.input-group-prepend
                 .input-group-text /
-              = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
+              = text_field_tag :path, sanitize_project_name(repo.slug), class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
           %td.import-actions.job-status
             = button_tag class: 'btn btn-import js-add-to-import' do
               Import

changelogs/unreleased/sh-sanitize-project-import-names.yml

@@ -0,0 +1,5 @@
+---
+title: Use slugs for default project path and sanitize names before import
+merge_request: 21367
+author:
+type: fixed

qa/qa/page/project/import/github.rb

@@ -14,7 +14,7 @@ module QA
             element :project_import_row, 'data: { qa: { repo_path: repo.full_name } }'
             element :project_namespace_select
             element :project_namespace_field, 'select_tag :namespace_id'
-            element :project_path_field, 'text_field_tag :path, repo.name'
+            element :project_path_field, 'text_field_tag :path, sanitize_project_name(repo.name)'
             element :import_button, "_('Import')"
           end
 

spec/helpers/import_helper_spec.rb

@@ -1,6 +1,16 @@
 require 'rails_helper'
 
 describe ImportHelper do
+  describe '#sanitize_project_name' do
+    it 'removes whitespace' do
+      expect(helper.sanitize_project_name('my test repo')).to eq('my-test-repo')
+    end
+
+    it 'removes disallowed characters' do
+      expect(helper.sanitize_project_name('Test&me$over*h_ere')).to eq('Test-me-over-h_ere')
+    end
+  end
+
   describe '#import_project_target' do
     let(:user) { create(:user) }