Add connect to another instance UI

- add connect to another instance ui
- update UI of group import page to use gitlab-ui

app/controllers/import/bulk_imports_controller.rb

@@ -20,8 +20,9 @@ class Import::BulkImportsController < ApplicationController
       format.json do
         render json: { importable_data: serialized_importable_data }
       end
-
-      format.html
+      format.html do
+        @source_url = session[url_key]
+      end
     end
   end
 

app/views/groups/_import_group_from_another_instance_panel.html.haml

+= form_with url: configure_import_bulk_imports_path, class: 'group-form gl-show-field-errors' do |f|
+  = form_errors(@group)
+
+  .gl-border-l-solid.gl-border-r-solid.gl-border-gray-100.gl-border-1.gl-p-5
+    %h4
+      = s_('GroupsNew|Import groups from another instance of GitLab')
+    %p
+      = s_('GroupsNew|Provide credentials for another instance of GitLab to import your groups directly.')
+    .form-group.gl-display-flex.gl-flex-direction-column
+      = f.label :bulk_import_gitlab_url, s_('GroupsNew|GitLab source URL'), for: 'import_gitlab_url'
+      = f.text_field :bulk_import_gitlab_url, placeholder: 'https://gitlab.example.com', class: 'gl-form-input col-xs-12 col-sm-8',
+        required: true,
+        title: s_('GroupsNew|Please fill in GitLab source URL.'),
+        id: 'import_gitlab_url'
+    .form-group.gl-display-flex.gl-flex-direction-column
+      = f.label :bulk_import_gitlab_access_token, s_('GroupsNew|Personal access token'), for: 'import_gitlab_token'
+      .gl-font-weight-normal
+        - pat_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: help_page_path('user/profile/personal_access_tokens') }
+        = s_('GroupsNew|Navigate to user settings to find your %{link_start}personal access token%{link_end}.').html_safe % { link_start: pat_link_start, link_end: '</a>'.html_safe }
+      = f.text_field :bulk_import_gitlab_access_token, placeholder: s_('GroupsNew|e.g. h8d3f016698e...'), class: 'gl-form-input gl-mt-3 col-xs-12 col-sm-8',
+        required: true,
+        title: s_('GroupsNew|Please fill in your personal access token.'),
+        id: 'import_gitlab_token'
+  .gl-border-gray-100.gl-border-solid.gl-border-1.gl-bg-gray-10.gl-p-5
+    = f.submit s_('GroupsNew|Connect instance'), class: 'btn gl-button btn-success'

app/views/groups/_import_group_pane.html.haml → app/views/groups/_import_group_from_file_panel.html.haml

@@ -5,18 +5,22 @@
 = form_with url: import_gitlab_group_path, class: 'group-form gl-show-field-errors', multipart: true do |f|
   = form_errors(@group)
 
-  .row
-    .form-group.group-name.col-sm-12
-      = f.label :name, _('Group name'), class: 'label-bold'
-      = f.text_field :name, placeholder: s_('GroupsNew|My Awesome Group'), class: 'js-autofill-group-name form-control input-lg',
+  .gl-border-l-solid.gl-border-r-solid.gl-border-gray-100.gl-border-1.gl-p-5
+    %h4
+      = _('Import group from file')
+    %p
+      = s_('GroupsNew|Provide credentials for another instance of GitLab to import your groups directly.')
+    .form-group.gl-display-flex.gl-flex-direction-column
+      = f.label :name, _('New group name'), for: 'import_group_name'
+      = f.text_field :name, placeholder: s_('GroupsNew|My Awesome Group'), class: 'js-autofill-group-name gl-form-input col-xs-12 col-sm-8',
         required: true,
         title: _('Please fill in a descriptive name for your group.'),
-        autofocus: true
+        autofocus: true,
+        id: 'import_group_name'
 
-  .row
-    .form-group.col-xs-12.col-sm-8
-      = f.label :path, _('Group URL'), class: 'label-bold'
-      .input-group.gl-field-error-anchor
+    .form-group.gl-display-flex.gl-flex-direction-column
+      = f.label :import_group_path, _('New group URL'), for: 'import_group_path'
+      .input-group.gl-field-error-anchor.col-xs-12.col-sm-8.gl-p-0
         .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
           .input-group-text
             %span
@@ -35,18 +39,12 @@
         %span.gl-path-suggestions
       %p.validation-success.gl-field-success.field-validation.hide= _('Group path is available.')
       %p.validation-pending.gl-field-error-ignore.field-validation.hide= _('Checking group path availability...')
