From 2f0bee5e34505e6da32d86900235a39f5ac94115 Mon Sep 17 00:00:00 2001 From: Moussa Bistami <42296438+Mbistami@users.noreply.github.com> Date: Sun, 6 Aug 2023 05:33:57 +0100 Subject: [PATCH] Confirmation before deleting a member (#1074) * feat: require confirmation before on memeber deletion * fix: typo * feat: ConfrimationModal moved to ui/modals/component - confirmation modal storybook * fix: modal member deletion text * fix: extra ! operator - remove deletemodal - using styledconfirmationbutton * fix: story structer * fix: imports --- .../profile/components/DeleteAccount.tsx | 18 +++-- .../profile/components/DeleteWorkspace.tsx | 18 +++-- .../modal/components/ConfirmationModal.tsx} | 67 ++++++++++--------- .../__stories__/ConfirmModal.stories.tsx | 33 +++++++++ .../settings/SettingsWorkspaceMembers.tsx | 28 +++++++- 5 files changed, 119 insertions(+), 45 deletions(-) rename front/src/modules/{settings/profile/components/DeleteModal.tsx => ui/modal/components/ConfirmationModal.tsx} (57%) create mode 100644 front/src/modules/ui/modal/components/__stories__/ConfirmModal.stories.tsx diff --git a/front/src/modules/settings/profile/components/DeleteAccount.tsx b/front/src/modules/settings/profile/components/DeleteAccount.tsx index b8c0e4249225..cb9ebde9208c 100644 --- a/front/src/modules/settings/profile/components/DeleteAccount.tsx +++ b/front/src/modules/settings/profile/components/DeleteAccount.tsx @@ -1,19 +1,25 @@ import { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import { useRecoilValue } from 'recoil'; import { useAuth } from '@/auth/hooks/useAuth'; +import { currentUserState } from '@/auth/states/currentUserState'; import { AppPath } from '@/types/AppPath'; import { ButtonVariant } from '@/ui/button/components/Button'; +import { + ConfirmationModal, + StyledConfirmationButton, +} from '@/ui/modal/components/ConfirmationModal'; import { H2Title } from '@/ui/typography/components/H2Title'; import { useDeleteUserAccountMutation } from '~/generated/graphql'; -import { DeleteModal, StyledDeleteButton } from './DeleteModal'; - export function DeleteAccount() { const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] = useState(false); const [deleteUserAccount] = useDeleteUserAccountMutation(); + const currentUser = useRecoilValue(currentUserState); + const userEmail = currentUser?.email; const { signOut } = useAuth(); const navigate = useNavigate(); @@ -34,13 +40,15 @@ export function DeleteAccount() { description="Delete account and all the associated data" /> - setIsDeleteAccountModalOpen(true)} variant={ButtonVariant.Secondary} title="Delete account" /> - Please type in your email to confirm. } - handleConfirmDelete={deleteAccount} + onConfirmClick={deleteAccount} deleteButtonText="Delete account" /> diff --git a/front/src/modules/settings/profile/components/DeleteWorkspace.tsx b/front/src/modules/settings/profile/components/DeleteWorkspace.tsx index 5139635e8529..811078a7c734 100644 --- a/front/src/modules/settings/profile/components/DeleteWorkspace.tsx +++ b/front/src/modules/settings/profile/components/DeleteWorkspace.tsx @@ -1,19 +1,25 @@ import { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import { useRecoilValue } from 'recoil'; import { useAuth } from '@/auth/hooks/useAuth'; +import { currentUserState } from '@/auth/states/currentUserState'; import { AppPath } from '@/types/AppPath'; import { ButtonVariant } from '@/ui/button/components/Button'; +import { + ConfirmationModal, + StyledConfirmationButton, +} from '@/ui/modal/components/ConfirmationModal'; import { H2Title } from '@/ui/typography/components/H2Title'; import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql'; -import { DeleteModal, StyledDeleteButton } from './DeleteModal'; - export function DeleteWorkspace() { const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] = useState(false); const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation(); + const currentUser = useRecoilValue(currentUserState); + const userEmail = currentUser?.email; const { signOut } = useAuth(); const navigate = useNavigate(); @@ -30,13 +36,15 @@ export function DeleteWorkspace() { return ( <> - setIsDeleteWorkSpaceModalOpen(true)} variant={ButtonVariant.Secondary} title="Delete workspace" /> - Please type in your email to confirm. } - handleConfirmDelete={deleteWorkspace} + onConfirmClick={deleteWorkspace} deleteButtonText="Delete workspace" /> diff --git a/front/src/modules/settings/profile/components/DeleteModal.tsx b/front/src/modules/ui/modal/components/ConfirmationModal.tsx similarity index 57% rename from front/src/modules/settings/profile/components/DeleteModal.tsx rename to front/src/modules/ui/modal/components/ConfirmationModal.tsx index 4fb76c1b898d..81c378c083ce 100644 --- a/front/src/modules/settings/profile/components/DeleteModal.tsx +++ b/front/src/modules/ui/modal/components/ConfirmationModal.tsx @@ -1,30 +1,30 @@ import { ReactNode, useState } from 'react'; import styled from '@emotion/styled'; import { AnimatePresence, LayoutGroup } from 'framer-motion'; -import { useRecoilValue } from 'recoil'; +import debounce from 'lodash.debounce'; -import { currentUserState } from '@/auth/states/currentUserState'; import { Button, ButtonVariant } from '@/ui/button/components/Button'; import { TextInput } from '@/ui/input/text/components/TextInput'; import { Modal } from '@/ui/modal/components/Modal'; import { Section, SectionAlignment } from '@/ui/section/components/Section'; import { H1Title, H1TitleFontColor } from '@/ui/typography/components/H1Title'; -import { debounce } from '~/utils/debounce'; -interface DeleteModalProps { +interface ConfirmationModalProps { isOpen: boolean; title: string; subtitle: ReactNode; setIsOpen: (val: boolean) => void; - handleConfirmDelete: () => void; + onConfirmClick: () => void; deleteButtonText?: string; + confirmationPlaceholder?: string; + confirmationValue?: string; } -const StyledCenteredButton = styled(Button)` +export const StyledCenteredButton = styled(Button)` justify-content: center; `; -export const StyledDeleteButton = styled(StyledCenteredButton)` +export const StyledConfirmationButton = styled(StyledCenteredButton)` border-color: ${({ theme }) => theme.color.red20}; box-shadow: none; color: ${({ theme }) => theme.color.red}; @@ -35,27 +35,28 @@ export const StyledDeleteButton = styled(StyledCenteredButton)` } `; -export function DeleteModal({ +export function ConfirmationModal({ isOpen = false, title, subtitle, setIsOpen, - handleConfirmDelete, + onConfirmClick, deleteButtonText = 'Delete', -}: DeleteModalProps) { - const [email, setEmail] = useState(''); - const [isValidEmail, setIsValidEmail] = useState(true); - const currentUser = useRecoilValue(currentUserState); - const userEmail = currentUser?.email; + confirmationValue, + confirmationPlaceholder, +}: ConfirmationModalProps) { + const [inputConfirmationValue, setInputConfirmationValue] = + useState(''); + const [isValidValue, setIsValidValue] = useState(!confirmationValue); - const handleEmailChange = (val: string) => { - setEmail(val); - isEmailMatchingUserEmail(val, userEmail); + const handleInputConfimrationValueChange = (value: string) => { + setInputConfirmationValue(value); + isValueMatchingUserEmail(confirmationValue, value); }; - const isEmailMatchingUserEmail = debounce( - (email1?: string, email2?: string) => { - setIsValidEmail(Boolean(email1 && email2 && email1 === email2)); + const isValueMatchingUserEmail = debounce( + (value?: string, inputValue?: string) => { + setIsValidValue(Boolean(value && inputValue && value === inputValue)); }, 250, ); @@ -73,20 +74,22 @@ export function DeleteModal({ >
{subtitle}
-
- -
- + + + )} + = { + title: 'UI/Modal/ConfirmationModal', + component: ConfirmationModal, + decorators: [ComponentDecorator], +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + title: 'Pariatur labore.', + subtitle: 'Velit dolore aliquip laborum occaecat fugiat.', + deleteButtonText: 'Delete', + }, + decorators: [ComponentDecorator], +}; + +export const InputConfirmation: Story = { + args: { + confirmationValue: 'email@test.dev', + confirmationPlaceholder: 'email@test.dev', + ...Default.args, + }, + decorators: Default.decorators, +}; diff --git a/front/src/pages/settings/SettingsWorkspaceMembers.tsx b/front/src/pages/settings/SettingsWorkspaceMembers.tsx index f1a8698a28de..6efea1ea1e22 100644 --- a/front/src/pages/settings/SettingsWorkspaceMembers.tsx +++ b/front/src/pages/settings/SettingsWorkspaceMembers.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; @@ -10,6 +11,7 @@ import { } from '@/ui/button/components/Button'; import { IconSettings, IconTrash } from '@/ui/icon'; import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer'; +import { ConfirmationModal } from '@/ui/modal/components/ConfirmationModal'; import { Section } from '@/ui/section/components/Section'; import { H1Title } from '@/ui/typography/components/H1Title'; import { H2Title } from '@/ui/typography/components/H2Title'; @@ -36,6 +38,9 @@ const ButtonContainer = styled.div` `; export function SettingsWorkspaceMembers() { + const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false); + const [userToDelete, setUserToDelete] = useState(); + const [currentUser] = useRecoilState(currentUserState); const workspace = currentUser?.workspaceMember?.workspace; const theme = useTheme(); @@ -75,6 +80,7 @@ export function SettingsWorkspaceMembers() { cache.gc(); }, }); + setIsConfirmationModalOpen(false); }; return ( @@ -105,9 +111,10 @@ export function SettingsWorkspaceMembers() { currentUser?.id !== member.user.id && (