Add latest changes from gitlab-org/gitlab@master

45 files changed, 509 insertions, 1824 deletions

diff --git a/GITALY_SERVER_VERSION b/GITALY_SERVER_VERSION
index 458d8fd8021..fe3e0ff8747 100644
--- a/GITALY_SERVER_VERSION
+++ b/GITALY_SERVER_VERSION
@@ -1 +1 @@
-c9f804dd7049915ab276d8897d0e9f938cf8b362
+6ee267a02055a7f48871d66fae594417c4cdec9b
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index 893b74a9895..be7418ba802 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
@@ -1,9 +1,8 @@
 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
diff --git a/app/assets/javascripts/pages/projects/security/configuration/index.js b/app/assets/javascripts/pages/projects/security/configuration/index.js
index 101cb8356b2..8bba3d7af54 100644
--- a/app/assets/javascripts/pages/projects/security/configuration/index.js
+++ b/app/assets/javascripts/pages/projects/security/configuration/index.js
@@ -1,3 +1,3 @@
-import { initStaticSecurityConfiguration } from '~/security_configuration';
+import { initCESecurityConfiguration } from '~/security_configuration';
 
-initStaticSecurityConfiguration(document.querySelector('#js-security-configuration-static'));
+initCESecurityConfiguration(document.querySelector('#js-security-configuration-static'));
diff --git a/app/assets/javascripts/security_configuration/components/redesigned_app.vue b/app/assets/javascripts/security_configuration/components/redesigned_app.vue
index 64d908392b5..717a568e7d8 100644
--- a/app/assets/javascripts/security_configuration/components/redesigned_app.vue
+++ b/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"
             />
diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js
index e1dc6f24737..0aafb2653d8 100644
--- a/app/assets/javascripts/security_configuration/index.js
+++ b/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,
diff --git a/app/assets/javascripts/security_configuration/utils.js b/app/assets/javascripts/security_configuration/utils.js
index 071ebff4f21..ec6b93c6193 100644
--- a/app/assets/javascripts/security_configuration/utils.js
+++ b/app/assets/javascripts/security_configuration/utils.js
@@ -1,6 +1,8 @@
+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;
   }, {});
 
diff --git a/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue b/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue
index acf4ca726e0..ff335696d61 100644
--- a/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue
+++ b/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"
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 6b7189760b8..804cc205279 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/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';
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 1ea50281204..2b1c97f1398 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -1,81 +1,4 @@
 //
-// 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;
   }
 }
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_header.scss b/app/assets/stylesheets/framework/contextual_sidebar_header.scss
index fdd03f4cdc8..7159dadf7cc 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar_header.scss
+++ b/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;
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss
deleted file mode 100644
index 905ac260203..00000000000
--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-body:not(.sidebar-refactoring) {
-  @import 'contextual_sidebar_base';
-}
-
-body.sidebar-refactoring {
-  @import 'contextual_sidebar_variant';
-}
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss
deleted file mode 100644
index 306a9b74ebd..00000000000
--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss
+++ /dev/null
@@ -1,386 +0,0 @@
-@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;
-      }
-    }
-  }
-}
-
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index f4a76601913..d0189a72311 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/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;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 08175c2e99b..ca8e4db31f8 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/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
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 9d98fe5c739..ea7aaaa8ec8 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/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;
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index 6a60978b954..45fbd8607fc 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/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;
diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss
index bbf14afcca2..9566c9c6004 100644
--- a/app/assets/stylesheets/themes/theme_indigo.scss
+++ b/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
     );
diff --git a/app/graphql/types/ci/runner_type.rb b/app/graphql/types/ci/runner_type.rb
index 9816075d23c..d29111ba855 100644
--- a/app/graphql/types/ci/runner_type.rb
+++ b/app/graphql/types/ci/runner_type.rb
@@ -54,10 +54,12 @@ module Types
       # rubocop: disable CodeReuse/ActiveRecord
       def project_count
         BatchLoader::GraphQL.for(runner.id).batch(key: :runner_project_count) do |ids, loader, args|
-          counts = ::Ci::RunnerProject.select(:runner_id, 'COUNT(*) as count')
-            .where(runner_id: ids)
-            .group(:runner_id)
-            .index_by(&:runner_id)
+          counts = ::Ci::Runner.project_type
+            .select(:id, 'COUNT(ci_runner_projects.id) as count')
+            .left_outer_joins(:runner_projects)
+            .where(id: ids)
+            .group(:id)
+            .index_by(&:id)
 
           ids.each do |id|
             loader.call(id, counts[id]&.count)
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index c40feb42eea..d8ba530f3f6 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -425,6 +425,15 @@ module IssuablesHelper
     }
   end
 
