From 0c31db6b72c43b768108b0de52df364b80729998 Mon Sep 17 00:00:00 2001 From: Tuval Simha Date: Thu, 25 Jul 2024 11:45:16 +0300 Subject: [PATCH] (3) Drop modals from V2: Delete Organization Modal (#5232) Co-authored-by: Kamil Kisiela --- .../v2/modals/delete-organization.tsx | 78 -------------- .../web/app/src/components/v2/modals/index.ts | 1 - packages/web/app/src/lib/urql-cache.ts | 2 +- .../app/src/pages/organization-settings.tsx | 102 ++++++++++++++++-- .../web/app/src/pages/project-settings.tsx | 10 +- .../web/app/src/pages/target-settings.tsx | 14 +-- .../stories/delete-organization.stories.tsx | 33 ++++++ 7 files changed, 142 insertions(+), 98 deletions(-) delete mode 100644 packages/web/app/src/components/v2/modals/delete-organization.tsx create mode 100644 packages/web/app/src/stories/delete-organization.stories.tsx diff --git a/packages/web/app/src/components/v2/modals/delete-organization.tsx b/packages/web/app/src/components/v2/modals/delete-organization.tsx deleted file mode 100644 index 511212757..000000000 --- a/packages/web/app/src/components/v2/modals/delete-organization.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { ReactElement } from 'react'; -import { useMutation } from 'urql'; -import { Button } from '@/components/ui/button'; -import { Heading } from '@/components/ui/heading'; -import { Modal } from '@/components/v2'; -import { FragmentType, graphql } from '@/gql'; -import { TrashIcon } from '@radix-ui/react-icons'; -import { useRouter } from '@tanstack/react-router'; - -export const DeleteOrganizationDocument = graphql(` - mutation deleteOrganization($selector: OrganizationSelectorInput!) { - deleteOrganization(selector: $selector) { - selector { - organization - } - organization { - __typename - id - } - } - } -`); - -const DeleteOrganizationModal_OrganizationFragment = graphql(` - fragment DeleteOrganizationModal_OrganizationFragment on Organization { - id - cleanId - } -`); - -export const DeleteOrganizationModal = (props: { - isOpen: boolean; - toggleModalOpen: () => void; - organization: FragmentType; - organizationId: string; -}): ReactElement => { - const { isOpen, toggleModalOpen } = props; - const [, mutate] = useMutation(DeleteOrganizationDocument); - const router = useRouter(); - - return ( - - - Delete organization -

- Are you sure you wish to delete this organization? This action is irreversible! -

- -
- - -
- - ); -}; diff --git a/packages/web/app/src/components/v2/modals/index.ts b/packages/web/app/src/components/v2/modals/index.ts index 2930e4322..6327c5d31 100644 --- a/packages/web/app/src/components/v2/modals/index.ts +++ b/packages/web/app/src/components/v2/modals/index.ts @@ -1,4 +1,3 @@ export { ChangePermissionsModal } from './change-permissions'; export { ConnectSchemaModal } from './connect-schema'; -export { DeleteOrganizationModal } from './delete-organization'; export { TransferOrganizationOwnershipModal } from './transfer-organization-ownership'; diff --git a/packages/web/app/src/lib/urql-cache.ts b/packages/web/app/src/lib/urql-cache.ts index c9d7f70c1..3da586fc5 100644 --- a/packages/web/app/src/lib/urql-cache.ts +++ b/packages/web/app/src/lib/urql-cache.ts @@ -11,9 +11,9 @@ import type { CreateOperationMutationType } from '@/components/target/laboratory import type { DeleteCollectionMutationType } from '@/components/target/laboratory/delete-collection-modal'; import type { DeleteOperationMutationType } from '@/components/target/laboratory/delete-operation-modal'; import type { CreateAccessToken_CreateTokenMutation } from '@/components/target/settings/registry-access-token'; -import type { DeleteOrganizationDocument } from '@/components/v2/modals/delete-organization'; import { graphql } from '@/gql'; import type { CreateOrganizationMutation } from '@/pages/organization-new'; +import type { DeleteOrganizationDocument } from '@/pages/organization-settings'; import type { DeleteProjectMutation } from '@/pages/project-settings'; import { CollectionsQuery } from '@/pages/target-laboratory'; import { diff --git a/packages/web/app/src/pages/organization-settings.tsx b/packages/web/app/src/pages/organization-settings.tsx index 56ff6fbb6..8bdf0373d 100644 --- a/packages/web/app/src/pages/organization-settings.tsx +++ b/packages/web/app/src/pages/organization-settings.tsx @@ -13,6 +13,14 @@ import { CardHeader, CardTitle, } from '@/components/ui/card'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from '@/components/ui/dialog'; import { DocsLink } from '@/components/ui/docs-note'; import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form'; import { GitHubIcon, SlackIcon } from '@/components/ui/icon'; @@ -21,10 +29,7 @@ import { Meta } from '@/components/ui/meta'; import { Subtitle, Title } from '@/components/ui/page'; import { QueryError } from '@/components/ui/query-error'; import { useToast } from '@/components/ui/use-toast'; -import { - DeleteOrganizationModal, - TransferOrganizationOwnershipModal, -} from '@/components/v2/modals'; +import { TransferOrganizationOwnershipModal } from '@/components/v2/modals'; import { Tag } from '@/components/v2/tag'; import { env } from '@/env/frontend'; import { FragmentType, graphql, useFragment } from '@/gql'; @@ -224,7 +229,6 @@ const SettingsPageRenderer_OrganizationFragment = graphql(` ...CanAccessOrganization_MemberFragment isOwner } - ...DeleteOrganizationModal_OrganizationFragment ...TransferOrganizationOwnershipModal_OrganizationFragment } `); @@ -552,7 +556,6 @@ const SettingsPageRenderer = (props: { organizationId={props.organizationId} isOpen={isDeleteModalOpen} toggleModalOpen={toggleDeleteModalOpen} - organization={organization} /> @@ -613,3 +616,90 @@ export function OrganizationSettingsPage(props: { organizationId: string }) { ); } + +export const DeleteOrganizationDocument = graphql(` + mutation deleteOrganization($selector: OrganizationSelectorInput!) { + deleteOrganization(selector: $selector) { + selector { + organization + } + organization { + __typename + id + } + } + } +`); + +export function DeleteOrganizationModal(props: { + isOpen: boolean; + toggleModalOpen: () => void; + organizationId: string; +}) { + const { organizationId } = props; + const [, mutate] = useMutation(DeleteOrganizationDocument); + const { toast } = useToast(); + const router = useRouter(); + + const handleDelete = async () => { + const { error } = await mutate({ + selector: { + organization: organizationId, + }, + }); + if (error) { + toast({ + variant: 'destructive', + title: 'Failed to delete organization', + description: error.message, + }); + } else { + toast({ + title: 'Organization deleted', + description: 'The organization has been successfully deleted.', + }); + props.toggleModalOpen(); + void router.navigate({ + to: '/', + }); + } + }; + + return ( + + ); +} + +export function DeleteOrganizationModalContent(props: { + isOpen: boolean; + toggleModalOpen: () => void; + handleDelete: () => void; +}) { + return ( + + + + Delete organization + + Every project created under this organization will be deleted as well. + + + This action is irreversible! + + + + + + + + + ); +} diff --git a/packages/web/app/src/pages/project-settings.tsx b/packages/web/app/src/pages/project-settings.tsx index 964fbf7b9..1c118d6c0 100644 --- a/packages/web/app/src/pages/project-settings.tsx +++ b/packages/web/app/src/pages/project-settings.tsx @@ -513,12 +513,12 @@ export function DeleteProjectModalContent(props: { Delete project + + Every target and its published schema, reported data, and settings associated with this + project will be permanently deleted. + + This action is irreversible! - - Every target and its published schema, reported data, and settings associated with this - project will be permanently deleted. - - This action is irreversible! + {openModal && ( + console.log('Delete')} + key="delete-organization-modal" + /> + )} + + ); + }, +};