All files / app/assets/javascripts/jira_connect/subscriptions/components subscriptions_list.vue

100% Statements 1/1
100% Branches 0/0
100% Functions 1/1
100% Lines 1/1

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 89 90 91 92 93 94 95 96 97 98                                                                                                                                                          150x                                        
<script>
import { GlButton, GlTableLite } from '@gitlab/ui';
import { isEmpty } from 'lodash';
import { mapMutations, mapState } from 'vuex';
import { removeSubscription } from '~/jira_connect/subscriptions/api';
import { reloadPage } from '~/jira_connect/subscriptions/utils';
import { __, s__ } from '~/locale';
import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { SET_ALERT } from '../store/mutation_types';
import GroupItemName from './group_item_name.vue';
 
export default {
  components: {
    GlButton,
    GlTableLite,
    GroupItemName,
    TimeagoTooltip,
  },
  data() {
    return {
      loadingItem: null,
    };
  },
  fields: [
    {
      key: 'name',
      label: s__('Integrations|Linked namespaces'),
    },
    {
      key: 'created_at',
      label: __('Added'),
      tdClass: 'gl-vertical-align-middle! gl-w-20p',
    },
    {
      key: 'actions',
      label: '',
      tdClass: 'gl-text-right gl-vertical-align-middle! gl-pl-0!',
    },
  ],
  i18n: {
    unlinkError: s__('Integrations|Failed to unlink namespace. Please try again.'),
  },
  computed: {
    ...mapState(['subscriptions']),
  },
  methods: {
    ...mapMutations({
      setAlert: SET_ALERT,
    }),
    isUnlinkButtonDisabled(item) {
      return !isEmpty(item);
    },
    isLoadingItem(item) {
      return this.loadingItem === item;
    },
    unlinkBtnClass(item) {
      return this.isLoadingItem(item) ? '' : 'gl-ml-6';
    },
    onClick(item) {
      this.loadingItem = item;
 
      removeSubscription(item.unlink_path)
        .then(() => {
          reloadPage();
        })
        .catch((error) => {
          this.setAlert({
            message: error?.response?.data?.error || this.$options.i18n.unlinkError,
            variant: 'danger',
          });
          this.loadingItem = null;
        });
    },
  },
};
</script>
 
<template>
  <gl-table-lite :items="subscriptions" :fields="$options.fields">
    <template #cell(name)="{ item }">
      <group-item-name :group="item.group" />
    </template>
    <template #cell(created_at)="{ item }">
      <timeago-tooltip :time="item.created_at" />
    </template>
    <template #cell(actions)="{ item }">
      <gl-button
        :class="unlinkBtnClass(item)"
        category="secondary"
        :loading="isLoadingItem(item)"
        :disabled="isUnlinkButtonDisabled(loadingItem)"
        @click.prevent="onClick(item)"
        >{{ __('Unlink') }}</gl-button
      >
    </template>
  </gl-table-lite>
</template>