@backstage/plugin-notifications 0.5.4-next.1 → 0.5.4-next.2

package/dist/components/NotificationsSideBarItem/NotificationsSideBarItem.esm.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
 import { useNotificationsApi } from '../../hooks/useNotificationsApi.esm.js';
 import { useWebNotifications } from '../../hooks/useWebNotifications.esm.js';
 import { useTitleCounter } from '../../hooks/useTitleCounter.esm.js';
@@ -57,56 +58,59 @@ const NotificationsSidebarItem = (props) => {
   );
   const notificationsApi = useApi(notificationsApiRef);
   const alertApi = useApi(alertApiRef);
-  const [unreadCount, setUnreadCount] = React.useState(0);
+  const [unreadCount, setUnreadCount] = useState(0);
   const notificationsRoute = useRouteRef(rootRouteRef)();
   const { lastSignal } = useSignal("notifications");
   const { sendWebNotification, requestUserPermission } = useWebNotifications(
     webNotificationsEnabled
   );
-  const [refresh, setRefresh] = React.useState(false);
+  const [refresh, setRefresh] = useState(false);
   const { setNotificationCount } = useTitleCounter();
   const getSnackbarProperties = useCallback(
     (notification) => {
-      const action = (snackBarId) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        IconButton,
-        {
-          component: Link,
-          to: notification.payload.link ?? notificationsRoute,
-          onClick: () => {
-            if (notification.payload.link) {
+      const action = (snackBarId) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            component: Link,
+            to: notification.payload.link ?? notificationsRoute,
+            onClick: () => {
+              if (notification.payload.link) {
+                notificationsApi.updateNotifications({
+                  ids: [notification.id],
+                  read: true
+                }).catch(() => {
+                  alertApi.post({
+                    message: "Failed to mark notification as read",
+                    severity: "error"
+                  });
+                });
+              }
+              closeSnackbar(snackBarId);
+            },
+            children: /* @__PURE__ */ jsx(OpenInNew, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: () => {
               notificationsApi.updateNotifications({
                 ids: [notification.id],
                 read: true
+              }).then(() => {
+                closeSnackbar(snackBarId);
               }).catch(() => {
                 alertApi.post({
                   message: "Failed to mark notification as read",
                   severity: "error"
                 });
               });
-            }
-            closeSnackbar(snackBarId);
-          }
-        },
-        /* @__PURE__ */ React.createElement(OpenInNew, { fontSize: "small" })
-      ), /* @__PURE__ */ React.createElement(
-        IconButton,
-        {
-          onClick: () => {
-            notificationsApi.updateNotifications({
-              ids: [notification.id],
-              read: true
-            }).then(() => {
-              closeSnackbar(snackBarId);
-            }).catch(() => {
-              alertApi.post({
-                message: "Failed to mark notification as read",
-                severity: "error"
-              });
-            });
+            },
+            children: /* @__PURE__ */ jsx(MarkAsReadIcon, { fontSize: "small" })
           }
-        },
-        /* @__PURE__ */ React.createElement(MarkAsReadIcon, { fontSize: "small" })
-      ));
+        )
+      ] });
       return { action };
     },
     [notificationsRoute, notificationsApi, alertApi]
