diff options
Diffstat (limited to 'app/assets/javascripts/integrations/index/components/integrations_list.vue')
-rw-r--r-- | app/assets/javascripts/integrations/index/components/integrations_list.vue | 59 |
1 files changed, 59 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> |