From e0c47c86bedb5867ea61424057b00261213c602a Mon Sep 17 00:00:00 2001
From: aregnery <aregnery@gitlab.com>
Date: Fri, 26 Sep 2025 12:05:41 -0400
Subject: [PATCH] Adjust the presenation of admin area link

Changelog: changed
---
 .../super_sidebar/components/super_topbar.vue | 16 +-------------
 .../super_sidebar/components/user_menu.vue    | 19 +++++++++++++---
 .../components/super_topbar_spec.js           | 22 -------------------
 3 files changed, 17 insertions(+), 40 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/super_topbar.vue b/app/assets/javascripts/super_sidebar/components/super_topbar.vue
index 619e9a05b329c6..266a13c537b6fe 100644
--- a/app/assets/javascripts/super_sidebar/components/super_topbar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_topbar.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlBadge, GlButton, GlIcon, GlModalDirective } from '@gitlab/ui';
-import { __, s__ } from '~/locale';
+import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
 import SuperSidebarToggle from './super_sidebar_toggle.vue';
@@ -37,7 +37,6 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   i18n: {
-    adminArea: s__('Navigation|Admin'),
     searchBtnText: __('Search or go to…'),
   },
   inject: ['isSaas'],
@@ -48,9 +47,6 @@ export default {
     },
   },
   computed: {
-    isAdmin() {
-      return this.sidebarData?.admin_mode?.user_is_admin;
-    },
     isLoggedIn() {
       return this.sidebarData.is_logged_in;
     },
@@ -128,16 +124,6 @@ export default {
             counter-class="gl-button btn btn-default btn-default-tertiary !gl-px-3 !gl-rounded-lg"
           />
 
-          <gl-button
-            v-if="isAdmin"
-            :href="sidebarData.admin_url"
-            icon="admin"
-            class="topbar-admin-link gl-hidden !gl-rounded-lg sm:gl-mr-1 xl:gl-flex"
-            data-testid="topbar-admin-link"
-          >
-            {{ $options.i18n.adminArea }}
-          </gl-button>
-
           <user-menu :data="sidebarData" />
         </template>
         <template v-else>
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu.vue b/app/assets/javascripts/super_sidebar/components/user_menu.vue
index 8b59818c069de1..1d8ca4fb0fbc15 100644
--- a/app/assets/javascripts/super_sidebar/components/user_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_menu.vue
@@ -305,7 +305,8 @@ export default {
 <template>
   <div
     :class="{
-      'gl-flex gl-rounded-[1rem] gl-bg-neutral-800 dark:gl-bg-neutral-50': projectStudioEnabled,
+      'gl-items-centered gl-flex gl-h-7 gl-rounded-[1rem] gl-bg-neutral-800 gl-pl-2 dark:gl-bg-neutral-50':
+        projectStudioEnabled,
     }"
   >
     <gl-button
@@ -315,12 +316,24 @@ export default {
       :title="$options.i18n.stopImpersonating"
       :aria-label="$options.i18n.stopImpersonating"
       icon="incognito"
-      class="-gl-mr-4 !gl-rounded-l-[1rem] !gl-rounded-r-none !gl-pl-3 !gl-pr-5 !gl-text-neutral-0 dark:!gl-text-neutral-800"
+      size="small"
+      class="gl-my-2 !gl-rounded-full !gl-text-neutral-0 dark:!gl-text-neutral-800"
       category="tertiary"
       data-method="delete"
       data-testid="stop-impersonation-btn"
     />
 
+    <gl-button
+      v-if="projectStudioEnabled && isAdmin"
+      :href="data.admin_url"
+      size="small"
+      class="gl-my-2 gl-hidden !gl-rounded-full !gl-text-sm !gl-text-neutral-0 lg:gl-flex dark:!gl-text-neutral-800"
+      category="tertiary"
+      data-testid="admin-link"
+    >
+      {{ $options.i18n.adminArea }}
+    </gl-button>
+
     <gl-disclosure-dropdown
       ref="userDropdown"
       :dropdown-offset="dropdownOffset"
@@ -403,7 +416,7 @@ export default {
         <gl-disclosure-dropdown-item
           v-if="projectStudioEnabled && isAdmin"
           :item="adminLinkItem"
-          class="xl:gl-hidden"
+          class="lg:gl-hidden"
           data-testid="admin-link"
         >
           <template #list-item>
diff --git a/spec/frontend/super_sidebar/components/super_topbar_spec.js b/spec/frontend/super_sidebar/components/super_topbar_spec.js
index d56183db4772df..450fbe53d5dd5b 100644
--- a/spec/frontend/super_sidebar/components/super_topbar_spec.js
+++ b/spec/frontend/super_sidebar/components/super_topbar_spec.js
@@ -20,7 +20,6 @@ describe('SuperTopbar', () => {
   const OrganizationSwitcherStub = stubComponent(OrganizationSwitcher);
   const SearchModalStub = stubComponent(SearchModal);
 
-  const findAdminLink = () => wrapper.findByTestId('topbar-admin-link');
   const findSigninButton = () => wrapper.findByTestId('topbar-signin-button');
   const findSignupButton = () => wrapper.findByTestId('topbar-signup-button');
   const findBrandLogo = () => wrapper.findComponent(BrandLogo);
@@ -169,27 +168,6 @@ describe('SuperTopbar', () => {
       expect(findUserCounts().exists()).toBe(false);
     });
 
-    describe('Admin link', () => {
-      describe('when user is admin', () => {
-        it('renders', () => {
-          createComponent({
-            sidebarData: {
-              ...mockSidebarData,
-              admin_mode: { user_is_admin: true },
-            },
-          });
-          expect(findAdminLink().attributes('href')).toBe(mockSidebarData.admin_url);
-        });
-      });
-
-      describe('when user is not admin', () => {
-        it('does not render', () => {
-          createComponent();
-          expect(findAdminLink().exists()).toBe(false);
-        });
-      });
-    });
-
     describe('Promo menu', () => {
       it('renders when user is logged out', () => {
         createComponent({
-- 
GitLab