@red-hat-developer-hub/backstage-plugin-global-header 0.0.4 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.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 React from 'react';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport { HeaderLinkProps } from '../HeaderLinkComponent/HeaderLink';\n\n/**\n * Menu item configuration\n *\n * @public\n */\nexport interface MenuItemConfig {\n  Component: React.ComponentType<HeaderLinkProps | {}>;\n  type: string;\n  label: string;\n  icon?: string;\n  subLabel?: string;\n  link?: string;\n}\n\nexport interface MenuSectionConfig {\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nconst MenuSection: React.FC<MenuSectionConfig> = ({\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => (\n  <Box>\n    {sectionLabel && (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mx: 0,\n          mt: '0.5rem',\n          '&:hover': { background: 'transparent' },\n        }}\n      >\n        <Typography variant=\"body2\" sx={{ pl: 2, color: 'text.disabled' }}>\n          {sectionLabel}\n        </Typography>\n        <MenuItem\n          sx={{\n            '&:hover': { background: 'transparent' },\n          }}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n        >\n          {optionalLink && optionalLinkLabel && (\n            <Link\n              to={optionalLink}\n              underline=\"none\"\n              style={{ fontSize: '0.875em' }}\n            >\n              {optionalLinkLabel}\n            </Link>\n          )}\n        </MenuItem>\n      </Box>\n    )}\n    <ul style={{ padding: 0, listStyle: 'none' }}>\n      {items.map(({ type, icon, label, subLabel, link, Component }, index) => (\n        <MenuItem\n          key={`menu-item-${index.toString()}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5, '&:hover': { background: 'transparent' } }}\n        >\n          {link && (\n            <Component\n              icon={icon}\n              to={link}\n              title={label}\n              subTitle={subLabel}\n            />\n          )}\n          {type === 'logout' && <Component />}\n        </MenuItem>\n      ))}\n    </ul>\n    {!hideDivider && <Divider sx={{ margin: '8px 0' }} />}\n  </Box>\n);\n\nexport default MenuSection;\n"],"names":[],"mappings":";;;;;;;AA+CA,MAAM,cAA2C,CAAC;AAAA,EAChD,YAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd;AACF,CACE,qBAAA,KAAA,CAAA,aAAA,CAAC,WACE,YACC,oBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,EAAI,EAAA;AAAA,MACF,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,UAAY,EAAA,QAAA;AAAA,MACZ,EAAI,EAAA,CAAA;AAAA,MACJ,EAAI,EAAA,QAAA;AAAA,MACJ,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA;AACzC,GAAA;AAAA,kBAEA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,eAAgB,EAAA,EAAA,EAC7D,YACH,CAAA;AAAA,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA,OACzC;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MAClB,OAAS,EAAA;AAAA,KAAA;AAAA,IAER,gBAAgB,iBACf,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,YAAA;AAAA,QACJ,SAAU,EAAA,MAAA;AAAA,QACV,KAAA,EAAO,EAAE,QAAA,EAAU,SAAU;AAAA,OAAA;AAAA,MAE5B;AAAA;AACH;AAGN,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAG,KAAO,EAAA,EAAE,SAAS,CAAG,EAAA,SAAA,EAAW,QACjC,EAAA,EAAA,KAAA,CAAM,IAAI,CAAC,EAAE,MAAM,IAAM,EAAA,KAAA,EAAO,UAAU,IAAM,EAAA,SAAA,IAAa,KAC5D,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,GAAK,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,IAClC,aAAa,EAAA,IAAA;AAAA,IACb,kBAAkB,EAAA,IAAA;AAAA,IAClB,OAAS,EAAA,WAAA;AAAA,IACT,EAAA,EAAI,EAAE,EAAI,EAAA,GAAA,EAAK,WAAW,EAAE,UAAA,EAAY,eAAgB;AAAA,GAAA;AAAA,EAEvD,IACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,EAAI,EAAA,IAAA;AAAA,MACJ,KAAO,EAAA,KAAA;AAAA,MACP,QAAU,EAAA;AAAA;AAAA,GACZ;AAAA,EAED,IAAA,KAAS,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,IAAA;AACnC,CACD,CACH,CACC,EAAA,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,MAAA,EAAQ,OAAQ,EAAA,EAAG,CACrD;;;;"}
+{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.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 React from 'react';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport { MenuItemLinkProps } from '../MenuItemLink/MenuItemLink';\n\n/**\n * Menu item configuration\n *\n * @public\n */\nexport interface MenuItemConfig {\n  Component: React.ComponentType<MenuItemLinkProps | {}>;\n  label: string;\n  icon?: string;\n  subLabel?: string;\n  link?: string;\n}\n\nexport interface MenuSectionConfig {\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nexport const MenuSection: React.FC<MenuSectionConfig> = ({\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => (\n  <Box>\n    {sectionLabel && (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mx: 0,\n          mt: '0.5rem',\n          '&:hover': { background: 'transparent' },\n        }}\n      >\n        <Typography variant=\"body2\" sx={{ pl: 2, color: 'text.disabled' }}>\n          {sectionLabel}\n        </Typography>\n        <MenuItem\n          sx={{\n            '&:hover': { background: 'transparent' },\n          }}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n        >\n          {optionalLink && optionalLinkLabel && items.length > 0 && (\n            <Link\n              to={optionalLink}\n              underline=\"none\"\n              style={{ fontSize: '0.875em' }}\n            >\n              {optionalLinkLabel}\n            </Link>\n          )}\n        </MenuItem>\n      </Box>\n    )}\n    <ul style={{ padding: 0, listStyle: 'none' }}>\n      {items.map(({ icon, label, subLabel, link, Component }, index) => (\n        <MenuItem\n          key={`menu-item-${index.toString()}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5, '&:hover': { background: 'transparent' } }}\n        >\n          <Component icon={icon} to={link!} title={label} subTitle={subLabel} />\n        </MenuItem>\n      ))}\n    </ul>\n    {!hideDivider && <Divider sx={{ my: 0.5 }} />}\n  </Box>\n);\n"],"names":[],"mappings":";;;;;;;AA8CO,MAAM,cAA2C,CAAC;AAAA,EACvD,YAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd;AACF,CACE,qBAAA,KAAA,CAAA,aAAA,CAAC,WACE,YACC,oBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,EAAI,EAAA;AAAA,MACF,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,UAAY,EAAA,QAAA;AAAA,MACZ,EAAI,EAAA,CAAA;AAAA,MACJ,EAAI,EAAA,QAAA;AAAA,MACJ,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA;AACzC,GAAA;AAAA,kBAEA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,eAAgB,EAAA,EAAA,EAC7D,YACH,CAAA;AAAA,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA,OACzC;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MAClB,OAAS,EAAA;AAAA,KAAA;AAAA,IAER,YAAgB,IAAA,iBAAA,IAAqB,KAAM,CAAA,MAAA,GAAS,CACnD,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,YAAA;AAAA,QACJ,SAAU,EAAA,MAAA;AAAA,QACV,KAAA,EAAO,EAAE,QAAA,EAAU,SAAU;AAAA,OAAA;AAAA,MAE5B;AAAA;AACH;AAGN,CAAA,sCAED,IAAG,EAAA,EAAA,KAAA,EAAO,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,MAAO,EAAA,EAAA,EACxC,MAAM,GAAI,CAAA,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,UAAU,IAAM,EAAA,SAAA,IAAa,KACtD,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,GAAK,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,IAClC,aAAa,EAAA,IAAA;AAAA,IACb,kBAAkB,EAAA,IAAA;AAAA,IAClB,OAAS,EAAA,WAAA;AAAA,IACT,EAAA,EAAI,EAAE,EAAI,EAAA,GAAA,EAAK,WAAW,EAAE,UAAA,EAAY,eAAgB;AAAA,GAAA;AAAA,kBAExD,KAAA,CAAA,aAAA,CAAC,aAAU,IAAY,EAAA,EAAA,EAAI,MAAO,KAAO,EAAA,KAAA,EAAO,UAAU,QAAU,EAAA;AACtE,CACD,CACH,CACC,EAAA,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,GAAI,EAAA,EAAG,CAC7C;;;;"}

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

@@ -1,21 +1,37 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import HeaderDropdownComponent from './HeaderDropdownComponent.esm.js';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { useApi, identityApiRef } from '@backstage/core-plugin-api';
 import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
 import Typography from '@mui/material/Typography';
-import { useApi, identityApiRef } from '@backstage/core-plugin-api';
+import { lighten } from '@mui/material/styles';
+import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
 import { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints.esm.js';
-import { ComponentType } from '../../types.esm.js';
-import MenuSection from './MenuSection.esm.js';
+import { MenuSection } from './MenuSection.esm.js';
+import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
+import Box from '@mui/material/Box';
 
-const ProfileDropdown = ({
-  handleMenu,
-  anchorEl,
-  setAnchorEl
-}) => {
+const ProfileDropdown = ({ layout }) => {
+  const { anchorEl, handleOpen, handleClose } = useDropdownManager();
   const identityApi = useApi(identityApiRef);
   const [user, setUser] = useState();
   const profileDropdownMountPoints = useProfileDropdownMountPoints();
+  const headerRef = useRef(null);
+  const [bgColor, setBgColor] = useState("#3C3F42");
+  useEffect(() => {
+    if (headerRef.current) {
+      const computedStyle = window.getComputedStyle(headerRef.current);
+      const baseColor = computedStyle.backgroundColor;
+      setBgColor(lighten(baseColor, 0.2));
+    }
+  }, []);
+  useEffect(() => {
+    const container = document.getElementById("global-header");
+    if (container) {
+      const computedStyle = window.getComputedStyle(container);
+      const baseColor = computedStyle.backgroundColor;
+      setBgColor(lighten(baseColor, 0.2));
+    }
+  }, []);
   useEffect(() => {
     const fetchUser = async () => {
       const userProfile = await identityApi.getProfileInfo();
@@ -26,22 +42,34 @@ const ProfileDropdown = ({
   const menuItems = useMemo(() => {
     return (profileDropdownMountPoints ?? []).map((mp) => ({
       Component: mp.Component,
-      type: mp.config?.type ?? ComponentType.LINK,
       icon: mp.config?.props?.icon ?? "",
       label: mp.config?.props?.title ?? "",
       link: mp.config?.props?.link ?? "",
       priority: mp.config?.priority ?? 0
     })).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
   }, [profileDropdownMountPoints]);
+  if (menuItems.length === 0) {
+    return null;
+  }
   return /* @__PURE__ */ React.createElement(
     HeaderDropdownComponent,
     {
-      buttonContent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AccountCircleOutlinedIcon, { fontSize: "small", sx: { mx: 1 } }), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { fontWeight: 500, mx: 1 } }, user?.displayName ?? "Guest"), /* @__PURE__ */ React.createElement(
+      buttonContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...layout } }, /* @__PURE__ */ React.createElement(AccountCircleOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }), /* @__PURE__ */ React.createElement(
+        Typography,
+        {
+          variant: "body2",
+          sx: {
+            display: { xs: "none", md: "block" },
+            fontWeight: 500,
+            mr: "1rem"
+          }
+        },
+        user?.displayName ?? "Guest"
+      ), /* @__PURE__ */ React.createElement(
         KeyboardArrowDownOutlinedIcon,
         {
           sx: {
-            marginLeft: "1rem",
-            bgcolor: "#383838",
+            bgcolor: bgColor,
             borderRadius: "25%"
           }
         }
@@ -53,20 +81,13 @@ const ProfileDropdown = ({
           alignItems: "center"
         }
       },
-      buttonClick: handleMenu,
-      anchorEl,
-      setAnchorEl
+      onOpen: handleOpen,
+      onClose: handleClose,
+      anchorEl
     },
-    /* @__PURE__ */ React.createElement(
-      MenuSection,
-      {
-        hideDivider: true,
-        items: menuItems,
-        handleClose: () => setAnchorEl(null)
-      }
-    )
+    /* @__PURE__ */ React.createElement(MenuSection, { hideDivider: true, items: menuItems, handleClose })
   );
 };
 
-export { ProfileDropdown, ProfileDropdown as default };
+export { ProfileDropdown };
 //# sourceMappingURL=ProfileDropdown.esm.js.map

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 React, { useEffect, useMemo, useState } from 'react';\nimport HeaderDropdownComponent from './HeaderDropdownComponent';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Typography from '@mui/material/Typography';\nimport {\n  identityApiRef,\n  useApi,\n  ProfileInfo,\n} from '@backstage/core-plugin-api';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { ComponentType } from '../../types';\nimport MenuSection from './MenuSection';\n\n/**\n * @public\n * ProfileDropdown component properties\n */\nexport interface ProfileDropdownProps {\n  handleMenu: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\n\nexport const ProfileDropdown = ({\n  handleMenu,\n  anchorEl,\n  setAnchorEl,\n}: ProfileDropdownProps) => {\n  const identityApi = useApi(identityApiRef);\n  const [user, setUser] = useState<ProfileInfo>();\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  useEffect(() => {\n    const fetchUser = async () => {\n      const userProfile = await identityApi.getProfileInfo();\n      setUser(userProfile);\n    };\n\n    fetchUser();\n  }, [identityApi]);\n\n  const menuItems = useMemo(() => {\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component,\n        type: mp.config?.type ?? ComponentType.LINK,\n        icon: mp.config?.props?.icon ?? '',\n        label: mp.config?.props?.title ?? '',\n        link: mp.config?.props?.link ?? '',\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints]);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <>\n          <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mx: 1 }} />\n          <Typography variant=\"body2\" sx={{ fontWeight: 500, mx: 1 }}>\n            {user?.displayName ?? 'Guest'}\n          </Typography>\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              marginLeft: '1rem',\n              bgcolor: '#383838',\n              borderRadius: '25%',\n            }}\n          />\n        </>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      buttonClick={handleMenu}\n      anchorEl={anchorEl}\n      setAnchorEl={setAnchorEl}\n    >\n      <MenuSection\n        hideDivider\n        items={menuItems}\n        handleClose={() => setAnchorEl(null)}\n      />\n    </HeaderDropdownComponent>\n  );\n};\n\nexport default ProfileDropdown;\n"],"names":[],"mappings":";;;;;;;;;;AAwCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAsB,EAAA;AAC9C,EAAA,MAAM,6BAA6B,6BAA8B,EAAA;AAEjE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAY,YAAY;AAC5B,MAAM,MAAA,WAAA,GAAc,MAAM,WAAA,CAAY,cAAe,EAAA;AACrD,MAAA,OAAA,CAAQ,WAAW,CAAA;AAAA,KACrB;AAEA,IAAU,SAAA,EAAA;AAAA,GACZ,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAM;AAC9B,IAAA,OAAA,CAAQ,0BAA8B,IAAA,EACnC,EAAA,GAAA,CAAI,CAAO,EAAA,MAAA;AAAA,MACV,WAAW,EAAG,CAAA,SAAA;AAAA,MACd,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,IAAA,IAAQ,aAAc,CAAA,IAAA;AAAA,MACvC,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,IAAQ,IAAA,EAAA;AAAA,MAChC,KAAO,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,KAAS,IAAA,EAAA;AAAA,MAClC,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,IAAQ,IAAA,EAAA;AAAA,MAChC,QAAA,EAAU,EAAG,CAAA,MAAA,EAAQ,QAAY,IAAA;AAAA,KACnC,CAAE,CACD,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,QAAA,IAAY,CAAE,CAAA,CAAA;AAAA,GACzD,EAAG,CAAC,0BAA0B,CAAC,CAAA;AAE/B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,aAAA,kBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,yBAA0B,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAE,EAAA,EAAG,CAC3D,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,EAAI,EAAA,EAAE,UAAY,EAAA,GAAA,EAAK,EAAI,EAAA,CAAA,EACpD,EAAA,EAAA,IAAA,EAAM,WAAe,IAAA,OACxB,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,6BAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,UAAY,EAAA,MAAA;AAAA,YACZ,OAAS,EAAA,SAAA;AAAA,YACT,YAAc,EAAA;AAAA;AAChB;AAAA,OAEJ,CAAA;AAAA,MAEF,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA;AAAA;AACd,OACF;AAAA,MACA,WAAa,EAAA,UAAA;AAAA,MACb,QAAA;AAAA,MACA;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,WAAW,EAAA,IAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,WAAA,EAAa,MAAM,WAAA,CAAY,IAAI;AAAA;AAAA;AACrC,GACF;AAEJ;;;;"}
+{"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 React, { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  identityApiRef,\n  useApi,\n  ProfileInfo,\n} from '@backstage/core-plugin-api';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { MenuSection } from './MenuSection';\nimport { useDropdownManager } from '../../hooks';\nimport Box from '@mui/material/Box';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n  layout?: React.CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const identityApi = useApi(identityApiRef);\n  const [user, setUser] = useState<ProfileInfo>();\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 fetchUser = async () => {\n      const userProfile = await identityApi.getProfileInfo();\n      setUser(userProfile);\n    };\n\n    fetchUser();\n  }, [identityApi]);\n\n  const menuItems = useMemo(() => {\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component,\n        icon: mp.config?.props?.icon ?? '',\n        label: mp.config?.props?.title ?? '',\n        link: mp.config?.props?.link ?? '',\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n          <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mr: 1 }} />\n          <Typography\n            variant=\"body2\"\n            sx={{\n              display: { xs: 'none', md: 'block' },\n              fontWeight: 500,\n              mr: '1rem',\n            }}\n          >\n            {user?.displayName ?? 'Guest'}\n          </Typography>\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":";;;;;;;;;;;;AAwCO,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAmC,KAAA;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AAEjE,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAsB,EAAA;AAC9C,EAAA,MAAM,6BAA6B,6BAA8B,EAAA;AAEjE,EAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA;AACjD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,SAAS,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAU,OAAS,EAAA;AACrB,MAAA,MAAM,aAAgB,GAAA,MAAA,CAAO,gBAAiB,CAAA,SAAA,CAAU,OAAO,CAAA;AAC/D,MAAA,MAAM,YAAY,aAAc,CAAA,eAAA;AAChC,MAAW,UAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,GAAG,CAAC,CAAA;AAAA;AACpC,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,SAAA,GAAY,QAAS,CAAA,cAAA,CAAe,eAAe,CAAA;AACzD,IAAA,IAAI,SAAW,EAAA;AACb,MAAM,MAAA,aAAA,GAAgB,MAAO,CAAA,gBAAA,CAAiB,SAAS,CAAA;AACvD,MAAA,MAAM,YAAY,aAAc,CAAA,eAAA;AAChC,MAAW,UAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,GAAG,CAAC,CAAA;AAAA;AACpC,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAY,YAAY;AAC5B,MAAM,MAAA,WAAA,GAAc,MAAM,WAAA,CAAY,cAAe,EAAA;AACrD,MAAA,OAAA,CAAQ,WAAW,CAAA;AAAA,KACrB;AAEA,IAAU,SAAA,EAAA;AAAA,GACZ,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAM;AAC9B,IAAA,OAAA,CAAQ,0BAA8B,IAAA,EACnC,EAAA,GAAA,CAAI,CAAO,EAAA,MAAA;AAAA,MACV,WAAW,EAAG,CAAA,SAAA;AAAA,MACd,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,IAAQ,IAAA,EAAA;AAAA,MAChC,KAAO,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,KAAS,IAAA,EAAA;AAAA,MAClC,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,IAAQ,IAAA,EAAA;AAAA,MAChC,QAAA,EAAU,EAAG,CAAA,MAAA,EAAQ,QAAY,IAAA;AAAA,KACnC,CAAE,CACD,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,QAAA,IAAY,CAAE,CAAA,CAAA;AAAA,GACzD,EAAG,CAAC,0BAA0B,CAAC,CAAA;AAE/B,EAAI,IAAA,SAAA,CAAU,WAAW,CAAG,EAAA;AAC1B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,aAAA,sCACG,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAS,EAAA,MAAA,EAAQ,YAAY,QAAU,EAAA,GAAG,QACnD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BAA0B,QAAS,EAAA,OAAA,EAAQ,IAAI,EAAE,EAAA,EAAI,CAAE,EAAA,EAAG,CAC3D,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,OAAA;AAAA,UACR,EAAI,EAAA;AAAA,YACF,OAAS,EAAA,EAAE,EAAI,EAAA,MAAA,EAAQ,IAAI,OAAQ,EAAA;AAAA,YACnC,UAAY,EAAA,GAAA;AAAA,YACZ,EAAI,EAAA;AAAA;AACN,SAAA;AAAA,QAEC,MAAM,WAAe,IAAA;AAAA,OAExB,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,6BAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,OAAS,EAAA,OAAA;AAAA,YACT,YAAc,EAAA;AAAA;AAChB;AAAA,OAEJ,CAAA;AAAA,MAEF,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA;AAAA;AACd,OACF;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT;AAAA,KAAA;AAAA,wCAEC,WAAY,EAAA,EAAA,WAAA,EAAW,IAAC,EAAA,KAAA,EAAO,WAAW,WAA0B,EAAA;AAAA,GACvE;AAEJ;;;;"}

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import MenuSection from './MenuSection.esm.js';
-import { HeaderLink } from '../HeaderLinkComponent/HeaderLink.esm.js';
-import { ComponentType } from '../../types.esm.js';
+import { MenuSection } from './MenuSection.esm.js';
+import { MenuItemLink } from '../MenuItemLink/MenuItemLink.esm.js';
 
 const RegisterAComponentSection = ({
   hideDivider,
@@ -13,11 +12,11 @@ const RegisterAComponentSection = ({
       hideDivider,
       items: [
         {
-          type: ComponentType.LINK,
           label: "Register a component",
+          subLabel: "Import it to the catalog page",
           link: "/catalog-import",
           icon: "category",
-          Component: HeaderLink
+          Component: MenuItemLink
         }
       ],
       handleClose

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

@@ -1 +1 @@
-{"version":3,"file":"RegisterAComponentSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/RegisterAComponentSection.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 React from 'react';\nimport MenuSection from './MenuSection';\nimport { HeaderLink } from '../HeaderLinkComponent/HeaderLink';\nimport { ComponentType } from '../../types';\n\n/**\n * Register A Component Section properties\n *\n * @public\n */\nexport type RegisterAComponentSectionProps = {\n  hideDivider: boolean;\n  handleClose: () => void;\n};\n\nexport const RegisterAComponentSection = ({\n  hideDivider,\n  handleClose,\n}: RegisterAComponentSectionProps) => {\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      items={[\n        {\n          type: ComponentType.LINK,\n          label: 'Register a component',\n          link: '/catalog-import',\n          icon: 'category',\n          Component: HeaderLink as React.ComponentType,\n        },\n      ]}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AA+BO,MAAM,4BAA4B,CAAC;AAAA,EACxC,WAAA;AAAA,EACA;AACF,CAAsC,KAAA;AACpC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL;AAAA,UACE,MAAM,aAAc,CAAA,IAAA;AAAA,UACpB,KAAO,EAAA,sBAAA;AAAA,UACP,IAAM,EAAA,iBAAA;AAAA,UACN,IAAM,EAAA,UAAA;AAAA,UACN,SAAW,EAAA;AAAA;AACb,OACF;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"RegisterAComponentSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/RegisterAComponentSection.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 React from 'react';\nimport { MenuSection } from './MenuSection';\nimport { MenuItemLink } from '../MenuItemLink/MenuItemLink';\n\n/**\n * Register A Component Section properties\n *\n * @public\n */\nexport type RegisterAComponentSectionProps = {\n  hideDivider: boolean;\n  handleClose: () => void;\n};\n\nexport const RegisterAComponentSection = ({\n  hideDivider,\n  handleClose,\n}: RegisterAComponentSectionProps) => {\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      items={[\n        {\n          label: 'Register a component',\n          subLabel: 'Import it to the catalog page',\n          link: '/catalog-import',\n          icon: 'category',\n          Component: MenuItemLink as React.ComponentType,\n        },\n      ]}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AA8BO,MAAM,4BAA4B,CAAC;AAAA,EACxC,WAAA;AAAA,EACA;AACF,CAAsC,KAAA;AACpC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL;AAAA,UACE,KAAO,EAAA,sBAAA;AAAA,UACP,QAAU,EAAA,+BAAA;AAAA,UACV,IAAM,EAAA,iBAAA;AAAA,UACN,IAAM,EAAA,UAAA;AAAA,UACN,SAAW,EAAA;AAAA;AACb,OACF;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,11 +1,56 @@
-import React from 'react';
-import MenuSection from './MenuSection.esm.js';
+import React, { useState, useEffect, useMemo } from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import { MenuSection } from './MenuSection.esm.js';
+import { MenuItemLink } from '../MenuItemLink/MenuItemLink.esm.js';
 
 const SoftwareTemplatesSection = ({
-  items,
   handleClose,
   hideDivider
 }) => {
+  const catalogApi = useApi(catalogApiRef);
+  const [entities, setEntities] = useState([]);
+  const [_loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    const fetchEntities = async () => {
+      try {
+        const response = await catalogApi.getEntities({
+          filter: { kind: ["Template"] },
+          limit: 7
+        });
+        setEntities(response.items);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchEntities();
+  }, [catalogApi]);
+  const items = useMemo(() => {
+    return entities.filter((e) => e.kind === "Template").map((m) => ({
+      Component: MenuItemLink,
+      label: m.metadata.title ?? m.metadata.name,
+      link: `/create/templates/default/${m.metadata.name}`
+    }));
+  }, [entities]);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center", p: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "error" }, "Error fetching templates"));
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "body2",
+        sx: { mx: 2, my: 1, color: "text.disabled" }
+      },
+      "No templates available"
+    ), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { my: 0.5 } }));
+  }
   return /* @__PURE__ */ React.createElement(
     MenuSection,
     {

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

@@ -1 +1 @@
-{"version":3,"file":"SoftwareTemplatesSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/SoftwareTemplatesSection.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 React from 'react';\nimport MenuSection, { MenuItemConfig } from './MenuSection';\n\n/**\n * Software Templates Section properties\n *\n * @public\n */\nexport type SoftwareTemplatesSectionProps = {\n  items: MenuItemConfig[];\n  handleClose: () => void;\n  hideDivider?: boolean;\n};\n\nexport const SoftwareTemplatesSection = ({\n  items,\n  handleClose,\n  hideDivider,\n}: SoftwareTemplatesSectionProps) => {\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      sectionLabel=\"Use a template\"\n      optionalLink=\"/create\"\n      optionalLinkLabel=\"All templates\"\n      items={items}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AA8BO,MAAM,2BAA2B,CAAC;AAAA,EACvC,KAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAqC,KAAA;AACnC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,YAAa,EAAA,gBAAA;AAAA,MACb,YAAa,EAAA,SAAA;AAAA,MACb,iBAAkB,EAAA,eAAA;AAAA,MAClB,KAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SoftwareTemplatesSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/SoftwareTemplatesSection.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 React, { useEffect, useMemo, useState } from 'react';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\n\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport Typography from '@mui/material/Typography';\n\nimport { MenuSection } from './MenuSection';\nimport { MenuItemLink } from '../MenuItemLink/MenuItemLink';\n\n/**\n * Software Templates Section properties\n *\n * @public\n */\nexport type SoftwareTemplatesSectionProps = {\n  handleClose: () => void;\n  hideDivider?: boolean;\n};\n\nexport const SoftwareTemplatesSection = ({\n  handleClose,\n  hideDivider,\n}: SoftwareTemplatesSectionProps) => {\n  const catalogApi = useApi(catalogApiRef);\n\n  const [entities, setEntities] = useState<Entity[]>([]);\n  // TODO: handle loading\n  const [_loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    const fetchEntities = async () => {\n      try {\n        const response = await catalogApi.getEntities({\n          filter: { kind: ['Template'] },\n          limit: 7,\n        });\n        setEntities(response.items);\n      } catch (err) {\n        setError(err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchEntities();\n  }, [catalogApi]);\n\n  const items = useMemo(() => {\n    return entities\n      .filter(e => e.kind === 'Template')\n      .map(m => ({\n        Component: MenuItemLink as React.ComponentType,\n        label: m.metadata.title ?? m.metadata.name,\n        link: `/create/templates/default/${m.metadata.name}`,\n      }));\n  }, [entities]);\n\n  if (error) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" p={2}>\n        <Typography variant=\"body1\" color=\"error\">\n          Error fetching templates\n        </Typography>\n      </Box>\n    );\n  }\n\n  if (items.length === 0) {\n    return (\n      <>\n        <Typography\n          variant=\"body2\"\n          sx={{ mx: 2, my: 1, color: 'text.disabled' }}\n        >\n          No templates available\n        </Typography>\n        {!hideDivider && <Divider sx={{ my: 0.5 }} />}\n      </>\n    );\n  }\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      sectionLabel=\"Use a template\"\n      optionalLink=\"/create\"\n      optionalLinkLabel=\"All templates\"\n      items={items}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAuCO,MAAM,2BAA2B,CAAC;AAAA,EACvC,WAAA;AAAA,EACA;AACF,CAAqC,KAAA;AACnC,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA;AAEvC,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA;AAErD,EAAA,MAAM,CAAC,QAAA,EAAU,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA;AAC5C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,IAAI,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAgB,YAAY;AAChC,MAAI,IAAA;AACF,QAAM,MAAA,QAAA,GAAW,MAAM,UAAA,CAAW,WAAY,CAAA;AAAA,UAC5C,MAAQ,EAAA,EAAE,IAAM,EAAA,CAAC,UAAU,CAAE,EAAA;AAAA,UAC7B,KAAO,EAAA;AAAA,SACR,CAAA;AACD,QAAA,WAAA,CAAY,SAAS,KAAK,CAAA;AAAA,eACnB,GAAK,EAAA;AACZ,QAAA,QAAA,CAAS,GAAG,CAAA;AAAA,OACZ,SAAA;AACA,QAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAClB,KACF;AAEA,IAAc,aAAA,EAAA;AAAA,GAChB,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,KAAA,GAAQ,QAAQ,MAAM;AAC1B,IAAO,OAAA,QAAA,CACJ,OAAO,CAAK,CAAA,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA,CACjC,IAAI,CAAM,CAAA,MAAA;AAAA,MACT,SAAW,EAAA,YAAA;AAAA,MACX,KAAO,EAAA,CAAA,CAAE,QAAS,CAAA,KAAA,IAAS,EAAE,QAAS,CAAA,IAAA;AAAA,MACtC,IAAM,EAAA,CAAA,0BAAA,EAA6B,CAAE,CAAA,QAAA,CAAS,IAAI,CAAA;AAAA,KAClD,CAAA,CAAA;AAAA,GACN,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,2CACG,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,cAAA,EAAe,UAAS,UAAW,EAAA,QAAA,EAAS,CAAG,EAAA,CAAA,EAAA,sCAChE,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,KAAM,EAAA,OAAA,EAAA,EAAQ,0BAE1C,CACF,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACtB,IAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,IAAI,EAAE,EAAA,EAAI,GAAG,EAAI,EAAA,CAAA,EAAG,OAAO,eAAgB;AAAA,OAAA;AAAA,MAC5C;AAAA,KAED,EACC,CAAC,WAAA,oBAAgB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAI,EAAE,EAAA,EAAI,GAAI,EAAA,EAAG,CAC7C,CAAA;AAAA;AAGJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,YAAa,EAAA,gBAAA;AAAA,MACb,YAAa,EAAA,SAAA;AAAA,MACb,iBAAkB,EAAA,eAAA;AAAA,MAClB,KAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/{HeaderIconButtonComponent → HeaderIcon}/HeaderIcon.esm.js

@@ -3,30 +3,43 @@ import { useApp } from '@backstage/core-plugin-api';
 import MuiIcon from '@mui/material/Icon';
 import Box from '@mui/material/Box';
 
-const HeaderIcon = ({ icon, styles }) => {
+const HeaderIcon = ({
+  icon,
+  size = "small",
+  layout
+}) => {
   const app = useApp();
   if (!icon) {
     return null;
   }
   const SystemIcon = app.getSystemIcon(icon);
   if (SystemIcon) {
-    return /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...styles } }, /* @__PURE__ */ React.createElement(SystemIcon, { fontSize: "small" }));
+    return /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...layout } }, /* @__PURE__ */ React.createElement(SystemIcon, { fontSize: size }));
   }
   if (icon.startsWith("<svg")) {
     const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;
-    return /* @__PURE__ */ React.createElement(MuiIcon, { style: { fontSize: 20, ...styles } }, /* @__PURE__ */ React.createElement("img", { src: svgDataUri, alt: "" }));
+    return /* @__PURE__ */ React.createElement(MuiIcon, { fontSize: size, sx: layout }, /* @__PURE__ */ React.createElement("img", { src: svgDataUri, alt: "" }));
   }
   if (icon.startsWith("https://") || icon.startsWith("http://") || icon.startsWith("/")) {
     return /* @__PURE__ */ React.createElement(
       MuiIcon,
       {
-        style: { fontSize: 20, ...styles },
-        baseClassName: "material-icons-outlined"
+        fontSize: size,
+        baseClassName: "material-icons-outlined",
+        sx: layout
       },
       /* @__PURE__ */ React.createElement("img", { src: icon, alt: "" })
     );
   }
-  return /* @__PURE__ */ React.createElement(MuiIcon, { style: { fontSize: 20 }, baseClassName: "material-icons-outlined" }, icon);
+  return /* @__PURE__ */ React.createElement(
+    MuiIcon,
+    {
+      fontSize: size,
+      baseClassName: "material-icons-outlined",
+      sx: layout
+    },
+    icon
+  );
 };
 
 export { HeaderIcon };

package/dist/components/HeaderIcon/HeaderIcon.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIcon.esm.js","sources":["../../../src/components/HeaderIcon/HeaderIcon.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 */\nimport React from 'react';\nimport { useApp } from '@backstage/core-plugin-api';\nimport MuiIcon from '@mui/material/Icon';\nimport Box from '@mui/material/Box';\n\n/**\n * @public\n */\nexport interface HeaderIconProps {\n  icon: string;\n  size?: 'small' | 'medium' | 'large';\n  layout?: React.CSSProperties;\n}\n\n/**\n * @public\n */\nexport const HeaderIcon = ({\n  icon,\n  size = 'small',\n  layout,\n}: HeaderIconProps) => {\n  const app = useApp();\n  if (!icon) {\n    return null;\n  }\n\n  const SystemIcon = app.getSystemIcon(icon);\n  if (SystemIcon) {\n    return (\n      <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n        <SystemIcon fontSize={size} />\n      </Box>\n    );\n  }\n\n  if (icon.startsWith('<svg')) {\n    const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;\n    return (\n      <MuiIcon fontSize={size} sx={layout}>\n        <img src={svgDataUri} alt=\"\" />\n      </MuiIcon>\n    );\n  }\n\n  if (\n    icon.startsWith('https://') ||\n    icon.startsWith('http://') ||\n    icon.startsWith('/')\n  ) {\n    return (\n      <MuiIcon\n        fontSize={size}\n        baseClassName=\"material-icons-outlined\"\n        sx={layout}\n      >\n        <img src={icon} alt=\"\" />\n      </MuiIcon>\n    );\n  }\n\n  return (\n    <MuiIcon\n      fontSize={size}\n      baseClassName=\"material-icons-outlined\"\n      sx={layout}\n    >\n      {icon}\n    </MuiIcon>\n  );\n};\n"],"names":[],"mappings":";;;;;AAgCO,MAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,IAAO,GAAA,OAAA;AAAA,EACP;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,MAAM,MAAO,EAAA;AACnB,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,UAAA,GAAa,GAAI,CAAA,aAAA,CAAc,IAAI,CAAA;AACzC,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,GAAG,QACnD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,QAAA,EAAU,MAAM,CAC9B,CAAA;AAAA;AAIJ,EAAI,IAAA,IAAA,CAAK,UAAW,CAAA,MAAM,CAAG,EAAA;AAC3B,IAAA,MAAM,UAAa,GAAA,CAAA,0BAAA,EAA6B,IAAK,CAAA,IAAI,CAAC,CAAA,CAAA;AAC1D,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,QAAU,EAAA,IAAA,EAAM,EAAI,EAAA,MAAA,EAAA,kBAC1B,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,UAAA,EAAY,GAAI,EAAA,EAAA,EAAG,CAC/B,CAAA;AAAA;AAIJ,EACE,IAAA,IAAA,CAAK,UAAW,CAAA,UAAU,CAC1B,IAAA,IAAA,CAAK,UAAW,CAAA,SAAS,CACzB,IAAA,IAAA,CAAK,UAAW,CAAA,GAAG,CACnB,EAAA;AACA,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,IAAA;AAAA,QACV,aAAc,EAAA,yBAAA;AAAA,QACd,EAAI,EAAA;AAAA,OAAA;AAAA,sBAEH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,IAAA,EAAM,KAAI,EAAG,EAAA;AAAA,KACzB;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,IAAA;AAAA,MACV,aAAc,EAAA,yBAAA;AAAA,MACd,EAAI,EAAA;AAAA,KAAA;AAAA,IAEH;AAAA,GACH;AAEJ;;;;"}

package/dist/components/HeaderIconButton/HeaderIconButton.esm.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Link as Link$1 } from '@backstage/core-components';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { HeaderIcon } from '../HeaderIcon/HeaderIcon.esm.js';
+
+const Link = (props) => /* @__PURE__ */ React.createElement(Link$1, { ...props, color: "inherit", externalLinkIcon: false });
+const HeaderIconButton = ({
+  title,
+  icon,
+  tooltip,
+  color = "inherit",
+  size = "small",
+  ariaLabel,
+  to,
+  layout
+}) => {
+  if (!title) {
+    console.warn("HeaderIconButton has no title:", { icon, to });
+  }
+  const linkProps = { to };
+  return /* @__PURE__ */ React.createElement(Box, { sx: layout }, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip ?? title }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      LinkComponent: Link,
+      color,
+      size,
+      "aria-label": ariaLabel ?? title,
+      ...linkProps
+    },
+    /* @__PURE__ */ React.createElement(HeaderIcon, { icon, size })
+  ))));
+};
+
+export { HeaderIconButton };
+//# sourceMappingURL=HeaderIconButton.esm.js.map

package/dist/components/HeaderIconButton/HeaderIconButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconButton.esm.js","sources":["../../../src/components/HeaderIconButton/HeaderIconButton.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 React from 'react';\n\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport IconButton, { IconButtonProps } from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport { HeaderIcon } from '../HeaderIcon/HeaderIcon';\n\n/**\n * @public\n */\nexport interface HeaderIconButtonProps {\n  title: string;\n  icon: string;\n  tooltip?: string;\n  color?: 'inherit' | 'primary' | 'secondary' | 'default';\n  size?: 'small' | 'medium' | 'large';\n  ariaLabel?: string;\n  to: string;\n  layout?: React.CSSProperties;\n}\n\n// Backstage Link automatically detects external links and emits analytic events.\nconst Link = (props: any) => (\n  <BackstageLink {...props} color=\"inherit\" externalLinkIcon={false} />\n);\n\nexport const HeaderIconButton = ({\n  title,\n  icon,\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  ariaLabel,\n  to,\n  layout,\n}: HeaderIconButtonProps) => {\n  if (!title) {\n    // eslint-disable-next-line no-console\n    console.warn('HeaderIconButton has no title:', { icon, to });\n  }\n\n  const linkProps = { to } as IconButtonProps;\n\n  return (\n    <Box sx={layout}>\n      <Tooltip title={tooltip ?? title}>\n        <div>\n          <IconButton\n            LinkComponent={Link}\n            color={color}\n            size={size}\n            aria-label={ariaLabel ?? title}\n            {...linkProps} // to={to} isn't supported\n          >\n            <HeaderIcon icon={icon} size={size} />\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;AAyCA,MAAM,IAAA,GAAO,CAAC,KAAA,qBACX,KAAA,CAAA,aAAA,CAAAA,MAAA,EAAA,EAAe,GAAG,KAAO,EAAA,KAAA,EAAM,SAAU,EAAA,gBAAA,EAAkB,KAAO,EAAA,CAAA;AAG9D,MAAM,mBAAmB,CAAC;AAAA,EAC/B,KAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,SAAA;AAAA,EACA,EAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAA,IAAI,CAAC,KAAO,EAAA;AAEV,IAAA,OAAA,CAAQ,IAAK,CAAA,gCAAA,EAAkC,EAAE,IAAA,EAAM,IAAI,CAAA;AAAA;AAG7D,EAAM,MAAA,SAAA,GAAY,EAAE,EAAG,EAAA;AAEvB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,KAAO,EAAA,OAAA,IAAW,KACzB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAe,EAAA,IAAA;AAAA,MACf,KAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAY,SAAa,IAAA,KAAA;AAAA,MACxB,GAAG;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,IAAA,EAAY,IAAY,EAAA;AAAA,GAExC,CACF,CACF,CAAA;AAEJ;;;;"}

package/dist/components/{HeaderButtonComponent → LogoutButton}/LogoutButton.esm.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useApi, errorApiRef, identityApiRef } from '@backstage/core-plugin-api';
-import { HeaderButton } from './HeaderButton.esm.js';
+import Box from '@mui/material/Box';
+import { MenuItemLinkContent } from '../MenuItemLink/MenuItemLinkContent.esm.js';
 
 const LogoutButton = () => {
   const errorApi = useApi(errorApiRef);
@@ -8,7 +9,14 @@ const LogoutButton = () => {
   const handleLogout = () => {
     identityApi.signOut().catch((error) => errorApi.post(error));
   };
-  return /* @__PURE__ */ React.createElement(HeaderButton, { title: "Logout", icon: "logout", onClick: handleLogout });
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      onClick: handleLogout,
+      sx: { cursor: "pointer", width: "100%", color: "inherit" }
+    },
+    /* @__PURE__ */ React.createElement(MenuItemLinkContent, { icon: "logout", label: "Logout" })
+  );
 };
 
 export { LogoutButton };

