Merge branch 'ek-add-modal-vue-shared-stories' into 'master'

Add confirm modal stories to vue shared

See merge request gitlab-org/gitlab!72663

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

+/* eslint-disable @gitlab/require-i18n-strings */
+import ConfirmDanger from './confirm_danger.vue';
+
+export default {
+  component: ConfirmDanger,
+  title: 'vue_shared/components/modals/confirm_danger_modal',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { ConfirmDanger },
+  props: Object.keys(argTypes),
+  template: '<confirm-danger v-bind="$props" />',
+  provide: {
+    confirmDangerMessage: 'You require more Vespene Gas',
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  phrase: 'You must construct additional pylons',
+  buttonText: 'Confirm button text',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+};

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

 <script>
-import { GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui';
 import {
   CONFIRM_DANGER_MODAL_BUTTON,
   CONFIRM_DANGER_MODAL_TITLE,
   CONFIRM_DANGER_PHRASE_TEXT,
   CONFIRM_DANGER_WARNING,
+  CONFIRM_DANGER_MODAL_ERROR,
 } from './constants';
 
 export default {
   name: 'ConfirmDangerModal',
   components: {
+    GlAlert,
     GlModal,
     GlFormGroup,
     GlFormInput,
@@ -38,8 +40,8 @@ export default {
   },
   computed: {
     isValid() {
-      return (
-        this.confirmationPhrase.length && this.equalString(this.confirmationPhrase, this.phrase)
+      return Boolean(
+        this.confirmationPhrase.length && this.equalString(this.confirmationPhrase, this.phrase),
       );
     },
     actionPrimary() {
@@ -59,6 +61,7 @@ export default {
     CONFIRM_DANGER_MODAL_TITLE,
     CONFIRM_DANGER_WARNING,
     CONFIRM_DANGER_PHRASE_TEXT,
+    CONFIRM_DANGER_MODAL_ERROR,
   },
 };
 </script>
@@ -71,9 +74,15 @@ export default {
     :action-primary="actionPrimary"
     @primary="$emit('confirm')"
   >
-    <p v-if="confirmDangerMessage" class="text-danger" data-testid="confirm-danger-message">
+    <gl-alert
+      v-if="confirmDangerMessage"
+      variant="danger"
+      data-testid="confirm-danger-message"
+      :dismissible="false"
+      class="gl-mb-4"
+    >
       {{ confirmDangerMessage }}
-    </p>
+    </gl-alert>
     <p data-testid="confirm-danger-warning">{{ $options.i18n.CONFIRM_DANGER_WARNING }}</p>
     <p data-testid="confirm-danger-phrase">
       <gl-sprintf :message="$options.i18n.CONFIRM_DANGER_PHRASE_TEXT">
@@ -82,8 +91,13 @@ export default {
         </template>
       </gl-sprintf>
     </p>
-    <gl-form-group class="form-control" :state="isValid">
-      <gl-form-input v-model="confirmationPhrase" data-testid="confirm-danger-input" type="text" />
+    <gl-form-group :state="isValid" :invalid-feedback="$options.i18n.CONFIRM_DANGER_MODAL_ERROR">
+      <gl-form-input
+        v-model="confirmationPhrase"
+        class="form-control"
+        data-testid="confirm-danger-input"
+        type="text"
+      />
     </gl-form-group>
   </gl-modal>
 </template>

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

@@ -2,6 +2,7 @@ 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.',