Merge branch '239794-alert-management-page-specific-css' into 'master'

Convert alert-management/details.scss into page specific bundle

See merge request gitlab-org/gitlab!45671

app/assets/stylesheets/_page_specific_files.scss

 @import './pages/admin';
-@import './pages/alert_management/details';
-@import './pages/alert_management/severity-icons';
 @import './pages/branches';
 @import './pages/builds';
 @import './pages/ci_projects';

app/assets/stylesheets/pages/alert_management/severity-icons.scss → app/assets/stylesheets/components/severity/icons.scss

@@ -2,26 +2,26 @@
 .incident-management-list,
 .alert-management-details {
   .icon-critical {
-    color: $red-800;
+    @include gl-text-red-800;
   }
 
   .icon-high {
-    color: $red-600;
+    @include gl-text-red-600;
   }
 
   .icon-medium {
-    color: $orange-400;
+    @include gl-text-orange-400;
   }
 
   .icon-low {
-    color: $orange-300;
+    @include gl-text-orange-300;
   }
 
   .icon-info {
-    color: $blue-400;
+    @include gl-text-blue-400;
   }
 
   .icon-unknown {
-    color: $gray-200;
+    @include gl-text-gray-200;
   }
 }

app/assets/stylesheets/pages/alert_management/details.scss → app/assets/stylesheets/page_bundles/alert_management_details.scss

+@import 'mixins_and_variables_and_functions';
+
 .alert-management-details {
   @include media-breakpoint-down(xs) {
     .alert-details-incident-button {
-      width: 100%;
+      @include gl-w-full;
     }
   }
 
   .toggle-sidebar-mobile-button {
-    right: 0;
+    @include gl-right-0;
   }
 
   .dropdown-menu-toggle {
     &:hover {
-      background-color: $white;
+      @include gl-bg-white;
     }
   }
 
   .assignee-dropdown-item {
     .dropdown-item {
-      display: flex;
-      align-items: center;
+      @include gl-display-flex;
+      @include gl-align-items-center;
 
       &::before {
         top: 50% !important;
@@ -26,7 +28,9 @@
 
       &.is-active {
         &:last-child {
-          border-bottom: 1px solid $gray-100;
+          @include gl-border-b-gray-100;
+          @include gl-border-b-1;
+          @include gl-border-b-solid;
         }
       }
     }

app/views/projects/alert_management/details.html.haml

 - add_to_breadcrumbs s_('AlertManagement|Alerts'), project_alert_management_index_path(@project)
 - page_title s_('AlertManagement|Alert detail')
+- add_page_specific_style 'page_bundles/alert_management_details'
 
 #js-alert_details{ data: alert_management_detail_data(@project, @alert_id) }

config/application.rb

@@ -197,6 +197,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/reports.css"
     config.assets.precompile << "page_bundles/xterm.css"
     config.assets.precompile << "page_bundles/wiki.css"
+    config.assets.precompile << "page_bundles/alert_management_details.css"
     config.assets.precompile << "lazy_bundles/cropper.css"
     config.assets.precompile << "performance_bar.css"
     config.assets.precompile << "lib/ace.js"