From 3f07a4484632487ecef1aa465802d02412f1a2f5 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Mon, 7 Aug 2023 16:17:52 +0200
Subject: [PATCH] Security approvals settings: Use GlCard

Changelog: changed
---
 .../security_orchestration/policy_details.vue |  2 +-
 .../scan_result_policies.vue                  | 95 ++++++++++++-------
 2 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/ee/app/assets/javascripts/approvals/components/security_orchestration/policy_details.vue b/ee/app/assets/javascripts/approvals/components/security_orchestration/policy_details.vue
index d6d5b54c136ec7..a3d924fda7dab1 100644
--- a/ee/app/assets/javascripts/approvals/components/security_orchestration/policy_details.vue
+++ b/ee/app/assets/javascripts/approvals/components/security_orchestration/policy_details.vue
@@ -46,7 +46,7 @@ export default {
   <tr v-if="policy.isSelected">
     <td colspan="4" class="gl-border-top-0! gl-pt-0!">
       <div
-        class="gl-border-solid gl-border-1 gl-rounded-base gl-border-gray-100 gl-bg-gray-10 gl-py-4 gl-px-5"
+        class="gl-border-solid gl-border-1 gl-rounded-base gl-border-gray-100 gl-bg-white gl-py-4 gl-px-5"
       >
         <policy-approvals :action="policyAction" :approvers="approvers" />
         <div
diff --git a/ee/app/assets/javascripts/approvals/components/security_orchestration/scan_result_policies.vue b/ee/app/assets/javascripts/approvals/components/security_orchestration/scan_result_policies.vue
index 808053e2432e38..c125f85b58b253 100644
--- a/ee/app/assets/javascripts/approvals/components/security_orchestration/scan_result_policies.vue
+++ b/ee/app/assets/javascripts/approvals/components/security_orchestration/scan_result_policies.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlButton, GlFormGroup } from '@gitlab/ui';
+import { GlCard, GlLink, GlButton, GlIcon, GlFormGroup } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
 import { __, s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
@@ -19,10 +19,12 @@ export default {
   },
   components: {
     Container,
+    GlCard,
     GlLink,
     GlButton,
     ScanResultPolicy,
     PolicyDetails,
+    GlIcon,
     GlFormGroup,
   },
   inject: ['fullPath', 'newPolicyPath'],
@@ -51,42 +53,63 @@ export default {
 </script>
 
 <template>
-  <gl-form-group :label="$options.i18n.securityApprovals">
-    <template #label-description>
-      {{ $options.i18n.description }}
-      <gl-link :href="$options.scanResultPolicyHelpPagePath" target="_blank">{{
-        $options.i18n.learnMore
-      }}</gl-link>
-    </template>
-    <container :rules="policies" class="gl-mt-5!">
-      <template #thead="{ name, approvalsRequired, branches }">
-        <tr class="gl-display-table-row!">
-          <th class="gl-w-half!">{{ name }}</th>
-          <th>{{ branches }}</th>
-          <th>{{ approvalsRequired }}</th>
-          <th></th>
-        </tr>
+  <gl-form-group>
+    <gl-card
+      class="gl-new-card"
+      header-class="gl-new-card-header"
+      body-class="gl-new-card-body gl-px-0 gl-overflow-hidden"
+    >
+      <template #header>
+        <div class="gl-new-card-title-wrapper gl-flex-direction-column">
+          <h5 class="gl-new-card-title">
+            {{ $options.i18n.securityApprovals }}
+            <span class="gl-new-card-count">
+              <gl-icon name="shield" class="gl-mr-2" />
+              {{ policies.length }}
+            </span>
+          </h5>
+          <p class="gl-new-card-description">
+            {{ $options.i18n.description }}
+            <gl-link
+              :href="$options.scanResultPolicyHelpPagePath"
+              target="_blank"
+              class="gl-font-sm"
+              >{{ $options.i18n.learnMore }}.</gl-link
+            >
+          </p>
+        </div>
+        <div class="gl-new-card-actions">
+          <gl-button category="secondary" size="small" :href="newPolicyPath">
+            {{ $options.i18n.createPolicy }}
+          </gl-button>
+        </div>
       </template>
-      <template #tbody>
-        <tr v-if="!hasPolicies">
-          <td colspan="4">{{ $options.i18n.noPolicies }}</td>
-        </tr>
-        <template v-for="(policy, index) in policies" v-else>
-          <scan-result-policy
-            :key="`${policy.name}-policy`"
-            :policy="policy"
-            @toggle="selectionChanged(index)"
-          />
-          <policy-details :key="`${policy.name}-details`" :policy="policy" />
+
+      <container :rules="policies">
+        <template #thead="{ name, approvalsRequired, branches }">
+          <tr class="gl-display-table-row!">
+            <th class="gl-w-half!">{{ name }}</th>
+            <th>{{ branches }}</th>
+            <th>{{ approvalsRequired }}</th>
+            <th></th>
+          </tr>
         </template>
-        <tr>
-          <td colspan="12">
-            <gl-button category="secondary" variant="confirm" size="small" :href="newPolicyPath">
-              {{ $options.i18n.createPolicy }}
-            </gl-button>
-          </td>
-        </tr>
-      </template>
-    </container>
+        <template #tbody>
+          <tr v-if="!hasPolicies">
+            <td colspan="4" class="gl-text-secondary gl-text-center gl-p-5">
+              {{ $options.i18n.noPolicies }}.
+            </td>
+          </tr>
+          <template v-for="(policy, index) in policies" v-else>
+            <scan-result-policy
+              :key="`${policy.name}-policy`"
+              :policy="policy"
+              @toggle="selectionChanged(index)"
+            />
+            <policy-details :key="`${policy.name}-details`" :policy="policy" />
+          </template>
+        </template>
+      </container>
+    </gl-card>
   </gl-form-group>
 </template>
-- 
GitLab