@red-hat-developer-hub/backstage-plugin-global-header 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 1.5.0
+
+### Minor Changes
+
+- 72cf928: Add keyboard navigation support to global header menu items
+
+### Patch Changes
+
+- 41ebaf4: remove search bar underline
+
+## 1.4.0
+
+### Minor Changes
+
+- ba8628d: Added a new application launcher dropdown to the global header which can be used to configure application links and quick links.
+
 ## 1.3.0
 
 ### Minor Changes

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

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import AppsIcon from '@mui/icons-material/Apps';
+import AppRegistrationIcon from '@mui/icons-material/AppRegistration';
+import { useApplicationLauncherDropdownMountPoints } from '../../hooks/useApplicationLauncherDropdownMountPoints.esm.js';
+import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
+import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
+import { MenuSection } from './MenuSection.esm.js';
+import { DropdownEmptyState } from './DropdownEmptyState.esm.js';
+
+const ApplicationLauncherDropdown = () => {
+  const { anchorEl, handleOpen, handleClose } = useDropdownManager();
+  const mountPoints = useApplicationLauncherDropdownMountPoints();
+  const sectionsObject = useMemo(() => {
+    const groupedSections = {};
+    (mountPoints ?? []).forEach((mp) => {
+      const section = mp.config?.section ?? "";
+      const sectionLink = mp.config?.sectionLink ?? "";
+      const sectionLinkLabel = mp.config?.sectionLinkLabel ?? "";
+      if (!groupedSections[section]) {
+        groupedSections[section] = { sectionLink, sectionLinkLabel, items: [] };
+      }
+      groupedSections[section].items.push({
+        Component: mp.Component,
+        icon: mp.config?.props?.icon,
+        label: mp.config?.props?.title,
+        link: mp.config?.props?.link,
+        external: mp.config?.props?.external ?? false,
+        priority: mp.config?.priority ?? 0
+      });
+    });
+    Object.values(groupedSections).forEach((section) => {
+      section.items.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+    });
+    return groupedSections;
+  }, [mountPoints]);
+  const sections = Object.entries(sectionsObject);
+  return /* @__PURE__ */ React.createElement(
+    HeaderDropdownComponent,
+    {
+      buttonContent: /* @__PURE__ */ React.createElement(AppsIcon, null),
+      tooltip: "Application launcher",
+      isIconButton: true,
+      onOpen: handleOpen,
+      onClose: handleClose,
+      anchorEl
+    },
+    sections.length > 0 ? sections.map(
+      ([section, { sectionLink, sectionLinkLabel, items }], index) => /* @__PURE__ */ React.createElement(
+        MenuSection,
+        {
+          key: section,
+          sectionLabel: section,
+          optionalLink: sectionLink,
+          optionalLinkLabel: sectionLinkLabel,
+          items,
+          handleClose,
+          hideDivider: index === sections.length - 1
+        }
+      )
+    ) : /* @__PURE__ */ React.createElement(
+      DropdownEmptyState,
+      {
+        title: "No application links configured",
+        subTitle: "Configure application links in dynamic plugin config for quick access from here.",
+        icon: /* @__PURE__ */ React.createElement(
+          AppRegistrationIcon,
+          {
+            sx: { fontSize: 64, color: "text.disabled" }
+          }
+        )
+      }
+    )
+  );
+};
+
+export { ApplicationLauncherDropdown };
+//# sourceMappingURL=ApplicationLauncherDropdown.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationLauncherDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ApplicationLauncherDropdown.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, { useMemo } from 'react';\n\nimport AppsIcon from '@mui/icons-material/Apps';\nimport AppRegistrationIcon from '@mui/icons-material/AppRegistration';\n\nimport { useApplicationLauncherDropdownMountPoints } from '../../hooks/useApplicationLauncherDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { MenuSection } from './MenuSection';\nimport { DropdownEmptyState } from './DropdownEmptyState';\n\nexport const ApplicationLauncherDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const mountPoints = useApplicationLauncherDropdownMountPoints();\n\n  const sectionsObject = useMemo(() => {\n    const groupedSections: Record<\n      string,\n      { sectionLink?: string; sectionLinkLabel?: string; items: any[] }\n    > = {};\n\n    (mountPoints ?? []).forEach(mp => {\n      const section = mp.config?.section ?? '';\n      const sectionLink = mp.config?.sectionLink ?? '';\n      const sectionLinkLabel = mp.config?.sectionLinkLabel ?? '';\n\n      if (!groupedSections[section]) {\n        groupedSections[section] = { sectionLink, sectionLinkLabel, items: [] };\n      }\n      groupedSections[section].items.push({\n        Component: mp.Component,\n        icon: mp.config?.props?.icon,\n        label: mp.config?.props?.title,\n        link: mp.config?.props?.link,\n        external: mp.config?.props?.external ?? false,\n        priority: mp.config?.priority ?? 0,\n      });\n    });\n\n    Object.values(groupedSections).forEach(section => {\n      section.items.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n    });\n\n    return groupedSections;\n  }, [mountPoints]);\n\n  const sections = Object.entries(sectionsObject);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={<AppsIcon />}\n      tooltip=\"Application launcher\"\n      isIconButton\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      {sections.length > 0 ? (\n        sections.map(\n          ([section, { sectionLink, sectionLinkLabel, items }], index) => (\n            <MenuSection\n              key={section}\n              sectionLabel={section}\n              optionalLink={sectionLink}\n              optionalLinkLabel={sectionLinkLabel}\n              items={items}\n              handleClose={handleClose}\n              hideDivider={index === sections.length - 1}\n            />\n          ),\n        )\n      ) : (\n        <DropdownEmptyState\n          title=\"No application links configured\"\n          subTitle=\"Configure application links in dynamic plugin config for quick access from here.\"\n          icon={\n            <AppRegistrationIcon\n              sx={{ fontSize: 64, color: 'text.disabled' }}\n            />\n          }\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { InfoCard } from '@backstage/core-components';
+
+const DropdownEmptyState = ({
+  title,
+  subTitle,
+  icon
+}) => {
+  return /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        py: 4,
+        px: 2,
+        // Added padding to control width
+        maxWidth: 300,
+        // Set max width to constrain text expansion
+        mx: "auto"
+      }
+    },
+    icon,
+    /* @__PURE__ */ React.createElement(Typography, { variant: "h6", sx: { mt: 2, color: "text.primary" } }, title),
+    /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "body2",
+        sx: { mt: 1, color: "text.secondary", maxWidth: 250 }
+      },
+      subTitle
+    )
+  ));
+};
+
+export { DropdownEmptyState };
+//# sourceMappingURL=DropdownEmptyState.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownEmptyState.esm.js","sources":["../../../src/components/HeaderDropdownComponent/DropdownEmptyState.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 Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { InfoCard } from '@backstage/core-components';\n\n/**\n * @public\n * Props for dropdown empty state\n */\ninterface DropdownEmptyStateProps {\n  title: string;\n  subTitle: string;\n  icon: React.ReactNode;\n}\n\nexport const DropdownEmptyState: React.FC<DropdownEmptyStateProps> = ({\n  title,\n  subTitle,\n  icon,\n}) => {\n  return (\n    <InfoCard>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          textAlign: 'center',\n          py: 4,\n          px: 2, // Added padding to control width\n          maxWidth: 300, // Set max width to constrain text expansion\n          mx: 'auto',\n        }}\n      >\n        {icon}\n        <Typography variant=\"h6\" sx={{ mt: 2, color: 'text.primary' }}>\n          {title}\n        </Typography>\n        <Typography\n          variant=\"body2\"\n          sx={{ mt: 1, color: 'text.secondary', maxWidth: 250 }}\n        >\n          {subTitle}\n        </Typography>\n      </Box>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,qBAAwD,CAAC;AAAA,EACpE,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,2CACG,QACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,SAAW,EAAA,QAAA;AAAA,QACX,EAAI,EAAA,CAAA;AAAA,QACJ,EAAI,EAAA,CAAA;AAAA;AAAA,QACJ,QAAU,EAAA,GAAA;AAAA;AAAA,QACV,EAAI,EAAA;AAAA;AACN,KAAA;AAAA,IAEC,IAAA;AAAA,oBACD,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,cAAe,EAAA,EAAA,EACzD,KACH,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,IAAI,EAAE,EAAA,EAAI,GAAG,KAAO,EAAA,gBAAA,EAAkB,UAAU,GAAI;AAAA,OAAA;AAAA,MAEnD;AAAA;AACH,GAEJ,CAAA;AAEJ;;;;"}

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

@@ -1,33 +1,28 @@
-import React from 'react';
+import React, { useId } from 'react';
 import Menu from '@mui/material/Menu';
 import Button from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
