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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 1.0.1
+
+### Patch Changes
+
+- 835ad2c: fix global-header to prioritize 'spec.profile.displayname' or 'metadata.title' over profilename
+
+## 1.0.0
+
+### Major Changes
+
+- 005fa36: Release 1.0.0
+
 ## 0.2.0
 
 ### Minor Changes

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

@@ -1,19 +1,26 @@
 import React, { useState, useRef, useEffect, useMemo } from 'react';
-import { useApi, identityApiRef } from '@backstage/core-plugin-api';
+import { useUserProfile } from '@backstage/plugin-user-settings';
+import { useApi } from '@backstage/core-plugin-api';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
 import Typography from '@mui/material/Typography';
 import { lighten } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { MenuSection } from './MenuSection.esm.js';
 import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
 import { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints.esm.js';
-import { MenuSection } from './MenuSection.esm.js';
 import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
-import Box from '@mui/material/Box';
 
 const ProfileDropdown = ({ layout }) => {
   const { anchorEl, handleOpen, handleClose } = useDropdownManager();
-  const identityApi = useApi(identityApiRef);
   const [user, setUser] = useState();
+  const {
+    displayName,
+    backstageIdentity,
+    loading: profileLoading
+  } = useUserProfile();
+  const catalogApi = useApi(catalogApiRef);
   const profileDropdownMountPoints = useProfileDropdownMountPoints();
   const headerRef = useRef(null);
   const [bgColor, setBgColor] = useState("#3C3F42");
@@ -33,12 +40,23 @@ const ProfileDropdown = ({ layout }) => {
     }
   }, []);
   useEffect(() => {
-    const fetchUser = async () => {
-      const userProfile = await identityApi.getProfileInfo();
-      setUser(userProfile);
+    const fetchUserEntity = async () => {
+      let userProfile;
+      try {
+        if (backstageIdentity?.userEntityRef) {
+          userProfile = await catalogApi.getEntityByRef(
+            backstageIdentity.userEntityRef
+          );
+        }
+        setUser(
+          userProfile?.spec?.profile?.displayName ?? userProfile?.metadata?.title
+        );
+      } catch (_err) {
+        setUser(null);
+      }
     };
-    fetchUser();
-  }, [identityApi]);
+    fetchUserEntity();
+  }, [backstageIdentity, catalogApi]);
   const menuItems = useMemo(() => {
     return (profileDropdownMountPoints ?? []).map((mp) => ({
       Component: mp.Component,
@@ -51,10 +69,18 @@ const ProfileDropdown = ({ layout }) => {
   if (menuItems.length === 0) {
     return null;
   }
+  const profileDisplayName = () => {
+    const name = user ?? displayName;
+    const regex = /^[^:/]+:[^/]+\/[^/]+$/;
+    if (regex.test(name)) {
+      return name.charAt(name.indexOf("/") + 1).toLocaleUpperCase("en-US").concat(name.substring(name.indexOf("/") + 2));
+    }
+    return name;
+  };
   return /* @__PURE__ */ React.createElement(
     HeaderDropdownComponent,
     {
-      buttonContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...layout } }, /* @__PURE__ */ React.createElement(AccountCircleOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }), /* @__PURE__ */ React.createElement(
+      buttonContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...layout } }, !profileLoading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AccountCircleOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }), /* @__PURE__ */ React.createElement(
         Typography,
         {
           variant: "body2",
@@ -64,8 +90,8 @@ const ProfileDropdown = ({ layout }) => {
             mr: "1rem"
           }
         },
-        user?.displayName ?? "Guest"
-      ), /* @__PURE__ */ React.createElement(
+        profileDisplayName()
+      )), /* @__PURE__ */ React.createElement(
         KeyboardArrowDownOutlinedIcon,
         {
           sx: {

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

@@ -1 +1 @@
-{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  identityApiRef,\n  useApi,\n  ProfileInfo,\n} from '@backstage/core-plugin-api';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { MenuSection } from './MenuSection';\nimport { useDropdownManager } from '../../hooks';\nimport Box from '@mui/material/Box';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n  layout?: React.CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const identityApi = useApi(identityApiRef);\n  const [user, setUser] = useState<ProfileInfo>();\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  const headerRef = useRef<HTMLElement | null>(null);\n  const [bgColor, setBgColor] = useState('#3C3F42');\n\n  useEffect(() => {\n    if (headerRef.current) {\n      const computedStyle = window.getComputedStyle(headerRef.current);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const container = document.getElementById('global-header');\n    if (container) {\n      const computedStyle = window.getComputedStyle(container);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const fetchUser = async () => {\n      const userProfile = await identityApi.getProfileInfo();\n      setUser(userProfile);\n    };\n\n    fetchUser();\n  }, [identityApi]);\n\n  const menuItems = useMemo(() => {\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component,\n        icon: mp.config?.props?.icon ?? '',\n        label: mp.config?.props?.title ?? '',\n        link: mp.config?.props?.link ?? '',\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n          <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mr: 1 }} />\n          <Typography\n            variant=\"body2\"\n            sx={{\n              display: { xs: 'none', md: 'block' },\n              fontWeight: 500,\n              mr: '1rem',\n            }}\n          >\n            {user?.displayName ?? 'Guest'}\n          </Typography>\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              bgcolor: bgColor,\n              borderRadius: '25%',\n            }}\n          />\n        </Box>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { UserEntity } from '@backstage/catalog-model';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\n\nimport { MenuSection } from './MenuSection';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n  layout?: React.CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const [user, setUser] = useState<string | null>();\n  const {\n    displayName,\n    backstageIdentity,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  const headerRef = useRef<HTMLElement | null>(null);\n  const [bgColor, setBgColor] = useState('#3C3F42');\n\n  useEffect(() => {\n    if (headerRef.current) {\n      const computedStyle = window.getComputedStyle(headerRef.current);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const container = document.getElementById('global-header');\n    if (container) {\n      const computedStyle = window.getComputedStyle(container);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      let userProfile;\n      try {\n        if (backstageIdentity?.userEntityRef) {\n          userProfile = (await catalogApi.getEntityByRef(\n            backstageIdentity.userEntityRef,\n          )) as unknown as UserEntity;\n        }\n        setUser(\n          userProfile?.spec?.profile?.displayName ??\n            userProfile?.metadata?.title,\n        );\n      } catch (_err) {\n        setUser(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const menuItems = useMemo(() => {\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component,\n        icon: mp.config?.props?.icon ?? '',\n        label: mp.config?.props?.title ?? '',\n        link: mp.config?.props?.link ?? '',\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\n\n  const profileDisplayName = () => {\n    const name = user ?? displayName;\n    const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n    if (regex.test(name)) {\n      return name\n        .charAt(name.indexOf('/') + 1)\n        .toLocaleUpperCase('en-US')\n        .concat(name.substring(name.indexOf('/') + 2));\n    }\n    return name;\n  };\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n          {!profileLoading && (\n            <>\n              <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mr: 1 }} />\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: { xs: 'none', md: 'block' },\n                  fontWeight: 500,\n                  mr: '1rem',\n                }}\n              >\n                {profileDisplayName()}\n              </Typography>\n            </>\n          )}\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              bgcolor: bgColor,\n              borderRadius: '25%',\n            }}\n          />\n        </Box>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/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":"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"}

package/dist/index.d.ts

@@ -13,10 +13,11 @@ interface NotificationBannerProps {
     id?: string;
     title: string;
     markdown?: boolean;
+    icon?: string;
     textColor?: string;
     backgroundColor?: string;
-    border?: string;
-    borderRadius?: string;
+    borderColor?: string;
+    layout?: React$1.CSSProperties;
     dismiss?: NotificationBannerDismiss;
 }
 

package/dist/plugin.esm.js

@@ -7,6 +7,8 @@ import '@mui/material/styles';
 import '@mui/icons-material/ArrowDropDownOutlined';
 import '@scalprum/react-core';
 import './components/HeaderDropdownComponent/HeaderDropdownComponent.esm.js';
+import '@backstage/plugin-user-settings';
+import '@backstage/plugin-catalog-react';
 import '@mui/icons-material/AccountCircleOutlined';
 import '@mui/icons-material/KeyboardArrowDownOutlined';
 import '@mui/material/Divider';
@@ -14,7 +16,6 @@ import '@mui/material/MenuItem';
 import '@backstage/core-components';
 import '@mui/material/Tooltip';
 import 'react-router-dom';
-import '@backstage/plugin-catalog-react';
 import '@backstage/plugin-search-react';
 import '@mui/material/Autocomplete';
 import '@mui/material/TextField';

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"],"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"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/backstage-plugin-global-header",
-  "version": "0.2.0",
+  "version": "1.0.1",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -47,13 +47,12 @@
     "@backstage/plugin-search-common": "^1.2.17",
     "@backstage/plugin-search-react": "^1.8.5",
     "@backstage/plugin-signals-react": "^0.0.9",
+    "@backstage/plugin-user-settings": "^0.8.18",
     "@backstage/theme": "^0.6.3",
     "@mui/icons-material": "5.16.13",
     "@mui/material": "5.16.13",
     "@mui/styled-engine": "5.16.13",
     "@scalprum/react-core": "0.9.3",
-    "react-dom": "18.3.1",
-    "react-router-dom": "^6.26.2",
     "react-use": "^17.5.0"
   },
   "peerDependencies": {
@@ -77,7 +76,7 @@
     "react-router-dom": "^6.0.0"
   },
   "keywords": [
-    "support:tech-preview",
+    "support:production",
     "lifecycle:active",
     "backstage",
     "plugin"