fix(global-header): updated menu link display logic (#1425)

* fix(global-header): updated menu link display logic

Signed-off-by: Yi Cai <yicai@redhat.com>

* chore(global-header): update API report

Signed-off-by: Yi Cai <yicai@redhat.com>

* chore(global-header): correct API report (and test report if present)

Signed-off-by: Yi Cai <yicai@redhat.com>

* updated report.api.md

Signed-off-by: Yi Cai <yicai@redhat.com>

* updated report.api.md

Signed-off-by: Yi Cai <yicai@redhat.com>

* revert back as no real changes in this file

Signed-off-by: Yi Cai <yicai@redhat.com>

---------

Signed-off-by: Yi Cai <yicai@redhat.com>

Author: ciiay

workspaces/global-header/.changeset/hide-my-profile-for-guest-users.md

@@ -0,0 +1,10 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': patch
+---
+
+Add `type` prop for MenuItemLink identification and hide "My profile" menuItemLink for guest users
+
+- Add `type` prop to MenuItemLink component config for better identification when i18n applied
+- Hide "My Profile" menu item when user entity reference contains '/guest'
+- Hide "My Profile" menu item when catalog API fails to fetch user entity
+- Export `globalHeaderTranslations` from plugin for i18n integration

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ProfileDropdown.test.tsx

@@ -59,6 +59,7 @@ jest.mock('../../hooks/useProfileDropdownMountPoints', () => {
           props: {
             icon: 'account',
             title: 'profile.myProfile',
+            type: 'myProfile',
           },
           priority: 150,
         },
@@ -187,4 +188,73 @@ describe('ProfileDropdown', () => {
       );
     });
   });
+
+  it('should hide My Profile menu item for guest users', async () => {
+    setUserProfileMock({
+      displayName: 'Guest',
+      userEntityRef: 'user:development/guest',
+    });
+
+    const catalogApi = createMockCatalogApi({
+      metadata: {
+        name: 'guest',
+        title: 'Guest',
+      },
+      spec: {
+        profile: { displayName: 'Guest' },
+      },
+    });
+
+    await renderComponent(catalogApi);
+    const profileButton = screen.getByRole('button', {
+      name: /Profile picture Guest/i,
+    });
+    fireEvent.click(profileButton);
+
+    await waitFor(() => {
+      // Should find Settings menu item
+      const settingsLink = screen.getByRole('menuitem', {
+        name: /Settings/i,
+      });
+      expect(settingsLink).toBeInTheDocument();
+
+      // Should NOT find My Profile menu item for guest users
+      const myProfileLink = screen.queryByRole('menuitem', {
+        name: /My profile/i,
+      });
+      expect(myProfileLink).not.toBeInTheDocument();
+    });
+  });
+
+  it('should hide My Profile menu item when catalog API fails', async () => {
+    setUserProfileMock({
+      displayName: 'Test User',
+      userEntityRef: 'user:default/test-user',
+    });
+
+    // Mock catalog API to throw an error (user not found in catalog)
+    const catalogApi = {
+      getEntityByRef: jest.fn().mockRejectedValue(new Error('User not found')),
+    } as unknown as CatalogApi;
+
+    await renderComponent(catalogApi);
+    const profileButton = screen.getByRole('button', {
+      name: /Profile picture Test User/i,
+    });
+    fireEvent.click(profileButton);
+
+    await waitFor(() => {
+      // Should find Settings menu item
+      const settingsLink = screen.getByRole('menuitem', {
+        name: /Settings/i,
+      });
+      expect(settingsLink).toBeInTheDocument();
+
+      // Should NOT find My Profile menu item when catalog API fails
+      const myProfileLink = screen.queryByRole('menuitem', {
+        name: /My profile/i,
+      });
+      expect(myProfileLink).not.toBeInTheDocument();
+    });
+  });
 });

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/ProfileDropdown.tsx

@@ -100,7 +100,8 @@ export const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {
           setUser(null);
           setProfileLink(null);
         }
-      } catch (_err) {
+      } catch (err) {
+        // User entity doesn't exist in catalog (e.g., guest user)
         setUser(null);
         setProfileLink(null);
       }
@@ -110,25 +111,36 @@ export const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {
   }, [backstageIdentity, catalogApi]);
 
   const menuItems = useMemo(() => {
+    // Check if user is a guest (guest user has userEntityRef like "user:development/guest" or "user:default/guest")
+    const isGuestUser =
+      backstageIdentity?.userEntityRef?.includes('/guest') ||
+      profileLink === null;
+
     return (profileDropdownMountPoints ?? [])
       .map(mp => {
         const {
           title = '',
           icon = '',
           link: staticLink = '',
+          type = '',
         } = mp.config?.props ?? {};
-        const isMyProfile = title === 'profile.myProfile';
+        const isMyProfile = type === 'myProfile';
         const link = isMyProfile ? profileLink ?? '' : staticLink;
 
-        if (!link && title) {
+        // Hide "My Profile" for guest users or when user doesn't exist in catalog
+        if (isMyProfile && isGuestUser) {
+          return null;
+        }
+
+        // Hide items without links (but allow "My Profile" to pass through for authenticated users)
+        if (!link && title && !isMyProfile) {
           return null;
         }
 
         // Check if title looks like a translation key (contains dots)
-        const translatedTitle =
-          title && title.includes('.')
-            ? t(title as any, {}) || title // Fallback to original title if translation fails
-            : title;
+        const translatedTitle = title?.includes('.')
+          ? t(title as any, {}) || title // Fallback to original title if translation fails
+          : title;
 
         return {
           Component: mp.Component,
@@ -140,7 +152,7 @@ export const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {
       })
       .filter((item: MenuItemConfig) => item !== null)
       .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
-  }, [profileDropdownMountPoints, profileLink, t]);
+  }, [profileDropdownMountPoints, profileLink, backstageIdentity, t]);
 
   if (menuItems.length === 0) {
     return null;

workspaces/global-header/plugins/global-header/src/components/MenuItemLink/MenuItemLink.tsx

@@ -38,14 +38,14 @@ export const MenuItemLink = ({
   tooltip,
 }: MenuItemLinkProps) => {
   const { t } = useTranslation();
-  const isExternalLink =
-    to?.startsWith('http://') || to?.startsWith('https://');
+  const isExternalLink = Boolean(
+    to && (to.startsWith('http://') || to.startsWith('https://')),
+  );
 
   // Check if title looks like a translation key (contains dots)
-  const translatedTitle =
-    title && title.includes('.')
-      ? t(title as any, {}) || title // Fallback to original title if translation fails
-      : title;
+  const translatedTitle = title?.includes('.')
+    ? t(title as any, {}) || title // Fallback to original title if translation fails
+    : title;
 
   const headerLinkContent = () => (
     <MenuItemLinkContent

workspaces/global-header/plugins/global-header/src/defaultMountPoints/defaultMountPoints.tsx

@@ -159,6 +159,7 @@ export const defaultProfileDropdownMountPoints: ProfileDropdownMountPoint[] = [
       props: {
         title: 'profile.myProfile',
         icon: 'account',
+        type: 'myProfile', // Semantic identifier
       },
     },
   },

workspaces/global-header/plugins/global-header/src/plugin.ts

@@ -414,3 +414,10 @@ export const CompanyLogo = globalHeaderPlugin.provide(
     },
   }),
 );
+
+/**
+ * Translation resource for the global header plugin
+ *
+ * @public
+ */
+export { globalHeaderTranslations } from './translations';