@backstage/plugin-notifications 0.2.0-next.1 → 0.2.1-next.0

package/dist/components/NotificationsTable/BulkActions.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkActions.esm.js","sources":["../../../src/components/NotificationsTable/BulkActions.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { Notification } from '@backstage/plugin-notifications-common';\nimport Grid from '@material-ui/core/Grid';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport MarkAsUnreadIcon from '@material-ui/icons/Markunread' /* TODO: use Drafts and MarkAsUnread once we have mui 5 icons */;\nimport MarkAsReadIcon from '@material-ui/icons/CheckCircle';\nimport MarkAsUnsavedIcon from '@material-ui/icons/LabelOff' /* TODO: use BookmarkRemove and BookmarkAdd once we have mui 5 icons */;\nimport MarkAsSavedIcon from '@material-ui/icons/Label';\n\nexport const BulkActions = ({\n  selectedNotifications,\n  notifications,\n  onSwitchReadStatus,\n  onSwitchSavedStatus,\n}: {\n  selectedNotifications: Set<Notification['id']>;\n  notifications: Notification[];\n  onSwitchReadStatus: (ids: Notification['id'][], newStatus: boolean) => void;\n  onSwitchSavedStatus: (ids: Notification['id'][], newStatus: boolean) => void;\n}) => {\n  const isDisabled = selectedNotifications.size === 0;\n  const bulkNotifications = notifications.filter(notification =>\n    selectedNotifications.has(notification.id),\n  );\n\n  const isOneRead = !!bulkNotifications.find(\n    (notification: Notification) => !!notification.read,\n  );\n  const isOneSaved = !!bulkNotifications.find(\n    (notification: Notification) => !!notification.saved,\n  );\n\n  const markAsReadText = isOneRead\n    ? 'Return selected among unread'\n    : 'Mark selected as read';\n  const IconComponent = isOneRead ? MarkAsUnreadIcon : MarkAsReadIcon;\n\n  const markAsSavedText = isOneSaved\n    ? 'Undo save for selected'\n    : 'Save selected for later';\n  const SavedIconComponent = isOneSaved ? MarkAsUnsavedIcon : MarkAsSavedIcon;\n\n  return (\n    <Grid container wrap=\"nowrap\">\n      <Grid item>\n        <Tooltip title={markAsSavedText}>\n          <div>\n            {/* The <div> here is a workaround for the Tooltip which does not work for a \"disabled\" child */}\n            <IconButton\n              disabled={isDisabled}\n              onClick={() => {\n                onSwitchSavedStatus([...selectedNotifications], !isOneSaved);\n              }}\n            >\n              <SavedIconComponent aria-label={markAsSavedText} />\n            </IconButton>\n          </div>\n        </Tooltip>\n      </Grid>\n\n      <Grid item>\n        <Tooltip title={markAsReadText}>\n          <div>\n            <IconButton\n              disabled={isDisabled}\n              onClick={() => {\n                onSwitchReadStatus([...selectedNotifications], !isOneRead);\n              }}\n            >\n              <IconComponent aria-label={markAsReadText} />\n            </IconButton>\n          </div>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBO,MAAM,cAAc,CAAC;AAAA,EAC1B,qBAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,mBAAA;AACF,CAKM,KAAA;AACJ,EAAM,MAAA,UAAA,GAAa,sBAAsB,IAAS,KAAA,CAAA,CAAA;AAClD,EAAA,MAAM,oBAAoB,aAAc,CAAA,MAAA;AAAA,IAAO,CAC7C,YAAA,KAAA,qBAAA,CAAsB,GAAI,CAAA,YAAA,CAAa,EAAE,CAAA;AAAA,GAC3C,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,CAAC,CAAC,iBAAkB,CAAA,IAAA;AAAA,IACpC,CAAC,YAAA,KAA+B,CAAC,CAAC,YAAa,CAAA,IAAA;AAAA,GACjD,CAAA;AACA,EAAM,MAAA,UAAA,GAAa,CAAC,CAAC,iBAAkB,CAAA,IAAA;AAAA,IACrC,CAAC,YAAA,KAA+B,CAAC,CAAC,YAAa,CAAA,KAAA;AAAA,GACjD,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiB,YACnB,8BACA,GAAA,uBAAA,CAAA;AACJ,EAAM,MAAA,aAAA,GAAgB,YAAY,gBAAmB,GAAA,cAAA,CAAA;AAErD,EAAM,MAAA,eAAA,GAAkB,aACpB,wBACA,GAAA,yBAAA,CAAA;AACJ,EAAM,MAAA,kBAAA,GAAqB,aAAa,iBAAoB,GAAA,eAAA,CAAA;AAE5D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,MAAK,QACnB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,wBACP,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,eAAA,EAAA,sCACb,KAEC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,UAAA;AAAA,MACV,SAAS,MAAM;AACb,QAAA,mBAAA,CAAoB,CAAC,GAAG,qBAAqB,CAAA,EAAG,CAAC,UAAU,CAAA,CAAA;AAAA,OAC7D;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,kBAAmB,EAAA,EAAA,YAAA,EAAY,eAAiB,EAAA,CAAA;AAAA,GAErD,CACF,CACF,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAA,kBACP,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,cAAA,EAAA,sCACb,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,UAAA;AAAA,MACV,SAAS,MAAM;AACb,QAAA,kBAAA,CAAmB,CAAC,GAAG,qBAAqB,CAAA,EAAG,CAAC,SAAS,CAAA,CAAA;AAAA,OAC3D;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,YAAA,EAAY,cAAgB,EAAA,CAAA;AAAA,GAE/C,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/NotificationsTable/NotificationsTable.esm.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import throttle from 'lodash/throttle';
+import RelativeTime from 'react-relative-time';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Checkbox from '@material-ui/core/Checkbox';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import { notificationsApiRef } from '../../api/NotificationsApi.esm.js';
+import '@backstage/errors';
+import { useApi } from '@backstage/core-plugin-api';
+import { Link, Table } from '@backstage/core-components';
+import { SeverityIcon } from './SeverityIcon.esm.js';
+import { SelectAll } from './SelectAll.esm.js';
+import { BulkActions } from './BulkActions.esm.js';
+
+const ThrottleDelayMs = 1e3;
+const useStyles = makeStyles({
+  description: {
+    maxHeight: "5rem",
+    overflow: "scroll"
+  },
+  severityItem: {
+    alignContent: "center"
+  }
+});
+const NotificationsTable = ({
+  isLoading,
+  notifications = [],
+  onUpdate,
+  setContainsText,
+  onPageChange,
+  onRowsPerPageChange,
+  page,
+  pageSize,
+  totalCount
+}) => {
+  const classes = useStyles();
+  const notificationsApi = useApi(notificationsApiRef);
+  const [selectedNotifications, setSelectedNotifications] = React.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const onNotificationsSelectChange = React.useCallback(
+    (ids, checked) => {
+      let newSelect;
+      if (checked) {
+        newSelect = /* @__PURE__ */ new Set([...selectedNotifications, ...ids]);
+      } else {
+        newSelect = new Set(selectedNotifications);
+        ids.forEach((id) => newSelect.delete(id));
+      }
+      setSelectedNotifications(newSelect);
+    },
+    [selectedNotifications, setSelectedNotifications]
+  );
+  const onSwitchReadStatus = React.useCallback(
+    (ids, newStatus) => {
+      notificationsApi.updateNotifications({
+        ids,
+        read: newStatus
+      }).then(onUpdate);
+    },
+    [notificationsApi, onUpdate]
+  );
+  const onSwitchSavedStatus = React.useCallback(
+    (ids, newStatus) => {
+      notificationsApi.updateNotifications({
+        ids,
+        saved: newStatus
+      }).then(onUpdate);
+    },
+    [notificationsApi, onUpdate]
+  );
+  const throttledContainsTextHandler = React.useMemo(
+    () => throttle(setContainsText, ThrottleDelayMs),
+    [setContainsText]
+  );
+  React.useEffect(() => {
+    const allShownIds = new Set(notifications.map((n) => n.id));
+    const intersect = [...selectedNotifications].filter(
+      (id) => allShownIds.has(id)
+    );
+    if (selectedNotifications.size !== intersect.length) {
+      setSelectedNotifications(new Set(intersect));
+    }
+  }, [notifications, selectedNotifications]);
+  const compactColumns = React.useMemo(
+    () => [
+      {
+        /* selection column */
+        width: "1rem",
+        title: /* @__PURE__ */ React.createElement(
+          SelectAll,
+          {
+            count: selectedNotifications.size,
+            totalCount: notifications.length,
+            onSelectAll: () => onNotificationsSelectChange(
+              notifications.map((notification) => notification.id),
+              selectedNotifications.size !== notifications.length
+            )
+          }
+        ),
+        render: (notification) => /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            color: "primary",
+            checked: selectedNotifications.has(notification.id),
+            onChange: (_, checked) => onNotificationsSelectChange([notification.id], checked)
+          }
+        )
+      },
+      {
+        /* compact-data column */
+        customFilterAndSearch: () => true,
+        render: (notification) => {
+          var _a;
+          return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, className: classes.severityItem }, /* @__PURE__ */ React.createElement(SeverityIcon, { severity: (_a = notification.payload) == null ? void 0 : _a.severity })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, notification.payload.link ? /* @__PURE__ */ React.createElement(Link, { to: notification.payload.link }, notification.payload.title) : notification.payload.title), notification.payload.description ? /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.description }, notification.payload.description) : null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, notification.origin && /* @__PURE__ */ React.createElement(React.Fragment, null, notification.origin, "\xA0\u2022\xA0"), notification.payload.topic && /* @__PURE__ */ React.createElement(React.Fragment, null, notification.payload.topic, "\xA0\u2022\xA0"), notification.created && /* @__PURE__ */ React.createElement(RelativeTime, { value: notification.created })))));
+        }
+      },
+      {
+        /* actions column */
+        width: "1rem",
+        title: /* @__PURE__ */ React.createElement(
+          BulkActions,
+          {
+            notifications,
+            selectedNotifications,
+            onSwitchReadStatus,
+            onSwitchSavedStatus
+          }
+        ),
+        render: (notification) => /* @__PURE__ */ React.createElement(
+          BulkActions,
+          {
+            notifications: [notification],
+            selectedNotifications: /* @__PURE__ */ new Set([notification.id]),
+            onSwitchReadStatus,
+            onSwitchSavedStatus
+          }
+        )
+      }
+    ],
+    [
+      selectedNotifications,
+      notifications,
+      onSwitchReadStatus,
+      onSwitchSavedStatus,
+      onNotificationsSelectChange,
+      classes.severityItem,
+      classes.description
+    ]
+  );
+  return /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      isLoading,
+      options: {
+        padding: "dense",
+        search: true,
+        paging: true,
+        pageSize,
+        header: true,
+        sorting: false
+      },
+      onPageChange,
+      onRowsPerPageChange,
+      page,
+      totalCount,
+      onSearchChange: throttledContainsTextHandler,
+      data: notifications,
+      columns: compactColumns
+    }
+  );
+};
+
+export { NotificationsTable };
+//# sourceMappingURL=NotificationsTable.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsTable.esm.js","sources":["../../../src/components/NotificationsTable/NotificationsTable.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport throttle from 'lodash/throttle';\n// @ts-ignore\nimport RelativeTime from 'react-relative-time';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport CheckBox from '@material-ui/core/Checkbox';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Notification } from '@backstage/plugin-notifications-common';\n\nimport { notificationsApiRef } from '../../api';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n  Link,\n  Table,\n  TableProps,\n  TableColumn,\n} from '@backstage/core-components';\n\nimport { SeverityIcon } from './SeverityIcon';\nimport { SelectAll } from './SelectAll';\nimport { BulkActions } from './BulkActions';\n\nconst ThrottleDelayMs = 1000;\n\nconst useStyles = makeStyles({\n  description: {\n    maxHeight: '5rem',\n    overflow: 'scroll',\n  },\n  severityItem: {\n    alignContent: 'center',\n  },\n});\n\n/** @public */\nexport type NotificationsTableProps = Pick<\n  TableProps,\n  'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount'\n> & {\n  isLoading?: boolean;\n  notifications?: Notification[];\n  onUpdate: () => void;\n  setContainsText: (search: string) => void;\n  pageSize: number;\n};\n\n/** @public */\nexport const NotificationsTable = ({\n  isLoading,\n  notifications = [],\n  onUpdate,\n  setContainsText,\n  onPageChange,\n  onRowsPerPageChange,\n  page,\n  pageSize,\n  totalCount,\n}: NotificationsTableProps) => {\n  const classes = useStyles();\n  const notificationsApi = useApi(notificationsApiRef);\n  const [selectedNotifications, setSelectedNotifications] = React.useState(\n    new Set<Notification['id']>(),\n  );\n\n  const onNotificationsSelectChange = React.useCallback(\n    (ids: Notification['id'][], checked: boolean) => {\n      let newSelect: Set<Notification['id']>;\n      if (checked) {\n        newSelect = new Set([...selectedNotifications, ...ids]);\n      } else {\n        newSelect = new Set(selectedNotifications);\n        ids.forEach(id => newSelect.delete(id));\n      }\n      setSelectedNotifications(newSelect);\n    },\n    [selectedNotifications, setSelectedNotifications],\n  );\n\n  const onSwitchReadStatus = React.useCallback(\n    (ids: Notification['id'][], newStatus: boolean) => {\n      notificationsApi\n        .updateNotifications({\n          ids,\n          read: newStatus,\n        })\n        .then(onUpdate);\n    },\n    [notificationsApi, onUpdate],\n  );\n\n  const onSwitchSavedStatus = React.useCallback(\n    (ids: Notification['id'][], newStatus: boolean) => {\n      notificationsApi\n        .updateNotifications({\n          ids,\n          saved: newStatus,\n        })\n        .then(onUpdate);\n    },\n    [notificationsApi, onUpdate],\n  );\n\n  const throttledContainsTextHandler = React.useMemo(\n    () => throttle(setContainsText, ThrottleDelayMs),\n    [setContainsText],\n  );\n\n  React.useEffect(() => {\n    const allShownIds = new Set(notifications.map(n => n.id));\n    const intersect = [...selectedNotifications].filter(id =>\n      allShownIds.has(id),\n    );\n    if (selectedNotifications.size !== intersect.length) {\n      setSelectedNotifications(new Set(intersect));\n    }\n  }, [notifications, selectedNotifications]);\n\n  const compactColumns = React.useMemo(\n    (): TableColumn<Notification>[] => [\n      {\n        /* selection column */\n        width: '1rem',\n        title: (\n          <SelectAll\n            count={selectedNotifications.size}\n            totalCount={notifications.length}\n            onSelectAll={() =>\n              onNotificationsSelectChange(\n                notifications.map(notification => notification.id),\n                selectedNotifications.size !== notifications.length,\n              )\n            }\n          />\n        ),\n        render: (notification: Notification) => (\n          <CheckBox\n            color=\"primary\"\n            checked={selectedNotifications.has(notification.id)}\n            onChange={(_, checked) =>\n              onNotificationsSelectChange([notification.id], checked)\n            }\n          />\n        ),\n      },\n      {\n        /* compact-data column */\n        customFilterAndSearch: () =>\n          true /* Keep sorting&filtering on backend due to pagination. */,\n        render: (notification: Notification) => {\n          // Compact content\n          return (\n            <Grid container>\n              <Grid item className={classes.severityItem}>\n                <SeverityIcon severity={notification.payload?.severity} />\n              </Grid>\n              <Grid item xs={11}>\n                <Box>\n                  <Typography variant=\"subtitle2\">\n                    {notification.payload.link ? (\n                      <Link to={notification.payload.link}>\n                        {notification.payload.title}\n                      </Link>\n                    ) : (\n                      notification.payload.title\n                    )}\n                  </Typography>\n                  {notification.payload.description ? (\n                    <Typography variant=\"body2\" className={classes.description}>\n                      {notification.payload.description}\n                    </Typography>\n                  ) : null}\n                  <Typography variant=\"caption\">\n                    {notification.origin && (\n                      <>{notification.origin}&nbsp;&bull;&nbsp;</>\n                    )}\n                    {notification.payload.topic && (\n                      <>{notification.payload.topic}&nbsp;&bull;&nbsp;</>\n                    )}\n                    {notification.created && (\n                      <RelativeTime value={notification.created} />\n                    )}\n                  </Typography>\n                </Box>\n              </Grid>\n            </Grid>\n          );\n        },\n      },\n      {\n        /* actions column */\n        width: '1rem',\n        title: (\n          <BulkActions\n            notifications={notifications}\n            selectedNotifications={selectedNotifications}\n            onSwitchReadStatus={onSwitchReadStatus}\n            onSwitchSavedStatus={onSwitchSavedStatus}\n          />\n        ),\n        render: (notification: Notification) => (\n          <BulkActions\n            notifications={[notification]}\n            selectedNotifications={new Set([notification.id])}\n            onSwitchReadStatus={onSwitchReadStatus}\n            onSwitchSavedStatus={onSwitchSavedStatus}\n          />\n        ),\n      },\n    ],\n    [\n      selectedNotifications,\n      notifications,\n      onSwitchReadStatus,\n      onSwitchSavedStatus,\n      onNotificationsSelectChange,\n      classes.severityItem,\n      classes.description,\n    ],\n  );\n\n  return (\n    <Table<Notification>\n      isLoading={isLoading}\n      options={{\n        padding: 'dense',\n        search: true,\n        paging: true,\n        pageSize,\n        header: true,\n        sorting: false,\n      }}\n      onPageChange={onPageChange}\n      onRowsPerPageChange={onRowsPerPageChange}\n      page={page}\n      totalCount={totalCount}\n      onSearchChange={throttledContainsTextHandler}\n      data={notifications}\n      columns={compactColumns}\n    />\n  );\n};\n"],"names":["CheckBox"],"mappings":"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"}

