diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-20 17:36:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-20 17:36:54 +0300 |
commit | f61bb2a16a514b71bf33aabbbb999d6732016a24 (patch) | |
tree | 9548caa89e60b4f40b99bbd1dac030420b812aa8 /app/assets/javascripts/integrations/index/components/integrations_table.vue | |
parent | 35fc54e5d261f8898e390aea7c2f5ec5fdf0539d (diff) |
Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc42
Diffstat (limited to 'app/assets/javascripts/integrations/index/components/integrations_table.vue')
-rw-r--r-- | app/assets/javascripts/integrations/index/components/integrations_table.vue | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/app/assets/javascripts/integrations/index/components/integrations_table.vue b/app/assets/javascripts/integrations/index/components/integrations_table.vue new file mode 100644 index 00000000000..439c243f418 --- /dev/null +++ b/app/assets/javascripts/integrations/index/components/integrations_table.vue @@ -0,0 +1,95 @@ +<script> +import { GlIcon, GlLink, GlTable, GlTooltipDirective } from '@gitlab/ui'; +import { sprintf, s__, __ } from '~/locale'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; + +export default { + components: { + GlIcon, + GlLink, + GlTable, + TimeAgoTooltip, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + integrations: { + type: Array, + required: true, + }, + showUpdatedAt: { + type: Boolean, + required: false, + default: false, + }, + emptyText: { + type: String, + required: false, + default: undefined, + }, + }, + computed: { + fields() { + return [ + { + key: 'active', + label: '', + thClass: 'gl-w-10', + }, + { + key: 'title', + label: __('Integration'), + thClass: 'gl-w-quarter', + }, + { + key: 'description', + label: __('Description'), + thClass: 'gl-display-none d-sm-table-cell', + tdClass: 'gl-display-none d-sm-table-cell', + }, + { + key: 'updated_at', + label: this.showUpdatedAt ? __('Last updated') : '', + thClass: 'gl-w-20p', + }, + ]; + }, + }, + methods: { + getStatusTooltipTitle(integration) { + return sprintf(s__('Integrations|%{integrationTitle}: active'), { + integrationTitle: integration.title, + }); + }, + }, +}; +</script> + +<template> + <gl-table :items="integrations" :fields="fields" :empty-text="emptyText" show-empty fixed> + <template #cell(active)="{ item }"> + <gl-icon + v-if="item.active" + v-gl-tooltip + name="check" + class="gl-text-green-500" + :title="getStatusTooltipTitle(item)" + /> + </template> + + <template #cell(title)="{ item }"> + <gl-link + :href="item.edit_path" + class="gl-font-weight-bold" + :data-qa-selector="`${item.name}_link`" + > + {{ item.title }} + </gl-link> + </template> + + <template #cell(updated_at)="{ item }"> + <time-ago-tooltip v-if="showUpdatedAt && item.updated_at" :time="item.updated_at" /> + </template> + </gl-table> +</template> |