Add latest changes from gitlab-org/gitlab@master

26 files changed, 115 insertions, 314 deletions

diff --git a/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue b/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
index f6a375ab94c..ab2fe63ae05 100644
--- a/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
@@ -92,7 +92,7 @@ export default {
       'is-upstream': isUpstream,
       'is-downstream': isDownstream,
     }"
-    class="linked-pipeline-mini-list gl-display-inline gl-vertical-align-middle"
+    class="linked-pipeline-mini-list gl-display-inline-flex gl-gap-2 gl-vertical-align-middle"
   >
     <ci-icon
       v-for="pipeline in linkedPipelinesTrimmed"
diff --git a/app/assets/javascripts/editor/schema/ci.json b/app/assets/javascripts/editor/schema/ci.json
index 308a68544bc..2319ecccd5b 100644
--- a/app/assets/javascripts/editor/schema/ci.json
+++ b/app/assets/javascripts/editor/schema/ci.json
@@ -509,6 +509,18 @@
               "description": "Command or script that should be executed as the container's entrypoint. It will be translated to Docker's --entrypoint option while creating the container. The syntax is similar to Dockerfile's ENTRYPOINT directive, where each shell token is a separate string in the array.",
               "minItems": 1
             },
+            "docker": {
+              "type": "object",
+              "description": "Options to pass to Runners Docker Executor",
+              "additionalProperties": false,
+              "properties": {
+                "platform": {
+                  "type": "string",
+                  "minLength": 1,
+                  "description": "Image architecture to pull."
+                }
+              }
+            },
             "pull_policy": {
               "markdownDescription": "Specifies how to pull the image in Runner. It can be one of `always`, `never` or `if-not-present`. The default value is `always`. [Learn more](https://docs.gitlab.com/ee/ci/yaml/#imagepull_policy).",
               "default": "always",
@@ -579,6 +591,18 @@
                   "type": "string"
                 }
               },
