Use custom modal instead of browser confirm

This overwrites `Rails.confirm` from `@rails/ujs` in order to show a
modal instead of a Browser `window.confirm`.

app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue

+<script>
+import { GlModal } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  cancelAction: { text: __('Cancel') },
+  components: {
+    GlModal,
+  },
+  props: {
+    primaryText: {
+      type: String,
+      required: false,
+      default: __('OK'),
+    },
+    primaryVariant: {
+      type: String,
+      required: false,
+      default: 'confirm',
+    },
+  },
+  computed: {
+    primaryAction() {
+      return { text: this.primaryText, attributes: { variant: this.primaryVariant } };
+    },
+  },
+  mounted() {
+    this.$refs.modal.show();
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    ref="modal"
+    size="sm"
+    modal-id="confirmationModal"
+    body-class="gl-display-flex"
+    :action-primary="primaryAction"
+    :action-cancel="$options.cancelAction"
+    hide-header
+    @primary="$emit('confirmed')"
+    @hidden="$emit('closed')"
+  >
+    <div class="gl-align-self-center"><slot></slot></div>
+  </gl-modal>
+</template>

app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js

+import Vue from 'vue';
+
+export function confirmViaGlModal(message, element) {
+  return new Promise((resolve) => {
+    let confirmed = false;
+
+    const props = {};
+
+    const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant');
+
+    if (confirmBtnVariant) {
+      props.primaryVariant = confirmBtnVariant;
+    }
+    const screenReaderText =
+      element.querySelector('.gl-sr-only')?.textContent ||
+      element.querySelector('.sr-only')?.textContent ||
+      element.getAttribute('aria-label');
+
+    if (screenReaderText) {
+      props.primaryText = screenReaderText;
+    }
+
+    const component = new Vue({
+      components: {
+        ConfirmModal: () => import('./confirm_modal.vue'),
+      },
+      render(h) {
+        return h(
+          'confirm-modal',
+          {
+            props,
+            on: {
+              confirmed() {
+                confirmed = true;
+              },
+              closed() {
+                component.$destroy();
+                resolve(confirmed);
+              },
+            },
+          },
+          [message],
+        );
+      },
+    }).$mount();
+  });
+}

app/assets/javascripts/lib/utils/rails_ujs.js

 import Rails from '@rails/ujs';
+import { confirmViaGlModal } from './confirm_via_gl_modal/confirm_via_gl_modal';
+
+function monkeyPatchConfirmModal() {
+  /**
+   * This function is used to replace the `Rails.confirm` which uses `window.confirm`
+   *
+   * This function opens a confirmation modal which will resolve in a promise.
+   * Because the `Rails.confirm` API is synchronous, we go with a little hack here:
+   *
+   * 1. User clicks on something with `data-confirm`
+   * 2. We open the modal and return `false`, ending the "Rails" event chain
+   * 3. If the modal is closed and the user "confirmed" the action
+   *     1. replace the `Rails.confirm` with a function that always returns `true`
+   *     2. click the same element programmatically
+   *
+   * @param message {String} Message to be shown in the modal
+   * @param element {HTMLElement} Element that was clicked on
+   * @returns {boolean}
+   */
+  function confirmViaModal(message, element) {
+    confirmViaGlModal(message, element)
+      .then((confirmed) => {
+        if (confirmed) {
+          Rails.confirm = () => true;
+          element.click();
+          Rails.confirm = confirmViaModal;
+        }
+      })
+      .catch(() => {});
+    return false;
+  }
+
+  Rails.confirm = confirmViaModal;
+}
+
+if (gon?.features?.bootstrapConfirmationModals) {
+  monkeyPatchConfirmModal();
+}
 
 export const initRails = () => {
   // eslint-disable-next-line no-underscore-dangle

config/feature_flags/development/bootstrap_confirmation_modals.yml

+---
+name: bootstrap_confirmation_modals
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/73167
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/344658
+milestone: '14.5'
+type: development
+group: group::foundations
+default_enabled: false

ee/spec/features/admin/admin_settings_spec.rb

@@ -6,6 +6,7 @@ RSpec.describe 'Admin updates EE-only settings' do
   include StubENV
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     stub_env('IN_MEMORY_APPLICATION_SETTINGS', 'false')
     admin = create(:admin)
     sign_in(admin)

ee/spec/features/admin/subscriptions/admin_views_subscription_spec.rb

@@ -6,6 +6,7 @@ RSpec.describe 'Admin views Subscription', :js do
   let_it_be(:admin) { create(:admin) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(admin)
     gitlab_enable_admin_mode_sign_in(admin)
   end

ee/spec/features/epic_boards/epic_boards_spec.rb

@@ -115,6 +115,8 @@ RSpec.describe 'epic boards', :js do
     context 'lists' do
       let_it_be(:label_list2) { create(:epic_list, epic_board: epic_board, label: label2, position: 1) }
 
+      stub_feature_flags(bootstrap_confirmation_modals: false)
+
       it 'changes position of list' do
         expect(find_board_list(2)).to have_content(label.title)
         expect(find_board_list(3)).to have_content(label2.title)

ee/spec/features/groups/members/leave_group_spec.rb

@@ -13,6 +13,7 @@ RSpec.describe 'Groups > Members > Leave group' do
   before do
     user.update!(provisioned_by_group: group)
     sign_in(user)
+    stub_feature_flags(bootstrap_confirmation_modals: false)
   end
 
   context 'with block_password_auth_for_saml_users feature flag switched on' do

ee/spec/features/projects/path_locks_spec.rb

@@ -9,6 +9,7 @@ RSpec.describe 'Path Locks', :js do
 
   before do
     allow(project).to receive(:feature_available?).with(:file_locks) { true }
+    stub_feature_flags(bootstrap_confirmation_modals: false)
 
     project.add_maintainer(user)
     sign_in(user)

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

@@ -34,6 +34,7 @@ RSpec.describe 'Protected Environments' do
 
   context 'logged in as a maintainer' do
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       project.add_maintainer(user)
 
       visit project_settings_ci_cd_path(project)

ee/spec/support/shared_examples/features/protected_branches_access_control_shared_examples.rb

@@ -173,6 +173,7 @@ RSpec.shared_examples "protected branches > access control > EE" do
     let!(:protected_branch) { create(:protected_branch, project: project) }
 
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       stub_licensed_features(unprotection_restrictions: true)
     end
 

lib/gitlab/gon_helper.rb

@@ -58,6 +58,7 @@ module Gitlab
       push_frontend_feature_flag(:new_header_search, default_enabled: :yaml)
       push_frontend_feature_flag(:suppress_apollo_errors_during_navigation, current_user, default_enabled: :yaml)
       push_frontend_feature_flag(:configure_iac_scanning_via_mr, current_user, default_enabled: :yaml)
+      push_frontend_feature_flag(:bootstrap_confirmation_modals, default_enabled: :yaml)
     end
 
     # Exposes the state of a feature flag to the frontend code.

spec/features/admin/admin_disables_two_factor_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'Admin disables 2FA for a user' do
   it 'successfully', :js do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     admin = create(:admin)
     sign_in(admin)
     gitlab_enable_admin_mode_sign_in(admin)

spec/features/admin/admin_groups_spec.rb

@@ -252,6 +252,7 @@ RSpec.describe 'Admin Groups' do
 
   describe 'admin remove themself from a group', :js, quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/222342' do
     it 'removes admin from the group' do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       group.add_user(current_user, Gitlab::Access::DEVELOPER)
 
       visit group_group_members_path(group)

spec/features/admin/admin_hooks_spec.rb

@@ -79,6 +79,7 @@ RSpec.describe 'Admin::Hooks' do
     let(:hook_url) { generate(:url) }
 
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       create(:system_hook, url: hook_url)
     end
 

spec/features/admin/admin_labels_spec.rb

@@ -14,6 +14,7 @@ RSpec.describe 'admin issues labels' do
 
   describe 'list' do
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       visit admin_labels_path
     end
 

spec/features/admin/admin_users_impersonation_tokens_spec.rb

@@ -74,6 +74,7 @@ RSpec.describe 'Admin > Users > Impersonation Tokens', :js do
     let!(:impersonation_token) { create(:personal_access_token, :impersonation, user: user) }
 
     it "allows revocation of an active impersonation token" do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       visit admin_user_impersonation_tokens_path(user_id: user.username)
 
       accept_confirm { click_on "Revoke" }

spec/features/admin/admin_uses_repository_checks_spec.rb

@@ -8,6 +8,7 @@ RSpec.describe 'Admin uses repository checks', :request_store do
   let(:admin) { create(:admin) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     stub_env('IN_MEMORY_APPLICATION_SETTINGS', 'false')
     sign_in(admin)
   end

spec/features/admin/users/user_spec.rb

@@ -9,6 +9,7 @@ RSpec.describe 'Admin::Users::User' do
   let_it_be(:current_user) { create(:admin) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(current_user)
     gitlab_enable_admin_mode_sign_in(current_user)
   end

spec/features/admin/users/users_spec.rb

@@ -9,6 +9,7 @@ RSpec.describe 'Admin::Users' do
   let_it_be(:current_user) { create(:admin) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(current_user)
     gitlab_enable_admin_mode_sign_in(current_user)
   end

spec/features/boards/boards_spec.rb

@@ -536,6 +536,7 @@ RSpec.describe 'Project issue boards', :js do
     let_it_be(:user_guest) { create(:user) }
 
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       project.add_guest(user_guest)
       sign_in(user_guest)
       visit project_board_path(project, board)

spec/features/groups/members/leave_group_spec.rb

@@ -10,6 +10,7 @@ RSpec.describe 'Groups > Members > Leave group' do
   let(:group) { create(:group) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 

spec/features/merge_request/user_comments_on_diff_spec.rb

@@ -14,6 +14,7 @@ RSpec.describe 'User comments on a diff', :js do
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     project.add_maintainer(user)
     sign_in(user)
 

spec/features/merge_request/user_posts_diff_notes_spec.rb

@@ -18,6 +18,7 @@ RSpec.describe 'Merge request > User posts diff notes', :js do
 
     project.add_developer(user)
     sign_in(user)
+    stub_feature_flags(bootstrap_confirmation_modals: false)
   end
 
   context 'when hovering over a parallel view diff file' do

spec/features/merge_request/user_posts_notes_spec.rb

@@ -18,8 +18,10 @@ RSpec.describe 'Merge request > User posts notes', :js do
   end
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     project.add_maintainer(user)
     sign_in(user)
+
     visit project_merge_request_path(project, merge_request)
   end
 

spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb

@@ -79,6 +79,7 @@ RSpec.describe 'Merge request > User sees avatars on diff notes', :js do
   %w(parallel).each do |view|
     context "#{view} view" do
       before do
+        stub_feature_flags(bootstrap_confirmation_modals: false)
         visit diffs_project_merge_request_path(project, merge_request, view: view)
 
         wait_for_requests

spec/features/merge_request/user_sees_deployment_widget_spec.rb

@@ -110,6 +110,7 @@ RSpec.describe 'Merge request > User sees deployment widget', :js do
       let(:manual) { create(:ci_build, :manual, pipeline: pipeline, name: 'close_app') }
 
       before do
+        stub_feature_flags(bootstrap_confirmation_modals: false)
         build.success!
         deployment.update!(on_stop: manual.name)
         visit project_merge_request_path(project, merge_request)

spec/features/profile_spec.rb

@@ -6,6 +6,7 @@ RSpec.describe 'Profile account page', :js do
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 
@@ -80,6 +81,7 @@ RSpec.describe 'Profile account page', :js do
   describe 'when I reset incoming email token' do
     before do
       allow(Gitlab.config.incoming_email).to receive(:enabled).and_return(true)
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       visit profile_personal_access_tokens_path
     end
 

spec/features/profiles/active_sessions_spec.rb

@@ -11,6 +11,10 @@ RSpec.describe 'Profile > Active Sessions', :clean_gitlab_redis_shared_state do
 
   let(:admin) { create(:admin) }
 
+  before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
+  end
+
   it 'user sees their active sessions' do
     travel_to(Time.zone.parse('2018-03-12 09:06')) do
       Capybara::Session.new(:session1)

spec/features/profiles/oauth_applications_spec.rb

@@ -7,6 +7,7 @@ RSpec.describe 'Profile > Applications' do
   let(:application) { create(:oauth_application, owner: user) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 

spec/features/profiles/personal_access_tokens_spec.rb

@@ -34,6 +34,7 @@ RSpec.describe 'Profile > Personal Access Tokens', :js do
   end
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 

spec/features/projects/branches/user_deletes_branch_spec.rb

@@ -35,6 +35,7 @@ RSpec.describe "User deletes branch", :js do
 
   context 'when the feature flag :delete_branch_confirmation_modals is disabled' do
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       stub_feature_flags(delete_branch_confirmation_modals: false)
     end
 

spec/features/projects/branches_spec.rb

@@ -179,6 +179,7 @@ RSpec.describe 'Branches' do
       context 'when the delete_branch_confirmation_modals feature flag is disabled' do
         it 'removes branch after confirmation', :js do
           stub_feature_flags(delete_branch_confirmation_modals: false)
+          stub_feature_flags(bootstrap_confirmation_modals: false)
 
           visit project_branches_filtered_path(project, state: 'all')
 

spec/features/projects/commit/comments/user_deletes_comments_spec.rb

@@ -11,6 +11,7 @@ RSpec.describe "User deletes comments on a commit", :js do
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
     project.add_developer(user)
 

spec/features/projects/commit/user_comments_on_commit_spec.rb

@@ -93,6 +93,8 @@ RSpec.describe "User comments on commit", :js do
 
   context "when deleting comment" do
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
+
       visit(project_commit_path(project, sample_commit.id))
 
       add_note(comment_text)

spec/features/projects/environments/environments_spec.rb

@@ -143,6 +143,8 @@ RSpec.describe 'Environments page', :js do
       create(:environment, project: project, state: :available)
     end
 
+    stub_feature_flags(bootstrap_confirmation_modals: false)
+
     context 'when there are no deployments' do
       before do
         visit_environments(project)

spec/features/projects/jobs/user_browses_job_spec.rb

@@ -12,6 +12,7 @@ RSpec.describe 'User browses a job', :js do
   before do
     project.add_maintainer(user)
     project.enable_ci
+    stub_feature_flags(bootstrap_confirmation_modals: false)
 
     sign_in(user)
 

spec/features/projects/members/member_leaves_project_spec.rb

@@ -9,6 +9,7 @@ RSpec.describe 'Projects > Members > Member leaves project' do
   before do
     project.add_developer(user)
     sign_in(user)
+    stub_feature_flags(bootstrap_confirmation_modals: false)
   end
 
   it 'user leaves project' do

spec/features/projects/members/user_requests_access_spec.rb

@@ -11,6 +11,7 @@ RSpec.describe 'Projects > Members > User requests access', :js do
   before do
     sign_in(user)
     visit project_path(project)
+    stub_feature_flags(bootstrap_confirmation_modals: false)
   end
 
   it 'request access feature is disabled' do

spec/features/projects/pages/user_adds_domain_spec.rb

@@ -14,6 +14,8 @@ RSpec.describe 'User adds pages domain', :js do
     project.add_maintainer(user)
 
     sign_in(user)
+
+    stub_feature_flags(bootstrap_confirmation_modals: false)
   end
 
   context 'when pages are exposed on external HTTP address', :http_pages_enabled do

spec/features/projects/pages/user_edits_lets_encrypt_settings_spec.rb

@@ -14,6 +14,7 @@ RSpec.describe "Pages with Let's Encrypt", :https_pages_enabled do
   before do
     allow(Gitlab.config.pages).to receive(:enabled).and_return(true)
     stub_lets_encrypt_settings
+    stub_feature_flags(bootstrap_confirmation_modals: false)
 
     project.add_role(user, role)
     sign_in(user)

spec/features/projects/pages/user_edits_settings_spec.rb

@@ -176,6 +176,7 @@ RSpec.describe 'Pages edits pages settings', :js do
   describe 'Remove page' do
     context 'when pages are deployed' do
       before do
+        stub_feature_flags(bootstrap_confirmation_modals: false)
         project.mark_pages_as_deployed
       end
 

spec/features/projects/pipeline_schedules_spec.rb

@@ -11,6 +11,7 @@ RSpec.describe 'Pipeline Schedules', :js do
 
   context 'logged in as maintainer' do
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       project.add_maintainer(user)
       gitlab_sign_in(user)
     end

spec/features/projects/pipelines/pipelines_spec.rb

@@ -317,6 +317,7 @@ RSpec.describe 'Pipelines', :js do
         end
 
         before do
+          stub_feature_flags(bootstrap_confirmation_modals: false)
           visit_project_pipelines
         end
 

spec/features/projects/settings/access_tokens_spec.rb

@@ -13,6 +13,7 @@ RSpec.describe 'Project > Settings > Access Tokens', :js do
   end
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 

spec/features/projects/settings/user_searches_in_settings_spec.rb

@@ -7,6 +7,7 @@ RSpec.describe 'User searches project settings', :js do
   let_it_be(:project) { create(:project, :repository, namespace: user.namespace, pages_https_only: false) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 

spec/features/snippets/notes_on_personal_snippets_spec.rb

@@ -18,6 +18,7 @@ RSpec.describe 'Comments on personal snippets', :js do
   end
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in user
     visit snippet_path(snippet)
 

spec/features/snippets/user_creates_snippet_spec.rb

@@ -16,6 +16,7 @@ RSpec.describe 'User creates snippet', :js do
   let(:snippet_title_field) { 'snippet-title' }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
 
     visit new_snippet_path

spec/features/triggers_spec.rb

@@ -72,6 +72,7 @@ RSpec.describe 'Triggers', :js do
 
     describe 'trigger "Revoke" workflow' do
       before do
+        stub_feature_flags(bootstrap_confirmation_modals: false)
         create(:ci_trigger, owner: user2, project: @project, description: trigger_title)
         visit project_settings_ci_cd_path(@project)
       end

spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js

+import { GlModal } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import ConfirmModal from '~/lib/utils/confirm_via_gl_modal/confirm_modal.vue';
+
+describe('Confirm Modal', () => {
+  let wrapper;
+  let modal;
+
+  const createComponent = ({ primaryText, primaryVariant } = {}) => {
+    wrapper = mount(ConfirmModal, {
+      propsData: {
+        primaryText,
+        primaryVariant,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGlModal = () => wrapper.findComponent(GlModal);
+
+  describe('Modal events', () => {
+    beforeEach(() => {
+      createComponent();
+      modal = findGlModal();
+    });
+
+    it('should emit `confirmed` event on `primary` modal event', () => {
+      findGlModal().vm.$emit('primary');
+      expect(wrapper.emitted('confirmed')).toBeTruthy();
+    });
+
+    it('should emit closed` event on `hidden` modal event', () => {
+      modal.vm.$emit('hidden');
+      expect(wrapper.emitted('closed')).toBeTruthy();
+    });
+  });
+
+  describe('Custom properties', () => {
+    it('should pass correct custom primary text & button variant to the modal when provided', () => {
+      const primaryText = "Let's do it!";
+      const primaryVariant = 'danger';
+
+      createComponent({ primaryText, primaryVariant });
+      const customProps = findGlModal().props('actionPrimary');
+      expect(customProps.text).toBe(primaryText);
+      expect(customProps.attributes.variant).toBe(primaryVariant);
+    });
+
+    it('should pass default primary text & button variant to the modal if no custom values provided', () => {
+      createComponent();
+      const customProps = findGlModal().props('actionPrimary');
+      expect(customProps.text).toBe('OK');
+      expect(customProps.attributes.variant).toBe('confirm');
+    });
+  });
+});

spec/support/shared_examples/features/2fa_shared_examples.rb

@@ -18,6 +18,7 @@ RSpec.shared_examples 'hardware device for 2fa' do |device_type|
     let(:user) { create(:user) }
 
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       gitlab_sign_in(user)
       user.update_attribute(:otp_required_for_login, true)
     end