Apply reviewer suggestions

Add a specific test for tabs and also
match the tab title in the snapshot.

ee/app/assets/javascripts/compliance_dashboard/components/dashboard.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTabs, GlTab, GlTooltipDirective } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 
 import { sprintf, __, s__ } from '~/locale';
@@ -26,6 +26,8 @@ export default {
     MergeRequest,
     Pagination,
     PipelineStatus,
+    GlTab,
+    GlTabs,
   },
   mixins: [timeagoMixin],
   props: {
@@ -71,6 +73,7 @@ export default {
     approvalStatusLabel: __('Approval Status'),
     pipelineStatusLabel: __('Pipeline'),
     updatesLabel: __('Updates'),
+    mergeRequestsTabLabel: __('Merge Requests'),
   },
 };
 </script>
@@ -81,10 +84,21 @@ export default {
       <h4>{{ $options.strings.heading }}</h4>
       <p>{{ $options.strings.subheading }}</p>
     </header>
+    <gl-tabs>
+      <gl-tab>
+        <template #title>
+          <span>{{ $options.strings.mergeRequestsTabLabel }}</span>
+        </template>
         <div class="dashboard-grid">
           <grid-column-heading :heading="$options.strings.mergeRequestLabel" />
-      <grid-column-heading :heading="$options.strings.approvalStatusLabel" class="gl-text-center" />
-      <grid-column-heading :heading="$options.strings.pipelineStatusLabel" class="gl-text-center" />
+          <grid-column-heading
+            :heading="$options.strings.approvalStatusLabel"
+            class="gl-text-center"
+          />
+          <grid-column-heading
+            :heading="$options.strings.pipelineStatusLabel"
+            class="gl-text-center"
+          />
           <grid-column-heading :heading="$options.strings.updatesLabel" class="gl-text-right" />
 
           <template v-for="mergeRequest in mergeRequests">
@@ -123,6 +137,8 @@ export default {
           </template>
         </div>
         <pagination :is-last-page="isLastPage" />
+      </gl-tab>
+    </gl-tabs>
   </div>
   <empty-state v-else :image-path="emptyStateSvgPath" />
 </template>

ee/changelogs/unreleased/220328-restructure-compliance-dashboard-to-use-tabs.yml

+---
+title: Update Compliance Dashboard to use tabs
+merge_request: 37959
+author:
+type: changed

ee/spec/frontend/compliance_dashboard/components/__snapshots__/dashboard_spec.js.snap

@@ -16,6 +16,16 @@ exports[`ComplianceDashboard component when there are merge requests matches the
     </p>
   </header>
    
+  <gl-tabs-stub
+    theme="indigo"
+  >
+    <b-tab-stub
+      tag="div"
+      title=""
+      titlelinkclass="gl-tab-nav-item"
+    >
+      <template>
+         
         <div
           class="dashboard-grid"
         >
@@ -107,6 +117,14 @@ exports[`ComplianceDashboard component when there are merge requests matches the
         </div>
          
         <pagination-stub />
+      </template>
+      <template>
+        <span>
+          Merge Requests
+        </span>
+      </template>
+    </b-tab-stub>
+  </gl-tabs-stub>
 </div>
 `;
 

ee/spec/frontend/compliance_dashboard/components/dashboard_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlTabs, GlTab } from '@gitlab/ui';
 
 import ComplianceDashboard from 'ee/compliance_dashboard/components/dashboard.vue';
 import ApprovalStatus from 'ee/compliance_dashboard/components/approval_status.vue';
@@ -14,6 +15,7 @@ describe('ComplianceDashboard component', () => {
   const findApprovalStatus = () => wrapper.find(ApprovalStatus);
   const findPipelineStatus = () => wrapper.find(PipelineStatus);
   const findApprovers = () => wrapper.find(Approvers);
+  const findDashboardTabs = () => wrapper.find(GlTabs);
 
   const createComponent = (props = {}, options = {}) => {
     return shallowMount(ComplianceDashboard, {
@@ -24,6 +26,7 @@ describe('ComplianceDashboard component', () => {
         ...props,
       },
       stubs: {
+        GlTab,
         MergeRequest: {
           props: { mergeRequest: Object },
           template: `<div data-testid="merge-request">{{ mergeRequest.title }}</div>`,
@@ -49,6 +52,10 @@ describe('ComplianceDashboard component', () => {
       expect(findMergeRequests().length).toEqual(2);
     });
 
+    it('renders the dashboard tabs', () => {
+      expect(findDashboardTabs().exists()).toEqual(true);
+    });
+
     describe('approval status', () => {
       it('does not render if there is no approval status', () => {
         expect(findApprovalStatus().exists()).toBe(false);
@@ -92,5 +99,9 @@ describe('ComplianceDashboard component', () => {
     it('does not render merge requests', () => {
       expect(findMergeRequests().exists()).toEqual(false);
     });
+
+    it('does not render the dashboard tabs', () => {
+      expect(findDashboardTabs().exists()).toEqual(false);
+    });
   });
 });