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>