1<script> 2import { s__ } from '~/locale'; 3import IntegrationsTable from './integrations_table.vue'; 4 5export default { 6 name: 'IntegrationsList', 7 components: { 8 IntegrationsTable, 9 }, 10 props: { 11 integrations: { 12 type: Array, 13 required: true, 14 }, 15 }, 16 computed: { 17 integrationsGrouped() { 18 return this.integrations.reduce( 19 (integrations, integration) => { 20 if (integration.active) { 21 integrations.active.push(integration); 22 } else { 23 integrations.inactive.push(integration); 24 } 25 26 return integrations; 27 }, 28 { active: [], inactive: [] }, 29 ); 30 }, 31 }, 32 i18n: { 33 activeTableEmptyText: s__("Integrations|You haven't activated any integrations yet."), 34 inactiveTableEmptyText: s__("Integrations|You've activated every integration "), 35 activeIntegrationsHeading: s__('Integrations|Active integrations'), 36 inactiveIntegrationsHeading: s__('Integrations|Add an integration'), 37 }, 38}; 39</script> 40 41<template> 42 <div> 43 <h4>{{ $options.i18n.activeIntegrationsHeading }}</h4> 44 <integrations-table 45 class="gl-mb-7!" 46 :integrations="integrationsGrouped.active" 47 :empty-text="$options.i18n.activeTableEmptyText" 48 show-updated-at 49 data-testid="active-integrations-table" 50 /> 51 52 <h4>{{ $options.i18n.inactiveIntegrationsHeading }}</h4> 53 <integrations-table 54 :integrations="integrationsGrouped.inactive" 55 :empty-text="$options.i18n.inactiveTableEmptyText" 56 data-testid="inactive-integrations-table" 57 /> 58 </div> 59</template> 60