Automatic merge of gitlab-org/gitlab master

app/assets/javascripts/fly_out_nav.js

 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
 
-const isRefactoring = document.body.classList.contains('sidebar-refactoring');
 const HIDE_INTERVAL_TIMEOUT = 300;
-const COLLAPSED_PANEL_WIDTH = isRefactoring ? 48 : 50;
+const COLLAPSED_PANEL_WIDTH = 48;
 const IS_OVER_CLASS = 'is-over';
 const IS_ABOVE_CLASS = 'is-above';
 const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
@@ -89,12 +88,12 @@ export const moveSubItemsToPosition = (el, subItems) => {
   const boundingRect = el.getBoundingClientRect();
   const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH;
   let top = calculateTop(boundingRect, subItems.offsetHeight);
-  if (isRefactoring && hasSubItems) {
+  if (hasSubItems) {
     top -= header.offsetHeight;
-  } else if (isRefactoring) {
+  } else {
     top = boundingRect.top;
   }
-  const isAbove = top < boundingRect.top;
+  const isAbove = top <= boundingRect.top;
 
   subItems.classList.add('fly-out-list');
   subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - getHeaderHeight()}px, 0)`; // eslint-disable-line no-param-reassign

app/assets/javascripts/pages/projects/security/configuration/index.js

-import { initStaticSecurityConfiguration } from '~/security_configuration';
+import { initCESecurityConfiguration } from '~/security_configuration';
 
-initStaticSecurityConfiguration(document.querySelector('#js-security-configuration-static'));
+initCESecurityConfiguration(document.querySelector('#js-security-configuration-static'));

app/assets/javascripts/security_configuration/components/redesigned_app.vue

@@ -112,6 +112,7 @@ export default {
             <feature-card
               v-for="feature in augmentedSecurityFeatures"
               :key="feature.type"
+              data-testid="security-testing-card"
               :feature="feature"
               class="gl-mb-6"
             />

app/assets/javascripts/security_configuration/index.js

@@ -7,11 +7,7 @@ import { securityFeatures, complianceFeatures } from './components/constants';
 import RedesignedSecurityConfigurationApp from './components/redesigned_app.vue';
 import { augmentFeatures } from './utils';
 
-export const initStaticSecurityConfiguration = (el) => {
-  if (!el) {
-    return null;
-  }
-
+export const initRedesignedSecurityConfiguration = (el) => {
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
@@ -26,33 +22,50 @@ export const initStaticSecurityConfiguration = (el) => {
     gitlabCiHistoryPath,
   } = el.dataset;
 
-  if (gon.features.securityConfigurationRedesign) {
-    const { augmentedSecurityFeatures, augmentedComplianceFeatures } = augmentFeatures(
-      securityFeatures,
-      complianceFeatures,
-      features ? JSON.parse(features) : [],
-    );
+  const { augmentedSecurityFeatures, augmentedComplianceFeatures } = augmentFeatures(
+    securityFeatures,
+    complianceFeatures,
+    features ? JSON.parse(features) : [],
+  );
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      projectPath,
+      upgradePath,
+    },
+    render(createElement) {
+      return createElement(RedesignedSecurityConfigurationApp, {
+        props: {
+          augmentedComplianceFeatures,
+          augmentedSecurityFeatures,
+          latestPipelinePath,
+          gitlabCiHistoryPath,
+          ...parseBooleanDataAttributes(el, ['gitlabCiPresent']),
+        },
+      });
+    },
+  });
+};
+
+export const initCESecurityConfiguration = (el) => {
+  if (!el) {
+    return null;
+  }
 
-    return new Vue({
-      el,
-      apolloProvider,
-      provide: {
-        projectPath,
-        upgradePath,
-      },
-      render(createElement) {
-        return createElement(RedesignedSecurityConfigurationApp, {
-          props: {
-            augmentedComplianceFeatures,
-            augmentedSecurityFeatures,
-            latestPipelinePath,
-            gitlabCiHistoryPath,
-            ...parseBooleanDataAttributes(el, ['gitlabCiPresent']),
-          },
-        });
-      },
-    });
+  if (gon.features?.securityConfigurationRedesign) {
+    return initRedesignedSecurityConfiguration(el);
   }
+
+  Vue.use(VueApollo);
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
+  const { projectPath, upgradePath } = el.dataset;
+
   return new Vue({
     el,
     apolloProvider,

app/assets/javascripts/security_configuration/utils.js

+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
 export const augmentFeatures = (securityFeatures, complianceFeatures, features = []) => {
   const featuresByType = features.reduce((acc, feature) => {
-    acc[feature.type] = feature;
+    acc[feature.type] = convertObjectPropsToCamelCase(feature, { deep: true });
     return acc;
   }, {});
 

app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue

@@ -74,6 +74,7 @@ export default {
 <template>
   <gl-button
     v-if="!feature.configured"
+    data-testid="configure-via-mr-button"
     :loading="isLoading"
     :variant="variant"
     :category="category"

app/assets/stylesheets/framework.scss

@@ -39,7 +39,7 @@
 @import 'framework/selects';
 @import 'framework/sidebar';
 @import 'framework/contextual_sidebar_header';
-@import 'framework/contextual_sidebar_refactoring/contextual_sidebar';
+@import 'framework/contextual_sidebar';
 @import 'framework/tables';
 @import 'framework/notes';
 @import 'framework/tabs';

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss → app/assets/stylesheets/framework/contextual_sidebar.scss

-//
-// VARIABLES
-//
-
-$top-level-item-color: $purple-900;
-
-//
-// TEMPORARY OVERRIDES
-// Needed while we serve both *_base and *_variant stylesheets
-// TODO: These have to be removed during the ':sidebar_refactor' flag rollout
-//
-&.gl-dark .nav-sidebar li.active {
-  box-shadow: none;
-}
-
-&.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  box-shadow: none;
-  border: 1px solid $border-color;
-}
-
-&.gl-dark .sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 {
-  color: $white;
-}
-
-&.gl-dark .nav-sidebar li a,
-&.gl-dark .toggle-sidebar-button .collapse-text,
-&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left,
-&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right,
-&.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title,
-&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
-  color: $gray-darkest;
-}
-
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
-  @include gl-mt-0;
-}
-
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a,
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a:hover,
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a,
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
-  background: $white;
-  color: $gray-darkest;
-
-  &::before {
-    border-right-color: $white;
-  }
-}
-
-&.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  background-color: $white;
-}
-
-&.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a {
-  color: $top-level-item-color;
-}
-
-&.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
-  fill: $top-level-item-color;
-}
-
-.nav-sidebar {
-  box-shadow: none;
-
-  li.active {
-    background-color: transparent;
-    box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss` together with ':sidebar_refactor' rollout
-  }
-}
-
 //
 // MIXINS
 //
@@ -112,7 +35,6 @@ $top-level-item-color: $purple-900;
 
     .icon-chevron-double-lg-left {
       @include gl-rotate-180;
-      @include gl-display-block; // TODO: shouldn't be needed after the flag roll out
       @include gl-m-0;
     }
   }
@@ -219,15 +141,10 @@ $top-level-item-color: $purple-900;
 
       .avatar.s32 {
         @extend .rect-avatar.s32;
-        //color: $gray-900;
         box-shadow: $avatar-box-shadow;
       }
     }
   }
-
-  .sidebar-context-title {
-    color: $top-level-item-color;
-  }
 }
 
 @mixin top-level-item {
@@ -258,8 +175,6 @@ $top-level-item-color: $purple-900;
     @include gl-cursor-default;
     @include gl-pointer-events-none;
     @include gl-font-sm;
-    background-color: $purple-900;
-    color: $white;
 
     @if $has-sub-items {
       @include gl-mt-0;
@@ -269,7 +184,8 @@ $top-level-item-color: $purple-900;
       @include gl-my-n2;
       @include gl-mt-0;
       @include gl-relative;
-      background-color: $black;
+      @include gl-text-white;
+      background: var(--black, $black);
 
       strong {
         @include gl-font-weight-normal;
@@ -287,6 +203,7 @@ $top-level-item-color: $purple-900;
         border-top: $gl-spacing-scale-2 solid transparent;
         border-bottom: $gl-spacing-scale-2 solid transparent;
         border-right: $gl-spacing-scale-2 solid $black;
+        border-right-color: var(--black, $black);
       }
     }
   }
@@ -343,7 +260,7 @@ $top-level-item-color: $purple-900;
 
   a {
     @include gl-text-decoration-none;
-    color: $top-level-item-color;
+    color: $gray-900;
   }
 
   li {
@@ -392,13 +309,15 @@ $top-level-item-color: $purple-900;
   }
 
   a.has-sub-items + .sidebar-sub-level-items {
-    @include gl-mt-n2;
-
     .fly-out-top-item {
       @include fly-out-top-item($has-sub-items: true);
     }
   }
 
+  a.has-sub-items + .sidebar-sub-level-items.fly-out-list {
+    @include gl-mt-n2;
+  }
+
   @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
     &:not(.sidebar-expanded-mobile) {
       @include collapse-contextual-sidebar;
@@ -445,8 +364,8 @@ $top-level-item-color: $purple-900;
       }
 
       .badge.badge-pill {
-        @include gl-font-weight-normal; // TODO: update in `theme_helper.scss`
-        color: $blue-700; // TODO: update in `theme_helper.scss`
+        @include gl-font-weight-normal;
+        color: $blue-700;
       }
     }
   }
@@ -484,7 +403,6 @@ $top-level-item-color: $purple-900;
   @include side-panel-toggle;
   background-color: $gray-50;
   border-top: 1px solid $border-color;
-  color: $top-level-item-color;
   position: fixed;
   bottom: 0;
   width: $contextual-sidebar-width;
@@ -538,14 +456,10 @@ $top-level-item-color: $purple-900;
 
 //
 // PANELS-SPECIFIC
-// TODO: Check whether we can remove these in favor of the utility-classes
 //
 
 .settings-avatar {
-  background-color: $white;
-
   svg {
-    fill: $gl-text-color-secondary;
     margin: auto;
   }
 }

app/assets/stylesheets/framework/contextual_sidebar_header.scss