+  def sidebar_status_data(issuable_sidebar, project)
+    {
+      iid: issuable_sidebar[:iid],
+      issuable_type: issuable_sidebar[:type],
+      full_path: project.full_path,
+      can_edit: issuable_sidebar.dig(:current_user, :can_edit).to_s
+    }
+  end
+
   def parent
     @project || @group
   end
diff --git a/app/models/ci/build_metadata.rb b/app/models/ci/build_metadata.rb
index 7a3779abf5c..50775f578f0 100644
--- a/app/models/ci/build_metadata.rb
+++ b/app/models/ci/build_metadata.rb
@@ -39,6 +39,7 @@ module Ci
     }
 
     ignore_column :build_id_convert_to_bigint, remove_with: '14.2', remove_after: '2021-08-22'
+    ignore_columns :id_convert_to_bigint, remove_with: '14.3', remove_after: '2021-09-22'
 
     def update_timeout_state
       timeout = timeout_with_highest_precedence
diff --git a/app/views/admin/application_settings/_localization.html.haml b/app/views/admin/application_settings/_localization.html.haml
index fdb91937ec3..5c8f3379fce 100644
--- a/app/views/admin/application_settings/_localization.html.haml
+++ b/app/views/admin/application_settings/_localization.html.haml
@@ -7,6 +7,7 @@
       = f.select :first_day_of_week, first_day_of_week_choices, {}, class: 'form-control'
       .form-text.text-muted
         = _('Default first day of the week in calendars and date pickers.')
+        = link_to _('Learn more.'), help_page_path('user/admin_area/settings/index.md', anchor: 'default-first-day-of-the-week'), target: '_blank'
 
     .form-group
       = f.label :time_tracking, _('Time tracking'), class: 'label-bold'
@@ -14,5 +15,9 @@
         = f.check_box :time_tracking_limit_to_hours, class: 'form-check-input'
         = f.label :time_tracking_limit_to_hours, class: 'form-check-label' do
           = _('Limit display of time tracking units to hours.')
+        .form-text.text-muted
+          = _('Display time tracking in issues in total hours only.')
+          = link_to _('What is time tracking?'), help_page_path('user/project/time_tracking.md'), target: '_blank'
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+
diff --git a/app/views/admin/application_settings/preferences.html.haml b/app/views/admin/application_settings/preferences.html.haml
index b56092140fb..52aed0b36e7 100644
--- a/app/views/admin/application_settings/preferences.html.haml
+++ b/app/views/admin/application_settings/preferences.html.haml
@@ -77,6 +77,6 @@
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded_by_default? ? _('Collapse') : _('Expand')
     %p
-      = _('Various localization settings.')
+      = _('Configure the default first day of the week and time tracking units.')
   .settings-content
     = render 'localization'
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 47c092e199a..899bf65de48 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,7 +1,6 @@
 - 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 }
diff --git a/app/views/projects/security/configuration/show.html.haml b/app/views/projects/security/configuration/show.html.haml
index 9eb842d1015..d4a85893fa4 100644
--- a/app/views/projects/security/configuration/show.html.haml
+++ b/app/views/projects/security/configuration/show.html.haml
@@ -1,6 +1,6 @@
 - 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 } }
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 2395daf276d..177ffd90b10 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -81,7 +81,7 @@
         #js-severity
 
       - if issuable_sidebar.dig(:features_available, :health_status)
-        .js-sidebar-status-entry-point
+        .js-sidebar-status-entry-point{ data: sidebar_status_data(issuable_sidebar, @project) }
 
       - if issuable_sidebar.has_key?(:confidential)
         %script#js-confidential-issue-data{ type: "application/json" }= { is_confidential: issuable_sidebar[:confidential], is_editable: can_edit_issuable }.to_json.html_safe
