Merge branch '207810-remove-css-in-js-for-the-secure-vue-files' into 'master'

Remove CSS in JS for the secure Vue files

See merge request gitlab-org/gitlab!29659

app/assets/stylesheets/utilities.scss

@@ -85,6 +85,7 @@
 .gl-bg-blue-50 { @include gl-bg-blue-50; }
 .gl-bg-red-100 { @include gl-bg-red-100; }
 .gl-bg-orange-100 { @include gl-bg-orange-100; }
+.gl-bg-gray-50 { @include gl-bg-gray-50; }
 .gl-bg-gray-100 { @include gl-bg-gray-100; }
 .gl-bg-green-100 { @include gl-bg-green-100;}
 .gl-bg-blue-500 { @include gl-bg-blue-500; }
@@ -107,8 +108,14 @@
 .gl-text-green-700 { @include gl-text-green-700; }
 
 .gl-align-items-center { @include gl-align-items-center; }
+
 .d-sm-table-column {
   @include media-breakpoint-up(sm) {
     display: table-column !important;
   }
 }
+
+.gl-white-space-normal { @include gl-white-space-normal; }
+.gl-word-break-all { @include gl-word-break-all; }
+.gl-line-height-inherit { line-height: inherit; }
+.gl-text-align-inherit { text-align: inherit; }

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

