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

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @backstage/plugin-notifications
 
+## 0.2.1-next.0
+
+### Patch Changes
+
+- e6bf85f: Allow overriding `NotificationsPage` page properties
+- a42a19b: Empty descriptions are not rendered to improve the look&feel.
+- 1bc3b86: Fix to show web notifications even when browser is on foreground. Fix duplicate notifications with multiple tabs.
+- f793112: Allow defining `className` and additional properties for `NotificationsSideBarItem`
+- e1c7d6e: Fix infinite loop in the notification title counter
+- fcda449: The rendered size of a notification is limited for very long descriptions.
+- Updated dependencies
+  - @backstage/theme@0.5.4-next.0
+  - @backstage/core-components@0.14.5-next.0
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/errors@1.2.4
+  - @backstage/types@1.1.1
+  - @backstage/plugin-notifications-common@0.0.3
+  - @backstage/plugin-signals-react@0.0.3
+
+## 0.2.0
+
+### Minor Changes
+
+- 939b4ec: Notifications-backend URL query parameter changed from `minimal_severity` to `minimumSeverity`.
+- ec40998: On the Notifications page, the user can trigger "Save" or "Mark as read" actions once for multiple selected notifications.
+
+### Patch Changes
+
+- abfbcfc: Updated dependency `@testing-library/react` to `^15.0.0`.
+- 9a41a7b: Migrate signals and notifications to the new backend in local development
+- 939b4ec: The severity icons now get their colors from the theme.
+- Updated dependencies
+  - @backstage/plugin-notifications-common@0.0.3
+  - @backstage/core-components@0.14.4
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/theme@0.5.3
+  - @backstage/plugin-signals-react@0.0.3
+  - @backstage/errors@1.2.4
+  - @backstage/types@1.1.1
+
 ## 0.2.0-next.1
 
 ### Minor Changes

package/dist/api/NotificationsApi.esm.js

@@ -0,0 +1,8 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+
+const notificationsApiRef = createApiRef({
+  id: "plugin.notifications.service"
+});
+
+export { notificationsApiRef };
+//# sourceMappingURL=NotificationsApi.esm.js.map

package/dist/api/NotificationsApi.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsApi.esm.js","sources":["../../src/api/NotificationsApi.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 */\nimport { createApiRef } from '@backstage/core-plugin-api';\nimport {\n  Notification,\n  NotificationSeverity,\n  NotificationStatus,\n} from '@backstage/plugin-notifications-common';\n\n/** @public */\nexport const notificationsApiRef = createApiRef<NotificationsApi>({\n  id: 'plugin.notifications.service',\n});\n\n/** @public */\nexport type GetNotificationsOptions = {\n  offset?: number;\n  limit?: number;\n  search?: string;\n  read?: boolean;\n  saved?: boolean;\n  createdAfter?: Date;\n  sort?: 'created' | 'topic' | 'origin';\n  sortOrder?: 'asc' | 'desc';\n  minimumSeverity?: NotificationSeverity;\n};\n\n/** @public */\nexport type UpdateNotificationsOptions = {\n  ids: string[];\n  read?: boolean;\n  saved?: boolean;\n};\n\n/** @public */\nexport type GetNotificationsResponse = {\n  notifications: Notification[];\n  totalCount: number;\n};\n\n/** @public */\nexport interface NotificationsApi {\n  getNotifications(\n    options?: GetNotificationsOptions,\n  ): Promise<GetNotificationsResponse>;\n\n  getNotification(id: string): Promise<Notification>;\n\n  getStatus(): Promise<NotificationStatus>;\n\n  updateNotifications(\n    options: UpdateNotificationsOptions,\n  ): Promise<Notification[]>;\n}\n"],"names":[],"mappings":";;AAuBO,MAAM,sBAAsB,YAA+B,CAAA;AAAA,EAChE,EAAI,EAAA,8BAAA;AACN,CAAC;;;;"}

package/dist/api/NotificationsClient.esm.js

@@ -0,0 +1,74 @@
+import { ResponseError } from '@backstage/errors';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class NotificationsClient {
+  constructor(options) {
+    __publicField(this, "discoveryApi");
+    __publicField(this, "fetchApi");
+    this.discoveryApi = options.discoveryApi;
+    this.fetchApi = options.fetchApi;
+  }
+  async getNotifications(options) {
+    var _a;
+    const queryString = new URLSearchParams();
+    if ((options == null ? void 0 : options.limit) !== void 0) {
+      queryString.append("limit", options.limit.toString(10));
+    }
+    if ((options == null ? void 0 : options.offset) !== void 0) {
+      queryString.append("offset", options.offset.toString(10));
+    }
+    if ((options == null ? void 0 : options.sort) !== void 0) {
+      queryString.append(
+        "orderField",
+        `${options.sort},${(_a = options == null ? void 0 : options.sortOrder) != null ? _a : "desc"}`
+      );
+    }
+    if (options == null ? void 0 : options.search) {
+      queryString.append("search", options.search);
+    }
+    if ((options == null ? void 0 : options.read) !== void 0) {
+      queryString.append("read", options.read ? "true" : "false");
+    }
+    if ((options == null ? void 0 : options.saved) !== void 0) {
+      queryString.append("saved", options.saved ? "true" : "false");
+    }
+    if ((options == null ? void 0 : options.createdAfter) !== void 0) {
+      queryString.append("createdAfter", options.createdAfter.toISOString());
+    }
+    if ((options == null ? void 0 : options.minimumSeverity) !== void 0) {
+      queryString.append("minimumSeverity", options.minimumSeverity);
+    }
+    const urlSegment = `?${queryString}`;
+    return await this.request(urlSegment);
+  }
+  async getNotification(id) {
+    return await this.request(`${id}`);
+  }
+  async getStatus() {
+    return await this.request("status");
+  }
+  async updateNotifications(options) {
+    return await this.request("update", {
+      method: "POST",
+      body: JSON.stringify(options),
+      headers: { "Content-Type": "application/json" }
+    });
+  }
+  async request(path, init) {
+    const baseUrl = `${await this.discoveryApi.getBaseUrl("notifications")}/`;
+    const url = new URL(path, baseUrl);
+    const response = await this.fetchApi.fetch(url.toString(), init);
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return response.json();
+  }
+}
+
+export { NotificationsClient };
+//# sourceMappingURL=NotificationsClient.esm.js.map