-const Listbox = styled("ul")(
-  ({ theme }) => `
-  font-size: 0.875rem;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  min-width: 160px;
-  border-radius: 4px;
-  text-decoration: none;
-  list-style: none;
-  overflow: auto;
-  outline: 1;
-  background: ${theme.palette.background.paper};
-  border: 1px solid ${theme.palette.divider};
-  color: ${theme.palette.mode === "dark" ? theme.palette.text.disabled : theme.palette.text.primary};
-  boxShadow: theme.palette.mode === 'dark'
-    ? '0 2px 6px 2px rgba(0,0,0,0.50), 0 1px 2px 0 rgba(0,0,0,0.50)'
-    : '0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30)',
-  max-height: 60vh;
-  z-index: 1;
-  `
-);
+const menuListStyle = (theme) => ({
+  fontSize: "0.875rem",
+  boxSizing: "border-box",
+  padding: 0,
+  margin: 0,
+  minWidth: "160px",
+  borderRadius: "4px",
+  textDecoration: "none",
+  listStyle: "none",
+  overflow: "auto",
+  outline: "1px solid transparent",
+  background: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  color: theme.palette.mode === "dark" ? theme.palette.text.disabled : theme.palette.text.primary,
+  boxShadow: theme.palette.mode === "dark" ? "0 2px 6px 2px rgba(0,0,0,0.50), 0 1px 2px 0 rgba(0,0,0,0.50)" : "0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30)",
+  maxHeight: "60vh",
+  zIndex: 1
+});
 const HeaderDropdownComponent = ({
   buttonContent,
   children,
@@ -36,21 +31,26 @@ const HeaderDropdownComponent = ({
   onClose,
   anchorEl,
   isIconButton = false,
+  size = "small",
   tooltip
 }) => {
-  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, isIconButton ? /* @__PURE__ */ React.createElement(IconButton, { ...buttonProps, color: "inherit", onClick: onOpen }, buttonContent) : /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      disableRipple: true,
-      disableTouchRipple: true,
-      ...buttonProps,
-      onClick: onOpen
+  const id = useId();
+  const commonButtonProps = {
+    ...buttonProps,
+    onClick: (event) => {
+      onOpen(event);
+      setTimeout(() => {
+        document.getElementById(`${id}-menu`)?.getElementsByTagName("a")[0]?.focus();
+      }, 0);
     },
-    buttonContent
-  )), /* @__PURE__ */ React.createElement(
+    "aria-haspopup": true,
+    "aria-controls": id,
+    "aria-expanded": anchorEl ? true : void 0
+  };
+  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, isIconButton ? /* @__PURE__ */ React.createElement(IconButton, { ...commonButtonProps, color: "inherit", size }, buttonContent) : /* @__PURE__ */ React.createElement(Button, { disableRipple: true, disableTouchRipple: true, ...commonButtonProps }, buttonContent)), /* @__PURE__ */ React.createElement(
     Menu,
     {
-      id: "menu-appbar",
+      id: `${id}-menu`,
       anchorEl,
       keepMounted: true,
       open: Boolean(anchorEl),
@@ -67,9 +67,13 @@ const HeaderDropdownComponent = ({
         '& ul[class*="MuiMenu-list"]': {
           py: 0
         }
+      },
+      MenuListProps: {
+        "aria-labelledby": id,
+        sx: (theme) => menuListStyle(theme)
       }
     },
-    /* @__PURE__ */ React.createElement(Listbox, { role: "menu" }, children)
+    children
   ));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderDropdownComponent.esm.js","sources":["../../../src/components/HeaderDropdownComponent/HeaderDropdownComponent.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 Menu from '@mui/material/Menu';\nimport Button from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport { MenuItemConfig, MenuSectionConfig } from './MenuSection';\n\ninterface HeaderDropdownProps {\n  buttonContent: React.ReactNode;\n  children: React.ReactNode;\n  menuSections?: MenuSectionConfig[];\n  menuBottomItems?: MenuItemConfig[];\n  buttonProps?: React.ComponentProps<typeof Button>;\n  onOpen: (event: React.MouseEvent<HTMLElement>) => void;\n  onClose: () => void;\n  anchorEl: HTMLElement | null;\n  isIconButton?: boolean;\n  tooltip?: string;\n}\n\nconst Listbox = styled('ul')(\n  ({ theme }) => `\n  font-size: 0.875rem;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  min-width: 160px;\n  border-radius: 4px;\n  text-decoration: none;\n  list-style: none;\n  overflow: auto;\n  outline: 1;\n  background: ${theme.palette.background.paper};\n  border: 1px solid ${theme.palette.divider};\n  color: ${\n    theme.palette.mode === 'dark'\n      ? theme.palette.text.disabled\n      : theme.palette.text.primary\n  };\n  boxShadow: theme.palette.mode === 'dark'\n    ? '0 2px 6px 2px rgba(0,0,0,0.50), 0 1px 2px 0 rgba(0,0,0,0.50)'\n    : '0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30)',\n  max-height: 60vh;\n  z-index: 1;\n  `,\n);\n\nexport const HeaderDropdownComponent: React.FC<HeaderDropdownProps> = ({\n  buttonContent,\n  children,\n  buttonProps,\n  onOpen,\n  onClose,\n  anchorEl,\n  isIconButton = false,\n  tooltip,\n}) => {\n  return (\n    <Box>\n      <Tooltip title={tooltip}>\n        {isIconButton ? (\n          <IconButton {...buttonProps} color=\"inherit\" onClick={onOpen}>\n            {buttonContent}\n          </IconButton>\n        ) : (\n          <Button\n            disableRipple\n            disableTouchRipple\n            {...buttonProps}\n            onClick={onOpen}\n          >\n            {buttonContent}\n          </Button>\n        )}\n      </Tooltip>\n      <Menu\n        id=\"menu-appbar\"\n        anchorEl={anchorEl}\n        keepMounted\n        open={Boolean(anchorEl)}\n        onClose={onClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'center',\n        }}\n        sx={{\n          '& ul[class*=\"MuiMenu-list\"]': {\n            py: 0,\n          },\n        }}\n      >\n        <Listbox role=\"menu\">{children}</Listbox>\n      </Menu>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAsCA,MAAM,OAAA,GAAU,OAAO,IAAI,CAAA;AAAA,EACzB,CAAC,EAAE,KAAA,EAAY,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWD,EAAA,KAAA,CAAM,OAAQ,CAAA,UAAA,CAAW,KAAK,CAAA;AAAA,oBACxB,EAAA,KAAA,CAAM,QAAQ,OAAO,CAAA;AAAA,SAEvC,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,MACnB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,QACnB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,OACzB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOF,CAAA;AAEO,MAAM,0BAAyD,CAAC;AAAA,EACrE,aAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAe,GAAA,KAAA;AAAA,EACf;AACF,CAAM,KAAA;AACJ,EAAA,2CACG,GACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAO,WACb,YACC,mBAAA,KAAA,CAAA,aAAA,CAAC,UAAY,EAAA,EAAA,GAAG,aAAa,KAAM,EAAA,SAAA,EAAU,OAAS,EAAA,MAAA,EAAA,EACnD,aACH,CAEA,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MACjB,GAAG,WAAA;AAAA,MACJ,OAAS,EAAA;AAAA,KAAA;AAAA,IAER;AAAA,GAGP,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,aAAA;AAAA,MACH,QAAA;AAAA,MACA,WAAW,EAAA,IAAA;AAAA,MACX,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,MACtB,OAAA;AAAA,MACA,YAAc,EAAA;AAAA,QACZ,QAAU,EAAA,QAAA;AAAA,QACV,UAAY,EAAA;AAAA,OACd;AAAA,MACA,eAAiB,EAAA;AAAA,QACf,QAAU,EAAA,KAAA;AAAA,QACV,UAAY,EAAA;AAAA,OACd;AAAA,MACA,EAAI,EAAA;AAAA,QACF,6BAA+B,EAAA;AAAA,UAC7B,EAAI,EAAA;AAAA;AACN;AACF,KAAA;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAK,EAAA,MAAA,EAAA,EAAQ,QAAS;AAAA,GAEnC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderDropdownComponent.esm.js","sources":["../../../src/components/HeaderDropdownComponent/HeaderDropdownComponent.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, { useId } from 'react';\nimport Menu from '@mui/material/Menu';\nimport Button from '@mui/material/Button';\nimport { Theme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport IconButton, { IconButtonProps } from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport { MenuItemConfig, MenuSectionConfig } from './MenuSection';\n\ninterface HeaderDropdownProps {\n  buttonContent: React.ReactNode;\n  children: React.ReactNode;\n  menuSections?: MenuSectionConfig[];\n  menuBottomItems?: MenuItemConfig[];\n  buttonProps?: React.ComponentProps<typeof Button>;\n  onOpen: (event: React.MouseEvent<HTMLElement>) => void;\n  onClose: () => void;\n  anchorEl: HTMLElement | null;\n  isIconButton?: boolean;\n  tooltip?: string;\n  size?: IconButtonProps['size'];\n}\n\nconst menuListStyle = (theme: Theme) => ({\n  fontSize: '0.875rem',\n  boxSizing: 'border-box',\n  padding: 0,\n  margin: 0,\n  minWidth: '160px',\n  borderRadius: '4px',\n  textDecoration: 'none',\n  listStyle: 'none',\n  overflow: 'auto',\n  outline: '1px solid transparent',\n  background: theme.palette.background.paper,\n  border: `1px solid ${theme.palette.divider}`,\n  color:\n    theme.palette.mode === 'dark'\n      ? theme.palette.text.disabled\n      : theme.palette.text.primary,\n  boxShadow:\n    theme.palette.mode === 'dark'\n      ? '0 2px 6px 2px rgba(0,0,0,0.50), 0 1px 2px 0 rgba(0,0,0,0.50)'\n      : '0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30)',\n  maxHeight: '60vh',\n  zIndex: 1,\n});\n\nexport const HeaderDropdownComponent: React.FC<HeaderDropdownProps> = ({\n  buttonContent,\n  children,\n  buttonProps,\n  onOpen,\n  onClose,\n  anchorEl,\n  isIconButton = false,\n  size = 'small',\n  tooltip,\n}) => {\n  const id = useId();\n\n  const commonButtonProps = {\n    ...buttonProps,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      onOpen(event);\n      // focus the menu when opened\n      // TODO: investigate why MUI isn't doing this for us\n      setTimeout(() => {\n        document\n          .getElementById(`${id}-menu`)\n          ?.getElementsByTagName('a')[0]\n          ?.focus();\n      }, 0);\n    },\n    'aria-haspopup': true,\n    'aria-controls': id,\n    'aria-expanded': anchorEl ? true : undefined,\n  };\n\n  return (\n    <Box>\n      <Tooltip title={tooltip}>\n        {isIconButton ? (\n          <IconButton {...commonButtonProps} color=\"inherit\" size={size}>\n            {buttonContent}\n          </IconButton>\n        ) : (\n          <Button disableRipple disableTouchRipple {...commonButtonProps}>\n            {buttonContent}\n          </Button>\n        )}\n      </Tooltip>\n      <Menu\n        id={`${id}-menu`}\n        anchorEl={anchorEl}\n        keepMounted\n        open={Boolean(anchorEl)}\n        onClose={onClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'center',\n        }}\n        sx={{\n          '& ul[class*=\"MuiMenu-list\"]': {\n            py: 0,\n          },\n        }}\n        MenuListProps={{\n          'aria-labelledby': id,\n          sx: theme => menuListStyle(theme),\n        }}\n      >\n        {children}\n      </Menu>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
 import MenuItem from '@mui/material/MenuItem';
 import { Link } from '@backstage/core-components';
+import ListSubheader from '@mui/material/ListSubheader';
 
 const MenuSection = ({
   sectionLabel,
@@ -12,50 +12,61 @@ const MenuSection = ({
   items,
   hideDivider = false,
   handleClose
-}) => /* @__PURE__ */ React.createElement(Box, null, sectionLabel && /* @__PURE__ */ React.createElement(
-  Box,
-  {
-    sx: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      mx: 0,
-      mt: "0.5rem",
-      "&:hover": { background: "transparent" }
-    }
-  },
-  /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { pl: 2, color: "text.disabled" } }, sectionLabel),
-  /* @__PURE__ */ React.createElement(
+}) => {
+  const hasClickableSubheader = optionalLink && optionalLinkLabel && items.length > 0;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, sectionLabel && /* @__PURE__ */ React.createElement(
     MenuItem,
     {
       sx: {
-        "&:hover": { background: "transparent" }
+        p: 0
       },
       disableRipple: true,
       disableTouchRipple: true,
+      component: hasClickableSubheader ? Link : Fragment,
+      to: optionalLink,
       onClick: handleClose
     },
-    optionalLink && optionalLinkLabel && items.length > 0 && /* @__PURE__ */ React.createElement(
-      Link,
+    /* @__PURE__ */ React.createElement(
+      ListSubheader,
       {
-        to: optionalLink,
-        underline: "none",
-        style: { fontSize: "0.875em" }
+        sx: {
+          backgroundColor: "transparent",
+          m: 0,
+          color: "text.disabled",
+          lineHeight: 2,
+          mt: "0.5rem",
+          fontWeight: 400
+        }
+      },
+      sectionLabel
+    ),
+    optionalLinkLabel && /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        sx: {
+          fontSize: "0.875em",
+          mr: 2,
+          flexGrow: 1,
+          textAlign: "right",
+          mt: "0.5rem"
+        }
       },
       optionalLinkLabel
     )
-  )
-), /* @__PURE__ */ React.createElement("ul", { style: { padding: 0, listStyle: "none" } }, items.map(({ icon, label, subLabel, link, Component }, index) => /* @__PURE__ */ React.createElement(
-  MenuItem,
-  {
-    key: `menu-item-${index.toString()}`,
-    disableRipple: true,
-    disableTouchRipple: true,
-    onClick: handleClose,
-    sx: { py: 0.5, "&:hover": { background: "transparent" } }
-  },
-  /* @__PURE__ */ React.createElement(Component, { icon, to: link, title: label, subTitle: subLabel })
-))), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { my: 0.5 } }));
+  ), items.map(({ icon, label, subLabel, link, Component }, index) => /* @__PURE__ */ React.createElement(
+    MenuItem,
+    {
+      key: `menu-item-${index.toString()}`,
+      disableRipple: true,
+      disableTouchRipple: true,
+      onClick: handleClose,
+      sx: { py: 0.5 },
+      component: link ? Link : Fragment,
+      to: link
+    },
+    /* @__PURE__ */ React.createElement(Component, { icon, to: link, title: label, subTitle: subLabel })
+  )), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { my: 0.5 } }));
+};
 
 export { MenuSection };
 //# sourceMappingURL=MenuSection.esm.js.map

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 { 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;;;;"}
+{"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, { Fragment } from 'react';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport { MenuItemLinkProps } from '../MenuItemLink/MenuItemLink';\nimport ListSubheader from '@mui/material/ListSubheader';\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  const hasClickableSubheader =\n    optionalLink && optionalLinkLabel && items.length > 0;\n\n  return (\n    <>\n      {sectionLabel && (\n        <MenuItem\n          sx={{\n            p: 0,\n          }}\n          disableRipple\n          disableTouchRipple\n          component={hasClickableSubheader ? Link : Fragment}\n          to={optionalLink}\n          onClick={handleClose}\n        >\n          <ListSubheader\n            sx={{\n              backgroundColor: 'transparent',\n              m: 0,\n              color: 'text.disabled',\n              lineHeight: 2,\n              mt: '0.5rem',\n              fontWeight: 400,\n            }}\n          >\n            {sectionLabel}\n          </ListSubheader>\n\n          {optionalLinkLabel && (\n            <Box\n              sx={{\n                fontSize: '0.875em',\n                mr: 2,\n                flexGrow: 1,\n                textAlign: 'right',\n                mt: '0.5rem',\n              }}\n            >\n              {optionalLinkLabel}\n            </Box>\n          )}\n        </MenuItem>\n      )}\n\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 }}\n          component={link ? Link : Fragment}\n          to={link}\n        >\n          <Component icon={icon} to={link!} title={label} subTitle={subLabel} />\n        </MenuItem>\n      ))}\n      {!hideDivider && <Divider sx={{ my: 0.5 }} />}\n    </>\n  );\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,CAAM,KAAA;AACJ,EAAA,MAAM,qBACJ,GAAA,YAAA,IAAgB,iBAAqB,IAAA,KAAA,CAAM,MAAS,GAAA,CAAA;AAEtD,EAAA,iEAEK,YACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,CAAG,EAAA;AAAA,OACL;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MAClB,SAAA,EAAW,wBAAwB,IAAO,GAAA,QAAA;AAAA,MAC1C,EAAI,EAAA,YAAA;AAAA,MACJ,OAAS,EAAA;AAAA,KAAA;AAAA,oBAET,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,eAAiB,EAAA,aAAA;AAAA,UACjB,CAAG,EAAA,CAAA;AAAA,UACH,KAAO,EAAA,eAAA;AAAA,UACP,UAAY,EAAA,CAAA;AAAA,UACZ,EAAI,EAAA,QAAA;AAAA,UACJ,UAAY,EAAA;AAAA;AACd,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,IAEC,iBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,SAAA;AAAA,UACV,EAAI,EAAA,CAAA;AAAA,UACJ,QAAU,EAAA,CAAA;AAAA,UACV,SAAW,EAAA,OAAA;AAAA,UACX,EAAI,EAAA;AAAA;AACN,OAAA;AAAA,MAEC;AAAA;AACH,GAEJ,EAGD,KAAM,CAAA,GAAA,CAAI,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,QAAU,EAAA,IAAA,EAAM,SAAU,EAAA,EAAG,KACtD,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,MAClC,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MAClB,OAAS,EAAA,WAAA;AAAA,MACT,EAAA,EAAI,EAAE,EAAA,EAAI,GAAI,EAAA;AAAA,MACd,SAAA,EAAW,OAAO,IAAO,GAAA,QAAA;AAAA,MACzB,EAAI,EAAA;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,aAAU,IAAY,EAAA,EAAA,EAAI,MAAO,KAAO,EAAA,KAAA,EAAO,UAAU,QAAU,EAAA;AAAA,GAEvE,CACA,EAAA,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,GAAI,EAAA,EAAG,CAC7C,CAAA;AAEJ;;;;"}

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

@@ -1,20 +1,20 @@
 import React from 'react';
 import { useStarredEntities, useEntityPresentation } from '@backstage/plugin-catalog-react';
-import { Link, InfoCard } from '@backstage/core-components';
+import { 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';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
-import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
-import { parseEntityRef } from '@backstage/catalog-model';
 import { useTheme } from '@mui/material/styles';
 import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import Box from '@mui/material/Box';
+import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
+import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
+import { DropdownEmptyState } from './DropdownEmptyState.esm.js';
 
 const StarredItem = ({
   entityRef,
@@ -55,32 +55,6 @@ const StarredItem = ({
     ))
   );
 };
-const NoStarredItems = () => {
-  return /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      textAlign: "center",
-      py: 4,
-      px: 2,
-      maxWidth: 300,
-      mx: "auto"
-    },
-    /* @__PURE__ */ React.createElement(AutoAwesomeIcon, { sx: { fontSize: 64 }, color: "disabled" }),
-    /* @__PURE__ */ React.createElement(Typography, { variant: "h6", sx: { mt: 2, color: "text.primary" } }, "No starred items yet"),
-    /* @__PURE__ */ React.createElement(
-      Typography,
-      {
-        variant: "body2",
-        sx: { mt: 1, color: "text.secondary", maxWidth: 250 }
-      },
-      "Click the star icon next to an entity's name to save it here for quick access."
-    )
-  ));
-};
 const StarredDropdown = () => {
   const { anchorEl, handleOpen, handleClose } = useDropdownManager();
   const { starredEntities, toggleStarredEntity } = useStarredEntities();
@@ -109,7 +83,14 @@ const StarredDropdown = () => {
         toggleStarredEntity,
         handleClose
       }
-    ))) : /* @__PURE__ */ React.createElement(NoStarredItems, null)
+    ))) : /* @__PURE__ */ React.createElement(
+      DropdownEmptyState,
+      {
+        title: "No starred items yet",
+        subTitle: "Click the star icon next to an entity's name to save it here for quick access.",
+        icon: /* @__PURE__ */ React.createElement(AutoAwesomeIcon, { sx: { fontSize: 64 }, color: "disabled" })
+      }
+    )
   );
 };
 

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 React from 'react';\n\nimport {\n  useEntityPresentation,\n  useStarredEntities,\n} from '@backstage/plugin-catalog-react';\nimport { InfoCard, Link } from '@backstage/core-components';\n\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 { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport {\n  CompoundEntityRef,\n  Entity,\n  parseEntityRef,\n} from '@backstage/catalog-model';\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';\nimport Box from '@mui/material/Box';\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: React.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\n  return (\n    <MenuItem\n      component={Link}\n      to={`/catalog/${namespace || 'default'}/${kind}/${name}`}\n      onClick={handleClose}\n      disableRipple\n      disableTouchRipple\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=\"Remove from list\">\n        <IconButton\n          onClick={e => {\n            e.preventDefault();\n            e.stopPropagation();\n            toggleStarredEntity(entityRef);\n          }}\n        >\n          <Star color=\"warning\" />\n        </IconButton>\n      </Tooltip>\n    </MenuItem>\n  );\n};\n\nconst NoStarredItems = () => {\n  return (\n    <InfoCard>\n      <Box\n        display=\"flex\"\n        flexDirection=\"column\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        textAlign=\"center\"\n        py={4}\n        px={2} // Added padding to control width\n        maxWidth={300} // Set max width to constrain text expansion\n        mx=\"auto\"\n      >\n        <AutoAwesomeIcon sx={{ fontSize: 64 }} color=\"disabled\" />\n        <Typography variant=\"h6\" sx={{ mt: 2, color: 'text.primary' }}>\n          No starred items yet\n        </Typography>\n        <Typography\n          variant=\"body2\"\n          sx={{ mt: 1, color: 'text.secondary', maxWidth: 250 }}\n        >\n          Click the star icon next to an entity's name to save it here for quick\n          access.\n        </Typography>\n      </Box>\n    </InfoCard>\n  );\n};\n\nexport const StarredDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const { starredEntities, toggleStarredEntity } = useStarredEntities();\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=\"Your starred items\"\n      isIconButton\n    >\n      {entitiesArray.length > 0 ? (\n        <>\n          <ListItemText\n            primary=\"Your starred items\"\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        <NoStarredItems />\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 React from 'react';\n\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';\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: React.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\n  return (\n    <MenuItem\n      component={Link}\n      to={`/catalog/${namespace || 'default'}/${kind}/${name}`}\n      onClick={handleClose}\n      disableRipple\n      disableTouchRipple\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=\"Remove from list\">\n        <IconButton\n          onClick={e => {\n            e.preventDefault();\n            e.stopPropagation();\n            toggleStarredEntity(entityRef);\n          }}\n        >\n          <Star color=\"warning\" />\n        </IconButton>\n      </Tooltip>\n    </MenuItem>\n  );\n};\n\nexport const StarredDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const { starredEntities, toggleStarredEntity } = useStarredEntities();\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=\"Your starred items\"\n      isIconButton\n    >\n      {entitiesArray.length > 0 ? (\n        <>\n          <ListItemText\n            primary=\"Your starred items\"\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=\"No starred items yet\"\n          subTitle=\"Click the star icon next to an entity's name to save it here for quick access.\"\n          icon={<AutoAwesomeIcon sx={{ fontSize: 64 }} color=\"disabled\" />}\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAwDA,MAAM,cAA+C,CAAC;AAAA,EACpD,SAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,EAAE,IAAM,EAAA,YAAA,EAAc,cAAe,EAAA,GACzC,sBAAsB,SAAS,CAAA;AACjC,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,SAAU,EAAA,GAAI,eAAe,SAAmB,CAAA;AACpE,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,MACX,IAAI,CAAY,SAAA,EAAA,SAAA,IAAa,SAAS,CAAI,CAAA,EAAA,IAAI,IAAI,IAAI,CAAA,CAAA;AAAA,MACtD,OAAS,EAAA,WAAA;AAAA,MACT,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA;AAAA,KAAA;AAAA,IAEjB,IAAA,oBACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,EAAI,EAAA,EAAE,UAAU,EAAG,EAAA,EAAA,kBAC9B,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAK,CACR,CAAA;AAAA,oBAEF,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OACE,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAI,EAAE,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA,EACzC,EAAA,EAAA,YAAA,IAAgB,cACnB,CAAA;AAAA,QAEF,SAAA,EAAW,KAAK,iBAAkB,EAAA;AAAA,QAElC,EAAI,EAAA,EAAE,EAAI,EAAA,CAAA,EAAG,IAAI,CAAE;AAAA;AAAA,KACrB;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAM,kBACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAS,CAAK,CAAA,KAAA;AACZ,UAAA,CAAA,CAAE,cAAe,EAAA;AACjB,UAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,UAAA,mBAAA,CAAoB,SAAS,CAAA;AAAA;AAC/B,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAM,SAAU,EAAA;AAAA,KAE1B;AAAA,GACF;AAEJ,CAAA;AAEO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AACjE,EAAA,MAAM,EAAE,eAAA,EAAiB,mBAAoB,EAAA,GAAI,kBAAmB,EAAA;AAEpE,EAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,IAAA,CAAK,eAAe,CAAA;AAEhD,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,aAAA,sCAAgB,cAAe,EAAA,IAAA,CAAA;AAAA,MAC/B,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,QAAA;AAAA,MACA,OAAQ,EAAA,oBAAA;AAAA,MACR,YAAY,EAAA;AAAA,KAAA;AAAA,IAEX,aAAA,CAAc,MAAS,GAAA,CAAA,mBAEpB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,oBAAA;AAAA,QACR,EAAA,EAAI,EAAE,EAAI,EAAA,CAAA,EAAG,IAAI,CAAG,EAAA,UAAA,EAAY,MAAQ,EAAA,KAAA,EAAO,gBAAiB;AAAA;AAAA,KAClE,EACC,aAAc,CAAA,GAAA,CAAI,CACjB,UAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,UAAA;AAAA,QACL,SAAW,EAAA,UAAA;AAAA,QACX,mBAAA;AAAA,QACA;AAAA;AAAA,KAEH,CACH,CAEA,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,sBAAA;AAAA,QACN,QAAS,EAAA,gFAAA;AAAA,QACT,IAAA,sCAAO,eAAgB,EAAA,EAAA,EAAA,EAAI,EAAE,QAAU,EAAA,EAAA,EAAM,EAAA,KAAA,EAAM,UAAW,EAAA;AAAA;AAAA;AAChE,GAEJ;AAEJ;;;;"}

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