package/dist/components/LogoutButton/LogoutButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoutButton.esm.js","sources":["../../../src/components/LogoutButton/LogoutButton.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 React from 'react';\n\nimport {\n  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\n\nimport Box from '@mui/material/Box';\n\nimport { MenuItemLinkContent } from '../MenuItemLink/MenuItemLinkContent';\n\nexport const LogoutButton = () => {\n  const errorApi = useApi(errorApiRef);\n  const identityApi = useApi(identityApiRef);\n\n  const handleLogout = () => {\n    identityApi.signOut().catch(error => errorApi.post(error));\n  };\n\n  // TODO switch to Button\n  return (\n    <Box\n      onClick={handleLogout}\n      sx={{ cursor: 'pointer', width: '100%', color: 'inherit' }}\n    >\n      <MenuItemLinkContent icon=\"logout\" label=\"Logout\" />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;AA4BO,MAAM,eAAe,MAAM;AAChC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AAEzC,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,WAAA,CAAY,SAAU,CAAA,KAAA,CAAM,WAAS,QAAS,CAAA,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,GAC3D;AAGA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,YAAA;AAAA,MACT,IAAI,EAAE,MAAA,EAAQ,WAAW,KAAO,EAAA,MAAA,EAAQ,OAAO,SAAU;AAAA,KAAA;AAAA,oBAExD,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,EAAoB,IAAK,EAAA,QAAA,EAAS,OAAM,QAAS,EAAA;AAAA,GACpD;AAEJ;;;;"}

package/dist/components/{HeaderLinkComponent/HeaderLink.esm.js → MenuItemLink/MenuItemLink.esm.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 import Tooltip from '@mui/material/Tooltip';
 import { Link } from 'react-router-dom';
-import HeaderItemContent from './HeaderItemContent.esm.js';
+import { MenuItemLinkContent } from './MenuItemLinkContent.esm.js';
 
-const HeaderLink = ({
+const MenuItemLink = ({
   to,
   title,
   subTitle,
@@ -20,10 +20,10 @@ const HeaderLink = ({
         width: "100%"
       }
     },
-    /* @__PURE__ */ React.createElement(HeaderItemContent, { icon, label: title, subLabel: subTitle })
+    /* @__PURE__ */ React.createElement(MenuItemLinkContent, { icon, label: title, subLabel: subTitle })
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, tooltip && /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, headerLinkContent()), !tooltip && headerLinkContent());
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, tooltip && /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement("div", null, headerLinkContent())), !tooltip && headerLinkContent());
 };
 
-export { HeaderLink };
-//# sourceMappingURL=HeaderLink.esm.js.map
+export { MenuItemLink };
+//# sourceMappingURL=MenuItemLink.esm.js.map

package/dist/components/MenuItemLink/MenuItemLink.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemLink.esm.js","sources":["../../../src/components/MenuItemLink/MenuItemLink.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 React from 'react';\nimport Tooltip from '@mui/material/Tooltip';\nimport { Link } from 'react-router-dom';\nimport { MenuItemLinkContent } from './MenuItemLinkContent';\n\n/**\n * Header Icon Button properties\n * @public\n */\nexport interface MenuItemLinkProps {\n  to: string;\n  title?: string;\n  subTitle?: string;\n  icon?: string;\n  tooltip?: string;\n}\n\nexport const MenuItemLink = ({\n  to,\n  title,\n  subTitle,\n  icon,\n  tooltip,\n}: MenuItemLinkProps) => {\n  const headerLinkContent = () => (\n    <Link\n      to={to}\n      style={{\n        color: 'inherit',\n        textDecoration: 'none',\n        width: '100%',\n      }}\n    >\n      <MenuItemLinkContent icon={icon} label={title} subLabel={subTitle} />\n    </Link>\n  );\n  return (\n    <>\n      {tooltip && (\n        <Tooltip title={tooltip}>\n          <div>{headerLinkContent()}</div>\n        </Tooltip>\n      )}\n      {!tooltip && headerLinkContent()}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiCO,MAAM,eAAe,CAAC;AAAA,EAC3B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,oBAAoB,sBACxB,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,SAAA;AAAA,QACP,cAAgB,EAAA,MAAA;AAAA,QAChB,KAAO,EAAA;AAAA;AACT,KAAA;AAAA,wCAEC,mBAAoB,EAAA,EAAA,IAAA,EAAY,KAAO,EAAA,KAAA,EAAO,UAAU,QAAU,EAAA;AAAA,GACrE;AAEF,EAAA,uBAEK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,OAAA,oBACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,OAAO,OACd,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA,EAAA,iBAAA,EAAoB,CAC5B,CAAA,EAED,CAAC,OAAA,IAAW,mBACf,CAAA;AAEJ;;;;"}

package/dist/components/MenuItemLink/MenuItemLinkContent.esm.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { HeaderIcon } from '../HeaderIcon/HeaderIcon.esm.js';
+import { useTheme } from '@mui/material/styles';
+
+const MenuItemLinkContent = ({
+  icon,
+  label,
+  subLabel
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        margin: "8px 0",
+        color: "inherit"
+      }
+    },
+    icon && /* @__PURE__ */ React.createElement(
+      HeaderIcon,
+      {
+        icon,
+        size: "small",
+        layout: label ? {
+          marginRight: "0.5rem",
+          flexShrink: 0,
+          color: theme.palette.mode === "dark" ? theme.palette.text.primary : theme.palette.text.disabled
+        } : {}
+      }
+    ),
+    /* @__PURE__ */ React.createElement(Box, null, label && /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: theme.palette.text.primary }, label), subLabel && /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "text.secondary" }, subLabel))
+  );
+};
+
+export { MenuItemLinkContent };
+//# sourceMappingURL=MenuItemLinkContent.esm.js.map

