From 3571624adb3a02a11a59acd830b54d1c3108423a Mon Sep 17 00:00:00 2001 From: ambulgm Date: Thu, 11 Dec 2025 14:14:49 -0800 Subject: [PATCH 1/6] feat: add renderItem prop to NotificationsSidebarItem Signed-off-by: ambulgm --- .../NotificationsSideBarItem.tsx | 57 +++++++++++++++---- 1 file changed, 46 insertions(+), 11 deletions(-) diff --git a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx index 53e04494c1..d9440af62e 100644 --- a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx +++ b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx @@ -99,6 +99,19 @@ export type NotificationSnackbarProperties = { }; }; +/** + * Props passed to the custom renderItem function + * @public + */ +export type NotificationsRenderItemProps = { + /** Current unread notification count */ + unreadCount: number; + /** Route path to the notifications page */ + to: string; + /** Click handler that requests web notification permission */ + onClick: () => void; +}; + /** * @public */ @@ -119,6 +132,12 @@ export type NotificationsSideBarItemProps = { text?: string; disableHighlight?: boolean; noTrack?: boolean; + /** + * Optional render function to provide custom UI instead of the default SidebarItem. + * When provided, allows placing the notification indicator anywhere (e.g., header). + * The default SidebarItem will not be rendered when this prop is used. + */ + renderItem?: (props: NotificationsRenderItemProps) => React.ReactNode; }; /** @public */ @@ -304,6 +323,20 @@ export const NotificationsSidebarItem = ( const count = !error && !!unreadCount ? unreadCount : undefined; + const handleClick = useCallback(() => { + requestUserPermission(); + }, [requestUserPermission]); + + // Props to pass to custom renderItem function + const renderItemProps: NotificationsRenderItemProps = useMemo( + () => ({ + unreadCount, + to: notificationsRoute, + onClick: handleClick, + }), + [unreadCount, notificationsRoute, handleClick], + ); + return ( <> {snackbarEnabled && ( @@ -336,17 +369,19 @@ export const NotificationsSidebarItem = ( }} /> )} - { - requestUserPermission(); - }} - text={text} - icon={icon} - {...restProps} - > - {count && 99 ? '99+' : count} />} - + {props?.renderItem ? ( + props.renderItem(renderItemProps) + ) : ( + + {count && 99 ? '99+' : count} />} + + )} ); }; From 8005286f9a54ad2a82512cee12d04c541a152854 Mon Sep 17 00:00:00 2001 From: ambulgm Date: Thu, 11 Dec 2025 14:15:51 -0800 Subject: [PATCH 2/6] aa changeset Signed-off-by: ambulgm --- .changeset/easy-bottles-type.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/easy-bottles-type.md diff --git a/.changeset/easy-bottles-type.md b/.changeset/easy-bottles-type.md new file mode 100644 index 0000000000..0e819cc0f1 --- /dev/null +++ b/.changeset/easy-bottles-type.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-notifications': minor +--- + +Added `renderItem` prop to `NotificationsSidebarItem` component, allowing custom UI rendering while retaining all built-in notification logic (unread count, snackbar, signals, web notifications). From fd3957c1431e94d3c464b6d413ce4398238e79c9 Mon Sep 17 00:00:00 2001 From: ambulgm Date: Thu, 11 Dec 2025 14:29:37 -0800 Subject: [PATCH 3/6] shorten comments Signed-off-by: ambulgm --- .../NotificationsSideBarItem/NotificationsSideBarItem.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx index d9440af62e..70407d8e8d 100644 --- a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx +++ b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx @@ -134,8 +134,6 @@ export type NotificationsSideBarItemProps = { noTrack?: boolean; /** * Optional render function to provide custom UI instead of the default SidebarItem. - * When provided, allows placing the notification indicator anywhere (e.g., header). - * The default SidebarItem will not be rendered when this prop is used. */ renderItem?: (props: NotificationsRenderItemProps) => React.ReactNode; }; From 759e103bdc39d3cd53fce01665f22d3e9f1dd78d Mon Sep 17 00:00:00 2001 From: ambulgm Date: Thu, 11 Dec 2025 15:25:04 -0800 Subject: [PATCH 4/6] chore: update api reports Signed-off-by: ambulgm --- plugins/notifications/report.api.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/plugins/notifications/report.api.md b/plugins/notifications/report.api.md index 0d2912638f..0ccf5698e2 100644 --- a/plugins/notifications/report.api.md +++ b/plugins/notifications/report.api.md @@ -141,6 +141,13 @@ export const notificationsPlugin: BackstagePlugin< {} >; +// @public +export type NotificationsRenderItemProps = { + unreadCount: number; + to: string; + onClick: () => void; +}; + // @public (undocumented) export const NotificationsSidebarItem: ( props?: NotificationsSideBarItemProps, @@ -158,6 +165,7 @@ export type NotificationsSideBarItemProps = { text?: string; disableHighlight?: boolean; noTrack?: boolean; + renderItem?: (props: NotificationsRenderItemProps) => React_2.ReactNode; }; // @public (undocumented) From 7b60d6582d5ae536f36765e2ca7bf4de1a782d04 Mon Sep 17 00:00:00 2001 From: adsk-mukul Date: Mon, 16 Feb 2026 23:16:36 -0800 Subject: [PATCH 5/6] Change to `patch` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Code review suggestion. Co-authored-by: Fredrik Adelöw Signed-off-by: adsk-mukul --- .changeset/easy-bottles-type.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/easy-bottles-type.md b/.changeset/easy-bottles-type.md index 0e819cc0f1..a2b131d7b5 100644 --- a/.changeset/easy-bottles-type.md +++ b/.changeset/easy-bottles-type.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-notifications': minor +'@backstage/plugin-notifications': patch --- Added `renderItem` prop to `NotificationsSidebarItem` component, allowing custom UI rendering while retaining all built-in notification logic (unread count, snackbar, signals, web notifications). From 9bb4236205969ebe484b441f19df84725a829d12 Mon Sep 17 00:00:00 2001 From: ambulgm Date: Tue, 17 Feb 2026 00:17:21 -0800 Subject: [PATCH 6/6] chore: fix API report after rebase Signed-off-by: ambulgm --- plugins/notifications/report.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/notifications/report.api.md b/plugins/notifications/report.api.md index 0ccf5698e2..8a1fd47bad 100644 --- a/plugins/notifications/report.api.md +++ b/plugins/notifications/report.api.md @@ -165,7 +165,7 @@ export type NotificationsSideBarItemProps = { text?: string; disableHighlight?: boolean; noTrack?: boolean; - renderItem?: (props: NotificationsRenderItemProps) => React_2.ReactNode; + renderItem?: (props: NotificationsRenderItemProps) => React.ReactNode; }; // @public (undocumented)