From 7cc1554459d584232869efb5a8164c2fc7beac34 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 9 Aug 2023 17:26:18 +0200
Subject: [PATCH] Group compliance framework settings: Use GlCard

Changelog: changed
---
 app/views/groups/edit.html.haml               |   2 +-
 app/views/projects/edit.html.haml             |   2 +-
 .../components/table.vue                      | 121 +++++++++++-------
 .../components/table_actions.vue              |   2 +-
 .../components/table_empty_state.vue          |  29 ++---
 .../groups/_compliance_frameworks.html.haml   |   2 +-
 .../components/table_empty_state_spec.js      |  23 +---
 .../components/table_spec.js                  |  20 +--
 locale/gitlab.pot                             |   5 +-
 9 files changed, 111 insertions(+), 95 deletions(-)

diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index dedff502a87999..13aedd6e4e095d 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -38,7 +38,7 @@
       = s_('GroupSettings|Badges')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary.gl-mb-0
       = s_('GroupSettings|Customize this group\'s badges.')
       = link_to s_('GroupSettings|What are badges?'), help_page_path('user/project/badges')
   .settings-content
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index b9149bbd7b3d60..78878141b800ed 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -46,7 +46,7 @@
       = s_('ProjectSettings|Badges')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary.gl-mb-0
       = s_('ProjectSettings|Customize this project\'s badges.')
       = link_to s_('ProjectSettings|What are badges?'), help_page_path('user/project/badges')
   .settings-content
diff --git a/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table.vue b/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table.vue
index f16040552d9aa9..b3f09d26a3371d 100644
--- a/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table.vue
+++ b/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table.vue
@@ -1,12 +1,21 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import Vue from 'vue';
-import { GlAlert, GlButton, GlLoadingIcon, GlTableLite, GlLabel, GlToast } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlButton,
+  GlCard,
+  GlIcon,
+  GlLoadingIcon,
+  GlTableLite,
+  GlLabel,
+  GlToast,
+} from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import getComplianceFrameworkQuery from 'ee/graphql_shared/queries/get_compliance_framework.query.graphql';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 import { DANGER, INFO, EDIT_BUTTON_LABEL } from '../constants';
 import updateComplianceFrameworkMutation from '../graphql/queries/update_compliance_framework.mutation.graphql';
@@ -24,6 +33,8 @@ export default {
     FormModal,
     GlAlert,
     GlButton,
+    GlCard,
+    GlIcon,
     GlLoadingIcon,
     GlTableLite,
     GlLabel,
@@ -59,8 +70,8 @@ export default {
         },
         {
           key: 'actions',
-          label: '',
-          thClass: 'w-10p',
+          label: __('Actions'),
+          thClass: 'gl-text-right',
           tdClass: 'gl-vertical-align-middle!',
         },
       ],
