Split tables into active / inactive

app/assets/javascripts/integrations/index/components/integrations_list.vue

@@ -14,8 +14,10 @@ export default {
   },
   computed: {
     activeIntegrations() {
-      // TODO filter
-      return this.integrations;
+      return this.integrations.filter((integration) => integration.active);
+    },
+    inactiveIntegrations() {
+      return this.integrations.filter((integration) => !integration.active);
     },
   },
 };
@@ -24,6 +26,7 @@ export default {
 <template>
   <div>
     <integrations-table :integrations="activeIntegrations" />
-    <div>{{ integrations }}</div>
+    <h5>{{ s__('Integrations|Add an integration') }}</h5>
+    <integrations-table :integrations="inactiveIntegrations" />
   </div>
 </template>

app/assets/javascripts/integrations/index/components/integrations_table.vue

 <script>
 import { GlIcon, GlLink, GlTable } from '@gitlab/ui';
+import { __ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
@@ -22,15 +23,15 @@ export default {
     },
     {
       key: 'name',
-      label: 'Integration',
+      label: __('Integration'),
     },
     {
       key: 'description',
-      label: 'Description',
+      label: __('Description'),
     },
     {
       key: 'updated_at',
-      label: 'Last edit',
+      label: __('Last updated'),
     },
   ],
 };