diff options
Diffstat (limited to 'app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue')
-rw-r--r-- | app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue b/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue new file mode 100644 index 00000000000..7062fb370ed --- /dev/null +++ b/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue @@ -0,0 +1,109 @@ +<script> +import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui'; +import { isEmpty } from 'lodash'; +import { mapMutations } 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, + GlEmptyState, + GlTable, + GroupItemName, + TimeagoTooltip, + }, + inject: { + subscriptions: { + default: [], + }, + }, + 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: { + emptyTitle: s__('Integrations|No linked namespaces'), + emptyDescription: s__( + 'Integrations|Namespaces are the GitLab groups and subgroups you link to this Jira instance.', + ), + unlinkError: s__('Integrations|Failed to unlink namespace. Please try again.'), + }, + methods: { + ...mapMutations({ + setAlert: SET_ALERT, + }), + isEmpty, + 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> + <div> + <gl-empty-state + v-if="isEmpty(subscriptions)" + :title="$options.i18n.emptyTitle" + :description="$options.i18n.emptyDescription" + /> + <gl-table v-else :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="!isEmpty(loadingItem)" + @click.prevent="onClick(item)" + >{{ __('Unlink') }}</gl-button + > + </template> + </gl-table> + </div> +</template> |