All files / app/assets/javascripts/members/components/modals remove_group_link_modal.vue

100% Statements 9/9
100% Branches 0/0
100% Functions 8/8
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88    8x                                                       18x     18x     18x       18x     18x     18x           2x       1x                                                              
<script>
import { GlModal, GlSprintf, GlForm } from '@gitlab/ui';
// eslint-disable-next-line no-restricted-imports
import { mapState, mapActions } from 'vuex';
import csrf from '~/lib/utils/csrf';
import { __, s__, sprintf } from '~/locale';
import { REMOVE_GROUP_LINK_MODAL_ID } from '../../constants';
 
export default {
  name: 'RemoveGroupLinkModal',
  actionCancel: {
    text: __('Cancel'),
  },
  actionPrimary: {
    text: s__('Members|Remove group'),
    attributes: {
      variant: 'danger',
      'data-testid': 'remove-group-button',
    },
  },
  csrf,
  i18n: {
    modalBody: s__('Members|Are you sure you want to remove "%{groupName}"?'),
  },
  modalId: REMOVE_GROUP_LINK_MODAL_ID,
  components: { GlModal, GlSprintf, GlForm },
  inject: ['namespace'],
  computed: {
    ...mapState({
      memberPath(state) {
        return state[this.namespace].memberPath;
      },
      groupLinkToRemove(state) {
        return state[this.namespace].groupLinkToRemove;
      },
      removeGroupLinkModalVisible(state) {
        return state[this.namespace].removeGroupLinkModalVisible;
      },
    }),
    groupLinkPath() {
      return this.memberPath.replace(/:id$/, this.groupLinkToRemove?.id);
    },
    groupName() {
      return this.groupLinkToRemove?.sharedWithGroup.fullName;
    },
    modalTitle() {
      return sprintf(s__('Members|Remove "%{groupName}"'), { groupName: this.groupName });
    },
  },
  methods: {
    ...mapActions({
      hideRemoveGroupLinkModal(dispatch) {
        return dispatch(`${this.namespace}/hideRemoveGroupLinkModal`);
      },
    }),
    handlePrimary() {
      this.$refs.form.$el.submit();
    },
  },
};
</script>
 
<template>
  <gl-modal
    v-bind="$attrs"
    :modal-id="$options.modalId"
    :visible="removeGroupLinkModalVisible"
    :title="modalTitle"
    :action-primary="$options.actionPrimary"
    :action-cancel="$options.actionCancel"
    size="sm"
    data-testid="remove-group-link-modal-content"
    @primary="handlePrimary"
    @hide="hideRemoveGroupLinkModal"
  >
    <gl-form ref="form" :action="groupLinkPath" method="post">
      <p>
        <gl-sprintf :message="$options.i18n.modalBody">
          <template #groupName>{{ groupName }}</template>
        </gl-sprintf>
      </p>
 
      <input type="hidden" name="_method" value="delete" />
      <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
    </gl-form>
  </gl-modal>
</template>