@red-hat-developer-hub/backstage-plugin-global-header 0.1.0 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconButton.esm.js","sources":["../../../src/components/HeaderIconButton/HeaderIconButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport IconButton, { IconButtonProps } from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport { HeaderIcon } from '../HeaderIcon/HeaderIcon';\n\n/**\n * @public\n */\nexport interface HeaderIconButtonProps {\n  title: string;\n  icon: string;\n  tooltip?: string;\n  color?: 'inherit' | 'primary' | 'secondary' | 'default';\n  size?: 'small' | 'medium' | 'large';\n  ariaLabel?: string;\n  to: string;\n  style?: React.CSSProperties;\n}\n\n// Backstage Link automatically detects external links and emits analytic events.\nconst Link = (props: any) => (\n  <BackstageLink {...props} color=\"inherit\" externalLinkIcon={false} />\n);\n\nexport const HeaderIconButton = ({\n  title,\n  icon,\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  ariaLabel,\n  to,\n  style,\n}: HeaderIconButtonProps) => {\n  if (!title) {\n    // eslint-disable-next-line no-console\n    console.warn('HeaderIconButton has no title:', { icon, to });\n  }\n\n  const linkProps = { to } as IconButtonProps;\n\n  return (\n    <Tooltip title={tooltip ?? title}>\n      <div>\n        <IconButton\n          LinkComponent={Link}\n          color={color}\n          size={size}\n          aria-label={ariaLabel ?? title}\n          {...linkProps} // to={to} isn't supported\n          sx={style}\n        >\n          <HeaderIcon icon={icon} size={size} />\n        </IconButton>\n      </div>\n    </Tooltip>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;AAwCA,MAAM,IAAA,GAAO,CAAC,KAAA,qBACX,KAAA,CAAA,aAAA,CAAAA,MAAA,EAAA,EAAe,GAAG,KAAO,EAAA,KAAA,EAAM,SAAU,EAAA,gBAAA,EAAkB,KAAO,EAAA,CAAA;AAG9D,MAAM,mBAAmB,CAAC;AAAA,EAC/B,KAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,SAAA;AAAA,EACA,EAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAA,IAAI,CAAC,KAAO,EAAA;AAEV,IAAA,OAAA,CAAQ,IAAK,CAAA,gCAAA,EAAkC,EAAE,IAAA,EAAM,IAAI,CAAA;AAAA;AAG7D,EAAM,MAAA,SAAA,GAAY,EAAE,EAAG,EAAA;AAEvB,EAAA,2CACG,OAAQ,EAAA,EAAA,KAAA,EAAO,OAAW,IAAA,KAAA,EAAA,sCACxB,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAe,EAAA,IAAA;AAAA,MACf,KAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAY,SAAa,IAAA,KAAA;AAAA,MACxB,GAAG,SAAA;AAAA,MACJ,EAAI,EAAA;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,IAAA,EAAY,IAAY,EAAA;AAAA,GAExC,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderIconButton.esm.js","sources":["../../../src/components/HeaderIconButton/HeaderIconButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport IconButton, { IconButtonProps } from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport { HeaderIcon } from '../HeaderIcon/HeaderIcon';\n\n/**\n * @public\n */\nexport interface HeaderIconButtonProps {\n  title: string;\n  icon: string;\n  tooltip?: string;\n  color?: 'inherit' | 'primary' | 'secondary' | 'default';\n  size?: 'small' | 'medium' | 'large';\n  ariaLabel?: string;\n  to: string;\n  layout?: React.CSSProperties;\n}\n\n// Backstage Link automatically detects external links and emits analytic events.\nconst Link = (props: any) => (\n  <BackstageLink {...props} color=\"inherit\" externalLinkIcon={false} />\n);\n\nexport const HeaderIconButton = ({\n  title,\n  icon,\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  ariaLabel,\n  to,\n  layout,\n}: HeaderIconButtonProps) => {\n  if (!title) {\n    // eslint-disable-next-line no-console\n    console.warn('HeaderIconButton has no title:', { icon, to });\n  }\n\n  const linkProps = { to } as IconButtonProps;\n\n  return (\n    <Box sx={layout}>\n      <Tooltip title={tooltip ?? title}>\n        <div>\n          <IconButton\n            LinkComponent={Link}\n            color={color}\n            size={size}\n            aria-label={ariaLabel ?? title}\n            {...linkProps} // to={to} isn't supported\n          >\n            <HeaderIcon icon={icon} size={size} />\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;AAyCA,MAAM,IAAA,GAAO,CAAC,KAAA,qBACX,KAAA,CAAA,aAAA,CAAAA,MAAA,EAAA,EAAe,GAAG,KAAO,EAAA,KAAA,EAAM,SAAU,EAAA,gBAAA,EAAkB,KAAO,EAAA,CAAA;AAG9D,MAAM,mBAAmB,CAAC;AAAA,EAC/B,KAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,SAAA;AAAA,EACA,EAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAA,IAAI,CAAC,KAAO,EAAA;AAEV,IAAA,OAAA,CAAQ,IAAK,CAAA,gCAAA,EAAkC,EAAE,IAAA,EAAM,IAAI,CAAA;AAAA;AAG7D,EAAM,MAAA,SAAA,GAAY,EAAE,EAAG,EAAA;AAEvB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,KAAO,EAAA,OAAA,IAAW,KACzB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAe,EAAA,IAAA;AAAA,MACf,KAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAY,SAAa,IAAA,KAAA;AAAA,MACxB,GAAG;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,IAAA,EAAY,IAAY,EAAA;AAAA,GAExC,CACF,CACF,CAAA;AAEJ;;;;"}

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

