Merge branch 'fix-remove-approval-button-type' into 'master'

Updated the approvers rule removal modal

See merge request gitlab-org/gitlab!56230

ee/app/assets/javascripts/approvals/components/modal_rule_remove.vue

 <script>
-/* eslint-disable vue/no-v-html */
-import { escape } from 'lodash';
+import { GlSprintf } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
-import { sprintf, n__, s__ } from '~/locale';
+import { n__, s__, __ } from '~/locale';
 import GlModalVuex from '~/vue_shared/components/gl_modal_vuex.vue';
 
+const i18n = {
+  cancelButtonText: __('Cancel'),
+  primaryButtonText: __('Remove approvers'),
+  modalTitle: __('Remove approvers?'),
+  removeWarningText: s__(
+    'ApprovalRuleRemove|You are about to remove the %{name} approver group which has %{nMembers}.',
+  ),
+};
+
 export default {
   components: {
     GlModalVuex,
+    GlSprintf,
   },
   props: {
     modalId: {
@@ -19,33 +28,22 @@ export default {
     ...mapState('deleteModal', {
       rule: 'data',
     }),
-    message() {
-      if (!this.rule) {
-        return '';
-      }
-
-      const nMembers = n__(
+    membersText() {
+      return n__(
         'ApprovalRuleRemove|%d member',
         'ApprovalRuleRemove|%d members',
         this.rule.approvers.length,
       );
-      const removeWarning = sprintf(
-        s__(
-          'ApprovalRuleRemove|You are about to remove the %{name} approver group which has %{nMembers}.',
-        ),
-        {
-          name: `<strong>${escape(this.rule.name)}</strong>`,
-          nMembers: `<strong>${nMembers}</strong>`,
-        },
-        false,
-      );
-      const revokeWarning = n__(
+    },
+    revokeWarningText() {
+      return n__(
         'ApprovalRuleRemove|Approvals from this member are not revoked.',
         'ApprovalRuleRemove|Approvals from these members are not revoked.',
         this.rule.approvers.length,
       );
-
-      return `${removeWarning} ${revokeWarning}`;
+    },
+    modalText() {
+      return `${i18n.removeWarningText} ${this.revokeWarningText}`;
     },
   },
   methods: {
@@ -54,6 +52,16 @@ export default {
       this.deleteRule(this.rule.id);
     },
   },
+  buttonActions: {
+    primary: {
+      text: i18n.primaryButtonText,
+      attributes: [{ variant: 'danger' }],
+    },
+    cancel: {
+      text: i18n.cancelButtonText,
+    },
+  },
+  i18n,
 };
 </script>
 
@@ -61,12 +69,23 @@ export default {
   <gl-modal-vuex
     modal-module="deleteModal"
     :modal-id="modalId"
-    :title="__('Remove approvers?')"
-    :ok-title="__('Remove approvers')"
-    ok-variant="remove"
-    :cancel-title="__('Cancel')"
+    :title="$options.i18n.modalTitle"
+    :action-primary="$options.buttonActions.primary"
+    :action-cancel="$options.buttonActions.cancel"
     @ok.prevent="submit"
   >
-    <p v-html="message"></p>
+    <p v-if="rule">
+      <gl-sprintf :message="modalText">
+        <template #name>
+          <strong>{{ rule.name }}</strong>
+        </template>
+        <template #nMembers>
+          <strong>{{ membersText }}</strong>
+        </template>
+        <template #revokeWarning>
+          {{ revokeWarningText }}
+        </template>
+      </gl-sprintf>
+    </p>
   </gl-modal-vuex>
 </template>

ee/changelogs/unreleased/fix-remove-approval-button-type.yml

+---
+title: Update the approvers rule removal modal button to use new danger variant
+merge_request: 56230
+author:
+type: changed

ee/spec/frontend/approvals/components/__snapshots__/modal_rule_remove_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Approvals ModalRuleRemove shows message 1`] = `
+<div
+  title="Remove approvers?"
+>
+  <p>
+    You are about to remove the 
+    <strong>
+      Lorem
+    </strong>
+     approver group which has 
+    <strong>
+      5 members
+    </strong>
+    . Approvals from these members are not revoked.
+  </p>
+</div>
+`;
+
+exports[`Approvals ModalRuleRemove shows singular message 1`] = `
+<div
+  title="Remove approvers?"
+>
+  <p>
+    You are about to remove the 
+    <strong>
+      Lorem
+    </strong>
+     approver group which has 
+    <strong>
+      1 member
+    </strong>
+    . Approvals from this member are not revoked.
+  </p>
+</div>
+`;

ee/spec/frontend/approvals/components/modal_rule_remove_spec.js

+import { GlSprintf } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import ModalRuleRemove from 'ee/approvals/components/modal_rule_remove.vue';
+import { stubComponent } from 'helpers/stub_component';
 import GlModalVuex from '~/vue_shared/components/gl_modal_vuex.vue';
 
 const MODAL_MODULE = 'deleteModal';
@@ -21,6 +23,8 @@ describe('Approvals ModalRuleRemove', () => {
   let actions;
   let deleteModalState;
 
+  const findModal = () => wrapper.findComponent(GlModalVuex);
+
   const factory = (options = {}) => {
     const store = new Vuex.Store({
       actions,
@@ -42,6 +46,12 @@ describe('Approvals ModalRuleRemove', () => {
       localVue,
       store,
       propsData,
+      stubs: {
+        GlModalVuex: stubComponent(GlModalVuex, {
+          props: ['modalModule', 'modalId', 'actionPrimary', 'actionCancel'],
+        }),
+        GlSprintf,
+      },
     });
   };
 
@@ -57,13 +67,18 @@ describe('Approvals ModalRuleRemove', () => {
   it('renders modal', () => {
     factory();
 
-    const modal = wrapper.find(GlModalVuex);
+    const modal = findModal();
 
     expect(modal.exists()).toBe(true);
     expect(modal.props()).toEqual(
       expect.objectContaining({
         modalModule: MODAL_MODULE,
         modalId: TEST_MODAL_ID,
+        actionPrimary: {
+          text: 'Remove approvers',
+          attributes: [{ variant: 'danger' }],
+        },
+        actionCancel: { text: 'Cancel' },
       }),
     );
   });
@@ -71,10 +86,7 @@ describe('Approvals ModalRuleRemove', () => {
   it('shows message', () => {
     factory();
 
-    const modal = wrapper.find(GlModalVuex);
-
-    expect(modal.text()).toContain(TEST_RULE.name);
-    expect(modal.text()).toContain(`${TEST_RULE.approvers.length} members`);
+    expect(findModal().element).toMatchSnapshot();
   });
 
   it('shows singular message', () => {
@@ -84,9 +96,7 @@ describe('Approvals ModalRuleRemove', () => {
     };
     factory();
 
-    const modal = wrapper.find(GlModalVuex);
-
-    expect(modal.text()).toContain('1 member');
+    expect(findModal().element).toMatchSnapshot();
   });
 
   it('deletes rule when modal is submitted', () => {
@@ -94,7 +104,7 @@ describe('Approvals ModalRuleRemove', () => {
 
     expect(actions.deleteRule).not.toHaveBeenCalled();
 
-    const modal = wrapper.find(GlModalVuex);
+    const modal = findModal();
     modal.vm.$emit('ok', new Event('submit'));
 
     expect(actions.deleteRule).toHaveBeenCalledWith(expect.anything(), TEST_RULE.id);