Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

3 files changed, 177 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>
diff --git a/app/assets/javascripts/integrations/index/components/integrations_table.vue b/app/assets/javascripts/integrations/index/components/integrations_table.vue
new file mode 100644
index 00000000000..439c243f418
--- /dev/null
+++ b/app/assets/javascripts/integrations/index/components/integrations_table.vue
@@ -0,0 +1,95 @@
+<script>
+import { GlIcon, GlLink, GlTable, GlTooltipDirective } from '@gitlab/ui';
+import { sprintf, s__, __ } from '~/locale';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    GlIcon,
+    GlLink,
+    GlTable,
+    TimeAgoTooltip,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    integrations: {
+      type: Array,
+      required: true,
+    },
+    showUpdatedAt: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    emptyText: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  computed: {
+    fields() {
+      return [
+        {
+          key: 'active',
+          label: '',
+          thClass: 'gl-w-10',
+        },
+        {
+          key: 'title',
+          label: __('Integration'),
+          thClass: 'gl-w-quarter',
+        },
+        {
+          key: 'description',
+          label: __('Description'),
+          thClass: 'gl-display-none d-sm-table-cell',
+          tdClass: 'gl-display-none d-sm-table-cell',
+        },
+        {
+          key: 'updated_at',
+          label: this.showUpdatedAt ? __('Last updated') : '',
+          thClass: 'gl-w-20p',
+        },
+      ];
+    },
+  },
+  methods: {
+    getStatusTooltipTitle(integration) {
+      return sprintf(s__('Integrations|%{integrationTitle}: active'), {
+        integrationTitle: integration.title,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-table :items="integrations" :fields="fields" :empty-text="emptyText" show-empty fixed>
+    <template #cell(active)="{ item }">
+      <gl-icon
+        v-if="item.active"
+        v-gl-tooltip
+        name="check"
+        class="gl-text-green-500"
+        :title="getStatusTooltipTitle(item)"
+      />
+    </template>
+
+    <template #cell(title)="{ item }">
+      <gl-link
+        :href="item.edit_path"
+        class="gl-font-weight-bold"
+        :data-qa-selector="`${item.name}_link`"
+      >
+        {{ item.title }}
+      </gl-link>
+    </template>
+
+    <template #cell(updated_at)="{ item }">
+      <time-ago-tooltip v-if="showUpdatedAt && item.updated_at" :time="item.updated_at" />
+    </template>
+  </gl-table>
+</template>
diff --git a/app/assets/javascripts/integrations/index/index.js b/app/assets/javascripts/integrations/index/index.js
new file mode 100644
index 00000000000..09dca3a6d02
--- /dev/null
+++ b/app/assets/javascripts/integrations/index/index.js
@@ -0,0 +1,23 @@
+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),
+        },
+      });
+    },
+  });
+};