Hide confirmation required error state

Changelog: changed

app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js

@@ -14,6 +14,8 @@ const Template = (args, { argTypes }) => ({
     additionalInformation: args.additionalInformation || null,
     confirmDangerMessage: args.confirmDangerMessage || 'You require more Vespene Gas',
     htmlConfirmationMessage: args.confirmDangerMessage || false,
+    confirmButtonText: args.confirmButtonText || 'Cancel',
+    cancelButtonText: args.cancelButtonText || 'Confirm',
   },
 });
 

app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue

@@ -12,7 +12,7 @@ import {
   CONFIRM_DANGER_MODAL_TITLE,
   CONFIRM_DANGER_PHRASE_TEXT,
   CONFIRM_DANGER_WARNING,
-  CONFIRM_DANGER_MODAL_ERROR,
+  CONFIRM_DANGER_MODAL_CANCEL,
 } from './constants';
 
 export default {
@@ -40,6 +40,9 @@ export default {
     additionalInformation: {
       default: CONFIRM_DANGER_WARNING,
     },
+    cancelButtonText: {
+      default: CONFIRM_DANGER_MODAL_CANCEL,
+    },
   },
   props: {
     modalId: {
@@ -66,6 +69,11 @@ export default {
         attributes: [{ variant: 'danger', disabled: !this.isValid, class: 'qa-confirm-button' }],
       };
     },
+    actionCancel() {
+      return {
+        text: this.cancelButtonText,
+      };
+    },
   },
   methods: {
     equalString(a, b) {
@@ -77,7 +85,6 @@ export default {
     CONFIRM_DANGER_MODAL_TITLE,
     CONFIRM_DANGER_WARNING,
     CONFIRM_DANGER_PHRASE_TEXT,
-    CONFIRM_DANGER_MODAL_ERROR,
   },
 };
 </script>
@@ -88,6 +95,7 @@ export default {
     :data-testid="modalId"
     :title="$options.i18n.CONFIRM_DANGER_MODAL_TITLE"
     :action-primary="actionPrimary"
+    :action-cancel="actionCancel"
     @primary="$emit('confirm')"
   >
     <gl-alert
@@ -110,7 +118,7 @@ export default {
         </template>
       </gl-sprintf>
     </p>
-    <gl-form-group :state="isValid" :invalid-feedback="$options.i18n.CONFIRM_DANGER_MODAL_ERROR">
+    <gl-form-group :state="isValid">
       <gl-form-input
         id="confirm_name_input"
         v-model="confirmationPhrase"

app/assets/javascripts/vue_shared/components/confirm_danger/constants.js

@@ -2,7 +2,6 @@ import { __ } from '~/locale';
 
 export const CONFIRM_DANGER_MODAL_ID = 'confirm-danger-modal';
 export const CONFIRM_DANGER_MODAL_TITLE = __('Confirmation required');
-export const CONFIRM_DANGER_MODAL_ERROR = __('Confirmation required');
 export const CONFIRM_DANGER_MODAL_BUTTON = __('Confirm');
 export const CONFIRM_DANGER_WARNING = __(
   'This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.',
@@ -10,3 +9,4 @@ export const CONFIRM_DANGER_WARNING = __(
 export const CONFIRM_DANGER_PHRASE_TEXT = __(
   'Please type %{phrase_code} to proceed or close this modal to cancel.',
 );
+export const CONFIRM_DANGER_MODAL_CANCEL = __('Cancel');

spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js

@@ -3,6 +3,7 @@ import {
   CONFIRM_DANGER_WARNING,
   CONFIRM_DANGER_MODAL_BUTTON,
   CONFIRM_DANGER_MODAL_ID,
+  CONFIRM_DANGER_MODAL_CANCEL,
 } from '~/vue_shared/components/confirm_danger/constants';
 import ConfirmDangerModal from '~/vue_shared/components/confirm_danger/confirm_danger_modal.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -10,6 +11,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 describe('Confirm Danger Modal', () => {
   const confirmDangerMessage = 'This is a dangerous activity';
   const confirmButtonText = 'Confirm button text';
+  const cancelButtonText = 'Cancel button text';
   const phrase = 'You must construct additional pylons';
   const modalId = CONFIRM_DANGER_MODAL_ID;
 
@@ -21,6 +23,7 @@ describe('Confirm Danger Modal', () => {
   const findDefaultWarning = () => wrapper.findByTestId('confirm-danger-warning');
   const findAdditionalMessage = () => wrapper.findByTestId('confirm-danger-message');
   const findPrimaryAction = () => findModal().props('actionPrimary');
+  const findCancelAction = () => findModal().props('actionCancel');
   const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[0][attr];
 
   const createComponent = ({ provide = {} } = {}) =>
@@ -34,7 +37,9 @@ describe('Confirm Danger Modal', () => {
     });
 
   beforeEach(() => {
-    wrapper = createComponent({ provide: { confirmDangerMessage, confirmButtonText } });
+    wrapper = createComponent({
+      provide: { confirmDangerMessage, confirmButtonText, cancelButtonText },
+    });
   });
 
   afterEach(() => {
@@ -54,6 +59,10 @@ describe('Confirm Danger Modal', () => {
     expect(findPrimaryActionAttributes('variant')).toBe('danger');
   });
 
+  it('renders the cancel button', () => {
+    expect(findCancelAction().text).toBe(cancelButtonText);
+  });
+
   it('renders the correct confirmation phrase', () => {
     expect(findConfirmationPhrase().text()).toBe(
       `Please type ${phrase} to proceed or close this modal to cancel.`,
@@ -72,6 +81,10 @@ describe('Confirm Danger Modal', () => {
     it('renders the default confirm button', () => {
       expect(findPrimaryAction().text).toBe(CONFIRM_DANGER_MODAL_BUTTON);
     });
+
+    it('renders the default cancel button', () => {
+      expect(findCancelAction().text).toBe(CONFIRM_DANGER_MODAL_CANCEL);
+    });
   });
 
   describe('with a valid confirmation phrase', () => {