package/dist/components/NotificationsTable/SelectAll.esm.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  label: {
+    marginLeft: "0px",
+    maxWidth: "2rem",
+    "& span": {
+      paddingRight: "0px"
+    }
+  }
+});
+const SelectAll = ({
+  count,
+  totalCount,
+  onSelectAll
+}) => {
+  const classes = useStyles();
+  return /* @__PURE__ */ React.createElement(
+    FormControlLabel,
+    {
+      label: count > 0 ? `(${count})` : void 0,
+      className: classes.label,
+      control: /* @__PURE__ */ React.createElement(
+        Checkbox,
+        {
+          color: "primary",
+          disabled: !totalCount,
+          checked: count > 0,
+          indeterminate: count > 0 && totalCount !== count,
+          onChange: onSelectAll
+        }
+      )
+    }
+  );
+};
+
+export { SelectAll };
+//# sourceMappingURL=SelectAll.esm.js.map

package/dist/components/NotificationsTable/SelectAll.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAll.esm.js","sources":["../../../src/components/NotificationsTable/SelectAll.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles({\n  label: {\n    marginLeft: '0px',\n    maxWidth: '2rem',\n    '& span': {\n      paddingRight: '0px',\n    },\n  },\n});\n\nexport const SelectAll = ({\n  count,\n  totalCount,\n  onSelectAll,\n}: {\n  count: number;\n  totalCount: number;\n  onSelectAll: () => void;\n}) => {\n  const classes = useStyles();\n\n  return (\n    <FormControlLabel\n      label={count > 0 ? `(${count})` : undefined}\n      className={classes.label}\n      control={\n        <Checkbox\n          color=\"primary\"\n          disabled={!totalCount}\n          checked={count > 0}\n          indeterminate={count > 0 && totalCount !== count}\n          onChange={onSelectAll}\n        />\n      }\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,KAAO,EAAA;AAAA,IACL,UAAY,EAAA,KAAA;AAAA,IACZ,QAAU,EAAA,MAAA;AAAA,IACV,QAAU,EAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,KAChB;AAAA,GACF;AACF,CAAC,CAAA,CAAA;AAEM,MAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AACF,CAIM,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAE1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,KAAA,GAAQ,CAAI,GAAA,CAAA,CAAA,EAAI,KAAK,CAAM,CAAA,CAAA,GAAA,KAAA,CAAA;AAAA,MAClC,WAAW,OAAQ,CAAA,KAAA;AAAA,MACnB,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAM,EAAA,SAAA;AAAA,UACN,UAAU,CAAC,UAAA;AAAA,UACX,SAAS,KAAQ,GAAA,CAAA;AAAA,UACjB,aAAA,EAAe,KAAQ,GAAA,CAAA,IAAK,UAAe,KAAA,KAAA;AAAA,UAC3C,QAAU,EAAA,WAAA;AAAA,SAAA;AAAA,OACZ;AAAA,KAAA;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/dist/components/NotificationsTable/SeverityIcon.esm.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import NormalIcon from '@material-ui/icons/CheckOutlined';
+import CriticalIcon from '@material-ui/icons/ErrorOutline';
+import HighIcon from '@material-ui/icons/WarningOutlined';
+import LowIcon from '@material-ui/icons/InfoOutlined';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  critical: {
+    color: theme.palette.status.error
+  },
+  high: {
+    color: theme.palette.status.warning
+  },
+  normal: {
+    color: theme.palette.status.ok
+  },
+  low: {
+    color: theme.palette.status.running
+  }
+}));
+const SeverityIcon = ({
+  severity
+}) => {
+  const classes = useStyles();
+  switch (severity) {
+    case "critical":
+      return /* @__PURE__ */ React.createElement(CriticalIcon, { className: classes.critical });
+    case "high":
+      return /* @__PURE__ */ React.createElement(HighIcon, { className: classes.high });
+    case "low":
+      return /* @__PURE__ */ React.createElement(LowIcon, { className: classes.low });
+    case "normal":
+    default:
+      return /* @__PURE__ */ React.createElement(NormalIcon, { className: classes.normal });
+  }
+};
+
+export { SeverityIcon };
+//# sourceMappingURL=SeverityIcon.esm.js.map