package/dist/api/NotificationsClient.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsClient.esm.js","sources":["../../src/api/NotificationsClient.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 */\nimport {\n  GetNotificationsOptions,\n  GetNotificationsResponse,\n  NotificationsApi,\n  UpdateNotificationsOptions,\n} from './NotificationsApi';\nimport { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';\nimport { ResponseError } from '@backstage/errors';\nimport {\n  Notification,\n  NotificationStatus,\n} from '@backstage/plugin-notifications-common';\n\n/** @public */\nexport class NotificationsClient implements NotificationsApi {\n  private readonly discoveryApi: DiscoveryApi;\n  private readonly fetchApi: FetchApi;\n\n  public constructor(options: {\n    discoveryApi: DiscoveryApi;\n    fetchApi: FetchApi;\n  }) {\n    this.discoveryApi = options.discoveryApi;\n    this.fetchApi = options.fetchApi;\n  }\n\n  async getNotifications(\n    options?: GetNotificationsOptions,\n  ): Promise<GetNotificationsResponse> {\n    const queryString = new URLSearchParams();\n    if (options?.limit !== undefined) {\n      queryString.append('limit', options.limit.toString(10));\n    }\n    if (options?.offset !== undefined) {\n      queryString.append('offset', options.offset.toString(10));\n    }\n    if (options?.sort !== undefined) {\n      queryString.append(\n        'orderField',\n        `${options.sort},${options?.sortOrder ?? 'desc'}`,\n      );\n    }\n    if (options?.search) {\n      queryString.append('search', options.search);\n    }\n    if (options?.read !== undefined) {\n      queryString.append('read', options.read ? 'true' : 'false');\n    }\n    if (options?.saved !== undefined) {\n      queryString.append('saved', options.saved ? 'true' : 'false');\n    }\n    if (options?.createdAfter !== undefined) {\n      queryString.append('createdAfter', options.createdAfter.toISOString());\n    }\n    if (options?.minimumSeverity !== undefined) {\n      queryString.append('minimumSeverity', options.minimumSeverity);\n    }\n    const urlSegment = `?${queryString}`;\n\n    return await this.request<GetNotificationsResponse>(urlSegment);\n  }\n\n  async getNotification(id: string): Promise<Notification> {\n    return await this.request<Notification>(`${id}`);\n  }\n\n  async getStatus(): Promise<NotificationStatus> {\n    return await this.request<NotificationStatus>('status');\n  }\n\n  async updateNotifications(\n    options: UpdateNotificationsOptions,\n  ): Promise<Notification[]> {\n    return await this.request<Notification[]>('update', {\n      method: 'POST',\n      body: JSON.stringify(options),\n      headers: { 'Content-Type': 'application/json' },\n    });\n  }\n\n  private async request<T>(path: string, init?: any): Promise<T> {\n    const baseUrl = `${await this.discoveryApi.getBaseUrl('notifications')}/`;\n    const url = new URL(path, baseUrl);\n\n    const response = await this.fetchApi.fetch(url.toString(), init);\n\n    if (!response.ok) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    return response.json() as Promise<T>;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/{esm/index-ijQzv-25.esm.js → components/NotificationsFilters/NotificationsFilters.esm.js}

@@ -1,34 +1,11 @@
-import React, { useEffect } from 'react';
-import throttle from 'lodash/throttle';
-import { ResponseErrorPanel, PageWithHeader, Content } from '@backstage/core-components';
-import Grid from '@material-ui/core/Grid';
-import { useSignal } from '@backstage/plugin-signals-react';
-import { useNotificationsApi, NotificationsTable } from '../index.esm.js';
+import React from 'react';
 import Divider from '@material-ui/core/Divider';
 import FormControl from '@material-ui/core/FormControl';
+import Grid from '@material-ui/core/Grid';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import Typography from '@material-ui/core/Typography';
-import '@backstage/core-plugin-api';
-import '@backstage/errors';
-import 'react-use/esm/useAsyncRetry';
-import '@material-ui/icons/Notifications';
-import 'react-relative-time';
-import '@material-ui/core/Box';
-import '@material-ui/core/Checkbox';
-import '@material-ui/icons/CheckOutlined';
-import '@material-ui/icons/ErrorOutline';
-import '@material-ui/icons/WarningOutlined';
-import '@material-ui/icons/InfoOutlined';
-import '@material-ui/core/FormControlLabel';
-import '@material-ui/core/styles';
-import '@material-ui/core/IconButton';
-import '@material-ui/core/Tooltip';
-import '@material-ui/icons/Markunread';
-import '@material-ui/icons/CheckCircle';
-import '@material-ui/icons/LabelOff';
-import '@material-ui/icons/Label';
 
 const CreatedAfterOptions = {
   last24h: {
@@ -184,102 +161,5 @@ const NotificationsFilters = ({
   )))));
 };
 
