Replace the gitlab import haml modal with a GlModal

Adds some additional gitlab modal data
properties to the new project haml template

Changelog: changed

app/assets/javascripts/projects/project_new.js

@@ -120,15 +120,6 @@ const bindHowToImport = () => {
       });
     });
   });
-
-  $('.how_to_import_link').on('click', (e) => {
-    e.preventDefault();
-    $(e.currentTarget).next('.modal').show();
-  });
-
-  $('.modal-header .close').on('click', () => {
-    $('.modal').hide();
-  });
 };
 
 const bindEvents = () => {

app/helpers/projects_helper.rb

@@ -431,19 +431,26 @@ module ProjectsHelper
   end
 
   def import_from_bitbucket_message
-    link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path("integration/bitbucket") }
+    configure_oauth_import_message('Bitbucket', help_page_path("integration/bitbucket"))
+  end
+
+  def import_from_gitlab_message
+    configure_oauth_import_message('GitLab.com', help_page_path("integration/gitlab"))
+  end
 
+  private
+
+  def configure_oauth_import_message(provider, help_url)
     str = if current_user.admin?
-            'ImportProjects|To enable importing projects from Bitbucket, as administrator you need to configure %{link_start}OAuth integration%{link_end}'
+            'ImportProjects|To enable importing projects from %{provider}, as administrator you need to configure %{link_start}OAuth integration%{link_end}'
           else
-            'ImportProjects|To enable importing projects from Bitbucket, ask your GitLab administrator to configure %{link_start}OAuth integration%{link_end}'
+            'ImportProjects|To enable importing projects from %{provider}, ask your GitLab administrator to configure %{link_start}OAuth integration%{link_end}'
           end
 
-    s_(str).html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+    link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_url }
+    s_(str).html_safe % { provider: provider, link_start: link_start, link_end: '</a>'.html_safe }
   end
 
