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/generated/graphql.tsx
+++ b/front/src/generated/graphql.tsx
@ -764,6 +764,7 @@ export type Mutation = {
  createOneCompany: Company;
  createOnePerson: Person;
  createOnePipelineProgress: PipelineProgress;
+  deleteCurrentWorkspace: Workspace;
  deleteManyCommentThreads: AffectedRows;
  deleteManyCompany: AffectedRows;
  deleteManyPerson: AffectedRows;
@ -2490,6 +2491,11 @@ export type RemoveWorkspaceMemberMutationVariables = Exact<{

 export type RemoveWorkspaceMemberMutation = { __typename?: 'Mutation', deleteWorkspaceMember: { __typename?: 'WorkspaceMember', id: string } };

+export type DeleteCurrentWorkspaceMutationVariables = Exact<{ [key: string]: never; }>;
+
+
+export type DeleteCurrentWorkspaceMutation = { __typename?: 'Mutation', deleteCurrentWorkspace: { __typename?: 'Workspace', id: string } };
+

 export const CreateCommentDocument = gql`
    mutation CreateComment($commentId: String!, $commentText: String!, $authorId: String!, $commentThreadId: String!, $createdAt: DateTime!) {
@ -4837,4 +4843,36 @@ export function useRemoveWorkspaceMemberMutation(baseOptions?: Apollo.MutationHo
      }
 export type RemoveWorkspaceMemberMutationHookResult = ReturnType<typeof useRemoveWorkspaceMemberMutation>;
 export type RemoveWorkspaceMemberMutationResult = Apollo.MutationResult<RemoveWorkspaceMemberMutation>;
-export type RemoveWorkspaceMemberMutationOptions = Apollo.BaseMutationOptions<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>;
+export type RemoveWorkspaceMemberMutationOptions = Apollo.BaseMutationOptions<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>;
+export const DeleteCurrentWorkspaceDocument = gql`
+    mutation DeleteCurrentWorkspace {
+  deleteCurrentWorkspace {
+    id
+  }
+}
+    `;
+export type DeleteCurrentWorkspaceMutationFn = Apollo.MutationFunction<DeleteCurrentWorkspaceMutation, DeleteCurrentWorkspaceMutationVariables>;
+
+/**
+ * __useDeleteCurrentWorkspaceMutation__
+ *
+ * To run a mutation, you first call `useDeleteCurrentWorkspaceMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteCurrentWorkspaceMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteCurrentWorkspaceMutation, { data, loading, error }] = useDeleteCurrentWorkspaceMutation({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useDeleteCurrentWorkspaceMutation(baseOptions?: Apollo.MutationHookOptions<DeleteCurrentWorkspaceMutation, DeleteCurrentWorkspaceMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DeleteCurrentWorkspaceMutation, DeleteCurrentWorkspaceMutationVariables>(DeleteCurrentWorkspaceDocument, options);
+      }
+export type DeleteCurrentWorkspaceMutationHookResult = ReturnType<typeof useDeleteCurrentWorkspaceMutation>;
+export type DeleteCurrentWorkspaceMutationResult = Apollo.MutationResult<DeleteCurrentWorkspaceMutation>;
+export type DeleteCurrentWorkspaceMutationOptions = Apollo.BaseMutationOptions<DeleteCurrentWorkspaceMutation, DeleteCurrentWorkspaceMutationVariables>;
--- a/front/src/modules/auth/components/Modal.tsx
+++ b/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>
  );
 }
--- 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>
+    </>
+  );
+}
--- a/front/src/modules/ui/modal/components/Modal.tsx
+++ b/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>
    </>
