Improve mirroring repositories UI

The layout is broken when pull mirrors is available.

app/views/projects/mirrors/_mirror_repos.html.haml

@@ -12,10 +12,10 @@
 
   .settings-content
     = form_for @project, url: project_mirror_path(@project), html: { class: 'gl-show-field-errors js-mirror-form', autocomplete: 'false', data: mirrors_form_data_attributes } do |f|
-      .card
-        .card-header
-          %h3.card-title= _('Mirror a repository')
-        .card-body
+      .panel.panel-default
+        .panel-heading
+          %h3.panel-title= _('Mirror a repository')
+        .panel-body
           %div= form_errors(@project)
 
           .form-group.has-feedback
@@ -34,7 +34,7 @@
         .panel-footer
           = f.submit _('Mirror repository'), class: 'btn btn-success', name: :update_remote_mirror
 
-    .card
+    .panel.panel-default
       .table-responsive
         %table.table.push-pull-table
           %thead

ee/app/assets/javascripts/mirrors/mirror_pull.js

@@ -25,7 +25,9 @@ export default class MirrorPull {
     this.$wellSSHAuth = this.$form.find('.js-well-ssh-auth');
     this.$sshPublicKeyWrap = this.$form.find('.js-ssh-public-key-wrap');
     this.$regeneratePublicSshKeyButton = this.$wellSSHAuth.find('.js-btn-regenerate-ssh-key');
-    this.$regeneratePublicSshKeyModal = this.$wellSSHAuth.find('.js-regenerate-public-ssh-key-confirm-modal');
+    this.$regeneratePublicSshKeyModal = this.$wellSSHAuth.find(
+      '.js-regenerate-public-ssh-key-confirm-modal',
+    );
   }
 
   init() {
@@ -36,9 +38,15 @@ export default class MirrorPull {
     this.$dropdownAuthType.on('change', e => this.handleAuthTypeChange(e));
     this.$btnDetectHostKeys.on('click', e => this.handleDetectHostKeys(e));
     this.$btnSSHHostsShowAdvanced.on('click', e => this.handleSSHHostsAdvanced(e));
-    this.$regeneratePublicSshKeyButton.on('click', () => this.$regeneratePublicSshKeyModal.toggle(true));
-    $('.js-confirm', this.$regeneratePublicSshKeyModal).on('click', e => this.regeneratePublicSshKey(e));
-    $('.js-cancel', this.$regeneratePublicSshKeyModal).on('click', () => this.$regeneratePublicSshKeyModal.toggle(false));
+    this.$regeneratePublicSshKeyButton.on('click', () =>
+      this.$regeneratePublicSshKeyModal.toggle(true),
+    );
+    $('.js-confirm', this.$regeneratePublicSshKeyModal).on('click', e =>
+      this.regeneratePublicSshKey(e),
+    );
+    $('.js-cancel', this.$regeneratePublicSshKeyModal).on('click', () =>
+      this.$regeneratePublicSshKeyModal.toggle(false),
+    );
   }
 
   /**
@@ -77,11 +85,11 @@ export default class MirrorPull {
   handleDetectHostKeys() {
     const projectMirrorSSHEndpoint = this.$form.data('project-mirror-ssh-endpoint');
     const repositoryUrl = this.$repositoryUrl.val();
-    const $btnLoadSpinner = this.$btnDetectHostKeys.find('.detect-host-keys-load-spinner');
+    const $btnLoadSpinner = this.$btnDetectHostKeys.find('.js-spinner');
 
     // Disable button while we make request
     this.$btnDetectHostKeys.disable();
-    $btnLoadSpinner.removeClass('hidden');
+    $btnLoadSpinner.removeClass('d-none');
 
     // Make backOff polling to get data
     backOff((next, stop) => {
@@ -102,7 +110,7 @@ export default class MirrorPull {
         .catch(stop);
     })
       .then(res => {
-        $btnLoadSpinner.addClass('hidden');
+        $btnLoadSpinner.addClass('d-none');
         // Once data is received, we show verification info along with Host keys and fingerprints
         this.$hostKeysInformation
           .find('.js-fingerprint-verification')

ee/app/views/projects/mirrors/pull/_authentication_method.html.haml

@@ -28,6 +28,6 @@
     = button_tag type: 'button',
       data: { endpoint: project_mirror_path(@project, project: { import_data_attributes: regen_data }) },
       class: "btn btn-inverted btn-warning prepend-top-10 js-btn-regenerate-ssh-key#{ ' collapse' unless ssh_public_key_present }" do
-      %i.fa.fa-spinner.fa-spin.js-spinner
+      = icon('spinner spin', class: 'js-spinner d-none')
       = _('Regenerate key')
     = render 'projects/mirrors/pull/regenerate_public_ssh_key_confirm_modal'

ee/app/views/projects/mirrors/pull/_ssh_host_keys.html.haml

@@ -4,7 +4,7 @@
 
 .form-group.js-ssh-host-keys-section{ class: ('collapse' unless import_data.ssh_import?) }
   %button.btn.btn-inverted.btn-success.inline.js-detect-host-keys.append-right-10{ type: 'button' }
-    = icon('spinner spin', class: 'detect-host-keys-load-spinner hidden')
+    = icon('spinner spin', class: 'js-spinner d-none')
     = _('Detect host keys')
   .fingerprint-ssh-info.js-fingerprint-ssh-info.prepend-top-10.append-bottom-10{ class: ('collapse' unless import_data.ssh_import?) }
     %label.label-bold

ee/spec/features/projects/mirror_spec.rb

@@ -139,8 +139,12 @@ describe 'Project mirror', :js do
         # Check regenerating the public key works
         click_without_sidekiq 'Regenerate key'
         find('.js-regenerate-public-ssh-key-confirm-modal .js-confirm').click
+
+        expect(page).to have_selector(".fa-spinner")
+
         wait_for_requests
 
+        expect(page).not_to have_selector(".fa-spinner")
         expect(page).not_to have_content(first_key)
         expect(page).to have_content(import_data.reload.ssh_public_key)
       end
@@ -159,8 +163,12 @@ describe 'Project mirror', :js do
           fill_in 'Git repository URL', with: 'ssh://example.com'
           select('Pull', from: 'Mirror direction')
           click_on 'Detect host keys'
+
+          expect(page).to have_selector(".fa-spinner")
+
           wait_for_requests
 
+          expect(page).not_to have_selector(".fa-spinner")
           expect(page).to have_content(key.fingerprint)
 
           click_on 'Input host keys manually'
@@ -178,7 +186,12 @@ describe 'Project mirror', :js do
           fill_in 'Git repository URL', with: 'ssh://example.com'
           select('Pull', from: 'Mirror direction')
           click_on 'Detect host keys'
+
+          expect(page).to have_selector(".fa-spinner")
+
           wait_for_requests
+
+          expect(page).not_to have_selector(".fa-spinner")
         end
 
         # Appears in the flash

ee/spec/features/projects/settings/ee/repository_mirrors_settings_spec.rb

@@ -12,17 +12,36 @@ describe 'Project settings > [EE] repository' do
   end
 
   context 'unlicensed' do
-    before do
+    it 'does not show pull mirror settings', :js do
       stub_licensed_features(repository_mirrors: false)
 
       visit project_settings_repository_path(project)
-    end
 
-    it 'does not show pull mirror settings', :js do
-      expect(page).to have_no_selector('#project_mirror')
-      expect(page).to have_no_selector('#project_import_url')
+      page.within('.project-mirror-settings') do
+        expect(page).to have_selector('#url')
+        expect(page).to have_selector('#mirror_direction')
+        expect(page).to have_no_selector('#project_mirror', visible: false)
         expect(page).to have_no_selector('#project_mirror_user_id', visible: false)
+        expect(page).to have_no_selector('#project_mirror_overwrites_diverged_branches')
         expect(page).to have_no_selector('#project_mirror_trigger_builds')
       end
     end
+  end
+
+  context 'licensed' do
+    it 'shows pull mirror settings', :js do
+      stub_licensed_features(repository_mirrors: true)
+
+      visit project_settings_repository_path(project)
+
+      page.within('.project-mirror-settings') do
+        expect(page).to have_selector('#url')
+        expect(page).to have_selector('#mirror_direction')
+        expect(page).to have_selector('#project_mirror', visible: false)
+        expect(page).to have_selector('#project_mirror_user_id', visible: false)
+        expect(page).to have_selector('#project_mirror_overwrites_diverged_branches')
+        expect(page).to have_selector('#project_mirror_trigger_builds')
+      end
+    end
+  end
 end