@@ -28,7 +28,7 @@ const HeaderIcon = ({
         baseClassName: "material-icons-outlined",
         sx: layout
       },
-      /* @__PURE__ */ React.createElement("img", { src: icon, alt: "" })
+      /* @__PURE__ */ React.createElement("img", { src: icon, alt: "", height: "100%", width: "100%" })
     );
   }
   return /* @__PURE__ */ React.createElement(

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

@@ -1 +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;;;;"}
+{"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=\"\" height=\"100%\" width=\"100%\" />\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,sBAEJ,KAAA,CAAA,aAAA,CAAC,SAAI,GAAK,EAAA,IAAA,EAAM,KAAI,EAAG,EAAA,MAAA,EAAO,MAAO,EAAA,KAAA,EAAM,MAAO,EAAA;AAAA,KACpD;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/LogoutButton/LogoutButton.esm.js

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

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

@@ -1 +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=\"Sign out\" />\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,UAAW,EAAA;AAAA,GACtD;AAEJ;;;;"}
+{"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 MenuItem from '@mui/material/MenuItem';\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  return (\n    <MenuItem\n      onClick={handleLogout}\n      sx={{ cursor: 'pointer', width: '100%', color: 'inherit' }}\n    >\n      <MenuItemLinkContent icon=\"logout\" label=\"Sign out\" />\n    </MenuItem>\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;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;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,UAAW,EAAA;AAAA,GACtD;AAEJ;;;;"}

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import Tooltip from '@mui/material/Tooltip';
-import { Link } from 'react-router-dom';
 import { MenuItemLinkContent } from './MenuItemLinkContent.esm.js';
 
 const MenuItemLink = ({
@@ -10,17 +9,15 @@ const MenuItemLink = ({
   icon,
   tooltip
 }) => {
+  const isExternalLink = to.startsWith("http://") || to.startsWith("https://");
   const headerLinkContent = () => /* @__PURE__ */ React.createElement(
-    Link,
+    MenuItemLinkContent,
     {
-      to,
-      style: {
-        color: "inherit",
-        textDecoration: "none",
-        width: "100%"
-      }
-    },
-    /* @__PURE__ */ React.createElement(MenuItemLinkContent, { icon, label: title, subLabel: subTitle })
+      icon,
+      label: title,
+      subLabel: subTitle,
+      isExternalLink
+    }
   );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, tooltip && /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement("div", null, headerLinkContent())), !tooltip && headerLinkContent());
 };

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