-const ThrottleDelayMs = 2e3;
-const NotificationsPage = () => {
-  const [refresh, setRefresh] = React.useState(false);
-  const { lastSignal } = useSignal("notifications");
-  const [unreadOnly, setUnreadOnly] = React.useState(true);
-  const [saved, setSaved] = React.useState(void 0);
-  const [pageNumber, setPageNumber] = React.useState(0);
-  const [pageSize, setPageSize] = React.useState(5);
-  const [containsText, setContainsText] = React.useState();
-  const [createdAfter, setCreatedAfter] = React.useState("lastWeek");
-  const [sorting, setSorting] = React.useState(
-    SortByOptions.newest.sortBy
-  );
-  const [severity, setSeverity] = React.useState("low");
-  const { error, value, retry, loading } = useNotificationsApi(
-    (api) => {
-      const options = {
-        search: containsText,
-        limit: pageSize,
-        offset: pageNumber * pageSize,
-        minimumSeverity: severity,
-        ...sorting || {}
-      };
-      if (unreadOnly !== void 0) {
-        options.read = !unreadOnly;
-      }
-      if (saved !== void 0) {
-        options.saved = saved;
-      }
-      const createdAfterDate = CreatedAfterOptions[createdAfter].getDate();
-      if (createdAfterDate.valueOf() > 0) {
-        options.createdAfter = createdAfterDate;
-      }
-      return api.getNotifications(options);
-    },
-    [
-      containsText,
-      unreadOnly,
-      createdAfter,
-      pageNumber,
-      pageSize,
-      sorting,
-      saved,
-      severity
-    ]
-  );
-  const throttledSetRefresh = React.useMemo(
-    () => throttle(setRefresh, ThrottleDelayMs),
-    [setRefresh]
-  );
-  useEffect(() => {
-    if (refresh && !loading) {
-      retry();
-      setRefresh(false);
-    }
-  }, [refresh, setRefresh, retry, loading]);
-  useEffect(() => {
-    if (lastSignal && lastSignal.action) {
-      throttledSetRefresh(true);
-    }
-  }, [lastSignal, throttledSetRefresh]);
-  const onUpdate = () => {
-    throttledSetRefresh(true);
-  };
-  if (error) {
-    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
-  }
-  return /* @__PURE__ */ React.createElement(PageWithHeader, { title: "Notifications", themeId: "tool" }, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
-    NotificationsFilters,
-    {
-      unreadOnly,
-      onUnreadOnlyChanged: setUnreadOnly,
-      createdAfter,
-      onCreatedAfterChanged: setCreatedAfter,
-      onSortingChanged: setSorting,
-      sorting,
-      saved,
-      onSavedChanged: setSaved,
-      severity,
-      onSeverityChanged: setSeverity
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 10 }, /* @__PURE__ */ React.createElement(
-    NotificationsTable,
-    {
-      isLoading: loading,
-      notifications: value == null ? void 0 : value.notifications,
-      onUpdate,
-      setContainsText,
-      onPageChange: setPageNumber,
-      onRowsPerPageChange: setPageSize,
-      page: pageNumber,
-      pageSize,
-      totalCount: value == null ? void 0 : value.totalCount
-    }
-  )))));
-};
-
-export { NotificationsPage };
-//# sourceMappingURL=index-ijQzv-25.esm.js.map
+export { CreatedAfterOptions, NotificationsFilters, SortByOptions };
+//# sourceMappingURL=NotificationsFilters.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsFilters.esm.js","sources":["../../../src/components/NotificationsFilters/NotificationsFilters.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';\n\nimport Divider from '@material-ui/core/Divider';\nimport FormControl from '@material-ui/core/FormControl';\nimport Grid from '@material-ui/core/Grid';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport Typography from '@material-ui/core/Typography';\nimport { GetNotificationsOptions } from '../../api';\nimport { NotificationSeverity } from '@backstage/plugin-notifications-common';\n\nexport type SortBy = Required<\n  Pick<GetNotificationsOptions, 'sort' | 'sortOrder'>\n>;\n\nexport type NotificationsFiltersProps = {\n  unreadOnly?: boolean;\n  onUnreadOnlyChanged: (checked: boolean | undefined) => void;\n  createdAfter?: string;\n  onCreatedAfterChanged: (value: string) => void;\n  sorting: SortBy;\n  onSortingChanged: (sortBy: SortBy) => void;\n  saved?: boolean;\n  onSavedChanged: (checked: boolean | undefined) => void;\n  severity: NotificationSeverity;\n  onSeverityChanged: (severity: NotificationSeverity) => void;\n};\n\nexport const CreatedAfterOptions: {\n  [key: string]: { label: string; getDate: () => Date };\n} = {\n  last24h: {\n    label: 'Last 24h',\n    getDate: () => new Date(Date.now() - 24 * 3600 * 1000),\n  },\n  lastWeek: {\n    label: 'Last week',\n    getDate: () => new Date(Date.now() - 7 * 24 * 3600 * 1000),\n  },\n  all: {\n    label: 'Any time',\n    getDate: () => new Date(0),\n  },\n};\n\nexport const SortByOptions: {\n  [key: string]: {\n    label: string;\n    sortBy: SortBy;\n  };\n} = {\n  newest: {\n    label: 'Newest on top',\n    sortBy: {\n      sort: 'created',\n      sortOrder: 'desc',\n    },\n  },\n  oldest: {\n    label: 'Oldest on top',\n    sortBy: {\n      sort: 'created',\n      sortOrder: 'asc',\n    },\n  },\n  topic: {\n    label: 'Topic',\n    sortBy: {\n      sort: 'topic',\n      sortOrder: 'asc',\n    },\n  },\n  origin: {\n    label: 'Origin',\n    sortBy: {\n      sort: 'origin',\n      sortOrder: 'asc',\n    },\n  },\n};\n\nconst getSortByText = (sortBy?: SortBy): string => {\n  if (sortBy?.sort === 'created' && sortBy?.sortOrder === 'asc') {\n    return 'oldest';\n  }\n  if (sortBy?.sort === 'topic') {\n    return 'topic';\n  }\n  if (sortBy?.sort === 'origin') {\n    return 'origin';\n  }\n\n  return 'newest';\n};\n\nconst AllSeverityOptions: { [key in NotificationSeverity]: string } = {\n  critical: 'Critical',\n  high: 'High',\n  normal: 'Normal',\n  low: 'Low',\n};\n\nexport const NotificationsFilters = ({\n  sorting,\n  onSortingChanged,\n  unreadOnly,\n  onUnreadOnlyChanged,\n  createdAfter,\n  onCreatedAfterChanged,\n  saved,\n  onSavedChanged,\n  severity,\n  onSeverityChanged,\n}: NotificationsFiltersProps) => {\n  const sortByText = getSortByText(sorting);\n\n  const handleOnCreatedAfterChanged = (\n    event: React.ChangeEvent<{ name?: string; value: unknown }>,\n  ) => {\n    onCreatedAfterChanged(event.target.value as string);\n  };\n\n  const handleOnViewChanged = (\n    event: React.ChangeEvent<{ name?: string; value: unknown }>,\n  ) => {\n    if (event.target.value === 'unread') {\n      onUnreadOnlyChanged(true);\n      onSavedChanged(undefined);\n    } else if (event.target.value === 'read') {\n      onUnreadOnlyChanged(false);\n      onSavedChanged(undefined);\n    } else if (event.target.value === 'saved') {\n      onUnreadOnlyChanged(undefined);\n      onSavedChanged(true);\n    } else {\n      // All\n      onUnreadOnlyChanged(undefined);\n      onSavedChanged(undefined);\n    }\n  };\n\n  const handleOnSortByChanged = (\n    event: React.ChangeEvent<{ name?: string; value: unknown }>,\n  ) => {\n    const idx = (event.target.value as string) || 'newest';\n    const option = SortByOptions[idx];\n    onSortingChanged({ ...option.sortBy });\n  };\n\n  let viewValue = 'all';\n  if (saved) {\n    viewValue = 'saved';\n  } else if (unreadOnly) {\n    viewValue = 'unread';\n  } else if (unreadOnly === false) {\n    viewValue = 'read';\n  }\n\n  const handleOnSeverityChanged = (\n    event: React.ChangeEvent<{ name?: string; value: unknown }>,\n  ) => {\n    const value: NotificationSeverity =\n      (event.target.value as NotificationSeverity) || 'normal';\n    onSeverityChanged(value);\n  };\n\n  return (\n    <>\n      <Grid container>\n        <Grid item xs={12}>\n          <Typography variant=\"h6\">Filters</Typography>\n          <Divider variant=\"fullWidth\" />\n        </Grid>\n\n        <Grid item xs={12}>\n          <FormControl fullWidth variant=\"outlined\" size=\"small\">\n            <InputLabel id=\"notifications-filter-view\">View</InputLabel>\n            <Select\n              labelId=\"notifications-filter-view\"\n              label=\"View\"\n              value={viewValue}\n              onChange={handleOnViewChanged}\n            >\n              <MenuItem value=\"unread\">New only</MenuItem>\n              <MenuItem value=\"saved\">Saved</MenuItem>\n              <MenuItem value=\"read\">Marked as read</MenuItem>\n              <MenuItem value=\"all\">All</MenuItem>\n            </Select>\n          </FormControl>\n        </Grid>\n\n        <Grid item xs={12}>\n          <FormControl fullWidth variant=\"outlined\" size=\"small\">\n            <InputLabel id=\"notifications-filter-created\">\n              Created after\n            </InputLabel>\n\n            <Select\n              label=\"Created after\"\n              labelId=\"notifications-filter-created\"\n              placeholder=\"Notifications since\"\n              value={createdAfter}\n              onChange={handleOnCreatedAfterChanged}\n            >\n              {Object.keys(CreatedAfterOptions).map((key: string) => (\n                <MenuItem value={key} key={key}>\n                  {CreatedAfterOptions[key].label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n\n        <Grid item xs={12}>\n          <FormControl fullWidth variant=\"outlined\" size=\"small\">\n            <InputLabel id=\"notifications-filter-sort\">Sort by</InputLabel>\n\n            <Select\n              label=\"Sort by\"\n              labelId=\"notifications-filter-sort\"\n              placeholder=\"Field to sort by\"\n              value={sortByText}\n              onChange={handleOnSortByChanged}\n            >\n              {Object.keys(SortByOptions).map((key: string) => (\n                <MenuItem value={key} key={key}>\n                  {SortByOptions[key].label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n\n        <Grid item xs={12}>\n          <FormControl fullWidth variant=\"outlined\" size=\"small\">\n            <InputLabel id=\"notifications-filter-severity\">Severity</InputLabel>\n\n            <Select\n              label=\"Severity\"\n              labelId=\"notifications-filter-severity\"\n              value={severity}\n              onChange={handleOnSeverityChanged}\n            >\n              {Object.keys(AllSeverityOptions).map((key: string) => (\n                <MenuItem value={key} key={key}>\n                  {AllSeverityOptions[key as NotificationSeverity]}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/NotificationsPage/NotificationsPage.esm.js

