1 files changed, 171 insertions, 0 deletions
diff --git a/app/assets/javascripts/branches/components/delete_merged_branches.vue b/app/assets/javascripts/branches/components/delete_merged_branches.vue
new file mode 100644
index 00000000000..70974f2e725
--- /dev/null
+++ b/app/assets/javascripts/branches/components/delete_merged_branches.vue
@@ -0,0 +1,171 @@
+<script>
+import { GlButton, GlFormInput, GlModal, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import csrf from '~/lib/utils/csrf';
+import { sprintf, s__, __ } from '~/locale';
+
+export const i18n = {
+  deleteButtonText: s__('Branches|Delete merged branches'),
+  buttonTooltipText: s__("Branches|Delete all branches that are merged into '%{defaultBranch}'"),
+  modalTitle: s__('Branches|Delete all merged branches?'),
+  modalMessage: s__(
+    'Branches|You are about to %{strongStart}delete all branches%{strongEnd} that were merged into %{codeStart}%{defaultBranch}%{codeEnd}.',
+  ),
+  notVisibleBranchesWarning: s__(
+    'Branches|This may include merged branches that are not visible on the current screen.',
+  ),
+  protectedBranchWarning: s__(
+    "Branches|A branch won't be deleted if it is protected or associated with an open merge request.",
+  ),
+  permanentEffectWarning: s__(
+    'Branches|This bulk action is %{strongStart}permanent and cannot be undone or recovered%{strongEnd}.',
+  ),
+  confirmationMessage: s__(
+    'Branches|Plese type the following to confirm: %{codeStart}delete%{codeEnd}.',
+  ),
+  cancelButtonText: __('Cancel'),
+};
+
+export default {
+  csrf,
+  components: {
+    GlModal,
+    GlButton,
+    GlFormInput,
+    GlSprintf,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    formPath: {
+      type: String,
+      required: true,
+    },
+    defaultBranch: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      areAllBranchesVisible: false,
+      enteredText: '',
+    };
+  },
+  computed: {
+    buttonTooltipText() {
+      return sprintf(this.$options.i18n.buttonTooltipText, { defaultBranch: this.defaultBranch });
+    },
+    modalMessage() {
+      return sprintf(this.$options.i18n.modalMessage, {
+        defaultBranch: this.defaultBranch,
+      });
+    },
+    isDeletingConfirmed() {
+      return this.enteredText.trim().toLowerCase() === 'delete';
+    },
+    isDeleteButtonDisabled() {
+      return !this.isDeletingConfirmed;
+    },
+  },
+  methods: {
+    openModal() {
+      this.$refs.modal.show();
+    },
+    submitForm() {
+      if (!this.isDeleteButtonDisabled) {
+        this.$refs.form.submit();
+      }
+    },
+    closeModal() {
+      this.$refs.modal.hide();
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <div>
+    <gl-button
+      v-gl-tooltip="buttonTooltipText"
+      class="gl-mr-3"
+      data-qa-selector="delete_merged_branches_button"
+      category="secondary"
+      variant="danger"
+      @click="openModal"
+      >{{ $options.i18n.deleteButtonText }}
+    </gl-button>
+    <gl-modal
+      ref="modal"
+      size="sm"
+      modal-id="delete-merged-branches"
+      :title="$options.i18n.modalTitle"
+    >
+      <form ref="form" :action="formPath" method="post" @submit.prevent>
+        <p>
+          <gl-sprintf :message="modalMessage">
+            <template #strong="{ content }">
+              <strong>{{ content }}</strong>
+            </template>
+            <template #code="{ content }">
+              <code>{{ content }}</code>
+            </template>
+          </gl-sprintf>
+        </p>
+        <p>
+          {{ $options.i18n.notVisibleBranchesWarning }}
+        </p>
+        <p>
+          {{ $options.i18n.protectedBranchWarning }}
+        </p>
+        <p>
+          <gl-sprintf :message="$options.i18n.permanentEffectWarning">
+            <template #strong="{ content }">
+              <strong>{{ content }}</strong>
+            </template>
+          </gl-sprintf>
+        </p>
+        <p>
+          <gl-sprintf :message="$options.i18n.confirmationMessage">
+            <template #code="{ content }">
+              <code>{{ content }}</code>
+            </template>
+          </gl-sprintf>
+          <gl-form-input
+            v-model="enteredText"
+            data-qa-selector="delete_merged_branches_input"
+            type="text"
+            size="sm"
+            class="gl-mt-2"
+            aria-labelledby="input-label"
+            autocomplete="off"
+            @keyup.enter="submitForm"
+          />
+        </p>
+
+        <input ref="method" type="hidden" name="_method" value="delete" />
+        <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+      </form>
+
+      <template #modal-footer>
+        <div
+          class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap gl-m-0 gl-mr-3"
+        >
+          <gl-button data-testid="delete-merged-branches-cancel-button" @click="closeModal">
+            {{ $options.i18n.cancelButtonText }}
+          </gl-button>
+          <gl-button
+            ref="deleteMergedBrancesButton"
+            :disabled="isDeleteButtonDisabled"
+            variant="danger"
+            data-qa-selector="delete_merged_branches_confirmation_button"
+            data-testid="delete-merged-branches-confirmation-button"
+            @click="submitForm"
+            >{{ $options.i18n.deleteButtonText }}</gl-button
+          >
+        </div>
+      </template>
+    </gl-modal>
+  </div>
+</template>