@@ -118,7 +129,7 @@ export default {
       return this.error || this.message;
     },
     showAddButton() {
-      return this.hasLoaded && this.canAddEdit && !this.isEmpty;
+      return this.canAddEdit;
     },
   },
   methods: {
@@ -209,6 +220,7 @@ export default {
     },
   },
   i18n: {
+    title: s__('ComplianceFrameworks|Active compliance frameworks'),
     deleteMessage: s__('ComplianceFrameworks|Compliance framework deleted successfully'),
     deleteError: s__(
       'ComplianceFrameworks|Error deleting the compliance framework. Please try again',
@@ -239,48 +251,69 @@ export default {
     >
       {{ alertMessage }}
     </gl-alert>
-    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-5" />
-    <empty-state v-if="isEmpty" :image-path="emptyStateSvgPath" @addFramework="onClickAdd" />
 
-    <gl-table-lite v-if="hasFrameworks" :items="complianceFrameworks" :fields="tableFields">
-      <template #cell(name)="{ item: framework }">
-        <gl-label
-          :background-color="framework.color"
-          :description="$options.i18n.editFramework"
-          :title="frameworkName(framework)"
-          :target="framework.editPath"
-          :data-testid="frameworkTestId(framework)"
-        />
-      </template>
-      <template #cell(description)="{ item: framework }">
-        <p data-testid="compliance-framework-description" class="gl-mb-0">
-          {{ framework.description }}
-        </p>
-      </template>
-      <template #cell(actions)="{ item: framework }">
-        <table-actions
-          :key="framework.parsedId"
-          :framework="framework"
-          :loading="isDeleting(framework.id)"
-          @delete="markForDeletion"
-          @edit="markForEdit"
-          @setDefault="setDefaultFramework"
-          @removeDefault="setDefaultFramework"
-        />
+    <gl-card
+      class="gl-new-card"
+      header-class="gl-new-card-header"
+      body-class="gl-new-card-body gl-px-0"
+    >
+      <template #header>
+        <div class="gl-new-card-title-wrapper">
+          <h5 class="gl-new-card-title">
+            {{ $options.i18n.title }}
+            <span class="gl-new-card-count">
+              <gl-icon name="lock" class="gl-mr-2" />
+              {{ complianceFrameworks.length }}
+            </span>
+          </h5>
+        </div>
+        <div class="gl-new-card-actions">
+          <gl-button
+            v-if="showAddButton"
+            size="small"
+            data-testid="add-framework-btn"
+            @click="onClickAdd"
+            >{{ $options.i18n.addBtn }}
+          </gl-button>
+        </div>
       </template>
-    </gl-table-lite>
 
-    <gl-button
-      v-if="showAddButton"
-      class="gl-mt-3"
-      category="secondary"
-      variant="confirm"
-      size="small"
-      data-testid="add-framework-btn"
-      @click="onClickAdd"
-    >
-      {{ $options.i18n.addBtn }}
-    </gl-button>
+      <gl-loading-icon v-if="isLoading" size="sm" class="gl-m-4" />
+      <empty-state v-else-if="isEmpty" :image-path="emptyStateSvgPath" />
+
+      <gl-table-lite
+        v-if="hasFrameworks"
+        :items="complianceFrameworks"
+        :fields="tableFields"
+        stacked="md"
+      >
+        <template #cell(name)="{ item: framework }">
+          <gl-label
+            :background-color="framework.color"
+            :description="$options.i18n.editFramework"
+            :title="frameworkName(framework)"
+            :target="framework.editPath"
+            :data-testid="frameworkTestId(framework)"
+          />
+        </template>
+        <template #cell(description)="{ item: framework }">
+          <p data-testid="compliance-framework-description" class="gl-mb-0">
+            {{ framework.description }}
+          </p>
+        </template>
+        <template #cell(actions)="{ item: framework }">
+          <table-actions
+            :key="framework.parsedId"
+            :framework="framework"
+            :loading="isDeleting(framework.id)"
+            @delete="markForDeletion"
+            @edit="markForEdit"
+            @setDefault="setDefaultFramework"
+            @removeDefault="setDefaultFramework"
+          />
+        </template>
+      </gl-table-lite>
+    </gl-card>
 
     <form-modal ref="formModal" :framework="markedForEdit" @change="onChange" />
     <delete-modal
diff --git a/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table_actions.vue b/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table_actions.vue
index 92cc517e137647..483f48f74de7bf 100644
--- a/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table_actions.vue
+++ b/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table_actions.vue
@@ -51,7 +51,7 @@ export default {
 </script>
 <template>
   <div>
-    <div v-if="canAddEdit" class="gl-display-flex">
+    <div v-if="canAddEdit" class="gl-display-flex gl-justify-content-end">
       <gl-button
         v-gl-tooltip="$options.i18n.editFramework"
         :disabled="loading"
diff --git a/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table_empty_state.vue b/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table_empty_state.vue
index 82bc92b3ed90d6..7e19586c77ae78 100644
--- a/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table_empty_state.vue
+++ b/ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/table_empty_state.vue
@@ -1,10 +1,9 @@
 <script>
-import { GlButton, GlEmptyState } from '@gitlab/ui';
+import { GlEmptyState } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 export default {
   components: {
-    GlButton,
     GlEmptyState,
   },
   props: {
@@ -14,34 +13,22 @@ export default {
       default: null,
     },
   },
-  methods: {
-    onAddFramework(event) {
-      event.preventDefault();
-      this.$emit('addFramework', event);
-    },
-  },
   i18n: {
     heading: s__('ComplianceFrameworks|No compliance frameworks are set up yet'),
-    description: s__('ComplianceFrameworks|Frameworks that have been added will appear here.'),
-    addButton: s__('ComplianceFrameworks|Add framework'),
+    description: s__(
+      'ComplianceFrameworks|Frameworks that have been added will appear here, start by creating a new one above.',
+    ),
   },
 };
 </script>
 
 <template>
-  <gl-empty-state
-    :description="$options.i18n.description"
-    :svg-path="imagePath"
-    compact
-    :svg-height="100"
-  >
+  <gl-empty-state class="gl-m-0" :svg-path="imagePath" :svg-height="100">
     <template #title>
-      <h5 class="gl-mt-0">{{ $options.i18n.heading }}</h5>
+      <h6 class="gl-font-lg gl-mt-0">{{ $options.i18n.heading }}</h6>
     </template>
-    <template #actions>
-      <gl-button category="primary" variant="confirm" class="gl-mb-3" @click="onAddFramework"
-        >{{ $options.i18n.addButton }}
-      </gl-button>
+    <template #description>
+      <p class="gl-text-secondary">{{ $options.i18n.description }}</p>
     </template>
   </gl-empty-state>
 </template>
diff --git a/ee/app/views/groups/_compliance_frameworks.html.haml b/ee/app/views/groups/_compliance_frameworks.html.haml
index 8c03fbc6596a04..81a842b205e9e0 100644
--- a/ee/app/views/groups/_compliance_frameworks.html.haml
+++ b/ee/app/views/groups/_compliance_frameworks.html.haml
@@ -8,7 +8,7 @@
         = s_('GroupSettings|Compliance frameworks')
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary.gl-mb-0
         = html_escape(s_('GroupSettings|Configure compliance frameworks to make them available to projects in this group. %{linkStart}What are compliance frameworks?%{linkEnd}')) % { linkStart: compliance_framework_doc_link, linkEnd: '</a>'.html_safe }
     .settings-content
       #js-compliance-frameworks-list{ data: compliance_frameworks_list_data(@group) }
diff --git a/ee/spec/frontend/groups/settings/compliance_frameworks/components/table_empty_state_spec.js b/ee/spec/frontend/groups/settings/compliance_frameworks/components/table_empty_state_spec.js
index 52bed5aa28cec5..5d7b000f08193a 100644
--- a/ee/spec/frontend/groups/settings/compliance_frameworks/components/table_empty_state_spec.js
+++ b/ee/spec/frontend/groups/settings/compliance_frameworks/components/table_empty_state_spec.js
@@ -1,4 +1,4 @@
-import { GlButton, GlEmptyState } from '@gitlab/ui';
+import { GlEmptyState } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 import TableEmptyState from 'ee/groups/settings/compliance_frameworks/components/table_empty_state.vue';
@@ -7,7 +7,6 @@ describe('TableEmptyState', () => {
   let wrapper;
 
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
-  const findAddFrameworkButton = () => wrapper.findComponent(GlButton);
 
   const createComponent = () => {
     wrapper = shallowMount(TableEmptyState, {
@@ -23,28 +22,18 @@ describe('TableEmptyState', () => {
 
   it('has the correct props', () => {
     expect(findEmptyState().props()).toMatchObject({
-      description: 'Frameworks that have been added will appear here.',
       svgPath: 'dir/image.svg',
       svgHeight: 100,
-      compact: true,
     });
   });
 
   it('displays the correct title', () => {
-    expect(findEmptyState().find('h5').text()).toBe('No compliance frameworks are set up yet');
+    expect(findEmptyState().find('h6').text()).toBe('No compliance frameworks are set up yet');
   });
 
-  it('has an add framework action', () => {
-    const button = findAddFrameworkButton();
-
-    expect(button.text()).toBe('Add framework');
-  });
-
-  it('emits the expected event when the add framework button is clicked', () => {
-    const clickEvent = new Event('click');
-    findAddFrameworkButton().vm.$emit('click', clickEvent);
-
-    expect(wrapper.emitted('addFramework')).toHaveLength(1);
-    expect(wrapper.emitted('addFramework')[0][0]).toBe(clickEvent);
+  it('displays the correct description', () => {
+    expect(findEmptyState().find('p').text()).toBe(
+      'Frameworks that have been added will appear here, start by creating a new one above.',
+    );
   });
 });
diff --git a/ee/spec/frontend/groups/settings/compliance_frameworks/components/table_spec.js b/ee/spec/frontend/groups/settings/compliance_frameworks/components/table_spec.js
index 15ace2a6373479..24cdd95ac222b4 100644
--- a/ee/spec/frontend/groups/settings/compliance_frameworks/components/table_spec.js
+++ b/ee/spec/frontend/groups/settings/compliance_frameworks/components/table_spec.js
@@ -172,7 +172,7 @@ describe('Table', () => {
 
   describe('content', () => {
     beforeEach(async () => {
-      wrapper = createComponentWithApollo(fetch);
+      wrapper = createComponentWithApollo(fetch, shallowMount);
       await waitForPromises();
     });
 
@@ -182,19 +182,23 @@ describe('Table', () => {
       expect(findEmptyState().exists()).toBe(false);
     });
 
-    it('shows the add framework button', () => {
-      const addBtn = findAddBtn();
-
-      expect(addBtn.text()).toBe('Add framework');
-    });
-
     it('renders the delete modal', () => {
       expect(findDeleteModal().exists()).toBe(true);
     });
 
+    describe('when editing is available', () => {
+      beforeEach(() => {
+        wrapper = createComponentWithApollo(fetch, updateDefault, {}, mount);
+      });
+
+      it('shows the add framework button', () => {
+        expect(findAddBtn().text()).toBe('Add framework');
+      });
+    });
+
     describe('when editing is unavailable', () => {
       beforeEach(() => {
-        wrapper = createComponentWithApollo(fetch, updateDefault, {}, shallowMount, {
+        wrapper = createComponentWithApollo(fetch, updateDefault, {}, mount, {
           canAddEdit: false,
         });
       });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 68f55630e6060f..fa271373a125e9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -11990,6 +11990,9 @@ msgstr ""
 msgid "Compliance framework"
 msgstr ""
 
+msgid "ComplianceFrameworks|Active compliance frameworks"
+msgstr ""
+
 msgid "ComplianceFrameworks|Add framework"
 msgstr ""
 
@@ -12047,7 +12050,7 @@ msgstr ""
 msgid "ComplianceFrameworks|Error setting the default compliance frameworks"
 msgstr ""
 
-msgid "ComplianceFrameworks|Frameworks that have been added will appear here."
+msgid "ComplianceFrameworks|Frameworks that have been added will appear here, start by creating a new one above."
 msgstr ""
 
 msgid "ComplianceFrameworks|Invalid format"
-- 
GitLab