Improve delete merged branches modal

What does this MR do and why?

Improves deleting all merged branches experience by providing more clear messages and requesting user input regarding the amount of branches beeing deleted.

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Go to Repository > Branches
2. Click on 'Delete merged branches' button. (If you don't see one you need to create some merged branches).

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #20384 (closed)

app/assets/javascripts/branches/components/delete_merged_branches.vue

+<script>
+import {
+  GlButton,
+  GlFormInput,
+  GlModal,
+  GlSprintf,
+  GlTooltipDirective,
+  GlCollapse,
+} from '@gitlab/ui';
+import csrf from '~/lib/utils/csrf';
+import { sprintf, s__, __ } from '~/locale';
+
+const amountOfVisibleBranches = 10;
+
+export default {
+  csrf,
+  components: {
+    GlModal,
+    GlButton,
+    GlFormInput,
+    GlSprintf,
+    GlCollapse,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    branches: {
+      type: Array,
+      required: true,
+    },
+    formPath: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    defaultBranch: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      areAllBranchesVisible: false,
+      enteredBranchesAmount: '',
+    };
+  },
+  computed: {
+    branchesAmount() {
+      return this.branches.length;
+    },
+    visibleBranches() {
+      return this.branches.slice(0, this.$options.amountOfVisibleBranches);
+    },
+    isCollapseNeeded() {
+      return this.branches.length > this.$options.amountOfVisibleBranches;
+    },
+    collapsedBranches() {
+      return this.isCollapseNeeded
+        ? this.branches.slice(this.$options.amountOfVisibleBranches)
+        : [];
+    },
+    collapseToggleText() {
+      return this.areAllBranchesVisible ? this.$options.i18n.showLess : this.$options.i18n.showMore;
+    },
+    buttonTooltipText() {
+      return sprintf(this.$options.i18n.buttonTooltipText, { defaultBranch: this.defaultBranch });
+    },
+    modalMessage() {
+      const message =
+        this.branchesAmount === 1
+          ? this.$options.i18n.modalMessageSingle
+          : this.$options.i18n.modalMessage;
+
+      return sprintf(message, {
+        defaultBranch: this.defaultBranch,
+        branchesAmount: this.branchesAmount,
+      });
+    },
+    branchesAmountConfirmed() {
+      return this.enteredBranchesAmount === this.branchesAmount.toString();
+    },
+    deleteButtonDisabled() {
+      return !this.branchesAmountConfirmed;
+    },
+  },
+  methods: {
+    toggleCollapse() {
+      this.areAllBranchesVisible = !this.areAllBranchesVisible;
+    },
+    openModal() {
+      this.$refs.modal.show();
+    },
+    submitForm() {
+      this.$refs.form.submit();
+    },
+    closeModal() {
+      this.$refs.modal.hide();
+    },
+  },
+  amountOfVisibleBranches,
+  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?'),
+    modalTitleProtectedBranch: s__('Branches|Delete protected branch. Are you ABSOLUTELY SURE?'),
+    modalMessage: s__(
+      'Branches|You are about to %{strongStart} delete %{branchesAmount} branches %{strongEnd} that were merged into %{codeStart}%{defaultBranch}%{codeEnd}.',
+    ),
+    modalMessageSingle: s__(
+      'Branches|You are about to %{strongStart} delete %{branchesAmount} branch %{strongEnd} that was merged into %{codeStart}%{defaultBranch}%{codeEnd}.',
+    ),
+    protectedBranchWarning: s__(
+      "Branches|A branch won't be deleted if it is protected or assosiated with an open merge request.",
+    ),
+    undoneWarning: s__(
+      'Branches|This bulk action is %{strongStart}permanent and cannot be undone or recovered%{strongEnd}.',
+    ),
+    confirmationMessage: s__(
+      'Branches|Enter the number of merged branches to be deleted to confirm:',
+    ),
+    cancelButtonText: __('Cancel'),
+    showMore: s__('Branches|Show more'),
+    showLess: s__('Branches|Show Less'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-button
+      v-gl-tooltip.hover
+      class="gl-mr-3"
+      data-qa-selector="delete_merged_branches_link"
+      category="secondary"
+      variant="danger"
+      :title="buttonTooltipText"
+      @click="openModal"
+      >{{ $options.i18n.deleteButtonText }}
+    </gl-button>
+    <gl-modal
+      ref="modal"
+      size="sm"
+      scrollable
+      modal-id="delete-merged-branches"
+      :title="$options.i18n.modalTitle"
+    >
+      <form ref="form" :action="formPath" method="post">
+        <p>
+          <gl-sprintf :message="modalMessage">
+            <template #strong="{ content }">
+              <strong>{{ content }}</strong>
+            </template>
+            <template #code="{ content }">
+              <code>{{ content }}</code>
+            </template>
+          </gl-sprintf>
+        </p>
+        <div class="gl-mb-5">
+          <ul class="gl-mb-0">
+            <li v-for="branch in visibleBranches" :key="branch">{{ branch }}</li>
+          </ul>
+          <template v-if="isCollapseNeeded">
+            <gl-collapse :visible="areAllBranchesVisible">
+              <ul class="gl-mb-0">
+                <li v-for="branch in collapsedBranches" :key="branch">{{ branch }}</li>
+              </ul>
+            </gl-collapse>
+            <div class="gl-ml-3">
+              <gl-button class="gl-ml-7" variant="link" @click="toggleCollapse">
+                {{ collapseToggleText }}
+              </gl-button>
+            </div>
+          </template>
+        </div>
+        <p>
+          {{ $options.i18n.protectedBranchWarning }}
+        </p>
+        <p>
+          <gl-sprintf :message="$options.i18n.undoneWarning">
+            <template #strong="{ content }">
+              <strong>{{ content }}</strong>
+            </template>
+          </gl-sprintf>
+        </p>
+        <p>
+          {{ $options.i18n.confirmationMessage }}
+          <gl-form-input
+            v-model="enteredBranchesAmount"
+            name="delete_branches_input"
+            type="number"
+            size="xs"
+            class="gl-mt-2"
+            aria-labelledby="input-label"
+            autocomplete="off"
+          />
+        </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-branch-cancel-button" @click="closeModal">
+            {{ $options.i18n.cancelButtonText }}
+          </gl-button>
+          <gl-button
+            ref="deleteMergedBrancesButton"
+            :disabled="deleteButtonDisabled"
+            variant="danger"
+            data-qa-selector="delete_branch_confirmation_button"
+            data-testid="delete-branch-confirmation-button"
+            @click="submitForm"
+            >{{ $options.i18n.deleteButtonText }}</gl-button
+          >
+        </div>
+      </template>
+    </gl-modal>
+  </div>
+</template>