@@ -1 +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;;;;"}
+{"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 { 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 isExternalLink = to.startsWith('http://') || to.startsWith('https://');\n\n  const headerLinkContent = () => (\n    <MenuItemLinkContent\n      icon={icon}\n      label={title}\n      subLabel={subTitle}\n      isExternalLink={isExternalLink}\n    />\n  );\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":";;;;AAgCO,MAAM,eAAe,CAAC;AAAA,EAC3B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,iBAAiB,EAAG,CAAA,UAAA,CAAW,SAAS,CAAK,IAAA,EAAA,CAAG,WAAW,UAAU,CAAA;AAE3E,EAAA,MAAM,oBAAoB,sBACxB,KAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,KAAO,EAAA,KAAA;AAAA,MACP,QAAU,EAAA,QAAA;AAAA,MACV;AAAA;AAAA,GACF;AAGF,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

@@ -3,11 +3,13 @@ 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';
+import LaunchIcon from '@mui/icons-material/Launch';
 
 const MenuItemLinkContent = ({
   icon,
   label,
-  subLabel
+  subLabel,
+  isExternalLink = false
 }) => {
   const theme = useTheme();
   return /* @__PURE__ */ React.createElement(
@@ -16,11 +18,13 @@ const MenuItemLinkContent = ({
       sx: {
         display: "flex",
         alignItems: "center",
+        justifyContent: "space-between",
         margin: "8px 0",
-        color: "inherit"
+        color: "inherit",
+        width: "100%"
       }
     },
-    icon && /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, icon && /* @__PURE__ */ React.createElement(
       HeaderIcon,
       {
         icon,
@@ -28,11 +32,34 @@ const MenuItemLinkContent = ({
         layout: label ? {
           marginRight: "0.5rem",
           flexShrink: 0,
+          display: "flex",
+          alignItems: "center",
+          // Ensure the icon is centered
           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))
+    ), /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center"
+        }
+      },
+      label && /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: theme.palette.text.primary }, label),
+      subLabel && /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: theme.palette.text.secondary }, subLabel)
+    )),
+    isExternalLink && /* @__PURE__ */ React.createElement(
+      LaunchIcon,
+      {
+        sx: {
+          fontSize: 16,
+          color: theme.palette.text.secondary,
+          ml: 1
+        }
+      }
+    )
   );
 };
 

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

@@ -1 +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;;;;"}
+{"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 */\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';\nimport LaunchIcon from '@mui/icons-material/Launch';\n\ninterface MenuItemLinkContentProps {\n  icon?: string;\n  label?: string;\n  subLabel?: string;\n  isExternalLink?: boolean;\n}\n\nexport const MenuItemLinkContent: React.FC<MenuItemLinkContentProps> = ({\n  icon,\n  label,\n  subLabel,\n  isExternalLink = false,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        margin: '8px 0',\n        color: 'inherit',\n        width: '100%',\n      }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        {icon && (\n          <HeaderIcon\n            icon={icon}\n            size=\"small\"\n            layout={\n              label\n                ? {\n                    marginRight: '0.5rem',\n                    flexShrink: 0,\n                    display: 'flex',\n                    alignItems: 'center', // Ensure the icon is centered\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          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'center',\n          }}\n        >\n          {label && (\n            <Typography variant=\"body2\" color={theme.palette.text.primary}>\n              {label}\n            </Typography>\n          )}\n          {subLabel && (\n            <Typography variant=\"caption\" color={theme.palette.text.secondary}>\n              {subLabel}\n            </Typography>\n          )}\n        </Box>\n      </Box>\n      {isExternalLink && (\n        <LaunchIcon\n          sx={{\n            fontSize: 16,\n            color: theme.palette.text.secondary,\n            ml: 1,\n          }}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,sBAA0D,CAAC;AAAA,EACtE,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAiB,GAAA;AACnB,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,cAAgB,EAAA,eAAA;AAAA,QAChB,MAAQ,EAAA,OAAA;AAAA,QACR,KAAO,EAAA,SAAA;AAAA,QACP,KAAO,EAAA;AAAA;AACT,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,OAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,QAAS,EAAA,EAAA,EAC9C,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,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA;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,KAIX,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,aAAe,EAAA,QAAA;AAAA,UACf,cAAgB,EAAA;AAAA;AAClB,OAAA;AAAA,MAEC,KAAA,oBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAQ,OAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA,EAAA,EACnD,KACH,CAAA;AAAA,MAED,QAAA,oBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,SAAA,EAAU,OAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA,EAAA,EACrD,QACH;AAAA,KAGN,CAAA;AAAA,IACC,cACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,EAAA;AAAA,UACV,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,UAC1B,EAAI,EAAA;AAAA;AACN;AAAA;AACF,GAEJ;AAEJ;;;;"}

package/dist/components/SearchComponent/SearchBar.esm.js

@@ -50,7 +50,6 @@ const SearchBar = (props) => {
             sx: {
               borderRadius: "4px",
               outline: "unset",
-              border: `1px solid ${theme.palette.divider}`,
               boxShadow: theme.palette.mode === "dark" ? `0 2px 6px 2px rgba(0, 0, 0, 0.50), 0 1px 2px 0 rgba(0, 0, 0, 0.50)` : "0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)"
             }
           }

