Add regenerate confirmation modal

app/assets/stylesheets/framework/buttons.scss

@@ -242,6 +242,10 @@
     &:not(:last-child) {
       margin-right: 5px;
     }
+
+    &.hide {
+      display: none;
+    }
   }
 }
 

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

@@ -25,6 +25,7 @@ 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');
   }
 
   init() {
@@ -35,7 +36,9 @@ 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', e => this.regeneratePublicSshKey(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));
   }
 
   /**
@@ -237,10 +240,9 @@ export default class MirrorPull {
   regeneratePublicSshKey(event) {
     event.preventDefault();
 
-    const button = this.$regeneratePublicSshKeyButton;
-
-    if (!window.confirm(button.data('confirm'))) return; // eslint-disable-line no-alert
+    this.$regeneratePublicSshKeyModal.toggle(false);
 
+    const button = this.$regeneratePublicSshKeyButton;
     const spinner = $('.js-spinner', button);
     const endpoint = button.data('endpoint');
 

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

@@ -27,8 +27,8 @@
       = clipboard_button(text: import_data.ssh_public_key, title: _("Copy SSH public key to clipboard"), class: 'prepend-top-10 btn-copy-ssh-public-key')
 
     = button_tag type: 'button',
-      data: { endpoint: project_mirror_path(@project, project: { import_data_attributes: regen_data }),
-      confirm: _('Are you sure you want to regenerate public key? You will have to update the public key on the remote server before mirroring will work again.') },
+      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
-      = sprite_icon('spinner', css_class: 'fa-spin hide js-spinner')
+      %i.fa.fa-spinner.fa-spin.hide.js-spinner
       = _('Regenerate key')
+    = render 'projects/mirrors/pull/regenerate_public_ssh_key_confirm_modal'

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

+.modal.js-regenerate-public-ssh-key-confirm-modal{ tabindex: -1 }
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %h3.modal-title.page-title
+          Regenerate public SSH key?
+        %button.close.js-cancel{ type: 'button', 'data-dismiss': 'modal', 'aria-label' => _('Close') }
+          %span{ 'aria-hidden': true } ×
+      .modal-body
+        %p= _('Are you sure you want to regenerate the public key? You will have to update the public key on the remote server before mirroring will work again.')
+      .form-actions.modal-footer
+        = button_tag _('Cancel'), type: 'button', class: 'btn js-cancel'
+        = button_tag _('Confirm'), type: 'button', class: 'btn btn-danger js-confirm'
\ No newline at end of file