package/dist/components/MenuItemLink/MenuItemLinkContent.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemLinkContent.esm.js","sources":["../../../src/components/MenuItemLink/MenuItemLinkContent.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 React from 'react';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport { HeaderIcon } from '../HeaderIcon/HeaderIcon';\nimport { useTheme } from '@mui/material/styles';\n\ninterface MenuItemLinkContentProps {\n  icon?: string;\n  label?: string;\n  subLabel?: string;\n}\n\nexport const MenuItemLinkContent: React.FC<MenuItemLinkContentProps> = ({\n  icon,\n  label,\n  subLabel,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        margin: '8px 0',\n        color: 'inherit',\n      }}\n    >\n      {icon && (\n        <HeaderIcon\n          icon={icon}\n          size=\"small\"\n          layout={\n            label\n              ? {\n                  marginRight: '0.5rem',\n                  flexShrink: 0,\n                  color:\n                    theme.palette.mode === 'dark'\n                      ? theme.palette.text.primary\n                      : theme.palette.text.disabled,\n                }\n              : {}\n          }\n        />\n      )}\n      <Box>\n        {label && (\n          <Typography variant=\"body2\" color={theme.palette.text.primary}>\n            {label}\n          </Typography>\n        )}\n        {subLabel && (\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {subLabel}\n          </Typography>\n        )}\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA4BO,MAAM,sBAA0D,CAAC;AAAA,EACtE,IAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,MAAA;AAAA,QACT,UAAY,EAAA,QAAA;AAAA,QACZ,MAAQ,EAAA,OAAA;AAAA,QACR,KAAO,EAAA;AAAA;AACT,KAAA;AAAA,IAEC,IACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,IAAK,EAAA,OAAA;AAAA,QACL,QACE,KACI,GAAA;AAAA,UACE,WAAa,EAAA,QAAA;AAAA,UACb,UAAY,EAAA,CAAA;AAAA,UACZ,KAAA,EACE,KAAM,CAAA,OAAA,CAAQ,IAAS,KAAA,MAAA,GACnB,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA,GACnB,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,YAE3B;AAAC;AAAA,KAET;AAAA,oBAEF,KAAA,CAAA,aAAA,CAAC,WACE,KACC,oBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,KAAO,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,WACnD,KACH,CAAA,EAED,4BACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,SAAU,EAAA,KAAA,EAAM,gBACjC,EAAA,EAAA,QACH,CAEJ;AAAA,GACF;AAEJ;;;;"}

package/dist/components/NotificationButton/NotificationButton.esm.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link as Link$1 } from '@backstage/core-components';
+import Badge from '@mui/material/Badge';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import NotificationIcon from '@mui/icons-material/NotificationsOutlined';
+import { useNotificationCount } from '../../hooks/useNotificationCount.esm.js';
+
+const Link = (props) => /* @__PURE__ */ React.createElement(Link$1, { ...props, color: "inherit", externalLinkIcon: false });
+const NotificationButton = ({
+  title = "Notifications",
+  tooltip,
+  color = "inherit",
+  size = "small",
+  badgeColor = "error",
+  to = "/notifications",
+  layout
+}) => {
+  const { available, unreadCount } = useNotificationCount();
+  if (!available) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Box, { sx: layout }, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip ?? title }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      component: Link,
+      color,
+      size,
+      to,
+      "aria-label": title
+    },
+    unreadCount > 0 ? /* @__PURE__ */ React.createElement(Badge, { badgeContent: unreadCount, color: badgeColor, max: 999 }, /* @__PURE__ */ React.createElement(NotificationIcon, { fontSize: size })) : /* @__PURE__ */ React.createElement(NotificationIcon, { fontSize: size })
+  ))));
+};
+
+export { NotificationButton };
+//# sourceMappingURL=NotificationButton.esm.js.map