-  private
-
   def tab_ability_map
     {
       cycle_analytics:    :read_cycle_analytics,

app/views/projects/_gitlab_import_modal.html.haml

-#gitlab_import_modal.modal
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h3.modal-title Import projects from GitLab.com
-        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
-          %span{ "aria-hidden": "true" } ×
-      .modal-body
-        To enable importing projects from GitLab.com,
-        - if current_user.admin?
-          as administrator you need to configure
-        - else
-          ask your GitLab administrator to configure
-        = link_to 'OAuth integration', help_page_path("integration/gitlab")

app/views/projects/_import_project_pane.html.haml

@@ -36,12 +36,11 @@
         %div
       - if gitlab_import_enabled?
         %div
-          = link_to status_import_gitlab_path, class: "gl-button btn-default btn import_gitlab js-import-project-btn #{'how_to_import_link' unless gitlab_import_configured?}", data: { platform: 'gitlab_com', **tracking_attrs_data(track_label, 'click_button', 'gitlab_com') } do
+          = link_to status_import_gitlab_path, class: "gl-button btn-default btn import_gitlab js-import-project-btn #{'js-how-to-import-link' unless gitlab_import_configured?}",
+            data: { modal_title: _("Import projects from GitLab.com"), modal_message: import_from_gitlab_message, platform: 'gitlab_com', **tracking_attrs_data(track_label, 'click_button', 'gitlab_com') } do
             .gl-button-icon
               = sprite_icon('tanuki')
             = _("GitLab.com")
-          - unless gitlab_import_configured?
-            = render 'projects/gitlab_import_modal'
 
       - if fogbugz_import_enabled?
         %div

spec/features/projects/new_project_spec.rb

@@ -405,46 +405,62 @@ RSpec.describe 'New project', :js do
     end
   end
 
-  context 'from Bitbucket', :js do
-    shared_examples 'has a link to bitbucket cloud' do
-      context 'when bitbucket is not configured' do
-        before do
-          allow(Gitlab::Auth::OAuth::Provider).to receive(:enabled?).and_call_original
-          allow(Gitlab::Auth::OAuth::Provider)
-            .to receive(:enabled?).with(:bitbucket)
-            .and_return(false)
+  shared_examples 'has instructions to enable OAuth' do
+    context 'when OAuth is not configured' do
+      before do
+        sign_in(user)
 
-          visit new_project_path
-          click_link 'Import project'
-          click_link 'Bitbucket Cloud'
-        end
+        allow(Gitlab::Auth::OAuth::Provider).to receive(:enabled?).and_call_original
+        allow(Gitlab::Auth::OAuth::Provider)
+          .to receive(:enabled?).with(provider)
+          .and_return(false)
 
-        it 'shows import instructions' do
-          expect(find('.modal-body')).to have_content(bitbucket_link_content)
-        end
+        visit new_project_path
+        click_link 'Import project'
+        click_link target_link
+      end
+
+      it 'shows import instructions' do
+        expect(find('.modal-body')).to have_content(oauth_config_instructions)
       end
     end
+  end
+
+  context 'from Bitbucket', :js do
+    let(:target_link) { 'Bitbucket Cloud' }
+    let(:provider) { :bitbucket }
 
     context 'as a user' do
       let(:user) { create(:user) }
-      let(:bitbucket_link_content) { 'To enable importing projects from Bitbucket, ask your GitLab administrator to configure OAuth integration' }
+      let(:oauth_config_instructions) { 'To enable importing projects from Bitbucket, ask your GitLab administrator to configure OAuth integration' }
 
-      before do
-        sign_in(user)
-      end
-
-      it_behaves_like 'has a link to bitbucket cloud'
+      it_behaves_like 'has instructions to enable OAuth'
     end
 
     context 'as an admin' do
       let(:user) { create(:admin) }
-      let(:bitbucket_link_content) { 'To enable importing projects from Bitbucket, as administrator you need to configure OAuth integration' }
+      let(:oauth_config_instructions) { 'To enable importing projects from Bitbucket, as administrator you need to configure OAuth integration' }
 
-      before do
-        sign_in(user)
-      end
+      it_behaves_like 'has instructions to enable OAuth'
+    end
+  end
+
+  context 'from GitLab.com', :js do
+    let(:target_link) { 'GitLab.com' }
+    let(:provider) { :gitlab }
+
+    context 'as a user' do
+      let(:user) { create(:user) }
+      let(:oauth_config_instructions) { 'To enable importing projects from GitLab.com, ask your GitLab administrator to configure OAuth integration' }
+
+      it_behaves_like 'has instructions to enable OAuth'
+    end
+
+    context 'as an admin' do
+      let(:user) { create(:admin) }
+      let(:oauth_config_instructions) { 'To enable importing projects from GitLab.com, as administrator you need to configure OAuth integration' }
 
-      it_behaves_like 'has a link to bitbucket cloud'
+      it_behaves_like 'has instructions to enable OAuth'
     end
   end
 end

spec/helpers/projects_helper_spec.rb

@@ -1027,7 +1027,7 @@ RSpec.describe ProjectsHelper do
     end
   end
 
-  describe '#import_from_bitbucket_message' do
+  shared_examples 'configure import method modal' do
     before do
       allow(helper).to receive(:current_user).and_return(user)
     end
@@ -1036,7 +1036,7 @@ RSpec.describe ProjectsHelper do
       it 'returns a link to contact an administrator' do
         allow(user).to receive(:admin?).and_return(false)
 
-        expect(helper.import_from_bitbucket_message).to have_text('To enable importing projects from Bitbucket, ask your GitLab administrator to configure OAuth integration')
+        expect(subject).to have_text("To enable importing projects from #{import_method}, ask your GitLab administrator to configure OAuth integration")
       end
     end
 
@@ -1044,8 +1044,24 @@ RSpec.describe ProjectsHelper do
       it 'returns a link to configure bitbucket' do
         allow(user).to receive(:admin?).and_return(true)
 
-        expect(helper.import_from_bitbucket_message).to have_text('To enable importing projects from Bitbucket, as administrator you need to configure OAuth integration')
+        expect(subject).to have_text("To enable importing projects from #{import_method}, as administrator you need to configure OAuth integration")
       end
     end
   end
+
+  describe '#import_from_bitbucket_message' do
+    let(:import_method) { 'Bitbucket' }
+
+    subject { helper.import_from_bitbucket_message }
+
+    it_behaves_like 'configure import method modal'
+  end
+
+  describe '#import_from_gitlab_message' do
+    let(:import_method) { 'GitLab.com' }
+
+    subject { helper.import_from_gitlab_message }
+
+    it_behaves_like 'configure import method modal'
+  end
 end