@@ -0,0 +1,130 @@
+import React, { useEffect } from 'react';
+import throttle from 'lodash/throttle';
+import { ResponseErrorPanel, PageWithHeader, Content } from '@backstage/core-components';
+import Grid from '@material-ui/core/Grid';
+import { useSignal } from '@backstage/plugin-signals-react';
+import { NotificationsTable } from '../NotificationsTable/NotificationsTable.esm.js';
+import { useNotificationsApi } from '../../hooks/useNotificationsApi.esm.js';
+import '../../routes.esm.js';
+import '@backstage/core-plugin-api';
+import 'react-router-dom';
+import { SortByOptions, NotificationsFilters, CreatedAfterOptions } from '../NotificationsFilters/NotificationsFilters.esm.js';
+
+const ThrottleDelayMs = 2e3;
+const NotificationsPage = (props) => {
+  const {
+    title = "Notifications",
+    themeId = "tool",
+    subtitle,
+    tooltip,
+    type,
+    typeLink
+  } = props != null ? props : {};
+  const [refresh, setRefresh] = React.useState(false);
+  const { lastSignal } = useSignal("notifications");
+  const [unreadOnly, setUnreadOnly] = React.useState(true);
+  const [saved, setSaved] = React.useState(void 0);
+  const [pageNumber, setPageNumber] = React.useState(0);
+  const [pageSize, setPageSize] = React.useState(5);
+  const [containsText, setContainsText] = React.useState();
+  const [createdAfter, setCreatedAfter] = React.useState("lastWeek");
+  const [sorting, setSorting] = React.useState(
+    SortByOptions.newest.sortBy
+  );
+  const [severity, setSeverity] = React.useState("low");
+  const { error, value, retry, loading } = useNotificationsApi(
+    (api) => {
+      const options = {
+        search: containsText,
+        limit: pageSize,
+        offset: pageNumber * pageSize,
+        minimumSeverity: severity,
+        ...sorting || {}
+      };
+      if (unreadOnly !== void 0) {
+        options.read = !unreadOnly;
+      }
+      if (saved !== void 0) {
+        options.saved = saved;
+      }
+      const createdAfterDate = CreatedAfterOptions[createdAfter].getDate();
+      if (createdAfterDate.valueOf() > 0) {
+        options.createdAfter = createdAfterDate;
+      }
+      return api.getNotifications(options);
+    },
+    [
+      containsText,
+      unreadOnly,
+      createdAfter,
+      pageNumber,
+      pageSize,
+      sorting,
+      saved,
+      severity
+    ]
+  );
+  const throttledSetRefresh = React.useMemo(
+    () => throttle(setRefresh, ThrottleDelayMs),
+    [setRefresh]
+  );
+  useEffect(() => {
+    if (refresh && !loading) {
+      retry();
+      setRefresh(false);
+    }
+  }, [refresh, setRefresh, retry, loading]);
+  useEffect(() => {
+    if (lastSignal && lastSignal.action) {
+      throttledSetRefresh(true);
+    }
+  }, [lastSignal, throttledSetRefresh]);
+  const onUpdate = () => {
+    throttledSetRefresh(true);
+  };
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
+  }
+  return /* @__PURE__ */ React.createElement(
+    PageWithHeader,
+    {
+      title,
+      themeId,
+      tooltip,
+      subtitle,
+      type,
+      typeLink
+    },
+    /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
+      NotificationsFilters,
+      {
+        unreadOnly,
+        onUnreadOnlyChanged: setUnreadOnly,
+        createdAfter,
+        onCreatedAfterChanged: setCreatedAfter,
+        onSortingChanged: setSorting,
+        sorting,
+        saved,
+        onSavedChanged: setSaved,
+        severity,
+        onSeverityChanged: setSeverity
+      }
+    )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 10 }, /* @__PURE__ */ React.createElement(
+      NotificationsTable,
+      {
+        isLoading: loading,
+        notifications: value == null ? void 0 : value.notifications,
+        onUpdate,
+        setContainsText,
+        onPageChange: setPageNumber,
+        onRowsPerPageChange: setPageSize,
+        page: pageNumber,
+        pageSize,
+        totalCount: value == null ? void 0 : value.totalCount
+      }
+    ))))
+  );
+};
+
+export { NotificationsPage };
+//# sourceMappingURL=NotificationsPage.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsPage.esm.js","sources":["../../../src/components/NotificationsPage/NotificationsPage.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 */\n\nimport React, { useEffect } from 'react';\nimport throttle from 'lodash/throttle';\nimport {\n  Content,\n  PageWithHeader,\n  ResponseErrorPanel,\n} from '@backstage/core-components';\nimport Grid from '@material-ui/core/Grid';\nimport { useSignal } from '@backstage/plugin-signals-react';\n\nimport { NotificationsTable } from '../NotificationsTable';\nimport { useNotificationsApi } from '../../hooks';\nimport {\n  CreatedAfterOptions,\n  NotificationsFilters,\n  SortBy,\n  SortByOptions,\n} from '../NotificationsFilters';\nimport { GetNotificationsOptions } from '../../api';\nimport { NotificationSeverity } from '@backstage/plugin-notifications-common';\n\nconst ThrottleDelayMs = 2000;\n\n/** @public */\nexport type NotificationsPageProps = {\n  title?: string;\n  themeId?: string;\n  subtitle?: string;\n  tooltip?: string;\n  type?: string;\n  typeLink?: string;\n};\n\nexport const NotificationsPage = (props?: NotificationsPageProps) => {\n  const {\n    title = 'Notifications',\n    themeId = 'tool',\n    subtitle,\n    tooltip,\n    type,\n    typeLink,\n  } = props ?? {};\n\n  const [refresh, setRefresh] = React.useState(false);\n  const { lastSignal } = useSignal('notifications');\n  const [unreadOnly, setUnreadOnly] = React.useState<boolean | undefined>(true);\n  const [saved, setSaved] = React.useState<boolean | undefined>(undefined);\n  const [pageNumber, setPageNumber] = React.useState(0);\n  const [pageSize, setPageSize] = React.useState(5);\n  const [containsText, setContainsText] = React.useState<string>();\n  const [createdAfter, setCreatedAfter] = React.useState<string>('lastWeek');\n  const [sorting, setSorting] = React.useState<SortBy>(\n    SortByOptions.newest.sortBy,\n  );\n  const [severity, setSeverity] = React.useState<NotificationSeverity>('low');\n\n  const { error, value, retry, loading } = useNotificationsApi(\n    api => {\n      const options: GetNotificationsOptions = {\n        search: containsText,\n        limit: pageSize,\n        offset: pageNumber * pageSize,\n        minimumSeverity: severity,\n        ...(sorting || {}),\n      };\n      if (unreadOnly !== undefined) {\n        options.read = !unreadOnly;\n      }\n      if (saved !== undefined) {\n        options.saved = saved;\n      }\n\n      const createdAfterDate = CreatedAfterOptions[createdAfter].getDate();\n      if (createdAfterDate.valueOf() > 0) {\n        options.createdAfter = createdAfterDate;\n      }\n\n      return api.getNotifications(options);\n    },\n    [\n      containsText,\n      unreadOnly,\n      createdAfter,\n      pageNumber,\n      pageSize,\n      sorting,\n      saved,\n      severity,\n    ],\n  );\n\n  const throttledSetRefresh = React.useMemo(\n    () => throttle(setRefresh, ThrottleDelayMs),\n    [setRefresh],\n  );\n\n  useEffect(() => {\n    if (refresh && !loading) {\n      retry();\n      setRefresh(false);\n    }\n  }, [refresh, setRefresh, retry, loading]);\n\n  useEffect(() => {\n    if (lastSignal && lastSignal.action) {\n      throttledSetRefresh(true);\n    }\n  }, [lastSignal, throttledSetRefresh]);\n\n  const onUpdate = () => {\n    throttledSetRefresh(true);\n  };\n\n  if (error) {\n    return <ResponseErrorPanel error={error} />;\n  }\n\n  return (\n    <PageWithHeader\n      title={title}\n      themeId={themeId}\n      tooltip={tooltip}\n      subtitle={subtitle}\n      type={type}\n      typeLink={typeLink}\n    >\n      <Content>\n        <Grid container>\n          <Grid item xs={2}>\n            <NotificationsFilters\n              unreadOnly={unreadOnly}\n              onUnreadOnlyChanged={setUnreadOnly}\n              createdAfter={createdAfter}\n              onCreatedAfterChanged={setCreatedAfter}\n              onSortingChanged={setSorting}\n              sorting={sorting}\n              saved={saved}\n              onSavedChanged={setSaved}\n              severity={severity}\n              onSeverityChanged={setSeverity}\n            />\n          </Grid>\n          <Grid item xs={10}>\n            <NotificationsTable\n              isLoading={loading}\n              notifications={value?.notifications}\n              onUpdate={onUpdate}\n              setContainsText={setContainsText}\n              onPageChange={setPageNumber}\n              onRowsPerPageChange={setPageSize}\n              page={pageNumber}\n              pageSize={pageSize}\n              totalCount={value?.totalCount}\n            />\n          </Grid>\n        </Grid>\n      </Content>\n    </PageWithHeader>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/NotificationsPage/index.esm.js

