Merge branch 'update-compliance-dashboard-to-use-new-gitlab-ui-classes' into 'master'

Follow-up: Updated components to use new GitLab UI classes

See merge request gitlab-org/gitlab!37188

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/approvers.vue

@@ -61,7 +61,7 @@ export default {
       :collapsed="true"
       :max-visible="$options.PRESENTABLE_APPROVERS_LIMIT"
       :avatar-size="24"
-      class="gl-display-inline-flex d-lg-none gl-ml-3"
+      class="gl-display-inline-flex gl-display-lg-none! gl-ml-3"
       badge-tooltip-prop="name"
     >
       <template #avatar="{ avatar }">
@@ -89,21 +89,21 @@ export default {
       :href="approver.web_url"
       :data-user-id="approver.id"
       :data-name="approver.name"
-      class="gl-display-none d-lg-inline-flex gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
+      class="gl-display-none gl-display-lg-inline-flex! gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
     >
       <gl-avatar
         :src="approver.avatar_url"
         :entity-id="approver.id"
         :entity-name="approver.name"
         :size="16"
-        class="mr-1"
+        class="gl-mr-2"
       />
       <span>{{ approver.name }}</span>
     </gl-avatar-link>
     <span
       v-if="isApproversOverLimit"
       v-gl-tooltip.top="approversOverLimitString"
-      class="gl-display-none d-lg-inline-block avatar-counter gl-ml-3 gl-px-2 gl-flex-shrink-0 flex-grow-0"
+      class="gl-display-none gl-display-lg-inline-block! avatar-counter gl-ml-3 gl-px-2 gl-flex-shrink-0 gl-flex-grow-0"
       >+ {{ amountOfApproversOverLimit }}</span
     >
   </div>

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/grid.vue

@@ -69,7 +69,7 @@ export default {
 
 <template>
   <div>
-    <div class="dashboard-grid">
+    <div class="dashboard-grid gl-display-grid gl-grid-tpl-rows-auto">
       <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" />

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/merge_request.vue

@@ -22,7 +22,7 @@ export default {
 
 <template>
   <div
-    class="grid-merge-request gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+    class="gl-grid-col-start-1 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
     data-testid="merge-request"
   >
     <a :href="mergeRequest.path" class="gl-display-block gl-text-gray-900 gl-font-weight-bold">
@@ -44,7 +44,7 @@ export default {
           :entity-id="mergeRequest.author.id"
           :entity-name="mergeRequest.author.name"
           :size="16"
-          class="mr-1"
+          class="gl-mr-2"
         />
         <span>{{ mergeRequest.author.name }}</span>
       </gl-avatar-link>

ee/app/assets/stylesheets/components/compliance_dashboard/dashboard.scss

@@ -3,12 +3,6 @@
   min-width: 550px;
 
   .dashboard-grid {
-    display: grid;
     grid-template-columns: 1fr auto auto auto;
-    grid-template-rows: auto;
-  }
-
-  .grid-merge-request {
-    grid-column-start: 1;
   }
 }

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/approvers_spec.js.snap

@@ -17,13 +17,13 @@ exports[`MergeRequest component when there are approvers matches snapshot 1`] =
     avatars="[object Object]"
     avatarsize="24"
     badgetooltipprop="name"
-    class="gl-display-inline-flex d-lg-none gl-ml-3"
+    class="gl-display-inline-flex gl-display-lg-none! gl-ml-3"
     collapsed="true"
     maxvisible="2"
   />
    
   <gl-link-stub
-    class="gl-avatar-link gl-display-none d-lg-inline-flex gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
+    class="gl-avatar-link gl-display-none gl-display-lg-inline-flex! gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
     data-name="User 0"
     data-user-id="0"
     href="http://localhost:3000/user-0"
@@ -31,7 +31,7 @@ exports[`MergeRequest component when there are approvers matches snapshot 1`] =
   >
     <gl-avatar-stub
       alt="avatar"
-      class="mr-1"
+      class="gl-mr-2"
       entityid="0"
       entityname="User 0"
       shape="circle"

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/grid_spec.js.snap

@@ -3,7 +3,7 @@
 exports[`MergeRequestsGrid component when intialized matches the snapshot 1`] = `
 <div>
   <div
-    class="dashboard-grid"
+    class="dashboard-grid gl-display-grid gl-grid-tpl-rows-auto"
   >
     <grid-column-heading-stub
       heading="Merge Request"

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/merge_request_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`MergeRequest component when there is a merge request matches the snapshot 1`] = `
 <div
-  class="grid-merge-request gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
+  class="gl-grid-col-start-1 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
   data-testid="merge-request"
 >
   <a
@@ -35,7 +35,7 @@ exports[`MergeRequest component when there is a merge request matches the snapsh
     >
       <gl-avatar-stub
         alt="avatar"
-        class="mr-1"
+        class="gl-mr-2"
         entityid="1"
         entityname="User 1"
         shape="circle"