fix(settings): move user settings menu item before docs/gitea in profile menus across all headers (#18322)

Author: mlqn

src/Designer/frontend/admin/layout/PageHeader.tsx

@@ -106,7 +106,7 @@ const ProfileMenu = ({ user, org }: ProfileMenuProps): ReactElement => {
   };
 
   const profileMenuGroups: StudioProfileMenuGroup[] = [
-    { items: studioOidc ? [docsMenuItem, userSettingsMenuItem] : [docsMenuItem] },
+    { items: studioOidc ? [userSettingsMenuItem, docsMenuItem] : [docsMenuItem] },
     { items: [logOutMenuItem] },
   ];
 

src/Designer/frontend/app-development/contexts/PageHeaderContext/PageHeaderContext.tsx

@@ -73,12 +73,12 @@ export const PageHeaderContextProvider = ({
   const studioOidc = environment?.featureFlags?.studioOidc;
 
   const profileMenuItems: StudioProfileMenuItem[] = [
-    docsMenuItem,
     ...(studioOidc ? [userSettingsMenuItem] : []),
+    docsMenuItem,
     logOutMenuItem,
   ];
   const profileMenuGroups: StudioProfileMenuGroup[] = [
-    { items: studioOidc ? [docsMenuItem, userSettingsMenuItem] : [docsMenuItem] },
+    { items: studioOidc ? [userSettingsMenuItem, docsMenuItem] : [docsMenuItem] },
     { items: [logOutMenuItem] },
   ];
 

src/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.test.tsx

@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { UserProfileMenu, type UserProfileMenuProps } from './UserProfileMenu';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { useMediaQuery } from '@studio/components-legacy';
@@ -8,8 +9,12 @@ import { repository } from 'app-shared/mocks/mocks';
 import { renderWithProviders } from '../../../test/mocks';
 import { StudioPageHeaderContextProvider } from '@studio/components/src/components/StudioPageHeader/context';
 
+const mockEnvironment: { environment: { featureFlags: { studioOidc: boolean } } | null } = {
+  environment: null,
+};
+
 jest.mock('app-shared/contexts/EnvironmentConfigContext', () => ({
-  useEnvironmentConfig: () => ({ environment: null, isLoading: false, error: null }),
+  useEnvironmentConfig: () => mockEnvironment,
 }));
 
 jest.mock('@studio/components-legacy/src/hooks/useMediaQuery');
@@ -43,6 +48,10 @@ const defaultProps: UserProfileMenuProps = {
 };
 
 describe('UserProfileMenu', () => {
+  beforeEach(() => {
+    mockEnvironment.environment = null;
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -76,6 +85,30 @@ describe('UserProfileMenu', () => {
 
     expect(screen.getByAltText(textMock('general.profile_icon'))).toBeInTheDocument();
   });
+
+  it('should include user settings link in profile menu when studioOidc is enabled', async () => {
+    const user = userEvent.setup();
+    mockEnvironment.environment = { featureFlags: { studioOidc: true } };
+
+    renderUserProfileMenu();
+
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByRole('menuitem', { name: textMock('user.settings') })).toBeInTheDocument();
+  });
+
+  it('should not include user settings link in profile menu when studioOidc is disabled', async () => {
+    const user = userEvent.setup();
+    mockEnvironment.environment = { featureFlags: { studioOidc: false } };
+
+    renderUserProfileMenu();
+
+    await user.click(screen.getByRole('button'));
+
+    expect(
+      screen.queryByRole('menuitem', { name: textMock('user.settings') }),
+    ).not.toBeInTheDocument();
+  });
 });
 
 const renderUserProfileMenu = (props?: Partial<UserProfileMenuProps>) => {

src/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsx

@@ -49,7 +49,7 @@ export const UserProfileMenu = ({ user, repository }: UserProfileMenuProps): Rea
   };
 
   const profileMenuGroups: StudioProfileMenuGroup[] = [
-    { items: studioOidc ? [docsMenuItem, userSettingsMenuItem] : [docsMenuItem] },
+    { items: studioOidc ? [userSettingsMenuItem, docsMenuItem] : [docsMenuItem] },
     { items: [logOutMenuItem] },
   ];
 

src/Designer/frontend/dashboard/context/HeaderContext/HeaderContext.tsx

@@ -95,8 +95,8 @@ export const HeaderContextProvider = ({
     items: [allMenuItem, ...selectableOrgMenuItems, selfMenuItem],
   };
   const otherMenuItems: NavigationMenuItem[] = [
-    giteaMenuItem,
     ...(studioOidc ? [userSettingsMenuItem] : []),
+    giteaMenuItem,
   ];
   const profileMenuItems: NavigationMenuItem[] = [...otherMenuItems, logOutMenuItem];
 

src/Designer/frontend/resourceadm/components/ResourceAdmHeader/ResourceAdmHeader.test.tsx

@@ -33,8 +33,12 @@ const testUser = {
 
 const resourceId = 'res-id';
 
+const mockEnvironment: { environment: { featureFlags: { studioOidc: boolean } } | null } = {
+  environment: null,
+};
+
 jest.mock('app-shared/contexts/EnvironmentConfigContext', () => ({
-  useEnvironmentConfig: () => ({ environment: null, isLoading: false, error: null }),
+  useEnvironmentConfig: () => mockEnvironment,
 }));
 
 const navigateMock = jest.fn();
@@ -48,6 +52,10 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('ResourceAdmHeader', () => {
+  beforeEach(() => {
+    mockEnvironment.environment = null;
+  });
+
   afterEach(jest.clearAllMocks);
 
   it('should show org name and resource id in header', () => {
@@ -75,6 +83,44 @@ describe('ResourceAdmHeader', () => {
 
     expect(navigateMock).toHaveBeenCalled();
   });
+
+  it('should include user settings link in profile menu when studioOidc is enabled', async () => {
+    const user = userEvent.setup();
+    mockEnvironment.environment = { featureFlags: { studioOidc: true } };
+
+    renderResourceAdmHeader();
+
+    await user.click(
+      screen.getByRole('button', {
+        name: textMock('shared.header_user_for_org', {
+          user: testUser.full_name,
+          org: mainOrganization.full_name,
+        }),
+      }),
+    );
+
+    expect(screen.getByRole('menuitem', { name: textMock('user.settings') })).toBeInTheDocument();
+  });
+
+  it('should not include user settings link in profile menu when studioOidc is disabled', async () => {
+    const user = userEvent.setup();
+    mockEnvironment.environment = { featureFlags: { studioOidc: false } };
+
+    renderResourceAdmHeader();
+
+    await user.click(
+      screen.getByRole('button', {
+        name: textMock('shared.header_user_for_org', {
+          user: testUser.full_name,
+          org: mainOrganization.full_name,
+        }),
+      }),
+    );
+
+    expect(
+      screen.queryByRole('menuitem', { name: textMock('user.settings') }),
+    ).not.toBeInTheDocument();
+  });
 });
 
 const renderResourceAdmHeader = () => {

src/Designer/frontend/resourceadm/components/ResourceAdmHeader/ResourceAdmHeader.tsx

@@ -99,8 +99,8 @@ const DashboardHeaderMenu = ({ organizations, user }: ResourceAdmHeaderProps) =>
   };
 
   const otherMenuItems: StudioProfileMenuItem[] = [
-    giteaMenuItem,
     ...(studioOidc ? [userSettingsMenuItem] : []),
+    giteaMenuItem,
   ];
 
   const profileMenuGroups: StudioProfileMenuGroup[] = [