package/dist/components/NotificationsTable/SeverityIcon.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeverityIcon.esm.js","sources":["../../../src/components/NotificationsTable/SeverityIcon.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { NotificationSeverity } from '@backstage/plugin-notifications-common';\nimport NormalIcon from '@material-ui/icons/CheckOutlined';\nimport CriticalIcon from '@material-ui/icons/ErrorOutline';\nimport HighIcon from '@material-ui/icons/WarningOutlined';\nimport LowIcon from '@material-ui/icons/InfoOutlined';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(theme => ({\n  critical: {\n    color: theme.palette.status.error,\n  },\n  high: {\n    color: theme.palette.status.warning,\n  },\n  normal: {\n    color: theme.palette.status.ok,\n  },\n  low: {\n    color: theme.palette.status.running,\n  },\n}));\n\nexport const SeverityIcon = ({\n  severity,\n}: {\n  severity?: NotificationSeverity;\n}) => {\n  const classes = useStyles();\n\n  switch (severity) {\n    case 'critical':\n      return <CriticalIcon className={classes.critical} />;\n    case 'high':\n      return <HighIcon className={classes.high} />;\n    case 'low':\n      return <LowIcon className={classes.low} />;\n    case 'normal':\n    default:\n      return <NormalIcon className={classes.normal} />;\n  }\n};\n"],"names":[],"mappings":";;;;;;;AAuBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,QAAU,EAAA;AAAA,IACR,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,KAAA;AAAA,GAC9B;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,OAAA;AAAA,GAC9B;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,EAAA;AAAA,GAC9B;AAAA,EACA,GAAK,EAAA;AAAA,IACH,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,OAAA;AAAA,GAC9B;AACF,CAAE,CAAA,CAAA,CAAA;AAEK,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AACF,CAEM,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAE1B,EAAA,QAAQ,QAAU;AAAA,IAChB,KAAK,UAAA;AACH,MAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,SAAW,EAAA,OAAA,CAAQ,QAAU,EAAA,CAAA,CAAA;AAAA,IACpD,KAAK,MAAA;AACH,MAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,CAAQ,IAAM,EAAA,CAAA,CAAA;AAAA,IAC5C,KAAK,KAAA;AACH,MAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,GAAK,EAAA,CAAA,CAAA;AAAA,IAC1C,KAAK,QAAA,CAAA;AAAA,IACL;AACE,MAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,OAAA,CAAQ,MAAQ,EAAA,CAAA,CAAA;AAAA,GAClD;AACF;;;;"}