package/dist/components/SearchComponent/SearchBar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchComponent/SearchBar.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, useRef, useState } from 'react';\nimport {\n  SearchResultState,\n  SearchResultProps,\n  useSearch,\n} from '@backstage/plugin-search-react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport { createSearchLink } from '../../utils/stringUtils';\nimport { useNavigate } from 'react-router-dom';\nimport { SearchInput } from './SearchInput';\nimport { SearchOption } from './SearchOption';\nimport { useTheme } from '@mui/material/styles';\nimport { useDebouncedCallback } from '../../hooks/useDebouncedCallback';\n\ninterface SearchBarProps {\n  query: SearchResultProps['query'];\n  setSearchTerm: (term: string) => void;\n}\nexport const SearchBar = (props: SearchBarProps) => {\n  const { query, setSearchTerm } = props;\n  const navigate = useNavigate();\n  const theme = useTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const highlightedIndexRef = useRef(highlightedIndex);\n  const { setTerm } = useSearch();\n\n  const onInputChange = useDebouncedCallback((_, inputValue) => {\n    setSearchTerm(inputValue);\n    setTerm(inputValue);\n  }, 300);\n\n  useEffect(() => {\n    highlightedIndexRef.current = highlightedIndex;\n  }, [highlightedIndex]);\n\n  return (\n    <SearchResultState {...props}>\n      {({ loading, error, value }) => {\n        const results = query?.term ? value?.results ?? [] : [];\n        let options: string[] = [];\n        if (query?.term && results.length === 0) {\n          options = ['No results found'];\n        }\n        if (results.length > 0) {\n          options = [\n            ...results.map(result => result.document.title),\n            `${query?.term}`,\n          ];\n        }\n        const searchLink = createSearchLink(query?.term ?? '');\n\n        return (\n          <Autocomplete\n            freeSolo\n            options={options}\n            loading={loading}\n            value={query?.term ?? ''}\n            getOptionLabel={option => option ?? ''}\n            onInputChange={onInputChange}\n            onHighlightChange={(_, option) =>\n              setHighlightedIndex(options.indexOf(option ?? ''))\n            }\n            componentsProps={{\n              paper: {\n                sx: {\n                  borderRadius: '4px',\n                  outline: 'unset',\n                  border: `1px solid ${theme.palette.divider}`,\n                  boxShadow:\n                    theme.palette.mode === 'dark'\n                      ? `0 2px 6px 2px rgba(0, 0, 0, 0.50), 0 1px 2px 0 rgba(0, 0, 0, 0.50)`\n                      : '0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)',\n                },\n              },\n            }}\n            sx={{\n              width: '100%',\n              '& [class*=\"MuiAutocomplete-clearIndicator\"]': {\n                visibility: query?.term ? 'visible' : 'hidden',\n              },\n            }}\n            filterOptions={x => x}\n            onKeyDown={event => {\n              const currentHighlight = highlightedIndexRef.current;\n              if (event.key === 'Enter') {\n                event.preventDefault();\n                if (currentHighlight === -1 && query?.term) {\n                  navigate(searchLink);\n                } else if (currentHighlight !== -1) {\n                  navigate(\n                    results[highlightedIndex]?.document?.location ?? searchLink,\n                  );\n                }\n                setHighlightedIndex(-1);\n              }\n            }}\n            renderInput={params => (\n              <SearchInput\n                params={params}\n                error={!!error}\n                helperText={error ? 'Error fetching results' : ''}\n              />\n            )}\n            renderOption={(renderProps, option, { index }) => (\n              <SearchOption\n                option={option}\n                index={index}\n                options={options}\n                query={query}\n                results={results}\n                renderProps={renderProps}\n                searchLink={searchLink}\n              />\n            )}\n            ListboxProps={{\n              sx: { maxHeight: '60vh' },\n            }}\n          />\n        );\n      }}\n    </SearchResultState>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchComponent/SearchBar.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, useRef, useState } from 'react';\nimport {\n  SearchResultState,\n  SearchResultProps,\n  useSearch,\n} from '@backstage/plugin-search-react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport { createSearchLink } from '../../utils/stringUtils';\nimport { useNavigate } from 'react-router-dom';\nimport { SearchInput } from './SearchInput';\nimport { SearchOption } from './SearchOption';\nimport { useTheme } from '@mui/material/styles';\nimport { useDebouncedCallback } from '../../hooks/useDebouncedCallback';\n\ninterface SearchBarProps {\n  query: SearchResultProps['query'];\n  setSearchTerm: (term: string) => void;\n}\nexport const SearchBar = (props: SearchBarProps) => {\n  const { query, setSearchTerm } = props;\n  const navigate = useNavigate();\n  const theme = useTheme();\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const highlightedIndexRef = useRef(highlightedIndex);\n  const { setTerm } = useSearch();\n\n  const onInputChange = useDebouncedCallback((_, inputValue) => {\n    setSearchTerm(inputValue);\n    setTerm(inputValue);\n  }, 300);\n\n  useEffect(() => {\n    highlightedIndexRef.current = highlightedIndex;\n  }, [highlightedIndex]);\n\n  return (\n    <SearchResultState {...props}>\n      {({ loading, error, value }) => {\n        const results = query?.term ? value?.results ?? [] : [];\n        let options: string[] = [];\n        if (query?.term && results.length === 0) {\n          options = ['No results found'];\n        }\n        if (results.length > 0) {\n          options = [\n            ...results.map(result => result.document.title),\n            `${query?.term}`,\n          ];\n        }\n        const searchLink = createSearchLink(query?.term ?? '');\n\n        return (\n          <Autocomplete\n            freeSolo\n            options={options}\n            loading={loading}\n            value={query?.term ?? ''}\n            getOptionLabel={option => option ?? ''}\n            onInputChange={onInputChange}\n            onHighlightChange={(_, option) =>\n              setHighlightedIndex(options.indexOf(option ?? ''))\n            }\n            componentsProps={{\n              paper: {\n                sx: {\n                  borderRadius: '4px',\n                  outline: 'unset',\n                  boxShadow:\n                    theme.palette.mode === 'dark'\n                      ? `0 2px 6px 2px rgba(0, 0, 0, 0.50), 0 1px 2px 0 rgba(0, 0, 0, 0.50)`\n                      : '0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)',\n                },\n              },\n            }}\n            sx={{\n              width: '100%',\n              '& [class*=\"MuiAutocomplete-clearIndicator\"]': {\n                visibility: query?.term ? 'visible' : 'hidden',\n              },\n            }}\n            filterOptions={x => x}\n            onKeyDown={event => {\n              const currentHighlight = highlightedIndexRef.current;\n              if (event.key === 'Enter') {\n                event.preventDefault();\n                if (currentHighlight === -1 && query?.term) {\n                  navigate(searchLink);\n                } else if (currentHighlight !== -1) {\n                  navigate(\n                    results[highlightedIndex]?.document?.location ?? searchLink,\n                  );\n                }\n                setHighlightedIndex(-1);\n              }\n            }}\n            renderInput={params => (\n              <SearchInput\n                params={params}\n                error={!!error}\n                helperText={error ? 'Error fetching results' : ''}\n              />\n            )}\n            renderOption={(renderProps, option, { index }) => (\n              <SearchOption\n                option={option}\n                index={index}\n                options={options}\n                query={query}\n                results={results}\n                renderProps={renderProps}\n                searchLink={searchLink}\n              />\n            )}\n            ListboxProps={{\n              sx: { maxHeight: '60vh' },\n            }}\n          />\n        );\n      }}\n    </SearchResultState>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SupportButton/SupportButton.esm.js

@@ -21,7 +21,7 @@ const SupportButton = ({
   if (!supportUrl) {
     return null;
   }
-  const isExternalLink = supportUrl.startsWith("http") || supportUrl.startsWith("https");
+  const isExternalLink = supportUrl.startsWith("http://") || supportUrl.startsWith("https://");
   return /* @__PURE__ */ React.createElement(Box, { sx: layout }, /* @__PURE__ */ React.createElement(
     Tooltip,
     {

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

@@ -1 +1 @@
-{"version":3,"file":"SupportButton.esm.js","sources":["../../../src/components/SupportButton/SupportButton.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 { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport HelpIcon from '@mui/icons-material/HelpOutline';\n\n/**\n * @public\n */\nexport interface SupportButtonProps {\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  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 SupportButton = ({\n  title = 'Support',\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  to,\n  layout,\n}: SupportButtonProps) => {\n  const apiHolder = useApiHolder();\n  const config = apiHolder.get(configApiRef);\n  const supportUrl = to ?? config?.getOptionalString('app.support.url');\n\n  if (!supportUrl) {\n    return null;\n  }\n\n  const isExternalLink =\n    supportUrl.startsWith('http') || supportUrl.startsWith('https');\n\n  return (\n    <Box sx={layout}>\n      <Tooltip\n        title={tooltip ?? `${title}${isExternalLink ? ' (external link)' : ''}`}\n      >\n        <div>\n          <IconButton\n            component={Link}\n            color={color}\n            size={size}\n            to={supportUrl}\n            aria-label={title}\n          >\n            <HelpIcon fontSize={size} />\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;AA+CA,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,gBAAgB,CAAC;AAAA,EAC5B,KAAQ,GAAA,SAAA;AAAA,EACR,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,EAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA;AACzC,EAAA,MAAM,UAAa,GAAA,EAAA,IAAM,MAAQ,EAAA,iBAAA,CAAkB,iBAAiB,CAAA;AAEpE,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,iBACJ,UAAW,CAAA,UAAA,CAAW,MAAM,CAAK,IAAA,UAAA,CAAW,WAAW,OAAO,CAAA;AAEhE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAO,OAAW,IAAA,CAAA,EAAG,KAAK,CAAG,EAAA,cAAA,GAAiB,qBAAqB,EAAE,CAAA;AAAA,KAAA;AAAA,wCAEpE,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,QACX,KAAA;AAAA,QACA,IAAA;AAAA,QACA,EAAI,EAAA,UAAA;AAAA,QACJ,YAAY,EAAA;AAAA,OAAA;AAAA,sBAEZ,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAU,IAAM,EAAA;AAAA,KAE9B;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SupportButton.esm.js","sources":["../../../src/components/SupportButton/SupportButton.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 { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport HelpIcon from '@mui/icons-material/HelpOutline';\n\n/**\n * @public\n */\nexport interface SupportButtonProps {\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  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 SupportButton = ({\n  title = 'Support',\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  to,\n  layout,\n}: SupportButtonProps) => {\n  const apiHolder = useApiHolder();\n  const config = apiHolder.get(configApiRef);\n  const supportUrl = to ?? config?.getOptionalString('app.support.url');\n\n  if (!supportUrl) {\n    return null;\n  }\n\n  const isExternalLink =\n    supportUrl.startsWith('http://') || supportUrl.startsWith('https://');\n\n  return (\n    <Box sx={layout}>\n      <Tooltip\n        title={tooltip ?? `${title}${isExternalLink ? ' (external link)' : ''}`}\n      >\n        <div>\n          <IconButton\n            component={Link}\n            color={color}\n            size={size}\n            to={supportUrl}\n            aria-label={title}\n          >\n            <HelpIcon fontSize={size} />\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;AA+CA,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,gBAAgB,CAAC;AAAA,EAC5B,KAAQ,GAAA,SAAA;AAAA,EACR,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,EAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA;AACzC,EAAA,MAAM,UAAa,GAAA,EAAA,IAAM,MAAQ,EAAA,iBAAA,CAAkB,iBAAiB,CAAA;AAEpE,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,iBACJ,UAAW,CAAA,UAAA,CAAW,SAAS,CAAK,IAAA,UAAA,CAAW,WAAW,UAAU,CAAA;AAEtE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAO,OAAW,IAAA,CAAA,EAAG,KAAK,CAAG,EAAA,cAAA,GAAiB,qBAAqB,EAAE,CAAA;AAAA,KAAA;AAAA,wCAEpE,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,QACX,KAAA;AAAA,QACA,IAAA;AAAA,QACA,EAAI,EAAA,UAAA;AAAA,QACJ,YAAY,EAAA;AAAA,OAAA;AAAA,sBAEZ,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAU,IAAM,EAAA;AAAA,KAE9B;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/dist/defaultMountPoints/defaultMountPoints.esm.js

@@ -10,6 +10,7 @@ import { Divider } from '../components/Divider/Divider.esm.js';
 import { MenuItemLink } from '../components/MenuItemLink/MenuItemLink.esm.js';
 import { Spacer } from '../components/Spacer/Spacer.esm.js';
 import { StarredDropdown } from '../components/HeaderDropdownComponent/StarredDropdown.esm.js';
+import { ApplicationLauncherDropdown } from '../components/HeaderDropdownComponent/ApplicationLauncherDropdown.esm.js';
 
 const defaultGlobalHeaderComponentsMountPoints = [
   {
@@ -50,6 +51,12 @@ const defaultGlobalHeaderComponentsMountPoints = [
       priority: 85
     }
   },
+  {
+    Component: ApplicationLauncherDropdown,
+    config: {
+      priority: 82
+    }
+  },
   {
     Component: SupportButton,
     config: {
@@ -109,6 +116,58 @@ const defaultProfileDropdownMountPoints = [
     }
   }
 ];
+const defaultApplicationLauncherDropdownMountPoints = [
+  {
+    Component: MenuItemLink,
+    config: {
+      section: "Red Hat AI",
+      sectionLink: "https://www.redhat.com/en/products/ai",
+      sectionLinkLabel: "Read more",
+      priority: 200,
+      props: {
+        title: "Podman Desktop",
+        icon: "https://podman-desktop.io/img/logo.svg",
+        link: "https://podman-desktop.io/"
+      }
+    }
+  },
+  {
+    Component: MenuItemLink,
+    config: {
+      section: "Red Hat AI",
+      priority: 180,
+      props: {
+        title: "OpenShift AI",
+        icon: "https://upload.wikimedia.org/wikipedia/commons/d/d8/Red_Hat_logo.svg",
+        link: "https://www.redhat.com/en/technologies/cloud-computing/openshift/openshift-ai"
+      }
+    }
+  },
+  {
+    Component: MenuItemLink,
+    config: {
+      section: "Quick Links",
+      priority: 150,
+      props: {
+        title: "Slack",
+        icon: "https://upload.wikimedia.org/wikipedia/commons/d/d5/Slack_icon_2019.svg",
+        link: "https://slack.com/"
+      }
+    }
+  },
+  {
+    Component: MenuItemLink,
+    config: {
+      section: "Quick Links",
+      priority: 130,
+      props: {
+        title: "ArgoCD",
+        icon: "https://argo-cd.readthedocs.io/en/stable/assets/logo.png",
+        link: "https://argo-cd.readthedocs.io/en/stable/"
+      }
+    }
+  }
+];
 
-export { defaultCreateDropdownMountPoints, defaultGlobalHeaderComponentsMountPoints, defaultProfileDropdownMountPoints };
+export { defaultApplicationLauncherDropdownMountPoints, defaultCreateDropdownMountPoints, defaultGlobalHeaderComponentsMountPoints, defaultProfileDropdownMountPoints };
 //# sourceMappingURL=defaultMountPoints.esm.js.map

package/dist/defaultMountPoints/defaultMountPoints.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultMountPoints.esm.js","sources":["../../src/defaultMountPoints/defaultMountPoints.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 { LogoutButton } from '../components/LogoutButton/LogoutButton';\nimport { CreateDropdown } from '../components/HeaderDropdownComponent/CreateDropdown';\nimport { ProfileDropdown } from '../components/HeaderDropdownComponent/ProfileDropdown';\nimport { RegisterAComponentSection } from '../components/HeaderDropdownComponent/RegisterAComponentSection';\nimport { SoftwareTemplatesSection } from '../components/HeaderDropdownComponent/SoftwareTemplatesSection';\nimport { SearchComponent } from '../components/SearchComponent/SearchComponent';\nimport { SupportButton } from '../components/SupportButton/SupportButton';\nimport {\n  CreateDropdownMountPoint,\n  GlobalHeaderComponentMountPoint,\n  ProfileDropdownMountPoint,\n} from '../types';\nimport { NotificationButton } from '../components/NotificationButton/NotificationButton';\nimport { Divider } from '../components/Divider/Divider';\nimport { MenuItemLink } from '../components/MenuItemLink/MenuItemLink';\nimport { Spacer } from '../components/Spacer/Spacer';\nimport { StarredDropdown } from '../components/HeaderDropdownComponent/StarredDropdown';\n\n/**\n * default Global Header Components mount points\n *\n * @public\n */\nexport const defaultGlobalHeaderComponentsMountPoints: GlobalHeaderComponentMountPoint[] =\n  [\n    {\n      Component: SearchComponent,\n      config: {\n        priority: 100, // the greater the number, the more to the left it will be\n      },\n    },\n    {\n      Component: Spacer,\n      config: {\n        priority: 99, // the greater the number, the more to the left it will be\n        props: {\n          growFactor: 0,\n        },\n      },\n    },\n    // Notice: 1.5 ships with a Create link instead of a dropdown!!!\n    {\n      Component: CreateDropdown,\n      config: {\n        priority: 90,\n        layout: {\n          display: {\n            sm: 'none',\n            md: 'block',\n          },\n          mr: 1.5,\n        } as any as React.CSSProperties, // I don't used MUI v5 specific `sx` types here to allow us changing the implementation later\n      },\n    },\n    {\n      Component: StarredDropdown,\n      config: {\n        priority: 85,\n      },\n    },\n    {\n      Component: SupportButton,\n      config: {\n        priority: 80,\n      },\n    },\n    {\n      Component: NotificationButton,\n      config: {\n        priority: 70,\n      },\n    },\n    {\n      Component: Divider,\n      config: {\n        priority: 50,\n      },\n    },\n    {\n      Component: ProfileDropdown,\n      config: {\n        priority: 10, // the greater the number, the more to the left it will be\n      },\n    },\n  ];\n\nexport const defaultCreateDropdownMountPoints: CreateDropdownMountPoint[] = [\n  {\n    Component: SoftwareTemplatesSection as React.ComponentType,\n    config: {\n      priority: 200,\n    },\n  },\n  {\n    Component: RegisterAComponentSection as React.ComponentType,\n    config: {\n      priority: 100,\n    },\n  },\n];\n\nexport const defaultProfileDropdownMountPoints: ProfileDropdownMountPoint[] = [\n  {\n    Component: MenuItemLink as React.ComponentType,\n    config: {\n      priority: 200,\n      props: {\n        title: 'Settings',\n        icon: 'manageAccounts',\n        link: '/settings',\n      },\n    },\n  },\n  {\n    Component: LogoutButton,\n    config: {\n      priority: 100,\n    },\n  },\n];\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsCO,MAAM,wCACX,GAAA;AAAA,EACE;AAAA,IACE,SAAW,EAAA,eAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,MAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA,EAAA;AAAA;AAAA,MACV,KAAO,EAAA;AAAA,QACL,UAAY,EAAA;AAAA;AACd;AACF,GACF;AAAA;AAAA,EAEA;AAAA,IACE,SAAW,EAAA,cAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA,EAAA;AAAA,MACV,MAAQ,EAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,EAAI,EAAA,MAAA;AAAA,UACJ,EAAI,EAAA;AAAA,SACN;AAAA,QACA,EAAI,EAAA;AAAA;AACN;AAAA;AACF,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,eAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,aAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,kBAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,OAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,eAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AAAA;AACZ;AAEJ;AAEK,MAAM,gCAA+D,GAAA;AAAA,EAC1E;AAAA,IACE,SAAW,EAAA,wBAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,yBAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ;AAEJ;AAEO,MAAM,iCAAiE,GAAA;AAAA,EAC5E;AAAA,IACE,SAAW,EAAA,YAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA,GAAA;AAAA,MACV,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,UAAA;AAAA,QACP,IAAM,EAAA,gBAAA;AAAA,QACN,IAAM,EAAA;AAAA;AACR;AACF,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,YAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ;AAEJ;;;;"}
+{"version":3,"file":"defaultMountPoints.esm.js","sources":["../../src/defaultMountPoints/defaultMountPoints.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 { LogoutButton } from '../components/LogoutButton/LogoutButton';\nimport { CreateDropdown } from '../components/HeaderDropdownComponent/CreateDropdown';\nimport { ProfileDropdown } from '../components/HeaderDropdownComponent/ProfileDropdown';\nimport { RegisterAComponentSection } from '../components/HeaderDropdownComponent/RegisterAComponentSection';\nimport { SoftwareTemplatesSection } from '../components/HeaderDropdownComponent/SoftwareTemplatesSection';\nimport { SearchComponent } from '../components/SearchComponent/SearchComponent';\nimport { SupportButton } from '../components/SupportButton/SupportButton';\nimport {\n  ApplicationLauncherDropdownMountPoint,\n  CreateDropdownMountPoint,\n  GlobalHeaderComponentMountPoint,\n  ProfileDropdownMountPoint,\n} from '../types';\nimport { NotificationButton } from '../components/NotificationButton/NotificationButton';\nimport { Divider } from '../components/Divider/Divider';\nimport { MenuItemLink } from '../components/MenuItemLink/MenuItemLink';\nimport { Spacer } from '../components/Spacer/Spacer';\nimport { StarredDropdown } from '../components/HeaderDropdownComponent/StarredDropdown';\nimport { ApplicationLauncherDropdown } from '../components/HeaderDropdownComponent/ApplicationLauncherDropdown';\n\n/**\n * default Global Header Components mount points\n *\n * @public\n */\nexport const defaultGlobalHeaderComponentsMountPoints: GlobalHeaderComponentMountPoint[] =\n  [\n    {\n      Component: SearchComponent,\n      config: {\n        priority: 100, // the greater the number, the more to the left it will be\n      },\n    },\n    {\n      Component: Spacer,\n      config: {\n        priority: 99, // the greater the number, the more to the left it will be\n        props: {\n          growFactor: 0,\n        },\n      },\n    },\n    // Notice: 1.5 ships with a Create link instead of a dropdown!!!\n    {\n      Component: CreateDropdown,\n      config: {\n        priority: 90,\n        layout: {\n          display: {\n            sm: 'none',\n            md: 'block',\n          },\n          mr: 1.5,\n        } as any as React.CSSProperties, // I don't used MUI v5 specific `sx` types here to allow us changing the implementation later\n      },\n    },\n    {\n      Component: StarredDropdown,\n      config: {\n        priority: 85,\n      },\n    },\n    {\n      Component: ApplicationLauncherDropdown,\n      config: {\n        priority: 82,\n      },\n    },\n    {\n      Component: SupportButton,\n      config: {\n        priority: 80,\n      },\n    },\n    {\n      Component: NotificationButton,\n      config: {\n        priority: 70,\n      },\n    },\n    {\n      Component: Divider,\n      config: {\n        priority: 50,\n      },\n    },\n    {\n      Component: ProfileDropdown,\n      config: {\n        priority: 10, // the greater the number, the more to the left it will be\n      },\n    },\n  ];\n\nexport const defaultCreateDropdownMountPoints: CreateDropdownMountPoint[] = [\n  {\n    Component: SoftwareTemplatesSection as React.ComponentType,\n    config: {\n      priority: 200,\n    },\n  },\n  {\n    Component: RegisterAComponentSection as React.ComponentType,\n    config: {\n      priority: 100,\n    },\n  },\n];\n\nexport const defaultProfileDropdownMountPoints: ProfileDropdownMountPoint[] = [\n  {\n    Component: MenuItemLink as React.ComponentType,\n    config: {\n      priority: 200,\n      props: {\n        title: 'Settings',\n        icon: 'manageAccounts',\n        link: '/settings',\n      },\n    },\n  },\n  {\n    Component: LogoutButton,\n    config: {\n      priority: 100,\n    },\n  },\n];\n\nexport const defaultApplicationLauncherDropdownMountPoints: ApplicationLauncherDropdownMountPoint[] =\n  [\n    {\n      Component: MenuItemLink as React.ComponentType,\n      config: {\n        section: 'Red Hat AI',\n        sectionLink: 'https://www.redhat.com/en/products/ai',\n        sectionLinkLabel: 'Read more',\n        priority: 200,\n        props: {\n          title: 'Podman Desktop',\n          icon: 'https://podman-desktop.io/img/logo.svg',\n          link: 'https://podman-desktop.io/',\n        },\n      },\n    },\n    {\n      Component: MenuItemLink as React.ComponentType,\n      config: {\n        section: 'Red Hat AI',\n        priority: 180,\n        props: {\n          title: 'OpenShift AI',\n          icon: 'https://upload.wikimedia.org/wikipedia/commons/d/d8/Red_Hat_logo.svg',\n          link: 'https://www.redhat.com/en/technologies/cloud-computing/openshift/openshift-ai',\n        },\n      },\n    },\n    {\n      Component: MenuItemLink as React.ComponentType,\n      config: {\n        section: 'Quick Links',\n        priority: 150,\n        props: {\n          title: 'Slack',\n          icon: 'https://upload.wikimedia.org/wikipedia/commons/d/d5/Slack_icon_2019.svg',\n          link: 'https://slack.com/',\n        },\n      },\n    },\n    {\n      Component: MenuItemLink as React.ComponentType,\n      config: {\n        section: 'Quick Links',\n        priority: 130,\n        props: {\n          title: 'ArgoCD',\n          icon: 'https://argo-cd.readthedocs.io/en/stable/assets/logo.png',\n          link: 'https://argo-cd.readthedocs.io/en/stable/',\n        },\n      },\n    },\n  ];\n"],"names":[],"mappings":"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"}

package/dist/hooks/useApplicationLauncherDropdownMountPoints.esm.js

@@ -0,0 +1,14 @@
+import { defaultApplicationLauncherDropdownMountPoints } from '../defaultMountPoints/defaultMountPoints.esm.js';
+import { useScalprum } from '@scalprum/react-core';
+
+const useApplicationLauncherDropdownMountPoints = () => {
+  const scalprum = useScalprum();
+  const applicationLauncherDropdownMountPoints = scalprum?.api?.dynamicRootConfig?.mountPoints?.["global.header/application-launcher"];
+  if (Object.keys(scalprum?.api || {}).length === 0) {
+    return defaultApplicationLauncherDropdownMountPoints;
+  }
+  return applicationLauncherDropdownMountPoints ?? [];
+};
+
+export { useApplicationLauncherDropdownMountPoints };
+//# sourceMappingURL=useApplicationLauncherDropdownMountPoints.esm.js.map

package/dist/hooks/useApplicationLauncherDropdownMountPoints.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useApplicationLauncherDropdownMountPoints.esm.js","sources":["../../src/hooks/useApplicationLauncherDropdownMountPoints.ts"],"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 { defaultApplicationLauncherDropdownMountPoints } from '../defaultMountPoints/defaultMountPoints';\nimport { ApplicationLauncherDropdownMountPoint, ScalprumState } from '../types';\nimport { useScalprum } from '@scalprum/react-core';\n\nexport const useApplicationLauncherDropdownMountPoints = ():\n  | ApplicationLauncherDropdownMountPoint[]\n  | undefined => {\n  const scalprum = useScalprum<ScalprumState>();\n\n  const applicationLauncherDropdownMountPoints =\n    scalprum?.api?.dynamicRootConfig?.mountPoints?.[\n      'global.header/application-launcher'\n    ];\n\n  // default application launcher dropdown components for dev env\n  if (Object.keys(scalprum?.api || {}).length === 0) {\n    return defaultApplicationLauncherDropdownMountPoints;\n  }\n\n  return applicationLauncherDropdownMountPoints ?? [];\n};\n"],"names":[],"mappings":";;;AAoBO,MAAM,4CAA4C,MAExC;AACf,EAAA,MAAM,WAAW,WAA2B,EAAA;AAE5C,EAAA,MAAM,sCACJ,GAAA,QAAA,EAAU,GAAK,EAAA,iBAAA,EAAmB,cAChC,oCACF,CAAA;AAGF,EAAI,IAAA,MAAA,CAAO,KAAK,QAAU,EAAA,GAAA,IAAO,EAAE,CAAA,CAAE,WAAW,CAAG,EAAA;AACjD,IAAO,OAAA,6CAAA;AAAA;AAGT,EAAA,OAAO,0CAA0C,EAAC;AACpD;;;;"}

package/dist/index.d.ts

@@ -305,5 +305,11 @@ declare const NotificationBanner: (props: NotificationBannerProps) => React$1.JS
  * @public
  */
 declare const StarredDropdown: () => React$1.JSX.Element;
+/**
+ * Application Launcher Dropdown
+ *
+ * @public
+ */
+declare const ApplicationLauncherDropdown: () => React$1.JSX.Element;
 
-export { CreateDropdown, type CreateDropdownProps, Divider, type DividerProps, GlobalHeader, GlobalHeaderComponent, type GlobalHeaderComponentMountPoint, type GlobalHeaderComponentMountPointConfig, type GlobalHeaderComponentProps, HeaderButton, type HeaderButtonProps, HeaderIcon, HeaderIconButton, type HeaderIconButtonProps, type HeaderIconProps, LogoutButton, type MenuItemConfig, MenuItemLink, type MenuItemLinkProps, NotificationBanner, type NotificationBannerDismiss, type NotificationBannerProps, NotificationButton, type NotificationButtonProps, ProfileDropdown, type ProfileDropdownProps, RegisterAComponentSection, type RegisterAComponentSectionProps, SearchComponent, SoftwareTemplatesSection, type SoftwareTemplatesSectionProps, Spacer, type SpacerProps, StarredDropdown, SupportButton, type SupportButtonProps, defaultGlobalHeaderComponentsMountPoints, globalHeaderPlugin };
+export { ApplicationLauncherDropdown, CreateDropdown, type CreateDropdownProps, Divider, type DividerProps, GlobalHeader, GlobalHeaderComponent, type GlobalHeaderComponentMountPoint, type GlobalHeaderComponentMountPointConfig, type GlobalHeaderComponentProps, HeaderButton, type HeaderButtonProps, HeaderIcon, HeaderIconButton, type HeaderIconButtonProps, type HeaderIconProps, LogoutButton, type MenuItemConfig, MenuItemLink, type MenuItemLinkProps, NotificationBanner, type NotificationBannerDismiss, type NotificationBannerProps, NotificationButton, type NotificationButtonProps, ProfileDropdown, type ProfileDropdownProps, RegisterAComponentSection, type RegisterAComponentSectionProps, SearchComponent, SoftwareTemplatesSection, type SoftwareTemplatesSectionProps, Spacer, type SpacerProps, StarredDropdown, SupportButton, type SupportButtonProps, defaultGlobalHeaderComponentsMountPoints, globalHeaderPlugin };

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { unstable_ClassNameGenerator } from '@mui/material/className';
-export { CreateDropdown, Divider, GlobalHeader, GlobalHeaderComponent, HeaderButton, HeaderIcon, HeaderIconButton, LogoutButton, MenuItemLink, NotificationBanner, NotificationButton, ProfileDropdown, RegisterAComponentSection, SearchComponent, SoftwareTemplatesSection, Spacer, StarredDropdown, SupportButton, globalHeaderPlugin } from './plugin.esm.js';
+export { ApplicationLauncherDropdown, CreateDropdown, Divider, GlobalHeader, GlobalHeaderComponent, HeaderButton, HeaderIcon, HeaderIconButton, LogoutButton, MenuItemLink, NotificationBanner, NotificationButton, ProfileDropdown, RegisterAComponentSection, SearchComponent, SoftwareTemplatesSection, Spacer, StarredDropdown, SupportButton, globalHeaderPlugin } from './plugin.esm.js';
 export { defaultGlobalHeaderComponentsMountPoints } from './defaultMountPoints/defaultMountPoints.esm.js';
 
 unstable_ClassNameGenerator.configure((componentName) => {

package/dist/plugin.esm.js

@@ -1,39 +1,44 @@
 import { createPlugin, createComponentExtension } from '@backstage/core-plugin-api';
 import 'react';
-import '@mui/material/Box';
+import '@mui/material/MenuItem';
 import '@mui/material/Typography';
+import '@mui/material/Box';
 import '@mui/material/Icon';
 import '@mui/material/styles';
+import '@mui/icons-material/Launch';
 import '@mui/icons-material/ArrowDropDownOutlined';
 import '@scalprum/react-core';
-import './components/HeaderDropdownComponent/HeaderDropdownComponent.esm.js';
+import '@mui/material/Menu';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/material/Tooltip';
 import '@mui/icons-material/AccountCircleOutlined';
 import '@mui/icons-material/KeyboardArrowDownOutlined';
 import '@mui/material/Divider';
-import '@mui/material/MenuItem';
 import '@backstage/core-components';
-import '@mui/material/Tooltip';
-import 'react-router-dom';
+import '@mui/material/ListSubheader';
 import '@backstage/plugin-catalog-react';
 import '@backstage/plugin-search-react';
 import '@mui/material/Autocomplete';
+import 'react-router-dom';
 import '@mui/material/TextField';
 import '@mui/material/InputAdornment';
 import '@mui/icons-material/Search';
 import '@mui/material/ListItem';
 import '@mui/icons-material/ArrowForward';
-import '@mui/material/IconButton';
 import '@mui/icons-material/HelpOutline';
 import '@mui/material/Badge';
 import '@mui/icons-material/NotificationsOutlined';
 import '@backstage/plugin-notifications';
 import '@backstage/plugin-signals-react';
+import '@backstage/catalog-model';
 import '@mui/icons-material/StarBorder';
 import '@mui/icons-material/Star';
 import '@mui/icons-material/AutoAwesome';
 import '@mui/material/ListItemIcon';
 import '@mui/material/ListItemText';
-import '@backstage/catalog-model';
+import '@mui/icons-material/Apps';
+import '@mui/icons-material/AppRegistration';
 
 const globalHeaderPlugin = createPlugin({
   id: "global-header"
@@ -206,6 +211,14 @@ const StarredDropdown = globalHeaderPlugin.provide(
     }
   })
 );
+const ApplicationLauncherDropdown = globalHeaderPlugin.provide(
+  createComponentExtension({
+    name: "ApplicationLauncherDropdown",
+    component: {
+      lazy: () => import('./components/HeaderDropdownComponent/ApplicationLauncherDropdown.esm.js').then((m) => m.ApplicationLauncherDropdown)
+    }
+  })
+);
 
-export { CreateDropdown, Divider, GlobalHeader, GlobalHeaderComponent, HeaderButton, HeaderIcon, HeaderIconButton, LogoutButton, MenuItemLink, NotificationBanner, NotificationButton, ProfileDropdown, RegisterAComponentSection, SearchComponent, SoftwareTemplatesSection, Spacer, StarredDropdown, SupportButton, globalHeaderPlugin };
+export { ApplicationLauncherDropdown, CreateDropdown, Divider, GlobalHeader, GlobalHeaderComponent, HeaderButton, HeaderIcon, HeaderIconButton, LogoutButton, MenuItemLink, NotificationBanner, NotificationButton, ProfileDropdown, RegisterAComponentSection, SearchComponent, SoftwareTemplatesSection, Spacer, StarredDropdown, SupportButton, globalHeaderPlugin };
 //# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"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  createPlugin,\n  createComponentExtension,\n} from '@backstage/core-plugin-api';\n\nimport { GlobalHeaderComponentProps } from './components/GlobalHeaderComponent';\nimport { MenuItemLinkProps } from './components/MenuItemLink/MenuItemLink';\nimport { SoftwareTemplatesSectionProps } from './components/HeaderDropdownComponent/SoftwareTemplatesSection';\nimport { RegisterAComponentSectionProps } from './components/HeaderDropdownComponent/RegisterAComponentSection';\nimport { CreateDropdownProps } from './components/HeaderDropdownComponent/CreateDropdown';\nimport { ProfileDropdownProps } from './components/HeaderDropdownComponent/ProfileDropdown';\n\nexport type { GlobalHeaderComponentProps } from './components/GlobalHeaderComponent';\n\nexport type { HeaderButtonProps } from './components/HeaderButton/HeaderButton';\nexport type { HeaderIconProps } from './components/HeaderIcon/HeaderIcon';\nexport type { HeaderIconButtonProps } from './components/HeaderIconButton/HeaderIconButton';\nexport type { CreateDropdownProps } from './components/HeaderDropdownComponent/CreateDropdown';\nexport type { ProfileDropdownProps } from './components/HeaderDropdownComponent/ProfileDropdown';\n\nexport type { MenuItemLinkProps } from './components/MenuItemLink/MenuItemLink';\nexport type { MenuItemConfig } from './components/HeaderDropdownComponent/MenuSection';\nexport type { SoftwareTemplatesSectionProps } from './components/HeaderDropdownComponent/SoftwareTemplatesSection';\nexport type { RegisterAComponentSectionProps } from './components/HeaderDropdownComponent/RegisterAComponentSection';\nexport type { DividerProps } from './components/Divider/Divider';\nexport type { SpacerProps } from './components/Spacer/Spacer';\nexport type { SupportButtonProps } from './components/SupportButton/SupportButton';\nexport type { NotificationButtonProps } from './components/NotificationButton/NotificationButton';\n\nexport type {\n  NotificationBannerProps,\n  NotificationBannerDismiss,\n} from './components/NotificationBanner';\n\nexport type {\n  GlobalHeaderComponentMountPoint,\n  GlobalHeaderComponentMountPointConfig,\n} from './types';\n\nexport { defaultGlobalHeaderComponentsMountPoints } from './defaultMountPoints/defaultMountPoints';\n\n/**\n * Global Header Plugin\n *\n * @public\n */\nexport const globalHeaderPlugin = createPlugin({\n  id: 'global-header',\n});\n\n/**\n * Global Header\n *\n * @public\n */\nexport const GlobalHeader = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'GlobalHeader',\n    component: {\n      lazy: () => import('./components/GlobalHeader').then(m => m.GlobalHeader),\n    },\n  }),\n);\n\n/**\n * Global Header Component\n *\n * @public\n */\nexport const GlobalHeaderComponent: React.ComponentType<GlobalHeaderComponentProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'GlobalHeaderComponent',\n      component: {\n        lazy: () =>\n          import('./components/GlobalHeaderComponent').then(\n            m => m.GlobalHeaderComponent,\n          ),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const HeaderButton = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'HeaderButton',\n    component: {\n      lazy: () =>\n        import('./components/HeaderButton/HeaderButton').then(\n          m => m.HeaderButton,\n        ),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const HeaderIcon = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'HeaderIcon',\n    component: {\n      lazy: () =>\n        import('./components/HeaderIcon/HeaderIcon').then(m => m.HeaderIcon),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const HeaderIconButton = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'HeaderIconButton',\n    component: {\n      lazy: () =>\n        import('./components/HeaderIconButton/HeaderIconButton').then(\n          m => m.HeaderIconButton,\n        ),\n    },\n  }),\n);\n\n/**\n * Search Component\n *\n * @public\n */\nexport const SearchComponent: React.ComponentType = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'SearchComponent',\n    component: {\n      lazy: () =>\n        import('./components/SearchComponent/SearchComponent').then(\n          m => m.SearchComponent,\n        ),\n    },\n  }),\n);\n\n/**\n * Create Dropdown\n *\n * @public\n */\nexport const CreateDropdown: React.ComponentType<CreateDropdownProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'CreateDropdown',\n      component: {\n        lazy: () =>\n          import('./components/HeaderDropdownComponent/CreateDropdown').then(\n            m => m.CreateDropdown,\n          ),\n      },\n    }),\n  );\n\n/**\n * Profile Dropdown\n *\n * @public\n */\nexport const ProfileDropdown: React.ComponentType<ProfileDropdownProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'ProfileDropdown',\n      component: {\n        lazy: () =>\n          import('./components/HeaderDropdownComponent/ProfileDropdown').then(\n            m => m.ProfileDropdown,\n          ),\n      },\n    }),\n  );\n\n/**\n * Software Templates List\n *\n * @public\n */\nexport const SoftwareTemplatesSection: React.ComponentType<SoftwareTemplatesSectionProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'SoftwareTemplatesSection',\n      component: {\n        lazy: () =>\n          import(\n            './components/HeaderDropdownComponent/SoftwareTemplatesSection'\n          ).then(m => m.SoftwareTemplatesSection),\n      },\n    }),\n  );\n\n/**\n * Register A Component Link\n *\n * @public\n */\nexport const RegisterAComponentSection: React.ComponentType<RegisterAComponentSectionProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'RegisterAComponentSection',\n      component: {\n        lazy: () =>\n          import(\n            './components/HeaderDropdownComponent/RegisterAComponentSection'\n          ).then(m => m.RegisterAComponentSection),\n      },\n    }),\n  );\n\n/**\n * Header Link\n *\n * @public\n */\nexport const MenuItemLink: React.ComponentType<MenuItemLinkProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'MenuItemLink',\n      component: {\n        lazy: () =>\n          import('./components/MenuItemLink/MenuItemLink').then(\n            m => m.MenuItemLink,\n          ),\n      },\n    }),\n  );\n\n/**\n * Header Logout Button\n *\n * @public\n */\nexport const LogoutButton: React.ComponentType = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'LogoutButton',\n    component: {\n      lazy: () =>\n        import('./components/LogoutButton/LogoutButton').then(\n          m => m.LogoutButton,\n        ),\n    },\n  }),\n);\n\n/**\n * Spacer component that allow users to add a flexibel spacing between components.\n *\n * Supports two props: `growFactor` with default 1 and `minWidth` width default 8 pixels.\n *\n * @public\n */\nexport const Spacer = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'Spacer',\n    component: {\n      lazy: () => import('./components/Spacer/Spacer').then(m => m.Spacer),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const Divider = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'Divider',\n    component: {\n      lazy: () => import('./components/Divider/Divider').then(m => m.Divider),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const SupportButton = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'SupportButton',\n    component: {\n      lazy: () =>\n        import('./components/SupportButton/SupportButton').then(\n          m => m.SupportButton,\n        ),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const NotificationButton = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'NotificationButton',\n    component: {\n      lazy: () =>\n        import('./components/NotificationButton/NotificationButton').then(\n          m => m.NotificationButton,\n        ),\n    },\n  }),\n);\n\n/**\n * NotificationBanner\n *\n * @public\n */\nexport const NotificationBanner = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'NotificationBanner',\n    component: {\n      lazy: () =>\n        import('./components/NotificationBanner').then(\n          m => m.NotificationBanner,\n        ),\n    },\n  }),\n);\n\n/**\n * Starred Dropdown\n *\n * @public\n */\nexport const StarredDropdown = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'StarredDropdown',\n    component: {\n      lazy: () =>\n        import('./components/HeaderDropdownComponent/StarredDropdown').then(\n          m => m.StarredDropdown,\n        ),\n    },\n  }),\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"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  createPlugin,\n  createComponentExtension,\n} from '@backstage/core-plugin-api';\n\nimport { GlobalHeaderComponentProps } from './components/GlobalHeaderComponent';\nimport { MenuItemLinkProps } from './components/MenuItemLink/MenuItemLink';\nimport { SoftwareTemplatesSectionProps } from './components/HeaderDropdownComponent/SoftwareTemplatesSection';\nimport { RegisterAComponentSectionProps } from './components/HeaderDropdownComponent/RegisterAComponentSection';\nimport { CreateDropdownProps } from './components/HeaderDropdownComponent/CreateDropdown';\nimport { ProfileDropdownProps } from './components/HeaderDropdownComponent/ProfileDropdown';\n\nexport type { GlobalHeaderComponentProps } from './components/GlobalHeaderComponent';\n\nexport type { HeaderButtonProps } from './components/HeaderButton/HeaderButton';\nexport type { HeaderIconProps } from './components/HeaderIcon/HeaderIcon';\nexport type { HeaderIconButtonProps } from './components/HeaderIconButton/HeaderIconButton';\nexport type { CreateDropdownProps } from './components/HeaderDropdownComponent/CreateDropdown';\nexport type { ProfileDropdownProps } from './components/HeaderDropdownComponent/ProfileDropdown';\n\nexport type { MenuItemLinkProps } from './components/MenuItemLink/MenuItemLink';\nexport type { MenuItemConfig } from './components/HeaderDropdownComponent/MenuSection';\nexport type { SoftwareTemplatesSectionProps } from './components/HeaderDropdownComponent/SoftwareTemplatesSection';\nexport type { RegisterAComponentSectionProps } from './components/HeaderDropdownComponent/RegisterAComponentSection';\nexport type { DividerProps } from './components/Divider/Divider';\nexport type { SpacerProps } from './components/Spacer/Spacer';\nexport type { SupportButtonProps } from './components/SupportButton/SupportButton';\nexport type { NotificationButtonProps } from './components/NotificationButton/NotificationButton';\n\nexport type {\n  NotificationBannerProps,\n  NotificationBannerDismiss,\n} from './components/NotificationBanner';\n\nexport type {\n  GlobalHeaderComponentMountPoint,\n  GlobalHeaderComponentMountPointConfig,\n} from './types';\n\nexport { defaultGlobalHeaderComponentsMountPoints } from './defaultMountPoints/defaultMountPoints';\n\n/**\n * Global Header Plugin\n *\n * @public\n */\nexport const globalHeaderPlugin = createPlugin({\n  id: 'global-header',\n});\n\n/**\n * Global Header\n *\n * @public\n */\nexport const GlobalHeader = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'GlobalHeader',\n    component: {\n      lazy: () => import('./components/GlobalHeader').then(m => m.GlobalHeader),\n    },\n  }),\n);\n\n/**\n * Global Header Component\n *\n * @public\n */\nexport const GlobalHeaderComponent: React.ComponentType<GlobalHeaderComponentProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'GlobalHeaderComponent',\n      component: {\n        lazy: () =>\n          import('./components/GlobalHeaderComponent').then(\n            m => m.GlobalHeaderComponent,\n          ),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const HeaderButton = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'HeaderButton',\n    component: {\n      lazy: () =>\n        import('./components/HeaderButton/HeaderButton').then(\n          m => m.HeaderButton,\n        ),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const HeaderIcon = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'HeaderIcon',\n    component: {\n      lazy: () =>\n        import('./components/HeaderIcon/HeaderIcon').then(m => m.HeaderIcon),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const HeaderIconButton = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'HeaderIconButton',\n    component: {\n      lazy: () =>\n        import('./components/HeaderIconButton/HeaderIconButton').then(\n          m => m.HeaderIconButton,\n        ),\n    },\n  }),\n);\n\n/**\n * Search Component\n *\n * @public\n */\nexport const SearchComponent: React.ComponentType = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'SearchComponent',\n    component: {\n      lazy: () =>\n        import('./components/SearchComponent/SearchComponent').then(\n          m => m.SearchComponent,\n        ),\n    },\n  }),\n);\n\n/**\n * Create Dropdown\n *\n * @public\n */\nexport const CreateDropdown: React.ComponentType<CreateDropdownProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'CreateDropdown',\n      component: {\n        lazy: () =>\n          import('./components/HeaderDropdownComponent/CreateDropdown').then(\n            m => m.CreateDropdown,\n          ),\n      },\n    }),\n  );\n\n/**\n * Profile Dropdown\n *\n * @public\n */\nexport const ProfileDropdown: React.ComponentType<ProfileDropdownProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'ProfileDropdown',\n      component: {\n        lazy: () =>\n          import('./components/HeaderDropdownComponent/ProfileDropdown').then(\n            m => m.ProfileDropdown,\n          ),\n      },\n    }),\n  );\n\n/**\n * Software Templates List\n *\n * @public\n */\nexport const SoftwareTemplatesSection: React.ComponentType<SoftwareTemplatesSectionProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'SoftwareTemplatesSection',\n      component: {\n        lazy: () =>\n          import(\n            './components/HeaderDropdownComponent/SoftwareTemplatesSection'\n          ).then(m => m.SoftwareTemplatesSection),\n      },\n    }),\n  );\n\n/**\n * Register A Component Link\n *\n * @public\n */\nexport const RegisterAComponentSection: React.ComponentType<RegisterAComponentSectionProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'RegisterAComponentSection',\n      component: {\n        lazy: () =>\n          import(\n            './components/HeaderDropdownComponent/RegisterAComponentSection'\n          ).then(m => m.RegisterAComponentSection),\n      },\n    }),\n  );\n\n/**\n * Header Link\n *\n * @public\n */\nexport const MenuItemLink: React.ComponentType<MenuItemLinkProps> =\n  globalHeaderPlugin.provide(\n    createComponentExtension({\n      name: 'MenuItemLink',\n      component: {\n        lazy: () =>\n          import('./components/MenuItemLink/MenuItemLink').then(\n            m => m.MenuItemLink,\n          ),\n      },\n    }),\n  );\n\n/**\n * Header Logout Button\n *\n * @public\n */\nexport const LogoutButton: React.ComponentType = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'LogoutButton',\n    component: {\n      lazy: () =>\n        import('./components/LogoutButton/LogoutButton').then(\n          m => m.LogoutButton,\n        ),\n    },\n  }),\n);\n\n/**\n * Spacer component that allow users to add a flexibel spacing between components.\n *\n * Supports two props: `growFactor` with default 1 and `minWidth` width default 8 pixels.\n *\n * @public\n */\nexport const Spacer = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'Spacer',\n    component: {\n      lazy: () => import('./components/Spacer/Spacer').then(m => m.Spacer),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const Divider = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'Divider',\n    component: {\n      lazy: () => import('./components/Divider/Divider').then(m => m.Divider),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const SupportButton = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'SupportButton',\n    component: {\n      lazy: () =>\n        import('./components/SupportButton/SupportButton').then(\n          m => m.SupportButton,\n        ),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const NotificationButton = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'NotificationButton',\n    component: {\n      lazy: () =>\n        import('./components/NotificationButton/NotificationButton').then(\n          m => m.NotificationButton,\n        ),\n    },\n  }),\n);\n\n/**\n * NotificationBanner\n *\n * @public\n */\nexport const NotificationBanner = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'NotificationBanner',\n    component: {\n      lazy: () =>\n        import('./components/NotificationBanner').then(\n          m => m.NotificationBanner,\n        ),\n    },\n  }),\n);\n\n/**\n * Starred Dropdown\n *\n * @public\n */\nexport const StarredDropdown = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'StarredDropdown',\n    component: {\n      lazy: () =>\n        import('./components/HeaderDropdownComponent/StarredDropdown').then(\n          m => m.StarredDropdown,\n        ),\n    },\n  }),\n);\n\n/**\n * Application Launcher Dropdown\n *\n * @public\n */\nexport const ApplicationLauncherDropdown = globalHeaderPlugin.provide(\n  createComponentExtension({\n    name: 'ApplicationLauncherDropdown',\n    component: {\n      lazy: () =>\n        import(\n          './components/HeaderDropdownComponent/ApplicationLauncherDropdown'\n        ).then(m => m.ApplicationLauncherDropdown),\n    },\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.3.0",
+  "version": "1.5.0",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",