debian-mirror-gitlab/app/assets/javascripts/branches/components/delete_merged_branches.vue

<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>