fix(AppLayout): Listen to notifications top down update (#895)

* fix(AppLayout): Listen to notifications top down update * build(deps-dev): Downgrade semantic-release/release-notes-generator to fix the release pipeline * build: Update build script
aws · May 25, 2023 · af37c27 · af37c27
1 parent 36f09f5
commit af37c27
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 182 deletions.
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
         "@semantic-release/exec": "^6.0.3",
         "@semantic-release/github": "^8.0.7",
         "@semantic-release/npm": "patch:@semantic-release/[email protected]#./patches/@semantic-release+npm.9.0.2.patch",
-        "@semantic-release/release-notes-generator": "^11.0.1",
+        "@semantic-release/release-notes-generator": "^10.0.3",
         "@types/license-checker": "^25.0.3",
         "@typescript-eslint/eslint-plugin": "^5.59.2",
         "@typescript-eslint/parser": "5.57.1",

diff --git a/packages/ui/src/components/AppLayout/components/NavHeader/index.tsx b/packages/ui/src/components/AppLayout/components/NavHeader/index.tsx
@@ -32,6 +32,24 @@ export interface User {
     email?: string;
 }
 
+/**
+ * Notification Utility Button setup
+ */
+export interface NotificationsUtility {
+    /**
+     * Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
+     */
+    badge: boolean;
+    /**
+     * Prevents the utility from being moved to an overflow menu on smaller screens.
+     */
+    disableUtilityCollapse?: boolean;
+    /**
+     * Specifies the event handler called when the utility is clicked.
+     */
+    onClick: () => void;
+}
+
 /**
  * Props for Top Navigation Header
  */
@@ -52,6 +70,10 @@ export interface NavHeaderProps {
      * The user information displayed on the right top corner of the app.
      */
     user?: User;
+    /**
+     * Specifies how the notification utility button display
+     */
+    notificationsUtility?: NotificationsUtility;
     /**
      * The callback for User Sign out
      */
@@ -61,74 +83,84 @@ export interface NavHeaderProps {
 /**
  * Top Navigation Header displayed on AppLayout.
  */
-const NavHeader: FC<NavHeaderProps> = ({ title, href = '/', logo, user, onSignout }) => {
+const NavHeader: FC<NavHeaderProps> = ({ title, href = '/', logo, user, onSignout, notificationsUtility }) => {
     const { theme, density, setTheme, setDensity } = useNorthStarThemeContext();
 
     const utilities: TopNavigationProps.Utility[] = useMemo(() => {
-        const menu: TopNavigationProps.Utility[] = [
-            {
-                type: 'menu-dropdown',
-                iconName: 'settings',
-                ariaLabel: 'Settings',
-                title: 'Settings',
-                items: [
-                    {
-                        id: 'theme',
-                        text: 'Theme',
-                        items: [
-                            {
-                                id: 'theme.light',
-                                text: 'Light',
-                                disabled: theme === Mode.Light,
-                                disabledReason: 'currently selected',
-                            },
-                            {
-                                id: 'theme.dark',
-                                text: 'Dark',
-                                disabled: theme === Mode.Dark,
-                                disabledReason: 'currently selected',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'density',
-                        text: 'Density',
-                        items: [
-                            {
-                                id: 'density.comfortable',
-                                text: 'Comfortable',
-                                disabled: density === Density.Comfortable,
-                                disabledReason: 'currently selected',
-                            },
-                            {
-                                id: 'density.compact',
-                                text: 'Compact',
-                                disabled: density === Density.Compact,
-                                disabledReason: 'currently selected',
-                            },
-                        ],
-                    },
-                ],
-                onItemClick: (e) => {
-                    switch (e.detail.id) {
-                        case 'theme.light':
-                            setTheme(Mode.Light);
-                            break;
-                        case 'theme.dark':
-                            setTheme(Mode.Dark);
-                            break;
-                        case 'density.comfortable':
-                            setDensity(Density.Comfortable);
-                            break;
-                        case 'density.compact':
-                            setDensity(Density.Compact);
-                            break;
-                        default:
-                            break;
-                    }
+        const menu: TopNavigationProps.Utility[] = [];
+
+        notificationsUtility &&
+            menu.push({
+                type: 'button',
+                iconName: 'notification',
+                title: 'Notifications',
+                ariaLabel: 'Notifications (unread)',
+                disableUtilityCollapse: false,
+                ...notificationsUtility,
+            });
+
+        menu.push({
+            type: 'menu-dropdown',
+            iconName: 'settings',
+            ariaLabel: 'Settings',
+            title: 'Settings',
+            items: [
+                {
+                    id: 'theme',
+                    text: 'Theme',
+                    items: [
+                        {
+                            id: 'theme.light',
+                            text: 'Light',
+                            disabled: theme === Mode.Light,
+                            disabledReason: 'currently selected',
+                        },
+                        {
+                            id: 'theme.dark',
+                            text: 'Dark',
+                            disabled: theme === Mode.Dark,
+                            disabledReason: 'currently selected',
+                        },
+                    ],
+                },
+                {
+                    id: 'density',
+                    text: 'Density',
+                    items: [
+                        {
+                            id: 'density.comfortable',
+                            text: 'Comfortable',
+                            disabled: density === Density.Comfortable,
+                            disabledReason: 'currently selected',
+                        },
+                        {
+                            id: 'density.compact',
+                            text: 'Compact',
+                            disabled: density === Density.Compact,
+                            disabledReason: 'currently selected',
+                        },
+                    ],
                 },
+            ],
+            onItemClick: (e) => {
+                switch (e.detail.id) {
+                    case 'theme.light':
+                        setTheme(Mode.Light);
+                        break;
+                    case 'theme.dark':
+                        setTheme(Mode.Dark);
+                        break;
+                    case 'density.comfortable':
+                        setDensity(Density.Comfortable);
+                        break;
+                    case 'density.compact':
+                        setDensity(Density.Compact);
+                        break;
+                    default:
+                        break;
+                }
             },
-        ];
+        });
 
         user &&
             menu.push({
@@ -141,7 +173,7 @@ const NavHeader: FC<NavHeaderProps> = ({ title, href = '/', logo, user, onSignou
             });
 
         return menu;
-    }, [theme, density, setDensity, setTheme, user, onSignout]);
+    }, [theme, density, setDensity, setTheme, user, onSignout, notificationsUtility]);
 
     return (
         <div style={{ position: 'sticky', top: 0, zIndex: 1002 }}>

diff --git a/packages/ui/src/components/AppLayout/index.stories.tsx b/packages/ui/src/components/AppLayout/index.stories.tsx
@@ -116,6 +116,10 @@ WithUser.args = {
         username: 'Username',
         email: '[email protected]',
     },
+    notificationsUtility: {
+        badge: true,
+        onClick: console.log,
+    },
 };
 
 const CustomHeader = (

diff --git a/packages/ui/src/components/AppLayout/index.tsx b/packages/ui/src/components/AppLayout/index.tsx
@@ -183,6 +183,10 @@ const AppLayout: FC<PropsWithChildren<AppLayoutProps>> = ({
         ) : null;
     }, [splitPanelProps]);
 
+    useEffect(() => {
+        setNotifications(props.notifications);
+    }, [props.notifications]);
+
     return (
         <AppLayoutContext.Provider
             value={{
@@ -211,6 +215,7 @@ const AppLayout: FC<PropsWithChildren<AppLayoutProps>> = ({
                     href={props.href}
                     logo={props.logo}
                     user={props.user}
+                    notificationsUtility={props.notificationsUtility}
                     onSignout={props.onSignout}
                 />
             )}

diff --git a/scripts/build.sh b/scripts/build.sh
@@ -37,4 +37,4 @@ echo "Package the example app for legacy"
 
 echo "Package the example app for ui"
 
-./scripts/packageDemo.sh ui ${PWD}/packages/examples/ui ${STORYBOOK_FOLDER_UI_EXAMPLE} ${PWD}/packages/ui/build 1500000 950000
+./scripts/packageDemo.sh ui ${PWD}/packages/examples/ui ${STORYBOOK_FOLDER_UI_EXAMPLE} ${PWD}/packages/ui/build 1500000 960000
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,4 +37,4 @@ echo "Package the example app for legacy"

		echo "Package the example app for ui"

		./scripts/packageDemo.sh ui ${PWD}/packages/examples/ui ${STORYBOOK_FOLDER_UI_EXAMPLE} ${PWD}/packages/ui/build 1500000 950000
		./scripts/packageDemo.sh ui ${PWD}/packages/examples/ui ${STORYBOOK_FOLDER_UI_EXAMPLE} ${PWD}/packages/ui/build 1500000 960000