@backstage/plugin-notifications 0.3.3-next.2 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @backstage/plugin-notifications
 
+## 0.4.0
+
+### Minor Changes
+
+- 87ffc1c: Rephrasing labels of the View filter to be more clear. Based on the received users' feedback.
+
+### Patch Changes
+
+- 4186105: Added title to the Notifications' table. The title clearly states the filter selection and total count of messages. This change aligns the look and feel closer to other tables.
+- 3a0731e: The "Created after" filter renamed to the "Sent out" based on the received users' feedback.
+- 3e135f2: The notification's title is emphasized to be clearly distinguished from the description.
+- 97ba58f: Add support for user specific notification settings
+- 1d87c43: Show count of unread notifications in the left-side MenuItem. This replaces the simple true/false bullet.
+- Updated dependencies
+  - @backstage/theme@0.6.1
+  - @backstage/types@1.2.0
+  - @backstage/core-components@0.16.0
+  - @backstage/plugin-notifications-common@0.0.6
+  - @backstage/core-plugin-api@1.10.1
+  - @backstage/errors@1.2.5
+  - @backstage/plugin-signals-react@0.0.7
+
 ## 0.3.3-next.2
 
 ### Patch Changes

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

@@ -125,14 +125,14 @@ const NotificationsFilters = ({
       value: viewValue,
       onChange: handleOnViewChanged
     },
-    /* @__PURE__ */ React.createElement(MenuItem, { value: "unread" }, "New only"),
+    /* @__PURE__ */ React.createElement(MenuItem, { value: "unread" }, "Unread notifications"),
+    /* @__PURE__ */ React.createElement(MenuItem, { value: "read" }, "Read notifications"),
     /* @__PURE__ */ React.createElement(MenuItem, { value: "saved" }, "Saved"),
-    /* @__PURE__ */ React.createElement(MenuItem, { value: "read" }, "Marked as read"),
     /* @__PURE__ */ React.createElement(MenuItem, { value: "all" }, "All")
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true, variant: "outlined", size: "small" }, /* @__PURE__ */ React.createElement(InputLabel, { id: "notifications-filter-created" }, "Created after"), /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true, variant: "outlined", size: "small" }, /* @__PURE__ */ React.createElement(InputLabel, { id: "notifications-filter-created" }, "Sent out"), /* @__PURE__ */ React.createElement(
     Select,
     {
-      label: "Created after",
+      label: "Sent out",
       labelId: "notifications-filter-created",
       placeholder: "Notifications since",
       value: createdAfter,

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

@@ -1 +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\">\n              Min severity\n            </InputLabel>\n\n            <Select\n              label=\"Min 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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"}
+{"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\">Unread notifications</MenuItem>\n              <MenuItem value=\"read\">Read notifications</MenuItem>\n              <MenuItem value=\"saved\">Saved</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\">Sent out</InputLabel>\n\n            <Select\n              label=\"Sent out\"\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\">\n              Min severity\n            </InputLabel>\n\n            <Select\n              label=\"Min 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":";;;;;;;;;AA4CO,MAAM,mBAET,GAAA;AAAA,EACF,OAAS,EAAA;AAAA,IACP,KAAO,EAAA,UAAA;AAAA,IACP,OAAA,EAAS,MAAM,IAAI,IAAA,CAAK,KAAK,GAAI,EAAA,GAAI,EAAK,GAAA,IAAA,GAAO,GAAI;AAAA,GACvD;AAAA,EACA,QAAU,EAAA;AAAA,IACR,KAAO,EAAA,WAAA;AAAA,IACP,OAAA,EAAS,MAAM,IAAI,IAAK,CAAA,IAAA,CAAK,KAAQ,GAAA,CAAA,GAAI,EAAK,GAAA,IAAA,GAAO,GAAI;AAAA,GAC3D;AAAA,EACA,GAAK,EAAA;AAAA,IACH,KAAO,EAAA,UAAA;AAAA,IACP,OAAS,EAAA,sBAAU,IAAA,IAAA,CAAK,CAAC;AAAA;AAE7B;AAEO,MAAM,aAKT,GAAA;AAAA,EACF,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,IACP,MAAQ,EAAA;AAAA,MACN,IAAM,EAAA,SAAA;AAAA,MACN,SAAW,EAAA;AAAA;AACb,GACF;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,IACP,MAAQ,EAAA;AAAA,MACN,IAAM,EAAA,SAAA;AAAA,MACN,SAAW,EAAA;AAAA;AACb,GACF;AAAA,EACA,KAAO,EAAA;AAAA,IACL,KAAO,EAAA,OAAA;AAAA,IACP,MAAQ,EAAA;AAAA,MACN,IAAM,EAAA,OAAA;AAAA,MACN,SAAW,EAAA;AAAA;AACb,GACF;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,QAAA;AAAA,IACP,MAAQ,EAAA;AAAA,MACN,IAAM,EAAA,QAAA;AAAA,MACN,SAAW,EAAA;AAAA;AACb;AAEJ;AAEA,MAAM,aAAA,GAAgB,CAAC,MAA4B,KAAA;AACjD,EAAA,IAAI,MAAQ,EAAA,IAAA,KAAS,SAAa,IAAA,MAAA,EAAQ,cAAc,KAAO,EAAA;AAC7D,IAAO,OAAA,QAAA;AAAA;AAET,EAAI,IAAA,MAAA,EAAQ,SAAS,OAAS,EAAA;AAC5B,IAAO,OAAA,OAAA;AAAA;AAET,EAAI,IAAA,MAAA,EAAQ,SAAS,QAAU,EAAA;AAC7B,IAAO,OAAA,QAAA;AAAA;AAGT,EAAO,OAAA,QAAA;AACT,CAAA;AAEA,MAAM,kBAAgE,GAAA;AAAA,EACpE,QAAU,EAAA,UAAA;AAAA,EACV,IAAM,EAAA,MAAA;AAAA,EACN,MAAQ,EAAA,QAAA;AAAA,EACR,GAAK,EAAA;AACP,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,OAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,mBAAA;AAAA,EACA,YAAA;AAAA,EACA,qBAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAiC,KAAA;AAC/B,EAAM,MAAA,UAAA,GAAa,cAAc,OAAO,CAAA;AAExC,EAAM,MAAA,2BAAA,GAA8B,CAClC,KACG,KAAA;AACH,IAAsB,qBAAA,CAAA,KAAA,CAAM,OAAO,KAAe,CAAA;AAAA,GACpD;AAEA,EAAM,MAAA,mBAAA,GAAsB,CAC1B,KACG,KAAA;AACH,IAAI,IAAA,KAAA,CAAM,MAAO,CAAA,KAAA,KAAU,QAAU,EAAA;AACnC,MAAA,mBAAA,CAAoB,IAAI,CAAA;AACxB,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA;AAAA,KACf,MAAA,IAAA,KAAA,CAAM,MAAO,CAAA,KAAA,KAAU,MAAQ,EAAA;AACxC,MAAA,mBAAA,CAAoB,KAAK,CAAA;AACzB,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA;AAAA,KACf,MAAA,IAAA,KAAA,CAAM,MAAO,CAAA,KAAA,KAAU,OAAS,EAAA;AACzC,MAAA,mBAAA,CAAoB,KAAS,CAAA,CAAA;AAC7B,MAAA,cAAA,CAAe,IAAI,CAAA;AAAA,KACd,MAAA;AAEL,MAAA,mBAAA,CAAoB,KAAS,CAAA,CAAA;AAC7B,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA;AAAA;AAC1B,GACF;AAEA,EAAM,MAAA,qBAAA,GAAwB,CAC5B,KACG,KAAA;AACH,IAAM,MAAA,GAAA,GAAO,KAAM,CAAA,MAAA,CAAO,KAAoB,IAAA,QAAA;AAC9C,IAAM,MAAA,MAAA,GAAS,cAAc,GAAG,CAAA;AAChC,IAAA,gBAAA,CAAiB,EAAE,GAAG,MAAO,CAAA,MAAA,EAAQ,CAAA;AAAA,GACvC;AAEA,EAAA,IAAI,SAAY,GAAA,KAAA;AAChB,EAAA,IAAI,KAAO,EAAA;AACT,IAAY,SAAA,GAAA,OAAA;AAAA,aACH,UAAY,EAAA;AACrB,IAAY,SAAA,GAAA,QAAA;AAAA,GACd,MAAA,IAAW,eAAe,KAAO,EAAA;AAC/B,IAAY,SAAA,GAAA,MAAA;AAAA;AAGd,EAAM,MAAA,uBAAA,GAA0B,CAC9B,KACG,KAAA;AACH,IAAM,MAAA,KAAA,GACH,KAAM,CAAA,MAAA,CAAO,KAAkC,IAAA,QAAA;AAClD,IAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,GACzB;AAEA,EAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,IAAA,EAAA,EAAK,SAAO,CAChC,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,OAAQ,EAAA,WAAA,EAAY,CAC/B,CAAA,sCAEC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAA,sCACZ,WAAY,EAAA,EAAA,SAAA,EAAS,MAAC,OAAQ,EAAA,UAAA,EAAW,MAAK,OAC7C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,EAAG,EAAA,2BAAA,EAAA,EAA4B,MAAI,CAC/C,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,2BAAA;AAAA,MACR,KAAM,EAAA,MAAA;AAAA,MACN,KAAO,EAAA,SAAA;AAAA,MACP,QAAU,EAAA;AAAA,KAAA;AAAA,oBAET,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAM,EAAA,QAAA,EAAA,EAAS,sBAAoB,CAAA;AAAA,oBAC5C,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAM,EAAA,MAAA,EAAA,EAAO,oBAAkB,CAAA;AAAA,oBACxC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAM,EAAA,OAAA,EAAA,EAAQ,OAAK,CAAA;AAAA,oBAC5B,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAM,EAAA,KAAA,EAAA,EAAM,KAAG;AAAA,GAE7B,CACF,CAEA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,WAAS,IAAC,EAAA,OAAA,EAAQ,YAAW,IAAK,EAAA,OAAA,EAAA,sCAC5C,UAAW,EAAA,EAAA,EAAA,EAAG,8BAA+B,EAAA,EAAA,UAAQ,CAEtD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,UAAA;AAAA,MACN,OAAQ,EAAA,8BAAA;AAAA,MACR,WAAY,EAAA,qBAAA;AAAA,MACZ,KAAO,EAAA,YAAA;AAAA,MACP,QAAU,EAAA;AAAA,KAAA;AAAA,IAET,OAAO,IAAK,CAAA,mBAAmB,CAAE,CAAA,GAAA,CAAI,CAAC,GACrC,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,KAAK,GACnB,EAAA,EAAA,mBAAA,CAAoB,GAAG,CAAA,CAAE,KAC5B,CACD;AAAA,GAEL,CACF,CAEA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,WAAS,IAAC,EAAA,OAAA,EAAQ,YAAW,IAAK,EAAA,OAAA,EAAA,sCAC5C,UAAW,EAAA,EAAA,EAAA,EAAG,2BAA4B,EAAA,EAAA,SAAO,CAElD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,OAAQ,EAAA,2BAAA;AAAA,MACR,WAAY,EAAA,kBAAA;AAAA,MACZ,KAAO,EAAA,UAAA;AAAA,MACP,QAAU,EAAA;AAAA,KAAA;AAAA,IAET,OAAO,IAAK,CAAA,aAAa,CAAE,CAAA,GAAA,CAAI,CAAC,GAC/B,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,KAAK,GACnB,EAAA,EAAA,aAAA,CAAc,GAAG,CAAA,CAAE,KACtB,CACD;AAAA,GAEL,CACF,CAEA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,WAAS,IAAC,EAAA,OAAA,EAAQ,YAAW,IAAK,EAAA,OAAA,EAAA,sCAC5C,UAAW,EAAA,EAAA,EAAA,EAAG,+BAAgC,EAAA,EAAA,cAE/C,CAEA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,cAAA;AAAA,MACN,OAAQ,EAAA,+BAAA;AAAA,MACR,KAAO,EAAA,QAAA;AAAA,MACP,QAAU,EAAA;AAAA,KAAA;AAAA,IAET,MAAO,CAAA,IAAA,CAAK,kBAAkB,CAAA,CAAE,IAAI,CAAC,GAAA,qBACnC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,OAAO,GAAK,EAAA,GAAA,EAAA,EACnB,kBAAmB,CAAA,GAA2B,CACjD,CACD;AAAA,GAEL,CACF,CACF,CACF,CAAA;AAEJ;;;;"}

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

@@ -11,7 +11,7 @@ import '../../api/NotificationsApi.esm.js';
 import '@backstage/errors';
 import '../../routes.esm.js';
 import '../../hooks/useTitleCounter.esm.js';
-import { SortByOptions, NotificationsFilters, CreatedAfterOptions } from '../NotificationsFilters/NotificationsFilters.esm.js';
+import { SortByOptions, CreatedAfterOptions, NotificationsFilters } from '../NotificationsFilters/NotificationsFilters.esm.js';
 
 const ThrottleDelayMs = 2e3;
 const NotificationsPage = (props) => {
@@ -92,6 +92,14 @@ const NotificationsPage = (props) => {
   const notifications = value?.[0]?.notifications;
   const totalCount = value?.[0]?.totalCount;
   const isUnread = !!value?.[1]?.unread;
+  let tableTitle = `All notifications (${totalCount})`;
+  if (saved) {
+    tableTitle = `Saved notifications (${totalCount})`;
+  } else if (unreadOnly === true) {
+    tableTitle = `Unread notifications (${totalCount})`;
+  } else if (unreadOnly === false) {
+    tableTitle = `Read notifications (${totalCount})`;
+  }
   return /* @__PURE__ */ React.createElement(
     PageWithHeader,
     {
@@ -119,6 +127,7 @@ const NotificationsPage = (props) => {
     )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 10 }, /* @__PURE__ */ React.createElement(
       NotificationsTable,
       {
+        title: tableTitle,
         isLoading: loading,
         isUnread,
         markAsReadOnLinkOpen,

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

@@ -1 +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 { ConfirmProvider } from 'material-ui-confirm';\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, GetNotificationsResponse } from '../../api';\nimport {\n  NotificationSeverity,\n  NotificationStatus,\n} from '@backstage/plugin-notifications-common';\n\nconst ThrottleDelayMs = 2000;\n\n/** @public */\nexport type NotificationsPageProps = {\n  /** Mark notification as read when opening the link it contains, defaults to false */\n  markAsReadOnLinkOpen?: boolean;\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    markAsReadOnLinkOpen,\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>('all');\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    [GetNotificationsResponse, NotificationStatus]\n  >(\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 Promise.all([api.getNotifications(options), api.getStatus()]);\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  const notifications = value?.[0]?.notifications;\n  const totalCount = value?.[0]?.totalCount;\n  const isUnread = !!value?.[1]?.unread;\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        <ConfirmProvider>\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                isUnread={isUnread}\n                markAsReadOnLinkOpen={markAsReadOnLinkOpen}\n                notifications={notifications}\n                onUpdate={onUpdate}\n                setContainsText={setContainsText}\n                onPageChange={setPageNumber}\n                onRowsPerPageChange={setPageSize}\n                page={pageNumber}\n                pageSize={pageSize}\n                totalCount={totalCount}\n              />\n            </Grid>\n          </Grid>\n        </ConfirmProvider>\n      </Content>\n    </PageWithHeader>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyCA,MAAM,eAAkB,GAAA,GAAA;AAcX,MAAA,iBAAA,GAAoB,CAAC,KAAmC,KAAA;AACnE,EAAM,MAAA;AAAA,IACJ,KAAQ,GAAA,eAAA;AAAA,IACR,OAAU,GAAA,MAAA;AAAA,IACV,QAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF,GAAI,SAAS,EAAC;AAEd,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,eAAe,CAAA;AAChD,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,KAAA,CAAM,SAA8B,IAAI,CAAA;AAC5E,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,KAAA,CAAM,SAA8B,KAAS,CAAA,CAAA;AACvE,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AACpD,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AAChD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,MAAM,QAAiB,EAAA;AAC/D,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,KAAA,CAAM,SAAiB,KAAK,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,KAAM,CAAA,QAAA;AAAA,IAClC,cAAc,MAAO,CAAA;AAAA,GACvB;AACA,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,KAAA,CAAM,SAA+B,KAAK,CAAA;AAE1E,EAAA,MAAM,EAAE,KAAA,EAAO,KAAO,EAAA,KAAA,EAAO,SAAY,GAAA,mBAAA;AAAA,IAGvC,CAAO,GAAA,KAAA;AACL,MAAA,MAAM,OAAmC,GAAA;AAAA,QACvC,MAAQ,EAAA,YAAA;AAAA,QACR,KAAO,EAAA,QAAA;AAAA,QACP,QAAQ,UAAa,GAAA,QAAA;AAAA,QACrB,eAAiB,EAAA,QAAA;AAAA,QACjB,GAAI,WAAW;AAAC,OAClB;AACA,MAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,QAAA,OAAA,CAAQ,OAAO,CAAC,UAAA;AAAA;AAElB,MAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,QAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA;AAAA;AAGlB,MAAA,MAAM,gBAAmB,GAAA,mBAAA,CAAoB,YAAY,CAAA,CAAE,OAAQ,EAAA;AACnE,MAAI,IAAA,gBAAA,CAAiB,OAAQ,EAAA,GAAI,CAAG,EAAA;AAClC,QAAA,OAAA,CAAQ,YAAe,GAAA,gBAAA;AAAA;AAGzB,MAAO,OAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,GAAI,CAAA,gBAAA,CAAiB,OAAO,CAAG,EAAA,GAAA,CAAI,SAAU,EAAC,CAAC,CAAA;AAAA,KACrE;AAAA,IACA;AAAA,MACE,YAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,sBAAsB,KAAM,CAAA,OAAA;AAAA,IAChC,MAAM,QAAS,CAAA,UAAA,EAAY,eAAe,CAAA;AAAA,IAC1C,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,IAAW,CAAC,OAAS,EAAA;AACvB,MAAM,KAAA,EAAA;AACN,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAClB,KACC,CAAC,OAAA,EAAS,UAAY,EAAA,KAAA,EAAO,OAAO,CAAC,CAAA;AAExC,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,UAAA,IAAc,WAAW,MAAQ,EAAA;AACnC,MAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,UAAY,EAAA,mBAAmB,CAAC,CAAA;AAEpC,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA,GAC1B;AAEA,EAAA,IAAI,KAAO,EAAA;AACT,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,sBAAmB,KAAc,EAAA,CAAA;AAAA;AAG3C,EAAM,MAAA,aAAA,GAAgB,KAAQ,GAAA,CAAC,CAAG,EAAA,aAAA;AAClC,EAAM,MAAA,UAAA,GAAa,KAAQ,GAAA,CAAC,CAAG,EAAA,UAAA;AAC/B,EAAA,MAAM,QAAW,GAAA,CAAC,CAAC,KAAA,GAAQ,CAAC,CAAG,EAAA,MAAA;AAE/B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA,KAAA;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,mBAAqB,EAAA,aAAA;AAAA,QACrB,YAAA;AAAA,QACA,qBAAuB,EAAA,eAAA;AAAA,QACvB,gBAAkB,EAAA,UAAA;AAAA,QAClB,OAAA;AAAA,QACA,KAAA;AAAA,QACA,cAAgB,EAAA,QAAA;AAAA,QAChB,QAAA;AAAA,QACA,iBAAmB,EAAA;AAAA;AAAA,KAEvB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,OAAA;AAAA,QACX,QAAA;AAAA,QACA,oBAAA;AAAA,QACA,aAAA;AAAA,QACA,QAAA;AAAA,QACA,eAAA;AAAA,QACA,YAAc,EAAA,aAAA;AAAA,QACd,mBAAqB,EAAA,WAAA;AAAA,QACrB,IAAM,EAAA,UAAA;AAAA,QACN,QAAA;AAAA,QACA;AAAA;AAAA,KAEJ,CACF,CACF,CACF;AAAA,GACF;AAEJ;;;;"}
+{"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 { ConfirmProvider } from 'material-ui-confirm';\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, GetNotificationsResponse } from '../../api';\nimport {\n  NotificationSeverity,\n  NotificationStatus,\n} from '@backstage/plugin-notifications-common';\n\nconst ThrottleDelayMs = 2000;\n\n/** @public */\nexport type NotificationsPageProps = {\n  /** Mark notification as read when opening the link it contains, defaults to false */\n  markAsReadOnLinkOpen?: boolean;\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    markAsReadOnLinkOpen,\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>('all');\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    [GetNotificationsResponse, NotificationStatus]\n  >(\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 Promise.all([api.getNotifications(options), api.getStatus()]);\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  const notifications = value?.[0]?.notifications;\n  const totalCount = value?.[0]?.totalCount;\n  const isUnread = !!value?.[1]?.unread;\n\n  let tableTitle = `All notifications (${totalCount})`;\n  if (saved) {\n    tableTitle = `Saved notifications (${totalCount})`;\n  } else if (unreadOnly === true) {\n    tableTitle = `Unread notifications (${totalCount})`;\n  } else if (unreadOnly === false) {\n    tableTitle = `Read notifications (${totalCount})`;\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        <ConfirmProvider>\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                title={tableTitle}\n                isLoading={loading}\n                isUnread={isUnread}\n                markAsReadOnLinkOpen={markAsReadOnLinkOpen}\n                notifications={notifications}\n                onUpdate={onUpdate}\n                setContainsText={setContainsText}\n                onPageChange={setPageNumber}\n                onRowsPerPageChange={setPageSize}\n                page={pageNumber}\n                pageSize={pageSize}\n                totalCount={totalCount}\n              />\n            </Grid>\n          </Grid>\n        </ConfirmProvider>\n      </Content>\n    </PageWithHeader>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -2,18 +2,19 @@ import React, { 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';
-import { SidebarItem, Link } from '@backstage/core-components';
+import { Link, SidebarItem } from '@backstage/core-components';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import { useApi, alertApiRef, 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';
-import { MaterialDesignContent, SnackbarProvider, closeSnackbar, enqueueSnackbar } from 'notistack';
+import { MaterialDesignContent, closeSnackbar, enqueueSnackbar, SnackbarProvider } from 'notistack';
 import { SeverityIcon } from '../NotificationsTable/SeverityIcon.esm.js';
 import OpenInNew from '@material-ui/icons/OpenInNew';
 import MarkAsReadIcon from '@material-ui/icons/CheckCircle';
 import IconButton from '@material-ui/core/IconButton';
+import Chip from '@material-ui/core/Chip';
 import { styled } from '@material-ui/core/styles';
 
 const StyledMaterialDesignContent = styled(MaterialDesignContent)(
@@ -175,6 +176,7 @@ const NotificationsSidebarItem = (props) => {
       setNotificationCount(unreadCount);
     }
   }, [titleCounterEnabled, unreadCount, setNotificationCount]);
+  const count = !error && !!unreadCount ? unreadCount : void 0;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, snackbarEnabled && /* @__PURE__ */ React.createElement(
     SnackbarProvider,
     {
@@ -198,11 +200,11 @@ const NotificationsSidebarItem = (props) => {
       onClick: () => {
         requestUserPermission();
       },
-      hasNotifications: !error && !!unreadCount,
       text,
       icon,
       ...restProps
-    }
+    },
+    count && /* @__PURE__ */ React.createElement(Chip, { size: "small", label: count > 99 ? "99+" : count })
   ));
 };
 

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 { 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  // TODO: Figure out if the count can be added to hasNotifications\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        hasNotifications={!error && !!unreadCount}\n        text={text}\n        icon={icon}\n        {...restProps}\n      />\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 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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"}

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

@@ -35,6 +35,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 const NotificationsTable = ({
+  title,
   markAsReadOnLinkOpen,
   isLoading,
   notifications = [],
@@ -148,7 +149,7 @@ 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: "subtitle2" }, notification.payload.link ? /* @__PURE__ */ React.createElement(
+          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,
@@ -233,6 +234,7 @@ const NotificationsTable = ({
         header: true,
         sorting: false
       },
+      title,
       onPageChange,
       onRowsPerPageChange,
       page,

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

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

package/dist/index.d.ts

@@ -122,7 +122,7 @@ declare const NotificationsSidebarItem: (props?: {
 }) => React__default.JSX.Element;
 
 /** @public */
-type NotificationsTableProps = Pick<TableProps, 'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount'> & {
+type NotificationsTableProps = Pick<TableProps, 'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount' | 'title'> & {
     markAsReadOnLinkOpen?: boolean;
     isLoading?: boolean;
     isUnread: boolean;
@@ -132,7 +132,7 @@ type NotificationsTableProps = Pick<TableProps, 'onPageChange' | 'onRowsPerPageC
     pageSize: number;
 };
 /** @public */
-declare const NotificationsTable: ({ markAsReadOnLinkOpen, isLoading, notifications, isUnread, onUpdate, setContainsText, onPageChange, onRowsPerPageChange, page, pageSize, totalCount, }: NotificationsTableProps) => React__default.JSX.Element;
+declare const NotificationsTable: ({ title, markAsReadOnLinkOpen, isLoading, notifications, isUnread, onUpdate, setContainsText, onPageChange, onRowsPerPageChange, page, pageSize, totalCount, }: NotificationsTableProps) => React__default.JSX.Element;
 
 /** @public */
 declare const UserNotificationSettingsCard: (props: {

package/dist/plugin.esm.js

@@ -1,4 +1,4 @@
-import { createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
+import { createPlugin, createApiFactory, fetchApiRef, discoveryApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
 import { rootRouteRef } from './routes.esm.js';
 import { notificationsApiRef } from './api/NotificationsApi.esm.js';
 import { NotificationsClient } from './api/NotificationsClient.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-notifications",
-  "version": "0.3.3-next.2",
+  "version": "0.4.0",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "notifications",
@@ -38,13 +38,13 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "0.16.0-next.2",
-    "@backstage/core-plugin-api": "1.10.0",
-    "@backstage/errors": "1.2.4",
-    "@backstage/plugin-notifications-common": "0.0.6-next.0",
-    "@backstage/plugin-signals-react": "0.0.6",
-    "@backstage/theme": "0.6.1-next.0",
-    "@backstage/types": "1.1.1",
+    "@backstage/core-components": "^0.16.0",
+    "@backstage/core-plugin-api": "^1.10.1",
+    "@backstage/errors": "^1.2.5",
+    "@backstage/plugin-notifications-common": "^0.0.6",
+    "@backstage/plugin-signals-react": "^0.0.7",
+    "@backstage/theme": "^0.6.1",
+    "@backstage/types": "^1.2.0",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -55,11 +55,11 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.29.0-next.3",
-    "@backstage/core-app-api": "1.15.1",
-    "@backstage/dev-utils": "1.1.3-next.3",
-    "@backstage/plugin-signals": "0.0.12-next.2",
-    "@backstage/test-utils": "1.7.1-next.0",
+    "@backstage/cli": "^0.29.0",
+    "@backstage/core-app-api": "^1.15.2",
+    "@backstage/dev-utils": "^1.1.3",
+    "@backstage/plugin-signals": "^0.0.12",
+    "@backstage/test-utils": "^1.7.1",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",