Add warning when import url does not ends with .git

Changelog: added

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 = $('#project_import_url_warning');
   const $projectPath = $('.tab-pane.active #project_path');
   const $useTemplateBtn = $('.template-button > input');
   const $projectFieldsForm = $('.project-fields-form');
@@ -134,7 +135,31 @@ 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);
+    if (isUrlValid && !$projectImportUrlWarning.hasClass('hide')) {
+      $projectImportUrlWarning.addClass('hide');
+    }
+
+    if (!isUrlValid && $projectImportUrlWarning.hasClass('hide')) {
+      $projectImportUrlWarning.removeClass('hide');
+    }
+  }
+
+  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,12 @@
         = _('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
-
+    .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' }
+          .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.')
   .row
     .form-group.col-md-6
       = f.label :import_url_user, class: 'label-bold' do

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)