diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-20 23:50:22 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-20 23:50:22 +0000 |
commit | 9dc93a4519d9d5d7be48ff274127136236a3adb3 (patch) | |
tree | 70467ae3692a0e35e5ea56bcb803eb512a10bedb /app/assets/javascripts/integrations/index | |
parent | 4b0f34b6d759d6299322b3a54453e930c6121ff0 (diff) | |
download | gitlab-ce-9dc93a4519d9d5d7be48ff274127136236a3adb3.tar.gz |
Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43
Diffstat (limited to 'app/assets/javascripts/integrations/index')
3 files changed, 177 insertions, 0 deletions
diff --git a/app/assets/javascripts/integrations/index/components/integrations_list.vue b/app/assets/javascripts/integrations/index/components/integrations_list.vue new file mode 100644 index 00000000000..7331437d484 --- /dev/null +++ b/app/assets/javascripts/integrations/index/components/integrations_list.vue @@ -0,0 +1,59 @@ +<script> +import { s__ } from '~/locale'; +import IntegrationsTable from './integrations_table.vue'; + +export default { + name: 'IntegrationsList', + components: { + IntegrationsTable, + }, + props: { + integrations: { + type: Array, + required: true, + }, + }, + computed: { + integrationsGrouped() { + return this.integrations.reduce( + (integrations, integration) => { + if (integration.active) { + integrations.active.push(integration); + } else { + integrations.inactive.push(integration); + } + + return integrations; + }, + { active: [], inactive: [] }, + ); + }, + }, + i18n: { + activeTableEmptyText: s__("Integrations|You haven't activated any integrations yet."), + inactiveTableEmptyText: s__("Integrations|You've activated every integration 🎉"), + activeIntegrationsHeading: s__('Integrations|Active integrations'), + inactiveIntegrationsHeading: s__('Integrations|Add an integration'), + }, +}; +</script> + +<template> + <div> + <h4>{{ $options.i18n.activeIntegrationsHeading }}</h4> + <integrations-table + class="gl-mb-7!" + :integrations="integrationsGrouped.active" + :empty-text="$options.i18n.activeTableEmptyText" + show-updated-at + data-testid="active-integrations-table" + /> + + <h4>{{ $options.i18n.inactiveIntegrationsHeading }}</h4> + <integrations-table + :integrations="integrationsGrouped.inactive" + :empty-text="$options.i18n.inactiveTableEmptyText" + data-testid="inactive-integrations-table" + /> + </div> +</template> 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> diff --git a/app/assets/javascripts/integrations/index/index.js b/app/assets/javascripts/integrations/index/index.js new file mode 100644 index 00000000000..09dca3a6d02 --- /dev/null +++ b/app/assets/javascripts/integrations/index/index.js @@ -0,0 +1,23 @@ +import Vue from 'vue'; +import IntegrationList from './components/integrations_list.vue'; + +export default () => { + const el = document.querySelector('.js-integrations-list'); + + if (!el) { + return null; + } + + const { integrations } = el.dataset; + + return new Vue({ + el, + render(createElement) { + return createElement(IntegrationList, { + props: { + integrations: JSON.parse(integrations), + }, + }); + }, + }); +}; |