@@ -177,35 +181,38 @@ const NotificationsSidebarItem = (props) => {
     }
   }, [titleCounterEnabled, unreadCount, setNotificationCount]);
   const count = !error && !!unreadCount ? unreadCount : void 0;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, snackbarEnabled && /* @__PURE__ */ React.createElement(
-    SnackbarProvider,
-    {
-      iconVariant: {
-        normal: /* @__PURE__ */ React.createElement(SeverityIcon, { severity: "normal" }),
-        critical: /* @__PURE__ */ React.createElement(SeverityIcon, { severity: "critical" }),
-        high: /* @__PURE__ */ React.createElement(SeverityIcon, { severity: "high" }),
-        low: /* @__PURE__ */ React.createElement(SeverityIcon, { severity: "low" })
-      },
-      Components: {
-        normal: StyledMaterialDesignContent,
-        critical: StyledMaterialDesignContent,
-        high: StyledMaterialDesignContent,
-        low: StyledMaterialDesignContent
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    snackbarEnabled && /* @__PURE__ */ jsx(
+      SnackbarProvider,
+      {
+        iconVariant: {
+          normal: /* @__PURE__ */ jsx(SeverityIcon, { severity: "normal" }),
+          critical: /* @__PURE__ */ jsx(SeverityIcon, { severity: "critical" }),
+          high: /* @__PURE__ */ jsx(SeverityIcon, { severity: "high" }),
+          low: /* @__PURE__ */ jsx(SeverityIcon, { severity: "low" })
+        },
+        Components: {
+          normal: StyledMaterialDesignContent,
+          critical: StyledMaterialDesignContent,
+          high: StyledMaterialDesignContent,
+          low: StyledMaterialDesignContent
+        }
       }
-    }
-  ), /* @__PURE__ */ React.createElement(
-    SidebarItem,
-    {
-      to: notificationsRoute,
-      onClick: () => {
-        requestUserPermission();
-      },
-      text,
-      icon,
-      ...restProps
-    },
-    count && /* @__PURE__ */ React.createElement(Chip, { size: "small", label: count > 99 ? "99+" : count })
-  ));
+    ),
+    /* @__PURE__ */ jsx(
+      SidebarItem,
+      {
+        to: notificationsRoute,
+        onClick: () => {
+          requestUserPermission();
+        },
+        text,
+        icon,
+        ...restProps,
+        children: count && /* @__PURE__ */ jsx(Chip, { size: "small", label: count > 99 ? "99+" : count })
+      }
+    )
+  ] });
 };
 
 export { NotificationsSidebarItem };

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationsSideBarItem.esm.js","sources":["../../../src/components/NotificationsSideBarItem/NotificationsSideBarItem.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, { useCallback, useEffect } from 'react';\nimport { useNotificationsApi } from '../../hooks';\nimport { Link, SidebarItem } from '@backstage/core-components';\nimport NotificationsIcon from '@material-ui/icons/Notifications';\nimport {\n  alertApiRef,\n  IconComponent,\n  useApi,\n  useRouteRef,\n} from '@backstage/core-plugin-api';\nimport { rootRouteRef } from '../../routes';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport {\n  Notification,\n  NotificationSignal,\n} from '@backstage/plugin-notifications-common';\nimport { useWebNotifications } from '../../hooks/useWebNotifications';\nimport { useTitleCounter } from '../../hooks/useTitleCounter';\nimport { notificationsApiRef } from '../../api';\nimport {\n  closeSnackbar,\n  enqueueSnackbar,\n  MaterialDesignContent,\n  OptionsWithExtraProps,\n  SnackbarKey,\n  SnackbarProvider,\n  VariantType,\n} from 'notistack';\nimport { SeverityIcon } from '../NotificationsTable/SeverityIcon';\nimport OpenInNew from '@material-ui/icons/OpenInNew';\nimport MarkAsReadIcon from '@material-ui/icons/CheckCircle';\nimport IconButton from '@material-ui/core/IconButton';\nimport Chip from '@material-ui/core/Chip';\nimport { styled } from '@material-ui/core/styles';\n\nconst StyledMaterialDesignContent = styled(MaterialDesignContent)(\n  ({ theme }) => ({\n    '&.notistack-MuiContent-low': {\n      backgroundColor: theme.palette.background.default,\n      color: theme.palette.text.primary,\n    },\n    '&.notistack-MuiContent-normal': {\n      backgroundColor: theme.palette.background.default,\n      color: theme.palette.text.primary,\n    },\n    '&.notistack-MuiContent-high': {\n      backgroundColor: theme.palette.background.default,\n      color: theme.palette.text.primary,\n    },\n    '&.notistack-MuiContent-critical': {\n      backgroundColor: theme.palette.background.default,\n      color: theme.palette.text.primary,\n    },\n  }),\n);\n\ndeclare module 'notistack' {\n  interface VariantOverrides {\n    // Custom variants for the snackbar\n    low: true;\n    normal: true;\n    high: true;\n    critical: true;\n  }\n}\n\n/** @public */\nexport const NotificationsSidebarItem = (props?: {\n  webNotificationsEnabled?: boolean;\n  titleCounterEnabled?: boolean;\n  snackbarEnabled?: boolean;\n  snackbarAutoHideDuration?: number | null;\n  className?: string;\n  icon?: IconComponent;\n  text?: string;\n  disableHighlight?: boolean;\n  noTrack?: boolean;\n}) => {\n  const {\n    webNotificationsEnabled = false,\n    titleCounterEnabled = true,\n    snackbarEnabled = true,\n    snackbarAutoHideDuration = 10000,\n    icon = NotificationsIcon,\n    text = 'Notifications',\n    ...restProps\n  } = props ?? {\n    webNotificationsEnabled: false,\n    titleCounterEnabled: true,\n    snackbarEnabled: true,\n    snackbarAutoHideDuration: 10000,\n  };\n\n  const { loading, error, value, retry } = useNotificationsApi(api =>\n    api.getStatus(),\n  );\n  const notificationsApi = useApi(notificationsApiRef);\n  const alertApi = useApi(alertApiRef);\n  const [unreadCount, setUnreadCount] = React.useState(0);\n  const notificationsRoute = useRouteRef(rootRouteRef)();\n  // TODO: Do we want to add long polling in case signals are not available\n  const { lastSignal } = useSignal<NotificationSignal>('notifications');\n  const { sendWebNotification, requestUserPermission } = useWebNotifications(\n    webNotificationsEnabled,\n  );\n  const [refresh, setRefresh] = React.useState(false);\n  const { setNotificationCount } = useTitleCounter();\n\n  const getSnackbarProperties = useCallback(\n    (notification: Notification) => {\n      const action = (snackBarId: SnackbarKey) => (\n        <>\n          <IconButton\n            component={Link}\n            to={notification.payload.link ?? notificationsRoute}\n            onClick={() => {\n              if (notification.payload.link) {\n                notificationsApi\n                  .updateNotifications({\n                    ids: [notification.id],\n                    read: true,\n                  })\n                  .catch(() => {\n                    alertApi.post({\n                      message: 'Failed to mark notification as read',\n                      severity: 'error',\n                    });\n                  });\n              }\n              closeSnackbar(snackBarId);\n            }}\n          >\n            <OpenInNew fontSize=\"small\" />\n          </IconButton>\n          <IconButton\n            onClick={() => {\n              notificationsApi\n                .updateNotifications({\n                  ids: [notification.id],\n                  read: true,\n                })\n                .then(() => {\n                  closeSnackbar(snackBarId);\n                })\n                .catch(() => {\n                  alertApi.post({\n                    message: 'Failed to mark notification as read',\n                    severity: 'error',\n                  });\n                });\n            }}\n          >\n            <MarkAsReadIcon fontSize=\"small\" />\n          </IconButton>\n        </>\n      );\n\n      return { action };\n    },\n    [notificationsRoute, notificationsApi, alertApi],\n  );\n\n  useEffect(() => {\n    if (refresh) {\n      retry();\n      setRefresh(false);\n    }\n  }, [refresh, retry]);\n\n  useEffect(() => {\n    const handleNotificationSignal = (signal: NotificationSignal) => {\n      if (\n        (!webNotificationsEnabled && !snackbarEnabled) ||\n        signal.action !== 'new_notification'\n      ) {\n        return;\n      }\n      notificationsApi\n        .getNotification(signal.notification_id)\n        .then(notification => {\n          if (!notification) {\n            return;\n          }\n          if (webNotificationsEnabled) {\n            sendWebNotification({\n              id: notification.id,\n              title: notification.payload.title,\n              description: notification.payload.description ?? '',\n              link: notification.payload.link,\n            });\n          }\n          if (snackbarEnabled) {\n            const { action } = getSnackbarProperties(notification);\n            const snackBarText =\n              notification.payload.title.length > 50\n                ? `${notification.payload.title.substring(0, 50)}...`\n                : notification.payload.title;\n            enqueueSnackbar(snackBarText, {\n              key: notification.id,\n              variant: notification.payload.severity,\n              anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n              action,\n              autoHideDuration: snackbarAutoHideDuration,\n            } as OptionsWithExtraProps<VariantType>);\n          }\n        })\n        .catch(() => {\n          alertApi.post({\n            message: 'Failed to fetch notification',\n            severity: 'error',\n          });\n        });\n    };\n\n    if (lastSignal && lastSignal.action) {\n      handleNotificationSignal(lastSignal);\n      setRefresh(true);\n    }\n  }, [\n    lastSignal,\n    sendWebNotification,\n    webNotificationsEnabled,\n    snackbarEnabled,\n    snackbarAutoHideDuration,\n    notificationsApi,\n    alertApi,\n    getSnackbarProperties,\n  ]);\n\n  useEffect(() => {\n    if (!loading && !error && value) {\n      setUnreadCount(value.unread);\n    }\n  }, [loading, error, value]);\n\n  useEffect(() => {\n    if (titleCounterEnabled) {\n      setNotificationCount(unreadCount);\n    }\n  }, [titleCounterEnabled, unreadCount, setNotificationCount]);\n\n  const count = !error && !!unreadCount ? unreadCount : undefined;\n\n  return (\n    <>\n      {snackbarEnabled && (\n        <SnackbarProvider\n          iconVariant={{\n            normal: <SeverityIcon severity=\"normal\" />,\n            critical: <SeverityIcon severity=\"critical\" />,\n            high: <SeverityIcon severity=\"high\" />,\n            low: <SeverityIcon severity=\"low\" />,\n          }}\n          Components={{\n            normal: StyledMaterialDesignContent,\n            critical: StyledMaterialDesignContent,\n            high: StyledMaterialDesignContent,\n            low: StyledMaterialDesignContent,\n          }}\n        />\n      )}\n      <SidebarItem\n        to={notificationsRoute}\n        onClick={() => {\n          requestUserPermission();\n        }}\n        text={text}\n        icon={icon}\n        {...restProps}\n      >\n        {count && <Chip size=\"small\" label={count > 99 ? '99+' : count} />}\n      </SidebarItem>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotificationsSideBarItem.esm.js","sources":["../../../src/components/NotificationsSideBarItem/NotificationsSideBarItem.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 { useState, useCallback, useEffect } from 'react';\nimport { useNotificationsApi } from '../../hooks';\nimport { Link, SidebarItem } from '@backstage/core-components';\nimport NotificationsIcon from '@material-ui/icons/Notifications';\nimport {\n  alertApiRef,\n  IconComponent,\n  useApi,\n  useRouteRef,\n} from '@backstage/core-plugin-api';\nimport { rootRouteRef } from '../../routes';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport {\n  Notification,\n  NotificationSignal,\n} from '@backstage/plugin-notifications-common';\nimport { useWebNotifications } from '../../hooks/useWebNotifications';\nimport { useTitleCounter } from '../../hooks/useTitleCounter';\nimport { notificationsApiRef } from '../../api';\nimport {\n  closeSnackbar,\n  enqueueSnackbar,\n  MaterialDesignContent,\n  OptionsWithExtraProps,\n  SnackbarKey,\n  SnackbarProvider,\n  VariantType,\n} from 'notistack';\nimport { SeverityIcon } from '../NotificationsTable/SeverityIcon';\nimport OpenInNew from '@material-ui/icons/OpenInNew';\nimport MarkAsReadIcon from '@material-ui/icons/CheckCircle';\nimport IconButton from '@material-ui/core/IconButton';\nimport Chip from '@material-ui/core/Chip';\nimport { styled } from '@material-ui/core/styles';\n\nconst StyledMaterialDesignContent = styled(MaterialDesignContent)(\n  ({ theme }) => ({\n    '&.notistack-MuiContent-low': {\n      backgroundColor: theme.palette.background.default,\n      color: theme.palette.text.primary,\n    },\n    '&.notistack-MuiContent-normal': {\n      backgroundColor: theme.palette.background.default,\n      color: theme.palette.text.primary,\n    },\n    '&.notistack-MuiContent-high': {\n      backgroundColor: theme.palette.background.default,\n      color: theme.palette.text.primary,\n    },\n    '&.notistack-MuiContent-critical': {\n      backgroundColor: theme.palette.background.default,\n      color: theme.palette.text.primary,\n    },\n  }),\n);\n\ndeclare module 'notistack' {\n  interface VariantOverrides {\n    // Custom variants for the snackbar\n    low: true;\n    normal: true;\n    high: true;\n    critical: true;\n  }\n}\n\n/** @public */\nexport const NotificationsSidebarItem = (props?: {\n  webNotificationsEnabled?: boolean;\n  titleCounterEnabled?: boolean;\n  snackbarEnabled?: boolean;\n  snackbarAutoHideDuration?: number | null;\n  className?: string;\n  icon?: IconComponent;\n  text?: string;\n  disableHighlight?: boolean;\n  noTrack?: boolean;\n}) => {\n  const {\n    webNotificationsEnabled = false,\n    titleCounterEnabled = true,\n    snackbarEnabled = true,\n    snackbarAutoHideDuration = 10000,\n    icon = NotificationsIcon,\n    text = 'Notifications',\n    ...restProps\n  } = props ?? {\n    webNotificationsEnabled: false,\n    titleCounterEnabled: true,\n    snackbarEnabled: true,\n    snackbarAutoHideDuration: 10000,\n  };\n\n  const { loading, error, value, retry } = useNotificationsApi(api =>\n    api.getStatus(),\n  );\n  const notificationsApi = useApi(notificationsApiRef);\n  const alertApi = useApi(alertApiRef);\n  const [unreadCount, setUnreadCount] = useState(0);\n  const notificationsRoute = useRouteRef(rootRouteRef)();\n  // TODO: Do we want to add long polling in case signals are not available\n  const { lastSignal } = useSignal<NotificationSignal>('notifications');\n  const { sendWebNotification, requestUserPermission } = useWebNotifications(\n    webNotificationsEnabled,\n  );\n  const [refresh, setRefresh] = useState(false);\n  const { setNotificationCount } = useTitleCounter();\n\n  const getSnackbarProperties = useCallback(\n    (notification: Notification) => {\n      const action = (snackBarId: SnackbarKey) => (\n        <>\n          <IconButton\n            component={Link}\n            to={notification.payload.link ?? notificationsRoute}\n            onClick={() => {\n              if (notification.payload.link) {\n                notificationsApi\n                  .updateNotifications({\n                    ids: [notification.id],\n                    read: true,\n                  })\n                  .catch(() => {\n                    alertApi.post({\n                      message: 'Failed to mark notification as read',\n                      severity: 'error',\n                    });\n                  });\n              }\n              closeSnackbar(snackBarId);\n            }}\n          >\n            <OpenInNew fontSize=\"small\" />\n          </IconButton>\n          <IconButton\n            onClick={() => {\n              notificationsApi\n                .updateNotifications({\n                  ids: [notification.id],\n                  read: true,\n                })\n                .then(() => {\n                  closeSnackbar(snackBarId);\n                })\n                .catch(() => {\n                  alertApi.post({\n                    message: 'Failed to mark notification as read',\n                    severity: 'error',\n                  });\n                });\n            }}\n          >\n            <MarkAsReadIcon fontSize=\"small\" />\n          </IconButton>\n        </>\n      );\n\n      return { action };\n    },\n    [notificationsRoute, notificationsApi, alertApi],\n  );\n\n  useEffect(() => {\n    if (refresh) {\n      retry();\n      setRefresh(false);\n    }\n  }, [refresh, retry]);\n\n  useEffect(() => {\n    const handleNotificationSignal = (signal: NotificationSignal) => {\n      if (\n        (!webNotificationsEnabled && !snackbarEnabled) ||\n        signal.action !== 'new_notification'\n      ) {\n        return;\n      }\n      notificationsApi\n        .getNotification(signal.notification_id)\n        .then(notification => {\n          if (!notification) {\n            return;\n          }\n          if (webNotificationsEnabled) {\n            sendWebNotification({\n              id: notification.id,\n              title: notification.payload.title,\n              description: notification.payload.description ?? '',\n              link: notification.payload.link,\n            });\n          }\n          if (snackbarEnabled) {\n            const { action } = getSnackbarProperties(notification);\n            const snackBarText =\n              notification.payload.title.length > 50\n                ? `${notification.payload.title.substring(0, 50)}...`\n                : notification.payload.title;\n            enqueueSnackbar(snackBarText, {\n              key: notification.id,\n              variant: notification.payload.severity,\n              anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n              action,\n              autoHideDuration: snackbarAutoHideDuration,\n            } as OptionsWithExtraProps<VariantType>);\n          }\n        })\n        .catch(() => {\n          alertApi.post({\n            message: 'Failed to fetch notification',\n            severity: 'error',\n          });\n        });\n    };\n\n    if (lastSignal && lastSignal.action) {\n      handleNotificationSignal(lastSignal);\n      setRefresh(true);\n    }\n  }, [\n    lastSignal,\n    sendWebNotification,\n    webNotificationsEnabled,\n    snackbarEnabled,\n    snackbarAutoHideDuration,\n    notificationsApi,\n    alertApi,\n    getSnackbarProperties,\n  ]);\n\n  useEffect(() => {\n    if (!loading && !error && value) {\n      setUnreadCount(value.unread);\n    }\n  }, [loading, error, value]);\n\n  useEffect(() => {\n    if (titleCounterEnabled) {\n      setNotificationCount(unreadCount);\n    }\n  }, [titleCounterEnabled, unreadCount, setNotificationCount]);\n\n  const count = !error && !!unreadCount ? unreadCount : undefined;\n\n  return (\n    <>\n      {snackbarEnabled && (\n        <SnackbarProvider\n          iconVariant={{\n            normal: <SeverityIcon severity=\"normal\" />,\n            critical: <SeverityIcon severity=\"critical\" />,\n            high: <SeverityIcon severity=\"high\" />,\n            low: <SeverityIcon severity=\"low\" />,\n          }}\n          Components={{\n            normal: StyledMaterialDesignContent,\n            critical: StyledMaterialDesignContent,\n            high: StyledMaterialDesignContent,\n            low: StyledMaterialDesignContent,\n          }}\n        />\n      )}\n      <SidebarItem\n        to={notificationsRoute}\n        onClick={() => {\n          requestUserPermission();\n        }}\n        text={text}\n        icon={icon}\n        {...restProps}\n      >\n        {count && <Chip size=\"small\" label={count > 99 ? '99+' : count} />}\n      </SidebarItem>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -30,25 +30,29 @@ const BulkActions = ({
   const IconComponent = isOneRead ? MarkAsUnreadIcon : MarkAsReadIcon;
   const markAsSavedText = isOneSaved ? "Undo save for selected" : "Save selected for later";
   const SavedIconComponent = isOneSaved ? MarkAsUnsavedIcon : MarkAsSavedIcon;
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, wrap: "nowrap" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3 }, onMarkAllRead ? /* @__PURE__ */ React.createElement(Tooltip, { title: "Mark all read" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconButton, { disabled: !isUnread, onClick: onMarkAllRead }, /* @__PURE__ */ React.createElement(MarkAllReadIcon, { "aria-label": markAsSavedText })))) : /* @__PURE__ */ React.createElement("div", null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(Tooltip, { title: markAsSavedText }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      disabled: isDisabled,
-      onClick: () => {
-        onSwitchSavedStatus([...selectedNotifications], !isOneSaved);
+  return /* @__PURE__ */ jsxs(Grid, { container: true, wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: onMarkAllRead ? /* @__PURE__ */ jsx(Tooltip, { title: "Mark all read", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(IconButton, { disabled: !isUnread, onClick: onMarkAllRead, children: /* @__PURE__ */ jsx(MarkAllReadIcon, { "aria-label": markAsSavedText }) }) }) }) : /* @__PURE__ */ jsx("div", {}) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsx(Tooltip, { title: markAsSavedText, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        disabled: isDisabled,
+        onClick: () => {
+          onSwitchSavedStatus([...selectedNotifications], !isOneSaved);
+        },
+        children: /* @__PURE__ */ jsx(SavedIconComponent, { "aria-label": markAsSavedText })
       }
-    },
-    /* @__PURE__ */ React.createElement(SavedIconComponent, { "aria-label": markAsSavedText })
-  )))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(Tooltip, { title: markAsReadText }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      disabled: isDisabled,
-      onClick: () => {
-        onSwitchReadStatus([...selectedNotifications], !isOneRead);
+    ) }) }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsx(Tooltip, { title: markAsReadText, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        disabled: isDisabled,
+        onClick: () => {
+          onSwitchReadStatus([...selectedNotifications], !isOneRead);
+        },
+        children: /* @__PURE__ */ jsx(IconComponent, { "aria-label": markAsReadText })
       }
-    },
-    /* @__PURE__ */ React.createElement(IconComponent, { "aria-label": markAsReadText })
-  )))));
+    ) }) }) })
+  ] });
 };
 
 export { BulkActions };

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

