Move integrations list to Vue

Using GlTable

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

+<script>
+import IntegrationsTable from './integrations_table.vue';
+
+export default {
+  name: 'IntegrationsList',
+  components: {
+    IntegrationsTable,
+  },
+  props: {
+    integrations: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    activeIntegrations() {
+      // TODO filter
+      return this.integrations;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <integrations-table :integrations="activeIntegrations" />
+    <div>{{ integrations }}</div>
+  </div>
+</template>

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

+<script>
+import { GlTable } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlTable,
+  },
+  props: {
+    integrations: {
+      type: Array,
+      required: true,
+    },
+  },
+  fields: [
+    {
+      key: 'active',
+      label: '',
+    },
+    {
+      key: 'name',
+      label: 'Integration',
+    },
+    {
+      key: 'description',
+      label: 'Description',
+    },
+    {
+      key: 'updated_at',
+      label: 'Last edit',
+    },
+  ],
+};
+</script>
+
+<template>
+  <gl-table :items="integrations" :fields="$options.fields" />
+  <!-- </gl-table> -->
+</template>

app/assets/javascripts/integrations/index/index.js

+import Vue from 'vue';
+import IntegrationList from './components/integrations_list.vue';
+
+export default () => {
+  const el = document.querySelector('.js-integrations-list');
+
+  if (!el) {
+    return null;
+  }
+
+  const { integrations } = el.dataset;
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(IntegrationList, {
+        props: {
+          integrations: JSON.parse(integrations),
+        },
+      });
+    },
+  });
+};

app/assets/javascripts/pages/projects/settings/integrations/show/index.js

+import initIntegrationsList from '~/integrations/index';
 import PersistentUserCallout from '~/persistent_user_callout';
 
 const callout = document.querySelector('.js-webhooks-moved-alert');
 PersistentUserCallout.factory(callout);
+
+initIntegrationsList();

app/helpers/services_helper.rb

@@ -115,6 +115,12 @@ module ServicesHelper
     form_data
   end
 
+  def integration_list_data(integrations)
+    {
+      integrations: integrations.map { |i| serialize_integration(i) }.to_json
+    }
+  end
+
   def trigger_events_for_service(integration)
     ServiceEventSerializer.new(service: integration).represent(integration.configurable_events).to_json
   end
@@ -155,6 +161,15 @@ module ServicesHelper
       'project'
     end
   end
+
+  def serialize_integration(integration)
+    {
+      active: integration.activated?,
+      name: integration.title,
+      description: integration.description,
+      updated_at: integration.updated_at
+    }
+  end
 end
 
 ServicesHelper.prepend_if_ee('EE::ServicesHelper')

app/views/shared/integrations/_index.html.haml

+.js-integrations-list{ data: integration_list_data(integrations) }
+
 %table.table.b-table.gl-table{ role: 'table', 'aria-busy': false, 'aria-colcount': 4 }
   %colgroup
     %col