package/dist/hooks/useNotificationsApi.esm.js

@@ -0,0 +1,14 @@
+import { notificationsApiRef } from '../api/NotificationsApi.esm.js';
+import '@backstage/errors';
+import { useApi } from '@backstage/core-plugin-api';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';
+
+function useNotificationsApi(f, deps = []) {
+  const notificationsApi = useApi(notificationsApiRef);
+  return useAsyncRetry(async () => {
+    return await f(notificationsApi);
+  }, deps);
+}
+
+export { useNotificationsApi };
+//# sourceMappingURL=useNotificationsApi.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNotificationsApi.esm.js","sources":["../../src/hooks/useNotificationsApi.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\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 { NotificationsApi, notificationsApiRef } from '../api';\nimport { useApi } from '@backstage/core-plugin-api';\nimport useAsyncRetry from 'react-use/esm/useAsyncRetry';\n\n/** @public */\nexport function useNotificationsApi<T>(\n  f: (api: NotificationsApi) => Promise<T>,\n  deps: any[] = [],\n) {\n  const notificationsApi = useApi(notificationsApiRef);\n\n  return useAsyncRetry(async () => {\n    return await f(notificationsApi);\n  }, deps);\n}\n"],"names":[],"mappings":";;;;;AAqBO,SAAS,mBACd,CAAA,CAAA,EACA,IAAc,GAAA,EACd,EAAA;AACA,EAAM,MAAA,gBAAA,GAAmB,OAAO,mBAAmB,CAAA,CAAA;AAEnD,EAAA,OAAO,cAAc,YAAY;AAC/B,IAAO,OAAA,MAAM,EAAE,gBAAgB,CAAA,CAAA;AAAA,KAC9B,IAAI,CAAA,CAAA;AACT;;;;"}

