From af37c271f81387cfbc032d23ff829d79fcc6e628 Mon Sep 17 00:00:00 2001 From: Jessie Wei Date: Thu, 25 May 2023 16:42:35 +1000 Subject: [PATCH] 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 --- package.json | 2 +- .../AppLayout/components/NavHeader/index.tsx | 160 +++++++++++------- .../components/AppLayout/index.stories.tsx | 4 + .../ui/src/components/AppLayout/index.tsx | 5 + scripts/build.sh | 2 +- yarn.lock | 121 +------------ 6 files changed, 112 insertions(+), 182 deletions(-) diff --git a/package.json b/package.json index f546ffde..e10b362e 100644 --- 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/npm@9.0.2#./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 index 5ae319f4..2d7ecca8 100644 --- 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 = ({ title, href = '/', logo, user, onSignout }) => { +const NavHeader: FC = ({ 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 = ({ title, href = '/', logo, user, onSignou }); return menu; - }, [theme, density, setDensity, setTheme, user, onSignout]); + }, [theme, density, setDensity, setTheme, user, onSignout, notificationsUtility]); return (
diff --git a/packages/ui/src/components/AppLayout/index.stories.tsx b/packages/ui/src/components/AppLayout/index.stories.tsx index 7caa4359..8ff9d2f8 100644 --- 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: 'test@test.com', }, + 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 index d7237d61..8b328e86 100644 --- a/packages/ui/src/components/AppLayout/index.tsx +++ b/packages/ui/src/components/AppLayout/index.tsx @@ -183,6 +183,10 @@ const AppLayout: FC> = ({ ) : null; }, [splitPanelProps]); + useEffect(() => { + setNotifications(props.notifications); + }, [props.notifications]); + return ( > = ({ 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 index f4c0b844..e23cd512 100755 --- 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 diff --git a/yarn.lock b/yarn.lock index 515074a7..17d4cc77 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6443,7 +6443,7 @@ __metadata: languageName: node linkType: hard -"@semantic-release/release-notes-generator@npm:^10.0.0": +"@semantic-release/release-notes-generator@npm:^10.0.0, @semantic-release/release-notes-generator@npm:^10.0.3": version: 10.0.3 resolution: "@semantic-release/release-notes-generator@npm:10.0.3" dependencies: @@ -6463,26 +6463,6 @@ __metadata: languageName: node linkType: hard -"@semantic-release/release-notes-generator@npm:^11.0.1": - version: 11.0.1 - resolution: "@semantic-release/release-notes-generator@npm:11.0.1" - dependencies: - conventional-changelog-angular: ^5.0.0 - conventional-changelog-writer: ^5.0.0 - conventional-commits-filter: ^2.0.0 - conventional-commits-parser: ^3.2.3 - debug: ^4.0.0 - get-stream: ^6.0.0 - import-from: ^4.0.0 - into-stream: ^7.0.0 - lodash-es: ^4.17.21 - read-pkg-up: ^9.0.0 - peerDependencies: - semantic-release: ">=20.1.0" - checksum: 19bb468c96be0e642646d192d16cdcbf1aee5e60203c53c7e0148da09f47d581939cc20e7aaccd26f0198d93932254b7ab496ef3d73d59d129d38ea9e3f25c04 - languageName: node - linkType: hard - "@sinclair/typebox@npm:^0.24.1": version: 0.24.46 resolution: "@sinclair/typebox@npm:0.24.46" @@ -11023,7 +11003,7 @@ __metadata: languageName: node linkType: hard -"@types/normalize-package-data@npm:^2.4.0, @types/normalize-package-data@npm:^2.4.1": +"@types/normalize-package-data@npm:^2.4.0": version: 2.4.1 resolution: "@types/normalize-package-data@npm:2.4.1" checksum: e87bccbf11f95035c89a132b52b79ce69a1e3652fe55962363063c9c0dae0fe2477ebc585e03a9652adc6f381d24ba5589cc5e51849df4ced3d3e004a7d40ed5 @@ -13245,7 +13225,7 @@ __metadata: "@semantic-release/exec": ^6.0.3 "@semantic-release/github": ^8.0.7 "@semantic-release/npm": "patch:@semantic-release/npm@9.0.2#./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 @@ -19307,16 +19287,6 @@ __metadata: languageName: node linkType: hard -"find-up@npm:^6.3.0": - version: 6.3.0 - resolution: "find-up@npm:6.3.0" - dependencies: - locate-path: ^7.1.0 - path-exists: ^5.0.0 - checksum: 9a21b7f9244a420e54c6df95b4f6fc3941efd3c3e5476f8274eb452f6a85706e7a6a90de71353ee4f091fcb4593271a6f92810a324ec542650398f928783c280 - languageName: node - linkType: hard - "find-versions@npm:^4.0.0": version: 4.0.0 resolution: "find-versions@npm:4.0.0" @@ -21471,16 +21441,6 @@ __metadata: languageName: node linkType: hard -"into-stream@npm:^7.0.0": - version: 7.0.0 - resolution: "into-stream@npm:7.0.0" - dependencies: - from2: ^2.3.0 - p-is-promise: ^3.0.0 - checksum: 10c259101237622b2f90a3a30388f2e997f7c4cb16d7236da0380f2e5691b8f9ce32ea2614ae5d1d3b5ad4eba89e2adac0e3d3d24f8494bff69de145432c2d94 - languageName: node - linkType: hard - "invariant@npm:^2.2.0, invariant@npm:^2.2.4": version: 2.2.4 resolution: "invariant@npm:2.2.4" @@ -24600,22 +24560,6 @@ __metadata: languageName: node linkType: hard -"locate-path@npm:^7.1.0": - version: 7.2.0 - resolution: "locate-path@npm:7.2.0" - dependencies: - p-locate: ^6.0.0 - checksum: c1b653bdf29beaecb3d307dfb7c44d98a2a98a02ebe353c9ad055d1ac45d6ed4e1142563d222df9b9efebc2bcb7d4c792b507fad9e7150a04c29530b7db570f8 - languageName: node - linkType: hard - -"lodash-es@npm:^4.17.21": - version: 4.17.21 - resolution: "lodash-es@npm:4.17.21" - checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2 - languageName: node - linkType: hard - "lodash.capitalize@npm:^4.2.1": version: 4.2.1 resolution: "lodash.capitalize@npm:4.2.1" @@ -26836,7 +26780,7 @@ __metadata: languageName: node linkType: hard -"normalize-package-data@npm:^3.0.0, normalize-package-data@npm:^3.0.2": +"normalize-package-data@npm:^3.0.0": version: 3.0.3 resolution: "normalize-package-data@npm:3.0.3" dependencies: @@ -27653,15 +27597,6 @@ __metadata: languageName: node linkType: hard -"p-limit@npm:^4.0.0": - version: 4.0.0 - resolution: "p-limit@npm:4.0.0" - dependencies: - yocto-queue: ^1.0.0 - checksum: 01d9d70695187788f984226e16c903475ec6a947ee7b21948d6f597bed788e3112cc7ec2e171c1d37125057a5f45f3da21d8653e04a3a793589e12e9e80e756b - languageName: node - linkType: hard - "p-locate@npm:^2.0.0": version: 2.0.0 resolution: "p-locate@npm:2.0.0" @@ -27698,15 +27633,6 @@ __metadata: languageName: node linkType: hard -"p-locate@npm:^6.0.0": - version: 6.0.0 - resolution: "p-locate@npm:6.0.0" - dependencies: - p-limit: ^4.0.0 - checksum: 2bfe5234efa5e7a4e74b30a5479a193fdd9236f8f6b4d2f3f69e3d286d9a7d7ab0c118a2a50142efcf4e41625def635bd9332d6cbf9cc65d85eb0718c579ab38 - languageName: node - linkType: hard - "p-map@npm:^2.0.0": version: 2.1.0 resolution: "p-map@npm:2.1.0" @@ -28023,13 +27949,6 @@ __metadata: languageName: node linkType: hard -"path-exists@npm:^5.0.0": - version: 5.0.0 - resolution: "path-exists@npm:5.0.0" - checksum: 8ca842868cab09423994596eb2c5ec2a971c17d1a3cb36dbf060592c730c725cd524b9067d7d2a1e031fef9ba7bd2ac6dc5ec9fb92aa693265f7be3987045254 - languageName: node - linkType: hard - "path-is-absolute@npm:^1.0.0": version: 1.0.1 resolution: "path-is-absolute@npm:1.0.1" @@ -31007,17 +30926,6 @@ __metadata: languageName: node linkType: hard -"read-pkg-up@npm:^9.0.0": - version: 9.1.0 - resolution: "read-pkg-up@npm:9.1.0" - dependencies: - find-up: ^6.3.0 - read-pkg: ^7.1.0 - type-fest: ^2.5.0 - checksum: 41b8ba4bdb7c1e914aa6ce2d36a7c1651e9086938977fa12f058f6fca51ee15315634af648ca4ef70dd074e575e854616b39032ad0b376e9e97d61a9d0867afe - languageName: node - linkType: hard - "read-pkg@npm:^1.0.0": version: 1.1.0 resolution: "read-pkg@npm:1.1.0" @@ -31041,18 +30949,6 @@ __metadata: languageName: node linkType: hard -"read-pkg@npm:^7.1.0": - version: 7.1.0 - resolution: "read-pkg@npm:7.1.0" - dependencies: - "@types/normalize-package-data": ^2.4.1 - normalize-package-data: ^3.0.2 - parse-json: ^5.2.0 - type-fest: ^2.0.0 - checksum: 20d11c59be3ae1fc79d4b9c8594dabeaec58105f9dfd710570ef9690ec2ac929247006e79ca114257683228663199735d60f149948dbc5f34fcd2d28883ab5f7 - languageName: node - linkType: hard - "read@npm:1, read@npm:^1.0.7, read@npm:~1.0.7": version: 1.0.7 resolution: "read@npm:1.0.7" @@ -34912,7 +34808,7 @@ __metadata: languageName: node linkType: hard -"type-fest@npm:^2.0.0, type-fest@npm:^2.19.0, type-fest@npm:^2.5.0": +"type-fest@npm:^2.19.0": version: 2.19.0 resolution: "type-fest@npm:2.19.0" checksum: a4ef07ece297c9fba78fc1bd6d85dff4472fe043ede98bd4710d2615d15776902b595abf62bd78339ed6278f021235fb28a96361f8be86ed754f778973a0d278 @@ -37211,13 +37107,6 @@ __metadata: languageName: node linkType: hard -"yocto-queue@npm:^1.0.0": - version: 1.0.0 - resolution: "yocto-queue@npm:1.0.0" - checksum: 2cac84540f65c64ccc1683c267edce396b26b1e931aa429660aefac8fbe0188167b7aee815a3c22fa59a28a58d898d1a2b1825048f834d8d629f4c2a5d443801 - languageName: node - linkType: hard - "zwitch@npm:^1.0.0": version: 1.0.5 resolution: "zwitch@npm:1.0.5"