From 533428e64de4e48e8e4d016df7c73f807a54851b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Tib=C3=BArcio?= Date: Tue, 14 May 2024 12:17:02 -0300 Subject: [PATCH] feat: Adds SuitesReminder hook to get a consistent look across platforms for the reminder notification (#221) Co-authored-by: jared-dickman --- .../GlobalNavigation.stories.tsx | 67 +++++++++++++++- .../GlobalNavigation/GlobalNavigation.tsx | 3 + src/hooks/SuitesReminder/suites-reminder.css | 3 + .../SuitesReminder/useSuitesReminder.tsx | 77 +++++++++++++++++++ 4 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 src/hooks/SuitesReminder/suites-reminder.css create mode 100644 src/hooks/SuitesReminder/useSuitesReminder.tsx diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 5e101f528..ba0145a10 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 { expect, fn, 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', @@ -997,3 +998,65 @@ export const WorkspaceSearchWithNoResults: Meta = { await userEvent.type(searchInput, '123{enter}') }, } + +export const UseSuitesReminderHook: Story = { + play: async () => { + const alert = fn().mockImplementation(() => {}) + global.alert = alert + + 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') + + // 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') + }, + 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 88bc6fe38..9c71c4cff 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' import { Popover } from 'antd' import MiniMap from 'src/components/navigation/MiniMap/MiniMap' @@ -101,3 +102,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..dd42ee5e4 --- /dev/null +++ b/src/hooks/SuitesReminder/suites-reminder.css @@ -0,0 +1,3 @@ +.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 new file mode 100644 index 000000000..e23896bf2 --- /dev/null +++ b/src/hooks/SuitesReminder/useSuitesReminder.tsx @@ -0,0 +1,77 @@ +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: () => void + onRemindMeLater: () => void + onTakeMeThere: () => void + duration?: number + title?: string + message?: string +} + +type OpenNotificationFn = () => void +type ContextHolder = ReactNode + +export type SuitesReminderHook = [OpenNotificationFn, ContextHolder] + +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.' as const + +export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesReminderHook => { + const { + onClose, + onRemindMeLater, + onTakeMeThere, + duration = DefaultReminderDuration, + title = DefaultTitle, + message = DefaultMessage, + } = options + + const [notificationApi, contextHolder] = notification.useNotification({ + prefixCls: 'globalNavigation__suitesReminder', + duration, + placement: 'bottomLeft', + }) + + const openNotification = (): void => { + const key = `notification-${Date.now()}` + const btn = ( + + + + + ) + + notificationApi.open({ + message: {title}, + description: message, + btn, + key, + onClose, + }) + } + + return [openNotification, contextHolder] +}