diff --git a/config/feature_flags/development/security_configuration_redesign_ee.yml b/config/feature_flags/development/security_configuration_redesign_ee.yml
new file mode 100644
index 00000000000..a1018ec153d
--- /dev/null
+++ b/config/feature_flags/development/security_configuration_redesign_ee.yml
@@ -0,0 +1,8 @@
+---
+name: security_configuration_redesign_ee
+introduced_by_url:
+rollout_issue_url:
+milestone: '14.1'
+type: development
+group: group::analyzer frontend
+default_enabled: false
diff --git a/db/migrate/20210624112821_add_devops_adoption_coverage_fuzzing.rb b/db/migrate/20210624112821_add_devops_adoption_coverage_fuzzing.rb
new file mode 100644
index 00000000000..6ca040dbfbc
--- /dev/null
+++ b/db/migrate/20210624112821_add_devops_adoption_coverage_fuzzing.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddDevopsAdoptionCoverageFuzzing < ActiveRecord::Migration[6.1]
+  def change
+    add_column :analytics_devops_adoption_snapshots, :coverage_fuzzing_enabled_count, :integer
+  end
+end
diff --git a/db/migrate/20210705142714_initialize_conversion_of_ci_builds_metadata_id_to_bigint.rb b/db/migrate/20210705142714_initialize_conversion_of_ci_builds_metadata_id_to_bigint.rb
new file mode 100644
index 00000000000..ea612100e5a
--- /dev/null
+++ b/db/migrate/20210705142714_initialize_conversion_of_ci_builds_metadata_id_to_bigint.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class InitializeConversionOfCiBuildsMetadataIdToBigint < ActiveRecord::Migration[6.1]
+  include Gitlab::Database::MigrationHelpers
+
+  TABLE = :ci_builds_metadata
+  COLUMN = :id
+
+  def up
+    initialize_conversion_of_integer_to_bigint(TABLE, COLUMN)
+  end
+
+  def down
+    revert_initialize_conversion_of_integer_to_bigint(TABLE, COLUMN)
+  end
+end
diff --git a/db/post_migrate/20210705143150_backfill_ci_builds_metadata_id_for_bigint_conversion.rb b/db/post_migrate/20210705143150_backfill_ci_builds_metadata_id_for_bigint_conversion.rb
new file mode 100644
index 00000000000..ecf9040eb46
--- /dev/null
+++ b/db/post_migrate/20210705143150_backfill_ci_builds_metadata_id_for_bigint_conversion.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class BackfillCiBuildsMetadataIdForBigintConversion < ActiveRecord::Migration[6.1]
+  include Gitlab::Database::MigrationHelpers
+
+  TABLE = :ci_builds_metadata
+  COLUMN = :id
+
+  def up
+    backfill_conversion_of_integer_to_bigint TABLE, COLUMN, batch_size: 15000, sub_batch_size: 100
+  end
+
+  def down
+    revert_backfill_conversion_of_integer_to_bigint TABLE, COLUMN
+  end
+end
diff --git a/db/schema_migrations/20210624112821 b/db/schema_migrations/20210624112821
new file mode 100644
index 00000000000..86b0e9612e0
--- /dev/null
+++ b/db/schema_migrations/20210624112821
@@ -0,0 +1 @@
+2fca5d3203b7bb766274fc333e9a2a267340142856bd23efaabb1cb2c1cb7cb7
\ No newline at end of file
diff --git a/db/schema_migrations/20210705142714 b/db/schema_migrations/20210705142714
new file mode 100644
index 00000000000..7a64734b0e1
--- /dev/null
+++ b/db/schema_migrations/20210705142714
@@ -0,0 +1 @@
+b47570ac9018a50206f239ffdafce2e672e6888a11a51e01f6d59d62a6a929af
\ No newline at end of file
diff --git a/db/schema_migrations/20210705143150 b/db/schema_migrations/20210705143150
new file mode 100644
index 00000000000..9c91d772a41
--- /dev/null
+++ b/db/schema_migrations/20210705143150
@@ -0,0 +1 @@
+9240ebbc69525a5bc1732f5e0ee2903f2b40b8693f24fcb911e72b5ba943357e
\ No newline at end of file
diff --git a/db/structure.sql b/db/structure.sql
index b31d3e0ee25..249c61dbfd3 100644
--- a/db/structure.sql
+++ b/db/structure.sql
@@ -87,6 +87,15 @@ BEGIN
 END;
 $$;
 
+CREATE FUNCTION trigger_542d6c2ad72e() RETURNS trigger
+    LANGUAGE plpgsql
+    AS $$
+BEGIN
+  NEW."id_convert_to_bigint" := NEW."id";
+  RETURN NEW;
+END;
+$$;
+
 CREATE FUNCTION trigger_69523443cc10() RETURNS trigger
     LANGUAGE plpgsql
     AS $$