@@ -1 +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';\nimport MarkAllReadIcon from '@material-ui/icons/DoneAll';\n\nexport const BulkActions = ({\n  selectedNotifications,\n  notifications,\n  isUnread,\n  onSwitchReadStatus,\n  onSwitchSavedStatus,\n  onMarkAllRead,\n}: {\n  selectedNotifications: Set<Notification['id']>;\n  notifications: Notification[];\n  isUnread?: boolean;\n  onSwitchReadStatus: (ids: Notification['id'][], newStatus: boolean) => void;\n  onSwitchSavedStatus: (ids: Notification['id'][], newStatus: boolean) => void;\n  onMarkAllRead?: () => 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 xs={3}>\n        {onMarkAllRead ? (\n          <Tooltip title=\"Mark all read\">\n            <div>\n              {/* The <div> here is a workaround for the Tooltip which does not work for a \"disabled\" child */}\n              <IconButton disabled={!isUnread} onClick={onMarkAllRead}>\n                <MarkAllReadIcon aria-label={markAsSavedText} />\n              </IconButton>\n            </div>\n          </Tooltip>\n        ) : (\n          <div />\n        )}\n      </Grid>\n\n      <Grid item xs={3}>\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 xs={3}>\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":";;;;;;;;;;AA0BO,MAAM,cAAc,CAAC;AAAA,EAC1B,qBAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAOM,KAAA;AACJ,EAAM,MAAA,UAAA,GAAa,sBAAsB,IAAS,KAAA,CAAA;AAClD,EAAA,MAAM,oBAAoB,aAAc,CAAA,MAAA;AAAA,IAAO,CAC7C,YAAA,KAAA,qBAAA,CAAsB,GAAI,CAAA,YAAA,CAAa,EAAE;AAAA,GAC3C;AAEA,EAAM,MAAA,SAAA,GAAY,CAAC,CAAC,iBAAkB,CAAA,IAAA;AAAA,IACpC,CAAC,YAAA,KAA+B,CAAC,CAAC,YAAa,CAAA;AAAA,GACjD;AACA,EAAM,MAAA,UAAA,GAAa,CAAC,CAAC,iBAAkB,CAAA,IAAA;AAAA,IACrC,CAAC,YAAA,KAA+B,CAAC,CAAC,YAAa,CAAA;AAAA,GACjD;AAEA,EAAM,MAAA,cAAA,GAAiB,YACnB,8BACA,GAAA,uBAAA;AACJ,EAAM,MAAA,aAAA,GAAgB,YAAY,gBAAmB,GAAA,cAAA;AAErD,EAAM,MAAA,eAAA,GAAkB,aACpB,wBACA,GAAA,yBAAA;AACJ,EAAM,MAAA,kBAAA,GAAqB,aAAa,iBAAoB,GAAA,eAAA;AAE5D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,MAAK,QACnB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,KACZ,aACC,mBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,KAAM,EAAA,eAAA,EAAA,sCACZ,KAEC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,QAAA,EAAU,CAAC,QAAA,EAAU,SAAS,aACxC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,mBAAgB,YAAY,EAAA,eAAA,EAAiB,CAChD,CACF,CACF,CAEA,mBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,IAAA,CAET,mBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,CAAA,EAAA,sCACZ,OAAQ,EAAA,EAAA,KAAA,EAAO,eACd,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,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;AAAA;AAC7D,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,kBAAmB,EAAA,EAAA,YAAA,EAAY,eAAiB,EAAA;AAAA,GAErD,CACF,CACF,CAAA,sCAEC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,qBACZ,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;AAAA;AAC3D,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,YAAA,EAAY,cAAgB,EAAA;AAAA,GAE/C,CACF,CACF,CACF,CAAA;AAEJ;;;;"}
+{"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 { 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';\nimport MarkAllReadIcon from '@material-ui/icons/DoneAll';\n\nexport const BulkActions = ({\n  selectedNotifications,\n  notifications,\n  isUnread,\n  onSwitchReadStatus,\n  onSwitchSavedStatus,\n  onMarkAllRead,\n}: {\n  selectedNotifications: Set<Notification['id']>;\n  notifications: Notification[];\n  isUnread?: boolean;\n  onSwitchReadStatus: (ids: Notification['id'][], newStatus: boolean) => void;\n  onSwitchSavedStatus: (ids: Notification['id'][], newStatus: boolean) => void;\n  onMarkAllRead?: () => 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 xs={3}>\n        {onMarkAllRead ? (\n          <Tooltip title=\"Mark all read\">\n            <div>\n              {/* The <div> here is a workaround for the Tooltip which does not work for a \"disabled\" child */}\n              <IconButton disabled={!isUnread} onClick={onMarkAllRead}>\n                <MarkAllReadIcon aria-label={markAsSavedText} />\n              </IconButton>\n            </div>\n          </Tooltip>\n        ) : (\n          <div />\n        )}\n      </Grid>\n\n      <Grid item xs={3}>\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 xs={3}>\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":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import { useApp } from '@backstage/core-plugin-api';
 import { SeverityIcon } from './SeverityIcon.esm.js';
@@ -9,9 +9,9 @@ const NotificationIcon = ({
   const app = useApp();
   if (notification.payload.icon) {
     const Icon = app.getSystemIcon(notification.payload.icon) ?? SvgIcon;
-    return /* @__PURE__ */ React.createElement(Icon, null);
+    return /* @__PURE__ */ jsx(Icon, {});
   }
-  return /* @__PURE__ */ React.createElement(SeverityIcon, { severity: notification.payload.severity });
+  return /* @__PURE__ */ jsx(SeverityIcon, { severity: notification.payload.severity });
 };
 
 export { NotificationIcon };

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationIcon.esm.js","sources":["../../../src/components/NotificationsTable/NotificationIcon.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 SvgIcon from '@material-ui/core/SvgIcon';\nimport { useApp } from '@backstage/core-plugin-api';\nimport { SeverityIcon } from './SeverityIcon';\n\nexport const NotificationIcon = ({\n  notification,\n}: {\n  notification: Notification;\n}) => {\n  const app = useApp();\n\n  if (notification.payload.icon) {\n    const Icon = app.getSystemIcon(notification.payload.icon) ?? SvgIcon;\n    return <Icon />;\n  }\n  return <SeverityIcon severity={notification.payload.severity} />;\n};\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AACF,CAEM,KAAA;AACJ,EAAA,MAAM,MAAM,MAAO,EAAA;AAEnB,EAAI,IAAA,YAAA,CAAa,QAAQ,IAAM,EAAA;AAC7B,IAAA,MAAM,OAAO,GAAI,CAAA,aAAA,CAAc,YAAa,CAAA,OAAA,CAAQ,IAAI,CAAK,IAAA,OAAA;AAC7D,IAAA,2CAAQ,IAAK,EAAA,IAAA,CAAA;AAAA;AAEf,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,QAAU,EAAA,YAAA,CAAa,QAAQ,QAAU,EAAA,CAAA;AAChE;;;;"}
+{"version":3,"file":"NotificationIcon.esm.js","sources":["../../../src/components/NotificationsTable/NotificationIcon.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 { Notification } from '@backstage/plugin-notifications-common';\nimport SvgIcon from '@material-ui/core/SvgIcon';\nimport { useApp } from '@backstage/core-plugin-api';\nimport { SeverityIcon } from './SeverityIcon';\n\nexport const NotificationIcon = ({\n  notification,\n}: {\n  notification: Notification;\n}) => {\n  const app = useApp();\n\n  if (notification.payload.icon) {\n    const Icon = app.getSystemIcon(notification.payload.icon) ?? SvgIcon;\n    return <Icon />;\n  }\n  return <SeverityIcon severity={notification.payload.severity} />;\n};\n"],"names":[],"mappings":";;;;;AAoBO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AACF,CAEM,KAAA;AACJ,EAAA,MAAM,MAAM,MAAO,EAAA;AAEnB,EAAI,IAAA,YAAA,CAAa,QAAQ,IAAM,EAAA;AAC7B,IAAA,MAAM,OAAO,GAAI,CAAA,aAAA,CAAc,YAAa,CAAA,OAAA,CAAQ,IAAI,CAAK,IAAA,OAAA;AAC7D,IAAA,2BAAQ,IAAK,EAAA,EAAA,CAAA;AAAA;AAEf,EAAA,uBAAQ,GAAA,CAAA,YAAA,EAAA,EAAa,QAAU,EAAA,YAAA,CAAa,QAAQ,QAAU,EAAA,CAAA;AAChE;;;;"}

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import throttle from 'lodash/throttle';
 import RelativeTime from 'react-relative-time';
 import Box from '@material-ui/core/Box';
@@ -52,10 +53,10 @@ const NotificationsTable = ({
   const notificationsApi = useApi(notificationsApiRef);
   const alertApi = useApi(alertApiRef);
   const confirm = useConfirm();
-  const [selectedNotifications, setSelectedNotifications] = React.useState(
+  const [selectedNotifications, setSelectedNotifications] = useState(
     /* @__PURE__ */ new Set()
   );
-  const onNotificationsSelectChange = React.useCallback(
+  const onNotificationsSelectChange = useCallback(
     (ids, checked) => {
       let newSelect;
       if (checked) {
@@ -68,7 +69,7 @@ const NotificationsTable = ({
     },
     [selectedNotifications, setSelectedNotifications]
   );
-  const onSwitchReadStatus = React.useCallback(
+  const onSwitchReadStatus = useCallback(
     (ids, newStatus) => {
       notificationsApi.updateNotifications({
         ids,
@@ -77,7 +78,7 @@ const NotificationsTable = ({
     },
     [notificationsApi, onUpdate]
   );
-  const onSwitchSavedStatus = React.useCallback(
+  const onSwitchSavedStatus = useCallback(
     (ids, newStatus) => {
       notificationsApi.updateNotifications({
         ids,
@@ -86,10 +87,16 @@ const NotificationsTable = ({
     },
     [notificationsApi, onUpdate]
   );
-  const onMarkAllRead = React.useCallback(() => {
+  const onMarkAllRead = useCallback(() => {
     confirm({
       title: "Are you sure?",
-      description: /* @__PURE__ */ React.createElement(React.Fragment, null, "Mark ", /* @__PURE__ */ React.createElement("b", null, "all"), " notifications as ", /* @__PURE__ */ React.createElement("b", null, "read"), "."),
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Mark ",
+        /* @__PURE__ */ jsx("b", { children: "all" }),
+        " notifications as ",
+        /* @__PURE__ */ jsx("b", { children: "read" }),
+        "."
+      ] }),
       confirmationText: "Mark All"
     }).then(async () => {
       const ids = (await notificationsApi.getNotifications({ read: false })).notifications?.map((notification) => notification.id);
@@ -106,11 +113,11 @@ const NotificationsTable = ({
       }
     });
   }, [alertApi, confirm, notificationsApi, onUpdate]);
-  const throttledContainsTextHandler = React.useMemo(
+  const throttledContainsTextHandler = useMemo(
     () => throttle(setContainsText, ThrottleDelayMs),
     [setContainsText]
   );
-  React.useEffect(() => {
+  useEffect(() => {
     const allShownIds = new Set(notifications.map((n) => n.id));
     const intersect = [...selectedNotifications].filter(
       (id) => allShownIds.has(id)
@@ -119,13 +126,13 @@ const NotificationsTable = ({
       setSelectedNotifications(new Set(intersect));
     }
   }, [notifications, selectedNotifications]);
-  const compactColumns = React.useMemo(() => {
+  const compactColumns = useMemo(() => {
     const showToolbar = notifications.length > 0;
     return [
       {
         /* selection column */
         width: "1rem",
-        title: showToolbar ? /* @__PURE__ */ React.createElement(
+        title: showToolbar ? /* @__PURE__ */ jsx(
           SelectAll,
           {
             count: selectedNotifications.size,
@@ -136,7 +143,7 @@ const NotificationsTable = ({
             )
           }
         ) : void 0,
-        render: (notification) => /* @__PURE__ */ React.createElement(
+        render: (notification) => /* @__PURE__ */ jsx(
           Checkbox,
           {
             color: "primary",
@@ -149,44 +156,62 @@ const NotificationsTable = ({
         /* compact-data column */
         customFilterAndSearch: () => true,
         render: (notification) => {
-          return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, className: classes.severityItem }, /* @__PURE__ */ React.createElement(NotificationIcon, { notification })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, notification.payload.link ? /* @__PURE__ */ React.createElement(
-            Link,
-            {
-              to: notification.payload.link,
-              onClick: () => {
-                if (markAsReadOnLinkOpen && !notification.read) {
-                  onSwitchReadStatus([notification.id], true);
+          return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+            /* @__PURE__ */ jsx(Grid, { item: true, className: classes.severityItem, children: /* @__PURE__ */ jsx(NotificationIcon, { notification }) }),
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 11, children: /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: notification.payload.link ? /* @__PURE__ */ jsx(
+                Link,
+                {
+                  to: notification.payload.link,
+                  onClick: () => {
+                    if (markAsReadOnLinkOpen && !notification.read) {
+                      onSwitchReadStatus([notification.id], true);
+                    }
+                  },
+                  children: notification.payload.title
                 }
-              }
-            },
-            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.user && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BroadcastIcon, { className: classes.broadcastIcon })), notification.origin && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-            Typography,
-            {
-              variant: "inherit",
-              className: classes.notificationInfoRow
-            },
-            notification.origin
-          ), "\u2022"), notification.payload.topic && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-            Typography,
-            {
-              variant: "inherit",
-              className: classes.notificationInfoRow
-            },
-            notification.payload.topic
-          ), "\u2022"), notification.created && /* @__PURE__ */ React.createElement(
-            RelativeTime,
-            {
-              value: notification.created,
-              className: classes.notificationInfoRow
-            }
-          )))));
+              ) : notification.payload.title }),
+              notification.payload.description ? /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.description, children: notification.payload.description }) : null,
+              /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+                !notification.user && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(BroadcastIcon, { className: classes.broadcastIcon }) }),
+                notification.origin && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "inherit",
+                      className: classes.notificationInfoRow,
+                      children: notification.origin
+                    }
+                  ),
+                  "\u2022"
+                ] }),
+                notification.payload.topic && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "inherit",
+                      className: classes.notificationInfoRow,
+                      children: notification.payload.topic
+                    }
+                  ),
+                  "\u2022"
+                ] }),
+                notification.created && /* @__PURE__ */ jsx(
+                  RelativeTime,
+                  {
+                    value: notification.created,
+                    className: classes.notificationInfoRow
+                  }
+                )
+              ] })
+            ] }) })
+          ] });
         }
       },
       {
         /* actions column */
         width: "1rem",
-        title: showToolbar ? /* @__PURE__ */ React.createElement(
+        title: showToolbar ? /* @__PURE__ */ jsx(
           BulkActions,
           {
             notifications,
@@ -197,7 +222,7 @@ const NotificationsTable = ({
             onMarkAllRead
           }
         ) : void 0,
-        render: (notification) => /* @__PURE__ */ React.createElement(
+        render: (notification) => /* @__PURE__ */ jsx(
           BulkActions,
           {
             notifications: [notification],
@@ -222,7 +247,7 @@ const NotificationsTable = ({
     classes.notificationInfoRow,
     markAsReadOnLinkOpen
   ]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Table,
     {
       isLoading,