Add latest changes from gitlab-org/gitlab@master

2 files changed, 192 insertions, 119 deletions

diff --git a/app/assets/javascripts/projects/components/shared/delete_button.vue b/app/assets/javascripts/projects/components/shared/delete_button.vue
index 06c0230c8e0..c749034d2a8 100644
--- a/app/assets/javascripts/projects/components/shared/delete_button.vue
+++ b/app/assets/javascripts/projects/components/shared/delete_button.vue
@@ -1,19 +1,14 @@
 <script>
-import { GlModal, GlModalDirective, GlFormInput, GlButton, GlAlert, GlSprintf } from '@gitlab/ui';
-import { uniqueId } from 'lodash';
+import { GlButton, GlForm } from '@gitlab/ui';
 import csrf from '~/lib/utils/csrf';
 import { __ } from '~/locale';
+import DeleteModal from './delete_modal.vue';
 
 export default {
   components: {
-    GlAlert,
-    GlModal,
-    GlFormInput,
     GlButton,
-    GlSprintf,
-  },
-  directives: {
-    GlModal: GlModalDirective,
+    GlForm,
+    DeleteModal,
   },
   props: {
     confirmPhrase: {
@@ -47,139 +42,54 @@ export default {
   },
   data() {
     return {
-      userInput: null,
-      modalId: uniqueId('delete-project-modal-'),
+      isModalVisible: false,
     };
   },
   computed: {
-    confirmDisabled() {
-      return this.userInput !== this.confirmPhrase;
-    },
     csrfToken() {
       return csrf.token;
     },
-    modalActionProps() {
-      return {
-        primary: {
-          text: __('Yes, delete project'),
-          attributes: {
-            variant: 'danger',
-            disabled: this.confirmDisabled,
-            'data-qa-selector': 'confirm_delete_button',
-          },
-        },
-        cancel: {
-          text: __('Cancel, keep project'),
-        },
-      };
-    },
   },
   methods: {
     submitForm() {
-      this.$refs.form.submit();
+      this.$refs.form.$el.submit();
+    },
+    onButtonClick() {
+      this.isModalVisible = true;
     },
   },
-  strings: {
+  i18n: {
     deleteProject: __('Delete project'),
-    title: __('Are you absolutely sure?'),
-    confirmText: __('Enter the following to confirm:'),
-    isForkAlertTitle: __('You are about to delete this forked project containing:'),
-    isNotForkAlertTitle: __('You are about to delete this project containing:'),
-    isForkAlertBody: __('This process deletes the project repository and all related resources.'),
-    isNotForkAlertBody: __(
-      'This project is %{strongStart}NOT%{strongEnd} a fork. This process deletes the project repository and all related resources.',
-    ),
-    isNotForkMessage: __(
-      'This project is %{strongStart}NOT%{strongEnd} a fork, and has the following:',
-    ),
   },
 };
 </script>
 
 <template>
-  <form ref="form" :action="formPath" method="post">
+  <gl-form ref="form" :action="formPath" method="post">
     <input type="hidden" name="_method" value="delete" />
     <input :value="csrfToken" type="hidden" name="authenticity_token" />
 
+    <delete-modal
+      v-model="isModalVisible"
+      :confirm-phrase="confirmPhrase"
+      :is-fork="isFork"
+      :issues-count="issuesCount"
+      :merge-requests-count="mergeRequestsCount"
+      :forks-count="forksCount"
+      :stars-count="starsCount"
+      @primary="submitForm"
+    >
+      <template #modal-footer>
+        <slot name="modal-footer"></slot>
+      </template>
+    </delete-modal>
+
     <gl-button
-      v-gl-modal="modalId"
       category="primary"
       variant="danger"
       data-qa-selector="delete_button"
-      >{{ $options.strings.deleteProject }}</gl-button
+      @click="onButtonClick"
+      >{{ $options.i18n.deleteProject }}</gl-button
     >
-
-    <gl-modal
-      ref="removeModal"
-      :modal-id="modalId"
-      ok-variant="danger"
-      footer-class="gl-bg-gray-10 gl-p-5"
-      title-class="gl-text-red-500"
-      :action-primary="modalActionProps.primary"
-      :action-cancel="modalActionProps.cancel"
-      @ok="submitForm"
-    >
-      <template #modal-title>{{ $options.strings.title }}</template>
-      <div>
-        <gl-alert class="gl-mb-5" variant="danger" :dismissible="false">
-          <h4 v-if="isFork" data-testid="delete-alert-title" class="gl-alert-title">
-            {{ $options.strings.isForkAlertTitle }}
-          </h4>
-          <h4 v-else data-testid="delete-alert-title" class="gl-alert-title">
-            {{ $options.strings.isNotForkAlertTitle }}
-          </h4>
-          <ul>
-            <li>
-              <gl-sprintf :message="n__('%d issue', '%d issues', issuesCount)">
-                <template #issuesCount>{{ issuesCount }}</template>
-              </gl-sprintf>
-            </li>
-            <li>
-              <gl-sprintf
-                :message="n__('%d merge requests', '%d merge requests', mergeRequestsCount)"
-              >
-                <template #mergeRequestsCount>{{ mergeRequestsCount }}</template>
-              </gl-sprintf>
-            </li>
-            <li>
-              <gl-sprintf :message="n__('%d fork', '%d forks', forksCount)">
-                <template #forksCount>{{ forksCount }}</template>
-              </gl-sprintf>
-            </li>
-            <li>
-              <gl-sprintf :message="n__('%d star', '%d stars', starsCount)">
-                <template #starsCount>{{ starsCount }}</template>
-              </gl-sprintf>
-            </li>
-          </ul>
-          <gl-sprintf
-            v-if="isFork"
-            data-testid="delete-alert-body"
-            :message="$options.strings.isForkAlertBody"
-          />
-          <gl-sprintf
-            v-else
-            data-testid="delete-alert-body"
-            :message="$options.strings.isNotForkAlertBody"
-          >
-            <template #strong="{ content }">
-              <strong>{{ content }}</strong>
-            </template>
-          </gl-sprintf>
-        </gl-alert>
-        <p class="gl-mb-1">{{ $options.strings.confirmText }}</p>
-        <p>
-          <code class="gl-white-space-pre-wrap">{{ confirmPhrase }}</code>
-        </p>
-        <gl-form-input
-          id="confirm_name_input"
-          v-model="userInput"
-          name="confirm_name_input"
-          type="text"
-          data-qa-selector="confirm_name_field"
-        />
-        <slot name="modal-footer"></slot>
-      </div>
-    </gl-modal>
-  </form>
+  </gl-form>
 </template>
diff --git a/app/assets/javascripts/projects/components/shared/delete_modal.vue b/app/assets/javascripts/projects/components/shared/delete_modal.vue
new file mode 100644
index 00000000000..aded11ca92c
--- /dev/null
+++ b/app/assets/javascripts/projects/components/shared/delete_modal.vue
@@ -0,0 +1,163 @@
+<script>
+import { GlModal, GlAlert, GlSprintf, GlFormInput } from '@gitlab/ui';
+import uniqueId from 'lodash/uniqueId';
+import { __ } from '~/locale';
+
+export default {
+  i18n: {
+    deleteProject: __('Delete project'),
+    title: __('Are you absolutely sure?'),
+    confirmText: __('Enter the following to confirm:'),
+    isForkAlertTitle: __('You are about to delete this forked project containing:'),
+    isNotForkAlertTitle: __('You are about to delete this project containing:'),
+    isForkAlertBody: __('This process deletes the project repository and all related resources.'),
+    isNotForkAlertBody: __(
+      'This project is %{strongStart}NOT%{strongEnd} a fork. This process deletes the project repository and all related resources.',
+    ),
+    isNotForkMessage: __(
+      'This project is %{strongStart}NOT%{strongEnd} a fork, and has the following:',
+    ),
+  },
+  components: { GlModal, GlAlert, GlSprintf, GlFormInput },
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    confirmPhrase: {
+      type: String,
+      required: true,
+    },
+    isFork: {
+      type: Boolean,
+      required: true,
+    },
+    issuesCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    mergeRequestsCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    forksCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    starsCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      userInput: null,
+      modalId: uniqueId('delete-project-modal-'),
+    };
+  },
+  computed: {
+    confirmDisabled() {
+      return this.userInput !== this.confirmPhrase;
+    },
+    modalActionProps() {
+      return {
+        primary: {
+          text: __('Yes, delete project'),
+          attributes: {
+            variant: 'danger',
+            disabled: this.confirmDisabled,
+            'data-qa-selector': 'confirm_delete_button',
+          },
+        },
+        cancel: {
+          text: __('Cancel, keep project'),
+        },
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :visible="visible"
+    :modal-id="modalId"
+    footer-class="gl-bg-gray-10 gl-p-5"
+    title-class="gl-text-red-500"
+    :action-primary="modalActionProps.primary"
+    :action-cancel="modalActionProps.cancel"
+    @primary="$emit('primary', $event)"
+    @change="$emit('change', $event)"
+  >
+    <template #modal-title>{{ $options.i18n.title }}</template>
+    <div>
+      <gl-alert class="gl-mb-5" variant="danger" :dismissible="false">
+        <h4 v-if="isFork" data-testid="delete-alert-title" class="gl-alert-title">
+          {{ $options.i18n.isForkAlertTitle }}
+        </h4>
+        <h4 v-else data-testid="delete-alert-title" class="gl-alert-title">
+          {{ $options.i18n.isNotForkAlertTitle }}
+        </h4>
+        <ul>
+          <li v-if="issuesCount !== null">
+            <gl-sprintf :message="n__('%d issue', '%d issues', issuesCount)">
+              <template #issuesCount>{{ issuesCount }}</template>
+            </gl-sprintf>
+          </li>
+          <li v-if="mergeRequestsCount !== null">
+            <gl-sprintf
+              :message="n__('%d merge requests', '%d merge requests', mergeRequestsCount)"
+            >
+              <template #mergeRequestsCount>{{ mergeRequestsCount }}</template>
+            </gl-sprintf>
+          </li>
+          <li v-if="forksCount !== null">
+            <gl-sprintf :message="n__('%d fork', '%d forks', forksCount)">
+              <template #forksCount>{{ forksCount }}</template>
+            </gl-sprintf>
+          </li>
+          <li v-if="starsCount !== null">
+            <gl-sprintf :message="n__('%d star', '%d stars', starsCount)">
+              <template #starsCount>{{ starsCount }}</template>
+            </gl-sprintf>
+          </li>
+        </ul>
+        <gl-sprintf
+          v-if="isFork"
+          data-testid="delete-alert-body"
+          :message="$options.i18n.isForkAlertBody"
+        />
+        <gl-sprintf
+          v-else
+          data-testid="delete-alert-body"
+          :message="$options.i18n.isNotForkAlertBody"
+        >
+          <template #strong="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
+      <p class="gl-mb-1">{{ $options.i18n.confirmText }}</p>
+      <p>
+        <code class="gl-white-space-pre-wrap">{{ confirmPhrase }}</code>
+      </p>
+
+      <gl-form-input
+        id="confirm_name_input"
+        v-model="userInput"
+        name="confirm_name_input"
+        type="text"
+        data-qa-selector="confirm_name_field"
+      />
+      <slot name="modal-footer"></slot>
+    </div>
+  </gl-modal>
+</template>