package/dist/hooks/useTitleCounter.esm.js

@@ -0,0 +1,57 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+function useTitleCounter() {
+  const [title, setTitle] = useState(document.title);
+  const [count, setCount] = useState(0);
+  const titleTimer = useRef(void 0);
+  const getPrefix = (value) => {
+    return value === 0 ? "" : `(${value}) `;
+  };
+  const cleanTitle = (currentTitle) => {
+    return currentTitle.replace(/^\(\d+\)\s/, "");
+  };
+  useEffect(() => {
+    const baseTitle = cleanTitle(title);
+    const shownTitle = `${getPrefix(count)}${baseTitle}`;
+    if (document.title !== shownTitle) {
+      window.clearTimeout(titleTimer.current);
+      document.title = shownTitle;
+      titleTimer.current = window.setTimeout(() => {
+        document.title = shownTitle;
+      }, 50);
+    }
+    return () => {
+      window.clearTimeout(titleTimer.current);
+      document.title = cleanTitle(title);
+    };
+  }, [title, count]);
+  useEffect(() => {
+    const titleElement = document.querySelector("title");
+    let observer;
+    if (titleElement) {
+      observer = new MutationObserver((mutations) => {
+        var _a, _b;
+        if ((_b = (_a = mutations == null ? void 0 : mutations[0]) == null ? void 0 : _a.target) == null ? void 0 : _b.textContent) {
+          setTitle(mutations[0].target.textContent);
+        }
+      });
+      observer.observe(titleElement, {
+        characterData: true,
+        childList: true
+      });
+    }
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, []);
+  const setNotificationCount = useCallback(
+    (newCount) => setCount(newCount),
+    []
+  );
+  return { setNotificationCount };
+}
+
+export { useTitleCounter };
+//# sourceMappingURL=useTitleCounter.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTitleCounter.esm.js","sources":["../../src/hooks/useTitleCounter.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 { useCallback, useEffect, useRef, useState } from 'react';\n\n/** @public */\nexport function useTitleCounter() {\n  const [title, setTitle] = useState(document.title);\n  const [count, setCount] = useState(0);\n  const titleTimer = useRef<undefined | number>(undefined);\n\n  const getPrefix = (value: number) => {\n    return value === 0 ? '' : `(${value}) `;\n  };\n\n  const cleanTitle = (currentTitle: string) => {\n    return currentTitle.replace(/^\\(\\d+\\)\\s/, '');\n  };\n\n  useEffect(() => {\n    const baseTitle = cleanTitle(title);\n    const shownTitle = `${getPrefix(count)}${baseTitle}`;\n    if (document.title !== shownTitle) {\n      window.clearTimeout(titleTimer.current);\n      document.title = shownTitle;\n      // Need to do this in timeout as the React Helmet overrides the title after this effect\n      titleTimer.current = window.setTimeout(() => {\n        document.title = shownTitle;\n      }, 50);\n    }\n    return () => {\n      window.clearTimeout(titleTimer.current);\n      document.title = cleanTitle(title);\n    };\n  }, [title, count]);\n\n  useEffect(() => {\n    const titleElement = document.querySelector('title');\n    let observer: MutationObserver | undefined;\n    if (titleElement) {\n      observer = new MutationObserver(mutations => {\n        if (mutations?.[0]?.target?.textContent) {\n          setTitle(mutations[0].target.textContent);\n        }\n      });\n      observer.observe(titleElement, {\n        characterData: true,\n        childList: true,\n      });\n    }\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, []);\n\n  const setNotificationCount = useCallback(\n    (newCount: number) => setCount(newCount),\n    [],\n  );\n\n  return { setNotificationCount };\n}\n"],"names":[],"mappings":";;AAkBO,SAAS,eAAkB,GAAA;AAChC,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,SAAS,KAAK,CAAA,CAAA;AACjD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AACpC,EAAM,MAAA,UAAA,GAAa,OAA2B,KAAS,CAAA,CAAA,CAAA;AAEvD,EAAM,MAAA,SAAA,GAAY,CAAC,KAAkB,KAAA;AACnC,IAAA,OAAO,KAAU,KAAA,CAAA,GAAI,EAAK,GAAA,CAAA,CAAA,EAAI,KAAK,CAAA,EAAA,CAAA,CAAA;AAAA,GACrC,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,YAAyB,KAAA;AAC3C,IAAO,OAAA,YAAA,CAAa,OAAQ,CAAA,YAAA,EAAc,EAAE,CAAA,CAAA;AAAA,GAC9C,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,SAAA,GAAY,WAAW,KAAK,CAAA,CAAA;AAClC,IAAA,MAAM,aAAa,CAAG,EAAA,SAAA,CAAU,KAAK,CAAC,GAAG,SAAS,CAAA,CAAA,CAAA;AAClD,IAAI,IAAA,QAAA,CAAS,UAAU,UAAY,EAAA;AACjC,MAAO,MAAA,CAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AACtC,MAAA,QAAA,CAAS,KAAQ,GAAA,UAAA,CAAA;AAEjB,MAAW,UAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC3C,QAAA,QAAA,CAAS,KAAQ,GAAA,UAAA,CAAA;AAAA,SAChB,EAAE,CAAA,CAAA;AAAA,KACP;AACA,IAAA,OAAO,MAAM;AACX,MAAO,MAAA,CAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AACtC,MAAS,QAAA,CAAA,KAAA,GAAQ,WAAW,KAAK,CAAA,CAAA;AAAA,KACnC,CAAA;AAAA,GACC,EAAA,CAAC,KAAO,EAAA,KAAK,CAAC,CAAA,CAAA;AAEjB,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,YAAA,GAAe,QAAS,CAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AACnD,IAAI,IAAA,QAAA,CAAA;AACJ,IAAA,IAAI,YAAc,EAAA;AAChB,MAAW,QAAA,GAAA,IAAI,iBAAiB,CAAa,SAAA,KAAA;AApDnD,QAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAqDQ,QAAA,IAAA,CAAI,EAAY,GAAA,CAAA,EAAA,GAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,CAAA,CAAA,KAAZ,IAAgB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,KAAhB,mBAAwB,WAAa,EAAA;AACvC,UAAA,QAAA,CAAS,SAAU,CAAA,CAAC,CAAE,CAAA,MAAA,CAAO,WAAW,CAAA,CAAA;AAAA,SAC1C;AAAA,OACD,CAAA,CAAA;AACD,MAAA,QAAA,CAAS,QAAQ,YAAc,EAAA;AAAA,QAC7B,aAAe,EAAA,IAAA;AAAA,QACf,SAAW,EAAA,IAAA;AAAA,OACZ,CAAA,CAAA;AAAA,KACH;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,QAAqB,KAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,IACvC,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,OAAO,EAAE,oBAAqB,EAAA,CAAA;AAChC;;;;"}

package/dist/hooks/useWebNotifications.esm.js

@@ -0,0 +1,44 @@
+import { useState, useEffect, useCallback } from 'react';
+import { rootRouteRef } from '../routes.esm.js';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { useNavigate } from 'react-router-dom';
+
+function useWebNotifications(enabled) {
+  const [webNotificationPermission, setWebNotificationPermission] = useState("default");
+  const notificationsRoute = useRouteRef(rootRouteRef);
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (enabled && "Notification" in window && webNotificationPermission === "default") {
+      window.Notification.requestPermission().then((permission) => {
+        setWebNotificationPermission(permission);
+      });
+    }
+  }, [enabled, webNotificationPermission]);
+  const sendWebNotification = useCallback(
+    (options) => {
+      if (webNotificationPermission !== "granted") {
+        return null;
+      }
+      const notification = new Notification(options.title, {
+        body: options.description,
+        tag: options.id
+        // Prevent duplicates from multiple tabs
+      });
+      notification.onclick = (event) => {
+        event.preventDefault();
+        if (options.link) {
+          window.open(options.link, "_blank");
+        } else {
+          navigate(notificationsRoute());
+        }
+        notification.close();
+      };
+      return notification;
+    },
+    [webNotificationPermission, navigate, notificationsRoute]
+  );
+  return { sendWebNotification };
+}
+
+export { useWebNotifications };
+//# sourceMappingURL=useWebNotifications.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useWebNotifications.esm.js","sources":["../../src/hooks/useWebNotifications.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 { useCallback, useEffect, useState } from 'react';\nimport { rootRouteRef } from '../routes';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\n\n/** @public */\nexport function useWebNotifications(enabled: boolean) {\n  const [webNotificationPermission, setWebNotificationPermission] =\n    useState('default');\n  const notificationsRoute = useRouteRef(rootRouteRef);\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (\n      enabled &&\n      'Notification' in window &&\n      webNotificationPermission === 'default'\n    ) {\n      window.Notification.requestPermission().then(permission => {\n        setWebNotificationPermission(permission);\n      });\n    }\n  }, [enabled, webNotificationPermission]);\n\n  const sendWebNotification = useCallback(\n    (options: {\n      id: string;\n      title: string;\n      description: string;\n      link?: string;\n    }) => {\n      if (webNotificationPermission !== 'granted') {\n        return null;\n      }\n\n      const notification = new Notification(options.title, {\n        body: options.description,\n        tag: options.id, // Prevent duplicates from multiple tabs\n      });\n\n      notification.onclick = event => {\n        event.preventDefault();\n        if (options.link) {\n          window.open(options.link, '_blank');\n        } else {\n          navigate(notificationsRoute());\n        }\n        notification.close();\n      };\n\n      return notification;\n    },\n    [webNotificationPermission, navigate, notificationsRoute],\n  );\n\n  return { sendWebNotification };\n}\n"],"names":[],"mappings":";;;;;AAqBO,SAAS,oBAAoB,OAAkB,EAAA;AACpD,EAAA,MAAM,CAAC,yBAAA,EAA2B,4BAA4B,CAAA,GAC5D,SAAS,SAAS,CAAA,CAAA;AACpB,EAAM,MAAA,kBAAA,GAAqB,YAAY,YAAY,CAAA,CAAA;AACnD,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IACE,OACA,IAAA,cAAA,IAAkB,MAClB,IAAA,yBAAA,KAA8B,SAC9B,EAAA;AACA,MAAA,MAAA,CAAO,YAAa,CAAA,iBAAA,EAAoB,CAAA,IAAA,CAAK,CAAc,UAAA,KAAA;AACzD,QAAA,4BAAA,CAA6B,UAAU,CAAA,CAAA;AAAA,OACxC,CAAA,CAAA;AAAA,KACH;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,yBAAyB,CAAC,CAAA,CAAA;AAEvC,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,OAKK,KAAA;AACJ,MAAA,IAAI,8BAA8B,SAAW,EAAA;AAC3C,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAA,MAAM,YAAe,GAAA,IAAI,YAAa,CAAA,OAAA,CAAQ,KAAO,EAAA;AAAA,QACnD,MAAM,OAAQ,CAAA,WAAA;AAAA,QACd,KAAK,OAAQ,CAAA,EAAA;AAAA;AAAA,OACd,CAAA,CAAA;AAED,MAAA,YAAA,CAAa,UAAU,CAAS,KAAA,KAAA;AAC9B,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,UAAO,MAAA,CAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,EAAM,QAAQ,CAAA,CAAA;AAAA,SAC7B,MAAA;AACL,UAAA,QAAA,CAAS,oBAAoB,CAAA,CAAA;AAAA,SAC/B;AACA,QAAA,YAAA,CAAa,KAAM,EAAA,CAAA;AAAA,OACrB,CAAA;AAEA,MAAO,OAAA,YAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,yBAA2B,EAAA,QAAA,EAAU,kBAAkB,CAAA;AAAA,GAC1D,CAAA;AAEA,EAAA,OAAO,EAAE,mBAAoB,EAAA,CAAA;AAC/B;;;;"}