-
-  .row
-    .form-group.col-md-12
-      = s_('GroupsNew|To copy a GitLab group between installations, navigate to the group settings page for the original installation, generate an export file, and upload it here.')
-  .row
-    .form-group.col-sm-12
-      = f.label :file, s_('GroupsNew|Import a GitLab group export file'), class: 'label-bold'
-      %div
-        = render 'shared/file_picker_button', f: f, field: :file, help_text: nil
-
-  .row
-    .form-actions.col-sm-12
-      = f.submit s_('GroupsNew|Import group'), class: 'btn btn-success'
-      = link_to _('Cancel'), new_group_path, class: 'btn btn-cancel'
-
+    .form-group
+      = f.label :file, s_('GroupsNew|Upload file')
+      .gl-font-weight-normal
+        - import_export_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: help_page_path('user/group/settings/import_export') }
+        = s_('GroupsNew|To import a group, navigate to the group settings for the GitLab source instance, %{link_start}generate an export file%{link_end}, and upload it here.').html_safe % { link_start: import_export_link_start, link_end: '</a>'.html_safe }
+      .gl-mt-3
+        = render 'shared/file_picker_button', f: f, field: :file, help_text: nil, classes: 'gl-button btn-success-secondary gl-mr-2'
+  .gl-border-gray-100.gl-border-solid.gl-border-1.gl-bg-gray-10.gl-p-5
+    = f.submit _('Import'), class: 'btn gl-button btn-success'

app/views/groups/new.html.haml

@@ -31,14 +31,17 @@
             %span.d-none.d-sm-block= s_('GroupsNew|Import group')
             %span.d-block.d-sm-none= s_('GroupsNew|Import')
 
-      .tab-content.gitlab-tab-content
+      .tab-content.gitlab-tab-content.gl-border-none
         .tab-pane.js-toggle-container{ id: 'create-group-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' }
           = form_for @group, html: { class: 'group-form gl-show-field-errors' } do |f|
             = render 'new_group_fields', f: f, group_name_id: 'create-group-name'
 
-        .tab-pane.js-toggle-container{ id: 'import-group-pane', class: active_when(active_tab) == 'import', role: 'tabpanel' }
+        .tab-pane.no-padding.js-toggle-container{ id: 'import-group-pane', class: active_when(active_tab) == 'import', role: 'tabpanel' }
           - if import_sources_enabled?
-            = render 'import_group_pane', active_tab: active_tab, autofocus: true
+            - if Feature.enabled?(:bulk_import)
+              = render 'import_group_from_another_instance_panel'
+              .gl-mt-7.gl-border-b-solid.gl-border-gray-100.gl-border-1
+            = render 'import_group_from_file_panel'
           - else
             .nothing-here-block
               %h4= s_('GroupsNew|No import options available')

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

-- page_title 'Bulk Import'
+- add_to_breadcrumbs 'New group', admin_users_path
+- add_page_specific_style 'page_bundles/import'
+- breadcrumb_title _('Import groups')
+
+%h1.gl-my-0.gl-py-4.gl-font-size-h1.gl-border-solid.gl-border-gray-200.gl-border-0.gl-border-b-1
+  = s_('ImportGroups|Import groups from GitLab')
+%p.gl-my-0.gl-py-5.gl-border-solid.gl-border-gray-200.gl-border-0.gl-border-b-1
+  = s_('ImportGroups|Importing groups from %{link}').html_safe % { link: external_link(@source_url, @source_url) }

app/views/shared/_file_picker_button.html.haml

+- classes = local_assigns.fetch(:classes, '')
+
 %span.js-filepicker
-  %button.btn.js-filepicker-button{ type: 'button' }= _("Choose file…")
+  %button.btn.js-filepicker-button{ type: 'button', class: classes }= _("Choose file…")
   %span.file_name.js-filepicker-filename= _("No file chosen")
   = f.file_field field, class: "js-filepicker-input hidden"
   - if help_text.present?

locale/gitlab.pot

@@ -13880,6 +13880,9 @@ msgstr ""
 msgid "GroupsEmptyState|You can manage your group member’s permissions and access to each project in the group."
 msgstr ""
 
+msgid "GroupsNew|Connect instance"
+msgstr ""
+
 msgid "GroupsNew|Contact an administrator to enable options for importing your group."
 msgstr ""
 
@@ -13889,22 +13892,46 @@ msgstr ""
 msgid "GroupsNew|Create group"
 msgstr ""
 
-msgid "GroupsNew|Import"
+msgid "GroupsNew|GitLab source URL"
 msgstr ""
 
-msgid "GroupsNew|Import a GitLab group export file"
+msgid "GroupsNew|Import"
 msgstr ""
 
 msgid "GroupsNew|Import group"
 msgstr ""
 
+msgid "GroupsNew|Import groups from another instance of GitLab"
+msgstr ""
+
 msgid "GroupsNew|My Awesome Group"
 msgstr ""
 
+msgid "GroupsNew|Navigate to user settings to find your %{link_start}personal access token%{link_end}."
+msgstr ""
+
 msgid "GroupsNew|No import options available"
 msgstr ""
 
-msgid "GroupsNew|To copy a GitLab group between installations, navigate to the group settings page for the original installation, generate an export file, and upload it here."
+msgid "GroupsNew|Personal access token"
+msgstr ""
+
+msgid "GroupsNew|Please fill in GitLab source URL."
+msgstr ""
+
+msgid "GroupsNew|Please fill in your personal access token."
+msgstr ""
+
+msgid "GroupsNew|Provide credentials for another instance of GitLab to import your groups directly."
+msgstr ""
+
+msgid "GroupsNew|To import a group, navigate to the group settings for the GitLab source instance, %{link_start}generate an export file%{link_end}, and upload it here."
+msgstr ""
+
+msgid "GroupsNew|Upload file"
+msgstr ""
+
+msgid "GroupsNew|e.g. h8d3f016698e..."
 msgstr ""
 
 msgid "GroupsTree|Are you sure you want to leave the \"%{fullName}\" group?"
