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,48 +84,61 @@ export default {
       <h4>{{ $options.strings.heading }}</h4>
       <p>{{ $options.strings.subheading }}</p>
     </header>
-    <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.updatesLabel" class="gl-text-right" />
-
-      <template v-for="mergeRequest in mergeRequests">
-        <merge-request :key="key(mergeRequest.id, 'MR')" :merge-request="mergeRequest" />
-
-        <div
-          :key="key(mergeRequest.id, 'approvalStatus')"
-          class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
-        >
-          <approval-status
-            v-if="hasStatus(mergeRequest.approval_status)"
-            :status="mergeRequest.approval_status"
+    <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"
           />
-        </div>
-        <div
-          :key="key(mergeRequest.id, 'pipeline')"
-          class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
-        >
-          <pipeline-status
-            v-if="hasStatus(mergeRequest.pipeline_status)"
-            :status="mergeRequest.pipeline_status"
+          <grid-column-heading
+            :heading="$options.strings.pipelineStatusLabel"
+            class="gl-text-center"
           />
-        </div>
+          <grid-column-heading :heading="$options.strings.updatesLabel" class="gl-text-right" />
+
+          <template v-for="mergeRequest in mergeRequests">
+            <merge-request :key="key(mergeRequest.id, 'MR')" :merge-request="mergeRequest" />
+
+            <div
+              :key="key(mergeRequest.id, 'approvalStatus')"
+              class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+            >
+              <approval-status
+                v-if="hasStatus(mergeRequest.approval_status)"
+                :status="mergeRequest.approval_status"
+              />
+            </div>
+            <div
+              :key="key(mergeRequest.id, 'pipeline')"
+              class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+            >
+              <pipeline-status
+                v-if="hasStatus(mergeRequest.pipeline_status)"
+                :status="mergeRequest.pipeline_status"
+              />
+            </div>
 
-        <div
-          :key="key(mergeRequest.id, 'updates')"
-          class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
-        >
-          <approvers :approvers="mergeRequest.approved_by_users" />
-          <span class="gl-text-gray-700">
-            <time v-gl-tooltip.bottom="timeTooltip(mergeRequest.merged_at)">{{
-              timeAgoString(mergeRequest.merged_at)
-            }}</time>
-          </span>
+            <div
+              :key="key(mergeRequest.id, 'updates')"
+              class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
+            >
+              <approvers :approvers="mergeRequest.approved_by_users" />
+              <span class="gl-text-gray-700">
+                <time v-gl-tooltip.bottom="timeTooltip(mergeRequest.merged_at)">{{
+                  timeAgoString(mergeRequest.merged_at)
+                }}</time>
+              </span>
+            </div>
+          </template>
         </div>
-      </template>
-    </div>
-    <pagination :is-last-page="isLastPage" />
+        <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,97 +16,115 @@ exports[`ComplianceDashboard component when there are merge requests matches the
     </p>
   </header>
    
-  <div
-    class="dashboard-grid"
+  <gl-tabs-stub
+    theme="indigo"
   >
-    <grid-column-heading-stub
-      heading="Merge Request"
-    />
-     
-    <grid-column-heading-stub
-      class="gl-text-center"
-      heading="Approval Status"
-    />
-     
-    <grid-column-heading-stub
-      class="gl-text-center"
-      heading="Pipeline"
-    />
-     
-    <grid-column-heading-stub
-      class="gl-text-right"
-      heading="Updates"
-    />
-     
-    <div
-      data-testid="merge-request"
-    >
-      Merge request 0
-    </div>
-     
-    <div
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
-    >
-      <!---->
-    </div>
-     
-    <div
-      class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
-    >
-      <!---->
-    </div>
-     
-    <div
-      class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
-    >
-      <approvers-stub
-        approvers=""
-      />
-       
-      <span
-        class="gl-text-gray-700"
-      >
-        <time>
-          merged 2 days ago
-        </time>
-      </span>
-    </div>
-    <div
-      data-testid="merge-request"
+    <b-tab-stub
+      tag="div"
+      title=""
+      titlelinkclass="gl-tab-nav-item"
     >
-      Merge request 1
-    </div>
-     
-    <div
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
-    >
-      <!---->
-    </div>
-     
-    <div
-      class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
-    >
-      <!---->
-    </div>
-     
-    <div
-      class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
-    >
-      <approvers-stub
-        approvers=""
-      />
-       
-      <span
-        class="gl-text-gray-700"
-      >
-        <time>
-          merged 2 days ago
-        </time>
-      </span>
-    </div>
-  </div>
-   
-  <pagination-stub />
+      <template>
+         
+        <div
+          class="dashboard-grid"
+        >
+          <grid-column-heading-stub
+            heading="Merge Request"
+          />
+           
+          <grid-column-heading-stub
+            class="gl-text-center"
+            heading="Approval Status"
+          />
+           
+          <grid-column-heading-stub
+            class="gl-text-center"
+            heading="Pipeline"
+          />
+           
+          <grid-column-heading-stub
+            class="gl-text-right"
+            heading="Updates"
+          />
+           
+          <div
+            data-testid="merge-request"
+          >
+            Merge request 0
+          </div>
+           
+          <div
+            class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+          >
+            <!---->
+          </div>
+           
+          <div
+            class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+          >
+            <!---->
+          </div>
+           
+          <div
+            class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
+          >
+            <approvers-stub
+              approvers=""
+            />
+             
+            <span
+              class="gl-text-gray-700"
+            >
+              <time>
+                merged 2 days ago
+              </time>
+            </span>
+          </div>
+          <div
+            data-testid="merge-request"
+          >
+            Merge request 1
+          </div>
+           
+          <div
+            class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+          >
+            <!---->
+          </div>
+           
+          <div
+            class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+          >
+            <!---->
+          </div>
+           
+          <div
+            class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
+          >
+            <approvers-stub
+              approvers=""
+            />
+             
+            <span
+              class="gl-text-gray-700"
+            >
+              <time>
+                merged 2 days ago
+              </time>
+            </span>
+          </div>
+        </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);
+    });
   });
 });