Add latest changes from gitlab-org/gitlab@master

36 files changed, 212 insertions, 790 deletions

diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipelines_artifacts.vue b/app/assets/javascripts/ci/pipelines_page/components/pipelines_artifacts.vue
index 634fc2ad447..a45387ca676 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipelines_artifacts.vue
@@ -75,6 +75,6 @@ export default {
 /* TODO: Use max-height prop when gitlab-ui got updated.
 See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2374 */
 ::v-deep .gl-new-dropdown-inner {
-  max-height: 310px;
+  max-height: 310px !important;
 }
 </style>
diff --git a/app/assets/javascripts/environments/components/kubernetes_overview.vue b/app/assets/javascripts/environments/components/kubernetes_overview.vue
index 36cce29d624..d5a7b43c953 100644
--- a/app/assets/javascripts/environments/components/kubernetes_overview.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_overview.vue
@@ -43,7 +43,7 @@ export default {
     return {
       isVisible: false,
       error: '',
-      hasFailedState: false,
+      failedState: {},
       podsLoading: false,
       workloadTypesLoading: false,
     };
@@ -78,6 +78,9 @@ export default {
 
       return this.hasFailedState ? 'error' : 'success';
     },
+    hasFailedState() {
+      return Object.values(this.failedState).some((item) => item);
+    },
   },
   methods: {
     toggleCollapse() {
@@ -86,6 +89,12 @@ export default {
     onClusterError(message) {
       this.error = message;
     },
+    onUpdateFailedState(event) {
+      this.failedState = {
+        ...this.failedState,
+        ...event,
+      };
+    },
   },
   i18n: {
     collapse: __('Collapse'),
@@ -126,14 +135,14 @@ export default {
           class="gl-mb-5"
           @cluster-error="onClusterError"
           @loading="podsLoading = $event"
-          @failed="hasFailedState = true" />
+          @update-failed-state="onUpdateFailedState" />
         <kubernetes-tabs
           :configuration="k8sAccessConfiguration"
           :namespace="namespace"
           class="gl-mb-5"
           @cluster-error="onClusterError"
           @loading="workloadTypesLoading = $event"
-          @failed="hasFailedState = true"
+          @update-failed-state="onUpdateFailedState"
       /></template>
     </gl-collapse>
   </div>
diff --git a/app/assets/javascripts/environments/components/kubernetes_pods.vue b/app/assets/javascripts/environments/components/kubernetes_pods.vue
index 743159d6256..2015355f794 100644
--- a/app/assets/javascripts/environments/components/kubernetes_pods.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_pods.vue
@@ -82,9 +82,10 @@ export default {
   methods: {
     countPodsByPhase(phase) {
       const filteredPods = this.k8sPods.filter((item) => item.status.phase === phase);
-      if (phase === PHASE_FAILED && filteredPods.length) {
-        this.$emit('failed');
-      }
+
+      const hasFailedState = Boolean(phase === PHASE_FAILED && filteredPods.length);
+      this.$emit('update-failed-state', { pods: hasFailedState });
+
       return filteredPods.length;
     },
   },
diff --git a/app/assets/javascripts/environments/components/kubernetes_status_bar.vue b/app/assets/javascripts/environments/components/kubernetes_status_bar.vue
index 8ecb61711ce..20ed67f6bd9 100644
--- a/app/assets/javascripts/environments/components/kubernetes_status_bar.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_status_bar.vue
@@ -153,7 +153,7 @@ export default {
     },
   },
   i18n: {
-    healthLabel: s__('Environment|Environment health'),
+    healthLabel: s__('Environment|Environment status'),
     syncStatusLabel: s__('Environment|Sync status'),
   },
   badgeContainerClasses: 'gl-display-flex gl-align-items-center gl-flex-shrink-0 gl-mr-3 gl-mb-2',
diff --git a/app/assets/javascripts/environments/components/kubernetes_summary.vue b/app/assets/javascripts/environments/components/kubernetes_summary.vue
index 1f4e91afe35..2912fd8f4d8 100644
--- a/app/assets/javascripts/environments/components/kubernetes_summary.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_summary.vue
@@ -140,9 +140,7 @@ export default {
         return workloadType.items?.failed?.length > 0;
       });
 
-      if (failed) {
-        this.$emit('failed');
-      }
+      this.$emit('update-failed-state', { summary: failed });
     },
   },
   i18n: {
diff --git a/app/assets/javascripts/environments/components/kubernetes_tabs.vue b/app/assets/javascripts/environments/components/kubernetes_tabs.vue
index 60b36596ef3..0d80b1fd797 100644
--- a/app/assets/javascripts/environments/components/kubernetes_tabs.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_tabs.vue
@@ -140,7 +140,7 @@ export default {
       :namespace="namespace"
       :configuration="configuration"
       @loading="$emit('loading', $event)"
-      @failed="$emit('failed')"
+      @update-failed-state="$emit('update-failed-state', $event)"
       @cluster-error="$emit('cluster-error', $event)"
     />
 
diff --git a/app/assets/javascripts/graphql_shared/possible_types.json b/app/assets/javascripts/graphql_shared/possible_types.json
index 4ef0d067030..dbdadf371ca 100644
--- a/app/assets/javascripts/graphql_shared/possible_types.json
+++ b/app/assets/javascripts/graphql_shared/possible_types.json
@@ -4,7 +4,8 @@
     "AlertManagementPrometheusIntegration"
   ],
   "AmazonS3ConfigurationInterface": [
-    "AmazonS3ConfigurationType"
+    "AmazonS3ConfigurationType",
+    "InstanceAmazonS3ConfigurationType"
   ],
   "BaseHeaderInterface": [
     "AuditEventStreamingHeader",
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index a3cd7a627ee..e9a4b936b9c 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -30,7 +30,6 @@ import { initUserTracking, initDefaultTrackers } from './tracking';
 import GlFieldErrors from './gl_field_errors';
 import initUserPopovers from './user_popovers';
 import initBroadcastNotifications from './broadcast_notification';
-import { initTopNav } from './nav';
 import { initCopyCodeButton } from './behaviors/copy_code';
 import initGitlabVersionCheck from './gitlab_version_check';
 
@@ -82,9 +81,6 @@ initRails();
 function deferredInitialisation() {
   const $body = $('body');
 
-  if (!gon.use_new_navigation) {
-    initTopNav();
-  }
   initBreadcrumbs();
   initPrefetchLinks('.js-prefetch-document');
   initLogoAnimation();
diff --git a/app/assets/javascripts/ml/model_registry/apps/show_ml_model.vue b/app/assets/javascripts/ml/model_registry/apps/show_ml_model.vue
index 2c60e05dc57..a3182d9e622 100644
--- a/app/assets/javascripts/ml/model_registry/apps/show_ml_model.vue
+++ b/app/assets/javascripts/ml/model_registry/apps/show_ml_model.vue
@@ -3,6 +3,7 @@ import { GlTab, GlTabs, GlBadge } from '@gitlab/ui';
 import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import ModelVersionList from '~/ml/model_registry/components/model_version_list.vue';
+import ModelVersionDetail from '~/ml/model_registry/components/model_version_detail.vue';
 import * as i18n from '../translations';
 
 export default {
@@ -14,6 +15,7 @@ export default {
     GlTab,
     GlBadge,
     MetadataItem,
+    ModelVersionDetail,
   },
   props: {
     model: {
@@ -28,6 +30,9 @@ export default {
     candidateCount() {
       return this.model.candidateCount || 0;
     },
+    latestVersionTitle() {
+      return `${i18n.LATEST_VERSION_LABEL}: ${this.model.latestVersion.version}`;
+    },
   },
   i18n,
 };
@@ -50,9 +55,9 @@ export default {
 
     <gl-tabs class="gl-mt-4">
       <gl-tab :title="$options.i18n.MODEL_DETAILS_TAB_LABEL">
-        <h3 class="gl-font-lg">{{ $options.i18n.LATEST_VERSION_LABEL }}</h3>
         <template v-if="model.latestVersion">
-          {{ model.latestVersion.version }}
+          <h3 class="gl-font-lg">{{ latestVersionTitle }}</h3>
+          <model-version-detail :model-version="model.latestVersion" />
         </template>
         <div v-else class="gl-text-secondary">{{ $options.i18n.NO_VERSIONS_LABEL }}</div>
       </gl-tab>
diff --git a/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue b/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue
index a9440aff1ce..6608f44ecf7 100644
--- a/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue
+++ b/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue
@@ -1,16 +1,30 @@
 <script>
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import ModelVersionDetail from '../components/model_version_detail.vue';
+
 export default {
   name: 'ShowMlModelVersionApp',
-  components: {},
+  components: {
+    ModelVersionDetail,
+    TitleArea,
+  },
   props: {
     modelVersion: {
       type: Object,
       required: true,
     },
   },
+  computed: {
+    title() {
+      return `${this.modelVersion.model.name} / ${this.modelVersion.version}`;
+    },
+  },
 };
 </script>
 
 <template>
-  <div>{{ modelVersion.model.name }} - {{ modelVersion.version }}</div>
+  <div>
+    <title-area :title="title" />
+    <model-version-detail :model-version="modelVersion" />
+  </div>
 </template>
diff --git a/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue b/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue
new file mode 100644
index 00000000000..19d91df43b2
--- /dev/null
+++ b/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue
@@ -0,0 +1,44 @@
+<script>
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPENAME_PACKAGES_PACKAGE } from '~/graphql_shared/constants';
+
+export default {
+  name: 'ModelVersionDetail',
+  components: {
+    PackageFiles: () =>
+      import('~/packages_and_registries/package_registry/components/details/package_files.vue'),
+  },
+  props: {
+    modelVersion: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    packageId() {
+      return convertToGraphQLId(TYPENAME_PACKAGES_PACKAGE, this.modelVersion.packageId);
+    },
+    projectPath() {
+      return this.modelVersion.projectPath;
+    },
+    packageType() {
+      return 'ml_model';
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <p>
+      {{ modelVersion.description }}
+    </p>
+    <template v-if="modelVersion.packageId">
+      <package-files
+        :package-id="packageId"
+        :project-path="projectPath"
+        :package-type="packageType"
+      />
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/nav/components/responsive_app.vue b/app/assets/javascripts/nav/components/responsive_app.vue
deleted file mode 100644
index 68a39f862fc..00000000000
--- a/app/assets/javascripts/nav/components/responsive_app.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-import { FREQUENT_ITEMS_PROJECTS, FREQUENT_ITEMS_GROUPS } from '~/frequent_items/constants';
-import { BV_DROPDOWN_SHOW, BV_DROPDOWN_HIDE } from '~/lib/utils/constants';
-import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
-import { resetMenuItemsActive } from '../utils';
-import ResponsiveHeader from './responsive_header.vue';
-import ResponsiveHome from './responsive_home.vue';
-import TopNavContainerView from './top_nav_container_view.vue';
-
-export default {
-  components: {
-    KeepAliveSlots,
-    ResponsiveHeader,
-    ResponsiveHome,
-    TopNavContainerView,
-  },
-  props: {
-    navData: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      activeView: 'home',
-      hasMobileOverlay: false,
-    };
-  },
-  computed: {
-    nav() {
-      return resetMenuItemsActive(this.navData);
-    },
-  },
-  created() {
-    this.$root.$on(BV_DROPDOWN_SHOW, this.showMobileOverlay);
-    this.$root.$on(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
-  },
-  beforeDestroy() {
-    this.$root.$off(BV_DROPDOWN_SHOW, this.showMobileOverlay);
-    this.$root.$off(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
-  },
-  methods: {
-    onMenuItemClick({ view }) {
-      if (view) {
-        this.activeView = view;
-      }
-    },
-    showMobileOverlay() {
-      this.hasMobileOverlay = true;
-    },
-    hideMobileOverlay() {
-      this.hasMobileOverlay = false;
-    },
-  },
-  FREQUENT_ITEMS_PROJECTS,
-  FREQUENT_ITEMS_GROUPS,
-};
-</script>
-
-<template>
-  <div>
-    <div
-      class="mobile-overlay"
-      :class="{ 'mobile-nav-open': hasMobileOverlay }"
-      data-testid="mobile-overlay"
-    ></div>
-    <keep-alive-slots :slot-key="activeView">
-      <template #home>
-        <responsive-home :nav-data="nav" @menu-item-click="onMenuItemClick" />
-      </template>
-      <template #projects>
-        <responsive-header @menu-item-click="onMenuItemClick">
-          {{ __('Projects') }}
-        </responsive-header>
-        <top-nav-container-view
-          :frequent-items-dropdown-type="$options.FREQUENT_ITEMS_PROJECTS.namespace"
-          :frequent-items-vuex-module="$options.FREQUENT_ITEMS_PROJECTS.vuexModule"
-          container-class="gl-px-3"
-          v-bind="nav.views.projects"
-        />
-      </template>
-      <template #groups>
-        <responsive-header @menu-item-click="onMenuItemClick">
-          {{ __('Groups') }}
-        </responsive-header>
-        <top-nav-container-view
-          :frequent-items-dropdown-type="$options.FREQUENT_ITEMS_GROUPS.namespace"
-          :frequent-items-vuex-module="$options.FREQUENT_ITEMS_GROUPS.vuexModule"
-          container-class="gl-px-3"
-          v-bind="nav.views.groups"
-        />
-      </template>
-    </keep-alive-slots>
-  </div>
-</template>
diff --git a/app/assets/javascripts/nav/components/responsive_header.vue b/app/assets/javascripts/nav/components/responsive_header.vue
deleted file mode 100644
index e29b4a67383..00000000000
--- a/app/assets/javascripts/nav/components/responsive_header.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import TopNavMenuItem from './top_nav_menu_item.vue';
-
-export default {
-  components: {
-    TopNavMenuItem,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  computed: {
-    menuItem() {
-      return {
-        id: 'home',
-        view: 'home',
-        icon: 'chevron-lg-left',
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <header class="gl-py-4 gl-display-flex gl-align-items-center">
-    <top-nav-menu-item
-      v-gl-tooltip="{ title: s__('TopNav|Go back') }"
-      class="gl-p-3!"
-      :menu-item="menuItem"
-      icon-only
-      @click="$emit('menu-item-click', menuItem)"
-    />
-    <span class="gl-font-size-h2 gl-font-weight-bold gl-ml-2">
-      <slot></slot>
-    </span>
-  </header>
-</template>
diff --git a/app/assets/javascripts/nav/components/responsive_home.vue b/app/assets/javascripts/nav/components/responsive_home.vue
deleted file mode 100644
index 371b252a6ba..00000000000
--- a/app/assets/javascripts/nav/components/responsive_home.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import TopNavMenuItem from './top_nav_menu_item.vue';
-import TopNavMenuSections from './top_nav_menu_sections.vue';
-import TopNavNewDropdown from './top_nav_new_dropdown.vue';
-
-const NEW_VIEW = 'new';
-const SEARCH_VIEW = 'search';
-
-export default {
-  components: {
-    TopNavMenuItem,
-    TopNavMenuSections,
-    TopNavNewDropdown,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    navData: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    menuSections() {
-      return [
-        { id: 'primary', menuItems: this.navData.primary },
-        { id: 'secondary', menuItems: this.navData.secondary },
-      ].filter((x) => x.menuItems?.length);
-    },
-    newDropdownViewModel() {
-      return this.navData.views[NEW_VIEW];
-    },
-    searchMenuItem() {
-      return this.navData.views[SEARCH_VIEW];
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <header class="gl-display-flex gl-align-items-center gl-py-4 gl-pl-4">
-      <h1 class="gl-m-0 gl-font-size-h2 gl-reset-color gl-mr-auto">{{ __('Menu') }}</h1>
-      <top-nav-menu-item
-        v-if="searchMenuItem"
-        v-gl-tooltip="{ title: searchMenuItem.title }"
-        class="gl-ml-3"
-        :menu-item="searchMenuItem"
-        icon-only
-      />
-      <top-nav-new-dropdown
-        v-if="newDropdownViewModel"
-        v-gl-tooltip="{ title: newDropdownViewModel.title }"
-        :view-model="newDropdownViewModel"
-        class="gl-ml-3"
-        data-testid="mobile_new_dropdown"
-      />
-    </header>
-    <top-nav-menu-sections class="gl-h-full" :sections="menuSections" v-on="$listeners" />
-  </div>
-</template>
diff --git a/app/assets/javascripts/nav/components/top_nav_app.vue b/app/assets/javascripts/nav/components/top_nav_app.vue
deleted file mode 100644
index 22c77e9ae32..00000000000
--- a/app/assets/javascripts/nav/components/top_nav_app.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-import { GlNav, GlIcon, GlNavItemDropdown, GlDropdownForm, GlTooltipDirective } from '@gitlab/ui';
-import Tracking from '~/tracking';
-import TopNavDropdownMenu from './top_nav_dropdown_menu.vue';
-
-export default {
-  components: {
-    GlIcon,
-    GlNav,
-    GlNavItemDropdown,
-    GlDropdownForm,
-    TopNavDropdownMenu,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    navData: {
-      type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    trackToggleEvent() {
-      Tracking.event(undefined, 'click_nav', {
-        label: 'hamburger_menu',
-        property: 'navigation_top',
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-nav class="navbar-sub-nav">
-    <gl-nav-item-dropdown
-      v-gl-tooltip.bottom="navData.menuTooltip"
-      data-testid="navbar_dropdown"
-      data-qa-title="Menu"
-      menu-class="gl-mt-3! gl-max-w-none! gl-max-h-none! gl-sm-w-auto! js-top-nav-dropdown-menu"
-      toggle-class="top-nav-toggle js-top-nav-dropdown-toggle gl-px-3!"
-      no-flip
-      no-caret
-      @toggle="trackToggleEvent"
-    >
-      <template #button-content>
-        <gl-icon name="hamburger" />
-        <span v-if="navData.menuTitle" class="gl-ml-3">
-          {{ navData.menuTitle }}
-        </span>
-      </template>
-      <gl-dropdown-form>
-        <top-nav-dropdown-menu
-          :primary="navData.primary"
-          :secondary="navData.secondary"
-          :views="navData.views"
-        />
-      </gl-dropdown-form>
-    </gl-nav-item-dropdown>
-  </gl-nav>
-</template>
diff --git a/app/assets/javascripts/nav/components/top_nav_container_view.vue b/app/assets/javascripts/nav/components/top_nav_container_view.vue
deleted file mode 100644
index 36e4a278da9..00000000000
--- a/app/assets/javascripts/nav/components/top_nav_container_view.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script>
-import FrequentItemsApp from '~/frequent_items/components/app.vue';
-import eventHub from '~/frequent_items/event_hub';
-import VuexModuleProvider from '~/vue_shared/components/vuex_module_provider.vue';
-import TopNavMenuSections from './top_nav_menu_sections.vue';
-
-export default {
-  components: {
-    FrequentItemsApp,
-    TopNavMenuSections,
-    VuexModuleProvider,
-  },
-  inheritAttrs: false,
-  props: {
-    frequentItemsVuexModule: {
-      type: String,
-      required: true,
-    },
-    frequentItemsDropdownType: {
-      type: String,
-      required: true,
-    },
-    currentItem: {
-      type: Object,
-      required: true,
-    },
-    containerClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    linksPrimary: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    linksSecondary: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-  },
-  computed: {
-    menuSections() {
-      return [
-        { id: 'primary', menuItems: this.linksPrimary },
-        { id: 'secondary', menuItems: this.linksSecondary },
-      ].filter((x) => x.menuItems?.length);
-    },
-    currentItemTimestamped() {
-      return {
-        ...this.currentItem,
-        lastAccessedOn: Date.now(),
-      };
-    },
-  },
-  mounted() {
-    // For historic reasons, the frequent-items-app component requires this too start up.
-    this.$nextTick(() => {
-      eventHub.$emit(`${this.frequentItemsDropdownType}-dropdownOpen`);
-    });
-  },
-};
-</script>
-
-<template>
-  <div class="top-nav-container-view gl-display-flex gl-flex-direction-column">
-    <div
-      class="frequent-items-dropdown-container gl-w-auto"
-      :class="containerClass"
-      data-testid="frequent-items-container"
-    >
-      <div class="frequent-items-dropdown-content gl-w-full! gl-pt-0!">
-        <vuex-module-provider :vuex-module="frequentItemsVuexModule">
-          <frequent-items-app :current-item="currentItemTimestamped" v-bind="$attrs" />
-        </vuex-module-provider>
-      </div>
-    </div>
-    <top-nav-menu-sections class="gl-mt-auto" :sections="menuSections" with-top-border />
-  </div>
-</template>
diff --git a/app/assets/javascripts/nav/components/top_nav_dropdown_menu.vue b/app/assets/javascripts/nav/components/top_nav_dropdown_menu.vue
deleted file mode 100644
index fa202a0574d..00000000000
--- a/app/assets/javascripts/nav/components/top_nav_dropdown_menu.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script>
-import { cloneDeep } from 'lodash';
-import { FREQUENT_ITEMS_PROJECTS, FREQUENT_ITEMS_GROUPS } from '~/frequent_items/constants';
-import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
-import TopNavContainerView from './top_nav_container_view.vue';
-import TopNavMenuSections from './top_nav_menu_sections.vue';
-
-export default {
-  components: {
-    KeepAliveSlots,
-    TopNavContainerView,
-    TopNavMenuSections,
-  },
-  props: {
-    primary: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    secondary: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    views: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-  },
-  data() {
-    // It's expected that primary & secondary never change, so these are treated as "init" props.
-    // We need to clone so that we can mutate the data without mutating the props
-    const menuSections = [
-      { id: 'primary', menuItems: cloneDeep(this.primary) },
-      { id: 'secondary', menuItems: cloneDeep(this.secondary) },
-    ].filter((x) => x.menuItems?.length);
-
-    return {
-      menuSections,
-    };
-  },
-  computed: {
-    allMenuItems() {
-      return this.menuSections.flatMap((x) => x.menuItems);
-    },
-    activeView() {
-      const active = this.allMenuItems.find((x) => x.active);
-
-      return active?.view;
-    },
-    menuClass() {
-      if (!this.activeView) {
-        return 'gl-w-full';
-      }
-
-      return '';
-    },
-  },
-  methods: {
-    onMenuItemClick({ id }) {
-      this.allMenuItems.forEach((menuItem) => {
-        this.$set(menuItem, 'active', id === menuItem.id);
-      });
-    },
-  },
-  FREQUENT_ITEMS_PROJECTS,
-  FREQUENT_ITEMS_GROUPS,
-};
-</script>
-
-<template>
-  <div class="gl-display-flex gl-align-items-stretch">
-    <div
-      class="gl-w-grid-size-30 gl-flex-shrink-0 gl-bg-gray-10 gl-p-3"
-      :class="menuClass"
-      data-testid="menu-sidebar"
-    >
-      <top-nav-menu-sections
-        :sections="menuSections"
-        :is-primary-section="true"
-        @menu-item-click="onMenuItemClick"
-      />
-    </div>
-    <keep-alive-slots
-      v-show="activeView"
-      :slot-key="activeView"
-      class="gl-w-grid-size-40 gl-overflow-hidden gl-p-3"
-      data-testid="menu-subview"
-    >
-      <template #projects>
-        <top-nav-container-view
-          :frequent-items-dropdown-type="$options.FREQUENT_ITEMS_PROJECTS.namespace"
-          :frequent-items-vuex-module="$options.FREQUENT_ITEMS_PROJECTS.vuexModule"
-          v-bind="views.projects"
-        />
-      </template>
-      <template #groups>
-        <top-nav-container-view
-          :frequent-items-dropdown-type="$options.FREQUENT_ITEMS_GROUPS.namespace"
-          :frequent-items-vuex-module="$options.FREQUENT_ITEMS_GROUPS.vuexModule"
-          v-bind="views.groups"
-        />
-      </template>
-    </keep-alive-slots>
-  </div>
-</template>
diff --git a/app/assets/javascripts/nav/components/top_nav_menu_item.vue b/app/assets/javascripts/nav/components/top_nav_menu_item.vue
deleted file mode 100644
index bf1fd691ca8..00000000000
--- a/app/assets/javascripts/nav/components/top_nav_menu_item.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-import { GlButton, GlIcon } from '@gitlab/ui';
-import { kebabCase, mapKeys } from 'lodash';
-
-const getDataKey = (key) => `data-${kebabCase(key)}`;
-
-const ACTIVE_CLASS = 'gl-shadow-none! gl-font-weight-bold! active';
-
-export default {
-  components: {
-    GlButton,
-    GlIcon,
-  },
-  props: {
-    menuItem: {
-      type: Object,
-      required: true,
-    },
-    iconOnly: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    dataAttrs() {
-      return mapKeys(this.menuItem.data || {}, (value, key) => getDataKey(key));
-    },
-  },
-  ACTIVE_CLASS,
-};
-</script>
-
-<template>
-  <gl-button
-    category="tertiary"
-    :href="menuItem.href"
-    class="top-nav-menu-item gl-display-block gl-pr-3!"
-    :class="[menuItem.css_class, { [$options.ACTIVE_CLASS]: menuItem.active }]"
-    :aria-label="menuItem.title"
-    v-bind="dataAttrs"
-    v-on="$listeners"
-  >
-    <span class="gl-display-flex">
-      <gl-icon v-if="menuItem.icon" :name="menuItem.icon" :class="{ 'gl-mr-3!': !iconOnly }" />
-      <template v-if="!iconOnly">
-        {{ menuItem.title }}
-        <gl-icon v-if="menuItem.view" name="chevron-right" class="gl-ml-auto" />
-      </template>
-    </span>
-  </gl-button>
-</template>
diff --git a/app/assets/javascripts/nav/components/top_nav_menu_sections.vue b/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
deleted file mode 100644
index 1f3f11dc624..00000000000
--- a/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-import TopNavMenuItem from './top_nav_menu_item.vue';
-
-const BORDER_CLASSES = 'gl-pt-3 gl-border-1 gl-border-t-solid';
-
-export default {
-  components: {
-    TopNavMenuItem,
-  },
-  props: {
-    sections: {
-      type: Array,
-      required: true,
-    },
-    withTopBorder: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isPrimarySection: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  methods: {
-    onClick(menuItem) {
-      // If we're a link, let's just do the default behavior so the view won't change
-      if (menuItem.href) {
-        return;
-      }
-
-      this.$emit('menu-item-click', menuItem);
-    },
-    getMenuSectionClasses(index) {
-      // This is a method instead of a computed so we don't have to incur the cost of
-      // creating a whole new array/object.
-      const hasBorder = this.withTopBorder || index > 0;
-      return {
-        [BORDER_CLASSES]: hasBorder,
-        'gl-border-gray-100': hasBorder && this.isPrimarySection,
-        'gl-border-gray-50': hasBorder && !this.isPrimarySection,
-        'gl-mt-3': index > 0,
-      };
-    },
-  },
-  // Expose for unit tests
-  BORDER_CLASSES,
-};
-</script>
-
-<template>
-  <div class="gl-display-flex gl-align-items-stretch gl-flex-direction-column">
-    <div
-      v-for="({ id, menuItems }, sectionIndex) in sections"
-      :key="id"
-      :class="getMenuSectionClasses(sectionIndex)"
-      data-testid="menu-section"
-    >
-      <template v-for="(menuItem, menuItemIndex) in menuItems">
-        <strong
-          v-if="menuItem.type == 'header'"
-          :key="menuItem.title"
-          class="gl-px-4 gl-py-2 gl-text-gray-900 gl-display-block"
-          :class="{ 'gl-pt-3!': menuItemIndex > 0 }"
-          data-testid="menu-header"
-        >
-          {{ menuItem.title }}
-        </strong>
-        <top-nav-menu-item
-          v-else
-          :key="menuItem.id"
-          :menu-item="menuItem"
-          data-testid="menu-item"
-          class="gl-w-full"
-          :class="{ 'gl-mt-1': menuItemIndex > 0 }"
-          @click="onClick(menuItem)"
-        />
-      </template>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/nav/components/top_nav_new_dropdown.vue b/app/assets/javascripts/nav/components/top_nav_new_dropdown.vue
deleted file mode 100644
index 2dfd77bc02e..00000000000
--- a/app/assets/javascripts/nav/components/top_nav_new_dropdown.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script>
-import { GlDropdown, GlDropdownDivider, GlDropdownItem, GlDropdownSectionHeader } from '@gitlab/ui';
-import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
-import { TOP_NAV_INVITE_MEMBERS_COMPONENT } from '~/invite_members/constants';
-
-export default {
-  components: {
-    GlDropdown,
-    GlDropdownDivider,
-    GlDropdownItem,
-    GlDropdownSectionHeader,
-    InviteMembersTrigger,
-  },
-  props: {
-    viewModel: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    sections() {
-      return this.viewModel.menu_sections || [];
-    },
-    showHeaders() {
-      return this.sections.length > 1;
-    },
-  },
-  methods: {
-    isInvitedMembers(menuItem) {
-      return menuItem.component === TOP_NAV_INVITE_MEMBERS_COMPONENT;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-dropdown
-    toggle-class="top-nav-menu-item"
-    icon="plus"
-    :text="viewModel.title"
-    category="tertiary"
-    text-sr-only
-    no-caret
-    right
-  >
-    <template v-for="({ title, menu_items }, index) in sections">
-      <gl-dropdown-divider v-if="index > 0" :key="`${index}_divider`" data-testid="divider" />
-      <gl-dropdown-section-header v-if="showHeaders" :key="`${index}_header`" data-testid="header">
-        {{ title }}
-      </gl-dropdown-section-header>
-      <template v-for="menuItem in menu_items">
-        <invite-members-trigger
-          v-if="isInvitedMembers(menuItem)"
-          :key="`${index}_item_${menuItem.id}`"
-          :trigger-element="`dropdown-${menuItem.data.trigger_element}`"
-          :display-text="menuItem.title"
-          :icon="menuItem.icon"
-          :trigger-source="menuItem.data.trigger_source"
-        />
-        <gl-dropdown-item
-          v-else
-          :key="`${index}_item_${menuItem.id}`"
-          link-class="top-nav-menu-item"
-          :href="menuItem.href"
-          data-testid="item"
-          :data-qa-selector="`${menuItem.title.toLowerCase().replace(' ', '_')}_mobile_button`"
-        >
-          {{ menuItem.title }}
-        </gl-dropdown-item>
-      </template>
-    </template>
-  </gl-dropdown>
-</template>
diff --git a/app/assets/javascripts/nav/index.js b/app/assets/javascripts/nav/index.js
deleted file mode 100644
index abd537d2c9a..00000000000
--- a/app/assets/javascripts/nav/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// TODO: With the combined_menu feature flag removed, there's likely a better
-// way to slice up the async import (i.e., include trigger in main bundle, but
-// async import subviews. Don't do this at the cost of UX).
-// See https://gitlab.com/gitlab-org/gitlab/-/issues/336042
-const importModule = () => import(/* webpackChunkName: 'top_nav' */ './mount');
-
-const tryMountTopNav = async () => {
-  const el = document.getElementById('js-top-nav');
-
-  if (!el) {
-    return;
-  }
-
-  const { mountTopNav } = await importModule();
-
-  mountTopNav(el);
-};
-
-const tryMountTopNavResponsive = async () => {
-  const el = document.getElementById('js-top-nav-responsive');
-
-  if (!el) {
-    return;
-  }
-
-  const { mountTopNavResponsive } = await importModule();
-
-  mountTopNavResponsive(el);
-};
-
-export const initTopNav = async () => Promise.all([tryMountTopNav(), tryMountTopNavResponsive()]);
diff --git a/app/assets/javascripts/nav/mount.js b/app/assets/javascripts/nav/mount.js
deleted file mode 100644
index 0fc946bea76..00000000000
--- a/app/assets/javascripts/nav/mount.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Vue from 'vue';
-// eslint-disable-next-line no-restricted-imports
-import Vuex from 'vuex';
-import ResponsiveApp from './components/responsive_app.vue';
-import App from './components/top_nav_app.vue';
-import { createStore } from './stores';
-
-Vue.use(Vuex);
-
-const mount = (el, Component) => {
-  const viewModel = JSON.parse(el.dataset.viewModel);
-  const store = createStore();
-
-  return new Vue({
-    el,
-    name: 'TopNavRoot',
-    store,
-    render(h) {
-      return h(Component, {
-        props: {
-          navData: viewModel,
-        },
-      });
-    },
-  });
-};
-
-export const mountTopNav = (el) => mount(el, App);
-
-export const mountTopNavResponsive = (el) => mount(el, ResponsiveApp);
diff --git a/app/assets/javascripts/nav/stores/index.js b/app/assets/javascripts/nav/stores/index.js
deleted file mode 100644
index 7c8f93f042c..00000000000
--- a/app/assets/javascripts/nav/stores/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import Vuex from 'vuex';
-import { createStoreOptions } from '~/frequent_items/store';
-
-export const createStore = () => new Vuex.Store(createStoreOptions());
diff --git a/app/assets/javascripts/nav/utils/index.js b/app/assets/javascripts/nav/utils/index.js
deleted file mode 100644
index 6d93818f0d3..00000000000
--- a/app/assets/javascripts/nav/utils/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './reset_menu_items_active';
diff --git a/app/assets/javascripts/nav/utils/reset_menu_items_active.js b/app/assets/javascripts/nav/utils/reset_menu_items_active.js
deleted file mode 100644
index 9b5d8e97c9c..00000000000
--- a/app/assets/javascripts/nav/utils/reset_menu_items_active.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const resetActiveInArray = (arr) => arr?.map((menuItem) => ({ ...menuItem, active: false }));
-
-/**
- * This method sets `active: false` for the menu items within the given nav data.
- *
- * @returns navData with the menu items updated with `active: false`
- */
-export const resetMenuItemsActive = ({ primary, secondary, ...navData }) => {
-  return {
-    ...navData,
-    primary: resetActiveInArray(primary),
-    secondary: resetActiveInArray(secondary),
-  };
-};
diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index be13e69f225..9c3f9dda4d0 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -251,10 +251,26 @@ async function fetchOperations(operationsUrl, serviceName) {
   }
 }
 
-async function fetchMetrics(metricsUrl) {
+async function fetchMetrics(metricsUrl, { filters = {}, limit } = {}) {
   try {
+    const params = new URLSearchParams();
+
+    if (Array.isArray(filters.search)) {
+      const searchPrefix = filters.search
+        .map((f) => f.value)
+        .join(' ')
+        .trim();
+
+      if (searchPrefix) {
+        params.append('starts_with', searchPrefix);
+        if (limit) {
+          params.append('limit', limit);
+        }
+      }
+    }
     const { data } = await axios.get(metricsUrl, {
       withCredentials: true,
+      params,
     });
     if (!Array.isArray(data.metrics)) {
       throw new Error('metrics are missing/invalid in the response'); // eslint-disable-line @gitlab/require-i18n-strings
@@ -299,6 +315,6 @@ export function buildClient(config) {
     fetchTrace: (traceId) => fetchTrace(tracingUrl, traceId),
     fetchServices: () => fetchServices(servicesUrl),
     fetchOperations: (serviceName) => fetchOperations(operationsUrl, serviceName),
-    fetchMetrics: () => fetchMetrics(metricsUrl),
+    fetchMetrics: (options) => fetchMetrics(metricsUrl, options),
   };
 }
diff --git a/app/assets/javascripts/pages/projects/ml/model_versions/show/index.js b/app/assets/javascripts/pages/projects/ml/model_versions/show/index.js
index 1a2b85d7e16..7202dcccd31 100644
--- a/app/assets/javascripts/pages/projects/ml/model_versions/show/index.js
+++ b/app/assets/javascripts/pages/projects/ml/model_versions/show/index.js
@@ -1,4 +1,4 @@
 import { initSimpleApp } from '~/helpers/init_simple_app_helper';
 import { ShowMlModelVersion } from '~/ml/model_registry/apps';
 
-initSimpleApp('#js-mount-show-ml-model-version', ShowMlModelVersion);
+initSimpleApp('#js-mount-show-ml-model-version', ShowMlModelVersion, { withApolloProvider: true });
diff --git a/app/assets/javascripts/profile/edit/components/profile_edit_app.vue b/app/assets/javascripts/profile/edit/components/profile_edit_app.vue
index 815b8742500..eedb5d7764e 100644
--- a/app/assets/javascripts/profile/edit/components/profile_edit_app.vue
+++ b/app/assets/javascripts/profile/edit/components/profile_edit_app.vue
@@ -3,7 +3,6 @@ import { nextTick } from 'vue';
 import { GlForm, GlButton } from '@gitlab/ui';
 import { VARIANT_DANGER, VARIANT_INFO, createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
-import { readFileAsDataURL } from '~/lib/utils/file_utility';
 import SetStatusForm from '~/set_status_modal/set_status_form.vue';
 import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue';
 import { isUserBusy, computedClearStatusAfterValue } from '~/set_status_modal/utils';
@@ -106,20 +105,12 @@ export default {
         this.updateProfileSettings = false;
       }
     },
-    async syncHeaderAvatars() {
-      const dataURL = await readFileAsDataURL(this.avatarBlob);
-
-      const elements = gon?.use_new_navigation
-        ? ['[data-testid="user-dropdown"] .gl-avatar']
-        : ['.header-user-avatar', '.js-sidebar-user-avatar'];
-
-      elements.forEach((selector) => {
-        const node = document.querySelector(selector);
-        if (!node) return;
-
-        node.setAttribute('src', dataURL);
-        node.setAttribute('srcset', dataURL);
-      });
+    syncHeaderAvatars() {
+      document.dispatchEvent(
+        new CustomEvent('userAvatar:update', {
+          detail: { url: URL.createObjectURL(this.avatarBlob) },
+        }),
+      );
     },
     onBlobChange(blob) {
       this.avatarBlob = blob;
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index 4d3824f910c..16f0110a1af 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -89,12 +89,9 @@ export default class Profile {
   }
 
   updateHeaderAvatar() {
-    if (gon?.use_new_navigation) {
-      $('[data-testid="user-dropdown"] .gl-avatar').attr('src', this.avatarGlCrop.dataURL);
-    } else {
-      $('.header-user-avatar').attr('src', this.avatarGlCrop.dataURL);
-      $('.js-sidebar-user-avatar').attr('src', this.avatarGlCrop.dataURL);
-    }
+    const url = URL.createObjectURL(this.avatarGlCrop.getBlob());
+
+    document.dispatchEvent(new CustomEvent('userAvatar:update', { detail: { url } }));
   }
 
   setRepoRadio() {
diff --git a/app/assets/javascripts/projects/details/upload_button.vue b/app/assets/javascripts/projects/details/upload_button.vue
index e1c8c66a214..d19ec4bcab6 100644
--- a/app/assets/javascripts/projects/details/upload_button.vue
+++ b/app/assets/javascripts/projects/details/upload_button.vue
@@ -36,7 +36,10 @@ export default {
   <span>
     <gl-button
       v-gl-modal="$options.uploadBlobModalId"
+      variant="link"
       icon="upload"
+      class="stat-link gl-px-0!"
+      button-text-classes="gl-ml-2"
       data-testid="upload-file-button"
       >{{ __('Upload File') }}</gl-button
     >
diff --git a/app/assets/javascripts/repository/components/delete_blob_modal.vue b/app/assets/javascripts/repository/components/delete_blob_modal.vue
index 079d4c522a8..8d4c4384e1d 100644
--- a/app/assets/javascripts/repository/components/delete_blob_modal.vue
+++ b/app/assets/javascripts/repository/components/delete_blob_modal.vue
@@ -269,6 +269,7 @@ export default {
             :invalid-feedback="form.fields['commit_message'].feedback"
           >
             <gl-form-textarea
+              id="commit_message"
               ref="message"
               v-model="form.fields['commit_message'].value"
               v-validation:[form.showValidation]
@@ -289,6 +290,7 @@ export default {
             :invalid-feedback="form.fields['branch_name'].feedback"
           >
             <gl-form-input
+              id="branch_name"
               v-model="form.fields['branch_name'].value"
               v-validation:[form.showValidation]
               :state="form.fields['branch_name'].state"
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu.vue b/app/assets/javascripts/super_sidebar/components/user_menu.vue
index db769df873f..5dab74374df 100644
--- a/app/assets/javascripts/super_sidebar/components/user_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_menu.vue
@@ -59,9 +59,13 @@ export default {
   data() {
     return {
       setStatusModalReady: false,
+      updatedAvatarUrl: null,
     };
   },
   computed: {
+    avatarUrl() {
+      return this.updatedAvatarUrl || this.data.avatar_url;
+    },
     toggleText() {
       return sprintf(__('%{user} user’s menu'), { user: this.data.name });
     },
@@ -190,7 +194,16 @@ export default {
       };
     },
   },
+  mounted() {
+    document.addEventListener('userAvatar:update', this.updateAvatar);
+  },
+  unmounted() {
+    document.removeEventListener('userAvatar:update', this.updateAvatar);
+  },
   methods: {
+    updateAvatar(event) {
+      this.updatedAvatarUrl = event.detail?.url;
+    },
     onShow() {
       this.initBuyCIMinsCallout();
     },
@@ -240,7 +253,7 @@ export default {
           <gl-avatar
             :size="24"
             :entity-name="data.name"
-            :src="data.avatar_url"
+            :src="avatarUrl"
             aria-hidden="true"
             data-testid="user-avatar-content"
           />
diff --git a/app/assets/javascripts/super_sidebar/utils.js b/app/assets/javascripts/super_sidebar/utils.js
index dbea306eced..2f24eb84f92 100644
--- a/app/assets/javascripts/super_sidebar/utils.js
+++ b/app/assets/javascripts/super_sidebar/utils.js
@@ -27,6 +27,22 @@ const sortItemsByFrequencyAndLastAccess = (items) =>
   });
 
 /**
+ * Returns the most frequently visited items.
+ *
+ * @param {Array} items - A list of items retrieved from the local storage
+ * @param {Number} maxCount - The maximum number of items to be returned
+ * @returns {Array}
+ */
+export const getTopFrequentItems = (items, maxCount) => {
+  if (!Array.isArray(items)) return [];
+
+  const frequentItems = items.filter((item) => item.frequency >= FREQUENT_ITEMS.ELIGIBLE_FREQUENCY);
+  sortItemsByFrequencyAndLastAccess(frequentItems);
+
+  return frequentItems.slice(0, maxCount);
+};
+
+/**
  * This tracks projects' and groups' visits in order to suggest a list of frequently visited
  * entities to the user. The suggestion logic is implemented server-side and computed items can be
  * retrieved through the GraphQL API.
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/checks/constants.js b/app/assets/javascripts/vue_merge_request_widget/components/checks/constants.js
index 431348e1d57..a8d2736531a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/checks/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/checks/constants.js
@@ -1,6 +1,6 @@
 export const COMPONENTS = {
   conflict: () => import('./conflicts.vue'),
-  unresolved_discussions: () => import('./unresolved_discussions.vue'),
+  discussions_not_resolved: () => import('./unresolved_discussions.vue'),
   need_rebase: () => import('./rebase.vue'),
   default: () => import('./message.vue'),
 };
diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss
index 504f1405148..b3477b5d4c5 100644
--- a/app/assets/stylesheets/page_bundles/project.scss
+++ b/app/assets/stylesheets/page_bundles/project.scss
@@ -134,7 +134,7 @@
 
     .stat-text,
     .stat-link {
-      padding: $gl-btn-vert-padding 0;
+      padding: $gl-btn-vert-padding;
       background-color: transparent;
       font-size: $gl-font-size;
       line-height: $gl-btn-line-height;
@@ -149,7 +149,6 @@
       &:hover,
       &:focus {
         text-decoration: underline;
-        border-bottom: 0;
       }
 
       .project-stat-value {
@@ -159,13 +158,6 @@
       .icon {
         color: var(--gray-500, $gl-text-color-secondary);
       }
-
-      .add-license-link {
-        &,
-        .icon {
-          color: var(--blue-600, $blue-600);
-        }
-      }
     }
 
     .btn {
@@ -186,3 +178,60 @@
     color: var(--gl-text-color, $gl-text-color);
   }
 }
+
+// FF :project_overview_reorg enabled
+.project-page-indicator:not(.hidden) + .project-page-layout {
+  --project-overview-sidebar-width: 290px;
+
+  @include media-breakpoint-up(lg) {
+    display: grid;
+    grid-template-columns: auto var(--project-overview-sidebar-width);
+    gap: 2rem;
+
+    .project-page-layout-content,
+    .project-page-layout-sidebar {
+      min-width: 1px;
+    }
+
+    .project-page-layout-sidebar {
+      order: 2;
+      overflow-x: clip;
+      margin-right: -$gl-padding-8;
+    }
+
+    .project-page-sidebar {
+      position: sticky;
+      top: calc(#{$calc-application-header-height} + #{$gl-spacing-scale-4});
+      width: calc(100% + 100px);
+      height: calc(
+        #{$calc-application-viewport-height} - #{$gl-spacing-scale-4}
+      );
+      padding-inline: $gl-padding-4;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+
+      .project-page-sidebar-block {
+        width: calc(var(--project-overview-sidebar-width) - 1px);
+
+        &:first-of-type {
+          padding-top: $gl-spacing-scale-1;
+        }
+      }
+
+      .nav {
+        > li {
+          width: 100%;
+        }
+
+        .btn {
+          justify-content: flex-start;
+
+          &:not(.btn-dashed) {
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/projects.scss b/app/assets/stylesheets/page_bundles/projects.scss
index d252afd0b29..1afc456a16a 100644
--- a/app/assets/stylesheets/page_bundles/projects.scss
+++ b/app/assets/stylesheets/page_bundles/projects.scss
@@ -235,8 +235,7 @@
 }
 
 .repository-languages-bar {
-  height: 8px;
-  margin-bottom: $gl-padding;
+  height: 0.5rem;
   background-color: var(--white, $white);
   border-radius: $border-radius-default;