@@ -9129,6 +9138,7 @@ CREATE TABLE analytics_devops_adoption_snapshots (
     sast_enabled_count integer,
     dast_enabled_count integer,
     dependency_scanning_enabled_count integer,
+    coverage_fuzzing_enabled_count integer,
     CONSTRAINT check_3f472de131 CHECK ((namespace_id IS NOT NULL))
 );
 
@@ -10579,7 +10589,8 @@ CREATE TABLE ci_builds_metadata (
     environment_auto_stop_in character varying(255),
     expanded_environment_name character varying(255),
     secrets jsonb DEFAULT '{}'::jsonb NOT NULL,
-    build_id_convert_to_bigint bigint DEFAULT 0 NOT NULL
+    build_id_convert_to_bigint bigint DEFAULT 0 NOT NULL,
+    id_convert_to_bigint bigint DEFAULT 0 NOT NULL
 );
 
 CREATE SEQUENCE ci_builds_metadata_id_seq
@@ -25548,6 +25559,8 @@ CREATE TRIGGER trigger_490d204c00b3 BEFORE INSERT OR UPDATE ON ci_stages FOR EAC
 
 CREATE TRIGGER trigger_51ab7cef8934 BEFORE INSERT OR UPDATE ON ci_builds_runner_session FOR EACH ROW EXECUTE FUNCTION trigger_51ab7cef8934();
 
+CREATE TRIGGER trigger_542d6c2ad72e BEFORE INSERT OR UPDATE ON ci_builds_metadata FOR EACH ROW EXECUTE FUNCTION trigger_542d6c2ad72e();
+
 CREATE TRIGGER trigger_69523443cc10 BEFORE INSERT OR UPDATE ON events FOR EACH ROW EXECUTE FUNCTION trigger_69523443cc10();
 
 CREATE TRIGGER trigger_77f5e1d20482 BEFORE INSERT OR UPDATE ON deployments FOR EACH ROW EXECUTE FUNCTION trigger_77f5e1d20482();