+              "docker": {
+                "type": "object",
+                "description": "Options to pass to Runners Docker Executor",
+                "additionalProperties": false,
+                "properties": {
+                  "platform": {
+                    "type": "string",
+                    "minLength": 1,
+                    "description": "Image architecture to pull."
+                  }
+                }
+              },
               "pull_policy": {
                 "markdownDescription": "Specifies how to pull the image in Runner. It can be one of `always`, `never` or `if-not-present`. The default value is `always`. [Learn more](https://docs.gitlab.com/ee/ci/yaml/#servicepull_policy).",
                 "default": "always",
diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js
index f98369c2fde..c4279e9d8e7 100644
--- a/app/assets/javascripts/emoji/index.js
+++ b/app/assets/javascripts/emoji/index.js
@@ -77,6 +77,8 @@ async function loadEmojiWithNames() {
 }
 
 export async function loadCustomEmojiWithNames() {
+  const emojiData = { emojis: {}, names: [] };
+
   if (document.body?.dataset?.groupFullPath && window.gon?.features?.customEmoji) {
     const client = createApolloClient();
     const { data } = await client.query({
@@ -86,26 +88,21 @@ export async function loadCustomEmojiWithNames() {
       },
     });
 
-    return data?.group?.customEmoji?.nodes?.reduce(
-      (acc, e) => {
-        // Map the custom emoji into the format of the normal emojis
-        acc.emojis[e.name] = {
-          c: 'custom',
-          d: e.name,
-          e: undefined,
-          name: e.name,
-          src: e.url,
-          u: 'custom',
-        };
-        acc.names.push(e.name);
-
-        return acc;
-      },
-      { emojis: {}, names: [] },
-    );
+    data?.group?.customEmoji?.nodes?.forEach((e) => {
+      // Map the custom emoji into the format of the normal emojis
+      emojiData.emojis[e.name] = {
+        c: 'custom',
+        d: e.name,
+        e: undefined,
+        name: e.name,
+        src: e.url,
+        u: 'custom',
+      };
+      emojiData.names.push(e.name);
+    });
   }
 
-  return { emojis: {}, names: [] };
+  return emojiData;
 }
 
 async function prepareEmojiMap() {
diff --git a/app/assets/javascripts/organizations/users/components/app.vue b/app/assets/javascripts/organizations/users/components/app.vue
index ae22bedd69a..1d5ea895ff0 100644
--- a/app/assets/javascripts/organizations/users/components/app.vue
+++ b/app/assets/javascripts/organizations/users/components/app.vue
@@ -2,9 +2,13 @@
 import { __, s__ } from '~/locale';
 import { createAlert } from '~/alert';
 import organizationUsersQuery from '../graphql/organization_users.query.graphql';
+import UsersView from './users_view.vue';
 
 export default {
   name: 'OrganizationsUsersApp',
+  components: {
+    UsersView,
+  },
   i18n: {
     users: __('Users'),
     loadingPlaceholder: __('Loading'),
@@ -25,7 +29,9 @@ export default {
         return { id: this.organizationGid };
       },
       update(data) {
-        return data.organization.organizationUsers.nodes;
+        return data.organization.organizationUsers.nodes.map(({ badges, user }) => {
+          return { ...user, badges, email: user.publicEmail };
+        });
       },
       error(error) {
         createAlert({ message: this.$options.i18n.errorMessage, error, captureError: true });
@@ -43,9 +49,6 @@ export default {
 <template>
   <section>
     <h1 class="gl-my-4 gl-font-size-h-display">{{ $options.i18n.users }}</h1>
-    <template v-if="loading">
-      {{ $options.i18n.loadingPlaceholder }}
-    </template>
-    <div data-testid="organization-users">{{ users }}</div>
+    <users-view :users="users" :loading="loading" />
   </section>
 </template>
diff --git a/app/assets/javascripts/organizations/users/components/users_view.vue b/app/assets/javascripts/organizations/users/components/users_view.vue
new file mode 100644
index 00000000000..fac353bdaf6
--- /dev/null
+++ b/app/assets/javascripts/organizations/users/components/users_view.vue
@@ -0,0 +1,30 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import UsersTable from '~/vue_shared/components/users_table/users_table.vue';
+
+export default {
+  name: 'UsersView',
+  components: {
+    GlLoadingIcon,
+    UsersTable,
+  },
+  inject: ['paths'],
+  props: {
+    users: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-loading-icon v-if="loading" class="gl-mt-5" size="md" />
+  <users-table v-else :users="users" :admin-user-path="paths.adminUser" />
+</template>
diff --git a/app/assets/javascripts/organizations/users/graphql/organization_users.query.graphql b/app/assets/javascripts/organizations/users/graphql/organization_users.query.graphql
index a0b2a639401..d98ebf9cd26 100644
--- a/app/assets/javascripts/organizations/users/graphql/organization_users.query.graphql
+++ b/app/assets/javascripts/organizations/users/graphql/organization_users.query.graphql
@@ -10,6 +10,12 @@ query getOrganizationUsers($id: OrganizationsOrganizationID!) {
         id
         user {
           id
+          username
+          avatarUrl
+          name
+          publicEmail
+          createdAt
+          lastActivityOn
         }
       }
     }
diff --git a/app/assets/javascripts/organizations/users/index.js b/app/assets/javascripts/organizations/users/index.js
index 76656243075..794ae9e70a6 100644
--- a/app/assets/javascripts/organizations/users/index.js
+++ b/app/assets/javascripts/organizations/users/index.js
@@ -13,7 +13,9 @@ export const initOrganizationsUsers = () => {
     defaultClient: createDefaultClient(),
   });
 
-  const { organizationGid } = convertObjectPropsToCamelCase(el.dataset);
+  const { organizationGid, paths } = convertObjectPropsToCamelCase(JSON.parse(el.dataset.appData), {
+    deep: true,
+  });
 
   return new Vue({
     el,
@@ -21,6 +23,7 @@ export const initOrganizationsUsers = () => {
     apolloProvider,
     provide: {
       organizationGid,
+      paths,
     },
     render(createElement) {
       return createElement(OrganizationsUsersApp);
diff --git a/app/assets/javascripts/search/index.js b/app/assets/javascripts/search/index.js
index f83130213f2..dfb2c519c28 100644
--- a/app/assets/javascripts/search/index.js
+++ b/app/assets/javascripts/search/index.js
@@ -15,7 +15,6 @@ export const initSearchApp = () => {
   const store = createStore({
     query,
     navigation,
-    useSidebarNavigation: gon.use_new_navigation,
     searchType,
   });
 
diff --git a/app/assets/javascripts/search/sidebar/components/app.vue b/app/assets/javascripts/search/sidebar/components/app.vue
index 86a5f5107f8..e0c49412d56 100644
--- a/app/assets/javascripts/search/sidebar/components/app.vue
+++ b/app/assets/javascripts/search/sidebar/components/app.vue
@@ -2,9 +2,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { mapState, mapGetters } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import ScopeLegacyNavigation from '~/search/sidebar/components/scope_legacy_navigation.vue';
 import ScopeSidebarNavigation from '~/search/sidebar/components/scope_sidebar_navigation.vue';
-import SmallScreenDrawerNavigation from '~/search/sidebar/components/small_screen_drawer_navigation.vue';
 import SidebarPortal from '~/super_sidebar/components/sidebar_portal.vue';
 import { toggleSuperSidebarCollapsed } from '~/super_sidebar/super_sidebar_collapsed_state_manager';
 import DomElementListener from '~/vue_shared/components/dom_element_listener.vue';
@@ -37,18 +35,15 @@ export default {
     ProjectsFilters,
     NotesFilters,
     WikiBlobsFilters,
-    ScopeLegacyNavigation,
     ScopeSidebarNavigation,
     SidebarPortal,
     DomElementListener,
-    SmallScreenDrawerNavigation,
     CommitsFilters,
     MilestonesFilters,
   },
   mixins: [glFeatureFlagsMixin()],
   computed: {
-    // useSidebarNavigation refers to whether the new left sidebar navigation is enabled
-    ...mapState(['useSidebarNavigation', 'searchType']),
+    ...mapState(['searchType']),
     ...mapGetters(['currentScope']),
     showIssuesFilters() {
       return this.currentScope === SCOPE_ISSUES;
@@ -77,12 +72,6 @@ export default {
         this.glFeatures?.searchProjectWikisHideArchivedProjects
       );
     },
-    showScopeNavigation() {
-      // showScopeNavigation refers to whether the scope navigation should be shown
-      // while the legacy navigation is being used and there are no search results
-      // the scope navigation has to be hidden
-      return Boolean(this.currentScope);
-    },
   },
   methods: {
     toggleFiltersFromSidebar() {
@@ -93,7 +82,7 @@ export default {
 </script>
 
 <template>
-  <section v-if="useSidebarNavigation">
+  <section>
     <dom-element-listener selector="#js-open-mobile-filters" @click="toggleFiltersFromSidebar" />
     <sidebar-portal>
       <scope-sidebar-navigation />
@@ -107,32 +96,4 @@ export default {
       <wiki-blobs-filters v-if="showWikiBlobsFilters" />
     </sidebar-portal>
   </section>
-
-  <section
-    v-else-if="showScopeNavigation"
-    class="gl-display-flex gl-flex-direction-column gl-lg-mr-0 gl-md-mr-5 gl-lg-mb-6 gl-lg-mt-5"
-  >
-    <div class="search-sidebar gl-display-none gl-lg-display-block">
-      <scope-legacy-navigation />
-      <issues-filters v-if="showIssuesFilters" />
-      <merge-requests-filters v-if="showMergeRequestFilters" />
-      <blobs-filters v-if="showBlobFilters" />
-      <projects-filters v-if="showProjectsFilters" />
-      <notes-filters v-if="showNotesFilters" />
-      <commits-filters v-if="showCommitsFilters" />
-      <milestones-filters v-if="showMilestonesFilters" />
-      <wiki-blobs-filters v-if="showWikiBlobsFilters" />
-    </div>
-    <small-screen-drawer-navigation class="gl-lg-display-none">
-      <scope-legacy-navigation />
-      <issues-filters v-if="showIssuesFilters" />
-      <merge-requests-filters v-if="showMergeRequestFilters" />
-      <blobs-filters v-if="showBlobFilters" />
-      <projects-filters v-if="showProjectsFilters" />
-      <notes-filters v-if="showNotesFilters" />
-      <commits-filters v-if="showCommitsFilters" />
-      <milestones-filters v-if="showMilestonesFilters" />
-      <wiki-blobs-filters v-if="showWikiBlobsFilters" />
-    </small-screen-drawer-navigation>
-  </section>
 </template>
diff --git a/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue b/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue
index b0e84beabc4..914ff99075b 100644
--- a/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue
+++ b/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue
@@ -21,7 +21,7 @@ export default {
     tooltip: s__('GlobalSearch|Include search results from archived projects'),
   },
   computed: {
-    ...mapState(['urlQuery', 'useSidebarNavigation']),
+    ...mapState(['urlQuery']),
     selectedFilter: {
       get() {
         return [parseBoolean(this.urlQuery?.include_archived)];
@@ -48,7 +48,7 @@ export default {
 
 <template>
   <gl-form-checkbox-group v-model="selectedFilter">
-    <h5 class="gl-mt-0 gl-mb-5" :class="{ 'gl-font-sm': useSidebarNavigation }">
+    <h5 class="gl-mt-0 gl-mb-5 gl-font-sm">
       {{ $options.archivedFilterData.headerLabel }}
     </h5>
     <gl-form-checkbox
diff --git a/app/assets/javascripts/search/sidebar/components/blobs_filters.vue b/app/assets/javascripts/search/sidebar/components/blobs_filters.vue
index 0ed2c24efba..e282bacae31 100644
--- a/app/assets/javascripts/search/sidebar/components/blobs_filters.vue
+++ b/app/assets/javascripts/search/sidebar/components/blobs_filters.vue
@@ -1,8 +1,4 @@
 <script>
-// eslint-disable-next-line no-restricted-imports
-import { mapGetters, mapState } from 'vuex';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { HR_DEFAULT_CLASSES } from '../constants';
 import LanguageFilter from './language_filter/index.vue';
 import ArchivedFilter from './archived_filter/index.vue';
 import FiltersTemplate from './filters_template.vue';
@@ -14,24 +10,12 @@ export default {
     FiltersTemplate,
     ArchivedFilter,
   },
-  mixins: [glFeatureFlagsMixin()],
-  computed: {
-    ...mapGetters(['currentScope']),
-    ...mapState(['useSidebarNavigation', 'searchType']),
-    showDivider() {
-      return !this.useSidebarNavigation;
-    },
-    hrClasses() {
-      return [...HR_DEFAULT_CLASSES, 'gl-display-none', 'gl-md-display-block'];
-    },
-  },
 };
 </script>
 
 <template>
   <filters-template>
     <language-filter class="gl-mb-5" />
-    <hr v-if="showDivider" :class="hrClasses" />
     <archived-filter class="gl-mb-5" />
   </filters-template>
 </template>
diff --git a/app/assets/javascripts/search/sidebar/components/confidentiality_filter/index.vue b/app/assets/javascripts/search/sidebar/components/confidentiality_filter/index.vue
index 176614be6da..4e91158fa36 100644
--- a/app/assets/javascripts/search/sidebar/components/confidentiality_filter/index.vue
+++ b/app/assets/javascripts/search/sidebar/components/confidentiality_filter/index.vue
@@ -1,6 +1,4 @@
 <script>
-// eslint-disable-next-line no-restricted-imports
-import { mapState } from 'vuex';
 import RadioFilter from '../radio_filter.vue';
 import { confidentialFilterData } from './data';
 
@@ -9,9 +7,6 @@ export default {
   components: {
     RadioFilter,
   },
-  computed: {
-    ...mapState(['useSidebarNavigation']),
-  },
   confidentialFilterData,
 };
 </script>
diff --git a/app/assets/javascripts/search/sidebar/components/filters_template.vue b/app/assets/javascripts/search/sidebar/components/filters_template.vue
index 0f68bf92048..a3aa392d7fc 100644
--- a/app/assets/javascripts/search/sidebar/components/filters_template.vue
+++ b/app/assets/javascripts/search/sidebar/components/filters_template.vue
@@ -5,7 +5,6 @@ import { mapActions, mapState, mapGetters } from 'vuex';
 import Tracking from '~/tracking';
 
 import {
-  HR_DEFAULT_CLASSES,
   TRACKING_ACTION_CLICK,
   TRACKING_LABEL_APPLY,
   TRACKING_LABEL_RESET,
@@ -19,7 +18,7 @@ export default {
     GlForm,
   },
   computed: {
-    ...mapState(['sidebarDirty', 'useSidebarNavigation']),
+    ...mapState(['sidebarDirty']),
     ...mapGetters(['currentScope']),
   },
   methods: {
@@ -37,15 +36,12 @@ export default {
       this.resetQuery();
     },
   },
-  HR_DEFAULT_CLASSES,
 };
 </script>
 
 <template>
   <gl-form class="issue-filters gl-px-5 gl-pt-0" @submit.prevent="applyQueryWithTracking">
-    <hr v-if="!useSidebarNavigation" :class="$options.HR_DEFAULT_CLASSES" />
     <slot></slot>
-    <hr v-if="!useSidebarNavigation" :class="$options.HR_DEFAULT_CLASSES" />
     <div class="gl-display-flex gl-align-items-center gl-mt-4">
       <gl-button category="primary" variant="confirm" type="submit" :disabled="!sidebarDirty">
         {{ __('Apply') }}
diff --git a/app/assets/javascripts/search/sidebar/components/issues_filters.vue b/app/assets/javascripts/search/sidebar/components/issues_filters.vue
index a77fb34cdba..7136959ee0b 100644
--- a/app/assets/javascripts/search/sidebar/components/issues_filters.vue
+++ b/app/assets/javascripts/search/sidebar/components/issues_filters.vue
@@ -2,7 +2,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { mapGetters, mapState } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { HR_DEFAULT_CLASSES, SEARCH_TYPE_ADVANCED } from '../constants';
+import { SEARCH_TYPE_ADVANCED } from '../constants';
 import { confidentialFilterData } from './confidentiality_filter/data';
 import { statusFilterData } from './status_filter/data';
 import ConfidentialityFilter from './confidentiality_filter/index.vue';
@@ -26,7 +26,7 @@ export default {
   mixins: [glFeatureFlagsMixin()],
   computed: {
     ...mapGetters(['currentScope']),
-    ...mapState(['useSidebarNavigation', 'searchType']),
+    ...mapState(['searchType']),
     showConfidentialityFilter() {
       return Object.values(confidentialFilterData.scopes).includes(this.currentScope);
     },
@@ -43,12 +43,6 @@ export default {
     showArchivedFilter() {
       return archivedFilterData.scopes.includes(this.currentScope);
     },
-    showDivider() {
-      return !this.useSidebarNavigation;
-    },
-    hrClasses() {
-      return [...HR_DEFAULT_CLASSES, 'gl-display-none', 'gl-md-display-block'];
-    },
   },
 };
 </script>
@@ -56,11 +50,8 @@ export default {
 <template>
   <filters-template>
     <status-filter v-if="showStatusFilter" class="gl-mb-5" />
-    <hr v-if="showConfidentialityFilter && showDivider" :class="hrClasses" />
     <confidentiality-filter v-if="showConfidentialityFilter" class="gl-mb-5" />
-    <hr v-if="showLabelFilter && showDivider" :class="hrClasses" />
     <label-filter v-if="showLabelFilter" class="gl-mb-5" />
-    <hr v-if="showArchivedFilter && showDivider" :class="hrClasses" />
     <archived-filter v-if="showArchivedFilter" class="gl-mb-5" />
   </filters-template>
 </template>
diff --git a/app/assets/javascripts/search/sidebar/components/label_filter/index.vue b/app/assets/javascripts/search/sidebar/components/label_filter/index.vue
index 97583730958..a53f519161b 100644
--- a/app/assets/javascripts/search/sidebar/components/label_filter/index.vue
+++ b/app/assets/javascripts/search/sidebar/components/label_filter/index.vue
@@ -55,7 +55,7 @@ export default {
   },
   i18n: I18N,
   computed: {
-    ...mapState(['useSidebarNavigation', 'searchLabelString', 'query', 'urlQuery', 'aggregations']),
+    ...mapState(['searchLabelString', 'query', 'urlQuery', 'aggregations']),
     ...mapGetters([
       'filteredLabels',
       'filteredUnselectedLabels',
@@ -179,11 +179,7 @@ export default {
 
 <template>
   <div class="gl-pb-0 gl-md-pt-0 label-filter gl-relative">
-    <h5
-      class="gl-my-0"
-      data-testid="label-filter-title"
-      :class="{ 'gl-font-sm': useSidebarNavigation }"
-    >
+    <h5 class="gl-my-0 gl-font-sm" data-testid="label-filter-title">
       {{ $options.labelFilterData.header }}
     </h5>
     <div class="gl-my-5">
@@ -246,12 +242,7 @@ export default {
       v-if="isFocused"
       v-outside="closeDropdown"
       data-testid="header-search-dropdown-menu"
-      class="header-search-dropdown-menu gl-overflow-y-auto gl-absolute gl-w-full gl-bg-white gl-border-1 gl-rounded-base gl-border-solid gl-border-gray-200 gl-shadow-x0-y2-b4-s0 gl-mt-3 gl-z-index-2"
-      :class="{
-        'gl-max-w-none!': useSidebarNavigation,
-        'gl-min-w-full!': useSidebarNavigation,
-        'gl-w-full!': useSidebarNavigation,
-      }"
+      class="header-search-dropdown-menu gl-overflow-y-auto gl-absolute gl-bg-white gl-border-1 gl-rounded-base gl-border-solid gl-border-gray-200 gl-shadow-x0-y2-b4-s0 gl-mt-3 gl-z-index-2 gl-w-full! gl-min-w-full! gl-max-w-none!"
     >
       <div class="header-search-dropdown-content gl-py-2">
         <dropdown-keyboard-navigation
diff --git a/app/assets/javascripts/search/sidebar/components/language_filter/index.vue b/app/assets/javascripts/search/sidebar/components/language_filter/index.vue
index 784207cc702..4a9975641c6 100644
--- a/app/assets/javascripts/search/sidebar/components/language_filter/index.vue
+++ b/app/assets/javascripts/search/sidebar/components/language_filter/index.vue
@@ -27,7 +27,7 @@ export default {
     loadError: s__('GlobalSearch|Aggregations load error.'),
   },
   computed: {
-    ...mapState(['aggregations', 'useSidebarNavigation']),
+    ...mapState(['aggregations']),
     ...mapGetters(['languageAggregationBuckets']),
     hasBuckets() {
       return this.languageAggregationBuckets.length > 0;
@@ -75,7 +75,7 @@ export default {
 
 <template>
   <div v-if="hasBuckets" class="language-filter-checkbox">
-    <h5 class="gl-mt-0 gl-mb-5" :class="{ 'gl-font-sm': useSidebarNavigation }">
+    <h5 class="gl-mt-0 gl-mb-5 gl-font-sm">
       {{ $options.languageFilterData.header }}
     </h5>
     <div
diff --git a/app/assets/javascripts/search/sidebar/components/merge_requests_filters.vue b/app/assets/javascripts/search/sidebar/components/merge_requests_filters.vue
index f86906ebd26..18074db7603 100644
--- a/app/assets/javascripts/search/sidebar/components/merge_requests_filters.vue
+++ b/app/assets/javascripts/search/sidebar/components/merge_requests_filters.vue
@@ -1,7 +1,6 @@
 <script>
 // eslint-disable-next-line no-restricted-imports
-import { mapGetters, mapState } from 'vuex';
-import { HR_DEFAULT_CLASSES } from '../constants';
+import { mapGetters } from 'vuex';
 import { statusFilterData } from './status_filter/data';
 import StatusFilter from './status_filter/index.vue';
 import FiltersTemplate from './filters_template.vue';
@@ -17,19 +16,12 @@ export default {
   },
   computed: {
     ...mapGetters(['currentScope']),
-    ...mapState(['useSidebarNavigation', 'searchType']),
     showArchivedFilter() {
       return archivedFilterData.scopes.includes(this.currentScope);
     },
     showStatusFilter() {
       return Object.values(statusFilterData.scopes).includes(this.currentScope);
     },
-    showDivider() {
-      return !this.useSidebarNavigation;
-    },
-    hrClasses() {
-      return [...HR_DEFAULT_CLASSES, 'gl-display-none', 'gl-md-display-block'];
-    },
   },
 };
 </script>
@@ -37,7 +29,6 @@ export default {
 <template>
   <filters-template>
     <status-filter v-if="showStatusFilter" class="gl-mb-5" />
-    <hr v-if="showArchivedFilter && showDivider" :class="hrClasses" />
     <archived-filter v-if="showArchivedFilter" class="gl-mb-5" />
   </filters-template>
 </template>
diff --git a/app/assets/javascripts/search/sidebar/components/radio_filter.vue b/app/assets/javascripts/search/sidebar/components/radio_filter.vue
index a1eb5ccecd8..d67844b93a7 100644
--- a/app/assets/javascripts/search/sidebar/components/radio_filter.vue
+++ b/app/assets/javascripts/search/sidebar/components/radio_filter.vue
@@ -17,7 +17,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['query', 'useSidebarNavigation']),
+    ...mapState(['query']),
     ...mapGetters(['currentScope']),
     ANY() {
       return this.filterData.filters.ANY;
@@ -57,7 +57,7 @@ export default {
 
 <template>
   <div>
-    <h5 class="gl-mt-0 gl-mb-5" :class="{ 'gl-font-sm': useSidebarNavigation }">
+    <h5 class="gl-mt-0 gl-mb-5 gl-font-sm">
       {{ filterData.header }}
     </h5>
     <gl-form-radio-group v-model="selectedFilter">
diff --git a/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue b/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue
deleted file mode 100644
index a4c1119736f..00000000000
--- a/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script>
-import { GlNav, GlNavItem, GlIcon } from '@gitlab/ui';
-// eslint-disable-next-line no-restricted-imports
-import { mapActions, mapState } from 'vuex';
-import { s__ } from '~/locale';
-import Tracking from '~/tracking';
-import { formatSearchResultCount, addCountOverLimit } from '~/search/store/utils';
-import { NAV_LINK_DEFAULT_CLASSES, NAV_LINK_COUNT_DEFAULT_CLASSES } from '../constants';
-import { slugifyWithUnderscore } from '../../../lib/utils/text_utility';
-
-export default {
-  name: 'ScopeLegacyNavigation',
-  i18n: {
-    countOverLimitLabel: s__('GlobalSearch|Result count is over limit.'),
-  },
-  components: {
-    GlNav,
-    GlNavItem,
-    GlIcon,
-  },
-  mixins: [Tracking.mixin()],
-  computed: {
-    ...mapState(['navigation', 'urlQuery']),
-  },
-  created() {
-    if (this.urlQuery?.search) {
-      this.fetchSidebarCount();
-    }
-  },
-  methods: {
-    ...mapActions(['fetchSidebarCount']),
-    showFormatedCount(countString) {
-      return formatSearchResultCount(countString);
-    },
-    isCountOverLimit(countString) {
-      return Boolean(addCountOverLimit(countString));
-    },
-    handleClick(scope) {
-      this.track('click_menu_item', { label: `vertical_navigation_${scope}` });
-    },
-    linkClasses(isHighlighted) {
-      return [...this.$options.NAV_LINK_DEFAULT_CLASSES, { 'gl-font-weight-bold': isHighlighted }];
-    },
-    countClasses(isHighlighted) {
-      return [
-        ...this.$options.NAV_LINK_COUNT_DEFAULT_CLASSES,
-        isHighlighted ? 'gl-text-gray-900' : 'gl-text-gray-500',
-      ];
-    },
-    qaSelectorValue(item) {
-      return `${slugifyWithUnderscore(item.label)}_tab`;
-    },
-  },
-  NAV_LINK_DEFAULT_CLASSES,
-  NAV_LINK_COUNT_DEFAULT_CLASSES,
-};
-</script>
-
-<template>
-  <nav data-testid="search-filter" class="gl-border-none">
-    <gl-nav vertical pills>
-      <gl-nav-item
-        v-for="(item, scope) in navigation"
-        :key="scope"
-        :link-classes="linkClasses(item.active)"
-        class="gl-mb-1"
-        :href="item.link"
-        :active="item.active"
-        :data-qa-selector="qaSelectorValue(item)"
-        :data-testid="qaSelectorValue(item)"
-        @click="handleClick(scope)"
-        ><span data-testid="label">{{ item.label }}</span
-        ><span v-if="item.count" data-testid="count" :class="countClasses(item.active)">
-          {{ showFormatedCount(item.count)
-          }}<gl-icon
-            v-if="isCountOverLimit(item.count)"
-            name="plus"
-            :aria-label="$options.i18n.countOverLimitLabel"
-            :size="8"
-          />
-        </span>
-      </gl-nav-item>
-    </gl-nav>
-  </nav>
-</template>
diff --git a/app/assets/javascripts/search/sidebar/components/small_screen_drawer_navigation.vue b/app/assets/javascripts/search/sidebar/components/small_screen_drawer_navigation.vue
deleted file mode 100644
index e966b8d877e..00000000000
--- a/app/assets/javascripts/search/sidebar/components/small_screen_drawer_navigation.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-import { GlDrawer } from '@gitlab/ui';
-import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
-import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
-import DomElementListener from '~/vue_shared/components/dom_element_listener.vue';
-import { s__ } from '~/locale';
-
-export default {
-  name: 'SmallScreenDrawerNavigation',
-  components: {
-    GlDrawer,
-    DomElementListener,
-  },
-  i18n: {
-    smallScreenFiltersDrawerHeader: s__('GlobalSearch|Filters'),
-  },
-  data() {
-    return {
-      openSmallScreenFilters: false,
-    };
-  },
-  computed: {
-    getDrawerHeaderHeight() {
-      if (!this.openSmallScreenFilters) return '0';
-      return getContentWrapperHeight();
-    },
-  },
-  methods: {
-    closeSmallScreenFilters() {
-      this.openSmallScreenFilters = false;
-    },
-    toggleSmallScreenFilters() {
-      this.openSmallScreenFilters = !this.openSmallScreenFilters;
-    },
-  },
-  DRAWER_Z_INDEX,
-};
-</script>
-<template>
-  <dom-element-listener selector="#js-open-mobile-filters" @click="toggleSmallScreenFilters">
-    <gl-drawer
-      :header-height="getDrawerHeaderHeight"
-      :z-index="$options.DRAWER_Z_INDEX"
-      variant="sidebar"
-      class="small-screen-drawer-navigation"
-      :open="openSmallScreenFilters"
-      @close="closeSmallScreenFilters"
-    >
-      <template #title>
-        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">
-          {{ $options.i18n.smallScreenFiltersDrawerHeader }}
-        </h2>
-      </template>
-      <template #default>
-        <div>
-          <slot></slot>
-        </div>
-      </template>
-    </gl-drawer>
-  </dom-element-listener>
-</template>
diff --git a/app/assets/javascripts/search/sidebar/components/status_filter/index.vue b/app/assets/javascripts/search/sidebar/components/status_filter/index.vue
index a5f717dcf06..cbc1a26f1ae 100644
--- a/app/assets/javascripts/search/sidebar/components/status_filter/index.vue
+++ b/app/assets/javascripts/search/sidebar/components/status_filter/index.vue
@@ -1,5 +1,4 @@
 <script>
-import { HR_DEFAULT_CLASSES } from '../../constants';
 import RadioFilter from '../radio_filter.vue';
 import { statusFilterData } from './data';
 
@@ -9,7 +8,6 @@ export default {
     RadioFilter,
   },
   statusFilterData,
-  HR_DEFAULT_CLASSES,
 };
 </script>
 
diff --git a/app/assets/javascripts/search/sidebar/constants/index.js b/app/assets/javascripts/search/sidebar/constants/index.js
index 1559155a941..95906c840d7 100644
--- a/app/assets/javascripts/search/sidebar/constants/index.js
+++ b/app/assets/javascripts/search/sidebar/constants/index.js
@@ -18,8 +18,6 @@ export const NAV_LINK_DEFAULT_CLASSES = [
   'gl-justify-content-space-between',
 ];
 export const NAV_LINK_COUNT_DEFAULT_CLASSES = ['gl-font-sm', 'gl-font-weight-normal'];
-export const HR_DEFAULT_CLASSES = ['hr-x', 'gl-border-gray-100'];
-export const ONLY_SHOW_MD = ['gl-display-none', 'gl-md-display-block'];
 
 export const TRACKING_ACTION_CLICK = 'search:filters:click';
 export const TRACKING_LABEL_APPLY = 'Apply Filters';
diff --git a/app/assets/javascripts/search/store/state.js b/app/assets/javascripts/search/store/state.js
index b4cd2af65ba..9c38a230343 100644
--- a/app/assets/javascripts/search/store/state.js
+++ b/app/assets/javascripts/search/store/state.js
@@ -1,7 +1,7 @@
 import { cloneDeep } from 'lodash';
 import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from './constants';
 
-const createState = ({ query, navigation, useSidebarNavigation, searchType }) => ({
+const createState = ({ query, navigation, searchType }) => ({
   urlQuery: cloneDeep(query),
   query,
   groups: [],
@@ -14,7 +14,6 @@ const createState = ({ query, navigation, useSidebarNavigation, searchType }) =>
   },
   sidebarDirty: false,
   navigation,
-  useSidebarNavigation,
   aggregations: {
     error: false,
     fetching: false,
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index b8618e09761..8f95dd1dcec 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -39,6 +39,7 @@ export default {
   i18n: {
     skipToMainContent: __('Skip to main content'),
     primaryNavigation: s__('Navigation|Primary navigation'),
+    adminArea: s__('Navigation|Admin Area'),
   },
   inject: ['showTrialStatusWidget'],
   props: {
@@ -220,6 +221,16 @@ export default {
         </div>
         <div class="gl-p-3">
           <help-center ref="helpCenter" :sidebar-data="sidebarData" />
+          <gl-button
+            v-if="sidebarData.is_admin"
+            class="gl-fixed gl-right-0 gl-mr-3 gl-mt-2"
+            data-testid="sidebar-admin-link"
+            :href="sidebarData.admin_url"
+            icon="admin"
+            size="small"
+          >
+            {{ $options.i18n.adminArea }}
+          </gl-button>
         </div>
       </div>
     </nav>
diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss
index a3a62b44e98..b145d046fa4 100644
--- a/app/assets/stylesheets/page_bundles/search.scss
+++ b/app/assets/stylesheets/page_bundles/search.scss
@@ -31,26 +31,6 @@ $language-filter-max-height: 20rem;
   }
 }
 
-.search-sidebar {
-  @include media-breakpoint-down(lg) {
-    max-width: 100%;
-  }
-
-  @include media-breakpoint-down(xl) {
-    min-width: $search-sidebar-min-width;
-    max-width: $search-sidebar-min-width;
-  }
-
-  @include media-breakpoint-up(xl) {
-    min-width: $search-sidebar-max-width;
-    max-width: $search-sidebar-max-width;
-  }
-
-  .language-filter-max-height {
-    max-height: $language-filter-max-height;
-  }
-}
-
 .issue-filters {
   .label-filter {
     list-style: none;
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index db20034419a..9d4f6cabcd9 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -235,16 +235,6 @@
     }
   }
 
-  .search-sidebar {
-    .nav-link {
-      &.active,
-      &:hover {
-        background-color: rgba($gray-50, 0.8);
-        color: $gray-900;
-      }
-    }
-  }
-
   // Sidebar
   .nav-sidebar li.active > a {
     color: $gray-900;