From 6e4e1050d9dba2b7b2523fdd1768823ab85feef4 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 20 Aug 2020 18:42:06 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-3-stable-ee

---
 .../projects/components/project_delete_button.vue  |  52 ++++++++++
 .../projects/components/remove_modal.vue           | 108 ---------------------
 .../projects/components/shared/delete_button.vue   | 101 +++++++++++++++++++
 3 files changed, 153 insertions(+), 108 deletions(-)
 create mode 100644 app/assets/javascripts/projects/components/project_delete_button.vue
 delete mode 100644 app/assets/javascripts/projects/components/remove_modal.vue
 create mode 100644 app/assets/javascripts/projects/components/shared/delete_button.vue

(limited to 'app/assets/javascripts/projects/components')

diff --git a/app/assets/javascripts/projects/components/project_delete_button.vue b/app/assets/javascripts/projects/components/project_delete_button.vue
new file mode 100644
index 00000000000..4b27c5e3d30
--- /dev/null
+++ b/app/assets/javascripts/projects/components/project_delete_button.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
+import SharedDeleteButton from './shared/delete_button.vue';
+
+export default {
+  components: {
+    GlSprintf,
+    GlAlert,
+    SharedDeleteButton,
+  },
+  props: {
+    confirmPhrase: {
+      type: String,
+      required: true,
+    },
+    formPath: {
+      type: String,
+      required: true,
+    },
+  },
+  strings: {
+    alertTitle: __('You are about to permanently delete this project'),
+    alertBody: __(
+      'Once a project is permanently deleted it %{strongStart}cannot be recovered%{strongEnd}. Permanently deleting this project will %{strongStart}immediately delete%{strongEnd} its respositories and %{strongStart}all related resources%{strongEnd} including issues, merge requests etc.',
+    ),
+    modalBody: __(
+      "This action cannot be undone. You will lose the project's respository and all conent: issues, merge requests, etc.",
+    ),
+  },
+};
+</script>
+
+<template>
+  <shared-delete-button v-bind="{ confirmPhrase, formPath }">
+    <template #modal-body>
+      <gl-alert
+        class="gl-mb-5"
+        variant="danger"
+        :title="$options.strings.alertTitle"
+        :dismissible="false"
+      >
+        <gl-sprintf :message="$options.strings.alertBody">
+          <template #strong="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
+      <p>{{ $options.strings.modalBody }}</p>
+    </template>
+  </shared-delete-button>
+</template>
diff --git a/app/assets/javascripts/projects/components/remove_modal.vue b/app/assets/javascripts/projects/components/remove_modal.vue
deleted file mode 100644
index 37f58efcb30..00000000000
--- a/app/assets/javascripts/projects/components/remove_modal.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script>
-import { GlModal, GlModalDirective, GlSprintf, GlFormInput, GlButton } from '@gitlab/ui';
-import { __ } from '~/locale';
-import { rstrip } from '~/lib/utils/common_utils';
-import csrf from '~/lib/utils/csrf';
-
-export default {
-  components: {
-    GlModal,
-    GlSprintf,
-    GlFormInput,
-    GlButton,
-  },
-  directives: {
-    GlModal: GlModalDirective,
-  },
-  props: {
-    confirmPhrase: {
-      type: String,
-      required: true,
-    },
-    warningMessage: {
-      type: String,
-      required: true,
-    },
-    formPath: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      userInput: null,
-    };
-  },
-  computed: {
-    buttonDisabled() {
-      return rstrip(this.userInput) !== this.confirmPhrase;
-    },
-    csrfToken() {
-      return csrf.token;
-    },
-  },
-  methods: {
-    submitForm() {
-      this.$refs.form.submit();
-    },
-  },
-  strings: {
-    removeProject: __('Remove project'),
-    title: __('Confirmation required'),
-    confirm: __('Confirm'),
-    dataLoss: __(
-      'This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.',
-    ),
-    confirmText: __('Please type %{phrase_code} to proceed or close this modal to cancel.'),
-  },
-  modalId: 'remove-project-modal',
-};
-</script>
-
-<template>
-  <form ref="form" :action="formPath" method="post">
-    <input type="hidden" name="_method" value="delete" />
-    <input :value="csrfToken" type="hidden" name="authenticity_token" />
-    <gl-button v-gl-modal="$options.modalId" category="primary" variant="danger">{{
-      $options.strings.removeProject
-    }}</gl-button>
-    <gl-modal
-      ref="removeModal"
-      :modal-id="$options.modalId"
-      size="sm"
-      ok-variant="danger"
-      footer-class="bg-gray-light gl-p-5"
-    >
-      <template #modal-title>{{ $options.strings.title }}</template>
-      <template #modal-footer>
-        <div class="gl-w-full gl-display-flex gl-just-content-start gl-m-0">
-          <gl-button
-            :disabled="buttonDisabled"
-            category="primary"
-            variant="danger"
-            @click="submitForm"
-          >
-            {{ $options.strings.confirm }}
-          </gl-button>
-        </div>
-      </template>
-      <div>
-        <p class="gl-text-red-500 gl-font-weight-bold">{{ warningMessage }}</p>
-        <p class="gl-mb-0">{{ $options.strings.dataLoss }}</p>
-        <p>
-          <gl-sprintf :message="$options.strings.confirmText">
-            <template #phrase_code>
-              <code>{{ confirmPhrase }}</code>
-            </template>
-          </gl-sprintf>
-        </p>
-        <gl-form-input
-          id="confirm_name_input"
-          v-model="userInput"
-          name="confirm_name_input"
-          type="text"
-        />
-      </div>
-    </gl-modal>
-  </form>
-</template>
diff --git a/app/assets/javascripts/projects/components/shared/delete_button.vue b/app/assets/javascripts/projects/components/shared/delete_button.vue
new file mode 100644
index 00000000000..e3f4500d404
--- /dev/null
+++ b/app/assets/javascripts/projects/components/shared/delete_button.vue
@@ -0,0 +1,101 @@
+<script>
+import { uniqueId } from 'lodash';
+import { GlModal, GlModalDirective, GlFormInput, GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+import csrf from '~/lib/utils/csrf';
+
+export default {
+  components: {
+    GlModal,
+    GlFormInput,
+    GlButton,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  props: {
+    confirmPhrase: {
+      type: String,
+      required: true,
+    },
+    formPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      userInput: null,
+      modalId: uniqueId('delete-project-modal-'),
+    };
+  },
+  computed: {
+    confirmDisabled() {
+      return this.userInput !== this.confirmPhrase;
+    },
+    csrfToken() {
+      return csrf.token;
+    },
+    modalActionProps() {
+      return {
+        primary: {
+          text: __('Yes, delete project'),
+          attributes: [{ variant: 'danger' }, { disabled: this.confirmDisabled }],
+        },
+        cancel: {
+          text: __('Cancel, keep project'),
+        },
+      };
+    },
+  },
+  methods: {
+    submitForm() {
+      this.$refs.form.submit();
+    },
+  },
+  strings: {
+    deleteProject: __('Delete project'),
+    title: __('Delete project. Are you ABSOLUTELY SURE?'),
+    confirmText: __('Please type the following to confirm:'),
+  },
+};
+</script>
+
+<template>
+  <form ref="form" :action="formPath" method="post">
+    <input type="hidden" name="_method" value="delete" />
+    <input :value="csrfToken" type="hidden" name="authenticity_token" />
+
+    <gl-button v-gl-modal="modalId" category="primary" variant="danger">{{
+      $options.strings.deleteProject
+    }}</gl-button>
+
+    <gl-modal
+      ref="removeModal"
+      :modal-id="modalId"
+      size="sm"
+      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>
+        <slot name="modal-body"></slot>
+        <p class="gl-mb-1">{{ $options.strings.confirmText }}</p>
+        <p>
+          <code>{{ confirmPhrase }}</code>
+        </p>
+        <gl-form-input
+          id="confirm_name_input"
+          v-model="userInput"
+          name="confirm_name_input"
+          type="text"
+        />
+        <slot name="modal-footer"></slot>
+      </div>
+    </gl-modal>
+  </form>
+</template>
-- 
cgit v1.2.1