--- a/front/src/modules/workspace/queries/update.ts
+++ b/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
+    }
+  }
+`;
--- a/front/src/pages/settings/SettingsProfile.tsx
+++ b/front/src/pages/settings/SettingsProfile.tsx
@ -1,5 +1,6 @@
 import styled from '@emotion/styled';

+import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
 import { EmailField } from '@/settings/profile/components/EmailField';
 import { NameFields } from '@/settings/profile/components/NameFields';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
@ -49,6 +50,10 @@ export function SettingsProfile() {
            />
            <EmailField />
          </StyledSectionContainer>
+
+          <StyledSectionContainer>
+            <DeleteWorkspace />
+          </StyledSectionContainer>
        </StyledContainer>
      </>
    </SubMenuTopBarContainer>
--- a/server/src/core/workspace/resolvers/workspace.resolver.ts
+++ b/server/src/core/workspace/resolvers/workspace.resolver.ts
@ -20,7 +20,12 @@ import { FileUploadService } from 'src/core/file/services/file-upload.service';
 import { streamToBuffer } from 'src/utils/stream-to-buffer';
 import { AbilityGuard } from 'src/guards/ability.guard';
 import { CheckAbilities } from 'src/decorators/check-abilities.decorator';
-import { UpdateWorkspaceAbilityHandler } from 'src/ability/handlers/workspace.ability-handler';
+import {
+  UpdateWorkspaceAbilityHandler,
+  DeleteWorkspaceAbilityHandler,
+} from 'src/ability/handlers/workspace.ability-handler';
+import { AuthUser } from 'src/decorators/auth-user.decorator';
+import { User } from 'src/core/@generated/user/user.model';

@UseGuards(JwtAuthGuard)
@Resolver(() => Workspace)
@ -95,4 +100,20 @@ export class WorkspaceResolver {

    return paths[0];
  }
+
+  @UseGuards(AbilityGuard)
+  @CheckAbilities(DeleteWorkspaceAbilityHandler)
+  @Mutation(() => Workspace)
+  async deleteCurrentWorkspace(
+    @AuthWorkspace() { id: workspaceId }: Workspace,
+    @PrismaSelector({ modelName: 'Workspace' })
+    { value: select }: PrismaSelect<'Workspace'>,
+    @AuthUser() { id: userId }: User,
+  ) {
+    return this.workspaceService.deleteWorkspace({
+      workspaceId,
+      select,
+      userId,
+    });
+  }
 }
--- a/server/src/core/workspace/services/workspace.service.spec.ts
+++ b/server/src/core/workspace/services/workspace.service.spec.ts
@ -6,6 +6,7 @@ import { PipelineService } from 'src/core/pipeline/services/pipeline.service';
 import { PipelineStageService } from 'src/core/pipeline/services/pipeline-stage.service';
 import { PersonService } from 'src/core/person/person.service';
 import { CompanyService } from 'src/core/company/company.service';
+import { PipelineProgressService } from 'src/core/pipeline/services/pipeline-progress.service';

 import { WorkspaceService } from './workspace.service';

@ -36,6 +37,10 @@ describe('WorkspaceService', () => {
          provide: CompanyService,
          useValue: {},
        },
+        {
+          provide: PipelineProgressService,
+          useValue: {},
+        },
      ],
    }).compile();

--- a/server/src/core/workspace/services/workspace.service.ts
+++ b/server/src/core/workspace/services/workspace.service.ts
@ -1,12 +1,15 @@
 import { Injectable } from '@nestjs/common';

 import { v4 } from 'uuid';
+import { Prisma } from '@prisma/client';

 import { PipelineStageService } from 'src/core/pipeline/services/pipeline-stage.service';
+import { PipelineProgressService } from 'src/core/pipeline/services/pipeline-progress.service';
 import { PipelineService } from 'src/core/pipeline/services/pipeline.service';
 import { PrismaService } from 'src/database/prisma.service';
 import { CompanyService } from 'src/core/company/company.service';
 import { PersonService } from 'src/core/person/person.service';
+import { assert } from 'src/utils/assert';

@Injectable()
 export class WorkspaceService {
@ -16,6 +19,7 @@ export class WorkspaceService {
    private readonly companyService: CompanyService,
    private readonly personService: PersonService,
    private readonly pipelineStageService: PipelineStageService,
+    private readonly pipelineProgressService: PipelineProgressService,
  ) {}

  // Find
@ -81,4 +85,82 @@ export class WorkspaceService {

    return workspace;
  }
+
+  async deleteWorkspace({
+    workspaceId,
+    select,
+    userId,
+  }: {
+    workspaceId: string;
+    select: Prisma.WorkspaceSelect;
+    userId: string;
+  }) {
+    const workspace = await this.findUnique({
+      where: { id: workspaceId },
+      select,
+    });
+    assert(workspace, 'Workspace not found');
+
+    const where = { workspaceId };
+
+    const {
+      user,
+      workspaceMember,
+      refreshToken,
+      attachment,
+      comment,
+      commentThreadTarget,
+      commentThread,
+    } = this.prismaService.client;
+
+    const commentThreads = await commentThread.findMany({
+      where: { authorId: userId },
+    });
+
+    await this.prismaService.client.$transaction([
+      this.pipelineProgressService.deleteMany({
+        where,
+      }),
+      this.companyService.deleteMany({
+        where,
+      }),
+      this.personService.deleteMany({
+        where,
+      }),
+      this.pipelineStageService.deleteMany({
+        where,
+      }),
+      this.pipelineService.deleteMany({
+        where,
+      }),
+      workspaceMember.deleteMany({
+        where,
+      }),
+      attachment.deleteMany({
+        where,
+      }),
+      comment.deleteMany({
+        where,
+      }),
+      ...commentThreads.map(({ id: commentThreadId }) =>
+        commentThreadTarget.deleteMany({
+          where: { commentThreadId },
+        }),
+      ),
+      commentThread.deleteMany({
+        where,
+      }),
+      refreshToken.deleteMany({
+        where: { userId },
+      }),
+      user.delete({
+        where: {
+          id: userId,
+        },
+      }),
+      this.delete({ where: { id: workspaceId } }),
+    ]);
+
+    return workspace;
+  }
 }