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>

front/src/modules/auth/components/Modal.tsx

@@ -1,22 +1,13 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
 import { Modal as UIModal } from '@/ui/modal/components/Modal';
 
 type Props = React.ComponentProps<'div'>;
 
-const StyledContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  padding: ${({ theme }) => theme.spacing(10)};
-  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
-`;
-
 export function AuthModal({ children, ...restProps }: Props) {
   return (
-    <UIModal isOpen={true}>
-      <StyledContainer {...restProps}>{children}</StyledContainer>
+    <UIModal isOpen={true} {...restProps}>
+      {children}
     </UIModal>
   );
 }

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>
+    </>
+  );
+}

front/src/modules/ui/modal/components/Modal.tsx

@@ -2,6 +2,14 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(10)};
+  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
+`;
+
 const ModalDiv = styled(motion.div)`
   background: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.md};
@@ -21,9 +29,10 @@ const BackDrop = styled(motion.div)`
   z-index: 9999;
 `;
 
-type Props = React.PropsWithChildren & {
-  isOpen?: boolean;
-};
+type Props = React.PropsWithChildren &
+  React.ComponentProps<'div'> & {
+    isOpen?: boolean;
+  };
 
 const modalVariants = {
   hidden: { opacity: 0 },
@@ -31,7 +40,7 @@ const modalVariants = {
   exit: { opacity: 0 },
 };
 
-export function Modal({ isOpen = false, children }: Props) {
+export function Modal({ isOpen = false, children, ...restProps }: Props) {
   if (!isOpen) {
     return null;
   }
@@ -46,7 +55,7 @@ export function Modal({ isOpen = false, children }: Props) {
           exit="exit"
           variants={modalVariants}
         >
-          {children}
+          <StyledContainer {...restProps}>{children}</StyledContainer>
         </ModalDiv>
       </BackDrop>
     </>

front/src/modules/workspace/queries/update.ts

@@ -32,3 +32,11 @@ export const REMOVE_WORKSPACE_MEMBER = gql`
     }
   }
 `;
+
+export const DELETE_CURRENT_WORKSPACE = gql`
+  mutation DeleteCurrentWorkspace {
+    deleteCurrentWorkspace {
+      id
+    }
+  }
+`;