1 files changed, 81 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/delete_label_modal.vue b/app/assets/javascripts/vue_shared/components/delete_label_modal.vue
new file mode 100644
index 00000000000..1ff0938d086
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/delete_label_modal.vue
@@ -0,0 +1,81 @@
+<script>
+import { GlModal, GlSprintf, GlButton } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
+
+export default {
+  components: {
+    GlModal,
+    GlSprintf,
+    GlButton,
+  },
+  props: {
+    selector: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      labelName: '',
+      subjectName: '',
+      destroyPath: '',
+      modalId: uniqueId('modal-delete-label-'),
+    };
+  },
+  mounted() {
+    document.querySelectorAll(this.selector).forEach((button) => {
+      button.addEventListener('click', (e) => {
+        e.preventDefault();
+
+        const { labelName, subjectName, destroyPath } = button.dataset;
+        this.labelName = labelName;
+        this.subjectName = subjectName;
+        this.destroyPath = destroyPath;
+        this.openModal();
+      });
+    });
+  },
+  methods: {
+    openModal() {
+      this.$refs.modal.show();
+    },
+    closeModal() {
+      this.$refs.modal.hide();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal ref="modal" :modal-id="modalId">
+    <template #modal-title>
+      <gl-sprintf :message="__('Delete label: %{labelName}')">
+        <template #labelName>
+          {{ labelName }}
+        </template>
+      </gl-sprintf>
+    </template>
+    <gl-sprintf
+      :message="
+        __(
+          `%{strongStart}${labelName}%{strongEnd} will be permanently deleted from ${subjectName}. This cannot be undone.`,
+        )
+      "
+    >
+      <template #strong="{ content }">
+        <strong>{{ content }}</strong>
+      </template>
+    </gl-sprintf>
+    <template #modal-footer>
+      <gl-button category="secondary" @click="closeModal">{{ __('Cancel') }}</gl-button>
+      <gl-button
+        category="primary"
+        variant="danger"
+        :href="destroyPath"
+        data-method="delete"
+        data-testid="delete-button"
+        >{{ __('Delete label') }}</gl-button
+      >
+    </template>
+  </gl-modal>
+</template>