@red-hat-developer-hub/backstage-plugin-global-header 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 0.0.3
+
+### Patch Changes
+
+- 4959ebb: add new notificationbanner component
+
+## 0.0.2
+
+### Patch Changes
+
+- 08db379: Updated dependencies version to match rhdh, and fixed some UI issues
+
 ## 0.0.1
 
 ### Patch Changes

package/app-config.dynamic.yaml

@@ -0,0 +1,10 @@
+# please keep this in sync with rhdh/dynamic-plugins.default.yaml
+dynamicPlugins:
+  frontend:
+    red-hat-developer-hub.backstage-plugin-global-header:
+      mountPoints:
+        - mountPoint: application/header
+          importName: GlobalHeader
+          config:
+            layout:
+              position: above-main-content

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

@@ -26,14 +26,7 @@ const MenuSection = ({
       "&:hover": { background: "transparent" }
     }
   },
-  /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "body2",
-      sx: { ml: 2, fontSize: "0.875em", color: "text.disabled" }
-    },
-    sectionLabel
-  ),
+  /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { pl: 2, color: "text.disabled" } }, sectionLabel),
   /* @__PURE__ */ React.createElement(
     MenuItem,
     {

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

@@ -1 +1 @@
-{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { SvgIconProps } from '@mui/material/SvgIcon';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport MenuItemContent from './MenuItemContent';\n\nexport interface MenuItemBase {\n  itemKey: string;\n  icon?: React.ElementType<SvgIconProps>;\n  label: string;\n  subLabel?: string;\n}\n\nexport interface MenuItemLink extends MenuItemBase {\n  link: string;\n  onClick?: never;\n}\n\nexport interface MenuItemAction extends MenuItemBase {\n  onClick: () => void;\n  link?: never;\n}\n\nexport type MenuItemConfig = MenuItemLink | MenuItemAction;\n\nexport interface MenuSectionConfig {\n  sectionKey: string;\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nconst MenuSection: React.FC<MenuSectionConfig> = ({\n  sectionKey,\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => (\n  <Box>\n    {sectionLabel && sectionKey && (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mx: 0,\n          mt: '0.5rem',\n          '&:hover': { background: 'transparent' },\n        }}\n      >\n        <Typography\n          variant=\"body2\"\n          sx={{ ml: 2, fontSize: '0.875em', color: 'text.disabled' }}\n        >\n          {sectionLabel}\n        </Typography>\n        <MenuItem\n          sx={{\n            '&:hover': { background: 'transparent' },\n          }}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n        >\n          {optionalLink && optionalLinkLabel && (\n            <Link\n              to={optionalLink}\n              underline=\"none\"\n              style={{ fontSize: '0.875em' }}\n            >\n              {optionalLinkLabel}\n            </Link>\n          )}\n        </MenuItem>\n      </Box>\n    )}\n    <ul style={{ padding: 0, listStyle: 'none' }}>\n      {items.map(({ itemKey, icon: Icon, label, subLabel, link, onClick }) => (\n        <MenuItem\n          key={`menu-item-${itemKey}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5, '&:hover': { background: 'transparent' } }}\n        >\n          {link ? (\n            <Link\n              to={link}\n              style={{\n                color: 'inherit',\n                textDecoration: 'none',\n                width: '100%',\n              }}\n            >\n              <MenuItemContent Icon={Icon} label={label} subLabel={subLabel} />\n            </Link>\n          ) : (\n            <Box\n              onClick={onClick}\n              sx={{ cursor: 'pointer', width: '100%', color: 'inherit' }}\n            >\n              <MenuItemContent Icon={Icon} label={label} subLabel={subLabel} />\n            </Box>\n          )}\n        </MenuItem>\n      ))}\n    </ul>\n    {!hideDivider && <Divider sx={{ margin: '8px 0' }} />}\n  </Box>\n);\n\nexport default MenuSection;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { SvgIconProps } from '@mui/material/SvgIcon';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport MenuItemContent from './MenuItemContent';\n\nexport interface MenuItemBase {\n  itemKey: string;\n  icon?: React.ElementType<SvgIconProps>;\n  label: string;\n  subLabel?: string;\n}\n\nexport interface MenuItemLink extends MenuItemBase {\n  link: string;\n  onClick?: never;\n}\n\nexport interface MenuItemAction extends MenuItemBase {\n  onClick: () => void;\n  link?: never;\n}\n\nexport type MenuItemConfig = MenuItemLink | MenuItemAction;\n\nexport interface MenuSectionConfig {\n  sectionKey: string;\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nconst MenuSection: React.FC<MenuSectionConfig> = ({\n  sectionKey,\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => (\n  <Box>\n    {sectionLabel && sectionKey && (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mx: 0,\n          mt: '0.5rem',\n          '&:hover': { background: 'transparent' },\n        }}\n      >\n        <Typography variant=\"body2\" sx={{ pl: 2, color: 'text.disabled' }}>\n          {sectionLabel}\n        </Typography>\n        <MenuItem\n          sx={{\n            '&:hover': { background: 'transparent' },\n          }}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n        >\n          {optionalLink && optionalLinkLabel && (\n            <Link\n              to={optionalLink}\n              underline=\"none\"\n              style={{ fontSize: '0.875em' }}\n            >\n              {optionalLinkLabel}\n            </Link>\n          )}\n        </MenuItem>\n      </Box>\n    )}\n    <ul style={{ padding: 0, listStyle: 'none' }}>\n      {items.map(({ itemKey, icon: Icon, label, subLabel, link, onClick }) => (\n        <MenuItem\n          key={`menu-item-${itemKey}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5, '&:hover': { background: 'transparent' } }}\n        >\n          {link ? (\n            <Link\n              to={link}\n              style={{\n                color: 'inherit',\n                textDecoration: 'none',\n                width: '100%',\n              }}\n            >\n              <MenuItemContent Icon={Icon} label={label} subLabel={subLabel} />\n            </Link>\n          ) : (\n            <Box\n              onClick={onClick}\n              sx={{ cursor: 'pointer', width: '100%', color: 'inherit' }}\n            >\n              <MenuItemContent Icon={Icon} label={label} subLabel={subLabel} />\n            </Box>\n          )}\n        </MenuItem>\n      ))}\n    </ul>\n    {!hideDivider && <Divider sx={{ margin: '8px 0' }} />}\n  </Box>\n);\n\nexport default MenuSection;\n"],"names":[],"mappings":"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"}

package/dist/components/NotificationBanner.esm.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import Alert from '@mui/material/Alert';
+import { MarkdownContent } from '@backstage/core-components';
+
+const NotificationBanner = (props) => {
+  const [dismissed, setDismissed] = React.useState(() => {
+    if (props.dismiss === "localstorage") {
+      try {
+        const dismissedString = localStorage.getItem("global-header/NotificationBanner") ?? "{}";
+        const dismissedObject = JSON.parse(dismissedString);
+        return dismissedObject[props.id ?? props.title] === "dismissed";
+      } catch (error) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  });
+  const onClose = React.useMemo(() => {
+    if (!props.dismiss || props.dismiss === "none") {
+      return void 0;
+    } else if (props.dismiss === "session") {
+      return () => setDismissed(true);
+    } else if (props.dismiss === "localstorage") {
+      return () => {
+        try {
+          const dismissedString = localStorage.getItem("global-header/NotificationBanner") ?? "{}";
+          const dismissedObject = JSON.parse(dismissedString);
+          dismissedObject[props.id ?? props.title] = "dismissed";
+          localStorage.setItem(
+            "global-header/NotificationBanner",
+            JSON.stringify(dismissedObject)
+          );
+        } catch (error) {
+        }
+        setDismissed(true);
+      };
+    }
+    console.warn(
+      `Unsupported dismiss option "${props.dismiss}", currently supported "none", "session" or "localstorage"!`
+    );
+    return void 0;
+  }, [props.id, props.title, props.dismiss]);
+  if (dismissed || !props.title) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      icon: false,
+      onClose,
+      sx: {
+        color: props.textColor ?? "text.primary",
+        backgroundColor: props.backgroundColor ?? "background.paper",
+        border: props.border,
+        borderRadius: props.borderRadius,
+        justifyContent: "center",
+        textAlign: "center"
+      }
+    },
+    props.markdown ? /* @__PURE__ */ React.createElement(MarkdownContent, { content: props.title, dialect: "gfm" }) : props.title
+  );
+};
+
+export { NotificationBanner };
+//# sourceMappingURL=NotificationBanner.esm.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -23,7 +23,8 @@ const SearchInput = ({
     sx: {
       pt: "6px",
       input: { color: "#fff" },
-      button: { 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    }}\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;AAAA;AAC1B;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      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;;;;"}

package/dist/index.d.ts

@@ -4,13 +4,39 @@ import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 
 /**
  * @public
+ */
+type NotificationBannerDismiss = 'none' | 'session' | 'localstorage';
+/**
+ * @public
+ */
+interface NotificationBannerProps {
+    id?: string;
+    title: string;
+    markdown?: boolean;
+    textColor?: string;
+    backgroundColor?: string;
+    border?: string;
+    borderRadius?: string;
+    dismiss?: NotificationBannerDismiss;
+}
+
+/**
  * Global Header Plugin
+ *
+ * @public
  */
 declare const globalHeaderPlugin: _backstage_core_plugin_api.BackstagePlugin<{}, {}, {}>;
 /**
- * @public
  * Global Header
+ *
+ * @public
  */
 declare const GlobalHeader: () => react.JSX.Element;
+/**
+ * NotificationBanner
+ *
+ * @public
+ */
+declare const NotificationBanner: (props: NotificationBannerProps) => react.JSX.Element | null;
 
-export { GlobalHeader, globalHeaderPlugin };
+export { GlobalHeader, NotificationBanner, type NotificationBannerDismiss, type NotificationBannerProps, globalHeaderPlugin };

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { unstable_ClassNameGenerator } from '@mui/material/className';
-export { GlobalHeader, globalHeaderPlugin } from './plugin.esm.js';
+export { GlobalHeader, NotificationBanner, globalHeaderPlugin } from './plugin.esm.js';
 
 unstable_ClassNameGenerator.configure((componentName) => {
   return componentName.startsWith("v5-") ? componentName : `v5-${componentName}`;

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/index.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 */\nimport { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';\n\nClassNameGenerator.configure(componentName => {\n  return componentName.startsWith('v5-')\n    ? componentName\n    : `v5-${componentName}`;\n});\n\nexport { globalHeaderPlugin, GlobalHeader } from './plugin';\n"],"names":["ClassNameGenerator"],"mappings":";;;AAiBAA,2BAAA,CAAmB,UAAU,CAAiB,aAAA,KAAA;AAC5C,EAAA,OAAO,cAAc,UAAW,CAAA,KAAK,CACjC,GAAA,aAAA,GACA,MAAM,aAAa,CAAA,CAAA;AACzB,CAAC,CAAA"}
+{"version":3,"file":"index.esm.js","sources":["../src/index.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 */\nimport { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';\n\nClassNameGenerator.configure(componentName => {\n  return componentName.startsWith('v5-')\n    ? componentName\n    : `v5-${componentName}`;\n});\n\nexport * from './plugin';\n"],"names":["ClassNameGenerator"],"mappings":";;;AAiBAA,2BAAA,CAAmB,UAAU,CAAiB,aAAA,KAAA;AAC5C,EAAA,OAAO,cAAc,UAAW,CAAA,KAAK,CACjC,GAAA,aAAA,GACA,MAAM,aAAa,CAAA,CAAA;AACzB,CAAC,CAAA"}

package/dist/plugin.esm.js

@@ -11,6 +11,16 @@ const GlobalHeader = globalHeaderPlugin.provide(
     }
   })
 );
+const NotificationBanner = globalHeaderPlugin.provide(
+  createComponentExtension({
+    name: "NotificationBanner",
+    component: {
+      lazy: () => import('./components/NotificationBanner.esm.js').then(
+        (m) => m.NotificationBanner
+      )
+    }
+  })
+);
 
-export { GlobalHeader, globalHeaderPlugin };
+export { GlobalHeader, NotificationBanner, globalHeaderPlugin };
 //# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createPlugin,\n  createComponentExtension,\n} from '@backstage/core-plugin-api';\n\n/**\n * @public\n * Global Header Plugin\n */\nexport const globalHeaderPlugin = createPlugin({\n  id: 'global-header',\n});\n\n/**\n * @public\n * Global Header\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"],"names":[],"mappings":";;AAyBO,MAAM,qBAAqB,YAAa,CAAA;AAAA,EAC7C,EAAI,EAAA;AACN,CAAC;AAMM,MAAM,eAAe,kBAAmB,CAAA,OAAA;AAAA,EAC7C,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,cAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MAAM,OAAO,kCAA2B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,YAAY;AAAA;AAC1E,GACD;AACH;;;;"}
+{"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 {\n  createPlugin,\n  createComponentExtension,\n} from '@backstage/core-plugin-api';\n\nexport type {\n  NotificationBannerProps,\n  NotificationBannerDismiss,\n} from './components/NotificationBanner';\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 * 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":";;AA+BO,MAAM,qBAAqB,YAAa,CAAA;AAAA,EAC7C,EAAI,EAAA;AACN,CAAC;AAOM,MAAM,eAAe,kBAAmB,CAAA,OAAA;AAAA,EAC7C,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,cAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MAAM,OAAO,kCAA2B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,YAAY;AAAA;AAC1E,GACD;AACH;AAOO,MAAM,qBAAqB,kBAAmB,CAAA,OAAA;AAAA,EACnD,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,oBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,wCAAiC,CAAE,CAAA,IAAA;AAAA,QACxC,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/backstage-plugin-global-header",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -33,29 +33,24 @@
     "postpack": "backstage-cli package postpack"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.16.1",
-    "@backstage/core-plugin-api": "^1.10.1",
-    "@backstage/plugin-search": "1.4.21",
-    "@backstage/plugin-search-backend": "^1.8.0",
-    "@backstage/plugin-search-backend-module-catalog": "^0.2.6",
-    "@backstage/plugin-search-backend-module-pg": "^0.5.39",
-    "@backstage/plugin-search-backend-module-techdocs": "^0.3.4",
-    "@backstage/plugin-search-common": "^1.2.16",
-    "@backstage/plugin-search-react": "1.8.4",
-    "@backstage/theme": "^0.6.2",
+    "@backstage/core-components": "^0.15.1",
+    "@backstage/core-plugin-api": "^1.10.0",
+    "@backstage/plugin-search": "1.4.18",
+    "@backstage/plugin-search-backend": "1.6.1",
+    "@backstage/plugin-search-backend-module-catalog": "^0.2.4",
+    "@backstage/plugin-search-backend-module-pg": "0.5.37",
+    "@backstage/plugin-search-backend-module-techdocs": "^0.3.1",
+    "@backstage/plugin-search-common": "^1.2.15",
+    "@backstage/plugin-search-react": "^1.8.1",
+    "@backstage/theme": "^0.6.0",
     "@mui/icons-material": "5.16.13",
     "@mui/material": "5.16.13",
     "@mui/styled-engine": "5.16.13",
-    "react-dom": "16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.3.0",
-    "react-use": "^17.2.4"
+    "react-dom": "18.3.1",
+    "react-router-dom": "^6.26.2",
+    "react-use": "^17.5.0"
   },
   "peerDependencies": {
-    "@backstage/core-components": "0.15.1",
-    "@backstage/core-plugin-api": "^1.10.0",
-    "@backstage/plugin-search": "1.4.18",
-    "@backstage/plugin-search-react": "1.8.1",
-    "@backstage/theme": "0.6.0",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.0.0"
   },
@@ -73,6 +68,7 @@
     "react-router-dom": "^6.0.0"
   },
   "files": [
+    "app-config.dynamic.yaml",
     "dist"
   ],
   "typesVersions": {