package/dist/index.d.ts

@@ -2,16 +2,26 @@
 import * as React from 'react';
 import React__default from 'react';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
-import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
+import { DiscoveryApi, FetchApi, IconComponent } from '@backstage/core-plugin-api';
 import { NotificationSeverity, Notification as Notification$1, NotificationStatus } from '@backstage/plugin-notifications-common';
 import { TableProps } from '@backstage/core-components';
 
+/** @public */
+type NotificationsPageProps = {
+    title?: string;
+    themeId?: string;
+    subtitle?: string;
+    tooltip?: string;
+    type?: string;
+    typeLink?: string;
+};
+
 /** @public */
 declare const notificationsPlugin: _backstage_core_plugin_api.BackstagePlugin<{
     root: _backstage_core_plugin_api.RouteRef<undefined>;
 }, {}>;
 /** @public */
-declare const NotificationsPage: () => React.JSX.Element;
+declare const NotificationsPage: (props?: NotificationsPageProps | undefined) => React.JSX.Element;
 
 /** @public */
 declare const notificationsApiRef: _backstage_core_plugin_api.ApiRef<NotificationsApi>;
@@ -85,8 +95,9 @@ declare function useNotificationsApi<T>(f: (api: NotificationsApi) => Promise<T>
 };
 
 /** @public */