@@ -58,7 +58,12 @@ export default {
 <template>
   <div class="dashboard-filter">
     <strong class="js-name">{{ filter.name }}</strong>
-    <gl-dropdown ref="dropdown" class="d-block mt-1" menu-class="dropdown-extended-height">
+    <gl-dropdown
+      ref="dropdown"
+      class="d-block mt-1"
+      menu-class="dropdown-extended-height"
+      toggle-class="d-flex w-100 justify-content-between align-items-center"
+    >
       <template slot="button-content">
         <span class="text-truncate" :data-qa-selector="qaSelector">
           {{ firstSelectedOption }}
@@ -125,12 +130,3 @@ export default {
     </gl-dropdown>
   </div>
 </template>
-
-<style>
-.dashboard-filter .dropdown-toggle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-</style>

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

@@ -63,10 +63,7 @@ export default {
 <template>
   <div class="ci-table js-security-dashboard-table" data-qa-selector="security_report_content">
     <selection-summary v-if="isSelectingVulnerabilities" />
-    <div
-      class="gl-responsive-table-row table-row-header vulnerabilities-row-header px-2"
-      role="row"
-    >
+    <div class="gl-responsive-table-row table-row-header gl-bg-gray-50 text-2 px-2" role="row">
       <div class="table-section">
         <gl-form-checkbox
           :checked="hasSelectedAllVulnerabilities"
@@ -125,15 +122,3 @@ export default {
     </template>
   </div>
 </template>
-
-<style>
-.vulnerabilities-row-header {
-  background-color: #fafafa;
-  font-size: 14px;
-}
-
-.vulnerabilities-row .section-10,
-.vulnerabilities-row-header .section-10 {
-  min-width: 120px;
-}
-</style>

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

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlDeprecatedButton, GlSkeletonLoading, GlFormCheckbox } from '@gitlab/ui';
+import { GlDeprecatedButton, GlFormCheckbox, GlSkeletonLoading } from '@gitlab/ui';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import VulnerabilityActionButtons from './vulnerability_action_buttons.vue';
@@ -36,7 +36,7 @@ export default {
     severity() {
       return this.vulnerability.severity || ' ';
     },
-    vulnerabilityNamepace() {
+    vulnerabilityNamespace() {
       const { project, location } = this.vulnerability;
       if (this.dashboardType === DASHBOARD_TYPES.GROUP) {
         return project && project.full_name;
@@ -83,6 +83,7 @@ export default {
     <div class="table-section">
       <gl-form-checkbox
         :checked="isSelected"
+        :inline="true"
         class="my-0 ml-1 mr-3"
         @change="toggleVulnerability"
       />
@@ -90,19 +91,22 @@ export default {
 
     <div class="table-section section-10">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Severity') }}</div>
-      <div class="table-mobile-content"><severity-badge :severity="severity" /></div>
+      <div class="table-mobile-content">
+        <severity-badge :severity="severity" />
+      </div>
     </div>
 
     <div class="table-section flex-grow-1">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Vulnerability') }}</div>
       <div
-        class="table-mobile-content vulnerability-info"
+        class="table-mobile-content gl-white-space-normal"
         data-qa-selector="vulnerability_info_content"
       >
         <gl-skeleton-loading v-if="isLoading" class="mt-2 js-skeleton-loader" :lines="2" />
         <template v-else>
           <gl-deprecated-button
-            class="vulnerability-title d-inline"
+            ref="vulnerability-title"
+            class="d-inline gl-line-height-inherit gl-text-align-inherit gl-white-space-normal"
             variant="blank"
             @click="openModal({ vulnerability })"
             >{{ vulnerability.name }}</gl-deprecated-button
@@ -124,9 +128,9 @@ export default {
             :project-name="vulnerability.project.name"
           />
           <br />
-          <span v-if="vulnerabilityNamepace" class="vulnerability-namespace">
-            {{ vulnerabilityNamepace }}
-          </span>
+          <small v-if="vulnerabilityNamespace" class="gl-text-gray-700 gl-word-break-all">
+            {{ vulnerabilityNamespace }}
+          </small>
         </template>
       </div>
     </div>
@@ -145,47 +149,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style scoped>
-@media (min-width: 768px) {
-  .vulnerabilities-row:last-child {
-    border-bottom: 1px solid transparent;
-  }
-
-  .vulnerabilities-row:hover,
-  .vulnerabilities-row:focus {
-    background: #f6fafd;
-    border-bottom: 1px solid #c1daf4;
-    border-top: 1px solid #c1daf4;
-    margin-top: -1px;
-  }
-
-  .vulnerabilities-row .action-buttons {
-    opacity: 0;
-  }
-
-  .vulnerabilities-row:hover .action-buttons,
-  .vulnerabilities-row:focus-within .action-buttons {
-    opacity: 1;
-  }
-}
-
-.vulnerability-info {
-  white-space: normal;
-}
-
-.vulnerability-title {
-  text-align: inherit;
-  white-space: normal;
-  line-height: inherit;
-}
-
-.vulnerability-namespace {
-  color: #707070;
-  font-size: 0.8em;
-}
-
-.dismissed .table-mobile-content:not(.action-buttons) {
-  opacity: 0.5;
-}
-</style>

ee/app/assets/stylesheets/pages/security_dashboard.scss

+.vulnerabilities-row {
+  &.dismissed .table-mobile-content:not(.action-buttons) {
+    opacity: 0.5;
+  }
+
+  @include media-breakpoint-up(md) {
+    .action-buttons {
+      opacity: 0;
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+      background: $blue-50;
+      border-bottom: 1px solid $blue-200;
+      border-top: 1px solid $blue-200;
+      margin-top: -1px;
+
+      .action-buttons {
+        opacity: 1;
+      }
+    }
+  }
+}
+

ee/changelogs/unreleased/207810-remove-css-in-js-for-the-secure-vue-files.yml

+---
+title: Fix checkbox alignment and responsive word-break for secure table rows
+merge_request: 29659
+author:
+type: changed

ee/spec/frontend/security_dashboard/components/security_dashboard_table_row_spec.js

@@ -89,7 +89,7 @@ describe('Security Dashboard Table Row', () => {
       it('should fire the openModal action when clicked', () => {
         jest.spyOn(store, 'dispatch').mockImplementation();
 
-        const el = wrapper.find('.vulnerability-title');
+        const el = wrapper.find({ ref: 'vulnerability-title' });
         el.trigger('click');
 
         expect(store.dispatch).toHaveBeenCalledWith('vulnerabilities/openModal', {