@@ -0,0 +1,2 @@
+export { NotificationsPage } from './NotificationsPage.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/components/NotificationsPage/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react';
+import { useNotificationsApi } from '../../hooks/useNotificationsApi.esm.js';
+import { useWebNotifications } from '../../hooks/useWebNotifications.esm.js';
+import { useTitleCounter } from '../../hooks/useTitleCounter.esm.js';
+import { SidebarItem } from '@backstage/core-components';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import { useApi, useRouteRef } from '@backstage/core-plugin-api';
+import { rootRouteRef } from '../../routes.esm.js';
+import { useSignal } from '@backstage/plugin-signals-react';
+import { notificationsApiRef } from '../../api/NotificationsApi.esm.js';
+import '@backstage/errors';
+
+const NotificationsSidebarItem = (props) => {
+  const {
+    webNotificationsEnabled = false,
+    titleCounterEnabled = true,
+    icon = NotificationsIcon,
+    text = "Notifications",
+    ...restProps
+  } = props != null ? props : { webNotificationsEnabled: false, titleCounterEnabled: true };
+  const { loading, error, value, retry } = useNotificationsApi(
+    (api) => api.getStatus()
+  );
+  const notificationsApi = useApi(notificationsApiRef);
+  const [unreadCount, setUnreadCount] = React.useState(0);
+  const notificationsRoute = useRouteRef(rootRouteRef);
+  const { lastSignal } = useSignal("notifications");
+  const { sendWebNotification } = useWebNotifications(webNotificationsEnabled);
+  const [refresh, setRefresh] = React.useState(false);
+  const { setNotificationCount } = useTitleCounter();
+  useEffect(() => {
+    if (refresh) {
+      retry();
+      setRefresh(false);
+    }
+  }, [refresh, retry]);
+  useEffect(() => {
+    const handleWebNotification = (signal) => {
+      if (!webNotificationsEnabled || signal.action !== "new_notification") {
+        return;
+      }
+      notificationsApi.getNotification(signal.notification_id).then((notification) => {
+        var _a;
+        if (!notification) {
+          return;
+        }
+        sendWebNotification({
+          id: notification.id,
+          title: notification.payload.title,
+          description: (_a = notification.payload.description) != null ? _a : "",
+          link: notification.payload.link
+        });
+      });
+    };
+    if (lastSignal && lastSignal.action) {
+      handleWebNotification(lastSignal);
+      setRefresh(true);
+    }
+  }, [
+    lastSignal,
+    sendWebNotification,
+    webNotificationsEnabled,
+    notificationsApi
+  ]);
+  useEffect(() => {
+    if (!loading && !error && value) {
+      setUnreadCount(value.unread);
+    }
+  }, [loading, error, value]);
+  useEffect(() => {
+    if (titleCounterEnabled) {
+      setNotificationCount(unreadCount);
+    }
+  }, [titleCounterEnabled, unreadCount, setNotificationCount]);
+  return /* @__PURE__ */ React.createElement(
+    SidebarItem,
+    {
+      to: notificationsRoute(),
+      hasNotifications: !error && !!unreadCount,
+      text,
+      icon,
+      ...restProps
+    }
+  );
+};
+
+export { NotificationsSidebarItem };
+//# sourceMappingURL=NotificationsSideBarItem.esm.js.map

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

