Update css class to gl- classes

- update tests

ee/app/assets/javascripts/security_dashboard/components/vulnerability_severity.vue

@@ -74,8 +74,8 @@ export default {
   <section
     class="gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-display-flex gl-flex-direction-column"
   >
-    <header class="border-bottom p-3">
-      <h4 class="my-0">
+    <header class="gl-border-b-gray-100 gl-border-b-solid gl-border-b-1 gl-p-5">
+      <h4 class="gl-my-0">
         {{ __('Project security status') }}
         <gl-link
           v-if="helpPagePath"
@@ -85,11 +85,11 @@ export default {
           ><icon name="question"
         /></gl-link>
       </h4>
-      <p class="text-secondary m-0">
+      <p class="text-secondary gl-m-0">
         {{ __('Projects are graded based on the highest severity vulnerability present') }}
       </p>
     </header>
-    <accordion class="security-dashboard-accordion gl-px-3 gl-display-flex gl-flex-fill-1">
+    <accordion class="security-dashboard-accordion gl-px-5 gl-display-flex gl-flex-fill-1">
       <template #default="{ accordionId }">
         <accordion-item
           v-for="severityGroup in severityGroups"
@@ -102,33 +102,33 @@ export default {
           class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-justify-content-center"
         >
           <template #title="{ isExpanded, isDisabled }">
-            <h5 class="d-flex align-items-center font-weight-normal p-0 m-0">
+            <h5 class="gl-display-flex gl-align-items-center gl-font-weight-normal gl-p-0 gl-m-0">
               <span
                 v-gl-tooltip
                 :title="severityGroup.description"
-                class="font-weight-bold mr-3 gl-font-lg"
+                class="gl-font-weight-bold gl-mr-5 gl-font-lg"
                 :class="cssForSeverityGroup(severityGroup)"
               >
                 {{ severityGroup.type }}
               </span>
-              <span :class="{ 'font-weight-bold': isExpanded, 'text-secondary': isDisabled }">
+              <span :class="{ 'gl-font-weight-bold': isExpanded, 'text-secondary': isDisabled }">
                 {{ n__('%d project', '%d projects', severityGroup.projects.length) }}
               </span>
             </h5>
           </template>
           <template #subTitle>
-            <p class="m-0 ml-5 pb-1 text-secondary">{{ severityGroup.warning }}</p>
+            <p class="gl-m-0 gl-ml-7 gl-pb-2 text-secondary">{{ severityGroup.warning }}</p>
           </template>
-          <div class="ml-5 pb-2">
-            <ul class="list-unstyled py-1">
-              <li v-for="project in severityGroup.projects" :key="project.id" class="py-2">
+          <div class="gl-ml-7 gl-pb-2">
+            <ul class="list-unstyled gl-py-1">
+              <li v-for="project in severityGroup.projects" :key="project.id" class="gl-py-2">
                 <gl-link target="_blank" :href="`${project.fullPath}/security/dashboard`">{{
                   project.fullName
                 }}</gl-link>
                 <span
                   v-if="project.mostSevereVulnerability"
                   ref="mostSevereCount"
-                  class="d-block text-lowercase"
+                  class="gl-display-block text-lowercase"
                   :class="cssForMostSevereVulnerability(project.mostSevereVulnerability)"
                   >{{ project.mostSevereVulnerability.count }}
                   {{ severityText(project.mostSevereVulnerability.level) }}

ee/changelogs/unreleased/update-css-classes.yml

+---
+title: Update css class to gl- classes
+merge_request: 38640
+author:
+type: other

ee/spec/frontend/security_dashboard/components/__snapshots__/vulnerability_severity_spec.js.snap

@@ -5,10 +5,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
   class="gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-display-flex gl-flex-direction-column"
 >
   <header
-    class="border-bottom p-3"
+    class="gl-border-b-gray-100 gl-border-b-solid gl-border-b-1 gl-p-5"
   >
     <h4
-      class="my-0"
+      class="gl-my-0"
     >
       
       Project security status
@@ -17,7 +17,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
     </h4>
      
     <p
-      class="text-secondary m-0"
+      class="text-secondary gl-m-0"
     >
       
       Projects are graded based on the highest severity vulnerability present
@@ -26,7 +26,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
   </header>
    
   <div
-    class="security-dashboard-accordion gl-px-3 gl-display-flex gl-flex-fill-1"
+    class="security-dashboard-accordion gl-px-5 gl-display-flex gl-flex-fill-1"
   >
     <ul
       class="list-group list-group-flush py-2"
@@ -58,10 +58,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                
               <span>
                 <h5
-                  class="d-flex align-items-center font-weight-normal p-0 m-0"
+                  class="gl-display-flex gl-align-items-center gl-font-weight-normal gl-p-0 gl-m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-lg gl-text-red-900"
+                    class="gl-font-weight-bold gl-mr-5 gl-font-lg gl-text-red-900"
                   >
                     
               F
@@ -88,7 +88,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           style="display: none;"
         >
           <p
-            class="m-0 ml-5 pb-1 text-secondary"
+            class="gl-m-0 gl-ml-7 gl-pb-2 text-secondary"
           >
             
           </p>
@@ -98,10 +98,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           >
               
             <div
-              class="ml-5 pb-2"
+              class="gl-ml-7 gl-pb-2"
             >
               <ul
-                class="list-unstyled py-1"
+                class="list-unstyled gl-py-1"
               />
             </div>
           </div>
@@ -134,10 +134,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                
               <span>
                 <h5
-                  class="d-flex align-items-center font-weight-normal p-0 m-0"
+                  class="gl-display-flex gl-align-items-center gl-font-weight-normal gl-p-0 gl-m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-lg gl-text-red-700"
+                    class="gl-font-weight-bold gl-mr-5 gl-font-lg gl-text-red-700"
                   >
                     
               D
@@ -164,7 +164,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           style="display: none;"
         >
           <p
-            class="m-0 ml-5 pb-1 text-secondary"
+            class="gl-m-0 gl-ml-7 gl-pb-2 text-secondary"
           >
             
           </p>
@@ -174,10 +174,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           >
               
             <div
-              class="ml-5 pb-2"
+              class="gl-ml-7 gl-pb-2"
             >
               <ul
-                class="list-unstyled py-1"
+                class="list-unstyled gl-py-1"
               />
             </div>
           </div>
@@ -210,10 +210,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                
               <span>
                 <h5
-                  class="d-flex align-items-center font-weight-normal p-0 m-0"
+                  class="gl-display-flex gl-align-items-center gl-font-weight-normal gl-p-0 gl-m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-lg gl-text-orange-600"
+                    class="gl-font-weight-bold gl-mr-5 gl-font-lg gl-text-orange-600"
                   >
                     
               C
@@ -240,7 +240,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           style="display: none;"
         >
           <p
-            class="m-0 ml-5 pb-1 text-secondary"
+            class="gl-m-0 gl-ml-7 gl-pb-2 text-secondary"
           >
             
           </p>
@@ -250,10 +250,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           >
               
             <div
-              class="ml-5 pb-2"
+              class="gl-ml-7 gl-pb-2"
             >
               <ul
-                class="list-unstyled py-1"
+                class="list-unstyled gl-py-1"
               />
             </div>
           </div>
@@ -286,10 +286,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                
               <span>
                 <h5
-                  class="d-flex align-items-center font-weight-normal p-0 m-0"
+                  class="gl-display-flex gl-align-items-center gl-font-weight-normal gl-p-0 gl-m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-lg gl-text-orange-400"
+                    class="gl-font-weight-bold gl-mr-5 gl-font-lg gl-text-orange-400"
                   >
                     
               B
@@ -316,7 +316,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           style="display: none;"
         >
           <p
-            class="m-0 ml-5 pb-1 text-secondary"
+            class="gl-m-0 gl-ml-7 gl-pb-2 text-secondary"
           >
             
           </p>
@@ -326,10 +326,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           >
               
             <div
-              class="ml-5 pb-2"
+              class="gl-ml-7 gl-pb-2"
             >
               <ul
-                class="list-unstyled py-1"
+                class="list-unstyled gl-py-1"
               />
             </div>
           </div>
@@ -362,10 +362,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                
               <span>
                 <h5
-                  class="d-flex align-items-center font-weight-normal p-0 m-0"
+                  class="gl-display-flex gl-align-items-center gl-font-weight-normal gl-p-0 gl-m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-lg gl-text-green-500"
+                    class="gl-font-weight-bold gl-mr-5 gl-font-lg gl-text-green-500"
                   >
                     
               A
@@ -392,7 +392,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           style="display: none;"
         >
           <p
-            class="m-0 ml-5 pb-1 text-secondary"
+            class="gl-m-0 gl-ml-7 gl-pb-2 text-secondary"
           >
             
           </p>
@@ -402,10 +402,10 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
           >
               
             <div
-              class="ml-5 pb-2"
+              class="gl-ml-7 gl-pb-2"
             >
               <ul
-                class="list-unstyled py-1"
+                class="list-unstyled gl-py-1"
               />
             </div>
           </div>