Merge branch '331641-show-warning-if-no-git-in-the-url-when-importing-repo-by-url' into 'master'

Resolve "Show warning if no .git in the URL when importing Repo by URL"

See merge request gitlab-org/gitlab!65739

app/assets/javascripts/projects/project_new.js

@@ -74,6 +74,7 @@ const deriveProjectPathFromUrl = ($projectImportUrl) => {
 const bindEvents = () => {
   const $newProjectForm = $('#new_project');
   const $projectImportUrl = $('#project_import_url');
+  const $projectImportUrlWarning = $('.js-import-url-warning');
   const $projectPath = $('.tab-pane.active #project_path');
   const $useTemplateBtn = $('.template-button > input');
   const $projectFieldsForm = $('.project-fields-form');
@@ -134,7 +135,25 @@ const bindEvents = () => {
     $projectPath.val($projectPath.val().trim());
   });
 
-  $projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl));
+  function updateUrlPathWarningVisibility() {
+    const url = $projectImportUrl.val();
+    const URL_PATTERN = /(?:git|https?):\/\/.*\/.*\.git$/;
+    const isUrlValid = URL_PATTERN.test(url);
+    $projectImportUrlWarning.toggleClass('hide', isUrlValid);
+  }
+
+  let isProjectImportUrlDirty = false;
+  $projectImportUrl.on('blur', () => {
+    isProjectImportUrlDirty = true;
+    updateUrlPathWarningVisibility();
+  });
+  $projectImportUrl.on('keyup', () => {
+    deriveProjectPathFromUrl($projectImportUrl);
+    // defer error message till first input blur
+    if (isProjectImportUrlDirty) {
+      updateUrlPathWarningVisibility();
+    }
+  });
 
   $('.js-import-git-toggle-button').on('click', () => {
     const $projectMirror = $('#project_mirror');

app/views/shared/_import_form.html.haml

@@ -8,7 +8,18 @@
         = _('Git repository URL')
     = f.text_field :import_url, value: import_url.sanitized_url,
         autocomplete: 'off', class: 'form-control gl-form-input', placeholder: 'https://gitlab.company.com/group/project.git', required: true
+    = render 'shared/global_alert',
+      variant: :warning,
+      alert_class: 'gl-mt-3 js-import-url-warning hide',
+      dismissible: false,
+      close_button_class: 'js-close-2fa-enabled-success-alert' do
+      .gl-alert-body
+        = s_('Import|A repository URL usually ends in a .git suffix, although this is not required. Double check to make sure your repository URL is correct.')
 
+    .gl-alert.gl-alert-not-dismissible.gl-alert-warning.gl-mt-3.hide#project_import_url_warning
+      .gl-alert-container
+        = sprite_icon('warning-solid', css_class: 'gl-icon s16 gl-alert-icon gl-alert-icon-no-title')
+        .gl-alert-content{ role: 'alert' }
   .row
     .form-group.col-md-6
       = f.label :import_url_user, class: 'label-bold' do

locale/gitlab.pot

@@ -16763,6 +16763,9 @@ msgstr[1] ""
 msgid "Importing..."
 msgstr ""
 
+msgid "Import|A repository URL usually ends in a .git suffix, although this is not required. Double check to make sure your repository URL is correct."
+msgstr ""
+
 msgid "Improve customer support with Service Desk"
 msgstr ""
 

spec/features/projects/new_project_spec.rb

@@ -293,6 +293,14 @@ RSpec.describe 'New project', :js do
             expect(git_import_instructions).to have_content 'Git repository URL'
           end
 
+          it 'reports error if repo URL does not end with .git' do
+            fill_in 'project_import_url', with: 'http://foo/bar'
+            # simulate blur event
+            find('body').click
+
+            expect(page).to have_text('A repository URL usually ends in a .git suffix')
+          end
+
           it 'keeps "Import project" tab open after form validation error' do
             collision_project = create(:project, name: 'test-name-collision', namespace: user.namespace)