package/dist/components/NotificationButton/NotificationButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationButton.esm.js","sources":["../../../src/components/NotificationButton/NotificationButton.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 React from 'react';\n\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport NotificationIcon from '@mui/icons-material/NotificationsOutlined';\n\nimport { useNotificationCount } from '../../hooks/useNotificationCount';\n\n/**\n * @public\n */\nexport interface NotificationButtonProps {\n  title?: string;\n  tooltip?: string;\n  color?:\n    | 'inherit'\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  size?: 'small' | 'medium' | 'large';\n  badgeColor?:\n    | 'primary'\n    | 'secondary'\n    | 'default'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  to?: string;\n  layout?: React.CSSProperties;\n}\n\n// Backstage Link automatically detects external links and emits analytic events.\nconst Link = (props: any) => (\n  <BackstageLink {...props} color=\"inherit\" externalLinkIcon={false} />\n);\n\n/**\n * @public\n */\nexport const NotificationButton = ({\n  title = 'Notifications',\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  badgeColor = 'error',\n  to = '/notifications',\n  layout,\n}: NotificationButtonProps) => {\n  const { available, unreadCount } = useNotificationCount();\n\n  if (!available) {\n    return null;\n  }\n\n  return (\n    <Box sx={layout}>\n      <Tooltip title={tooltip ?? title}>\n        <div>\n          <IconButton\n            component={Link}\n            color={color}\n            size={size}\n            to={to}\n            aria-label={title}\n          >\n            {unreadCount > 0 ? (\n              <Badge badgeContent={unreadCount} color={badgeColor} max={999}>\n                <NotificationIcon fontSize={size} />\n              </Badge>\n            ) : (\n              <NotificationIcon fontSize={size} />\n            )}\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;;AAyDA,MAAM,IAAA,GAAO,CAAC,KAAA,qBACX,KAAA,CAAA,aAAA,CAAAA,MAAA,EAAA,EAAe,GAAG,KAAO,EAAA,KAAA,EAAM,SAAU,EAAA,gBAAA,EAAkB,KAAO,EAAA,CAAA;AAM9D,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAQ,GAAA,eAAA;AAAA,EACR,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,UAAa,GAAA,OAAA;AAAA,EACb,EAAK,GAAA,gBAAA;AAAA,EACL;AACF,CAA+B,KAAA;AAC7B,EAAA,MAAM,EAAE,SAAA,EAAW,WAAY,EAAA,GAAI,oBAAqB,EAAA;AAExD,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,KAAO,EAAA,OAAA,IAAW,KACzB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,MACX,KAAA;AAAA,MACA,IAAA;AAAA,MACA,EAAA;AAAA,MACA,YAAY,EAAA;AAAA,KAAA;AAAA,IAEX,cAAc,CACb,mBAAA,KAAA,CAAA,aAAA,CAAC,SAAM,YAAc,EAAA,WAAA,EAAa,OAAO,UAAY,EAAA,GAAA,EAAK,uBACvD,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA,CACpC,oBAEC,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA;AAAA,GAGxC,CACF,CACF,CAAA;AAEJ;;;;"}