feat: Add workspace delete feature (#896)

* Add workspace delete feature Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Add fixes and refactors Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Add more fixes Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Add requested changes Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Add workspace delete mutation Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Complete v1 of deletion Co-authored-by: Benjamin Mayanja <vibenjamin6@gmail.com> * Revert unwanted changes Co-authored-by: Benjamin Mayanja <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Update debouce import Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Fix server e2e tests on CI #3 * Fix server e2e tests on CI #4 * Fix server e2e tests on CI #5 * Added generic relation cell (#969) * Added generic relation cell * Deactivated debug * Added default warning * Put back display component * Removed unused types * fix: 906 edit avatar style (#923) * fix: 906 edit avatar style * fix: 906 add avatar size enum and mapping for font and height * fix: 906 remove unused vars * chore: optimize size of front docker image (#965) * Enable to drag under New button on pipeline (#970) * Add minor fix Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> Co-authored-by: Charles Bochet <charles@twenty.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com> Co-authored-by: 310387 <139059022+310387@users.noreply.github.com> Co-authored-by: Lucas Vieira <vieiralucas4@gmail.com> Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
2023-07-28 12:19:20 +07:00
parent 8cf8183342
commit fcdde024a3
9 changed files with 303 additions and 18 deletions
--- a/front/src/modules/settings/profile/components/DeleteWorkspace.tsx
+++ b/front/src/modules/settings/profile/components/DeleteWorkspace.tsx
@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { AnimatePresence, LayoutGroup } from 'framer-motion';
+import { useRecoilValue } from 'recoil';
+
+import { useAuth } from '@/auth/hooks/useAuth';
+import { currentUserState } from '@/auth/states/currentUserState';
+import { AppPath } from '@/types/AppPath';
+import { Button, ButtonVariant } from '@/ui/button/components/Button';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Modal } from '@/ui/modal/components/Modal';
+import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
+import { debounce } from '~/utils/debounce';
+
+const StyledCenteredButton = styled(Button)`
+  justify-content: center;
+`;
+
+const StyledDeleteButton = styled(StyledCenteredButton)`
+  border-color: ${({ theme }) => theme.color.red20};
+  color: ${({ theme }) => theme.color.red};
+  font-size: ${({ theme }) => theme.font.size.md};
+  line-height: ${({ theme }) => theme.text.lineHeight.lg};
+`;
+
+const StyledTitle = styled.div`
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+const StyledModal = styled(Modal)`
+  color: ${({ theme }) => theme.font.color.primary};
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(8)};
+  }
+`;
+
+export function DeleteWorkspace() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isValidEmail, setIsValidEmail] = useState(true);
+  const [email, setEmail] = useState('');
+  const currentUser = useRecoilValue(currentUserState);
+  const userEmail = currentUser?.email;
+
+  const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
+  const { signOut } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = useCallback(() => {
+    signOut();
+    navigate(AppPath.SignIn);
+  }, [signOut, navigate]);
+
+  const deleteWorkspace = async () => {
+    await deleteCurrentWorkspace();
+    handleLogout();
+  };
+
+  const isEmailMatchingUserEmail = debounce(
+    (email1?: string, email2?: string) => {
+      setIsValidEmail(Boolean(email1 && email2 && email1 === email2));
+    },
+    250,
+  );
+
+  const handleEmailChange = (val: string) => {
+    setEmail(val);
+    isEmailMatchingUserEmail(val, userEmail);
+  };
+
+  const errorMessage =
+    email && !isValidEmail ? 'email provided is not correct' : '';
+
+  return (
+    <>
+      <SubSectionTitle
+        title="Danger zone"
+        description="Delete your whole workspace"
+      />
+      <StyledDeleteButton
+        onClick={() => setIsOpen(!isOpen)}
+        variant={ButtonVariant.Secondary}
+        title="Delete workspace"
+      />
+
+      <AnimatePresence mode="wait">
+        <LayoutGroup>
+          <StyledModal isOpen={isOpen}>
+            <StyledTitle>Workspace Deletion</StyledTitle>
+            <div>
+              This action cannot be undone. This will permanently delete your
+              entire workspace. Please type in your email to confirm.
+            </div>
+            <TextInput
+              value={email}
+              onChange={handleEmailChange}
+              placeholder={userEmail}
+              fullWidth
+              key={'email-' + userEmail}
+              error={errorMessage}
+            />
+            <StyledDeleteButton
+              onClick={deleteWorkspace}
+              variant={ButtonVariant.Secondary}
+              title="Delete workspace"
+              disabled={!isValidEmail || !email}
+              fullWidth
+            />
+            <StyledCenteredButton
+              onClick={() => setIsOpen(false)}
+              variant={ButtonVariant.Secondary}
+              title="Cancel"
+              fullWidth
+              style={{
+                marginTop: 10,
+              }}
+            />
+          </StyledModal>
+        </LayoutGroup>
+      </AnimatePresence>
+    </>
+  );
+}