From a1a08ed1c7df15669b68c021e37f1ef21e8d14b9 Mon Sep 17 00:00:00 2001
From: Lukas Eipert <leipert@gitlab.com>
Date: Wed, 27 Oct 2021 14:02:26 +0200
Subject: [PATCH 1/8] 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`.
---
 .../lib/utils/confirm_via_gl_modal.js         | 46 +++++++++++++++++++
 app/assets/javascripts/lib/utils/rails_ujs.js | 32 +++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 app/assets/javascripts/lib/utils/confirm_via_gl_modal.js

diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal.js
new file mode 100644
index 00000000000000..c3181328780894
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal.js
@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import { GlModal } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default function confirmViaGLModal(message) {
+  return new Promise((resolve) => {
+    let confirmed = false;
+
+    const modal = new Vue({
+      mounted() {
+        this.$refs.modal.show();
+      },
+      render(h) {
+        return h(
+          GlModal,
+          {
+            props: {
+              // TODO: The modal has no title and looks weird, we need a title! We should talk to UX
+              modalId: 'ConfirmationModal',
+              actionPrimary: {
+                // TODO: Idea: We could get the text and color of the button we clicked on and use those
+                // AND FALLBACK to `OK` for example
+                text: __('OK'),
+              },
+              actionCancel: {
+                // TODO: Better word than cancel?
+                text: __('Cancel'),
+              },
+            },
+            ref: 'modal',
+            on: {
+              primary() {
+                confirmed = true;
+              },
+              hidden() {
+                modal.$destroy();
+                resolve(confirmed);
+              },
+            },
+          },
+          [message],
+        );
+      },
+    }).$mount();
+  });
+}
diff --git a/app/assets/javascripts/lib/utils/rails_ujs.js b/app/assets/javascripts/lib/utils/rails_ujs.js
index 8b40cc7bd11169..b6644dff7e4ae1 100644
--- a/app/assets/javascripts/lib/utils/rails_ujs.js
+++ b/app/assets/javascripts/lib/utils/rails_ujs.js
@@ -1,4 +1,36 @@
 import Rails from '@rails/ujs';
+import confirmViaGlModal from './confirm_via_gl_modal';
+
+/**
+ * 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 programatically
+ *
+ * @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)
+    .then((confirmed) => {
+      if (confirmed) {
+        Rails.confirm = () => true;
+        element.click();
+        Rails.confirm = confirmViaModal;
+      }
+    })
+    .catch(() => {});
+  return false;
+}
+
+Rails.confirm = confirmViaModal;
 
 export const initRails = () => {
   // eslint-disable-next-line no-underscore-dangle
-- 
GitLab


From 0619c0286a7cd34b2023e4011738066bfb1b4175 Mon Sep 17 00:00:00 2001
From: Lukas Eipert <leipert@gitlab.com>
Date: Tue, 2 Nov 2021 16:34:39 +0100
Subject: [PATCH 2/8] Update initial implemention

1. Add a `bootstrap_confirmation_modals` feature flag and move the
   monkey patch behind it.
2. Move the confirm modal into a separate SFC Vue component in order to
   iterate quicker. That component is also loaded async. This means it
   will only be loaded when confirmViaGlModal is executed.
3. Copy styles and text of the button (in some use cases)
4. Remove the modal header and center the text vertically.
---
 .../lib/utils/confirm_via_gl_modal.js         | 46 -------------
 .../confirm_via_gl_modal/confirm_modal.vue    | 40 ++++++++++++
 .../confirm_via_gl_modal.js                   | 41 ++++++++++++
 app/assets/javascripts/lib/utils/rails_ujs.js | 64 ++++++++++---------
 .../bootstrap_confirmation_modals.yml         |  8 +++
 lib/gitlab/gon_helper.rb                      |  1 +
 6 files changed, 125 insertions(+), 75 deletions(-)
 delete mode 100644 app/assets/javascripts/lib/utils/confirm_via_gl_modal.js
 create mode 100644 app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
 create mode 100644 app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
 create mode 100644 config/feature_flags/development/bootstrap_confirmation_modals.yml

diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal.js
deleted file mode 100644
index c3181328780894..00000000000000
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Vue from 'vue';
-import { GlModal } from '@gitlab/ui';
-import { __ } from '~/locale';
-
-export default function confirmViaGLModal(message) {
-  return new Promise((resolve) => {
-    let confirmed = false;
-
-    const modal = new Vue({
-      mounted() {
-        this.$refs.modal.show();
-      },
-      render(h) {
-        return h(
-          GlModal,
-          {
-            props: {
-              // TODO: The modal has no title and looks weird, we need a title! We should talk to UX
-              modalId: 'ConfirmationModal',
-              actionPrimary: {
-                // TODO: Idea: We could get the text and color of the button we clicked on and use those
-                // AND FALLBACK to `OK` for example
-                text: __('OK'),
-              },
-              actionCancel: {
-                // TODO: Better word than cancel?
-                text: __('Cancel'),
-              },
-            },
-            ref: 'modal',
-            on: {
-              primary() {
-                confirmed = true;
-              },
-              hidden() {
-                modal.$destroy();
-                resolve(confirmed);
-              },
-            },
-          },
-          [message],
-        );
-      },
-    }).$mount();
-  });
-}
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
new file mode 100644
index 00000000000000..45a7b3c2edb2a1
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
@@ -0,0 +1,40 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    primaryText: {
+      type: String,
+      required: false,
+      default: __('OK'),
+    },
+    primaryVariant: {
+      type: String,
+      required: false,
+      default: 'confirm',
+    },
+  },
+  mounted() {
+    this.$refs.modal.show();
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    ref="modal"
+    modal-id="confirmationModal"
+    body-class="gl-display-flex"
+    :action-primary="{ text: primaryText, attributes: { variant: primaryVariant } }"
+    :action-cancel="{ text: __('Cancel') }"
+    :hide-header="true"
+    @primary="$root.$emit('confirmModal::confirmed')"
+    @hidden="$root.$emit('confirmModal::closed')"
+  >
+    <div class="gl-align-self-center"><slot></slot></div>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
new file mode 100644
index 00000000000000..f7799b2ace73d1
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+
+export function confirmViaGlModal(message, element) {
+  return new Promise((resolve) => {
+    let confirmed = false;
+
+    const props = {};
+
+    if (element.classList.contains('btn-danger')) {
+      props.primaryVariant = 'danger';
+    }
+
+    if (element.querySelector('.sr-only')) {
+      props.primaryText = element.querySelector('.sr-only').textContent;
+    }
+
+    const component = new Vue({
+      components: {
+        confirmModal: () => import('./confirm_modal.vue'),
+      },
+      mounted() {
+        this.$root.$on('confirmModal::confirmed', () => {
+          confirmed = true;
+        });
+        this.$root.$on('confirmModal::closed', () => {
+          component.$destroy();
+          resolve(confirmed);
+        });
+      },
+      render(h) {
+        return h(
+          'confirm-modal',
+          {
+            props,
+          },
+          [message],
+        );
+      },
+    }).$mount();
+  });
+}
diff --git a/app/assets/javascripts/lib/utils/rails_ujs.js b/app/assets/javascripts/lib/utils/rails_ujs.js
index b6644dff7e4ae1..272fee36f4ee7a 100644
--- a/app/assets/javascripts/lib/utils/rails_ujs.js
+++ b/app/assets/javascripts/lib/utils/rails_ujs.js
@@ -1,36 +1,42 @@
 import Rails from '@rails/ujs';
-import confirmViaGlModal from './confirm_via_gl_modal';
+import { confirmViaGlModal } from './confirm_via_gl_modal/confirm_via_gl_modal';
 
-/**
- * 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 programatically
- *
- * @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)
-    .then((confirmed) => {
-      if (confirmed) {
-        Rails.confirm = () => true;
-        element.click();
-        Rails.confirm = confirmViaModal;
-      }
-    })
-    .catch(() => {});
-  return false;
+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;
 }
 
-Rails.confirm = confirmViaModal;
+if (gon.features.bootstrapConfirmationModals) {
+  monkeyPatchConfirmModal();
+}
 
 export const initRails = () => {
   // eslint-disable-next-line no-underscore-dangle
diff --git a/config/feature_flags/development/bootstrap_confirmation_modals.yml b/config/feature_flags/development/bootstrap_confirmation_modals.yml
new file mode 100644
index 00000000000000..e67fd03fea658c
--- /dev/null
+++ b/config/feature_flags/development/bootstrap_confirmation_modals.yml
@@ -0,0 +1,8 @@
+---
+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
diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb
index 6faf3575bc1b92..027551df15d044 100644
--- a/lib/gitlab/gon_helper.rb
+++ b/lib/gitlab/gon_helper.rb
@@ -58,6 +58,7 @@ def add_gon_variables
       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.
-- 
GitLab


From 6ad40791640f0d6c014eaf2f07179386a0e0920a Mon Sep 17 00:00:00 2001
From: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Date: Wed, 3 Nov 2021 18:14:29 +0200
Subject: [PATCH 3/8] Minor updates and specs

---
 .../confirm_via_gl_modal/confirm_modal.vue    | 13 +++-
 .../confirm_via_gl_modal.js                   |  6 +-
 app/assets/javascripts/lib/utils/rails_ujs.js |  4 +-
 .../confirm_modal_spec.js                     | 62 +++++++++++++++++++
 4 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js

diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
index 45a7b3c2edb2a1..c77e2ad80178fc 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
@@ -18,6 +18,12 @@ export default {
       default: 'confirm',
     },
   },
+  data() {
+    return {
+      primaryAction: { text: this.primaryText, attributes: { variant: this.primaryVariant } },
+      cancelAction: { text: __('Cancel') },
+    };
+  },
   mounted() {
     this.$refs.modal.show();
   },
@@ -27,11 +33,12 @@ export default {
 <template>
   <gl-modal
     ref="modal"
+    size="sm"
     modal-id="confirmationModal"
     body-class="gl-display-flex"
-    :action-primary="{ text: primaryText, attributes: { variant: primaryVariant } }"
-    :action-cancel="{ text: __('Cancel') }"
-    :hide-header="true"
+    :action-primary="primaryAction"
+    :action-cancel="cancelAction"
+    hide-header
     @primary="$root.$emit('confirmModal::confirmed')"
     @hidden="$root.$emit('confirmModal::closed')"
   >
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
index f7799b2ace73d1..29e878c01b06e4 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
@@ -9,9 +9,10 @@ export function confirmViaGlModal(message, element) {
     if (element.classList.contains('btn-danger')) {
       props.primaryVariant = 'danger';
     }
+    const screenReaderText = element.querySelector('.sr-only')?.textContent;
 
-    if (element.querySelector('.sr-only')) {
-      props.primaryText = element.querySelector('.sr-only').textContent;
+    if (screenReaderText) {
+      props.primaryText = screenReaderText;
     }
 
     const component = new Vue({
@@ -22,6 +23,7 @@ export function confirmViaGlModal(message, element) {
         this.$root.$on('confirmModal::confirmed', () => {
           confirmed = true;
         });
+
         this.$root.$on('confirmModal::closed', () => {
           component.$destroy();
           resolve(confirmed);
diff --git a/app/assets/javascripts/lib/utils/rails_ujs.js b/app/assets/javascripts/lib/utils/rails_ujs.js
index 272fee36f4ee7a..58bc6743a44396 100644
--- a/app/assets/javascripts/lib/utils/rails_ujs.js
+++ b/app/assets/javascripts/lib/utils/rails_ujs.js
@@ -11,8 +11,8 @@ function monkeyPatchConfirmModal() {
    * 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
+   *     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
diff --git a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
new file mode 100644
index 00000000000000..21fd4e7dfc65b7
--- /dev/null
+++ b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
@@ -0,0 +1,62 @@
+import { GlModal } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import ComfirmModal from '~/lib/utils/confirm_via_gl_modal/confirm_modal.vue';
+
+describe('Confirm Modal', () => {
+  let wrapper;
+  let modal;
+
+  const createComponent = ({ primaryText, primaryVariant } = {}) => {
+    wrapper = mount(ComfirmModal, {
+      propsData: {
+        primaryText,
+        primaryVariant,
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  const findGlModal = () => wrapper.findComponent(GlModal);
+
+  describe('Modal events', () => {
+    beforeEach(() => {
+      createComponent();
+      modal = findGlModal();
+      jest.spyOn(wrapper.vm.$root, '$emit');
+    });
+
+    it('should emit root `confirmModal::confirmed` event on `primary` modal event', () => {
+      findGlModal().vm.$emit('primary');
+      expect(wrapper.vm.$root.$emit).toHaveBeenCalledWith('confirmModal::confirmed');
+    });
+
+    it('should emit root `confirmModal::closed` event on `hidden` modal event', () => {
+      modal.vm.$emit('primary');
+      expect(wrapper.vm.$root.$emit).toHaveBeenCalledWith('confirmModal::confirmed');
+    });
+  });
+
+  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');
+    });
+  });
+});
-- 
GitLab


From bbed51533963a9abfad8abe0cfaa96b92d9174b1 Mon Sep 17 00:00:00 2001
From: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Date: Thu, 4 Nov 2021 13:27:53 +0200
Subject: [PATCH 4/8] Disable `bootstrap_confirmation_modals` for related specs

FF are enable be default in specs
That's is why we disable them after the FF addition
for each test that fails
and will fix the specs gradually
---
 app/assets/javascripts/lib/utils/rails_ujs.js                 | 2 +-
 ee/spec/features/admin/admin_settings_spec.rb                 | 1 +
 .../admin/subscriptions/admin_views_subscription_spec.rb      | 1 +
 ee/spec/features/epic_boards/epic_boards_spec.rb              | 2 ++
 ee/spec/features/groups/members/leave_group_spec.rb           | 1 +
 ee/spec/features/projects/path_locks_spec.rb                  | 1 +
 .../features/projects/settings/protected_environments_spec.rb | 1 +
 .../protected_branches_access_control_shared_examples.rb      | 1 +
 spec/features/admin/admin_disables_two_factor_spec.rb         | 1 +
 spec/features/admin/admin_groups_spec.rb                      | 1 +
 spec/features/admin/admin_hooks_spec.rb                       | 1 +
 spec/features/admin/admin_labels_spec.rb                      | 1 +
 spec/features/admin/admin_users_impersonation_tokens_spec.rb  | 1 +
 spec/features/admin/admin_uses_repository_checks_spec.rb      | 1 +
 spec/features/admin/users/user_spec.rb                        | 1 +
 spec/features/admin/users/users_spec.rb                       | 1 +
 spec/features/boards/boards_spec.rb                           | 1 +
 spec/features/groups/members/leave_group_spec.rb              | 1 +
 spec/features/merge_request/user_comments_on_diff_spec.rb     | 1 +
 spec/features/merge_request/user_posts_diff_notes_spec.rb     | 1 +
 spec/features/merge_request/user_posts_notes_spec.rb          | 2 ++
 .../merge_request/user_sees_avatar_on_diff_notes_spec.rb      | 1 +
 .../merge_request/user_sees_deployment_widget_spec.rb         | 1 +
 spec/features/profile_spec.rb                                 | 2 ++
 spec/features/profiles/active_sessions_spec.rb                | 4 ++++
 spec/features/profiles/oauth_applications_spec.rb             | 1 +
 spec/features/profiles/personal_access_tokens_spec.rb         | 1 +
 spec/features/projects/branches/user_deletes_branch_spec.rb   | 1 +
 spec/features/projects/branches_spec.rb                       | 1 +
 .../projects/commit/comments/user_deletes_comments_spec.rb    | 1 +
 spec/features/projects/commit/user_comments_on_commit_spec.rb | 2 ++
 spec/features/projects/environments/environments_spec.rb      | 2 ++
 spec/features/projects/jobs/user_browses_job_spec.rb          | 1 +
 spec/features/projects/members/member_leaves_project_spec.rb  | 1 +
 spec/features/projects/members/user_requests_access_spec.rb   | 1 +
 spec/features/projects/pages/user_adds_domain_spec.rb         | 2 ++
 .../projects/pages/user_edits_lets_encrypt_settings_spec.rb   | 1 +
 spec/features/projects/pages/user_edits_settings_spec.rb      | 1 +
 spec/features/projects/pipeline_schedules_spec.rb             | 1 +
 spec/features/projects/pipelines/pipelines_spec.rb            | 1 +
 spec/features/projects/settings/access_tokens_spec.rb         | 1 +
 .../projects/settings/user_searches_in_settings_spec.rb       | 1 +
 spec/features/snippets/notes_on_personal_snippets_spec.rb     | 1 +
 spec/features/snippets/user_creates_snippet_spec.rb           | 1 +
 spec/features/triggers_spec.rb                                | 1 +
 spec/support/shared_examples/features/2fa_shared_examples.rb  | 1 +
 46 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/lib/utils/rails_ujs.js b/app/assets/javascripts/lib/utils/rails_ujs.js
index 58bc6743a44396..6b1985a23baa4a 100644
--- a/app/assets/javascripts/lib/utils/rails_ujs.js
+++ b/app/assets/javascripts/lib/utils/rails_ujs.js
@@ -34,7 +34,7 @@ function monkeyPatchConfirmModal() {
   Rails.confirm = confirmViaModal;
 }
 
-if (gon.features.bootstrapConfirmationModals) {
+if (gon?.features?.bootstrapConfirmationModals) {
   monkeyPatchConfirmModal();
 }
 
diff --git a/ee/spec/features/admin/admin_settings_spec.rb b/ee/spec/features/admin/admin_settings_spec.rb
index 70acb198c28e86..a772a4de3f2d4d 100644
--- a/ee/spec/features/admin/admin_settings_spec.rb
+++ b/ee/spec/features/admin/admin_settings_spec.rb
@@ -6,6 +6,7 @@
   include StubENV
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     stub_env('IN_MEMORY_APPLICATION_SETTINGS', 'false')
     admin = create(:admin)
     sign_in(admin)
diff --git a/ee/spec/features/admin/subscriptions/admin_views_subscription_spec.rb b/ee/spec/features/admin/subscriptions/admin_views_subscription_spec.rb
index bc6c10101bd243..c7bcdf1db0151e 100644
--- a/ee/spec/features/admin/subscriptions/admin_views_subscription_spec.rb
+++ b/ee/spec/features/admin/subscriptions/admin_views_subscription_spec.rb
@@ -6,6 +6,7 @@
   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
diff --git a/ee/spec/features/epic_boards/epic_boards_spec.rb b/ee/spec/features/epic_boards/epic_boards_spec.rb
index 227a7516611700..9c9e9fbb611d12 100644
--- a/ee/spec/features/epic_boards/epic_boards_spec.rb
+++ b/ee/spec/features/epic_boards/epic_boards_spec.rb
@@ -115,6 +115,8 @@
     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)
diff --git a/ee/spec/features/groups/members/leave_group_spec.rb b/ee/spec/features/groups/members/leave_group_spec.rb
index 4b2ccb0d2c5cf0..4b2a76e6d085d8 100644
--- a/ee/spec/features/groups/members/leave_group_spec.rb
+++ b/ee/spec/features/groups/members/leave_group_spec.rb
@@ -13,6 +13,7 @@
   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
diff --git a/ee/spec/features/projects/path_locks_spec.rb b/ee/spec/features/projects/path_locks_spec.rb
index 35c42ed7eedfb8..60006abc568e4b 100644
--- a/ee/spec/features/projects/path_locks_spec.rb
+++ b/ee/spec/features/projects/path_locks_spec.rb
@@ -9,6 +9,7 @@
 
   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)
diff --git a/ee/spec/features/projects/settings/protected_environments_spec.rb b/ee/spec/features/projects/settings/protected_environments_spec.rb
index 08af51dbe7c4b5..05d1f98b2cc2a8 100644
--- a/ee/spec/features/projects/settings/protected_environments_spec.rb
+++ b/ee/spec/features/projects/settings/protected_environments_spec.rb
@@ -34,6 +34,7 @@
 
   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)
diff --git a/ee/spec/support/shared_examples/features/protected_branches_access_control_shared_examples.rb b/ee/spec/support/shared_examples/features/protected_branches_access_control_shared_examples.rb
index 98431236cc8909..9ad5f9b03eeb53 100644
--- a/ee/spec/support/shared_examples/features/protected_branches_access_control_shared_examples.rb
+++ b/ee/spec/support/shared_examples/features/protected_branches_access_control_shared_examples.rb
@@ -173,6 +173,7 @@ def last_access_levels(git_operation)
     let!(:protected_branch) { create(:protected_branch, project: project) }
 
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       stub_licensed_features(unprotection_restrictions: true)
     end
 
diff --git a/spec/features/admin/admin_disables_two_factor_spec.rb b/spec/features/admin/admin_disables_two_factor_spec.rb
index 1f34c4ed17c6fb..f65e85b4cb62c6 100644
--- a/spec/features/admin/admin_disables_two_factor_spec.rb
+++ b/spec/features/admin/admin_disables_two_factor_spec.rb
@@ -4,6 +4,7 @@
 
 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)
diff --git a/spec/features/admin/admin_groups_spec.rb b/spec/features/admin/admin_groups_spec.rb
index 8315b8f44b0222..8d4e7a7442c31c 100644
--- a/spec/features/admin/admin_groups_spec.rb
+++ b/spec/features/admin/admin_groups_spec.rb
@@ -252,6 +252,7 @@
 
   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)
diff --git a/spec/features/admin/admin_hooks_spec.rb b/spec/features/admin/admin_hooks_spec.rb
index a501efd82edd41..32e4d18227edce 100644
--- a/spec/features/admin/admin_hooks_spec.rb
+++ b/spec/features/admin/admin_hooks_spec.rb
@@ -79,6 +79,7 @@
     let(:hook_url) { generate(:url) }
 
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       create(:system_hook, url: hook_url)
     end
 
diff --git a/spec/features/admin/admin_labels_spec.rb b/spec/features/admin/admin_labels_spec.rb
index 08d81906d9f002..65de1160cfdaa9 100644
--- a/spec/features/admin/admin_labels_spec.rb
+++ b/spec/features/admin/admin_labels_spec.rb
@@ -14,6 +14,7 @@
 
   describe 'list' do
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       visit admin_labels_path
     end
 
diff --git a/spec/features/admin/admin_users_impersonation_tokens_spec.rb b/spec/features/admin/admin_users_impersonation_tokens_spec.rb
index ed8ea84fbf821c..6643ebe82e69d7 100644
--- a/spec/features/admin/admin_users_impersonation_tokens_spec.rb
+++ b/spec/features/admin/admin_users_impersonation_tokens_spec.rb
@@ -74,6 +74,7 @@ def created_impersonation_token
     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" }
diff --git a/spec/features/admin/admin_uses_repository_checks_spec.rb b/spec/features/admin/admin_uses_repository_checks_spec.rb
index 0e448446085966..c13313609b595b 100644
--- a/spec/features/admin/admin_uses_repository_checks_spec.rb
+++ b/spec/features/admin/admin_uses_repository_checks_spec.rb
@@ -8,6 +8,7 @@
   let(:admin) { create(:admin) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     stub_env('IN_MEMORY_APPLICATION_SETTINGS', 'false')
     sign_in(admin)
   end
diff --git a/spec/features/admin/users/user_spec.rb b/spec/features/admin/users/user_spec.rb
index 624bfde7359823..73477fb93dd0db 100644
--- a/spec/features/admin/users/user_spec.rb
+++ b/spec/features/admin/users/user_spec.rb
@@ -9,6 +9,7 @@
   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
diff --git a/spec/features/admin/users/users_spec.rb b/spec/features/admin/users/users_spec.rb
index 119b01ff552e3d..3968b055819a68 100644
--- a/spec/features/admin/users/users_spec.rb
+++ b/spec/features/admin/users/users_spec.rb
@@ -9,6 +9,7 @@
   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
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index 9a5b5bbfc343b4..2f21961d1fca9e 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -536,6 +536,7 @@
     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)
diff --git a/spec/features/groups/members/leave_group_spec.rb b/spec/features/groups/members/leave_group_spec.rb
index b73313745e9c65..e6bf1ffc2f7366 100644
--- a/spec/features/groups/members/leave_group_spec.rb
+++ b/spec/features/groups/members/leave_group_spec.rb
@@ -10,6 +10,7 @@
   let(:group) { create(:group) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 
diff --git a/spec/features/merge_request/user_comments_on_diff_spec.rb b/spec/features/merge_request/user_comments_on_diff_spec.rb
index 54c3fe738d2f31..f9b554c5ed288f 100644
--- a/spec/features/merge_request/user_comments_on_diff_spec.rb
+++ b/spec/features/merge_request/user_comments_on_diff_spec.rb
@@ -14,6 +14,7 @@
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     project.add_maintainer(user)
     sign_in(user)
 
diff --git a/spec/features/merge_request/user_posts_diff_notes_spec.rb b/spec/features/merge_request/user_posts_diff_notes_spec.rb
index c339a7d9976ce2..dcd289c76270f7 100644
--- a/spec/features/merge_request/user_posts_diff_notes_spec.rb
+++ b/spec/features/merge_request/user_posts_diff_notes_spec.rb
@@ -18,6 +18,7 @@
 
     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
diff --git a/spec/features/merge_request/user_posts_notes_spec.rb b/spec/features/merge_request/user_posts_notes_spec.rb
index 83d9388914b7c5..0416474218fc80 100644
--- a/spec/features/merge_request/user_posts_notes_spec.rb
+++ b/spec/features/merge_request/user_posts_notes_spec.rb
@@ -18,8 +18,10 @@
   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
 
diff --git a/spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb b/spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb
index 90cdc28d1bda4b..64cd5aa2bb1470 100644
--- a/spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb
+++ b/spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb
@@ -79,6 +79,7 @@
   %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
diff --git a/spec/features/merge_request/user_sees_deployment_widget_spec.rb b/spec/features/merge_request/user_sees_deployment_widget_spec.rb
index 873cc0a89c6491..345404cc28f406 100644
--- a/spec/features/merge_request/user_sees_deployment_widget_spec.rb
+++ b/spec/features/merge_request/user_sees_deployment_widget_spec.rb
@@ -110,6 +110,7 @@
       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)
diff --git a/spec/features/profile_spec.rb b/spec/features/profile_spec.rb
index 9a261c6d9c8633..7d935298f38989 100644
--- a/spec/features/profile_spec.rb
+++ b/spec/features/profile_spec.rb
@@ -6,6 +6,7 @@
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 
@@ -80,6 +81,7 @@
   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
 
diff --git a/spec/features/profiles/active_sessions_spec.rb b/spec/features/profiles/active_sessions_spec.rb
index fd64704b7c8c68..a515c7b1c1f51a 100644
--- a/spec/features/profiles/active_sessions_spec.rb
+++ b/spec/features/profiles/active_sessions_spec.rb
@@ -11,6 +11,10 @@
 
   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)
diff --git a/spec/features/profiles/oauth_applications_spec.rb b/spec/features/profiles/oauth_applications_spec.rb
index 2735f60130733d..6827dff5434b81 100644
--- a/spec/features/profiles/oauth_applications_spec.rb
+++ b/spec/features/profiles/oauth_applications_spec.rb
@@ -7,6 +7,7 @@
   let(:application) { create(:oauth_application, owner: user) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 
diff --git a/spec/features/profiles/personal_access_tokens_spec.rb b/spec/features/profiles/personal_access_tokens_spec.rb
index 8f44299b18fd87..74505633cae8ce 100644
--- a/spec/features/profiles/personal_access_tokens_spec.rb
+++ b/spec/features/profiles/personal_access_tokens_spec.rb
@@ -34,6 +34,7 @@ def disallow_personal_access_token_saves!
   end
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 
diff --git a/spec/features/projects/branches/user_deletes_branch_spec.rb b/spec/features/projects/branches/user_deletes_branch_spec.rb
index 3b8f49accc5d61..8fc5c3d2e1b417 100644
--- a/spec/features/projects/branches/user_deletes_branch_spec.rb
+++ b/spec/features/projects/branches/user_deletes_branch_spec.rb
@@ -35,6 +35,7 @@
 
   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
 
diff --git a/spec/features/projects/branches_spec.rb b/spec/features/projects/branches_spec.rb
index 0a79719f14a5f1..2725c6a91bec02 100644
--- a/spec/features/projects/branches_spec.rb
+++ b/spec/features/projects/branches_spec.rb
@@ -179,6 +179,7 @@
       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')
 
diff --git a/spec/features/projects/commit/comments/user_deletes_comments_spec.rb b/spec/features/projects/commit/comments/user_deletes_comments_spec.rb
index 431cbb4ffbb518..67d3276fc14690 100644
--- a/spec/features/projects/commit/comments/user_deletes_comments_spec.rb
+++ b/spec/features/projects/commit/comments/user_deletes_comments_spec.rb
@@ -11,6 +11,7 @@
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
     project.add_developer(user)
 
diff --git a/spec/features/projects/commit/user_comments_on_commit_spec.rb b/spec/features/projects/commit/user_comments_on_commit_spec.rb
index 6997c2d8338340..b0be6edb24555d 100644
--- a/spec/features/projects/commit/user_comments_on_commit_spec.rb
+++ b/spec/features/projects/commit/user_comments_on_commit_spec.rb
@@ -93,6 +93,8 @@
 
   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)
diff --git a/spec/features/projects/environments/environments_spec.rb b/spec/features/projects/environments/environments_spec.rb
index 2404fbf01ca2d5..3b83c25b6290fe 100644
--- a/spec/features/projects/environments/environments_spec.rb
+++ b/spec/features/projects/environments/environments_spec.rb
@@ -143,6 +143,8 @@ def upcoming_deployment_content_selector
       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)
diff --git a/spec/features/projects/jobs/user_browses_job_spec.rb b/spec/features/projects/jobs/user_browses_job_spec.rb
index 5d7a761cb17bf3..12e88bbf6a5391 100644
--- a/spec/features/projects/jobs/user_browses_job_spec.rb
+++ b/spec/features/projects/jobs/user_browses_job_spec.rb
@@ -12,6 +12,7 @@
   before do
     project.add_maintainer(user)
     project.enable_ci
+    stub_feature_flags(bootstrap_confirmation_modals: false)
 
     sign_in(user)
 
diff --git a/spec/features/projects/members/member_leaves_project_spec.rb b/spec/features/projects/members/member_leaves_project_spec.rb
index c4bd0b81dc09ea..4881a7bdf1a522 100644
--- a/spec/features/projects/members/member_leaves_project_spec.rb
+++ b/spec/features/projects/members/member_leaves_project_spec.rb
@@ -9,6 +9,7 @@
   before do
     project.add_developer(user)
     sign_in(user)
+    stub_feature_flags(bootstrap_confirmation_modals: false)
   end
 
   it 'user leaves project' do
diff --git a/spec/features/projects/members/user_requests_access_spec.rb b/spec/features/projects/members/user_requests_access_spec.rb
index 113ba69249788e..dcaef5f4ef0d26 100644
--- a/spec/features/projects/members/user_requests_access_spec.rb
+++ b/spec/features/projects/members/user_requests_access_spec.rb
@@ -11,6 +11,7 @@
   before do
     sign_in(user)
     visit project_path(project)
+    stub_feature_flags(bootstrap_confirmation_modals: false)
   end
 
   it 'request access feature is disabled' do
diff --git a/spec/features/projects/pages/user_adds_domain_spec.rb b/spec/features/projects/pages/user_adds_domain_spec.rb
index de9effe3dc7a40..06f130ae69c82e 100644
--- a/spec/features/projects/pages/user_adds_domain_spec.rb
+++ b/spec/features/projects/pages/user_adds_domain_spec.rb
@@ -14,6 +14,8 @@
     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
diff --git a/spec/features/projects/pages/user_edits_lets_encrypt_settings_spec.rb b/spec/features/projects/pages/user_edits_lets_encrypt_settings_spec.rb
index cf8438d5e6fa6a..a3fc5804e1325f 100644
--- a/spec/features/projects/pages/user_edits_lets_encrypt_settings_spec.rb
+++ b/spec/features/projects/pages/user_edits_lets_encrypt_settings_spec.rb
@@ -14,6 +14,7 @@
   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)
diff --git a/spec/features/projects/pages/user_edits_settings_spec.rb b/spec/features/projects/pages/user_edits_settings_spec.rb
index 71d4cce278402b..1226e1dc2edce9 100644
--- a/spec/features/projects/pages/user_edits_settings_spec.rb
+++ b/spec/features/projects/pages/user_edits_settings_spec.rb
@@ -176,6 +176,7 @@
   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
 
diff --git a/spec/features/projects/pipeline_schedules_spec.rb b/spec/features/projects/pipeline_schedules_spec.rb
index 94e3331b173a45..9df430c0f78ae3 100644
--- a/spec/features/projects/pipeline_schedules_spec.rb
+++ b/spec/features/projects/pipeline_schedules_spec.rb
@@ -11,6 +11,7 @@
 
   context 'logged in as maintainer' do
     before do
+      stub_feature_flags(bootstrap_confirmation_modals: false)
       project.add_maintainer(user)
       gitlab_sign_in(user)
     end
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index 3a60087818d2ee..e38c4989f26f64 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -317,6 +317,7 @@
         end
 
         before do
+          stub_feature_flags(bootstrap_confirmation_modals: false)
           visit_project_pipelines
         end
 
diff --git a/spec/features/projects/settings/access_tokens_spec.rb b/spec/features/projects/settings/access_tokens_spec.rb
index 4941b936c0c68a..d8de9e0449eaad 100644
--- a/spec/features/projects/settings/access_tokens_spec.rb
+++ b/spec/features/projects/settings/access_tokens_spec.rb
@@ -13,6 +13,7 @@
   end
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
   end
 
diff --git a/spec/features/projects/settings/user_searches_in_settings_spec.rb b/spec/features/projects/settings/user_searches_in_settings_spec.rb
index 7ed96d01189d85..44b5464a1b0e47 100644
--- a/spec/features/projects/settings/user_searches_in_settings_spec.rb
+++ b/spec/features/projects/settings/user_searches_in_settings_spec.rb
@@ -7,6 +7,7 @@
   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
 
diff --git a/spec/features/snippets/notes_on_personal_snippets_spec.rb b/spec/features/snippets/notes_on_personal_snippets_spec.rb
index fc88cd9205c1aa..6bd31d7314cdae 100644
--- a/spec/features/snippets/notes_on_personal_snippets_spec.rb
+++ b/spec/features/snippets/notes_on_personal_snippets_spec.rb
@@ -18,6 +18,7 @@
   end
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in user
     visit snippet_path(snippet)
 
diff --git a/spec/features/snippets/user_creates_snippet_spec.rb b/spec/features/snippets/user_creates_snippet_spec.rb
index ca050daa62a32f..82fe895d397b0c 100644
--- a/spec/features/snippets/user_creates_snippet_spec.rb
+++ b/spec/features/snippets/user_creates_snippet_spec.rb
@@ -16,6 +16,7 @@
   let(:snippet_title_field) { 'snippet-title' }
 
   before do
+    stub_feature_flags(bootstrap_confirmation_modals: false)
     sign_in(user)
 
     visit new_snippet_path
diff --git a/spec/features/triggers_spec.rb b/spec/features/triggers_spec.rb
index 6fa805d8c74611..2ddd86dd8075fa 100644
--- a/spec/features/triggers_spec.rb
+++ b/spec/features/triggers_spec.rb
@@ -72,6 +72,7 @@
 
     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
diff --git a/spec/support/shared_examples/features/2fa_shared_examples.rb b/spec/support/shared_examples/features/2fa_shared_examples.rb
index ddc03e178ba808..94c91556ea7866 100644
--- a/spec/support/shared_examples/features/2fa_shared_examples.rb
+++ b/spec/support/shared_examples/features/2fa_shared_examples.rb
@@ -18,6 +18,7 @@ def register_device(device_type, **kwargs)
     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
-- 
GitLab


From fc9756be3c63f34dbbd259f8295bc2eaf7c2b033 Mon Sep 17 00:00:00 2001
From: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Date: Fri, 5 Nov 2021 18:40:09 +0200
Subject: [PATCH 5/8] Drop usage of deprecated `root.$on`method

---
 .../confirm_via_gl_modal/confirm_modal.vue    |  4 ++--
 .../confirm_via_gl_modal.js                   | 21 +++++++++----------
 .../confirm_modal_spec.js                     | 12 +++++------
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
index c77e2ad80178fc..69604943313e43 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
@@ -39,8 +39,8 @@ export default {
     :action-primary="primaryAction"
     :action-cancel="cancelAction"
     hide-header
-    @primary="$root.$emit('confirmModal::confirmed')"
-    @hidden="$root.$emit('confirmModal::closed')"
+    @primary="$emit('confirmed')"
+    @hidden="$emit('closed')"
   >
     <div class="gl-align-self-center"><slot></slot></div>
   </gl-modal>
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
index 29e878c01b06e4..651cf041373a71 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
@@ -17,23 +17,22 @@ export function confirmViaGlModal(message, element) {
 
     const component = new Vue({
       components: {
-        confirmModal: () => import('./confirm_modal.vue'),
-      },
-      mounted() {
-        this.$root.$on('confirmModal::confirmed', () => {
-          confirmed = true;
-        });
-
-        this.$root.$on('confirmModal::closed', () => {
-          component.$destroy();
-          resolve(confirmed);
-        });
+        ConfirmModal: () => import('./confirm_modal.vue'),
       },
       render(h) {
         return h(
           'confirm-modal',
           {
             props,
+            on: {
+              confirmed() {
+                confirmed = true;
+              },
+              closed() {
+                component.$destroy();
+                resolve(confirmed);
+              },
+            },
           },
           [message],
         );
diff --git a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
index 21fd4e7dfc65b7..3fca355d85917f 100644
--- a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
+++ b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
@@ -27,17 +27,17 @@ describe('Confirm Modal', () => {
     beforeEach(() => {
       createComponent();
       modal = findGlModal();
-      jest.spyOn(wrapper.vm.$root, '$emit');
+      jest.spyOn(wrapper.vm, '$emit');
     });
 
-    it('should emit root `confirmModal::confirmed` event on `primary` modal event', () => {
+    it('should emit `confirmed` event on `primary` modal event', () => {
       findGlModal().vm.$emit('primary');
-      expect(wrapper.vm.$root.$emit).toHaveBeenCalledWith('confirmModal::confirmed');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('confirmed');
     });
 
-    it('should emit root `confirmModal::closed` event on `hidden` modal event', () => {
-      modal.vm.$emit('primary');
-      expect(wrapper.vm.$root.$emit).toHaveBeenCalledWith('confirmModal::confirmed');
+    it('should emit closed` event on `hidden` modal event', () => {
+      modal.vm.$emit('hidden');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('closed');
     });
   });
 