diff --git a/doc/api/graphql/reference/index.md b/doc/api/graphql/reference/index.md
index b6b2d313ec4..b2bc8dec505 100644
--- a/doc/api/graphql/reference/index.md
+++ b/doc/api/graphql/reference/index.md
@@ -8506,6 +8506,7 @@ Snapshot.
 | Name | Type | Description |
 | ---- | ---- | ----------- |
 | <a id="devopsadoptionsnapshotcodeownersusedcount"></a>`codeOwnersUsedCount` | [`Int`](#int) | Total number of projects with existing CODEOWNERS file. |
+| <a id="devopsadoptionsnapshotcoveragefuzzingenabledcount"></a>`coverageFuzzingEnabledCount` | [`Int`](#int) | Total number of projects with enabled coverage fuzzing. |
 | <a id="devopsadoptionsnapshotdastenabledcount"></a>`dastEnabledCount` | [`Int`](#int) | Total number of projects with enabled DAST. |
 | <a id="devopsadoptionsnapshotdependencyscanningenabledcount"></a>`dependencyScanningEnabledCount` | [`Int`](#int) | Total number of projects with enabled dependency scanning. |
 | <a id="devopsadoptionsnapshotdeploysucceeded"></a>`deploySucceeded` | [`Boolean!`](#boolean) | At least one deployment succeeded. |
diff --git a/doc/development/database_review.md b/doc/development/database_review.md
index ebd7e1ae651..bd6555e6b28 100644
--- a/doc/development/database_review.md
+++ b/doc/development/database_review.md
@@ -43,7 +43,7 @@ If your merge request description does not include these items, the review will
 
 If new migrations are introduced, in the MR **you are required to provide**:
 
-- The output of both migrating and rolling back for all migrations
+- The output of both migrating (`db:migrate`) and rolling back (`db:rollback`) for all migrations.
 
 If new queries have been introduced or existing queries have been updated, **you are required to provide**:
 
@@ -104,7 +104,7 @@ the following preparations into account.
 `db/schema_migrations` were added or removed.
 - Make migrations reversible by using the `change` method or include a `down` method when using `up`.
   - Include either a rollback procedure or describe how to rollback changes.
-- Add the output of both migrating and rolling back for all migrations into the MR description.
+- Add the output of both migrating (`db:migrate`) and rolling back (`db:rollback`) for all migrations into the MR description.
   - Ensure the down method reverts the changes in `db/structure.sql`.
   - Update the migration output whenever you modify the migrations during the review process.
 - Add tests for the migration in `spec/migrations` if necessary. See [Testing Rails migrations at GitLab](testing_guide/testing_migrations_guide.md) for more details.
diff --git a/doc/development/migration_style_guide.md b/doc/development/migration_style_guide.md
index 41b3b9ed428..62e797276c1 100644
--- a/doc/development/migration_style_guide.md
+++ b/doc/development/migration_style_guide.md
@@ -19,8 +19,8 @@ Migrations are **not** allowed to require GitLab installations to be taken
 offline ever. Migrations always must be written in such a way to avoid
 downtime. In the past we had a process for defining migrations that allowed for
 downtime by setting a `DOWNTIME` constant. You may see this when looking at
-older migrations. This process was in place for 4 years without every being
-used and as such we've learnt we can always figure out how to write a migration
+older migrations. This process was in place for 4 years without ever being
+used and as such we've learned we can always figure out how to write a migration
 differently to avoid downtime.
 
 When writing your migrations, also consider that databases might have stale data
@@ -35,10 +35,21 @@ For GitLab.com, please take into consideration that regular migrations (under `d
 are run before [Canary is deployed](https://gitlab.com/gitlab-com/gl-infra/readiness/-/tree/master/library/canary/#configuration-and-deployment),
 and [post-deployment migrations](post_deployment_migrations.md) (`db/post_migrate`) are run after the deployment to production has finished.
 
+## Create database migrations
+
+To create a migration you can use the following Rails generator:
+
+```shell
+bundle exec rails g migration migration_name_here
+```
+
+This generates the migration file in `db/migrate`.
+
 ## Schema Changes
 
 Changes to the schema should be committed to `db/structure.sql`. This
-file is automatically generated by Rails, so you normally should not
+file is automatically generated by Rails when you run
+`bundle exec rails db:migrate`, so you normally should not
 edit this file by hand. If your migration is adding a column to a
 table, that column is added at the bottom. Please do not reorder
 columns manually for existing tables as this causes confusion to
diff --git a/doc/update/index.md b/doc/update/index.md
index c81d8981753..63b7e4b2ea5 100644
--- a/doc/update/index.md
+++ b/doc/update/index.md
@@ -194,7 +194,7 @@ Find where your version sits in the upgrade path below, and upgrade GitLab
 accordingly, while also consulting the
 [version-specific upgrade instructions](#version-specific-upgrading-instructions):
 
-`8.11.Z` -> `8.12.0` -> `8.17.7` -> `9.5.10` -> `10.8.7` -> `11.11.8` -> `12.0.12` -> `12.1.17` -> `12.10.14` -> `13.0.14` -> `13.1.11` -> [latest `13.12.Z`](https://about.gitlab.com/releases/categories/releases/) -> [latest `14.0.Z`](https://about.gitlab.com/releases/categories/releases/)
+`8.11.Z` -> [`8.12.0`](#upgrades-from-versions-earlier-than-812) -> `8.17.7` -> `9.5.10` -> `10.8.7` -> [`11.11.8`](#1200) -> `12.0.12` -> [`12.1.17`](#1210) -> `12.10.14` -> `13.0.14` -> [`13.1.11`](#1310) -> [latest `13.12.Z`](https://about.gitlab.com/releases/categories/releases/) -> [latest `14.0.Z`](https://about.gitlab.com/releases/categories/releases/) -> [latest `14.Y.Z`](https://about.gitlab.com/releases/categories/releases/)
 
 The following table, while not exhaustive, shows some examples of the supported
 upgrade paths.
@@ -213,7 +213,7 @@ upgrade paths.
 Upgrading the *major* version requires more attention.
 Backward-incompatible changes and migrations are reserved for major versions.
 We cannot guarantee that upgrading between major versions will be seamless.
-It is suggested to upgrade to the latest available *minor* version within
+It is required to upgrade to the latest available *minor* version within
 your major version before proceeding to the next major version.
 Doing this addresses any backward-incompatible changes or deprecations
 to help ensure a successful upgrade to the next major release.
@@ -373,11 +373,9 @@ and [Helm Chart deployments](https://docs.gitlab.com/charts/). They come with ap
 
 - In GitLab 13.3 some [pipeline processing methods were deprecated](https://gitlab.com/gitlab-org/gitlab/-/issues/218536)
   and this code was completely removed in GitLab 14.0. If you plan to upgrade from
-  **GitLab 13.2 or older** directly to 14.0, you should not have any pipelines running
-  when you upgrade. The pipelines might report the wrong status when the upgrade completes.
-  You should shut down GitLab and wait for all pipelines on runners to complete, then upgrade
-  GitLab to 14.0. Alternatively, you can first upgrade GitLab to a version between 13.3 and
-  13.12, then upgrade to 14.0.
+  **GitLab 13.2 or older** directly to 14.0 ([unsupported](#upgrading-to-a-new-major-version)), you should not have any pipelines running
+  when you upgrade or the pipelines might report the wrong status when the upgrade completes.
+  You should instead follow a [supported upgrade path](#upgrade-paths).
 - The support of PostgreSQL 11 [has been dropped](../install/requirements.md#database). Make sure to [update your database](https://docs.gitlab.com/omnibus/settings/database.html#upgrade-packaged-postgresql-server) to version 12 before updating to GitLab 14.0.
 
 ### 13.11.0
@@ -477,7 +475,7 @@ So, if you are using multiple Rails servers and specifically upgrading from 13.0
 all servers must first be upgraded to 13.1.Z before upgrading to 13.2.0 or later:
 
 1. Ensure all GitLab web nodes are running GitLab 13.1.Z.
-1. Optionally, enable the `global_csrf_token` feature flag to enable new
+1. Enable the `global_csrf_token` feature flag to enable new
    method of CSRF token generation:
 
    ```ruby
diff --git a/doc/user/application_security/configuration/index.md b/doc/user/application_security/configuration/index.md
index f2fb11da66e..fc9f2893729 100644
--- a/doc/user/application_security/configuration/index.md
+++ b/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>))
+```
diff --git a/doc/user/profile/preferences.md b/doc/user/profile/preferences.md
index 540724f9185..9f28b73bca7 100644
--- a/doc/user/profile/preferences.md
+++ b/doc/user/profile/preferences.md
@@ -163,7 +163,7 @@ You can choose one of the following options as the first day of the week:
 - Sunday
 - Monday
 
-If you select **System Default**, the system-wide default setting is used.
+If you select **System Default**, the [instance default](../admin_area/settings/index.md#default-first-day-of-the-week) setting is used.
 
 ## Integrations
 
diff --git a/doc/user/project/integrations/overview.md b/doc/user/project/integrations/overview.md
index aa7ce3f162a..53aa9da30ab 100644
--- a/doc/user/project/integrations/overview.md
+++ b/doc/user/project/integrations/overview.md
@@ -114,6 +114,6 @@ plugins. This allows the community to keep the plugins up to date so that they
 always work in newer GitLab versions.
 
 For an overview of what integrations are available, please see the
-[project_services source directory](https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/models/project_services).
+[integrations source directory](https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/models/integrations).
 
 Contributions are welcome!
diff --git a/lib/gitlab/sidekiq_middleware/duplicate_jobs/duplicate_job.rb b/lib/gitlab/sidekiq_middleware/duplicate_jobs/duplicate_job.rb
index 4cf540ce3b8..c1dc616cbb2 100644
--- a/lib/gitlab/sidekiq_middleware/duplicate_jobs/duplicate_job.rb
+++ b/lib/gitlab/sidekiq_middleware/duplicate_jobs/duplicate_job.rb
@@ -133,11 +133,7 @@ module Gitlab
         end
 
         def idempotency_string
-          # TODO: dump the argument's JSON using `Sidekiq.dump_json` instead
-          # this should be done in the next release so all jobs are written
-          # with their idempotency key.
-          # see https://gitlab.com/gitlab-com/gl-infra/scalability/-/issues/1090
-          "#{worker_class_name}:#{arguments.join('-')}"
+          "#{worker_class_name}:#{Sidekiq.dump_json(arguments)}"
         end
       end
     end
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 33e209a627d..e7f8a8d3208 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8277,6 +8277,9 @@ msgstr ""
 msgid "Configure the %{link} integration."
 msgstr ""
 
+msgid "Configure the default first day of the week and time tracking units."
+msgstr ""
+
 msgid "Configure the way a user creates a new account."
 msgstr ""
 
@@ -11524,6 +11527,9 @@ msgstr ""
 msgid "Display source"
 msgstr ""
 
+msgid "Display time tracking in issues in total hours only."
+msgstr ""
+
 msgid "Do not display offers from third parties"
 msgstr ""
 
@@ -12817,6 +12823,9 @@ msgstr ""
 msgid "Error occurred when saving reviewers"
 msgstr ""
 
+msgid "Error occurred while updating the %{issuableType} status"
+msgstr ""
+
 msgid "Error occurred while updating the issue status"
 msgstr ""
 
@@ -30456,6 +30465,9 @@ msgstr ""
 msgid "Something went wrong while setting %{issuableType} confidentiality."
 msgstr ""
 
+msgid "Something went wrong while setting %{issuableType} health status."
+msgstr ""
+
 msgid "Something went wrong while setting %{issuableType} notifications."
 msgstr ""
 
@@ -35895,9 +35907,6 @@ msgstr ""
 msgid "Various email settings."
 msgstr ""
 
-msgid "Various localization settings."
-msgstr ""
-
 msgid "Various settings that affect GitLab performance."
 msgstr ""
 
@@ -36721,6 +36730,9 @@ msgstr ""
 msgid "What is squashing?"
 msgstr ""
 
+msgid "What is time tracking?"
+msgstr ""
+
 msgid "What is your job title? (optional)"
 msgstr ""
 
diff --git a/spec/frontend/security_configuration/utils_spec.js b/spec/frontend/security_configuration/utils_spec.js
index 6ad167cadda..eaed4532baa 100644
--- a/spec/frontend/security_configuration/utils_spec.js
+++ b/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);
+  });
+});
diff --git a/spec/lib/gitlab/sidekiq_middleware/duplicate_jobs/duplicate_job_spec.rb b/spec/lib/gitlab/sidekiq_middleware/duplicate_jobs/duplicate_job_spec.rb
index a10a8883591..d67cb95f483 100644
--- a/spec/lib/gitlab/sidekiq_middleware/duplicate_jobs/duplicate_job_spec.rb
+++ b/spec/lib/gitlab/sidekiq_middleware/duplicate_jobs/duplicate_job_spec.rb
@@ -13,7 +13,7 @@ RSpec.describe Gitlab::SidekiqMiddleware::DuplicateJobs::DuplicateJob, :clean_gi
   let(:queue) { 'authorized_projects' }
 
   let(:idempotency_key) do
-    hash = Digest::SHA256.hexdigest("#{job['class']}:#{job['args'].join('-')}")
+    hash = Digest::SHA256.hexdigest("#{job['class']}:#{Sidekiq.dump_json(job['args'])}")
     "#{Gitlab::Redis::Queues::SIDEKIQ_NAMESPACE}:duplicate:#{queue}:#{hash}"
   end
 
diff --git a/spec/requests/api/graphql/ci/runner_spec.rb b/spec/requests/api/graphql/ci/runner_spec.rb
index 09050e6cdbe..cdd46ca4ecc 100644
--- a/spec/requests/api/graphql/ci/runner_spec.rb
+++ b/spec/requests/api/graphql/ci/runner_spec.rb
@@ -5,25 +5,25 @@ require 'spec_helper'
 RSpec.describe 'Query.runner(id)' do
   include GraphqlHelpers
 
-  let_it_be(:user) { create_default(:user, :admin) }
+  let_it_be(:user) { create(:user, :admin) }
 
-  let_it_be(:active_runner) do
+  let_it_be(:active_instance_runner) do
     create(:ci_runner, :instance, description: 'Runner 1', contacted_at: 2.hours.ago,
            active: true, version: 'adfe156', revision: 'a', locked: true, ip_address: '127.0.0.1', maximum_timeout: 600,
            access_level: 0, tag_list: %w[tag1 tag2], run_untagged: true)
   end
 
-  let_it_be(:inactive_runner) do
+  let_it_be(:inactive_instance_runner) do
     create(:ci_runner, :instance, description: 'Runner 2', contacted_at: 1.day.ago, active: false,
            version: 'adfe157', revision: 'b', ip_address: '10.10.10.10', access_level: 1, run_untagged: true)
   end
 
   def get_runner(id)
     case id
-    when :active_runner
-      active_runner
-    when :inactive_runner
-      inactive_runner
+    when :active_instance_runner
+      active_instance_runner
+    when :inactive_instance_runner
+      inactive_instance_runner
     end
   end
 
@@ -86,7 +86,7 @@ RSpec.describe 'Query.runner(id)' do
   end
 
   describe 'for active runner' do
-    it_behaves_like 'runner details fetch', :active_runner
+    it_behaves_like 'runner details fetch', :active_instance_runner
 
     context 'when tagList is not requested' do
       let(:query) do
@@ -95,7 +95,7 @@ RSpec.describe 'Query.runner(id)' do
 
       let(:query_path) do
         [
-          [:runner, { id: active_runner.to_global_id.to_s }]
+          [:runner, { id: active_instance_runner.to_global_id.to_s }]
         ]
       end
 
@@ -110,29 +110,30 @@ RSpec.describe 'Query.runner(id)' do
   end
 
   describe 'for inactive runner' do
-    it_behaves_like 'runner details fetch', :inactive_runner
+    it_behaves_like 'runner details fetch', :inactive_instance_runner
   end
 
   describe 'for multiple runners' do
     let_it_be(:project1) { create(:project, :test_repo) }
     let_it_be(:project2) { create(:project, :test_repo) }
-    let_it_be(:project_runner) do
-      create(:ci_runner, :project, projects: [project1, project2], description: 'Runner 1', contacted_at: 2.hours.ago,
-             active: true, version: 'adfe156', revision: 'a', locked: true, ip_address: '127.0.0.1', maximum_timeout: 600,
-             access_level: 0, run_untagged: true)
-    end
+    let_it_be(:project_runner1) { create(:ci_runner, :project, projects: [project1, project2], description: 'Runner 1') }
+    let_it_be(:project_runner2) { create(:ci_runner, :project, projects: [], description: 'Runner 2') }
 
-    let!(:job) { create(:ci_build, runner: project_runner) }
+    let!(:job) { create(:ci_build, runner: project_runner1) }
 
     context 'requesting project and job counts' do
       let(:query) do
         %(
           query {
-            projectRunner: runner(id: "#{project_runner.to_global_id}") {
+            projectRunner1: runner(id: "#{project_runner1.to_global_id}") {
+              projectCount
+              jobCount
+            }
+            projectRunner2: runner(id: "#{project_runner2.to_global_id}") {
               projectCount
               jobCount
             }
-            activeRunner: runner(id: "#{active_runner.to_global_id}") {
+            activeInstanceRunner: runner(id: "#{active_instance_runner.to_global_id}") {
               projectCount
               jobCount
             }
@@ -141,33 +142,39 @@ RSpec.describe 'Query.runner(id)' do
       end
 
       before do
+        project_runner2.projects.clear
+
         post_graphql(query, current_user: user)
       end
 
       it 'retrieves expected fields' do
-        runner1_data = graphql_data_at(:project_runner)
-        runner2_data = graphql_data_at(:active_runner)
+        runner1_data = graphql_data_at(:project_runner1)
+        runner2_data = graphql_data_at(:project_runner2)
+        runner3_data = graphql_data_at(:active_instance_runner)
 
         expect(runner1_data).to match a_hash_including(
           'jobCount' => 1,
           'projectCount' => 2)
         expect(runner2_data).to match a_hash_including(
           'jobCount' => 0,
+          'projectCount' => 0)
+        expect(runner3_data).to match a_hash_including(
+          'jobCount' => 0,
           'projectCount' => nil)
       end
     end
   end
 
   describe 'by regular user' do
-    let(:user) { create_default(:user) }
+    let(:user) { create(:user) }
 
-    it_behaves_like 'retrieval by unauthorized user', :active_runner
+    it_behaves_like 'retrieval by unauthorized user', :active_instance_runner
   end
 
   describe 'by unauthenticated user' do
     let(:user) { nil }
 
-    it_behaves_like 'retrieval by unauthorized user', :active_runner
+    it_behaves_like 'retrieval by unauthorized user', :active_instance_runner
   end
 
   describe 'Query limits' do
@@ -185,7 +192,7 @@ RSpec.describe 'Query.runner(id)' do
     let(:single_query) do
       <<~QUERY
         {
-          active: #{runner_query(active_runner)}
+          active: #{runner_query(active_instance_runner)}
         }
       QUERY
     end
@@ -193,8 +200,8 @@ RSpec.describe 'Query.runner(id)' do
     let(:double_query) do
       <<~QUERY
         {
-          active: #{runner_query(active_runner)}
-          inactive: #{runner_query(inactive_runner)}
+          active: #{runner_query(active_instance_runner)}
+          inactive: #{runner_query(inactive_instance_runner)}
         }
       QUERY
     end