@red-hat-developer-hub/backstage-plugin-global-header 1.18.0 → 1.18.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 1.18.2
+
+### Patch Changes
+
+- e8b5090: fix: add ability to use custom star icons
+
+## 1.18.1
+
+### Patch Changes
+
+- 927b031: Make the myProfile check backward compatible for customers with a custom header configuration
+
 ## 1.18.0
 
 ### Minor Changes

package/dist/components/HeaderDropdownComponent/ProfileDropdown.esm.js

@@ -86,7 +86,7 @@ const ProfileDropdown = ({ layout }) => {
         link: staticLink = "",
         type = ""
       } = mp.config?.props ?? {};
-      const isMyProfile = type === "myProfile";
+      const isMyProfile = type === "myProfile" || title === "profile.myProfile" || title === "My profile";
       const link = isMyProfile ? profileLink ?? "" : staticLink;
       if (isMyProfile && isGuestUser) {
         return null;

package/dist/components/HeaderDropdownComponent/ProfileDropdown.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { parseEntityRef, UserEntity } from '@backstage/catalog-model';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Avatar from '@mui/material/Avatar';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\n\nimport { MenuItemConfig, MenuSection } from './MenuSection';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { translateWithFallback } from '../../utils/translationUtils';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n  layout?: CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const [user, setUser] = useState<string | null>();\n  const [profileLink, setProfileLink] = useState<string | null>();\n  const { t } = useTranslation();\n  const {\n    displayName,\n    backstageIdentity,\n    profile,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  const headerRef = useRef<HTMLElement | null>(null);\n  const [bgColor, setBgColor] = useState('#3C3F42');\n\n  useEffect(() => {\n    if (headerRef.current) {\n      const computedStyle = window.getComputedStyle(headerRef.current);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const container = document.getElementById('global-header');\n    if (container) {\n      const computedStyle = window.getComputedStyle(container);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      let userProfile;\n      let profileUrl: string | null = null;\n\n      try {\n        if (backstageIdentity?.userEntityRef) {\n          const { namespace = 'default', name } = parseEntityRef(\n            backstageIdentity.userEntityRef,\n          );\n          profileUrl = `/catalog/${namespace}/user/${name}`;\n\n          userProfile = (await catalogApi.getEntityByRef(\n            backstageIdentity.userEntityRef,\n          )) as unknown as UserEntity;\n          setUser(\n            userProfile?.spec?.profile?.displayName ??\n              userProfile?.metadata?.title,\n          );\n          setProfileLink(profileUrl);\n        } else {\n          setUser(null);\n          setProfileLink(null);\n        }\n      } catch (err) {\n        // User entity doesn't exist in catalog (e.g., guest user)\n        setUser(null);\n        setProfileLink(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const menuItems = useMemo(() => {\n    // Check if user is a guest (guest user has userEntityRef like \"user:development/guest\" or \"user:default/guest\")\n    const isGuestUser =\n      backstageIdentity?.userEntityRef?.includes('/guest') ||\n      profileLink === null;\n\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => {\n        const {\n          title = '',\n          titleKey = '',\n          icon = '',\n          link: staticLink = '',\n          type = '',\n        } = mp.config?.props ?? {};\n        const isMyProfile = type === 'myProfile';\n        const link = isMyProfile ? profileLink ?? '' : staticLink;\n\n        // Hide \"My Profile\" for guest users or when user doesn't exist in catalog\n        if (isMyProfile && isGuestUser) {\n          return null;\n        }\n\n        // Hide items without links (but allow \"My Profile\" to pass through for authenticated users)\n        if (!link && title && !isMyProfile) {\n          return null;\n        }\n\n        const translatedTitle = translateWithFallback(t, titleKey, title);\n\n        return {\n          Component: mp.Component,\n          label: translatedTitle,\n          link,\n          priority: mp.config?.priority ?? 0,\n          ...(icon && { icon }),\n        };\n      })\n      .filter((item: MenuItemConfig) => item !== null)\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints, profileLink, backstageIdentity, t]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\n\n  const profileDisplayName = () => {\n    const name = user ?? displayName;\n    const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n    if (regex.test(name)) {\n      return name\n        .charAt(name.indexOf('/') + 1)\n        .toLocaleUpperCase('en-US')\n        .concat(name.substring(name.indexOf('/') + 2));\n    }\n    return name;\n  };\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n          {!profileLoading && (\n            <>\n              {profile.picture ? (\n                <Avatar\n                  src={profile.picture}\n                  sx={{ mr: 2, height: '32px', width: '32px' }}\n                  alt={t('profile.picture')}\n                />\n              ) : (\n                <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mr: 1 }} />\n              )}\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: { xs: 'none', md: 'block' },\n                  fontWeight: 500,\n                  mr: '1rem',\n                }}\n              >\n                {profileDisplayName()}\n              </Typography>\n            </>\n          )}\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              bgcolor: bgColor,\n              borderRadius: '25%',\n            }}\n          />\n        </Box>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { parseEntityRef, UserEntity } from '@backstage/catalog-model';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Avatar from '@mui/material/Avatar';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\n\nimport { MenuItemConfig, MenuSection } from './MenuSection';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { translateWithFallback } from '../../utils/translationUtils';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n  layout?: CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const [user, setUser] = useState<string | null>();\n  const [profileLink, setProfileLink] = useState<string | null>();\n  const { t } = useTranslation();\n  const {\n    displayName,\n    backstageIdentity,\n    profile,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  const headerRef = useRef<HTMLElement | null>(null);\n  const [bgColor, setBgColor] = useState('#3C3F42');\n\n  useEffect(() => {\n    if (headerRef.current) {\n      const computedStyle = window.getComputedStyle(headerRef.current);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const container = document.getElementById('global-header');\n    if (container) {\n      const computedStyle = window.getComputedStyle(container);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      let userProfile;\n      let profileUrl: string | null = null;\n\n      try {\n        if (backstageIdentity?.userEntityRef) {\n          const { namespace = 'default', name } = parseEntityRef(\n            backstageIdentity.userEntityRef,\n          );\n          profileUrl = `/catalog/${namespace}/user/${name}`;\n\n          userProfile = (await catalogApi.getEntityByRef(\n            backstageIdentity.userEntityRef,\n          )) as unknown as UserEntity;\n          setUser(\n            userProfile?.spec?.profile?.displayName ??\n              userProfile?.metadata?.title,\n          );\n          setProfileLink(profileUrl);\n        } else {\n          setUser(null);\n          setProfileLink(null);\n        }\n      } catch (err) {\n        // User entity doesn't exist in catalog (e.g., guest user)\n        setUser(null);\n        setProfileLink(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const menuItems = useMemo(() => {\n    // Check if user is a guest (guest user has userEntityRef like \"user:development/guest\" or \"user:default/guest\")\n    const isGuestUser =\n      backstageIdentity?.userEntityRef?.includes('/guest') ||\n      profileLink === null;\n\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => {\n        const {\n          title = '',\n          titleKey = '',\n          icon = '',\n          link: staticLink = '',\n          type = '',\n        } = mp.config?.props ?? {};\n        // The title fallbacks are to be backward compatibility with older versions\n        // of the global-header configuration if a customer has customized it.\n        const isMyProfile =\n          type === 'myProfile' ||\n          title === 'profile.myProfile' ||\n          title === 'My profile';\n        const link = isMyProfile ? profileLink ?? '' : staticLink;\n\n        // Hide \"My Profile\" for guest users or when user doesn't exist in catalog\n        if (isMyProfile && isGuestUser) {\n          return null;\n        }\n\n        // Hide items without links (but allow \"My Profile\" to pass through for authenticated users)\n        if (!link && title && !isMyProfile) {\n          return null;\n        }\n\n        const translatedTitle = translateWithFallback(t, titleKey, title);\n\n        return {\n          Component: mp.Component,\n          label: translatedTitle,\n          link,\n          priority: mp.config?.priority ?? 0,\n          ...(icon && { icon }),\n        };\n      })\n      .filter((item: MenuItemConfig) => item !== null)\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints, profileLink, backstageIdentity, t]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\n\n  const profileDisplayName = () => {\n    const name = user ?? displayName;\n    const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n    if (regex.test(name)) {\n      return name\n        .charAt(name.indexOf('/') + 1)\n        .toLocaleUpperCase('en-US')\n        .concat(name.substring(name.indexOf('/') + 2));\n    }\n    return name;\n  };\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n          {!profileLoading && (\n            <>\n              {profile.picture ? (\n                <Avatar\n                  src={profile.picture}\n                  sx={{ mr: 2, height: '32px', width: '32px' }}\n                  alt={t('profile.picture')}\n                />\n              ) : (\n                <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mr: 1 }} />\n              )}\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: { xs: 'none', md: 'block' },\n                  fontWeight: 500,\n                  mr: '1rem',\n                }}\n              >\n                {profileDisplayName()}\n              </Typography>\n            </>\n          )}\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              bgcolor: bgColor,\n              borderRadius: '25%',\n            }}\n          />\n        </Box>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/HeaderDropdownComponent/StarredDropdown.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useStarredEntities, useEntityPresentation } from '@backstage/plugin-catalog-react';
-import { Link } from '@backstage/core-components';
+import { AppIcon, Link } from '@backstage/core-components';
 import { parseEntityRef } from '@backstage/catalog-model';
 import StarBorderIcon from '@mui/icons-material/StarBorder';
 import Star from '@mui/icons-material/Star';
@@ -65,7 +65,7 @@ const StarredItem = ({
               visibility: "hidden",
               color: rhdhPalette?.general?.starredItemsColor ?? "#F3BA37"
             },
-            children: /* @__PURE__ */ jsx(Star, {})
+            children: /* @__PURE__ */ jsx(AppIcon, { id: "star", Fallback: Star })
           }
         ) })
       ]
@@ -80,7 +80,7 @@ const StarredDropdown = () => {
   return /* @__PURE__ */ jsx(
     HeaderDropdownComponent,
     {
-      buttonContent: /* @__PURE__ */ jsx(StarBorderIcon, {}),
+      buttonContent: /* @__PURE__ */ jsx(AppIcon, { id: "unstarred", Fallback: StarBorderIcon }),
       onOpen: handleOpen,
       onClose: handleClose,
       anchorEl,

package/dist/components/HeaderDropdownComponent/StarredDropdown.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StarredDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/StarredDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { FC } from 'react';\nimport {\n  useEntityPresentation,\n  useStarredEntities,\n} from '@backstage/plugin-catalog-react';\nimport { Link } from '@backstage/core-components';\nimport {\n  CompoundEntityRef,\n  Entity,\n  parseEntityRef,\n} from '@backstage/catalog-model';\nimport StarBorderIcon from '@mui/icons-material/StarBorder';\nimport Star from '@mui/icons-material/Star';\nimport AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\n\nimport { useTheme } from '@mui/material/styles';\nimport MenuItem from '@mui/material/MenuItem';\nimport Typography from '@mui/material/Typography';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { DropdownEmptyState } from './DropdownEmptyState';\nimport { useTranslation } from '../../hooks/useTranslation';\n\n/**\n * @public\n * Props for each starred entitify item\n */\ninterface SectionComponentProps {\n  entityRef: string | CompoundEntityRef | Entity;\n  toggleStarredEntity: (\n    entityOrRef: Entity | CompoundEntityRef | string,\n  ) => void;\n  handleClose: () => void;\n}\n\nconst StarredItem: FC<SectionComponentProps> = ({\n  entityRef,\n  toggleStarredEntity,\n  handleClose,\n}) => {\n  const { Icon, primaryTitle, secondaryTitle } =\n    useEntityPresentation(entityRef);\n  const { name, kind, namespace } = parseEntityRef(entityRef as string);\n  const theme = useTheme();\n  const { t } = useTranslation();\n  const rhdhPalette = (theme.palette as any).rhdh;\n\n  return (\n    <MenuItem\n      component={Link}\n      to={`/catalog/${namespace || 'default'}/${kind}/${name}`}\n      onClick={handleClose}\n      disableRipple\n      disableTouchRipple\n      sx={{\n        '&:hover .star-icon, &:focus-visible .star-icon': {\n          visibility: 'visible',\n        },\n      }}\n    >\n      {Icon && (\n        <ListItemIcon sx={{ minWidth: 36 }}>\n          <Icon />\n        </ListItemIcon>\n      )}\n      <ListItemText\n        primary={\n          <Typography sx={{ color: theme.palette.text.primary }}>\n            {primaryTitle || secondaryTitle}\n          </Typography>\n        }\n        secondary={kind.toLocaleUpperCase()}\n        // inset={!Icon}\n        sx={{ ml: 1, mr: 1 }}\n      />\n      <Tooltip title={t('starred.removeTooltip')}>\n        <IconButton\n          className=\"star-icon\"\n          onClick={e => {\n            e.preventDefault();\n            e.stopPropagation();\n            toggleStarredEntity(entityRef);\n          }}\n          sx={{\n            visibility: 'hidden',\n            color: rhdhPalette?.general?.starredItemsColor ?? '#F3BA37',\n          }}\n        >\n          <Star />\n        </IconButton>\n      </Tooltip>\n    </MenuItem>\n  );\n};\n\nexport const StarredDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const { starredEntities, toggleStarredEntity } = useStarredEntities();\n  const { t } = useTranslation();\n\n  const entitiesArray = Array.from(starredEntities);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={<StarBorderIcon />}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n      tooltip={t('starred.title')}\n      isIconButton\n    >\n      {entitiesArray.length > 0 ? (\n        <>\n          <ListItemText\n            primary={t('starred.title')}\n            sx={{ pl: 2, mt: 1, fontWeight: 'bold', color: 'text.secondary' }}\n          />\n          {entitiesArray.map(enitityRef => (\n            <StarredItem\n              key={enitityRef}\n              entityRef={enitityRef}\n              toggleStarredEntity={toggleStarredEntity}\n              handleClose={handleClose}\n            />\n          ))}\n        </>\n      ) : (\n        <DropdownEmptyState\n          title={t('starred.noItemsTitle')}\n          subTitle={t('starred.noItemsSubtitle')}\n          icon={<AutoAwesomeIcon sx={{ fontSize: 64 }} color=\"disabled\" />}\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"StarredDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/StarredDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { FC } from 'react';\nimport {\n  useEntityPresentation,\n  useStarredEntities,\n} from '@backstage/plugin-catalog-react';\nimport { Link, AppIcon } from '@backstage/core-components';\nimport {\n  CompoundEntityRef,\n  Entity,\n  parseEntityRef,\n} from '@backstage/catalog-model';\nimport StarBorderIcon from '@mui/icons-material/StarBorder';\nimport Star from '@mui/icons-material/Star';\nimport AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\n\nimport { useTheme } from '@mui/material/styles';\nimport MenuItem from '@mui/material/MenuItem';\nimport Typography from '@mui/material/Typography';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { DropdownEmptyState } from './DropdownEmptyState';\nimport { useTranslation } from '../../hooks/useTranslation';\n\n/**\n * @public\n * Props for each starred entitify item\n */\ninterface SectionComponentProps {\n  entityRef: string | CompoundEntityRef | Entity;\n  toggleStarredEntity: (\n    entityOrRef: Entity | CompoundEntityRef | string,\n  ) => void;\n  handleClose: () => void;\n}\n\nconst StarredItem: FC<SectionComponentProps> = ({\n  entityRef,\n  toggleStarredEntity,\n  handleClose,\n}) => {\n  const { Icon, primaryTitle, secondaryTitle } =\n    useEntityPresentation(entityRef);\n  const { name, kind, namespace } = parseEntityRef(entityRef as string);\n  const theme = useTheme();\n  const { t } = useTranslation();\n  const rhdhPalette = (theme.palette as any).rhdh;\n\n  return (\n    <MenuItem\n      component={Link}\n      to={`/catalog/${namespace || 'default'}/${kind}/${name}`}\n      onClick={handleClose}\n      disableRipple\n      disableTouchRipple\n      sx={{\n        '&:hover .star-icon, &:focus-visible .star-icon': {\n          visibility: 'visible',\n        },\n      }}\n    >\n      {Icon && (\n        <ListItemIcon sx={{ minWidth: 36 }}>\n          <Icon />\n        </ListItemIcon>\n      )}\n      <ListItemText\n        primary={\n          <Typography sx={{ color: theme.palette.text.primary }}>\n            {primaryTitle || secondaryTitle}\n          </Typography>\n        }\n        secondary={kind.toLocaleUpperCase()}\n        // inset={!Icon}\n        sx={{ ml: 1, mr: 1 }}\n      />\n      <Tooltip title={t('starred.removeTooltip')}>\n        <IconButton\n          className=\"star-icon\"\n          onClick={e => {\n            e.preventDefault();\n            e.stopPropagation();\n            toggleStarredEntity(entityRef);\n          }}\n          sx={{\n            visibility: 'hidden',\n            color: rhdhPalette?.general?.starredItemsColor ?? '#F3BA37',\n          }}\n        >\n          <AppIcon id=\"star\" Fallback={Star} />\n        </IconButton>\n      </Tooltip>\n    </MenuItem>\n  );\n};\n\nexport const StarredDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const { starredEntities, toggleStarredEntity } = useStarredEntities();\n  const { t } = useTranslation();\n\n  const entitiesArray = Array.from(starredEntities);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={<AppIcon id=\"unstarred\" Fallback={StarBorderIcon} />}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n      tooltip={t('starred.title')}\n      isIconButton\n    >\n      {entitiesArray.length > 0 ? (\n        <>\n          <ListItemText\n            primary={t('starred.title')}\n            sx={{ pl: 2, mt: 1, fontWeight: 'bold', color: 'text.secondary' }}\n          />\n          {entitiesArray.map(enitityRef => (\n            <StarredItem\n              key={enitityRef}\n              entityRef={enitityRef}\n              toggleStarredEntity={toggleStarredEntity}\n              handleClose={handleClose}\n            />\n          ))}\n        </>\n      ) : (\n        <DropdownEmptyState\n          title={t('starred.noItemsTitle')}\n          subTitle={t('starred.noItemsSubtitle')}\n          icon={<AutoAwesomeIcon sx={{ fontSize: 64 }} color=\"disabled\" />}\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/backstage-plugin-global-header",
-  "version": "1.18.0",
+  "version": "1.18.2",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",