From 5ba35dbc1d2efaa85529de940e7e7b4cc52050e2 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 14 Jun 2024 11:39:57 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20improve=20the=20?= =?UTF-8?q?ui=20error=20and=20message=20info=20ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Improve the ui error and message info ui: - Can use a icon in TextErrors component - use mode the Alert component to display message info --- CHANGELOG.md | 1 + .../impress/src/components/TextErrors.tsx | 48 +++++++++--------- .../members-grid/__tests__/ModalRole.test.tsx | 6 +-- .../members-grid/components/MemberAction.tsx | 2 + .../members-grid/components/ModalDelete.tsx | 49 +++++++++---------- .../members-grid/components/ModalRole.tsx | 47 +++++++++--------- .../components/ModalRemovePad.tsx | 19 ++++--- .../components/ModalUpdatePad.tsx | 11 +++-- .../pads/pad-tools/components/ModalPDF.tsx | 14 ++++-- .../pads-panel/__tests__/PanelPads.test.tsx | 4 +- .../pads/pads-panel/components/PadList.tsx | 46 ++++++++++------- .../apps/impress/src/pages/docs/[id].tsx | 18 +++++-- 12 files changed, 146 insertions(+), 119 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 465d771e..1cbe9e82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ and this project adheres to - (frontend) pdf has title doc (#84) - ⚡️(e2e) unique login between tests (#80) - ⚡️(CI) improve e2e job (#86) +- ♻️(frontend) improve the error and message info ui (#93) ## Fixed diff --git a/src/frontend/apps/impress/src/components/TextErrors.tsx b/src/frontend/apps/impress/src/components/TextErrors.tsx index 7419b99d..b39ac33b 100644 --- a/src/frontend/apps/impress/src/components/TextErrors.tsx +++ b/src/frontend/apps/impress/src/components/TextErrors.tsx @@ -1,3 +1,5 @@ +import { Alert, VariantType } from '@openfun/cunningham-react'; +import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { Box, Text, TextType } from '@/components'; @@ -5,40 +7,38 @@ import { Box, Text, TextType } from '@/components'; interface TextErrorsProps extends TextType { causes?: string[]; defaultMessage?: string; + icon?: ReactNode; } export const TextErrors = ({ causes, defaultMessage, + icon, ...textProps }: TextErrorsProps) => { const { t } = useTranslation(); return ( - - {causes && - causes.map((cause, i) => ( - - {cause} - - ))} + + + {causes && + causes.map((cause, i) => ( + + {cause} + + ))} - {!causes && ( - - {defaultMessage || t('Something bad happens, please retry.')} - - )} - + {!causes && ( + + {defaultMessage || t('Something bad happens, please retry.')} + + )} + + ); }; diff --git a/src/frontend/apps/impress/src/features/pads/members/members-grid/__tests__/ModalRole.test.tsx b/src/frontend/apps/impress/src/features/pads/members/members-grid/__tests__/ModalRole.test.tsx index 027e2181..18d41968 100644 --- a/src/frontend/apps/impress/src/features/pads/members/members-grid/__tests__/ModalRole.test.tsx +++ b/src/frontend/apps/impress/src/features/pads/members/members-grid/__tests__/ModalRole.test.tsx @@ -172,13 +172,9 @@ describe('ModalRole', () => { { wrapper: AppWrapper }, ); - expect( - screen.getByText('You are the sole owner of this group.'), - ).toBeInTheDocument(); - expect( screen.getByText( - 'Make another member the group owner, before you can change your own role.', + 'You are the sole owner of this group, make another member the group owner, before you can change your own role.', ), ).toBeInTheDocument(); diff --git a/src/frontend/apps/impress/src/features/pads/members/members-grid/components/MemberAction.tsx b/src/frontend/apps/impress/src/features/pads/members/members-grid/components/MemberAction.tsx index 74cac1f2..b1004778 100644 --- a/src/frontend/apps/impress/src/features/pads/members/members-grid/components/MemberAction.tsx +++ b/src/frontend/apps/impress/src/features/pads/members/members-grid/components/MemberAction.tsx @@ -53,6 +53,7 @@ export const MemberAction = ({ }} color="primary-text" icon={edit} + size="small" > {t('Update role')} @@ -64,6 +65,7 @@ export const MemberAction = ({ }} color="primary-text" icon={delete} + size="small" > {t('Remove from group')} diff --git a/src/frontend/apps/impress/src/features/pads/members/members-grid/components/ModalDelete.tsx b/src/frontend/apps/impress/src/features/pads/members/members-grid/components/ModalDelete.tsx index 0ad9bb76..10736305 100644 --- a/src/frontend/apps/impress/src/features/pads/members/members-grid/components/ModalDelete.tsx +++ b/src/frontend/apps/impress/src/features/pads/members/members-grid/components/ModalDelete.tsx @@ -1,12 +1,13 @@ import { + Alert, Button, Modal, ModalSize, VariantType, useToastProvider, } from '@openfun/cunningham-react'; -import { t } from 'i18next'; import { useRouter } from 'next/navigation'; +import { useTranslation } from 'react-i18next'; import IconUser from '@/assets/icons/icon-user.svg'; import { Box, Text, TextErrors } from '@/components'; @@ -28,6 +29,7 @@ export const ModalDelete = ({ access, onClose, doc }: ModalDeleteProps) => { const { toast } = useToastProvider(); const { colorsTokens } = useCunninghamTheme(); const router = useRouter(); + const { t } = useTranslation(); const { isMyself, isLastOwner, isOtherOwner } = useWhoAmI(access); const isNotAllowed = isOtherOwner || isLastOwner; @@ -89,33 +91,28 @@ export const ModalDelete = ({ access, onClose, doc }: ModalDeleteProps) => { } > - - {t('Are you sure you want to remove this member from the document?')} - - - {isErrorUpdate && ( - + {!isLastOwner && !isOtherOwner && !isErrorUpdate && ( + + + {t( + 'Are you sure you want to remove this member from the document?', + )} + + )} - {(isLastOwner || isOtherOwner) && ( - - warning - {isLastOwner && - t( - 'You are the last owner, you cannot be removed from your document.', - )} - {isOtherOwner && t('You cannot remove other owner.')} - + {isErrorUpdate && } + + {(isLastOwner || isOtherOwner) && !isErrorUpdate && ( + + + {isLastOwner && + t( + 'You are the last owner, you cannot be removed from your document.', + )} + {isOtherOwner && t('You cannot remove other owner.')} + + )} - {isErrorUpdate && ( - - )} + {isErrorUpdate && } {(isLastOwner || isOtherOwner) && ( - - warning - {isLastOwner && ( - - - {t('You are the sole owner of this group.')} + + warning - - {t( - 'Make another member the group owner, before you can change your own role.', - )} - - - )} - - {isOtherOwner && t('You cannot update the role of other owner.')} - + } + > + {isLastOwner && ( + + + {t( + 'You are the sole owner of this group, make another member the group owner, before you can change your own role.', + )} + + + )} + {isOtherOwner && t('You cannot update the role of other owner.')} + + )} { $margin={{ bottom: 'xl' }} aria-label={t('Content modal to delete document')} > - - {t('Are you sure you want to delete the document "{{title}}"?', { - title: pad.title, - })} - - - {isError && ( - + {!isError && ( + + + {t('Are you sure you want to delete the document "{{title}}"?', { + title: pad.title, + })} + + )} + {isError && } + { const [title, setTitle] = useState(pad.title); const { toast } = useToastProvider(); const [padPublic, setPadPublic] = useState(pad.is_public); + const { t } = useTranslation(); const { mutate: updatePad, @@ -92,10 +94,11 @@ export const ModalUpdatePad = ({ onClose, pad }: ModalUpdatePadProps) => { - - {t('Enter the new name of the selected document.')} - + + {t('Enter the new name of the selected document.')} + { - - {t( - 'Generate a PDF from your document, it will be inserted in the selected template.', - )} - + + + {t( + 'Generate a PDF from your document, it will be inserted in the selected template.', + )} + +