-- 
GitLab


From 2b83d85aa53a114767f140cb722fd0eafad6cc05 Mon Sep 17 00:00:00 2001
From: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Date: Tue, 9 Nov 2021 17:58:32 +0200
Subject: [PATCH 6/8] Fix the spec based on review feedback

---
 .../lib/utils/confirm_via_gl_modal/confirm_modal_spec.js    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
index 3fca355d85917f..0cfd1dd3fdd0fd 100644
--- a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
+++ b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
@@ -1,13 +1,13 @@
 import { GlModal } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import ComfirmModal from '~/lib/utils/confirm_via_gl_modal/confirm_modal.vue';
+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(ComfirmModal, {
+    wrapper = mount(ConfirmModal, {
       propsData: {
         primaryText,
         primaryVariant,
@@ -16,9 +16,7 @@ describe('Confirm Modal', () => {
   };
 
   afterEach(() => {
-    if (wrapper) {
       wrapper.destroy();
-    }
   });
 
   const findGlModal = () => wrapper.findComponent(GlModal);
-- 
GitLab


From 4c73a71f6e524f2c3a8b30e489a2d18d3bc864d0 Mon Sep 17 00:00:00 2001
From: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Date: Wed, 10 Nov 2021 15:10:47 +0200
Subject: [PATCH 7/8] Address maintainer feedback

---
 .../lib/utils/confirm_via_gl_modal/confirm_modal.vue | 12 ++++++------
 .../confirm_via_gl_modal/confirm_via_gl_modal.js     |  5 ++++-
 .../utils/confirm_via_gl_modal/confirm_modal_spec.js |  7 +++----
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
index 69604943313e43..733d0f69f5d855 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
@@ -3,6 +3,7 @@ import { GlModal } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
+  cancelAction: { text: __('Cancel') },
   components: {
     GlModal,
   },
@@ -18,11 +19,10 @@ export default {
       default: 'confirm',
     },
   },
-  data() {
-    return {
-      primaryAction: { text: this.primaryText, attributes: { variant: this.primaryVariant } },
-      cancelAction: { text: __('Cancel') },
-    };
+  computed: {
+    primaryAction() {
+      return { text: this.primaryText, attributes: { variant: this.primaryVariant } };
+    },
   },
   mounted() {
     this.$refs.modal.show();
@@ -37,7 +37,7 @@ export default {
     modal-id="confirmationModal"
     body-class="gl-display-flex"
     :action-primary="primaryAction"
-    :action-cancel="cancelAction"
+    :action-cancel="$options.cancelAction"
     hide-header
     @primary="$emit('confirmed')"
     @hidden="$emit('closed')"
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
index 651cf041373a71..b0ce10c8dc4c9f 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
@@ -9,7 +9,10 @@ export function confirmViaGlModal(message, element) {
     if (element.classList.contains('btn-danger')) {
       props.primaryVariant = 'danger';
     }
-    const screenReaderText = element.querySelector('.sr-only')?.textContent;
+    const screenReaderText =
+      element.querySelector('.gl-sr-only')?.textContent ||
+      element.querySelector('.sr-only')?.textContent ||
+      element.getAttribute('aria-label');
 
     if (screenReaderText) {
       props.primaryText = screenReaderText;
diff --git a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
index 0cfd1dd3fdd0fd..d19f9352bbc816 100644
--- a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
+++ b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
@@ -16,7 +16,7 @@ describe('Confirm Modal', () => {
   };
 
   afterEach(() => {
-      wrapper.destroy();
+    wrapper.destroy();
   });
 
   const findGlModal = () => wrapper.findComponent(GlModal);
@@ -25,17 +25,16 @@ describe('Confirm Modal', () => {
     beforeEach(() => {
       createComponent();
       modal = findGlModal();
-      jest.spyOn(wrapper.vm, '$emit');
     });
 
     it('should emit `confirmed` event on `primary` modal event', () => {
       findGlModal().vm.$emit('primary');
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('confirmed');
+      expect(wrapper.emitted('confirmed')).toBeTruthy();
     });
 
     it('should emit closed` event on `hidden` modal event', () => {
       modal.vm.$emit('hidden');
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('closed');
+      expect(wrapper.emitted('closed')).toBeTruthy();
     });
   });
 
-- 
GitLab


From 3d70e7d03bd62ce2ad6048cab2b0794a3e0857a3 Mon Sep 17 00:00:00 2001
From: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Date: Wed, 10 Nov 2021 20:28:14 +0200
Subject: [PATCH 8/8] Allow to provide confirm variant instead of adopting from
 trigger btn

---
 .../lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
index b0ce10c8dc4c9f..f0908a60ac53d5 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
@@ -6,8 +6,10 @@ export function confirmViaGlModal(message, element) {
 
     const props = {};
 
-    if (element.classList.contains('btn-danger')) {
-      props.primaryVariant = 'danger';
+    const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant');
+
+    if (confirmBtnVariant) {
+      props.primaryVariant = confirmBtnVariant;
     }
     const screenReaderText =
       element.querySelector('.gl-sr-only')?.textContent ||
-- 
GitLab