@@ -0,0 +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, { useEffect } from 'react';\nimport { useNotificationsApi } from '../../hooks';\nimport { SidebarItem } from '@backstage/core-components';\nimport NotificationsIcon from '@material-ui/icons/Notifications';\nimport { IconComponent, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { rootRouteRef } from '../../routes';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { NotificationSignal } from '@backstage/plugin-notifications-common';\nimport { useWebNotifications } from '../../hooks/useWebNotifications';\nimport { useTitleCounter } from '../../hooks/useTitleCounter';\nimport { notificationsApiRef } from '../../api';\n\n/** @public */\nexport const NotificationsSidebarItem = (props?: {\n  webNotificationsEnabled?: boolean;\n  titleCounterEnabled?: boolean;\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    icon = NotificationsIcon,\n    text = 'Notifications',\n    ...restProps\n  } = props ?? { webNotificationsEnabled: false, titleCounterEnabled: true };\n\n  const { loading, error, value, retry } = useNotificationsApi(api =>\n    api.getStatus(),\n  );\n  const notificationsApi = useApi(notificationsApiRef);\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 } = useWebNotifications(webNotificationsEnabled);\n  const [refresh, setRefresh] = React.useState(false);\n  const { setNotificationCount } = useTitleCounter();\n\n  useEffect(() => {\n    if (refresh) {\n      retry();\n      setRefresh(false);\n    }\n  }, [refresh, retry]);\n\n  useEffect(() => {\n    const handleWebNotification = (signal: NotificationSignal) => {\n      if (!webNotificationsEnabled || signal.action !== 'new_notification') {\n        return;\n      }\n\n      notificationsApi\n        .getNotification(signal.notification_id)\n        .then(notification => {\n          if (!notification) {\n            return;\n          }\n          sendWebNotification({\n            id: notification.id,\n            title: notification.payload.title,\n            description: notification.payload.description ?? '',\n            link: notification.payload.link,\n          });\n        });\n    };\n\n    if (lastSignal && lastSignal.action) {\n      handleWebNotification(lastSignal);\n      setRefresh(true);\n    }\n  }, [\n    lastSignal,\n    sendWebNotification,\n    webNotificationsEnabled,\n    notificationsApi,\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  // TODO: Figure out if the count can be added to hasNotifications\n  return (\n    <SidebarItem\n      to={notificationsRoute()}\n      hasNotifications={!error && !!unreadCount}\n      text={text}\n      icon={icon}\n      {...restProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA4Ba,MAAA,wBAAA,GAA2B,CAAC,KAQnC,KAAA;AACJ,EAAM,MAAA;AAAA,IACJ,uBAA0B,GAAA,KAAA;AAAA,IAC1B,mBAAsB,GAAA,IAAA;AAAA,IACtB,IAAO,GAAA,iBAAA;AAAA,IACP,IAAO,GAAA,eAAA;AAAA,IACP,GAAG,SAAA;AAAA,MACD,KAAS,IAAA,IAAA,GAAA,KAAA,GAAA,EAAE,uBAAyB,EAAA,KAAA,EAAO,qBAAqB,IAAK,EAAA,CAAA;AAEzE,EAAA,MAAM,EAAE,OAAA,EAAS,KAAO,EAAA,KAAA,EAAO,OAAU,GAAA,mBAAA;AAAA,IAAoB,CAAA,GAAA,KAC3D,IAAI,SAAU,EAAA;AAAA,GAChB,CAAA;AACA,EAAM,MAAA,gBAAA,GAAmB,OAAO,mBAAmB,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AACtD,EAAM,MAAA,kBAAA,GAAqB,YAAY,YAAY,CAAA,CAAA;AAEnD,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAA8B,eAAe,CAAA,CAAA;AACpE,EAAA,MAAM,EAAE,mBAAA,EAAwB,GAAA,mBAAA,CAAoB,uBAAuB,CAAA,CAAA;AAC3E,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AAClD,EAAM,MAAA,EAAE,oBAAqB,EAAA,GAAI,eAAgB,EAAA,CAAA;AAEjD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAS,EAAA;AACX,MAAM,KAAA,EAAA,CAAA;AACN,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KAClB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,KAAK,CAAC,CAAA,CAAA;AAEnB,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,qBAAA,GAAwB,CAAC,MAA+B,KAAA;AAC5D,MAAA,IAAI,CAAC,uBAAA,IAA2B,MAAO,CAAA,MAAA,KAAW,kBAAoB,EAAA;AACpE,QAAA,OAAA;AAAA,OACF;AAEA,MAAA,gBAAA,CACG,eAAgB,CAAA,MAAA,CAAO,eAAe,CAAA,CACtC,KAAK,CAAgB,YAAA,KAAA;AAxE9B,QAAA,IAAA,EAAA,CAAA;AAyEU,QAAA,IAAI,CAAC,YAAc,EAAA;AACjB,UAAA,OAAA;AAAA,SACF;AACA,QAAoB,mBAAA,CAAA;AAAA,UAClB,IAAI,YAAa,CAAA,EAAA;AAAA,UACjB,KAAA,EAAO,aAAa,OAAQ,CAAA,KAAA;AAAA,UAC5B,WAAa,EAAA,CAAA,EAAA,GAAA,YAAA,CAAa,OAAQ,CAAA,WAAA,KAArB,IAAoC,GAAA,EAAA,GAAA,EAAA;AAAA,UACjD,IAAA,EAAM,aAAa,OAAQ,CAAA,IAAA;AAAA,SAC5B,CAAA,CAAA;AAAA,OACF,CAAA,CAAA;AAAA,KACL,CAAA;AAEA,IAAI,IAAA,UAAA,IAAc,WAAW,MAAQ,EAAA;AACnC,MAAA,qBAAA,CAAsB,UAAU,CAAA,CAAA;AAChC,MAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,KACjB;AAAA,GACC,EAAA;AAAA,IACD,UAAA;AAAA,IACA,mBAAA;AAAA,IACA,uBAAA;AAAA,IACA,gBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,KAAA,IAAS,KAAO,EAAA;AAC/B,MAAA,cAAA,CAAe,MAAM,MAAM,CAAA,CAAA;AAAA,KAC7B;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,KAAA,EAAO,KAAK,CAAC,CAAA,CAAA;AAE1B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,oBAAA,CAAqB,WAAW,CAAA,CAAA;AAAA,KAClC;AAAA,GACC,EAAA,CAAC,mBAAqB,EAAA,WAAA,EAAa,oBAAoB,CAAC,CAAA,CAAA;AAG3D,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAI,kBAAmB,EAAA;AAAA,MACvB,gBAAkB,EAAA,CAAC,KAAS,IAAA,CAAC,CAAC,WAAA;AAAA,MAC9B,IAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,SAAA;AAAA,KAAA;AAAA,GACN,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import MarkAsUnreadIcon from '@material-ui/icons/Markunread';
+import MarkAsReadIcon from '@material-ui/icons/CheckCircle';
+import MarkAsUnsavedIcon from '@material-ui/icons/LabelOff';
+import MarkAsSavedIcon from '@material-ui/icons/Label';
+
+const BulkActions = ({
+  selectedNotifications,
+  notifications,
+  onSwitchReadStatus,
+  onSwitchSavedStatus
+}) => {
+  const isDisabled = selectedNotifications.size === 0;
+  const bulkNotifications = notifications.filter(
+    (notification) => selectedNotifications.has(notification.id)
+  );
+  const isOneRead = !!bulkNotifications.find(
+    (notification) => !!notification.read
+  );
+  const isOneSaved = !!bulkNotifications.find(
+    (notification) => !!notification.saved
+  );
+  const markAsReadText = isOneRead ? "Return selected among unread" : "Mark selected as read";
+  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 }, /* @__PURE__ */ React.createElement(Tooltip, { title: markAsSavedText }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      disabled: isDisabled,
+      onClick: () => {
+        onSwitchSavedStatus([...selectedNotifications], !isOneSaved);
+      }
+    },
+    /* @__PURE__ */ React.createElement(SavedIconComponent, { "aria-label": markAsSavedText })
+  )))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Tooltip, { title: markAsReadText }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      disabled: isDisabled,
+      onClick: () => {
+        onSwitchReadStatus([...selectedNotifications], !isOneRead);
+      }
+    },
+    /* @__PURE__ */ React.createElement(IconComponent, { "aria-label": markAsReadText })
+  )))));
+};
+
+export { BulkActions };
+//# sourceMappingURL=BulkActions.esm.js.map