@@ -32,6 +32,7 @@
   .sidebar-context-title {
     overflow: hidden;
     text-overflow: ellipsis;
+    color: $gray-900;
 
     &.text-secondary {
       font-weight: normal;

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss

-body:not(.sidebar-refactoring) {
-  @import 'contextual_sidebar_base';
-}
-
-body.sidebar-refactoring {
-  @import 'contextual_sidebar_variant';
-}

app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss

-@mixin collapse-contextual-sidebar-content {
-
-  @include context-header-collapsed;
-
-  .sidebar-top-level-items > li {
-    .sidebar-sub-level-items {
-      &:not(.flyout-list) {
-        display: none;
-      }
-    }
-  }
-
-  .nav-icon-container {
-    margin-right: 0;
-  }
-
-  .toggle-sidebar-button {
-    padding: 16px;
-    width: $contextual-sidebar-collapsed-width - 1px;
-
-    .collapse-text,
-    .icon-chevron-double-lg-left {
-      display: none;
-    }
-
-    .icon-chevron-double-lg-right {
-      display: block;
-      margin: 0;
-    }
-  }
-}
-
-@mixin collapse-contextual-sidebar {
-  width: $contextual-sidebar-collapsed-width;
-
-  .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-
-  .badge.badge-pill:not(.fly-out-badge),
-  .nav-item-name {
-    @include gl-sr-only;
-  }
-
-  .sidebar-top-level-items > li > a {
-    min-height: 45px;
-  }
-
-  .fly-out-top-item {
-    display: block;
-  }
-
-  .avatar-container {
-    margin: 0 auto;
-  }
-}
-
-@at-root {
-  .page-with-contextual-sidebar {
-    transition: padding-left $sidebar-transition-duration;
-
-    @include media-breakpoint-up(md) {
-      padding-left: $contextual-sidebar-collapsed-width;
-    }
-
-    @include media-breakpoint-up(xl) {
-      padding-left: $contextual-sidebar-width;
-    }
-
-    .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
-      padding: 10px 0 15px;
-    }
-  }
-
-  .page-with-icon-sidebar {
-    @include media-breakpoint-up(md) {
-      padding-left: $contextual-sidebar-collapsed-width;
-    }
-  }
-
-  .settings-avatar {
-    background-color: $white;
-
-    svg {
-      fill: $gl-text-color-secondary;
-      margin: auto;
-    }
-  }
-
-  .nav-sidebar {
-    transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
-    position: fixed;
-    z-index: 600;
-    width: $contextual-sidebar-width;
-    top: $header-height;
-    bottom: 0;
-    left: 0;
-    background-color: $gray-light;
-    box-shadow: inset -1px 0 0 $border-color;
-    transform: translate3d(0, 0, 0);
-
-    &:not(.sidebar-collapsed-desktop) {
-      @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-        box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
-      }
-    }
-
-    &.sidebar-collapsed-desktop {
-      @include collapse-contextual-sidebar;
-    }
-
-    &.sidebar-expanded-mobile {
-      left: 0;
-    }
-
-    a {
-      text-decoration: none;
-    }
-
-    ul {
-      padding-left: 0;
-      list-style: none;
-    }
-
-    li {
-      white-space: nowrap;
-
-      a {
-        transition: padding $sidebar-transition-duration;
-        display: flex;
-        align-items: center;
-        padding: 12px $gl-padding;
-        color: $gl-text-color-secondary;
-      }
-
-      .nav-item-name {
-        flex: 1;
-      }
-
-      &.active {
-        > a {
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      left: (-$contextual-sidebar-width);
-    }
-
-    .nav-icon-container {
-      display: flex;
-      margin-right: 8px;
-    }
-
-    .fly-out-top-item {
-      display: none;
-    }
-
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-
-    @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
-      &:not(.sidebar-expanded-mobile) {
-        @include collapse-contextual-sidebar;
-        @include collapse-contextual-sidebar-content;
-      }
-    }
-  }
-
-  .nav-sidebar-inner-scroll {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-
-  .sidebar-sub-level-items {
-    display: none;
-    padding-bottom: 8px;
-
-    > li {
-      a {
-        padding: 8px 16px 8px 40px;
-
-        &:hover,
-        &:focus {
-          background: $link-active-background;
-          color: $gl-text-color;
-        }
-      }
-
-      &.active {
-        a {
-          &,
-          &:hover,
-          &:focus {
-            background: $link-active-background;
-          }
-        }
-      }
-    }
-  }
-
-  .sidebar-top-level-items {
-    margin-bottom: 60px;
-
-    > li {
-      > a {
-        @include media-breakpoint-up(sm) {
-          margin-right: 1px;
-        }
-
-        &:hover {
-          color: $gl-text-color;
-        }
-      }
-
-      &.is-showing-fly-out {
-        > a {
-          margin-right: 1px;
-        }
-
-        .sidebar-sub-level-items {
-          @include media-breakpoint-up(sm) {
-            position: fixed;
-            top: 0;
-            left: 0;
-            min-width: 150px;
-            margin-top: -1px;
-            padding: 4px 1px;
-            background-color: $white;
-            box-shadow: 2px 1px 3px $dropdown-shadow-color;
-            border: 1px solid $gray-darker;
-            border-left: 0;
-            border-radius: 0 3px 3px 0;
-
-            &::before {
-              content: '';
-              position: absolute;
-              top: -30px;
-              bottom: -30px;
-              left: -10px;
-              right: -30px;
-              z-index: -1;
-            }
-
-            &.is-above {
-              margin-top: 1px;
-            }
-
-            .divider {
-              height: 1px;
-              margin: 4px -1px;
-              padding: 0;
-              background-color: $dropdown-divider-bg;
-            }
-
-            > .active {
-              box-shadow: none;
-
-              > a {
-                background-color: transparent;
-              }
-            }
-
-            a {
-              padding: 8px 16px;
-              color: $gl-text-color;
-
-              &:hover,
-              &:focus {
-                background-color: $gray-darker;
-              }
-            }
-          }
-        }
-      }
-
-      .badge.badge-pill {
-        background-color: $inactive-badge-background;
-        color: $gl-text-color-secondary;
-      }
-
-      &.active {
-        background: $link-active-background;
-
-        > a {
-          margin-left: 4px;
-          // Subtract width of left border on active element
-          padding-left: $gl-padding-12;
-        }
-
-        .badge.badge-pill {
-          font-weight: $gl-font-weight-bold;
-        }
-
-        .sidebar-sub-level-items:not(.is-fly-out-only) {
-          display: block;
-        }
-      }
-
-      &.active > a:hover,
-      &.is-over > a {
-        background-color: $link-hover-background;
-      }
-    }
-  }
-
-  // Collapsed nav
-
-  .toggle-sidebar-button,
-  .close-nav-button {
-    @include side-panel-toggle;
-  }
-
-  .toggle-sidebar-button,
-  .close-nav-button {
-    position: fixed;
-    bottom: 0;
-    width: $contextual-sidebar-width - 1px;
-    border-top: 1px solid $border-color;
-
-    svg {
-      margin-right: 8px;
-    }
-
-    .icon-chevron-double-lg-right {
-      display: none;
-    }
-  }
-
-  .collapse-text {
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .sidebar-collapsed-desktop {
-    @include collapse-contextual-sidebar-content;
-  }
-
-  .fly-out-top-item {
-    > a {
-      display: flex;
-    }
-
-    .fly-out-badge {
-      margin-left: 8px;
-    }
-  }
-
-  .fly-out-top-item-name {
-    flex: 1;
-  }
-
-  // Mobile nav
-
-  .close-nav-button {
-    display: none;
-  }
-
-  @include media-breakpoint-down(sm) {
-    .close-nav-button {
-      display: flex;
-    }
-
-    .toggle-sidebar-button {
-      display: none;
-    }
-
-    .mobile-overlay {
-      display: none;
-
-      &.mobile-nav-open {
-        display: block;
-        position: fixed;
-        background-color: $black-transparent;
-        height: 100%;
-        width: 100%;
-        z-index: $zindex-dropdown-menu;
-      }
-    }
-  }
-}
-

app/assets/stylesheets/startup/startup-dark.scss

@@ -13,6 +13,10 @@ body.gl-dark {
   --orange-400: #ab6100;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
+  --black: #fff;
+}
+.nav-sidebar li.active {
+  box-shadow: none;
 }
 :root {
   --white: #333;
@@ -933,6 +937,7 @@ input {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
+  color: #fafafa;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -951,20 +956,14 @@ input {
 }
 .nav-sidebar {
   position: fixed;
+  bottom: 0;
+  left: 0;
   z-index: 600;
   width: 220px;
   top: 40px;
-  bottom: 0;
-  left: 0;
   background-color: #303030;
-  box-shadow: inset -1px 0 0 #404040;
   transform: translate3d(0, 0, 0);
 }
-@media (min-width: 576px) and (max-width: 576px) {
-  .nav-sidebar:not(.sidebar-collapsed-desktop) {
-    box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1);
-  }
-}
 .nav-sidebar.sidebar-collapsed-desktop {
   width: 48px;
 }
@@ -972,7 +971,8 @@ input {
   overflow-x: hidden;
 }
 .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
-.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
+.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
+.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -984,479 +984,29 @@ input {
   width: 1px;
 }
 .nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
-  min-height: 45px;
-}
-.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
-  display: block;
-}
-.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
-  margin: 0 auto;
-}
-.nav-sidebar a {
-  text-decoration: none;
-}
-.nav-sidebar ul {
-  padding-left: 0;
-  list-style: none;
-}
-.nav-sidebar li {
-  white-space: nowrap;
-}
-.nav-sidebar li a {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  color: #999;
-}
-.nav-sidebar li .nav-item-name {
-  flex: 1;
-}
-.nav-sidebar li.active > a {
-  font-weight: 600;
-}
-@media (max-width: 767.98px) {
-  .nav-sidebar {
-    left: -220px;
-  }
-}
-.nav-sidebar .nav-icon-container {
-  display: flex;
-  margin-right: 8px;
-}
-.nav-sidebar .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar svg {
-  height: 16px;
-  width: 16px;
-}
-@media (min-width: 768px) and (max-width: 1199px) {
-  .nav-sidebar:not(.sidebar-expanded-mobile) {
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .badge.badge-pill:not(.fly-out-badge),
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
-    min-height: 45px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
-    display: block;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
-    margin: 0 auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
-    height: 60px;
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 10px 4px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    .sidebar-sub-level-items:not(.flyout-list) {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
-    margin-right: 0;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
-    padding: 16px;
-    width: 47px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .collapse-text,
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-left {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-right {
-    display: block;
-    margin: 0;
-  }
-}
-.nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-.sidebar-sub-level-items {
-  display: none;
-  padding-bottom: 8px;
-}
-.sidebar-sub-level-items > li a {
-  padding: 8px 16px 8px 40px;
-}
-.sidebar-sub-level-items > li.active a {
-  background: rgba(255, 255, 255, 0.04);
-}
-.sidebar-top-level-items {
-  margin-bottom: 60px;
-}
-@media (min-width: 576px) {
-  .sidebar-top-level-items > li > a {
-    margin-right: 1px;
-  }
-}
-.sidebar-top-level-items > li .badge.badge-pill {
-  background-color: rgba(255, 255, 255, 0.08);
-  color: #999;
-}
-.sidebar-top-level-items > li.active {
-  background: rgba(255, 255, 255, 0.04);
-}
-.sidebar-top-level-items > li.active > a {
-  margin-left: 4px;
-  padding-left: 12px;
-}
-.sidebar-top-level-items > li.active .badge.badge-pill {
-  font-weight: 600;
-}
-.sidebar-top-level-items
-  > li.active
-  .sidebar-sub-level-items:not(.is-fly-out-only) {
-  display: block;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  height: 48px;
-  padding: 0 16px;
-  background-color: #303030;
-  border: 0;
-  color: #999;
-  display: flex;
-  align-items: center;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  position: fixed;
-  bottom: 0;
-  width: 219px;
-  border-top: 1px solid #404040;
-}
-.toggle-sidebar-button svg,
-.close-nav-button svg {
-  margin-right: 8px;
-}
-.toggle-sidebar-button .icon-chevron-double-lg-right,
-.close-nav-button .icon-chevron-double-lg-right {
-  display: none;
-}
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: 60px;
-  width: 48px;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 10px 4px;
-}
-.sidebar-collapsed-desktop .sidebar-context-title {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  .sidebar-sub-level-items:not(.flyout-list) {
-  display: none;
-}
-.sidebar-collapsed-desktop .nav-icon-container {
-  margin-right: 0;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button {
-  padding: 16px;
-  width: 47px;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
-.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
-  display: none;
-}
-.sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-right {
-  display: block;
-  margin: 0;
-}
-.fly-out-top-item > a {
-  display: flex;
-}
-.fly-out-top-item .fly-out-badge {
-  margin-left: 8px;
-}
-.fly-out-top-item-name {
-  flex: 1;
-}
-.close-nav-button {
-  display: none;
-}
-@media (max-width: 767.98px) {
-  .close-nav-button {
-    display: flex;
-  }
-  .toggle-sidebar-button {
-    display: none;
-  }
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
-  box-shadow: none;
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  box-shadow: none;
-  border: 1px solid #404040;
-}
-body.sidebar-refactoring.gl-dark
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32 {
-  color: #333;
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar li a,
-body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
-body.sidebar-refactoring.gl-dark
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-left,
-body.sidebar-refactoring.gl-dark
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-right,
-body.sidebar-refactoring.gl-dark
-  .sidebar-top-level-items
-  .context-header
-  a
-  .sidebar-context-title,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .sidebar-context-title,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  color: #c4c4c4;
-}
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  margin-top: 0;
-}
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  background: #333;
-  color: #c4c4c4;
-}
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a::before,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a::before,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container::before {
-  border-right-color: #333;
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  background-color: #333;
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active
-  .nav-icon-container
-  svg {
-  fill: #2f2a6b;
-}
-body.sidebar-refactoring .nav-sidebar {
-  box-shadow: none;
-}
-body.sidebar-refactoring .nav-sidebar li.active {
-  background-color: transparent;
-  box-shadow: none !important;
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 48px;
-  }
-}
-@media (min-width: 1200px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 220px;
-  }
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-icon-sidebar {
-    padding-left: 48px;
-  }
-}
-body.sidebar-refactoring .nav-sidebar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 600;
-  width: 220px;
-  top: 40px;
-  background-color: #303030;
-  transform: translate3d(0, 0, 0);
-}
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
-  width: 48px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .nav-sidebar-inner-scroll {
-  overflow-x: hidden;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .badge.badge-pill:not(.fly-out-badge),
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  > a {
   min-height: unset;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item:not(.divider) {
+.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
   display: block !important;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .avatar-container {
+.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
   margin: 0 auto;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  li.active:not(.fly-out-top-item)
-  > a {
+.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar a {
+.nav-sidebar a {
   text-decoration: none;
-  color: #2f2a6b;
+  color: #fafafa;
 }
-body.sidebar-refactoring .nav-sidebar li {
+.nav-sidebar li {
   white-space: nowrap;
 }
-body.sidebar-refactoring .nav-sidebar li .nav-item-name {
+.nav-sidebar li .nav-item-name {
   flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a,
-body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
+.nav-sidebar li > a,
+.nav-sidebar li > .fly-out-top-item-container {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1468,49 +1018,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
   line-height: 1rem;
   margin: 1px 4px;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a {
+.nav-sidebar li.active > a {
   font-weight: 600;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a:not(.has-sub-items) {
+.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar ul {
+.nav-sidebar ul {
   padding-left: 0;
   list-style: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .nav-sidebar {
+  .nav-sidebar {
     left: -220px;
   }
 }
-body.sidebar-refactoring .nav-sidebar .nav-icon-container {
+.nav-sidebar .nav-icon-container {
   display: flex;
   margin-right: 8px;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1522,30 +1065,26 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #333;
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-top: 0;
   position: relative;
-  background-color: #fff;
+  color: #333;
+  background: var(--black, #fff);
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1553,20 +1092,17 @@ body.sidebar-refactoring
   strong {
   font-weight: 400;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1582,34 +1118,18 @@ body.sidebar-refactoring
   border-top: 0.25rem solid transparent;
   border-bottom: 0.25rem solid transparent;
   border-right: 0.25rem solid #fff;
+  border-right-color: var(--black, #fff);
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items {
-  margin-top: -0.25rem;
-}
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item {
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1621,30 +1141,21 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #333;
   margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 @media (min-width: 768px) and (max-width: 1199px) {
-  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-sidebar-inner-scroll {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
     overflow-x: hidden;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .badge.badge-pill:not(.fly-out-badge),
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-item-name,
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .collapse-text {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1655,44 +1166,28 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    > a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
     min-height: unset;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item:not(.divider) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
     display: block !important;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .avatar-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
     margin: 0 auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     li.active:not(.fly-out-top-item)
     > a {
     background-color: rgba(41, 41, 97, 0.08);
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: 60px;
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 10px 4px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-context-title {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1703,58 +1198,45 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 0.25rem;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .sidebar-top-level-items
     > li
     .sidebar-sub-level-items:not(.flyout-list) {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-icon-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
     margin-right: 0;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .collapse-text {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .icon-chevron-double-lg-left {
     transform: rotate(180deg);
-    display: block;
     margin: 0;
   }
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll {
+.nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
   overflow: auto;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
+.nav-sidebar-inner-scroll > div.context-header {
   margin-top: 0.25rem;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
+.nav-sidebar-inner-scroll > div.context-header a {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1769,78 +1251,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items {
+.sidebar-top-level-items {
   margin-top: 0.25rem;
   margin-bottom: 60px;
 }
-body.sidebar-refactoring .sidebar-top-level-items .context-header a {
+.sidebar-top-level-items .context-header a {
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container {
+.sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar {
+.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1849,29 +1299,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
   background-color: #064787;
   color: #9dc7f1;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   > li.active
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  > li.active
-  .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill {
   font-weight: 400;
   color: #9dc7f1;
 }
-body.sidebar-refactoring .sidebar-sub-level-items {
+.sidebar-sub-level-items {
   padding-top: 0;
   padding-bottom: 0;
   display: none;
 }
-body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
+.sidebar-sub-level-items:not(.fly-out-list) li > a {
   padding-left: 2.25rem;
 }
-body.sidebar-refactoring .toggle-sidebar-button,
-body.sidebar-refactoring .close-nav-button {
+.toggle-sidebar-button,
+.close-nav-button {
   height: 48px;
   padding: 0 16px;
   background-color: #303030;
@@ -1881,31 +1327,30 @@ body.sidebar-refactoring .close-nav-button {
   align-items: center;
   background-color: #303030;
   border-top: 1px solid #404040;
-  color: #2f2a6b;
   position: fixed;
   bottom: 0;
   width: 220px;
 }
-body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
-body.sidebar-refactoring .close-nav-button .collapse-text,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
+.toggle-sidebar-button .collapse-text,
+.toggle-sidebar-button .icon-chevron-double-lg-left,
+.toggle-sidebar-button .icon-chevron-double-lg-right,
+.close-nav-button .collapse-text,
+.close-nav-button .icon-chevron-double-lg-left,
+.close-nav-button .icon-chevron-double-lg-right {
   color: inherit;
 }
-body.sidebar-refactoring .collapse-text {
+.collapse-text {
   white-space: nowrap;
   overflow: hidden;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: 60px;
   width: 48px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 10px 4px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
+.sidebar-collapsed-desktop .sidebar-context-title {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -1916,47 +1361,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
   white-space: nowrap;
   width: 1px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: auto;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 0.25rem;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
+.sidebar-collapsed-desktop
   .sidebar-top-level-items
   > li
   .sidebar-sub-level-items:not(.flyout-list) {
   display: none;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
+.sidebar-collapsed-desktop .nav-icon-container {
   margin-right: 0;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
+.sidebar-collapsed-desktop .toggle-sidebar-button {
   width: 48px;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .collapse-text {
+.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
   display: none;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-left {
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
   transform: rotate(180deg);
-  display: block;
   margin: 0;
 }
-body.sidebar-refactoring .close-nav-button {
+.close-nav-button {
   display: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .close-nav-button {
+  .close-nav-button {
     display: flex;
   }
-  body.sidebar-refactoring .toggle-sidebar-button {
+  .toggle-sidebar-button {
     display: none;
   }
 }
@@ -2176,14 +1613,12 @@ svg.s16 {
   border-radius: 2px;
 }
 .rect-avatar.s32,
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32,
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
@@ -2263,17 +1698,14 @@ body.gl-dark .search .search-input-wrap .search-icon,
 body.gl-dark .search .search-input-wrap .clear-icon {
   fill: rgba(250, 250, 250, 0.8);
 }
-body.gl-dark .nav-sidebar li.active {
-  box-shadow: inset 4px 0 0 #999;
-}
 body.gl-dark .nav-sidebar li.active > a {
   color: #f0f0f0;
 }
-body.gl-dark .nav-sidebar li.active .nav-icon-container svg {
-  fill: #f0f0f0;
-}
-body.gl-dark .sidebar-top-level-items > li.active .badge.badge-pill {
-  color: #f0f0f0;
+body.gl-dark .nav-sidebar .fly-out-top-item a,
+body.gl-dark .nav-sidebar .fly-out-top-item.active a,
+body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
+  background-color: #2f2a6b;
+  color: #333;
 }
 body.gl-dark .logo-text svg {
   fill: var(--gl-text-color);
@@ -2373,6 +1805,9 @@ body.gl-dark {
   --black: #fff;
   --svg-status-bg: #333;
 }
+.nav-sidebar li.active {
+  box-shadow: none;
+}
 .tab-width-8 {
   -moz-tab-size: 8;
   tab-size: 8;

app/assets/stylesheets/startup/startup-general.scss

@@ -918,6 +918,7 @@ input {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
+  color: #303030;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -936,20 +937,14 @@ input {
 }
 .nav-sidebar {
   position: fixed;
+  bottom: 0;
+  left: 0;
   z-index: 600;
   width: 220px;
   top: 40px;
-  bottom: 0;
-  left: 0;
-  background-color: #fafafa;
-  box-shadow: inset -1px 0 0 #dbdbdb;
+  background-color: #f0f0f0;
   transform: translate3d(0, 0, 0);
 }
-@media (min-width: 576px) and (max-width: 576px) {
-  .nav-sidebar:not(.sidebar-collapsed-desktop) {
-    box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1);
-  }
-}
 .nav-sidebar.sidebar-collapsed-desktop {
   width: 48px;
 }
@@ -957,7 +952,8 @@ input {
   overflow-x: hidden;
 }
 .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
-.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
+.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
+.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -969,362 +965,29 @@ input {
   width: 1px;
 }
 .nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
-  min-height: 45px;
-}
-.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
-  display: block;
-}
-.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
-  margin: 0 auto;
-}
-.nav-sidebar a {
-  text-decoration: none;
-}
-.nav-sidebar ul {
-  padding-left: 0;
-  list-style: none;
-}
-.nav-sidebar li {
-  white-space: nowrap;
-}
-.nav-sidebar li a {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  color: #666;
-}
-.nav-sidebar li .nav-item-name {
-  flex: 1;
-}
-.nav-sidebar li.active > a {
-  font-weight: 600;
-}
-@media (max-width: 767.98px) {
-  .nav-sidebar {
-    left: -220px;
-  }
-}
-.nav-sidebar .nav-icon-container {
-  display: flex;
-  margin-right: 8px;
-}
-.nav-sidebar .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar svg {
-  height: 16px;
-  width: 16px;
-}
-@media (min-width: 768px) and (max-width: 1199px) {
-  .nav-sidebar:not(.sidebar-expanded-mobile) {
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .badge.badge-pill:not(.fly-out-badge),
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
-    min-height: 45px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
-    display: block;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
-    margin: 0 auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
-    height: 60px;
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 10px 4px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    .sidebar-sub-level-items:not(.flyout-list) {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
-    margin-right: 0;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
-    padding: 16px;
-    width: 47px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .collapse-text,
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-left {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-right {
-    display: block;
-    margin: 0;
-  }
-}
-.nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-.sidebar-sub-level-items {
-  display: none;
-  padding-bottom: 8px;
-}
-.sidebar-sub-level-items > li a {
-  padding: 8px 16px 8px 40px;
-}
-.sidebar-sub-level-items > li.active a {
-  background: rgba(0, 0, 0, 0.04);
-}
-.sidebar-top-level-items {
-  margin-bottom: 60px;
-}
-@media (min-width: 576px) {
-  .sidebar-top-level-items > li > a {
-    margin-right: 1px;
-  }
-}
-.sidebar-top-level-items > li .badge.badge-pill {
-  background-color: rgba(0, 0, 0, 0.08);
-  color: #666;
-}
-.sidebar-top-level-items > li.active {
-  background: rgba(0, 0, 0, 0.04);
-}
-.sidebar-top-level-items > li.active > a {
-  margin-left: 4px;
-  padding-left: 12px;
-}
-.sidebar-top-level-items > li.active .badge.badge-pill {
-  font-weight: 600;
-}
-.sidebar-top-level-items
-  > li.active
-  .sidebar-sub-level-items:not(.is-fly-out-only) {
-  display: block;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  height: 48px;
-  padding: 0 16px;
-  background-color: #fafafa;
-  border: 0;
-  color: #666;
-  display: flex;
-  align-items: center;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  position: fixed;
-  bottom: 0;
-  width: 219px;
-  border-top: 1px solid #dbdbdb;
-}
-.toggle-sidebar-button svg,
-.close-nav-button svg {
-  margin-right: 8px;
-}
-.toggle-sidebar-button .icon-chevron-double-lg-right,
-.close-nav-button .icon-chevron-double-lg-right {
-  display: none;
-}
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: 60px;
-  width: 48px;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 10px 4px;
-}
-.sidebar-collapsed-desktop .sidebar-context-title {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  .sidebar-sub-level-items:not(.flyout-list) {
-  display: none;
-}
-.sidebar-collapsed-desktop .nav-icon-container {
-  margin-right: 0;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button {
-  padding: 16px;
-  width: 47px;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
-.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
-  display: none;
-}
-.sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-right {
-  display: block;
-  margin: 0;
-}
-.fly-out-top-item > a {
-  display: flex;
-}
-.fly-out-top-item .fly-out-badge {
-  margin-left: 8px;
-}
-.fly-out-top-item-name {
-  flex: 1;
-}
-.close-nav-button {
-  display: none;
-}
-@media (max-width: 767.98px) {
-  .close-nav-button {
-    display: flex;
-  }
-  .toggle-sidebar-button {
-    display: none;
-  }
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active
-  .nav-icon-container
-  svg {
-  fill: #2f2a6b;
-}
-body.sidebar-refactoring .nav-sidebar {
-  box-shadow: none;
-}
-body.sidebar-refactoring .nav-sidebar li.active {
-  background-color: transparent;
-  box-shadow: none !important;
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 48px;
-  }
-}
-@media (min-width: 1200px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 220px;
-  }
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-icon-sidebar {
-    padding-left: 48px;
-  }
-}
-body.sidebar-refactoring .nav-sidebar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 600;
-  width: 220px;
-  top: 40px;
-  background-color: #f0f0f0;
-  transform: translate3d(0, 0, 0);
-}
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
-  width: 48px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .nav-sidebar-inner-scroll {
-  overflow-x: hidden;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .badge.badge-pill:not(.fly-out-badge),
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  > a {
   min-height: unset;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item:not(.divider) {
+.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
   display: block !important;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .avatar-container {
+.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
   margin: 0 auto;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  li.active:not(.fly-out-top-item)
-  > a {
+.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar a {
+.nav-sidebar a {
   text-decoration: none;
-  color: #2f2a6b;
+  color: #303030;
 }
-body.sidebar-refactoring .nav-sidebar li {
+.nav-sidebar li {
   white-space: nowrap;
 }
-body.sidebar-refactoring .nav-sidebar li .nav-item-name {
+.nav-sidebar li .nav-item-name {
   flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a,
-body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
+.nav-sidebar li > a,
+.nav-sidebar li > .fly-out-top-item-container {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1336,49 +999,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
   line-height: 1rem;
   margin: 1px 4px;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a {
+.nav-sidebar li.active > a {
   font-weight: 600;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a:not(.has-sub-items) {
+.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar ul {
+.nav-sidebar ul {
   padding-left: 0;
   list-style: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .nav-sidebar {
+  .nav-sidebar {
     left: -220px;
   }
 }
-body.sidebar-refactoring .nav-sidebar .nav-icon-container {
+.nav-sidebar .nav-icon-container {
   display: flex;
   margin-right: 8px;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1390,30 +1046,26 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #fff;
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-top: 0;
   position: relative;
-  background-color: #000;
+  color: #fff;
+  background: var(--black, #000);
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1421,20 +1073,17 @@ body.sidebar-refactoring
   strong {
   font-weight: 400;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1450,34 +1099,18 @@ body.sidebar-refactoring
   border-top: 0.25rem solid transparent;
   border-bottom: 0.25rem solid transparent;
   border-right: 0.25rem solid #000;
+  border-right-color: var(--black, #000);
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items {
-  margin-top: -0.25rem;
-}
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item {
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1489,30 +1122,21 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #fff;
   margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 @media (min-width: 768px) and (max-width: 1199px) {
-  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-sidebar-inner-scroll {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
     overflow-x: hidden;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .badge.badge-pill:not(.fly-out-badge),
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-item-name,
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .collapse-text {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1523,44 +1147,28 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    > a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
     min-height: unset;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item:not(.divider) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
     display: block !important;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .avatar-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
     margin: 0 auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     li.active:not(.fly-out-top-item)
     > a {
     background-color: rgba(41, 41, 97, 0.08);
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: 60px;
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 10px 4px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-context-title {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1571,58 +1179,45 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 0.25rem;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .sidebar-top-level-items
     > li
     .sidebar-sub-level-items:not(.flyout-list) {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-icon-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
     margin-right: 0;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .collapse-text {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .icon-chevron-double-lg-left {
     transform: rotate(180deg);
-    display: block;
     margin: 0;
   }
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll {
+.nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
   overflow: auto;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
+.nav-sidebar-inner-scroll > div.context-header {
   margin-top: 0.25rem;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
+.nav-sidebar-inner-scroll > div.context-header a {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1637,78 +1232,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items {
+.sidebar-top-level-items {
   margin-top: 0.25rem;
   margin-bottom: 60px;
 }
-body.sidebar-refactoring .sidebar-top-level-items .context-header a {
+.sidebar-top-level-items .context-header a {
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container {
+.sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar {
+.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1717,29 +1280,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
   background-color: #cbe2f9;
   color: #0b5cad;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   > li.active
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  > li.active
-  .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill {
   font-weight: 400;
   color: #0b5cad;
 }
-body.sidebar-refactoring .sidebar-sub-level-items {
+.sidebar-sub-level-items {
   padding-top: 0;
   padding-bottom: 0;
   display: none;
 }
-body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
+.sidebar-sub-level-items:not(.fly-out-list) li > a {
   padding-left: 2.25rem;
 }
-body.sidebar-refactoring .toggle-sidebar-button,
-body.sidebar-refactoring .close-nav-button {
+.toggle-sidebar-button,
+.close-nav-button {
   height: 48px;
   padding: 0 16px;
   background-color: #fafafa;
@@ -1749,31 +1308,30 @@ body.sidebar-refactoring .close-nav-button {
   align-items: center;
   background-color: #f0f0f0;
   border-top: 1px solid #dbdbdb;
-  color: #2f2a6b;
   position: fixed;
   bottom: 0;
   width: 220px;
 }
-body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
-body.sidebar-refactoring .close-nav-button .collapse-text,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
+.toggle-sidebar-button .collapse-text,
+.toggle-sidebar-button .icon-chevron-double-lg-left,
+.toggle-sidebar-button .icon-chevron-double-lg-right,
+.close-nav-button .collapse-text,
+.close-nav-button .icon-chevron-double-lg-left,
+.close-nav-button .icon-chevron-double-lg-right {
   color: inherit;
 }
-body.sidebar-refactoring .collapse-text {
+.collapse-text {
   white-space: nowrap;
   overflow: hidden;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: 60px;
   width: 48px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 10px 4px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
+.sidebar-collapsed-desktop .sidebar-context-title {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -1784,47 +1342,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
   white-space: nowrap;
   width: 1px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: auto;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 0.25rem;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
+.sidebar-collapsed-desktop
   .sidebar-top-level-items
   > li
   .sidebar-sub-level-items:not(.flyout-list) {
   display: none;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
+.sidebar-collapsed-desktop .nav-icon-container {
   margin-right: 0;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
+.sidebar-collapsed-desktop .toggle-sidebar-button {
   width: 48px;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .collapse-text {
+.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
   display: none;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-left {
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
   transform: rotate(180deg);
-  display: block;
   margin: 0;
 }
-body.sidebar-refactoring .close-nav-button {
+.close-nav-button {
   display: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .close-nav-button {
+  .close-nav-button {
     display: flex;
   }
-  body.sidebar-refactoring .toggle-sidebar-button {
+  .toggle-sidebar-button {
     display: none;
   }
 }
@@ -2044,14 +1594,12 @@ svg.s16 {
   border-radius: 2px;
 }
 .rect-avatar.s32,
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32,
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar

app/assets/stylesheets/themes/_dark.scss

@@ -253,3 +253,14 @@ $well-inner-border: $gray-200;
   color: $gray-900;
   border-color: $gray-800;
 }
+
+.nav-sidebar {
+  li.active {
+    box-shadow: none;
+  }
+
+  .sidebar-sub-level-items.fly-out-list {
+    box-shadow: none;
+    border: 1px solid $border-color;
+  }
+}

app/assets/stylesheets/themes/theme_helper.scss

@@ -174,20 +174,20 @@
   }
 
   // Sidebar
-  .nav-sidebar li.active {
-    box-shadow: inset 4px 0 0 $border-and-box-shadow;
-
-    > a {
-      color: $sidebar-text;
-    }
-
-    .nav-icon-container svg {
-      fill: $sidebar-text;
-    }
+  .nav-sidebar li.active > a {
+    color: $sidebar-text;
   }
 
-  .sidebar-top-level-items > li.active .badge.badge-pill {
-    color: $sidebar-text;
+  .nav-sidebar {
+    .fly-out-top-item {
+      a,
+      a:hover,
+      &.active a,
+      .fly-out-top-item-container {
+        background-color: $purple-900;
+        color: $white;
+      }
+    }
   }
 
   .nav-links li {
@@ -213,7 +213,6 @@
   .ide-sidebar-link {
     &.active {
       color: $border-and-box-shadow;
-      box-shadow: inset 3px 0 $border-and-box-shadow;
 
       &.is-right {
         box-shadow: inset -3px 0 $border-and-box-shadow;

app/assets/stylesheets/themes/theme_indigo.scss

@@ -6,7 +6,7 @@ body {
       $indigo-200,
       $indigo-500,
       $indigo-700,
-      $indigo-800,
+      $purple-900,
       $indigo-900,
       $white
     );

app/views/layouts/application.html.haml

 - page_classes = page_class << @html_class
 - page_classes = page_classes.flatten.compact
 - body_classes = [user_application_theme, user_tab_width, @body_class, client_class_list]
-- body_classes << 'sidebar-refactoring' if sidebar_refactor_enabled?
 
 !!! 5
 %html{ lang: I18n.locale, class: page_classes }

app/views/projects/security/configuration/show.html.haml

 - breadcrumb_title _("Security Configuration")
 - page_title _("Security Configuration")
-- redesign_enabled = ::Feature.enabled?(:security_configuration_redesign, default_enabled: :yaml)
+- redesign_enabled = ::Feature.enabled?(:security_configuration_redesign, @project, default_enabled: :yaml)
 - @content_class = "limit-container-width" unless fluid_layout || !redesign_enabled
 
 #js-security-configuration-static{ data: { project_path: @project.full_path, upgrade_path: security_upgrade_path } }

config/feature_flags/development/security_configuration_redesign_ee.yml

+---
+name: security_configuration_redesign_ee
+introduced_by_url:
+rollout_issue_url:
+milestone: '14.1'
+type: development
+group: group::analyzer frontend
+default_enabled: false

doc/user/application_security/configuration/index.md

@@ -28,10 +28,15 @@ For each security control the page displays:
 ## UI redesign
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/326926) in 14.0 for GitLab Free and Premium, behind a feature flag, disabled by default.
-> - Enabled on GitLab.com.
+> - Enabled on GitLab.com for Free & Premium.
 > - Recommended for production use.
 > - It can be enabled or disabled for a single project.
 > - To use in GitLab self-managed instances, ask a GitLab administrator to [enable it](#enable-or-disable-ui-redesign). **(FREE SELF)**
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/333109) in 14.1 for GitLab Ultimate, behind a feature flag, disabled by default.
+> - Disabled on GitLab.com.
+> - Not recommended for production use.
+> - It can be enabled or disabled for a single project.
+> - To use in GitLab self-managed instances, ask a GitLab administrator to [enable it](#enable-or-disable-ui-redesign-for-ultimate). **(ULTIMATE SELF)**
 
 WARNING:
 This feature might not be available to you. Check the **version history** note above for details.
@@ -98,3 +103,28 @@ Feature.disable(:security_configuration_redesign)
 # For a single project
 Feature.disable(:security_configuration_redesign, Project.find(<project id>))
 ```
+
+## Enable or disable UI redesign for Ultimate **(ULTIMATE SELF)**
+
+The Security Configuration redesign is under development, and is not ready for
+production use. It is deployed behind a feature flag that is **disabled by
+default**.
+[GitLab administrators with access to the GitLab Rails console](../../../administration/feature_flags.md) can enable it.
+
+To enable it:
+
+```ruby
+# For the instance
+Feature.enable(:security_configuration_redesign_ee)
+# For a single project
+Feature.enable(:security_configuration_redesign_ee, Project.find(<project id>))
+```
+
+To disable it:
+
+```ruby
+# For the instance
+Feature.disable(:security_configuration_redesign_ee)
+# For a single project
+Feature.disable(:security_configuration_redesign_ee, Project.find(<project id>))
+```

ee/app/assets/javascripts/pages/projects/security/configuration/index.js

 import { initSecurityConfiguration } from 'ee/security_configuration';
-import { initStaticSecurityConfiguration } from '~/security_configuration';
+import { initCESecurityConfiguration } from '~/security_configuration';
 
 const el = document.querySelector('#js-security-configuration');
 
 if (el) {
   initSecurityConfiguration(el);
 } else {
-  initStaticSecurityConfiguration(document.querySelector('#js-security-configuration-static'));
+  initCESecurityConfiguration(document.querySelector('#js-security-configuration-static'));
 }

ee/app/assets/javascripts/security_configuration/index.js

 import Vue from 'vue';
 import { parseBooleanDataAttributes } from '~/lib/utils/dom_utils';
+import { initRedesignedSecurityConfiguration } from '~/security_configuration';
 import SecurityConfigurationApp from './components/app.vue';
 
 export const initSecurityConfiguration = (el) => {
@@ -7,6 +8,10 @@ export const initSecurityConfiguration = (el) => {
     return null;
   }
 
+  if (gon.features?.securityConfigurationRedesignEE) {
+    return initRedesignedSecurityConfiguration(el);
+  }
+
   const {
     autoDevopsHelpPagePath,
     autoDevopsPath,

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -13,6 +13,10 @@ body.gl-dark {
   --orange-400: #ab6100;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
+  --black: #fff;
+}
+.nav-sidebar li.active {
+  box-shadow: none;
 }
 :root {
   --white: #333;
@@ -933,6 +937,7 @@ input {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
+  color: #fafafa;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -951,20 +956,14 @@ input {
 }
 .nav-sidebar {
   position: fixed;
+  bottom: 0;
+  left: 0;
   z-index: 600;
   width: 220px;
   top: 40px;
-  bottom: 0;
-  left: 0;
   background-color: #303030;
-  box-shadow: inset -1px 0 0 #404040;
   transform: translate3d(0, 0, 0);
 }
-@media (min-width: 576px) and (max-width: 576px) {
-  .nav-sidebar:not(.sidebar-collapsed-desktop) {
-    box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1);
-  }
-}
 .nav-sidebar.sidebar-collapsed-desktop {
   width: 48px;
 }
@@ -972,7 +971,8 @@ input {
   overflow-x: hidden;
 }
 .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
-.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
+.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
+.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -984,479 +984,29 @@ input {
   width: 1px;
 }
 .nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
-  min-height: 45px;
-}
-.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
-  display: block;
-}
-.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
-  margin: 0 auto;
-}
-.nav-sidebar a {
-  text-decoration: none;
-}
-.nav-sidebar ul {
-  padding-left: 0;
-  list-style: none;
-}
-.nav-sidebar li {
-  white-space: nowrap;
-}
-.nav-sidebar li a {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  color: #999;
-}
-.nav-sidebar li .nav-item-name {
-  flex: 1;
-}
-.nav-sidebar li.active > a {
-  font-weight: 600;
-}
-@media (max-width: 767.98px) {
-  .nav-sidebar {
-    left: -220px;
-  }
-}
-.nav-sidebar .nav-icon-container {
-  display: flex;
-  margin-right: 8px;
-}
-.nav-sidebar .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar svg {
-  height: 16px;
-  width: 16px;
-}
-@media (min-width: 768px) and (max-width: 1199px) {
-  .nav-sidebar:not(.sidebar-expanded-mobile) {
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .badge.badge-pill:not(.fly-out-badge),
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
-    min-height: 45px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
-    display: block;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
-    margin: 0 auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
-    height: 60px;
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 10px 4px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    .sidebar-sub-level-items:not(.flyout-list) {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
-    margin-right: 0;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
-    padding: 16px;
-    width: 47px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .collapse-text,
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-left {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-right {
-    display: block;
-    margin: 0;
-  }
-}
-.nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-.sidebar-sub-level-items {
-  display: none;
-  padding-bottom: 8px;
-}
-.sidebar-sub-level-items > li a {
-  padding: 8px 16px 8px 40px;
-}
-.sidebar-sub-level-items > li.active a {
-  background: rgba(255, 255, 255, 0.04);
-}
-.sidebar-top-level-items {
-  margin-bottom: 60px;
-}
-@media (min-width: 576px) {
-  .sidebar-top-level-items > li > a {
-    margin-right: 1px;
-  }
-}
-.sidebar-top-level-items > li .badge.badge-pill {
-  background-color: rgba(255, 255, 255, 0.08);
-  color: #999;
-}
-.sidebar-top-level-items > li.active {
-  background: rgba(255, 255, 255, 0.04);
-}
-.sidebar-top-level-items > li.active > a {
-  margin-left: 4px;
-  padding-left: 12px;
-}
-.sidebar-top-level-items > li.active .badge.badge-pill {
-  font-weight: 600;
-}
-.sidebar-top-level-items
-  > li.active
-  .sidebar-sub-level-items:not(.is-fly-out-only) {
-  display: block;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  height: 48px;
-  padding: 0 16px;
-  background-color: #303030;
-  border: 0;
-  color: #999;
-  display: flex;
-  align-items: center;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  position: fixed;
-  bottom: 0;
-  width: 219px;
-  border-top: 1px solid #404040;
-}
-.toggle-sidebar-button svg,
-.close-nav-button svg {
-  margin-right: 8px;
-}
-.toggle-sidebar-button .icon-chevron-double-lg-right,
-.close-nav-button .icon-chevron-double-lg-right {
-  display: none;
-}
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: 60px;
-  width: 48px;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 10px 4px;
-}
-.sidebar-collapsed-desktop .sidebar-context-title {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  .sidebar-sub-level-items:not(.flyout-list) {
-  display: none;
-}
-.sidebar-collapsed-desktop .nav-icon-container {
-  margin-right: 0;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button {
-  padding: 16px;
-  width: 47px;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
-.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
-  display: none;
-}
-.sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-right {
-  display: block;
-  margin: 0;
-}
-.fly-out-top-item > a {
-  display: flex;
-}
-.fly-out-top-item .fly-out-badge {
-  margin-left: 8px;
-}
-.fly-out-top-item-name {
-  flex: 1;
-}
-.close-nav-button {
-  display: none;
-}
-@media (max-width: 767.98px) {
-  .close-nav-button {
-    display: flex;
-  }
-  .toggle-sidebar-button {
-    display: none;
-  }
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
-  box-shadow: none;
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  box-shadow: none;
-  border: 1px solid #404040;
-}
-body.sidebar-refactoring.gl-dark
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32 {
-  color: #333;
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar li a,
-body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
-body.sidebar-refactoring.gl-dark
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-left,
-body.sidebar-refactoring.gl-dark
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-right,
-body.sidebar-refactoring.gl-dark
-  .sidebar-top-level-items
-  .context-header
-  a
-  .sidebar-context-title,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .sidebar-context-title,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  color: #c4c4c4;
-}
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  margin-top: 0;
-}
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  background: #333;
-  color: #c4c4c4;
-}
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a::before,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a::before,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container::before {
-  border-right-color: #333;
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  background-color: #333;
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active
-  .nav-icon-container
-  svg {
-  fill: #2f2a6b;
-}
-body.sidebar-refactoring .nav-sidebar {
-  box-shadow: none;
-}
-body.sidebar-refactoring .nav-sidebar li.active {
-  background-color: transparent;
-  box-shadow: none !important;
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 48px;
-  }
-}
-@media (min-width: 1200px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 220px;
-  }
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-icon-sidebar {
-    padding-left: 48px;
-  }
-}
-body.sidebar-refactoring .nav-sidebar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 600;
-  width: 220px;
-  top: 40px;
-  background-color: #303030;
-  transform: translate3d(0, 0, 0);
-}
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
-  width: 48px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .nav-sidebar-inner-scroll {
-  overflow-x: hidden;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .badge.badge-pill:not(.fly-out-badge),
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  > a {
   min-height: unset;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item:not(.divider) {
+.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
   display: block !important;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .avatar-container {
+.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
   margin: 0 auto;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  li.active:not(.fly-out-top-item)
-  > a {
+.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar a {
+.nav-sidebar a {
   text-decoration: none;
-  color: #2f2a6b;
+  color: #fafafa;
 }
-body.sidebar-refactoring .nav-sidebar li {
+.nav-sidebar li {
   white-space: nowrap;
 }
-body.sidebar-refactoring .nav-sidebar li .nav-item-name {
+.nav-sidebar li .nav-item-name {
   flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a,
-body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
+.nav-sidebar li > a,
+.nav-sidebar li > .fly-out-top-item-container {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1468,49 +1018,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
   line-height: 1rem;
   margin: 1px 4px;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a {
+.nav-sidebar li.active > a {
   font-weight: 600;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a:not(.has-sub-items) {
+.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar ul {
+.nav-sidebar ul {
   padding-left: 0;
   list-style: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .nav-sidebar {
+  .nav-sidebar {
     left: -220px;
   }
 }
-body.sidebar-refactoring .nav-sidebar .nav-icon-container {
+.nav-sidebar .nav-icon-container {
   display: flex;
   margin-right: 8px;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1522,30 +1065,26 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #333;
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-top: 0;
   position: relative;
-  background-color: #fff;
+  color: #333;
+  background: var(--black, #fff);
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1553,20 +1092,17 @@ body.sidebar-refactoring
   strong {
   font-weight: 400;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1582,34 +1118,18 @@ body.sidebar-refactoring
   border-top: 0.25rem solid transparent;
   border-bottom: 0.25rem solid transparent;
   border-right: 0.25rem solid #fff;
+  border-right-color: var(--black, #fff);
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items {
-  margin-top: -0.25rem;
-}
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item {
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1621,30 +1141,21 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #333;
   margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 @media (min-width: 768px) and (max-width: 1199px) {
-  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-sidebar-inner-scroll {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
     overflow-x: hidden;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .badge.badge-pill:not(.fly-out-badge),
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-item-name,
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .collapse-text {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1655,44 +1166,28 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    > a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
     min-height: unset;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item:not(.divider) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
     display: block !important;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .avatar-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
     margin: 0 auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     li.active:not(.fly-out-top-item)
     > a {
     background-color: rgba(41, 41, 97, 0.08);
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: 60px;
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 10px 4px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-context-title {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1703,58 +1198,45 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 0.25rem;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .sidebar-top-level-items
     > li
     .sidebar-sub-level-items:not(.flyout-list) {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-icon-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
     margin-right: 0;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .collapse-text {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .icon-chevron-double-lg-left {
     transform: rotate(180deg);
-    display: block;
     margin: 0;
   }
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll {
+.nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
   overflow: auto;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
+.nav-sidebar-inner-scroll > div.context-header {
   margin-top: 0.25rem;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
+.nav-sidebar-inner-scroll > div.context-header a {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1769,78 +1251,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items {
+.sidebar-top-level-items {
   margin-top: 0.25rem;
   margin-bottom: 60px;
 }
-body.sidebar-refactoring .sidebar-top-level-items .context-header a {
+.sidebar-top-level-items .context-header a {
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container {
+.sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar {
+.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1849,29 +1299,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
   background-color: #064787;
   color: #9dc7f1;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   > li.active
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  > li.active
-  .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill {
   font-weight: 400;
   color: #9dc7f1;
 }
-body.sidebar-refactoring .sidebar-sub-level-items {
+.sidebar-sub-level-items {
   padding-top: 0;
   padding-bottom: 0;
   display: none;
 }
-body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
+.sidebar-sub-level-items:not(.fly-out-list) li > a {
   padding-left: 2.25rem;
 }
-body.sidebar-refactoring .toggle-sidebar-button,
-body.sidebar-refactoring .close-nav-button {
+.toggle-sidebar-button,
+.close-nav-button {
   height: 48px;
   padding: 0 16px;
   background-color: #303030;
@@ -1881,31 +1327,30 @@ body.sidebar-refactoring .close-nav-button {
   align-items: center;
   background-color: #303030;
   border-top: 1px solid #404040;
-  color: #2f2a6b;
   position: fixed;
   bottom: 0;
   width: 220px;
 }
-body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
-body.sidebar-refactoring .close-nav-button .collapse-text,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
+.toggle-sidebar-button .collapse-text,
+.toggle-sidebar-button .icon-chevron-double-lg-left,
+.toggle-sidebar-button .icon-chevron-double-lg-right,
+.close-nav-button .collapse-text,
+.close-nav-button .icon-chevron-double-lg-left,
+.close-nav-button .icon-chevron-double-lg-right {
   color: inherit;
 }
-body.sidebar-refactoring .collapse-text {
+.collapse-text {
   white-space: nowrap;
   overflow: hidden;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: 60px;
   width: 48px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 10px 4px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
+.sidebar-collapsed-desktop .sidebar-context-title {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -1916,47 +1361,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
   white-space: nowrap;
   width: 1px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: auto;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 0.25rem;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
+.sidebar-collapsed-desktop
   .sidebar-top-level-items
   > li
   .sidebar-sub-level-items:not(.flyout-list) {
   display: none;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
+.sidebar-collapsed-desktop .nav-icon-container {
   margin-right: 0;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
+.sidebar-collapsed-desktop .toggle-sidebar-button {
   width: 48px;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .collapse-text {
+.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
   display: none;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-left {
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
   transform: rotate(180deg);
-  display: block;
   margin: 0;
 }
-body.sidebar-refactoring .close-nav-button {
+.close-nav-button {
   display: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .close-nav-button {
+  .close-nav-button {
     display: flex;
   }
-  body.sidebar-refactoring .toggle-sidebar-button {
+  .toggle-sidebar-button {
     display: none;
   }
 }
@@ -2176,14 +1613,12 @@ svg.s16 {
   border-radius: 2px;
 }
 .rect-avatar.s32,
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32,
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
@@ -2263,17 +1698,14 @@ body.gl-dark .search .search-input-wrap .search-icon,
 body.gl-dark .search .search-input-wrap .clear-icon {
   fill: rgba(250, 250, 250, 0.8);
 }
-body.gl-dark .nav-sidebar li.active {
-  box-shadow: inset 4px 0 0 #999;
-}
 body.gl-dark .nav-sidebar li.active > a {
   color: #f0f0f0;
 }
-body.gl-dark .nav-sidebar li.active .nav-icon-container svg {
-  fill: #f0f0f0;
-}
-body.gl-dark .sidebar-top-level-items > li.active .badge.badge-pill {
-  color: #f0f0f0;
+body.gl-dark .nav-sidebar .fly-out-top-item a,
+body.gl-dark .nav-sidebar .fly-out-top-item.active a,
+body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
+  background-color: #2f2a6b;
+  color: #333;
 }
 body.gl-dark .logo-text svg {
   fill: var(--gl-text-color);
@@ -2373,6 +1805,9 @@ body.gl-dark {
   --black: #fff;
   --svg-status-bg: #333;
 }
+.nav-sidebar li.active {
+  box-shadow: none;
+}
 .tab-width-8 {
   -moz-tab-size: 8;
   tab-size: 8;

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -918,6 +918,7 @@ input {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
+  color: #303030;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -936,20 +937,14 @@ input {
 }
 .nav-sidebar {
   position: fixed;
+  bottom: 0;
+  left: 0;
   z-index: 600;
   width: 220px;
   top: 40px;
-  bottom: 0;
-  left: 0;
-  background-color: #fafafa;
-  box-shadow: inset -1px 0 0 #dbdbdb;
+  background-color: #f0f0f0;
   transform: translate3d(0, 0, 0);
 }
-@media (min-width: 576px) and (max-width: 576px) {
-  .nav-sidebar:not(.sidebar-collapsed-desktop) {
-    box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1);
-  }
-}
 .nav-sidebar.sidebar-collapsed-desktop {
   width: 48px;
 }
@@ -957,7 +952,8 @@ input {
   overflow-x: hidden;
 }
 .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
-.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
+.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
+.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -969,362 +965,29 @@ input {
   width: 1px;
 }
 .nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
-  min-height: 45px;
-}
-.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
-  display: block;
-}
-.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
-  margin: 0 auto;
-}
-.nav-sidebar a {
-  text-decoration: none;
-}
-.nav-sidebar ul {
-  padding-left: 0;
-  list-style: none;
-}
-.nav-sidebar li {
-  white-space: nowrap;
-}
-.nav-sidebar li a {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  color: #666;
-}
-.nav-sidebar li .nav-item-name {
-  flex: 1;
-}
-.nav-sidebar li.active > a {
-  font-weight: 600;
-}
-@media (max-width: 767.98px) {
-  .nav-sidebar {
-    left: -220px;
-  }
-}
-.nav-sidebar .nav-icon-container {
-  display: flex;
-  margin-right: 8px;
-}
-.nav-sidebar .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar svg {
-  height: 16px;
-  width: 16px;
-}
-@media (min-width: 768px) and (max-width: 1199px) {
-  .nav-sidebar:not(.sidebar-expanded-mobile) {
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .badge.badge-pill:not(.fly-out-badge),
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
-    min-height: 45px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
-    display: block;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
-    margin: 0 auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
-    height: 60px;
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 10px 4px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    .sidebar-sub-level-items:not(.flyout-list) {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
-    margin-right: 0;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
-    padding: 16px;
-    width: 47px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .collapse-text,
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-left {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-right {
-    display: block;
-    margin: 0;
-  }
-}
-.nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-.sidebar-sub-level-items {
-  display: none;
-  padding-bottom: 8px;
-}
-.sidebar-sub-level-items > li a {
-  padding: 8px 16px 8px 40px;
-}
-.sidebar-sub-level-items > li.active a {
-  background: rgba(0, 0, 0, 0.04);
-}
-.sidebar-top-level-items {
-  margin-bottom: 60px;
-}
-@media (min-width: 576px) {
-  .sidebar-top-level-items > li > a {
-    margin-right: 1px;
-  }
-}
-.sidebar-top-level-items > li .badge.badge-pill {
-  background-color: rgba(0, 0, 0, 0.08);
-  color: #666;
-}
-.sidebar-top-level-items > li.active {
-  background: rgba(0, 0, 0, 0.04);
-}
-.sidebar-top-level-items > li.active > a {
-  margin-left: 4px;
-  padding-left: 12px;
-}
-.sidebar-top-level-items > li.active .badge.badge-pill {
-  font-weight: 600;
-}
-.sidebar-top-level-items
-  > li.active
-  .sidebar-sub-level-items:not(.is-fly-out-only) {
-  display: block;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  height: 48px;
-  padding: 0 16px;
-  background-color: #fafafa;
-  border: 0;
-  color: #666;
-  display: flex;
-  align-items: center;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  position: fixed;
-  bottom: 0;
-  width: 219px;
-  border-top: 1px solid #dbdbdb;
-}
-.toggle-sidebar-button svg,
-.close-nav-button svg {
-  margin-right: 8px;
-}
-.toggle-sidebar-button .icon-chevron-double-lg-right,
-.close-nav-button .icon-chevron-double-lg-right {
-  display: none;
-}
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: 60px;
-  width: 48px;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 10px 4px;
-}
-.sidebar-collapsed-desktop .sidebar-context-title {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  .sidebar-sub-level-items:not(.flyout-list) {
-  display: none;
-}
-.sidebar-collapsed-desktop .nav-icon-container {
-  margin-right: 0;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button {
-  padding: 16px;
-  width: 47px;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
-.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
-  display: none;
-}
-.sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-right {
-  display: block;
-  margin: 0;
-}
-.fly-out-top-item > a {
-  display: flex;
-}
-.fly-out-top-item .fly-out-badge {
-  margin-left: 8px;
-}
-.fly-out-top-item-name {
-  flex: 1;
-}
-.close-nav-button {
-  display: none;
-}
-@media (max-width: 767.98px) {
-  .close-nav-button {
-    display: flex;
-  }
-  .toggle-sidebar-button {
-    display: none;
-  }
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active
-  .nav-icon-container
-  svg {
-  fill: #2f2a6b;
-}
-body.sidebar-refactoring .nav-sidebar {
-  box-shadow: none;
-}
-body.sidebar-refactoring .nav-sidebar li.active {
-  background-color: transparent;
-  box-shadow: none !important;
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 48px;
-  }
-}
-@media (min-width: 1200px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 220px;
-  }
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-icon-sidebar {
-    padding-left: 48px;
-  }
-}
-body.sidebar-refactoring .nav-sidebar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 600;
-  width: 220px;
-  top: 40px;
-  background-color: #f0f0f0;
-  transform: translate3d(0, 0, 0);
-}
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
-  width: 48px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .nav-sidebar-inner-scroll {
-  overflow-x: hidden;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .badge.badge-pill:not(.fly-out-badge),
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  > a {
   min-height: unset;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item:not(.divider) {
+.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
   display: block !important;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .avatar-container {
+.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
   margin: 0 auto;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  li.active:not(.fly-out-top-item)
-  > a {
+.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar a {
+.nav-sidebar a {
   text-decoration: none;
-  color: #2f2a6b;
+  color: #303030;
 }
-body.sidebar-refactoring .nav-sidebar li {
+.nav-sidebar li {
   white-space: nowrap;
 }
-body.sidebar-refactoring .nav-sidebar li .nav-item-name {
+.nav-sidebar li .nav-item-name {
   flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a,
-body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
+.nav-sidebar li > a,
+.nav-sidebar li > .fly-out-top-item-container {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1336,49 +999,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
   line-height: 1rem;
   margin: 1px 4px;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a {
+.nav-sidebar li.active > a {
   font-weight: 600;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a:not(.has-sub-items) {
+.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar ul {
+.nav-sidebar ul {
   padding-left: 0;
   list-style: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .nav-sidebar {
+  .nav-sidebar {
     left: -220px;
   }
 }
-body.sidebar-refactoring .nav-sidebar .nav-icon-container {
+.nav-sidebar .nav-icon-container {
   display: flex;
   margin-right: 8px;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1390,30 +1046,26 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #fff;
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-top: 0;
   position: relative;
-  background-color: #000;
+  color: #fff;
+  background: var(--black, #000);
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1421,20 +1073,17 @@ body.sidebar-refactoring
   strong {
   font-weight: 400;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1450,34 +1099,18 @@ body.sidebar-refactoring
   border-top: 0.25rem solid transparent;
   border-bottom: 0.25rem solid transparent;
   border-right: 0.25rem solid #000;
+  border-right-color: var(--black, #000);
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items {
-  margin-top: -0.25rem;
-}
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item {
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1489,30 +1122,21 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #fff;
   margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 @media (min-width: 768px) and (max-width: 1199px) {
-  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-sidebar-inner-scroll {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
     overflow-x: hidden;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .badge.badge-pill:not(.fly-out-badge),
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-item-name,
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .collapse-text {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1523,44 +1147,28 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    > a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
     min-height: unset;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item:not(.divider) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
     display: block !important;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .avatar-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
     margin: 0 auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     li.active:not(.fly-out-top-item)
     > a {
     background-color: rgba(41, 41, 97, 0.08);
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: 60px;
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 10px 4px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-context-title {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1571,58 +1179,45 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 0.25rem;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .sidebar-top-level-items
     > li
     .sidebar-sub-level-items:not(.flyout-list) {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-icon-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
     margin-right: 0;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .collapse-text {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .icon-chevron-double-lg-left {
     transform: rotate(180deg);
-    display: block;
     margin: 0;
   }
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll {
+.nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
   overflow: auto;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
+.nav-sidebar-inner-scroll > div.context-header {
   margin-top: 0.25rem;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
+.nav-sidebar-inner-scroll > div.context-header a {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1637,78 +1232,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items {
+.sidebar-top-level-items {
   margin-top: 0.25rem;
   margin-bottom: 60px;
 }
-body.sidebar-refactoring .sidebar-top-level-items .context-header a {
+.sidebar-top-level-items .context-header a {
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container {
+.sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar {
+.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1717,29 +1280,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
   background-color: #cbe2f9;
   color: #0b5cad;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   > li.active
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  > li.active
-  .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill {
   font-weight: 400;
   color: #0b5cad;
 }
-body.sidebar-refactoring .sidebar-sub-level-items {
+.sidebar-sub-level-items {
   padding-top: 0;
   padding-bottom: 0;
   display: none;
 }
-body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
+.sidebar-sub-level-items:not(.fly-out-list) li > a {
   padding-left: 2.25rem;
 }
-body.sidebar-refactoring .toggle-sidebar-button,
-body.sidebar-refactoring .close-nav-button {
+.toggle-sidebar-button,
+.close-nav-button {
   height: 48px;
   padding: 0 16px;
   background-color: #fafafa;
@@ -1749,31 +1308,30 @@ body.sidebar-refactoring .close-nav-button {
   align-items: center;
   background-color: #f0f0f0;
   border-top: 1px solid #dbdbdb;
-  color: #2f2a6b;
   position: fixed;
   bottom: 0;
   width: 220px;
 }
-body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
-body.sidebar-refactoring .close-nav-button .collapse-text,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
+.toggle-sidebar-button .collapse-text,
+.toggle-sidebar-button .icon-chevron-double-lg-left,
+.toggle-sidebar-button .icon-chevron-double-lg-right,
+.close-nav-button .collapse-text,
+.close-nav-button .icon-chevron-double-lg-left,
+.close-nav-button .icon-chevron-double-lg-right {
   color: inherit;
 }
-body.sidebar-refactoring .collapse-text {
+.collapse-text {
   white-space: nowrap;
   overflow: hidden;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: 60px;
   width: 48px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 10px 4px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
+.sidebar-collapsed-desktop .sidebar-context-title {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -1784,47 +1342,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
   white-space: nowrap;
   width: 1px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: auto;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 0.25rem;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
+.sidebar-collapsed-desktop
   .sidebar-top-level-items
   > li
   .sidebar-sub-level-items:not(.flyout-list) {
   display: none;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
+.sidebar-collapsed-desktop .nav-icon-container {
   margin-right: 0;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
+.sidebar-collapsed-desktop .toggle-sidebar-button {
   width: 48px;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .collapse-text {
+.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
   display: none;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-left {
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
   transform: rotate(180deg);
-  display: block;
   margin: 0;
 }
-body.sidebar-refactoring .close-nav-button {
+.close-nav-button {
   display: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .close-nav-button {
+  .close-nav-button {
     display: flex;
   }
-  body.sidebar-refactoring .toggle-sidebar-button {
+  .toggle-sidebar-button {
     display: none;
   }
 }
@@ -2044,14 +1594,12 @@ svg.s16 {
   border-radius: 2px;
 }
 .rect-avatar.s32,
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32,
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar

ee/app/controllers/ee/projects/security/configuration_controller.rb

@@ -24,6 +24,10 @@ module EE
           end
 
           feature_category :static_application_security_testing
+
+          before_action only: [:show] do
+            push_frontend_feature_flag(:security_configuration_redesign_ee, project, default_enabled: :yaml)
+          end
         end
 
         # rubocop:disable Gitlab/ModuleWithInstanceVariables

ee/app/presenters/projects/security/configuration_presenter.rb

@@ -75,7 +75,8 @@ module Projects
         {
           type: type,
           configured: configured,
-          configuration_path: configuration_path(type)
+          configuration_path: configuration_path(type),
+          available: feature_available(type)
         }
       end
 
@@ -95,6 +96,13 @@ module Projects
           api_fuzzing: project_security_configuration_api_fuzzing_path(project)
         }[type]
       end
+
+      def feature_available(type)
+        # SAST and Secret Detection are always available, but this isn't
+        # reflected by our license model yet.
+        # TODO: https://gitlab.com/gitlab-org/gitlab/-/issues/333113
+        %w[sast secret_detection].include?(type) || project.licensed_feature_available?(type)
+      end
     end
   end
 end

ee/app/views/projects/security/configuration/show.html.haml

 - breadcrumb_title _("Security Configuration")
 - page_title _("Security Configuration")
+- redesign_enabled = ::Feature.enabled?(:security_configuration_redesign_ee, @project, default_enabled: :yaml)
+- @content_class = "limit-container-width" unless fluid_layout || !redesign_enabled
 
 - if @configuration.nil?
   = render_ce 'projects/security/configuration/show'

ee/spec/features/projects/security/user_views_security_configuration_spec.rb

@@ -15,9 +15,72 @@ RSpec.describe 'User sees Security Configuration table', :js do
     sign_in(user)
   end
 
-  context 'with security_dashboard feature available' do
+  context 'with security_dashboard feature available and redesign feature flag on' do
+    before do
+      stub_licensed_features(security_dashboard: true, sast: true, dast: true)
+    end
+
+    context 'with no SAST report' do
+      it 'shows SAST is not enabled' do
+        visit(project_security_configuration_path(project))
+
+        within_sast_card do
+          expect(page).to have_text('SAST')
+          expect(page).to have_text('Not enabled')
+          expect(page).to have_link('Enable SAST')
+        end
+      end
+    end
+
+    context 'with SAST report' do
+      before do
+        create(:ci_build, :sast, pipeline: pipeline, status: 'success')
+      end
+
+      it 'shows SAST is enabled' do
+        visit(project_security_configuration_path(project))
+
+        within_sast_card do
+          expect(page).to have_text('SAST')
+          expect(page).to have_text('Enabled')
+          expect(page).to have_link('Configure SAST')
+        end
+      end
+    end
+
+    context 'with no DAST report' do
+      it 'shows DAST is not enabled' do
+        visit(project_security_configuration_path(project))
+
+        within_dast_card do
+          expect(page).to have_text('DAST')
+          expect(page).to have_text('Not enabled')
+          expect(page).to have_link('Enable DAST')
+        end
+      end
+    end
+
+    context 'with DAST report' do
+      before do
+        create(:ci_build, :dast, pipeline: pipeline, status: 'success')
+      end
+
+      it 'shows DAST is enabled' do
+        visit(project_security_configuration_path(project))
+
+        within_dast_card do
+          expect(page).to have_text('DAST')
+          expect(page).to have_text('Enabled')
+          expect(page).to have_link('Configure DAST')
+        end
+      end
+    end
+  end
+
+  context 'with security_dashboard feature available and redesign feature flag off' do
     before do
       stub_licensed_features(security_dashboard: true)
+      stub_feature_flags(security_configuration_redesign_ee: false)
     end
 
     context 'with no SAST report' do
@@ -27,7 +90,7 @@ RSpec.describe 'User sees Security Configuration table', :js do
         within_sast_row do
           expect(page).to have_text('SAST')
           expect(page).to have_text('Not enabled')
-          expect(page).to have_css('[data-testid="enable-button"]')
+          expect(page).to have_link('Enable')
         end
       end
     end
@@ -43,7 +106,7 @@ RSpec.describe 'User sees Security Configuration table', :js do
         within_sast_row do
           expect(page).to have_text('SAST')
           expect(page).to have_text('Enabled')
-          expect(page).to have_css('[data-testid="configure-button"]')
+          expect(page).to have_link('Configure')
         end
       end
     end
@@ -55,7 +118,7 @@ RSpec.describe 'User sees Security Configuration table', :js do
         within_dast_row do
           expect(page).to have_text('DAST')
           expect(page).to have_text('Not enabled')
-          expect(page).to have_css('[data-testid="enable-button"]')
+          expect(page).to have_link('Enable')
         end
       end
     end
@@ -71,7 +134,7 @@ RSpec.describe 'User sees Security Configuration table', :js do
         within_dast_row do
           expect(page).to have_text('DAST')
           expect(page).to have_text('Enabled')
-          expect(page).to have_css('[data-testid="configure-button"]')
+          expect(page).to have_link('Configure')
         end
       end
 
@@ -97,4 +160,16 @@ RSpec.describe 'User sees Security Configuration table', :js do
       yield
     end
   end
+
+  def within_sast_card
+    within '[data-testid="security-testing-card"]:nth-of-type(1)' do
+      yield
+    end
+  end
+
+  def within_dast_card
+    within '[data-testid="security-testing-card"]:nth-of-type(2)' do
+      yield
+    end
+  end
 end

ee/spec/presenters/projects/security/configuration_presenter_spec.rb

@@ -17,6 +17,7 @@ RSpec.describe Projects::Security::ConfigurationPresenter do
 
   before do
     project.add_maintainer(current_user)
+    stub_licensed_features(licensed_scan_types.to_h { |type| [type, true] })
   end
 
   describe '#to_h' do
@@ -265,7 +266,8 @@ RSpec.describe Projects::Security::ConfigurationPresenter do
     {
       "type" => type.to_s,
       "configured" => configured,
-      "configuration_path" => configuration_path
+      "configuration_path" => configuration_path,
+      "available" => licensed_scan_types.include?(type)
     }
   end
 
@@ -277,4 +279,8 @@ RSpec.describe Projects::Security::ConfigurationPresenter do
       api_fuzzing: project_security_configuration_api_fuzzing_path(project)
     }[type]
   end
+
+  def licensed_scan_types
+    ::Security::SecurityJobsFinder.allowed_job_types + ::Security::LicenseComplianceJobsFinder.allowed_job_types - [:cluster_image_scanning]
+  end
 end

spec/frontend/security_configuration/utils_spec.js

@@ -35,7 +35,15 @@ const mockValidCustomFeature = [
   {
     name: 'SAST',
     type: 'SAST',
-    customfield: 'customvalue',
+    customField: 'customvalue',
+  },
+];
+
+const mockValidCustomFeatureSnakeCase = [
+  {
+    name: 'SAST',
+    type: 'SAST',
+    custom_field: 'customvalue',
   },
 ];
 
@@ -79,3 +87,15 @@ describe('returns an object with augmentedSecurityFeatures and augmentedComplian
     ).toEqual(expectedOutputCustomFeature);
   });
 });
+
+describe('returns an object with camelcased keys', () => {
+  it('given a customfeature in snakecase', () => {
+    expect(
+      augmentFeatures(
+        mockSecurityFeatures,
+        mockComplianceFeatures,
+        mockValidCustomFeatureSnakeCase,
+      ),
+    ).toEqual(expectedOutputCustomFeature);
+  });
+});