@backstage/plugin-notifications 0.5.17-next.0 → 0.5.17-next.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @backstage/plugin-notifications
 
+## 0.5.17-next.1
+
+### Patch Changes
+
+- f635139: Limited `@remixicon/react` dependency to versions below 4.9.0 due to a license change in that release.
+- 03311e3: The notification description used in the notifications table is now a swappable component, so that apps can replace its rendering with a custom implementation.
+- Updated dependencies
+  - @backstage/ui@0.15.0-next.1
+  - @backstage/frontend-plugin-api@0.17.0-next.1
+  - @backstage/core-plugin-api@1.12.6-next.1
+
 ## 0.5.17-next.0
 
 ### Patch Changes

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

@@ -7,6 +7,7 @@ import { useSignal } from '@backstage/plugin-signals-react';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { notificationsTranslationRef } from '../../translation.esm.js';
 import { NotificationsTable } from '../NotificationsTable/NotificationsTable.esm.js';
+import '../NotificationsTable/NotificationDescription.esm.js';
 import { useNotificationsApi } from '../../hooks/useNotificationsApi.esm.js';
 import '@backstage/core-plugin-api';
 import '../../api/NotificationsApi.esm.js';

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 { useEffect, useMemo, useState } from 'react';\nimport throttle from 'lodash/throttle';\nimport {\n  Content,\n  PageWithHeader,\n  ResponseErrorPanel,\n} from '@backstage/core-components';\nimport { Grid } from '@backstage/ui';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { notificationsTranslationRef } from '../../translation';\n\nconst TableTitleKeys = {\n  all: 'notificationsPage.tableTitle.all',\n  saved: 'notificationsPage.tableTitle.saved',\n  unread: 'notificationsPage.tableTitle.unread',\n  read: 'notificationsPage.tableTitle.read',\n} as const;\n\nimport { NotificationsTable } from '../NotificationsTable';\nimport { useNotificationsApi } from '../../hooks';\nimport {\n  CreatedAfterOptions,\n  NotificationsFilters,\n  SortBy,\n  SortByOptions,\n} from '../NotificationsFilters';\nimport {\n  GetNotificationsOptions,\n  GetNotificationsResponse,\n  GetTopicsResponse,\n} 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\nfunction NotificationsPageContent(\n  props: NotificationsPageProps & { headerVariant: 'legacy' | 'bui' },\n) {\n  const { t } = useTranslationRef(notificationsTranslationRef);\n  const {\n    title = t('notificationsPage.title'),\n    themeId = 'tool',\n    subtitle,\n    tooltip,\n    type,\n    typeLink,\n    markAsReadOnLinkOpen,\n    headerVariant,\n  } = props;\n\n  const [refresh, setRefresh] = useState(false);\n  const { lastSignal } = useSignal('notifications');\n  const [unreadOnly, setUnreadOnly] = useState<boolean | undefined>(true);\n  const [saved, setSaved] = useState<boolean | undefined>(undefined);\n  const [pageNumber, setPageNumber] = useState(0);\n  const [pageSize, setPageSize] = useState(5);\n  const [containsText, setContainsText] = useState<string>();\n  const [createdAfter, setCreatedAfter] = useState<string>('all');\n  const [sorting, setSorting] = useState<SortBy>(SortByOptions.newest.sortBy);\n  const [severity, setSeverity] = useState<NotificationSeverity>('low');\n  const [topic, setTopic] = useState<string>();\n\n  const { error, value, retry, loading } = useNotificationsApi<\n    [GetNotificationsResponse, NotificationStatus, GetTopicsResponse]\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      if (topic !== undefined) {\n        options.topic = topic;\n      }\n\n      const createdAfterDate =\n        CreatedAfterOptions[\n          createdAfter as keyof typeof CreatedAfterOptions\n        ].getDate();\n      if (createdAfterDate.valueOf() > 0) {\n        options.createdAfter = createdAfterDate;\n      }\n\n      return Promise.all([\n        api.getNotifications(options),\n        api.getStatus(),\n        api.getTopics(options),\n      ]);\n    },\n    [\n      containsText,\n      unreadOnly,\n      createdAfter,\n      pageNumber,\n      pageSize,\n      sorting,\n      saved,\n      severity,\n      topic,\n    ],\n  );\n\n  const throttledSetRefresh = 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  const allTopics = value?.[2]?.topics;\n\n  let tableTitle: string = t(TableTitleKeys.all, {\n    count: totalCount ?? 0,\n  });\n  if (saved) {\n    tableTitle = t(TableTitleKeys.saved, {\n      count: totalCount ?? 0,\n    });\n  } else if (unreadOnly === true) {\n    tableTitle = t(TableTitleKeys.unread, {\n      count: totalCount ?? 0,\n    });\n  } else if (unreadOnly === false) {\n    tableTitle = t(TableTitleKeys.read, {\n      count: totalCount ?? 0,\n    });\n  }\n\n  const pageContent = (\n    <Content>\n      <Grid.Root columns=\"12\" gap=\"6\">\n        <Grid.Item colSpan=\"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            topic={topic}\n            onTopicChanged={setTopic}\n            allTopics={allTopics}\n          />\n        </Grid.Item>\n        <Grid.Item colSpan=\"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.Item>\n      </Grid.Root>\n    </Content>\n  );\n\n  if (headerVariant === 'bui') {\n    return pageContent;\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      {pageContent}\n    </PageWithHeader>\n  );\n}\n\nexport const NotificationsPage = (props?: NotificationsPageProps) => (\n  <NotificationsPageContent {...(props ?? {})} headerVariant=\"legacy\" />\n);\n\nexport const NfsNotificationsPage = (props?: NotificationsPageProps) => (\n  <NotificationsPageContent {...(props ?? {})} headerVariant=\"bui\" />\n);\n"],"names":[],"mappings":"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"}
+{"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 { useEffect, useMemo, useState } from 'react';\nimport throttle from 'lodash/throttle';\nimport {\n  Content,\n  PageWithHeader,\n  ResponseErrorPanel,\n} from '@backstage/core-components';\nimport { Grid } from '@backstage/ui';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { notificationsTranslationRef } from '../../translation';\n\nconst TableTitleKeys = {\n  all: 'notificationsPage.tableTitle.all',\n  saved: 'notificationsPage.tableTitle.saved',\n  unread: 'notificationsPage.tableTitle.unread',\n  read: 'notificationsPage.tableTitle.read',\n} as const;\n\nimport { NotificationsTable } from '../NotificationsTable';\nimport { useNotificationsApi } from '../../hooks';\nimport {\n  CreatedAfterOptions,\n  NotificationsFilters,\n  SortBy,\n  SortByOptions,\n} from '../NotificationsFilters';\nimport {\n  GetNotificationsOptions,\n  GetNotificationsResponse,\n  GetTopicsResponse,\n} 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\nfunction NotificationsPageContent(\n  props: NotificationsPageProps & { headerVariant: 'legacy' | 'bui' },\n) {\n  const { t } = useTranslationRef(notificationsTranslationRef);\n  const {\n    title = t('notificationsPage.title'),\n    themeId = 'tool',\n    subtitle,\n    tooltip,\n    type,\n    typeLink,\n    markAsReadOnLinkOpen,\n    headerVariant,\n  } = props;\n\n  const [refresh, setRefresh] = useState(false);\n  const { lastSignal } = useSignal('notifications');\n  const [unreadOnly, setUnreadOnly] = useState<boolean | undefined>(true);\n  const [saved, setSaved] = useState<boolean | undefined>(undefined);\n  const [pageNumber, setPageNumber] = useState(0);\n  const [pageSize, setPageSize] = useState(5);\n  const [containsText, setContainsText] = useState<string>();\n  const [createdAfter, setCreatedAfter] = useState<string>('all');\n  const [sorting, setSorting] = useState<SortBy>(SortByOptions.newest.sortBy);\n  const [severity, setSeverity] = useState<NotificationSeverity>('low');\n  const [topic, setTopic] = useState<string>();\n\n  const { error, value, retry, loading } = useNotificationsApi<\n    [GetNotificationsResponse, NotificationStatus, GetTopicsResponse]\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      if (topic !== undefined) {\n        options.topic = topic;\n      }\n\n      const createdAfterDate =\n        CreatedAfterOptions[\n          createdAfter as keyof typeof CreatedAfterOptions\n        ].getDate();\n      if (createdAfterDate.valueOf() > 0) {\n        options.createdAfter = createdAfterDate;\n      }\n\n      return Promise.all([\n        api.getNotifications(options),\n        api.getStatus(),\n        api.getTopics(options),\n      ]);\n    },\n    [\n      containsText,\n      unreadOnly,\n      createdAfter,\n      pageNumber,\n      pageSize,\n      sorting,\n      saved,\n      severity,\n      topic,\n    ],\n  );\n\n  const throttledSetRefresh = 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  const allTopics = value?.[2]?.topics;\n\n  let tableTitle: string = t(TableTitleKeys.all, {\n    count: totalCount ?? 0,\n  });\n  if (saved) {\n    tableTitle = t(TableTitleKeys.saved, {\n      count: totalCount ?? 0,\n    });\n  } else if (unreadOnly === true) {\n    tableTitle = t(TableTitleKeys.unread, {\n      count: totalCount ?? 0,\n    });\n  } else if (unreadOnly === false) {\n    tableTitle = t(TableTitleKeys.read, {\n      count: totalCount ?? 0,\n    });\n  }\n\n  const pageContent = (\n    <Content>\n      <Grid.Root columns=\"12\" gap=\"6\">\n        <Grid.Item colSpan=\"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            topic={topic}\n            onTopicChanged={setTopic}\n            allTopics={allTopics}\n          />\n        </Grid.Item>\n        <Grid.Item colSpan=\"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.Item>\n      </Grid.Root>\n    </Content>\n  );\n\n  if (headerVariant === 'bui') {\n    return pageContent;\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      {pageContent}\n    </PageWithHeader>\n  );\n}\n\nexport const NotificationsPage = (props?: NotificationsPageProps) => (\n  <NotificationsPageContent {...(props ?? {})} headerVariant=\"legacy\" />\n);\n\nexport const NfsNotificationsPage = (props?: NotificationsPageProps) => (\n  <NotificationsPageContent {...(props ?? {})} headerVariant=\"bui\" />\n);\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Text, Button } from '@backstage/ui';
+import { useState } from 'react';
+
+const MAX_LENGTH = 100;
+const DefaultNotificationDescription = (props) => {
+  const { description } = props;
+  const [shown, setShown] = useState(false);
+  const isLong = description.length > MAX_LENGTH;
+  if (!isLong) {
+    return /* @__PURE__ */ jsx(Text, { variant: "body-small", children: description });
+  }
+  if (shown) {
+    return /* @__PURE__ */ jsxs(Text, { variant: "body-small", children: [
+      description,
+      " ",
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          onPress: () => {
+            setShown(false);
+          },
+          children: "Show less"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Text, { variant: "body-small", children: [
+    description.substring(0, MAX_LENGTH),
+    "...",
+    " ",
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "tertiary",
+        onPress: () => {
+          setShown(true);
+        },
+        children: "Show more"
+      }
+    )
+  ] });
+};
+
+export { DefaultNotificationDescription };
+//# sourceMappingURL=DefaultNotificationDescription.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultNotificationDescription.esm.js","sources":["../../../src/components/NotificationsTable/DefaultNotificationDescription.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 { Text, Button } from '@backstage/ui';\nimport { useState } from 'react';\nimport type { NotificationDescriptionProps } from './NotificationDescription';\n\nconst MAX_LENGTH = 100;\n\nexport const DefaultNotificationDescription = (\n  props: NotificationDescriptionProps,\n) => {\n  const { description } = props;\n  const [shown, setShown] = useState(false);\n  const isLong = description.length > MAX_LENGTH;\n\n  if (!isLong) {\n    return <Text variant=\"body-small\">{description}</Text>;\n  }\n\n  if (shown) {\n    return (\n      <Text variant=\"body-small\">\n        {description}{' '}\n        <Button\n          variant=\"tertiary\"\n          onPress={() => {\n            setShown(false);\n          }}\n        >\n          Show less\n        </Button>\n      </Text>\n    );\n  }\n  return (\n    <Text variant=\"body-small\">\n      {description.substring(0, MAX_LENGTH)}...{' '}\n      <Button\n        variant=\"tertiary\"\n        onPress={() => {\n          setShown(true);\n        }}\n      >\n        Show more\n      </Button>\n    </Text>\n  );\n};\n"],"names":[],"mappings":";;;;AAmBA,MAAM,UAAA,GAAa,GAAA;AAEZ,MAAM,8BAAA,GAAiC,CAC5C,KAAA,KACG;AACH,EAAA,MAAM,EAAE,aAAY,GAAI,KAAA;AACxB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,KAAK,CAAA;AACxC,EAAA,MAAM,MAAA,GAAS,YAAY,MAAA,GAAS,UAAA;AAEpC,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,YAAA,EAAc,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,EACjD;AAEA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,YAAA,EACX,QAAA,EAAA;AAAA,MAAA,WAAA;AAAA,MAAa,GAAA;AAAA,sBACd,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,UAAA;AAAA,UACR,SAAS,MAAM;AACb,YAAA,QAAA,CAAS,KAAK,CAAA;AAAA,UAChB,CAAA;AAAA,UACD,QAAA,EAAA;AAAA;AAAA;AAED,KAAA,EACF,CAAA;AAAA,EAEJ;AACA,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,YAAA,EACX,QAAA,EAAA;AAAA,IAAA,WAAA,CAAY,SAAA,CAAU,GAAG,UAAU,CAAA;AAAA,IAAE,KAAA;AAAA,IAAI,GAAA;AAAA,oBAC1C,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,UAAA;AAAA,QACR,SAAS,MAAM;AACb,UAAA,QAAA,CAAS,IAAI,CAAA;AAAA,QACf,CAAA;AAAA,QACD,QAAA,EAAA;AAAA;AAAA;AAED,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,47 +1,11 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Text, Button } from '@backstage/ui';
-import { useState } from 'react';
+import { createSwappableComponent } from '@backstage/frontend-plugin-api';
 
-const MAX_LENGTH = 100;
-const NotificationDescription = (props) => {
-  const { description } = props;
-  const [shown, setShown] = useState(false);
-  const isLong = description.length > MAX_LENGTH;
-  if (!isLong) {
-    return /* @__PURE__ */ jsx(Text, { variant: "body-small", children: description });
-  }
-  if (shown) {
-    return /* @__PURE__ */ jsxs(Text, { variant: "body-small", children: [
-      description,
-      " ",
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "tertiary",
-          onPress: () => {
-            setShown(false);
-          },
-          children: "Show less"
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Text, { variant: "body-small", children: [
-    description.substring(0, MAX_LENGTH),
-    "...",
-    " ",
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "tertiary",
-        onPress: () => {
-          setShown(true);
-        },
-        children: "Show more"
-      }
-    )
-  ] });
-};
+const NotificationDescription = createSwappableComponent({
+  id: "notifications.notification-description",
+  loader: () => import('./DefaultNotificationDescription.esm.js').then(
+    (m) => m.DefaultNotificationDescription
+  )
+});
 
 export { NotificationDescription };
 //# sourceMappingURL=NotificationDescription.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationDescription.esm.js","sources":["../../../src/components/NotificationsTable/NotificationDescription.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 { Text, Button } from '@backstage/ui';\nimport { useState } from 'react';\n\nconst MAX_LENGTH = 100;\n\nexport const NotificationDescription = (props: { description: string }) => {\n  const { description } = props;\n  const [shown, setShown] = useState(false);\n  const isLong = description.length > MAX_LENGTH;\n\n  if (!isLong) {\n    return <Text variant=\"body-small\">{description}</Text>;\n  }\n\n  if (shown) {\n    return (\n      <Text variant=\"body-small\">\n        {description}{' '}\n        <Button\n          variant=\"tertiary\"\n          onPress={() => {\n            setShown(false);\n          }}\n        >\n          Show less\n        </Button>\n      </Text>\n    );\n  }\n  return (\n    <Text variant=\"body-small\">\n      {description.substring(0, MAX_LENGTH)}...{' '}\n      <Button\n        variant=\"tertiary\"\n        onPress={() => {\n          setShown(true);\n        }}\n      >\n        Show more\n      </Button>\n    </Text>\n  );\n};\n"],"names":[],"mappings":";;;;AAkBA,MAAM,UAAA,GAAa,GAAA;AAEZ,MAAM,uBAAA,GAA0B,CAAC,KAAA,KAAmC;AACzE,EAAA,MAAM,EAAE,aAAY,GAAI,KAAA;AACxB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,KAAK,CAAA;AACxC,EAAA,MAAM,MAAA,GAAS,YAAY,MAAA,GAAS,UAAA;AAEpC,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,YAAA,EAAc,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,EACjD;AAEA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,YAAA,EACX,QAAA,EAAA;AAAA,MAAA,WAAA;AAAA,MAAa,GAAA;AAAA,sBACd,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,UAAA;AAAA,UACR,SAAS,MAAM;AACb,YAAA,QAAA,CAAS,KAAK,CAAA;AAAA,UAChB,CAAA;AAAA,UACD,QAAA,EAAA;AAAA;AAAA;AAED,KAAA,EACF,CAAA;AAAA,EAEJ;AACA,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,YAAA,EACX,QAAA,EAAA;AAAA,IAAA,WAAA,CAAY,SAAA,CAAU,GAAG,UAAU,CAAA;AAAA,IAAE,KAAA;AAAA,IAAI,GAAA;AAAA,oBAC1C,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,UAAA;AAAA,QACR,SAAS,MAAM;AACb,UAAA,QAAA,CAAS,IAAI,CAAA;AAAA,QACf,CAAA;AAAA,QACD,QAAA,EAAA;AAAA;AAAA;AAED,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"NotificationDescription.esm.js","sources":["../../../src/components/NotificationsTable/NotificationDescription.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 { createSwappableComponent } from '@backstage/frontend-plugin-api';\n\n/**\n * Props for the {@link NotificationDescription} swappable component.\n *\n * @public\n */\nexport interface NotificationDescriptionProps {\n  /**\n   * The plain-text description of the notification.\n   */\n  description: string;\n}\n\n/**\n * Swappable component that renders the description of a notification in the\n * notifications table. Apps can override this to customize how descriptions\n * are displayed.\n *\n * @public\n */\nexport const NotificationDescription =\n  createSwappableComponent<NotificationDescriptionProps>({\n    id: 'notifications.notification-description',\n    loader: () =>\n      import('./DefaultNotificationDescription').then(\n        m => m.DefaultNotificationDescription,\n      ),\n  });\n"],"names":[],"mappings":";;AAoCO,MAAM,0BACX,wBAAA,CAAuD;AAAA,EACrD,EAAA,EAAI,wCAAA;AAAA,EACJ,MAAA,EAAQ,MACN,OAAO,yCAAkC,CAAA,CAAE,IAAA;AAAA,IACzC,OAAK,CAAA,CAAE;AAAA;AAEb,CAAC;;;;"}

package/dist/index.d.ts

@@ -84,6 +84,29 @@ type NotificationsTableProps = Pick<TableProps, 'onPageChange' | 'onRowsPerPageC
 /** @public */
 declare const NotificationsTable: ({ title, markAsReadOnLinkOpen, isLoading, notifications, isUnread, onUpdate, setContainsText, onPageChange, onRowsPerPageChange, page, pageSize, totalCount, }: NotificationsTableProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the {@link NotificationDescription} swappable component.
+ *
+ * @public
+ */
+interface NotificationDescriptionProps {
+    /**
+     * The plain-text description of the notification.
+     */
+    description: string;
+}
+/**
+ * Swappable component that renders the description of a notification in the
+ * notifications table. Apps can override this to customize how descriptions
+ * are displayed.
+ *
+ * @public
+ */
+declare const NotificationDescription: {
+    (props: NotificationDescriptionProps): JSX.Element | null;
+    ref: _backstage_frontend_plugin_api.SwappableComponentRef<NotificationDescriptionProps, NotificationDescriptionProps>;
+};
+
 /** @public */
 declare const UserNotificationSettingsCard: (props: {
     originNames?: Record<string, string>;
@@ -260,5 +283,5 @@ declare const notificationsTranslationRef: _backstage_frontend_plugin_api.Transl
     readonly "notificationsPage.tableTitle.read_other": "Read notifications ({{count}})";
 }>;
 
-export { NotificationsClient, NotificationsPage, NotificationsSidebarItem, NotificationsTable, UserNotificationSettingsCard, notificationsApiRef, notificationsPlugin, notificationsTranslationRef, useNotificationsApi };
-export type { GetNotificationsCommonOptions, GetNotificationsOptions, GetNotificationsResponse, GetTopicsOptions, GetTopicsResponse, NotificationSnackbarProperties, NotificationsApi, NotificationsPageProps, NotificationsRenderItemProps, NotificationsSideBarItemProps, NotificationsTableProps, UpdateNotificationsOptions };
+export { NotificationDescription, NotificationsClient, NotificationsPage, NotificationsSidebarItem, NotificationsTable, UserNotificationSettingsCard, notificationsApiRef, notificationsPlugin, notificationsTranslationRef, useNotificationsApi };
+export type { GetNotificationsCommonOptions, GetNotificationsOptions, GetNotificationsResponse, GetTopicsOptions, GetTopicsResponse, NotificationDescriptionProps, NotificationSnackbarProperties, NotificationsApi, NotificationsPageProps, NotificationsRenderItemProps, NotificationsSideBarItemProps, NotificationsTableProps, UpdateNotificationsOptions };

package/dist/index.esm.js

@@ -8,6 +8,7 @@ import './routes.esm.js';
 import './hooks/useTitleCounter.esm.js';
 export { NotificationsSidebarItem } from './components/NotificationsSideBarItem/NotificationsSideBarItem.esm.js';
 export { NotificationsTable } from './components/NotificationsTable/NotificationsTable.esm.js';
+export { NotificationDescription } from './components/NotificationsTable/NotificationDescription.esm.js';
 export { UserNotificationSettingsCard } from './components/UserNotificationSettingsCard/UserNotificationSettingsCard.esm.js';
 export { notificationsTranslationRef } from './translation.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

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

package/dist/plugins/notifications/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-notifications";
-var version = "0.5.17-next.0";
+var version = "0.5.17-next.1";
 var backstage = {
 	role: "frontend-plugin",
 	pluginId: "notifications",
@@ -58,7 +58,7 @@ var dependencies = {
 	"@backstage/plugin-signals-react": "workspace:^",
 	"@backstage/theme": "workspace:^",
 	"@backstage/ui": "workspace:^",
-	"@remixicon/react": "^4.6.0",
+	"@remixicon/react": ">=4.6.0 <4.9.0",
 	lodash: "^4.17.21",
 	notistack: "^3.0.1",
 	"react-aria-components": "~1.17.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-notifications",
-  "version": "0.5.17-next.0",
+  "version": "0.5.17-next.1",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "notifications",
@@ -64,14 +64,14 @@
   },
   "dependencies": {
     "@backstage/core-components": "0.18.10-next.0",
-    "@backstage/core-plugin-api": "1.12.6-next.0",
+    "@backstage/core-plugin-api": "1.12.6-next.1",
     "@backstage/errors": "1.3.1-next.0",
-    "@backstage/frontend-plugin-api": "0.17.0-next.0",
+    "@backstage/frontend-plugin-api": "0.17.0-next.1",
     "@backstage/plugin-notifications-common": "0.2.3-next.0",
     "@backstage/plugin-signals-react": "0.0.22-next.0",
     "@backstage/theme": "0.7.3",
-    "@backstage/ui": "0.15.0-next.0",
-    "@remixicon/react": "^4.6.0",
+    "@backstage/ui": "0.15.0-next.1",
+    "@remixicon/react": ">=4.6.0 <4.9.0",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
     "react-aria-components": "~1.17.0",
@@ -79,9 +79,9 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.36.2-next.0",
+    "@backstage/cli": "0.36.2-next.1",
     "@backstage/dev-utils": "1.1.23-next.0",
-    "@backstage/plugin-signals": "0.0.31-next.0",
+    "@backstage/plugin-signals": "0.0.31-next.1",
     "@backstage/test-utils": "1.7.18-next.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",