-declare function useWebNotifications(): {
+declare function useWebNotifications(enabled: boolean): {
     sendWebNotification: (options: {
+        id: string;
         title: string;
         description: string;
         link?: string;
@@ -102,6 +113,11 @@ declare function useTitleCounter(): {
 declare const NotificationsSidebarItem: (props?: {
     webNotificationsEnabled?: boolean;
     titleCounterEnabled?: boolean;
+    className?: string;
+    icon?: IconComponent;
+    text?: string;
+    disableHighlight?: boolean;
+    noTrack?: boolean;
 }) => React__default.JSX.Element;
 
 /** @public */
@@ -115,4 +131,4 @@ type NotificationsTableProps = Pick<TableProps, 'onPageChange' | 'onRowsPerPageC
 /** @public */
 declare const NotificationsTable: ({ isLoading, notifications, onUpdate, setContainsText, onPageChange, onRowsPerPageChange, page, pageSize, totalCount, }: NotificationsTableProps) => React__default.JSX.Element;
 
-export { type GetNotificationsOptions, type GetNotificationsResponse, type NotificationsApi, NotificationsClient, NotificationsPage, NotificationsSidebarItem, NotificationsTable, type NotificationsTableProps, type UpdateNotificationsOptions, notificationsApiRef, notificationsPlugin, useNotificationsApi, useTitleCounter, useWebNotifications };
+export { type GetNotificationsOptions, type GetNotificationsResponse, type NotificationsApi, NotificationsClient, NotificationsPage, type NotificationsPageProps, NotificationsSidebarItem, NotificationsTable, type NotificationsTableProps, type UpdateNotificationsOptions, notificationsApiRef, notificationsPlugin, useNotificationsApi, useTitleCounter, useWebNotifications };