From f33d71a4824778df446d717328b03a31d7ee1464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Bonnet?= Date: Mon, 2 Sep 2024 16:28:59 +0200 Subject: [PATCH] refactor: remove toast.scss (#1623) --- apps/console/src/main.tsx | 3 ++- libs/shared/toast/src/lib/toast.tsx | 3 ++- .../src/lib/components/toast/toast.spec.tsx | 22 +++++++--------- .../lib/components/toast/toast.stories.tsx | 4 +-- .../ui/src/lib/components/toast/toast.tsx | 26 ++++++++++++------- .../ui/src/lib/styles/components/toast.scss | 26 ------------------- libs/shared/ui/src/lib/styles/main.scss | 1 - libs/shared/ui/src/lib/utils/toast.tsx | 3 ++- 8 files changed, 35 insertions(+), 53 deletions(-) delete mode 100644 libs/shared/ui/src/lib/styles/components/toast.scss diff --git a/apps/console/src/main.tsx b/apps/console/src/main.tsx index 7402f594245..584e4ecfa5e 100644 --- a/apps/console/src/main.tsx +++ b/apps/console/src/main.tsx @@ -1,4 +1,5 @@ import { Auth0Provider } from '@auth0/auth0-react' +import { type IconName } from '@fortawesome/fontawesome-common-types' import { Provider as TooltipProvider } from '@radix-ui/react-tooltip' import { type Mutation, @@ -37,7 +38,7 @@ type ToastArgs = { title: string description?: string callback?: () => void - iconAction?: string + iconAction?: IconName labelAction?: string externalLink?: string } diff --git a/libs/shared/toast/src/lib/toast.tsx b/libs/shared/toast/src/lib/toast.tsx index 6975894d958..f7f8c847bae 100644 --- a/libs/shared/toast/src/lib/toast.tsx +++ b/libs/shared/toast/src/lib/toast.tsx @@ -1,3 +1,4 @@ +import { type IconName } from '@fortawesome/fontawesome-common-types' import { type Toast, toast as toastAction } from 'react-hot-toast' import { ToastContent } from '@qovery/shared/ui' @@ -12,7 +13,7 @@ export const toast = ( title: string, description?: string, callback?: () => void, - iconAction?: string, + iconAction?: IconName, labelAction?: string, externalLink?: string ) => { diff --git a/libs/shared/ui/src/lib/components/toast/toast.spec.tsx b/libs/shared/ui/src/lib/components/toast/toast.spec.tsx index 97b2923007e..0fbee375ca8 100644 --- a/libs/shared/ui/src/lib/components/toast/toast.spec.tsx +++ b/libs/shared/ui/src/lib/components/toast/toast.spec.tsx @@ -1,4 +1,4 @@ -import { act, render, screen } from '__tests__/utils/setup-jest' +import { renderWithProviders, screen } from '@qovery/shared/util-tests' import { ToastEnum } from '../../utils/toast' import ToastBehavior, { ToastContent, type ToastProps } from './toast' @@ -8,29 +8,29 @@ const props: ToastProps = { describe('Toast', () => { it('should render successfully', () => { - const { baseElement } = render() + const { baseElement } = renderWithProviders() expect(baseElement).toBeTruthy() }) it('should render a toast content', () => { props.status = ToastEnum.SUCCESS - const { baseElement } = render(ToastContent(props.status)) + const { baseElement } = renderWithProviders(ToastContent(props.status)) expect(baseElement).toBeTruthy() }) it('should have a error icon', () => { props.status = ToastEnum.ERROR - render(ToastContent(props.status)) + renderWithProviders(ToastContent(props.status)) const toast = screen.queryByTestId('toast') as HTMLDivElement - expect(toast.querySelector('.toast__icon span')?.classList).toContain('icon-solid-circle-exclamation') + expect(toast.querySelector('span')?.classList).toContain('icon-solid-circle-exclamation') }) it('should have a title', () => { props.title = 'my-title' - render(ToastContent(props.status, undefined, props.title)) + renderWithProviders(ToastContent(props.status, undefined, props.title)) const toastTitle = screen.queryByTestId('toast-title') as HTMLParagraphElement @@ -40,14 +40,14 @@ describe('Toast', () => { it('should have a description', () => { props.description = 'my-description' - render(ToastContent(props.status, undefined, '', props.description)) + renderWithProviders(ToastContent(props.status, undefined, '', props.description)) const toastTitle = screen.queryByTestId('toast-description') as HTMLParagraphElement expect(toastTitle?.textContent).toBe('my-description') }) - it('should render with a label and no icon', () => { + it('should render with a label and no icon', async () => { props.description = 'my-description' props.externalLink = 'https://my-link.com' props.actionLabel = 'my-label' @@ -55,7 +55,7 @@ describe('Toast', () => { const spy = jest.fn() window.open = jest.fn((url: string, target: string) => ({})) - render( + const { userEvent } = renderWithProviders( ToastContent( props.status, undefined, @@ -72,9 +72,7 @@ describe('Toast', () => { expect(labelActionButton).toHaveTextContent('my-label') - act(() => { - labelActionButton.click() - }) + await userEvent.click(labelActionButton) expect(spy).toHaveBeenCalled() expect(window.open).toHaveBeenCalledWith('https://my-link.com', '_blank') diff --git a/libs/shared/ui/src/lib/components/toast/toast.stories.tsx b/libs/shared/ui/src/lib/components/toast/toast.stories.tsx index 269f8bdf101..ec7b3b645cd 100644 --- a/libs/shared/ui/src/lib/components/toast/toast.stories.tsx +++ b/libs/shared/ui/src/lib/components/toast/toast.stories.tsx @@ -8,7 +8,7 @@ export default { title: 'Toaster', argTypes: { actionIcon: { - options: ['icon-solid-wheel', 'icon-solid-circle-plus', 'icon-solid-book', 'icon-solid-key'], + options: ['gear', 'plus', 'book', 'key'], control: { type: 'select' }, }, }, @@ -55,7 +55,7 @@ WithActionIcon.args = { title: 'Cluster installed', description: '3 applications has been deployed', callback: () => console.log('my-callback'), - actionIcon: 'icon-solid-pen', + actionIcon: 'pen', } export const WithActionLabel = Template.bind({}) diff --git a/libs/shared/ui/src/lib/components/toast/toast.tsx b/libs/shared/ui/src/lib/components/toast/toast.tsx index 468504a1c02..52882036704 100644 --- a/libs/shared/ui/src/lib/components/toast/toast.tsx +++ b/libs/shared/ui/src/lib/components/toast/toast.tsx @@ -1,3 +1,4 @@ +import { type IconName } from '@fortawesome/fontawesome-common-types' import { type MouseEvent } from 'react' import { type Toast, Toaster, toast as toastAction } from 'react-hot-toast' import { ToastEnum } from '../../utils/toast' @@ -20,7 +21,7 @@ export const ToastContent = ( title?: string, description?: string, callback?: () => void, - iconAction?: string, + iconAction?: IconName, labelAction?: string, externalLink?: string ) => { @@ -37,14 +38,18 @@ export const ToastContent = ( } return ( -
options && toastAction.dismiss(options.id)}> -
-
+
options && toastAction.dismiss(options.id)} + > +
+
{status === ToastEnum.SUCCESS && } {status === ToastEnum.ERROR && } {status === ToastEnum.WARNING && }
-
+
{title && (

{title} @@ -78,16 +83,19 @@ export const ToastContent = ( }} > {iconAction ? ( - + ) : ( - + )}

)} {options && ( - )}
diff --git a/libs/shared/ui/src/lib/styles/components/toast.scss b/libs/shared/ui/src/lib/styles/components/toast.scss deleted file mode 100644 index c26b5217687..00000000000 --- a/libs/shared/ui/src/lib/styles/components/toast.scss +++ /dev/null @@ -1,26 +0,0 @@ -.toast { - @apply relative cursor-pointer rounded bg-neutral-900; - box-shadow: 0 16px 24px rgba(0, 0, 0, 0.12); - - &:hover { - .toast__close { - @apply opacity-100; - } - } -} - -.toast__icon { - @apply mt-[1px] flex h-full justify-center pl-4 pt-2; -} - -.toast__wrapper { - @apply flex; -} - -.toast__content { - @apply max-w-[256px] break-words py-2 pl-3 pr-4; -} - -.toast__close { - @apply absolute left-[-8px] top-[-8px] flex h-6 w-6 items-center justify-center rounded-full border border-neutral-400 bg-neutral-600 text-white opacity-0 duration-150 ease-out hover:bg-neutral-700; -} diff --git a/libs/shared/ui/src/lib/styles/main.scss b/libs/shared/ui/src/lib/styles/main.scss index 5be163cc439..baf0ce3b5b4 100644 --- a/libs/shared/ui/src/lib/styles/main.scss +++ b/libs/shared/ui/src/lib/styles/main.scss @@ -20,7 +20,6 @@ $fa-font-path: '/assets/fonts/font-awesome'; @import 'components/input'; @import 'components/menu'; @import 'components/modal'; -@import 'components/toast'; @import 'components/select'; @import 'components/date-picker'; diff --git a/libs/shared/ui/src/lib/utils/toast.tsx b/libs/shared/ui/src/lib/utils/toast.tsx index d28dd5ff6bd..5add363b002 100644 --- a/libs/shared/ui/src/lib/utils/toast.tsx +++ b/libs/shared/ui/src/lib/utils/toast.tsx @@ -1,3 +1,4 @@ +import { type IconName } from '@fortawesome/fontawesome-common-types' import { type Toast, toast as toastAction } from 'react-hot-toast' import { ToastContent } from '../components/toast/toast' @@ -12,7 +13,7 @@ export const toast = ( title: string, description?: string, callback?: () => void, - iconAction?: string, + iconAction?: IconName, labelAction?: string, externalLink?: string ) => {