From f2308978aa2478bfc761ae5a19b9660e700eb2c3 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Fri, 23 Jun 2023 12:56:31 +0200
Subject: [PATCH] Integrations settings: use card

Changelog: changed
---
 .../index/components/integrations_list.vue    | 49 +++++++++++++------
 .../index/components/integrations_table.vue   | 31 +++++++++---
 .../components/integrations_list_spec.js      |  1 +
 .../components/integrations_table_spec.js     | 20 ++++++++
 4 files changed, 79 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/integrations/index/components/integrations_list.vue b/app/assets/javascripts/integrations/index/components/integrations_list.vue
index 7331437d484606..32a4e2ae7188be 100644
--- a/app/assets/javascripts/integrations/index/components/integrations_list.vue
+++ b/app/assets/javascripts/integrations/index/components/integrations_list.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlCard } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import IntegrationsTable from './integrations_table.vue';
 
@@ -6,6 +7,7 @@ export default {
   name: 'IntegrationsList',
   components: {
     IntegrationsTable,
+    GlCard,
   },
   props: {
     integrations: {
@@ -40,20 +42,37 @@ export default {
 
 <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"
-    />
+    <gl-card
+      class="gl-new-card gl-overflow-hidden"
+      header-class="gl-new-card-header gl-border-b-0"
+      body-class="gl-new-card-body gl-px-0"
+    >
+      <template #header>
+        <h3 class="gl-new-card-title">{{ $options.i18n.activeIntegrationsHeading }}</h3>
+      </template>
+      <integrations-table
+        class="gl-mb-n2"
+        :integrations="integrationsGrouped.active"
+        :empty-text="$options.i18n.activeTableEmptyText"
+        show-updated-at
+        data-testid="active-integrations-table"
+      />
+    </gl-card>
+    <gl-card
+      class="gl-new-card gl-overflow-hidden"
+      header-class="gl-new-card-header gl-border-b-0"
+      body-class="gl-new-card-body gl-px-0"
+    >
+      <template #header>
+        <h3 class="gl-new-card-title">{{ $options.i18n.inactiveIntegrationsHeading }}</h3>
+      </template>
+      <integrations-table
+        class="gl-mb-n2"
+        inactive
+        :integrations="integrationsGrouped.inactive"
+        :empty-text="$options.i18n.inactiveTableEmptyText"
+        data-testid="inactive-integrations-table"
+      />
+    </gl-card>
   </div>
 </template>
diff --git a/app/assets/javascripts/integrations/index/components/integrations_table.vue b/app/assets/javascripts/integrations/index/components/integrations_table.vue
index 59a29f817275e3..eff64ed7c4273f 100644
--- a/app/assets/javascripts/integrations/index/components/integrations_table.vue
+++ b/app/assets/javascripts/integrations/index/components/integrations_table.vue
@@ -30,19 +30,30 @@ export default {
       required: false,
       default: undefined,
     },
+    inactive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     fields() {
-      return [
+      if (this.filteredIntegrations.length === 0) {
+        return [];
+      }
+
+      const fields = [];
+
+      fields.push(
         {
           key: 'active',
           label: '',
-          thClass: 'gl-w-10',
+          thClass: 'gl-w-7',
         },
         {
           key: 'title',
           label: __('Integration'),
-          thClass: 'gl-w-quarter',
+          thClass: 'gl-w-quarter gl-xs-w-full',
         },
         {
           key: 'description',
@@ -50,12 +61,18 @@ export default {
           thClass: 'gl-display-none d-sm-table-cell',
           tdClass: 'gl-display-none d-sm-table-cell',
         },
-        {
+      );
+
+      if (!this.inactive && this.filteredIntegrations.length > 0) {
+        fields.push({
           key: 'updated_at',
           label: this.showUpdatedAt ? __('Last updated') : '',
-          thClass: 'gl-w-20p',
-        },
-      ];
+          thClass: 'gl-w-20 gl-text-right',
+          tdClass: 'gl-text-right',
+        });
+      }
+
+      return fields;
     },
     filteredIntegrations() {
       return this.integrations.filter(
diff --git a/spec/frontend/integrations/index/components/integrations_list_spec.js b/spec/frontend/integrations/index/components/integrations_list_spec.js
index 155a3d1c6be206..2d2a9b845a306e 100644
--- a/spec/frontend/integrations/index/components/integrations_list_spec.js
+++ b/spec/frontend/integrations/index/components/integrations_list_spec.js
@@ -18,5 +18,6 @@ describe('IntegrationsList', () => {
 
     expect(findActiveIntegrationsTable().props('integrations')).toEqual(mockActiveIntegrations);
     expect(findInactiveIntegrationsTable().props('integrations')).toEqual(mockInactiveIntegrations);
+    expect(findInactiveIntegrationsTable().props('inactive')).toBe(true);
   });
 });
diff --git a/spec/frontend/integrations/index/components/integrations_table_spec.js b/spec/frontend/integrations/index/components/integrations_table_spec.js
index 54e5b45a5d8df0..330fa2ac860cdc 100644
--- a/spec/frontend/integrations/index/components/integrations_table_spec.js
+++ b/spec/frontend/integrations/index/components/integrations_table_spec.js
@@ -62,4 +62,24 @@ describe('IntegrationsTable', () => {
       });
     },
   );
+
+  describe('when no integrations are received', () => {
+    beforeEach(() => {
+      createComponent({ integrations: [] });
+    });
+
+    it('does not display fields in the table', () => {
+      expect(findTable().findAll('th')).toHaveLength(0);
+    });
+  });
+
+  describe.each([true, false])('when integrations inactive property is %p', (inactive) => {
+    beforeEach(() => {
+      createComponent({ integrations: [mockInactiveIntegrations], inactive });
+    });
+
+    it(`${inactive ? 'does not render' : 'render'} updated_at field`, () => {
+      expect(findTable().find('[aria-label="Updated At"]').exists()).toBe(!inactive);
+    });
+  });
 });
-- 
GitLab