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

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,28 @@
 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 = {
+    /** Mark notification as read when opening the link it contains, defaults to false */
+    markAsReadOnLinkOpen?: boolean;
+    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 +97,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;
@@ -98,21 +111,37 @@ declare function useTitleCounter(): {
     setNotificationCount: (newCount: number) => void;
 };
 
+declare module 'notistack' {
+    interface VariantOverrides {
+        low: true;
+        normal: true;
+        high: true;
+        critical: true;
+    }
+}
 /** @public */
 declare const NotificationsSidebarItem: (props?: {
     webNotificationsEnabled?: boolean;
     titleCounterEnabled?: boolean;
+    snackbarEnabled?: boolean;
+    className?: string;
+    icon?: IconComponent;
+    text?: string;
+    disableHighlight?: boolean;
+    noTrack?: boolean;
 }) => React__default.JSX.Element;
 
 /** @public */
 type NotificationsTableProps = Pick<TableProps, 'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount'> & {
+    markAsReadOnLinkOpen?: boolean;
     isLoading?: boolean;
+    isUnread: boolean;
     notifications?: Notification$1[];
     onUpdate: () => void;
     setContainsText: (search: string) => void;
     pageSize: number;
 };
 /** @public */
-declare const NotificationsTable: ({ isLoading, notifications, onUpdate, setContainsText, onPageChange, onRowsPerPageChange, page, pageSize, totalCount, }: NotificationsTableProps) => React__default.JSX.Element;
+declare const NotificationsTable: ({ markAsReadOnLinkOpen, isLoading, notifications, isUnread, 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 };