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