@@ -25,7 +25,7 @@ const MenuItemLinkContent = ({
       {
         icon,
         size: "small",
-        styles: label ? {
+        layout: label ? {
           marginRight: "0.5rem",
           flexShrink: 0,
           color: theme.palette.mode === "dark" ? theme.palette.text.primary : theme.palette.text.disabled

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

package/dist/components/NotificationBanner.esm.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import Alert from '@mui/material/Alert';
 import { MarkdownContent } from '@backstage/core-components';
+import Alert from '@mui/material/Alert';
+import { HeaderIcon } from './HeaderIcon/HeaderIcon.esm.js';
 
 const NotificationBanner = (props) => {
   const [dismissed, setDismissed] = React.useState(() => {
@@ -47,15 +48,19 @@ const NotificationBanner = (props) => {
   return /* @__PURE__ */ React.createElement(
     Alert,
     {
-      icon: false,
+      color: "warning",
+      icon: props.icon ? /* @__PURE__ */ React.createElement(HeaderIcon, { icon: props.icon }) : false,
       onClose,
       sx: {
-        color: props.textColor ?? "text.primary",
-        backgroundColor: props.backgroundColor ?? "background.paper",
-        border: props.border,
-        borderRadius: props.borderRadius,
+        color: props.textColor,
+        backgroundColor: props.backgroundColor,
+        borderColor: props.borderColor,
+        borderStyle: "solid",
+        borderWidth: 2,
+        borderRadius: 0,
         justifyContent: "center",
-        textAlign: "center"
+        textAlign: "center",
+        ...props.layout
       }
     },
     props.markdown ? /* @__PURE__ */ React.createElement(MarkdownContent, { content: props.title, dialect: "gfm" }) : props.title

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationBanner.esm.js","sources":["../../src/components/NotificationBanner.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 Alert from '@mui/material/Alert';\nimport { MarkdownContent } from '@backstage/core-components';\n\n// export type NotificationBannerColor = 'success' | 'info' | 'warning' | 'error';\n// export type NotificationBannerIcon = 'success' | 'info' | 'warning' | 'error';\n// export type NotificationBannerVariant = 'standard' | 'filled' | 'outlined';\n\n/**\n * @public\n */\nexport type NotificationBannerDismiss = 'none' | 'session' | 'localstorage';\n\n/**\n * @public\n */\nexport interface NotificationBannerProps {\n  id?: string;\n  title: string;\n  markdown?: boolean;\n\n  textColor?: string;\n  backgroundColor?: string;\n  border?: string;\n  borderRadius?: string;\n\n  // color?: NotificationBannerColor;\n  // icon?: NotificationBannerIcon;\n  // variant?: NotificationBannerVariant;\n\n  dismiss?: NotificationBannerDismiss;\n}\n\nexport const NotificationBanner = (props: NotificationBannerProps) => {\n  const [dismissed, setDismissed] = React.useState<boolean>(() => {\n    if (props.dismiss === 'localstorage') {\n      try {\n        const dismissedString =\n          localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n        const dismissedObject = JSON.parse(dismissedString);\n        return dismissedObject[props.id ?? props.title] === 'dismissed';\n      } catch (error) {\n        // nothing\n        return false;\n      }\n    } else {\n      return false;\n    }\n  });\n\n  const onClose = React.useMemo<(() => void) | undefined>(() => {\n    if (!props.dismiss || props.dismiss === 'none') {\n      return undefined;\n    } else if (props.dismiss === 'session') {\n      return () => setDismissed(true);\n    } else if (props.dismiss === 'localstorage') {\n      return () => {\n        try {\n          const dismissedString =\n            localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n          const dismissedObject = JSON.parse(dismissedString);\n          dismissedObject[props.id ?? props.title] = 'dismissed';\n          localStorage.setItem(\n            'global-header/NotificationBanner',\n            JSON.stringify(dismissedObject),\n          );\n        } catch (error) {\n          // nothing\n        }\n        setDismissed(true);\n      };\n    }\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Unsupported dismiss option \"${props.dismiss}\", currently supported \"none\", \"session\" or \"localstorage\"!`,\n    );\n    return undefined;\n  }, [props.id, props.title, props.dismiss]);\n\n  if (dismissed || !props.title) {\n    return null;\n  }\n\n  return (\n    <Alert\n      // color={props.color}\n      // severity={props.icon}\n      icon={false}\n      // variant={props.variant}\n      onClose={onClose}\n      sx={{\n        color: props.textColor ?? 'text.primary',\n        backgroundColor: props.backgroundColor ?? 'background.paper',\n        border: props.border,\n        borderRadius: props.borderRadius,\n        justifyContent: 'center',\n        textAlign: 'center',\n      }}\n    >\n      {props.markdown ? (\n        <MarkdownContent content={props.title} dialect=\"gfm\" />\n      ) : (\n        props.title\n      )}\n    </Alert>\n  );\n};\n"],"names":[],"mappings":";;;;AAiDa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,KAAA,CAAM,SAAkB,MAAM;AAC9D,IAAI,IAAA,KAAA,CAAM,YAAY,cAAgB,EAAA;AACpC,MAAI,IAAA;AACF,QAAA,MAAM,eACJ,GAAA,YAAA,CAAa,OAAQ,CAAA,kCAAkC,CAAK,IAAA,IAAA;AAC9D,QAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,KAAA,CAAM,eAAe,CAAA;AAClD,QAAA,OAAO,eAAgB,CAAA,KAAA,CAAM,EAAM,IAAA,KAAA,CAAM,KAAK,CAAM,KAAA,WAAA;AAAA,eAC7C,KAAO,EAAA;AAEd,QAAO,OAAA,KAAA;AAAA;AACT,KACK,MAAA;AACL,MAAO,OAAA,KAAA;AAAA;AACT,GACD,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,KAAM,CAAA,OAAA,CAAkC,MAAM;AAC5D,IAAA,IAAI,CAAC,KAAA,CAAM,OAAW,IAAA,KAAA,CAAM,YAAY,MAAQ,EAAA;AAC9C,MAAO,OAAA,KAAA,CAAA;AAAA,KACT,MAAA,IAAW,KAAM,CAAA,OAAA,KAAY,SAAW,EAAA;AACtC,MAAO,OAAA,MAAM,aAAa,IAAI,CAAA;AAAA,KAChC,MAAA,IAAW,KAAM,CAAA,OAAA,KAAY,cAAgB,EAAA;AAC3C,MAAA,OAAO,MAAM;AACX,QAAI,IAAA;AACF,UAAA,MAAM,eACJ,GAAA,YAAA,CAAa,OAAQ,CAAA,kCAAkC,CAAK,IAAA,IAAA;AAC9D,UAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,KAAA,CAAM,eAAe,CAAA;AAClD,UAAA,eAAA,CAAgB,KAAM,CAAA,EAAA,IAAM,KAAM,CAAA,KAAK,CAAI,GAAA,WAAA;AAC3C,UAAa,YAAA,CAAA,OAAA;AAAA,YACX,kCAAA;AAAA,YACA,IAAA,CAAK,UAAU,eAAe;AAAA,WAChC;AAAA,iBACO,KAAO,EAAA;AAAA;AAGhB,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA,OACnB;AAAA;AAGF,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,CAAA,4BAAA,EAA+B,MAAM,OAAO,CAAA,2DAAA;AAAA,KAC9C;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT,EAAG,CAAC,KAAM,CAAA,EAAA,EAAI,MAAM,KAAO,EAAA,KAAA,CAAM,OAAO,CAAC,CAAA;AAEzC,EAAI,IAAA,SAAA,IAAa,CAAC,KAAA,CAAM,KAAO,EAAA;AAC7B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAGC,IAAM,EAAA,KAAA;AAAA,MAEN,OAAA;AAAA,MACA,EAAI,EAAA;AAAA,QACF,KAAA,EAAO,MAAM,SAAa,IAAA,cAAA;AAAA,QAC1B,eAAA,EAAiB,MAAM,eAAmB,IAAA,kBAAA;AAAA,QAC1C,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,cAAc,KAAM,CAAA,YAAA;AAAA,QACpB,cAAgB,EAAA,QAAA;AAAA,QAChB,SAAW,EAAA;AAAA;AACb,KAAA;AAAA,IAEC,KAAA,CAAM,QACL,mBAAA,KAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,MAAM,KAAO,EAAA,OAAA,EAAQ,KAAM,EAAA,CAAA,GAErD,KAAM,CAAA;AAAA,GAEV;AAEJ;;;;"}
+{"version":3,"file":"NotificationBanner.esm.js","sources":["../../src/components/NotificationBanner.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 { MarkdownContent } from '@backstage/core-components';\n\nimport Alert from '@mui/material/Alert';\n\nimport { HeaderIcon } from './HeaderIcon/HeaderIcon';\n\n/**\n * @public\n */\nexport type NotificationBannerDismiss = 'none' | 'session' | 'localstorage';\n\n/**\n * @public\n */\nexport interface NotificationBannerProps {\n  id?: string;\n  title: string;\n  markdown?: boolean;\n  icon?: string;\n\n  textColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  layout?: React.CSSProperties;\n\n  dismiss?: NotificationBannerDismiss;\n}\n\nexport const NotificationBanner = (props: NotificationBannerProps) => {\n  const [dismissed, setDismissed] = React.useState<boolean>(() => {\n    if (props.dismiss === 'localstorage') {\n      try {\n        const dismissedString =\n          localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n        const dismissedObject = JSON.parse(dismissedString);\n        return dismissedObject[props.id ?? props.title] === 'dismissed';\n      } catch (error) {\n        // nothing\n        return false;\n      }\n    } else {\n      return false;\n    }\n  });\n\n  const onClose = React.useMemo<(() => void) | undefined>(() => {\n    if (!props.dismiss || props.dismiss === 'none') {\n      return undefined;\n    } else if (props.dismiss === 'session') {\n      return () => setDismissed(true);\n    } else if (props.dismiss === 'localstorage') {\n      return () => {\n        try {\n          const dismissedString =\n            localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n          const dismissedObject = JSON.parse(dismissedString);\n          dismissedObject[props.id ?? props.title] = 'dismissed';\n          localStorage.setItem(\n            'global-header/NotificationBanner',\n            JSON.stringify(dismissedObject),\n          );\n        } catch (error) {\n          // nothing\n        }\n        setDismissed(true);\n      };\n    }\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Unsupported dismiss option \"${props.dismiss}\", currently supported \"none\", \"session\" or \"localstorage\"!`,\n    );\n    return undefined;\n  }, [props.id, props.title, props.dismiss]);\n\n  if (dismissed || !props.title) {\n    return null;\n  }\n\n  return (\n    <Alert\n      color=\"warning\"\n      icon={props.icon ? <HeaderIcon icon={props.icon} /> : false}\n      onClose={onClose}\n      sx={{\n        color: props.textColor,\n        backgroundColor: props.backgroundColor,\n        borderColor: props.borderColor,\n        borderStyle: 'solid',\n        borderWidth: 2,\n        borderRadius: 0,\n        justifyContent: 'center',\n        textAlign: 'center',\n        ...props.layout,\n      }}\n    >\n      {props.markdown ? (\n        <MarkdownContent content={props.title} dialect=\"gfm\" />\n      ) : (\n        props.title\n      )}\n    </Alert>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8Ca,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,KAAA,CAAM,SAAkB,MAAM;AAC9D,IAAI,IAAA,KAAA,CAAM,YAAY,cAAgB,EAAA;AACpC,MAAI,IAAA;AACF,QAAA,MAAM,eACJ,GAAA,YAAA,CAAa,OAAQ,CAAA,kCAAkC,CAAK,IAAA,IAAA;AAC9D,QAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,KAAA,CAAM,eAAe,CAAA;AAClD,QAAA,OAAO,eAAgB,CAAA,KAAA,CAAM,EAAM,IAAA,KAAA,CAAM,KAAK,CAAM,KAAA,WAAA;AAAA,eAC7C,KAAO,EAAA;AAEd,QAAO,OAAA,KAAA;AAAA;AACT,KACK,MAAA;AACL,MAAO,OAAA,KAAA;AAAA;AACT,GACD,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,KAAM,CAAA,OAAA,CAAkC,MAAM;AAC5D,IAAA,IAAI,CAAC,KAAA,CAAM,OAAW,IAAA,KAAA,CAAM,YAAY,MAAQ,EAAA;AAC9C,MAAO,OAAA,KAAA,CAAA;AAAA,KACT,MAAA,IAAW,KAAM,CAAA,OAAA,KAAY,SAAW,EAAA;AACtC,MAAO,OAAA,MAAM,aAAa,IAAI,CAAA;AAAA,KAChC,MAAA,IAAW,KAAM,CAAA,OAAA,KAAY,cAAgB,EAAA;AAC3C,MAAA,OAAO,MAAM;AACX,QAAI,IAAA;AACF,UAAA,MAAM,eACJ,GAAA,YAAA,CAAa,OAAQ,CAAA,kCAAkC,CAAK,IAAA,IAAA;AAC9D,UAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,KAAA,CAAM,eAAe,CAAA;AAClD,UAAA,eAAA,CAAgB,KAAM,CAAA,EAAA,IAAM,KAAM,CAAA,KAAK,CAAI,GAAA,WAAA;AAC3C,UAAa,YAAA,CAAA,OAAA;AAAA,YACX,kCAAA;AAAA,YACA,IAAA,CAAK,UAAU,eAAe;AAAA,WAChC;AAAA,iBACO,KAAO,EAAA;AAAA;AAGhB,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA,OACnB;AAAA;AAGF,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,CAAA,4BAAA,EAA+B,MAAM,OAAO,CAAA,2DAAA;AAAA,KAC9C;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT,EAAG,CAAC,KAAM,CAAA,EAAA,EAAI,MAAM,KAAO,EAAA,KAAA,CAAM,OAAO,CAAC,CAAA;AAEzC,EAAI,IAAA,SAAA,IAAa,CAAC,KAAA,CAAM,KAAO,EAAA;AAC7B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,IAAA,EAAM,MAAM,IAAO,mBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,IAAM,EAAA,KAAA,CAAM,MAAM,CAAK,GAAA,KAAA;AAAA,MACtD,OAAA;AAAA,MACA,EAAI,EAAA;AAAA,QACF,OAAO,KAAM,CAAA,SAAA;AAAA,QACb,iBAAiB,KAAM,CAAA,eAAA;AAAA,QACvB,aAAa,KAAM,CAAA,WAAA;AAAA,QACnB,WAAa,EAAA,OAAA;AAAA,QACb,WAAa,EAAA,CAAA;AAAA,QACb,YAAc,EAAA,CAAA;AAAA,QACd,cAAgB,EAAA,QAAA;AAAA,QAChB,SAAW,EAAA,QAAA;AAAA,QACX,GAAG,KAAM,CAAA;AAAA;AACX,KAAA;AAAA,IAEC,KAAA,CAAM,QACL,mBAAA,KAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,MAAM,KAAO,EAAA,OAAA,EAAQ,KAAM,EAAA,CAAA,GAErD,KAAM,CAAA;AAAA,GAEV;AAEJ;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationButton.esm.js","sources":["../../../src/components/NotificationButton/NotificationButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Badge from '@mui/material/Badge';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport NotificationIcon from '@mui/icons-material/NotificationsOutlined';\n\nimport { useNotificationCount } from '../../hooks/useNotificationCount';\n\n/**\n * @public\n */\nexport interface NotificationButtonProps {\n  title?: string;\n  tooltip?: string;\n  color?:\n    | 'inherit'\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  size?: 'small' | 'medium' | 'large';\n  badgeColor?:\n    | 'primary'\n    | 'secondary'\n    | 'default'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  to?: string;\n}\n\n// Backstage Link automatically detects external links and emits analytic events.\nconst Link = (props: any) => (\n  <BackstageLink {...props} color=\"inherit\" externalLinkIcon={false} />\n);\n\n/**\n * @public\n */\nexport const NotificationButton = ({\n  title = 'Notifications',\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  badgeColor = 'error',\n  to = '/notifications',\n}: NotificationButtonProps) => {\n  const { available, unreadCount } = useNotificationCount();\n\n  if (!available) {\n    return null;\n  }\n\n  return (\n    <Tooltip title={tooltip ?? title}>\n      <div>\n        <IconButton\n          component={Link}\n          color={color}\n          size={size}\n          to={to}\n          aria-label={title}\n        >\n          {unreadCount > 0 ? (\n            <Badge badgeContent={unreadCount} color={badgeColor} max={999}>\n              <NotificationIcon fontSize={size} />\n            </Badge>\n          ) : (\n            <NotificationIcon fontSize={size} />\n          )}\n        </IconButton>\n      </div>\n    </Tooltip>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;AAuDA,MAAM,IAAA,GAAO,CAAC,KAAA,qBACX,KAAA,CAAA,aAAA,CAAAA,MAAA,EAAA,EAAe,GAAG,KAAO,EAAA,KAAA,EAAM,SAAU,EAAA,gBAAA,EAAkB,KAAO,EAAA,CAAA;AAM9D,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAQ,GAAA,eAAA;AAAA,EACR,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,UAAa,GAAA,OAAA;AAAA,EACb,EAAK,GAAA;AACP,CAA+B,KAAA;AAC7B,EAAA,MAAM,EAAE,SAAA,EAAW,WAAY,EAAA,GAAI,oBAAqB,EAAA;AAExD,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,2CACG,OAAQ,EAAA,EAAA,KAAA,EAAO,OAAW,IAAA,KAAA,EAAA,sCACxB,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,MACX,KAAA;AAAA,MACA,IAAA;AAAA,MACA,EAAA;AAAA,MACA,YAAY,EAAA;AAAA,KAAA;AAAA,IAEX,cAAc,CACb,mBAAA,KAAA,CAAA,aAAA,CAAC,SAAM,YAAc,EAAA,WAAA,EAAa,OAAO,UAAY,EAAA,GAAA,EAAK,uBACvD,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA,CACpC,oBAEC,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA;AAAA,GAGxC,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"NotificationButton.esm.js","sources":["../../../src/components/NotificationButton/NotificationButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { Link as BackstageLink } from '@backstage/core-components';\n\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport NotificationIcon from '@mui/icons-material/NotificationsOutlined';\n\nimport { useNotificationCount } from '../../hooks/useNotificationCount';\n\n/**\n * @public\n */\nexport interface NotificationButtonProps {\n  title?: string;\n  tooltip?: string;\n  color?:\n    | 'inherit'\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  size?: 'small' | 'medium' | 'large';\n  badgeColor?:\n    | 'primary'\n    | 'secondary'\n    | 'default'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning';\n  to?: string;\n  layout?: React.CSSProperties;\n}\n\n// Backstage Link automatically detects external links and emits analytic events.\nconst Link = (props: any) => (\n  <BackstageLink {...props} color=\"inherit\" externalLinkIcon={false} />\n);\n\n/**\n * @public\n */\nexport const NotificationButton = ({\n  title = 'Notifications',\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  badgeColor = 'error',\n  to = '/notifications',\n  layout,\n}: NotificationButtonProps) => {\n  const { available, unreadCount } = useNotificationCount();\n\n  if (!available) {\n    return null;\n  }\n\n  return (\n    <Box sx={layout}>\n      <Tooltip title={tooltip ?? title}>\n        <div>\n          <IconButton\n            component={Link}\n            color={color}\n            size={size}\n            to={to}\n            aria-label={title}\n          >\n            {unreadCount > 0 ? (\n              <Badge badgeContent={unreadCount} color={badgeColor} max={999}>\n                <NotificationIcon fontSize={size} />\n              </Badge>\n            ) : (\n              <NotificationIcon fontSize={size} />\n            )}\n          </IconButton>\n        </div>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;;AAyDA,MAAM,IAAA,GAAO,CAAC,KAAA,qBACX,KAAA,CAAA,aAAA,CAAAA,MAAA,EAAA,EAAe,GAAG,KAAO,EAAA,KAAA,EAAM,SAAU,EAAA,gBAAA,EAAkB,KAAO,EAAA,CAAA;AAM9D,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAQ,GAAA,eAAA;AAAA,EACR,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,UAAa,GAAA,OAAA;AAAA,EACb,EAAK,GAAA,gBAAA;AAAA,EACL;AACF,CAA+B,KAAA;AAC7B,EAAA,MAAM,EAAE,SAAA,EAAW,WAAY,EAAA,GAAI,oBAAqB,EAAA;AAExD,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,MACP,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,KAAO,EAAA,OAAA,IAAW,KACzB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,MACX,KAAA;AAAA,MACA,IAAA;AAAA,MACA,EAAA;AAAA,MACA,YAAY,EAAA;AAAA,KAAA;AAAA,IAEX,cAAc,CACb,mBAAA,KAAA,CAAA,aAAA,CAAC,SAAM,YAAc,EAAA,WAAA,EAAa,OAAO,UAAY,EAAA,GAAA,EAAK,uBACvD,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA,CACpC,oBAEC,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,UAAU,IAAM,EAAA;AAAA,GAGxC,CACF,CACF,CAAA;AAEJ;;;;"}

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

@@ -14,8 +14,7 @@ const SearchComponent = () => {
         display: "flex",
         flexDirection: "row",
         justifyContent: "start",
-        direction: "ltr",
-        mr: 4
+        direction: "ltr"
       }
     },
     /* @__PURE__ */ React.createElement(SearchBar, { query: { term: searchTerm }, setSearchTerm })

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

@@ -1 +1 @@
-{"version":3,"file":"SearchComponent.esm.js","sources":["../../../src/components/SearchComponent/SearchComponent.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, { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport { SearchBar } from './SearchBar';\nimport { SearchContextProvider } from '@backstage/plugin-search-react';\n\nexport const SearchComponent = () => {\n  const [searchTerm, setSearchTerm] = useState<string>('');\n\n  return (\n    <SearchContextProvider>\n      <Box\n        sx={{\n          position: 'relative',\n          flexGrow: 1,\n          display: 'flex',\n          flexDirection: 'row',\n          justifyContent: 'start',\n          direction: 'ltr',\n          mr: 4,\n        }}\n      >\n        <SearchBar query={{ term: searchTerm }} setSearchTerm={setSearchTerm} />\n      </Box>\n    </SearchContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAiB,EAAE,CAAA;AAEvD,EAAA,2CACG,qBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA,CAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,KAAA;AAAA,QACf,cAAgB,EAAA,OAAA;AAAA,QAChB,SAAW,EAAA,KAAA;AAAA,QACX,EAAI,EAAA;AAAA;AACN,KAAA;AAAA,wCAEC,SAAU,EAAA,EAAA,KAAA,EAAO,EAAE,IAAM,EAAA,UAAA,IAAc,aAA8B,EAAA;AAAA,GAE1E,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchComponent.esm.js","sources":["../../../src/components/SearchComponent/SearchComponent.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, { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport { SearchBar } from './SearchBar';\nimport { SearchContextProvider } from '@backstage/plugin-search-react';\n\nexport const SearchComponent = () => {\n  const [searchTerm, setSearchTerm] = useState<string>('');\n\n  return (\n    <SearchContextProvider>\n      <Box\n        sx={{\n          position: 'relative',\n          flexGrow: 1,\n          display: 'flex',\n          flexDirection: 'row',\n          justifyContent: 'start',\n          direction: 'ltr',\n        }}\n      >\n        <SearchBar query={{ term: searchTerm }} setSearchTerm={setSearchTerm} />\n      </Box>\n    </SearchContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAiB,EAAE,CAAA;AAEvD,EAAA,2CACG,qBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA,CAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,KAAA;AAAA,QACf,cAAgB,EAAA,OAAA;AAAA,QAChB,SAAW,EAAA;AAAA;AACb,KAAA;AAAA,wCAEC,SAAU,EAAA,EAAA,KAAA,EAAO,EAAE,IAAM,EAAA,UAAA,IAAc,aAA8B,EAAA;AAAA,GAE1E,CAAA;AAEJ;;;;"}

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

@@ -21,7 +21,6 @@ const SearchInput = ({
       startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, { style: { color: "#fff" } }))
     },
     sx: {
-      pt: "6px",
       input: { color: "#fff" },
       button: { color: "#fff" },
       "& fieldset": { border: "none" }

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.esm.js","sources":["../../../src/components/SearchComponent/SearchInput.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 TextField from '@mui/material/TextField';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport SearchIcon from '@mui/icons-material/Search';\n\ninterface SearchInputProps {\n  params: any;\n  error: boolean;\n  helperText: string;\n}\n\nexport const SearchInput = ({\n  params,\n  error,\n  helperText,\n}: SearchInputProps) => (\n  <TextField\n    {...params}\n    placeholder=\"Search...\"\n    variant=\"standard\"\n    error={error}\n    helperText={helperText}\n    InputProps={{\n      ...params.InputProps,\n      disableUnderline: true,\n      startAdornment: (\n        <InputAdornment position=\"start\">\n          <SearchIcon style={{ color: '#fff' }} />\n        </InputAdornment>\n      ),\n    }}\n    sx={{\n      pt: '6px',\n      input: { color: '#fff' },\n      button: { color: '#fff' },\n      '& fieldset': { border: 'none' },\n    }}\n  />\n);\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,cAAc,CAAC;AAAA,EAC1B,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CACE,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,SAAA;AAAA,EAAA;AAAA,IACE,GAAG,MAAA;AAAA,IACJ,WAAY,EAAA,WAAA;AAAA,IACZ,OAAQ,EAAA,UAAA;AAAA,IACR,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAY,EAAA;AAAA,MACV,GAAG,MAAO,CAAA,UAAA;AAAA,MACV,gBAAkB,EAAA,IAAA;AAAA,MAClB,cACE,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,OACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA,EAAG,CACxC;AAAA,KAEJ;AAAA,IACA,EAAI,EAAA;AAAA,MACF,EAAI,EAAA,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACvB,MAAA,EAAQ,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACxB,YAAA,EAAc,EAAE,MAAA,EAAQ,MAAO;AAAA;AACjC;AACF;;;;"}
+{"version":3,"file":"SearchInput.esm.js","sources":["../../../src/components/SearchComponent/SearchInput.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 TextField from '@mui/material/TextField';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport SearchIcon from '@mui/icons-material/Search';\n\ninterface SearchInputProps {\n  params: any;\n  error: boolean;\n  helperText: string;\n}\n\nexport const SearchInput = ({\n  params,\n  error,\n  helperText,\n}: SearchInputProps) => (\n  <TextField\n    {...params}\n    placeholder=\"Search...\"\n    variant=\"standard\"\n    error={error}\n    helperText={helperText}\n    InputProps={{\n      ...params.InputProps,\n      disableUnderline: true,\n      startAdornment: (\n        <InputAdornment position=\"start\">\n          <SearchIcon style={{ color: '#fff' }} />\n        </InputAdornment>\n      ),\n    }}\n    sx={{\n      input: { color: '#fff' },\n      button: { color: '#fff' },\n      '& fieldset': { border: 'none' },\n    }}\n  />\n);\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,cAAc,CAAC;AAAA,EAC1B,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CACE,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,SAAA;AAAA,EAAA;AAAA,IACE,GAAG,MAAA;AAAA,IACJ,WAAY,EAAA,WAAA;AAAA,IACZ,OAAQ,EAAA,UAAA;AAAA,IACR,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAY,EAAA;AAAA,MACV,GAAG,MAAO,CAAA,UAAA;AAAA,MACV,gBAAkB,EAAA,IAAA;AAAA,MAClB,cACE,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,OACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA,EAAG,CACxC;AAAA,KAEJ;AAAA,IACA,EAAI,EAAA;AAAA,MACF,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACvB,MAAA,EAAQ,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACxB,YAAA,EAAc,EAAE,MAAA,EAAQ,MAAO;AAAA;AACjC;AACF;;;;"}

package/dist/components/Spacer/Spacer.esm.js

@@ -1,12 +1,17 @@
 import React from 'react';
 
-const Spacer = ({ growFactor = 1, minWidth = 1 }) => {
+const Spacer = ({
+  growFactor = 1,
+  minWidth = 1,
+  layout
+}) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       style: {
         flexGrow: growFactor,
-        minWidth: typeof minWidth === "number" ? minWidth * 8 : minWidth
+        minWidth: typeof minWidth === "number" ? minWidth * 8 : minWidth,
+        ...layout
       }
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Spacer.esm.js","sources":["../../../src/components/Spacer/Spacer.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\n/**\n * @public\n */\nexport interface SpacerProps {\n  growFactor?: number;\n  minWidth?: number | string;\n}\n\n/**\n * @public\n */\nexport const Spacer = ({ growFactor = 1, minWidth = 1 }: SpacerProps) => {\n  return (\n    <div\n      style={{\n        flexGrow: growFactor,\n        minWidth: typeof minWidth === 'number' ? minWidth * 8 : minWidth,\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;AA6BO,MAAM,SAAS,CAAC,EAAE,aAAa,CAAG,EAAA,QAAA,GAAW,GAAqB,KAAA;AACvE,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA,OAAO,QAAa,KAAA,QAAA,GAAW,WAAW,CAAI,GAAA;AAAA;AAC1D;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"Spacer.esm.js","sources":["../../../src/components/Spacer/Spacer.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\n/**\n * @public\n */\nexport interface SpacerProps {\n  growFactor?: number;\n  minWidth?: number | string;\n  layout?: React.CSSProperties;\n}\n\n/**\n * @public\n */\nexport const Spacer = ({\n  growFactor = 1,\n  minWidth = 1,\n  layout,\n}: SpacerProps) => {\n  return (\n    <div\n      style={{\n        flexGrow: growFactor,\n        minWidth: typeof minWidth === 'number' ? minWidth * 8 : minWidth,\n        ...layout,\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;AA8BO,MAAM,SAAS,CAAC;AAAA,EACrB,UAAa,GAAA,CAAA;AAAA,EACb,QAAW,GAAA,CAAA;AAAA,EACX;AACF,CAAmB,KAAA;AACjB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA,OAAO,QAAa,KAAA,QAAA,GAAW,WAAW,CAAI,GAAA,QAAA;AAAA,QACxD,GAAG;AAAA;AACL;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useApiHolder, configApiRef } from '@backstage/core-plugin-api';
 import { Link as Link$1 } from '@backstage/core-components';
+import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import HelpIcon from '@mui/icons-material/HelpOutline';
@@ -11,7 +12,8 @@ const SupportButton = ({
   tooltip,
   color = "inherit",
   size = "small",
-  to
+  to,
+  layout
 }) => {
   const apiHolder = useApiHolder();
   const config = apiHolder.get(configApiRef);
@@ -19,17 +21,24 @@ const SupportButton = ({
   if (!supportUrl) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip ?? title }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    IconButton,
+  const isExternalLink = supportUrl.startsWith("http") || supportUrl.startsWith("https");
+  return /* @__PURE__ */ React.createElement(Box, { sx: layout }, /* @__PURE__ */ React.createElement(
+    Tooltip,
     {
-      component: Link,
-      color,
-      size,
-      to: supportUrl,
-      "aria-label": title
+      title: tooltip ?? `${title}${isExternalLink ? " (external link)" : ""}`
     },
-    /* @__PURE__ */ React.createElement(HelpIcon, { fontSize: size })
-  )));
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        component: Link,
+        color,
+        size,
+        to: supportUrl,
+        "aria-label": title
+      },
+      /* @__PURE__ */ React.createElement(HelpIcon, { fontSize: size })
+    ))
+  ));
 };
 
 export { SupportButton };

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 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}\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}: 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  return (\n    <Tooltip title={tooltip ?? title}>\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  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;AA6CA,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;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,2CACG,OAAQ,EAAA,EAAA,KAAA,EAAO,OAAW,IAAA,KAAA,EAAA,sCACxB,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,MACX,KAAA;AAAA,MACA,IAAA;AAAA,MACA,EAAI,EAAA,UAAA;AAAA,MACJ,YAAY,EAAA;AAAA,KAAA;AAAA,oBAEZ,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAU,IAAM,EAAA;AAAA,GAE9B,CACF,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,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;;;;"}

package/dist/defaultMountPoints/defaultMountPoints.esm.js

@@ -5,48 +5,66 @@ import { RegisterAComponentSection } from '../components/HeaderDropdownComponent
 import { SoftwareTemplatesSection } from '../components/HeaderDropdownComponent/SoftwareTemplatesSection.esm.js';
 import { SearchComponent } from '../components/SearchComponent/SearchComponent.esm.js';
 import { SupportButton } from '../components/SupportButton/SupportButton.esm.js';
-import { ComponentType } from '../types.esm.js';
 import { NotificationButton } from '../components/NotificationButton/NotificationButton.esm.js';
 import { Divider } from '../components/Divider/Divider.esm.js';
 import { MenuItemLink } from '../components/MenuItemLink/MenuItemLink.esm.js';
+import { Spacer } from '../components/Spacer/Spacer.esm.js';
 
 const defaultGlobalHeaderComponentsMountPoints = [
   {
     Component: SearchComponent,
     config: {
-      type: ComponentType.SEARCH,
-      priority: 1e3
+      priority: 100
       // the greater the number, the more to the left it will be
     }
   },
+  {
+    Component: Spacer,
+    config: {
+      priority: 99,
+      // the greater the number, the more to the left it will be
+      props: {
+        growFactor: 0
+      }
+    }
+  },
+  // Notice: 1.5 ships with a Create link instead of a dropdown!!!
   {
     Component: CreateDropdown,
     config: {
-      priority: 900
+      priority: 90,
+      layout: {
+        display: {
+          sm: "none",
+          md: "block"
+        },
+        mr: 1.5
+      }
+      // I don't used MUI v5 specific `sx` types here to allow us changing the implementation later
     }
   },
   {
     Component: SupportButton,
     config: {
-      priority: 800
+      priority: 80
     }
   },
   {
     Component: NotificationButton,
     config: {
-      priority: 700
+      priority: 70
     }
   },
   {
     Component: Divider,
     config: {
-      priority: 200
+      priority: 50
     }
   },
   {
     Component: ProfileDropdown,
     config: {
-      priority: 100
+      priority: 10
       // the greater the number, the more to the left it will be
     }
   }
@@ -55,14 +73,12 @@ const defaultCreateDropdownMountPoints = [
   {
     Component: SoftwareTemplatesSection,
     config: {
-      type: ComponentType.LIST,
       priority: 200
     }
   },
   {
     Component: RegisterAComponentSection,
     config: {
-      type: ComponentType.LINK,
       priority: 100
     }
   }
@@ -71,7 +87,6 @@ const defaultProfileDropdownMountPoints = [
   {
     Component: MenuItemLink,
     config: {
-      type: ComponentType.LINK,
       priority: 200,
       props: {
         title: "Settings",
@@ -83,7 +98,6 @@ const defaultProfileDropdownMountPoints = [
   {
     Component: LogoutButton,
     config: {
-      type: ComponentType.LOGOUT,
       priority: 100
     }
   }

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  ComponentType,\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';\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        type: ComponentType.SEARCH,\n        priority: 1000, // the greater the number, the more to the left it will be\n      },\n    },\n    {\n      Component: CreateDropdown,\n      config: {\n        priority: 900,\n      },\n    },\n    {\n      Component: SupportButton,\n      config: {\n        priority: 800,\n      },\n    },\n    {\n      Component: NotificationButton,\n      config: {\n        priority: 700,\n      },\n    },\n    {\n      Component: Divider,\n      config: {\n        priority: 200,\n      },\n    },\n    {\n      Component: ProfileDropdown,\n      config: {\n        priority: 100, // 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      type: ComponentType.LIST,\n      priority: 200,\n    },\n  },\n  {\n    Component: RegisterAComponentSection as React.ComponentType,\n    config: {\n      type: ComponentType.LINK,\n      priority: 100,\n    },\n  },\n];\n\nexport const defaultProfileDropdownMountPoints: ProfileDropdownMountPoint[] = [\n  {\n    Component: MenuItemLink as React.ComponentType,\n    config: {\n      type: ComponentType.LINK,\n      priority: 200,\n      props: {\n        title: 'Settings',\n        icon: 'manageAccounts',\n        link: '/settings',\n      },\n    },\n  },\n  {\n    Component: LogoutButton,\n    config: {\n      type: ComponentType.LOGOUT,\n      priority: 100,\n    },\n  },\n];\n"],"names":[],"mappings":";;;;;;;;;;;;AAqCO,MAAM,wCACX,GAAA;AAAA,EACE;AAAA,IACE,SAAW,EAAA,eAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,MAAM,aAAc,CAAA,MAAA;AAAA,MACpB,QAAU,EAAA;AAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,cAAA;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,MAAM,aAAc,CAAA,IAAA;AAAA,MACpB,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA;AAAA,IACE,SAAW,EAAA,yBAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,MAAM,aAAc,CAAA,IAAA;AAAA,MACpB,QAAU,EAAA;AAAA;AACZ;AAEJ;AAEO,MAAM,iCAAiE,GAAA;AAAA,EAC5E;AAAA,IACE,SAAW,EAAA,YAAA;AAAA,IACX,MAAQ,EAAA;AAAA,MACN,MAAM,aAAc,CAAA,IAAA;AAAA,MACpB,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,MAAM,aAAc,CAAA,MAAA;AAAA,MACpB,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  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';\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: 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":";;;;;;;;;;;;AAqCO,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,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;;;;"}

package/dist/hooks/useNotificationCount.esm.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useApiHolder, useApi, configApiRef } from '@backstage/core-plugin-api';
+import { useApiHolder } from '@backstage/core-plugin-api';
 import { notificationsApiRef } from '@backstage/plugin-notifications';
 import { useSignal } from '@backstage/plugin-signals-react';
 
@@ -8,17 +8,14 @@ const useNotificationCount = () => {
   const { lastSignal } = useSignal("notifications");
   const [available, setAvailable] = useState(false);
   const [unreadCount, setUnreadCount] = useState(0);
-  const config = useApi(configApiRef);
-  const frontendPackages = config.getOptionalConfig("dynamicPlugins.frontend")?.get() ?? {};
-  const displayNotifications = frontendPackages["backstage.plugin-notifications"]?.dynamicRoutes?.some(
-    ({ path }) => path === "/notifications"
-  ) ?? false;
   useEffect(() => {
     const notificationsApi = apiHolder.get(notificationsApiRef);
     if (!notificationsApi) {
       return;
     }
-    setAvailable(displayNotifications);
+    if (!available) {
+      setAvailable(true);
+    }
     const fetchUnreadCount = async () => {
       try {
         const { notifications } = await notificationsApi.getNotifications({

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

@@ -1 +1 @@
-{"version":3,"file":"useNotificationCount.esm.js","sources":["../../src/hooks/useNotificationCount.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 { useEffect, useState } from 'react';\nimport { configApiRef, useApi, useApiHolder } from '@backstage/core-plugin-api';\nimport { notificationsApiRef } from '@backstage/plugin-notifications';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { NotificationSignal } from '@backstage/plugin-notifications-common';\n\nexport const useNotificationCount = () => {\n  const apiHolder = useApiHolder();\n  const { lastSignal } = useSignal<NotificationSignal>('notifications');\n  const [available, setAvailable] = useState(false);\n  const [unreadCount, setUnreadCount] = useState(0);\n\n  const config = useApi(configApiRef);\n  const frontendPackages =\n    (config.getOptionalConfig('dynamicPlugins.frontend')?.get() as Record<\n      string,\n      any\n    >) ?? {};\n  const displayNotifications =\n    frontendPackages['backstage.plugin-notifications']?.dynamicRoutes?.some(\n      ({ path }: { path: string }) => path === '/notifications',\n    ) ?? false;\n\n  useEffect(() => {\n    const notificationsApi = apiHolder.get(notificationsApiRef);\n    if (!notificationsApi) {\n      return;\n    }\n\n    setAvailable(displayNotifications);\n\n    const fetchUnreadCount = async () => {\n      try {\n        const { notifications } = await notificationsApi.getNotifications({\n          read: false,\n        });\n        setUnreadCount(notifications.length);\n      } catch (error) {\n        // eslint-disable-next-line no-console\n        console.error('Failed to fetch unread notifications:', error);\n      }\n    };\n\n    fetchUnreadCount();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [apiHolder]);\n\n  useEffect(() => {\n    if (!lastSignal) return;\n\n    switch (lastSignal.action) {\n      case 'notification_read':\n        setUnreadCount(prev =>\n          Math.max(0, prev - lastSignal.notification_ids.length),\n        );\n        break;\n      case 'notification_unread':\n        setUnreadCount(prev => prev + lastSignal.notification_ids.length);\n        break;\n      case 'new_notification':\n        setUnreadCount(prev => prev + 1);\n        break;\n      default:\n        break;\n    }\n  }, [lastSignal]);\n\n  return { available, unreadCount };\n};\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAA8B,eAAe,CAAA;AACpE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAM,MAAA,MAAA,GAAS,OAAO,YAAY,CAAA;AAClC,EAAA,MAAM,mBACH,MAAO,CAAA,iBAAA,CAAkB,yBAAyB,CAAG,EAAA,GAAA,MAGhD,EAAC;AACT,EAAA,MAAM,oBACJ,GAAA,gBAAA,CAAiB,gCAAgC,CAAA,EAAG,aAAe,EAAA,IAAA;AAAA,IACjE,CAAC,EAAE,IAAK,EAAA,KAAwB,IAAS,KAAA;AAAA,GACtC,IAAA,KAAA;AAEP,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,gBAAA,GAAmB,SAAU,CAAA,GAAA,CAAI,mBAAmB,CAAA;AAC1D,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA;AAAA;AAGF,IAAA,YAAA,CAAa,oBAAoB,CAAA;AAEjC,IAAA,MAAM,mBAAmB,YAAY;AACnC,MAAI,IAAA;AACF,QAAA,MAAM,EAAE,aAAA,EAAkB,GAAA,MAAM,iBAAiB,gBAAiB,CAAA;AAAA,UAChE,IAAM,EAAA;AAAA,SACP,CAAA;AACD,QAAA,cAAA,CAAe,cAAc,MAAM,CAAA;AAAA,eAC5B,KAAO,EAAA;AAEd,QAAQ,OAAA,CAAA,KAAA,CAAM,yCAAyC,KAAK,CAAA;AAAA;AAC9D,KACF;AAEA,IAAiB,gBAAA,EAAA;AAAA,GAEnB,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,UAAY,EAAA;AAEjB,IAAA,QAAQ,WAAW,MAAQ;AAAA,MACzB,KAAK,mBAAA;AACH,QAAA,cAAA;AAAA,UAAe,UACb,IAAK,CAAA,GAAA,CAAI,GAAG,IAAO,GAAA,UAAA,CAAW,iBAAiB,MAAM;AAAA,SACvD;AACA,QAAA;AAAA,MACF,KAAK,qBAAA;AACH,QAAA,cAAA,CAAe,CAAQ,IAAA,KAAA,IAAA,GAAO,UAAW,CAAA,gBAAA,CAAiB,MAAM,CAAA;AAChE,QAAA;AAAA,MACF,KAAK,kBAAA;AACH,QAAe,cAAA,CAAA,CAAA,IAAA,KAAQ,OAAO,CAAC,CAAA;AAC/B,QAAA;AAEA;AACJ,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAO,OAAA,EAAE,WAAW,WAAY,EAAA;AAClC;;;;"}
+{"version":3,"file":"useNotificationCount.esm.js","sources":["../../src/hooks/useNotificationCount.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 { useEffect, useState } from 'react';\nimport { useApiHolder } from '@backstage/core-plugin-api';\nimport { notificationsApiRef } from '@backstage/plugin-notifications';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { NotificationSignal } from '@backstage/plugin-notifications-common';\n\nexport const useNotificationCount = () => {\n  const apiHolder = useApiHolder();\n  const { lastSignal } = useSignal<NotificationSignal>('notifications');\n  const [available, setAvailable] = useState(false);\n  const [unreadCount, setUnreadCount] = useState(0);\n\n  useEffect(() => {\n    const notificationsApi = apiHolder.get(notificationsApiRef);\n    if (!notificationsApi) {\n      return;\n    }\n    if (!available) {\n      setAvailable(true);\n    }\n\n    const fetchUnreadCount = async () => {\n      try {\n        const { notifications } = await notificationsApi.getNotifications({\n          read: false,\n        });\n        setUnreadCount(notifications.length);\n      } catch (error) {\n        // eslint-disable-next-line no-console\n        console.error('Failed to fetch unread notifications:', error);\n      }\n    };\n\n    fetchUnreadCount();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [apiHolder]);\n\n  useEffect(() => {\n    if (!lastSignal) return;\n\n    switch (lastSignal.action) {\n      case 'notification_read':\n        setUnreadCount(prev =>\n          Math.max(0, prev - lastSignal.notification_ids.length),\n        );\n        break;\n      case 'notification_unread':\n        setUnreadCount(prev => prev + lastSignal.notification_ids.length);\n        break;\n      case 'new_notification':\n        setUnreadCount(prev => prev + 1);\n        break;\n      default:\n        break;\n    }\n  }, [lastSignal]);\n\n  return { available, unreadCount };\n};\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAA8B,eAAe,CAAA;AACpE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,gBAAA,GAAmB,SAAU,CAAA,GAAA,CAAI,mBAAmB,CAAA;AAC1D,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA;AAAA;AAEF,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,YAAA,CAAa,IAAI,CAAA;AAAA;AAGnB,IAAA,MAAM,mBAAmB,YAAY;AACnC,MAAI,IAAA;AACF,QAAA,MAAM,EAAE,aAAA,EAAkB,GAAA,MAAM,iBAAiB,gBAAiB,CAAA;AAAA,UAChE,IAAM,EAAA;AAAA,SACP,CAAA;AACD,QAAA,cAAA,CAAe,cAAc,MAAM,CAAA;AAAA,eAC5B,KAAO,EAAA;AAEd,QAAQ,OAAA,CAAA,KAAA,CAAM,yCAAyC,KAAK,CAAA;AAAA;AAC9D,KACF;AAEA,IAAiB,gBAAA,EAAA;AAAA,GAEnB,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,UAAY,EAAA;AAEjB,IAAA,QAAQ,WAAW,MAAQ;AAAA,MACzB,KAAK,mBAAA;AACH,QAAA,cAAA;AAAA,UAAe,UACb,IAAK,CAAA,GAAA,CAAI,GAAG,IAAO,GAAA,UAAA,CAAW,iBAAiB,MAAM;AAAA,SACvD;AACA,QAAA;AAAA,MACF,KAAK,qBAAA;AACH,QAAA,cAAA,CAAe,CAAQ,IAAA,KAAA,IAAA,GAAO,UAAW,CAAA,gBAAA,CAAiB,MAAM,CAAA;AAChE,QAAA;AAAA,MACF,KAAK,kBAAA;AACH,QAAe,cAAA,CAAA,CAAA,IAAA,KAAQ,OAAO,CAAC,CAAA;AAC/B,QAAA;AAEA;AACJ,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAO,OAAA,EAAE,WAAW,WAAY,EAAA;AAClC;;;;"}