From 769fa96fe8a0346196873487d926607229719142 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Mon, 30 Mar 2026 12:36:27 +0200
Subject: [PATCH] docs: address review feedback on notifications docs

Use dynamic import pattern for SubPageBlueprint loader instead of
Promise.resolve, and fix missing comma in TypeScript example.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
---
 docs/notifications/index.md      | 27 ++++++++++++++++++---------
 docs/notifications/usage--old.md |  2 +-
 docs/notifications/usage.md      |  2 +-
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/docs/notifications/index.md b/docs/notifications/index.md
index 19ada4ba76..fde24db7cb 100644
--- a/docs/notifications/index.md
+++ b/docs/notifications/index.md
@@ -126,11 +126,24 @@ Once installed, the signals plugin is automatically available in your app throug
 
 The notifications plugin provides a way for users to manage their notification settings. To enable this, you can create a frontend module that adds a settings tab to the user-settings plugin using the `SubPageBlueprint`:
 
+```tsx title="packages/app/src/modules/NotificationSettingsPage.tsx"
+import { Content } from '@backstage/core-components';
+import { UserNotificationSettingsCard } from '@backstage/plugin-notifications';
+
+export function NotificationSettingsPage() {
+  return (
+    <Content>
+      <UserNotificationSettingsCard
+        originNames={{ 'plugin:scaffolder': 'Scaffolder' }}
+      />
+    </Content>
+  );
+}
+```
+
 ```tsx title="packages/app/src/modules/notificationSettings.tsx"
 import { createFrontendModule } from '@backstage/frontend-plugin-api';
 import { SubPageBlueprint } from '@backstage/frontend-plugin-api';
-import { Content } from '@backstage/core-components';
-import { UserNotificationSettingsCard } from '@backstage/plugin-notifications';
 
 export const notificationSettingsModule = createFrontendModule({
   pluginId: 'user-settings',
@@ -141,13 +154,9 @@ export const notificationSettingsModule = createFrontendModule({
         path: 'notifications',
         title: 'Notifications',
         loader: () =>
-          Promise.resolve(
-            <Content>
-              <UserNotificationSettingsCard
-                originNames={{ 'plugin:scaffolder': 'Scaffolder' }}
-              />
-            </Content>,
-          ),
+          import('./NotificationSettingsPage').then(m => (
+            <m.NotificationSettingsPage />
+          )),
       },
     }),
   ],
diff --git a/docs/notifications/usage--old.md b/docs/notifications/usage--old.md
index 09f7e668be..8e64e37c4d 100644
--- a/docs/notifications/usage--old.md
+++ b/docs/notifications/usage--old.md
@@ -231,7 +231,7 @@ Below are metadata fields that will be commonly used between processors and have
 # Example:
 const payload = {
   title: 'Entities Require Attention',
-  description: 'Entities: Service A, Service B'
+  description: 'Entities: Service A, Service B',
   metadata: {
      'backstage.io/body.markdown': `
         # Entities
diff --git a/docs/notifications/usage.md b/docs/notifications/usage.md
index a47ea7f354..279a1953e1 100644
--- a/docs/notifications/usage.md
+++ b/docs/notifications/usage.md
@@ -232,7 +232,7 @@ Below are metadata fields that will be commonly used between processors and have
 # Example:
 const payload = {
   title: 'Entities Require Attention',
-  description: 'Entities: Service A, Service B'
+  description: 'Entities: Service A, Service B',
   metadata: {
      'backstage.io/body.markdown': `
         # Entities