From ea4fbba872d2c746b6e4a6ff88a52d39558bde1b Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Wed, 1 May 2024 13:00:16 -0300 Subject: [PATCH 1/9] feat: adds useSuitesReminder hook to get a consistent look between platforms --- .../Notification/Notification.stories.tsx | 32 +++++++++- .../SuitesReminder/useSuitesReminder.tsx | 61 +++++++++++++++++++ 2 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 src/hooks/SuitesReminder/useSuitesReminder.tsx diff --git a/src/components/feedback/Notification/Notification.stories.tsx b/src/components/feedback/Notification/Notification.stories.tsx index 318139c81..6fcf3d046 100644 --- a/src/components/feedback/Notification/Notification.stories.tsx +++ b/src/components/feedback/Notification/Notification.stories.tsx @@ -1,11 +1,11 @@ import { type Meta, type StoryObj } from '@storybook/react' import { Notification } from 'src/components/feedback/Notification/Notification' import { Button } from 'src/components/general/Button/Button' +import { useSuitesReminder } from 'src/hooks/SuitesReminder/useSuitesReminder' const meta: Meta = { title: 'Aquarium/Feedback/Notification', component: Notification, - args: { type: 'info', children: , @@ -36,6 +36,13 @@ const meta: Meta = { control: 'select', options: ['info', 'warning', 'success', 'error'], }, + children: { + options: ['Text', 'Custom Component'], + mapping: { + Text: 'Some text', + 'Custom Component': , + }, + }, }, } export default meta @@ -78,3 +85,26 @@ export const Error: Story = { type: 'error', }, } + +export const UseSuitesReminderHook: Story = { + render: () => { + const [openNotification, contextHolder] = useSuitesReminder({ + onClose: () => { + alert('Notification closed') + }, + onRemindMeLater: () => { + alert('Remind me later') + }, + onTakeMeThere: () => { + alert('Take me there') + }, + }) + + return ( + <> + {contextHolder} + + + ) + }, +} diff --git a/src/hooks/SuitesReminder/useSuitesReminder.tsx b/src/hooks/SuitesReminder/useSuitesReminder.tsx new file mode 100644 index 000000000..fe3201328 --- /dev/null +++ b/src/hooks/SuitesReminder/useSuitesReminder.tsx @@ -0,0 +1,61 @@ +import { type ReactNode } from 'react' +import { Button, type IButtonProps, type INotificationProps, notification, Space } from 'src/components' +import { FontWeightStrong } from 'src/styles/style' + +export interface ISuitesReminderOptions { + onClose: INotificationProps['onClose'] + onRemindMeLater: IButtonProps['onClick'] + onTakeMeThere: IButtonProps['onClick'] + duration?: number + title?: string + message?: string +} + +type OpenNotificationFn = () => void +type ContextHolder = ReactNode + +export type SuitesReminderHook = [OpenNotificationFn, ContextHolder] + +const DefaultReminderDuration = 4_000 +const DefaultTitle = 'Join the new mParticle Experience!' +const DefaultMessage = + 'Managing your data is easier than ever with the new mParticle experience. Try out the latest features with ease, and switch back to the classic experience anytime from the side navigation.' + +export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesReminderHook => { + const [api, contextHolder] = notification.useNotification() + + const { + onClose, + onRemindMeLater, + onTakeMeThere, + duration = DefaultReminderDuration, + title = DefaultTitle, + message = DefaultMessage, + } = options + + const openNotification = (): void => { + const key = `notification-${Date.now()}` + const btn = ( + + + + + ) + + api.open({ + message: {title}, + description: message, + btn, + key, + onClose, + placement: 'bottomLeft', + duration, + }) + } + + return [openNotification, contextHolder] +} From 6b35c3b042c93c4ff264bef345fb80f3cdab8988 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Wed, 1 May 2024 17:23:57 -0300 Subject: [PATCH 2/9] refactor: tie suites reminder notification to the GlobalNavigation component --- .../Notification/Notification.stories.tsx | 23 ---------- .../GlobalNavigation.stories.tsx | 44 ++++++++++++++++++- .../GlobalNavigation/GlobalNavigation.tsx | 3 ++ src/hooks/SuitesReminder/suites-reminder.css | 3 ++ .../SuitesReminder/useSuitesReminder.tsx | 29 +++++++++--- 5 files changed, 71 insertions(+), 31 deletions(-) create mode 100644 src/hooks/SuitesReminder/suites-reminder.css diff --git a/src/components/feedback/Notification/Notification.stories.tsx b/src/components/feedback/Notification/Notification.stories.tsx index 6fcf3d046..b460ac597 100644 --- a/src/components/feedback/Notification/Notification.stories.tsx +++ b/src/components/feedback/Notification/Notification.stories.tsx @@ -85,26 +85,3 @@ export const Error: Story = { type: 'error', }, } - -export const UseSuitesReminderHook: Story = { - render: () => { - const [openNotification, contextHolder] = useSuitesReminder({ - onClose: () => { - alert('Notification closed') - }, - onRemindMeLater: () => { - alert('Remind me later') - }, - onTakeMeThere: () => { - alert('Take me there') - }, - }) - - return ( - <> - {contextHolder} - - - ) - }, -} diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 6fb51de99..05161bf3e 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -1,7 +1,7 @@ import { type Meta, type StoryObj } from '@storybook/react' import { expect, screen, userEvent } from '@storybook/test' import React from 'react' -import { Button, Center, GlobalNavigation, Icon, type INavigationCreateProps, Space } from 'src/components' +import { Button, Center, Flex, GlobalNavigation, Icon, type INavigationCreateProps, Space } from 'src/components' import { Badge } from 'src/components/data-display/Badge/Badge' import { type IGlobalNavigationItem, @@ -9,6 +9,7 @@ import { } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' import { generateOrgs } from 'src/components/navigation/GlobalNavigation/stories-utils' import { type INavigationOrg } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorItems' +import { useSuitesReminder } from 'src/hooks/SuitesReminder/useSuitesReminder' const defaultLogo: IGlobalNavigationLogo = { label: 'Aqua', @@ -987,3 +988,44 @@ export const WorkspaceSearchWithNoResults: Meta = { await userEvent.type(searchInput, '123{enter}') }, } + +export const UseSuitesReminderHook: Story = { + render: props => { + const [openNotification, contextHolder] = useSuitesReminder({ + onClose: () => { + alert('Notification closed') + }, + onRemindMeLater: () => { + alert('Remind me later') + }, + onTakeMeThere: () => { + alert('Take me there') + }, + }) + + return ( + + {contextHolder} +
+ +
+ + + ) + }, + args: { + logo: defaultLogo, + tools: defaultTools, + management: defaultManagement, + orgs: defaultOrgs, + navigationButtonItemOptions: { + label: 'Sign Out of mParticle', + onClick: () => { + alert('signing out!') + }, + }, + onMpHomeClick: () => { + alert('Going to mP!') + }, + }, +} diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx index 4ab63e14b..88b956fcc 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx @@ -14,6 +14,7 @@ import { NavigationCreate } from 'src/components/navigation/GlobalNavigation/Nav import { WorkspaceSelector } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector' import { type IGlobalNavigationItem } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' import { NavigationItem } from 'src/components/navigation/GlobalNavigation/NavigationItem' +import { useSuitesReminder } from 'src/hooks/SuitesReminder/useSuitesReminder' export interface IGlobalNavigationProps { logo: IGlobalNavigationLogo @@ -93,3 +94,5 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => { ) } + +GlobalNavigation.useSuitesReminder = useSuitesReminder diff --git a/src/hooks/SuitesReminder/suites-reminder.css b/src/hooks/SuitesReminder/suites-reminder.css new file mode 100644 index 000000000..93758a9ee --- /dev/null +++ b/src/hooks/SuitesReminder/suites-reminder.css @@ -0,0 +1,3 @@ +.ant-notification.ant-notification-bottomLeft { + left: var(--nav-width) !important; +} \ No newline at end of file diff --git a/src/hooks/SuitesReminder/useSuitesReminder.tsx b/src/hooks/SuitesReminder/useSuitesReminder.tsx index fe3201328..2c1e3c549 100644 --- a/src/hooks/SuitesReminder/useSuitesReminder.tsx +++ b/src/hooks/SuitesReminder/useSuitesReminder.tsx @@ -1,11 +1,14 @@ -import { type ReactNode } from 'react' -import { Button, type IButtonProps, type INotificationProps, notification, Space } from 'src/components' +import 'src/styles/_variables.css' +import './suites-reminder.css' + +import { type ReactNode } from 'react' +import { Button, notification, Space } from 'src/components' import { FontWeightStrong } from 'src/styles/style' export interface ISuitesReminderOptions { - onClose: INotificationProps['onClose'] - onRemindMeLater: IButtonProps['onClick'] - onTakeMeThere: IButtonProps['onClick'] + onClose: () => void + onRemindMeLater: () => void + onTakeMeThere: () => void duration?: number title?: string message?: string @@ -37,10 +40,22 @@ export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesRemind const key = `notification-${Date.now()}` const btn = ( - - From 973fe4dba8bafacd84e0c65dd0f8aee0bb7bcf94 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Wed, 1 May 2024 17:29:25 -0300 Subject: [PATCH 3/9] chore: remove unused changes --- .../feedback/Notification/Notification.stories.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/feedback/Notification/Notification.stories.tsx b/src/components/feedback/Notification/Notification.stories.tsx index b460ac597..db0fef884 100644 --- a/src/components/feedback/Notification/Notification.stories.tsx +++ b/src/components/feedback/Notification/Notification.stories.tsx @@ -1,7 +1,6 @@ import { type Meta, type StoryObj } from '@storybook/react' import { Notification } from 'src/components/feedback/Notification/Notification' import { Button } from 'src/components/general/Button/Button' -import { useSuitesReminder } from 'src/hooks/SuitesReminder/useSuitesReminder' const meta: Meta = { title: 'Aquarium/Feedback/Notification', @@ -36,13 +35,6 @@ const meta: Meta = { control: 'select', options: ['info', 'warning', 'success', 'error'], }, - children: { - options: ['Text', 'Custom Component'], - mapping: { - Text: 'Some text', - 'Custom Component': , - }, - }, }, } export default meta From 13393bc314d430f524548f34f57eadb311cc55fc Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Wed, 1 May 2024 17:29:51 -0300 Subject: [PATCH 4/9] chore: remove unused changes --- src/components/feedback/Notification/Notification.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/feedback/Notification/Notification.stories.tsx b/src/components/feedback/Notification/Notification.stories.tsx index db0fef884..318139c81 100644 --- a/src/components/feedback/Notification/Notification.stories.tsx +++ b/src/components/feedback/Notification/Notification.stories.tsx @@ -5,6 +5,7 @@ import { Button } from 'src/components/general/Button/Button' const meta: Meta = { title: 'Aquarium/Feedback/Notification', component: Notification, + args: { type: 'info', children: , From fd97683fc97e9e6aadbbce5d2878b3d5b1646693 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Wed, 1 May 2024 17:54:14 -0300 Subject: [PATCH 5/9] refactor: better specificity on className customization --- src/hooks/SuitesReminder/suites-reminder.css | 4 ++-- src/hooks/SuitesReminder/useSuitesReminder.tsx | 12 +++++++----- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/hooks/SuitesReminder/suites-reminder.css b/src/hooks/SuitesReminder/suites-reminder.css index 93758a9ee..dd42ee5e4 100644 --- a/src/hooks/SuitesReminder/suites-reminder.css +++ b/src/hooks/SuitesReminder/suites-reminder.css @@ -1,3 +1,3 @@ -.ant-notification.ant-notification-bottomLeft { - left: var(--nav-width) !important; +.globalNavigation__suitesReminder.globalNavigation__suitesReminder-bottomLeft { + left: calc(var(--nav-width) + var(--margin-xs)) !important; } \ No newline at end of file diff --git a/src/hooks/SuitesReminder/useSuitesReminder.tsx b/src/hooks/SuitesReminder/useSuitesReminder.tsx index 2c1e3c549..6a1b315ea 100644 --- a/src/hooks/SuitesReminder/useSuitesReminder.tsx +++ b/src/hooks/SuitesReminder/useSuitesReminder.tsx @@ -19,14 +19,12 @@ type ContextHolder = ReactNode export type SuitesReminderHook = [OpenNotificationFn, ContextHolder] -const DefaultReminderDuration = 4_000 +const DefaultReminderDuration = 4.5 // same as antd notification default duration const DefaultTitle = 'Join the new mParticle Experience!' const DefaultMessage = 'Managing your data is easier than ever with the new mParticle experience. Try out the latest features with ease, and switch back to the classic experience anytime from the side navigation.' export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesReminderHook => { - const [api, contextHolder] = notification.useNotification() - const { onClose, onRemindMeLater, @@ -36,6 +34,12 @@ export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesRemind message = DefaultMessage, } = options + const [api, contextHolder] = notification.useNotification({ + prefixCls: 'globalNavigation__suitesReminder', + duration, + placement: 'bottomLeft', + }) + const openNotification = (): void => { const key = `notification-${Date.now()}` const btn = ( @@ -67,8 +71,6 @@ export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesRemind btn, key, onClose, - placement: 'bottomLeft', - duration, }) } From 273bcbad8e677d84b94eaa825bb656bdfd5b0c96 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Thu, 2 May 2024 15:48:16 -0300 Subject: [PATCH 6/9] chore: review suggestions --- src/hooks/SuitesReminder/useSuitesReminder.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/hooks/SuitesReminder/useSuitesReminder.tsx b/src/hooks/SuitesReminder/useSuitesReminder.tsx index 6a1b315ea..887a6f493 100644 --- a/src/hooks/SuitesReminder/useSuitesReminder.tsx +++ b/src/hooks/SuitesReminder/useSuitesReminder.tsx @@ -1,4 +1,4 @@ -import 'src/styles/_variables.css' +import 'src/styles/_variables.css' import './suites-reminder.css' import { type ReactNode } from 'react' @@ -34,7 +34,7 @@ export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesRemind message = DefaultMessage, } = options - const [api, contextHolder] = notification.useNotification({ + const [notificationApi, contextHolder] = notification.useNotification({ prefixCls: 'globalNavigation__suitesReminder', duration, placement: 'bottomLeft', @@ -49,7 +49,7 @@ export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesRemind size="small" onClick={_event => { onRemindMeLater() - api.destroy(key) + notificationApi.destroy(key) }}> Remind me later @@ -58,14 +58,14 @@ export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesRemind size="small" onClick={_event => { onTakeMeThere() - api.destroy(key) + notificationApi.destroy(key) }}> Take me there ) - api.open({ + notificationApi.open({ message: {title}, description: message, btn, From 7683342606221ed1ea4f1240299694582e68c3b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Tib=C3=BArcio?= Date: Mon, 13 May 2024 11:55:54 -0300 Subject: [PATCH 7/9] Update src/hooks/SuitesReminder/useSuitesReminder.tsx Co-authored-by: jared-dickman --- src/hooks/SuitesReminder/useSuitesReminder.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/SuitesReminder/useSuitesReminder.tsx b/src/hooks/SuitesReminder/useSuitesReminder.tsx index 887a6f493..93d9b86fe 100644 --- a/src/hooks/SuitesReminder/useSuitesReminder.tsx +++ b/src/hooks/SuitesReminder/useSuitesReminder.tsx @@ -1,6 +1,5 @@ import 'src/styles/_variables.css' import './suites-reminder.css' - import { type ReactNode } from 'react' import { Button, notification, Space } from 'src/components' import { FontWeightStrong } from 'src/styles/style' From 01f509779bb44701336e01e31d7b2e760d8757b8 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Mon, 13 May 2024 14:46:08 -0300 Subject: [PATCH 8/9] chore: fix some reviews --- .../GlobalNavigation.stories.tsx | 30 ++++++++++++++++++- .../SuitesReminder/useSuitesReminder.tsx | 6 ++-- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 4d2c712f0..4cef739b6 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -1,5 +1,5 @@ import { type Meta, type StoryObj } from '@storybook/react' -import { expect, screen, userEvent } from '@storybook/test' +import { expect, fn, screen, userEvent } from '@storybook/test' import React from 'react' import { Button, Center, Flex, GlobalNavigation, Icon, type INavigationCreateProps, Space } from 'src/components' import { Badge } from 'src/components/data-display/Badge/Badge' @@ -998,6 +998,34 @@ export const WorkspaceSearchWithNoResults: Meta = { } export const UseSuitesReminderHook: Story = { + play: async () => { + const alert = fn() + global.alert = alert + + const notificationTitle = 'Join the new mParticle Experience!' + const getNotification = () => screen.getByText(notificationTitle) + + // mock global alert function with vitest + + const showNotificationBtn = screen.getByText('Show Notification') + await userEvent.click(showNotificationBtn) + + // Remind me later + const remindMeLaterBtn = await screen.findByText('Remind me later') + await userEvent.click(remindMeLaterBtn) + + await expect(alert).toBeCalledWith('Remind me later') + await expect(getNotification()).not.toBeVisible() + + // Take me there + await userEvent.click(showNotificationBtn) + + const takeMeThereBtn = await screen.findByText('Take me there') + await userEvent.click(takeMeThereBtn) + + await expect(alert).toBeCalledWith('Take me there') + await expect(getNotification()).not.toBeVisible() + }, render: props => { const [openNotification, contextHolder] = useSuitesReminder({ onClose: () => { diff --git a/src/hooks/SuitesReminder/useSuitesReminder.tsx b/src/hooks/SuitesReminder/useSuitesReminder.tsx index 887a6f493..458f2bc11 100644 --- a/src/hooks/SuitesReminder/useSuitesReminder.tsx +++ b/src/hooks/SuitesReminder/useSuitesReminder.tsx @@ -19,10 +19,10 @@ type ContextHolder = ReactNode export type SuitesReminderHook = [OpenNotificationFn, ContextHolder] -const DefaultReminderDuration = 4.5 // same as antd notification default duration -const DefaultTitle = 'Join the new mParticle Experience!' +const DefaultReminderDuration = 4.5 as const // same as antd notification default duration +const DefaultTitle = 'Join the new mParticle Experience!' as const const DefaultMessage = - 'Managing your data is easier than ever with the new mParticle experience. Try out the latest features with ease, and switch back to the classic experience anytime from the side navigation.' + 'Managing your data is easier than ever with the new mParticle experience. Try out the latest features with ease, and switch back to the classic experience anytime from the side navigation.' as const export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesReminderHook => { const { From f3846971bf21e92c9aae47028b1f3c6099e3f9d1 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Mon, 13 May 2024 15:47:03 -0300 Subject: [PATCH 9/9] chore: add tests --- .../GlobalNavigation/GlobalNavigation.stories.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 4cef739b6..1622ed6aa 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -999,14 +999,9 @@ export const WorkspaceSearchWithNoResults: Meta = { export const UseSuitesReminderHook: Story = { play: async () => { - const alert = fn() + const alert = fn().mockImplementation(() => {}) global.alert = alert - const notificationTitle = 'Join the new mParticle Experience!' - const getNotification = () => screen.getByText(notificationTitle) - - // mock global alert function with vitest - const showNotificationBtn = screen.getByText('Show Notification') await userEvent.click(showNotificationBtn) @@ -1015,7 +1010,6 @@ export const UseSuitesReminderHook: Story = { await userEvent.click(remindMeLaterBtn) await expect(alert).toBeCalledWith('Remind me later') - await expect(getNotification()).not.toBeVisible() // Take me there await userEvent.click(showNotificationBtn) @@ -1024,7 +1018,6 @@ export const UseSuitesReminderHook: Story = { await userEvent.click(takeMeThereBtn) await expect(alert).toBeCalledWith('Take me there') - await expect(getNotification()).not.toBeVisible() }, render: props => { const [openNotification, contextHolder] = useSuitesReminder({