@@ -14371,6 +14398,12 @@ msgstr ""
 msgid "Import from Jira"
 msgstr ""
 
+msgid "Import group from file"
+msgstr ""
+
+msgid "Import groups"
+msgstr ""
+
 msgid "Import in progress"
 msgstr ""
 
@@ -14440,6 +14473,12 @@ msgstr ""
 msgid "ImportButtons|Connect repositories from"
 msgstr ""
 
+msgid "ImportGroups|Import groups from GitLab"
+msgstr ""
+
+msgid "ImportGroups|Importing groups from %{link}"
+msgstr ""
+
 msgid "ImportProjects|%{provider} rate limit exceeded. Try again later"
 msgstr ""
 
@@ -18563,6 +18602,12 @@ msgstr ""
 msgid "New group"
 msgstr ""
 
+msgid "New group URL"
+msgstr ""
+
+msgid "New group name"
+msgstr ""
+
 msgid "New health check access token has been generated!"
 msgstr ""
 

spec/features/groups/import_export/connect_instance_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Import/Export - Connect to another instance', :js do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group) }
+
+  before_all do
+    group.add_owner(user)
+  end
+
+  before do
+    gitlab_sign_in(user)
+
+    visit new_group_path
+
+    find('#import-group-tab').click
+  end
+
+  context 'when the user provides valid credentials' do
+    it 'successfully connects to remote instance' do
+      source_url = 'https://gitlab.com'
+      pat = 'demo-pat'
+
+      expect(page).to have_content 'Import groups from another instance of GitLab'
+
+      fill_in :bulk_import_gitlab_url, with: source_url
+      fill_in :bulk_import_gitlab_access_token, with: pat
+
+      click_on 'Connect instance'
+
+      expect(page).to have_content 'Importing groups from %{url}' % { url: source_url }
+    end
+  end
+
+  context 'when the user provides invalid url' do
+    it 'reports an error' do
+      source_url = 'invalid-url'
+      pat = 'demo-pat'
+
+      fill_in :bulk_import_gitlab_url, with: source_url
+      fill_in :bulk_import_gitlab_access_token, with: pat
+
+      click_on 'Connect instance'
+
+      expect(page).to have_content 'Specified URL cannot be used'
+    end
+  end
+
+  context 'when the user does not fill in source URL' do
+    it 'reports an error' do
+      pat = 'demo-pat'
+
+      fill_in :bulk_import_gitlab_access_token, with: pat
+
+      click_on 'Connect instance'
+
+      expect(page).to have_content 'Please fill in GitLab source URL'
+    end
+  end
+
+  context 'when the user does not fill in access token' do
+    it 'reports an error' do
+      source_url = 'https://gitlab.com'
+
+      fill_in :bulk_import_gitlab_url, with: source_url
+
+      click_on 'Connect instance'
+
+      expect(page).to have_content 'Please fill in your personal access token'
+    end
+  end
+end

spec/features/groups/import_export/import_file_spec.rb

@@ -32,12 +32,12 @@ RSpec.describe 'Import/Export - Group Import', :js do
         fill_in :group_name, with: group_name
         find('#import-group-tab').click
 
-        expect(page).to have_content 'Import a GitLab group export file'
+        expect(page).to have_content 'Import group from file'
         attach_file(file) do
           find('.js-filepicker-button').click
         end
 
-        expect { click_on 'Import group' }.to change { Group.count }.by 1
+        expect { click_on 'Import' }.to change { Group.count }.by 1
 
         group = Group.find_by(name: group_name)
 
@@ -60,7 +60,7 @@ RSpec.describe 'Import/Export - Group Import', :js do
           find('.js-filepicker-button').click
         end
 
-        expect { click_on 'Import group' }.to change { Group.count }.by 1
+        expect { click_on 'Import' }.to change { Group.count }.by 1
 
         group = Group.find_by(name: 'Test Group Import')
         expect(group.path).to eq 'custom-path'
@@ -94,7 +94,7 @@ RSpec.describe 'Import/Export - Group Import', :js do
         find('.js-filepicker-button').click
       end
 
-      expect { click_on 'Import group' }.not_to change { Group.count }
+      expect { click_on 'Import' }.not_to change { Group.count }
 
       page.within('.flash-container') do
         expect(page).to have_content('Unable to process group import file')

spec/frontend/test_setup.js

@@ -25,7 +25,7 @@ afterEach(() =>
   }),
 );
 
-initializeTestTimeout(process.env.CI ? 6000 : 500);
+initializeTestTimeout(process.env.CI ? 6000 : 5000);
 
 Vue.config.devtools = false;
 Vue.config.productionTip = false;