(1) Drop modals from V2: Delete Target Modal (#5230)

Co-authored-by: Kamil Kisiela <kamil.kisiela@gmail.com>

packages/web/app/src/components/v2/modals/delete-target.tsx

@@ -1,84 +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 { graphql } from '@/gql';
-import { TrashIcon } from '@radix-ui/react-icons';
-import { useRouter } from '@tanstack/react-router';
-
-export const DeleteTargetMutation = graphql(`
-  mutation deleteTarget($selector: TargetSelectorInput!) {
-    deleteTarget(selector: $selector) {
-      selector {
-        organization
-        project
-        target
-      }
-      deletedTarget {
-        __typename
-        id
-      }
-    }
-  }
-`);
-
-export const DeleteTargetModal = ({
-  isOpen,
-  toggleModalOpen,
-  organizationId,
-  projectId,
-  targetId,
-}: {
-  isOpen: boolean;
-  toggleModalOpen: () => void;
-  organizationId: string;
-  projectId: string;
-  targetId: string;
-}): ReactElement => {
-  const [, mutate] = useMutation(DeleteTargetMutation);
-  const router = useRouter();
-
-  return (
-    <Modal
-      open={isOpen}
-      onOpenChange={toggleModalOpen}
-      className="flex flex-col items-center gap-5"
-    >
-      <TrashIcon className="h-16 w-auto text-red-500 opacity-70" />
-      <Heading>Delete target</Heading>
-      <p className="text-sm text-gray-500">
-        Are you sure you wish to delete this target? This action is irreversible!
-      </p>
-      <div className="flex w-full gap-2">
-        <Button className="w-full justify-center" type="button" size="lg" onClick={toggleModalOpen}>
-          Cancel
-        </Button>
-        <Button
-          className="w-full justify-center"
-          size="lg"
-          variant="destructive"
-          onClick={async () => {
-            await mutate({
-              selector: {
-                organization: organizationId,
-                project: projectId,
-                target: targetId,
-              },
-            });
-            toggleModalOpen();
-            void router.navigate({
-              to: '/$organizationId/$projectId',
-              params: {
-                organizationId,
-                projectId,
-              },
-            });
-          }}
-        >
-          Delete
-        </Button>
-      </div>
-    </Modal>
-  );
-};

packages/web/app/src/components/v2/modals/index.ts

@@ -2,5 +2,4 @@ export { ChangePermissionsModal } from './change-permissions';
 export { ConnectSchemaModal } from './connect-schema';
 export { DeleteOrganizationModal } from './delete-organization';
 export { DeleteProjectModal } from './delete-project';
-export { DeleteTargetModal } from './delete-target';
 export { TransferOrganizationOwnershipModal } from './transfer-organization-ownership';

packages/web/app/src/lib/urql-cache.ts

@@ -13,11 +13,14 @@ import type { DeleteOperationMutationType } from '@/components/target/laboratory
 import type { CreateAccessToken_CreateTokenMutation } from '@/components/target/settings/registry-access-token';
 import type { DeleteOrganizationDocument } from '@/components/v2/modals/delete-organization';
 import { type DeleteProjectMutation } from '@/components/v2/modals/delete-project';
-import { type DeleteTargetMutation } from '@/components/v2/modals/delete-target';
 import { graphql } from '@/gql';
 import type { CreateOrganizationMutation } from '@/pages/organization-new';
 import { CollectionsQuery } from '@/pages/target-laboratory';
-import { TokensDocument, type DeleteTokensDocument } from '@/pages/target-settings';
+import {
+  TokensDocument,
+  type DeleteTargetMutation,
+  type DeleteTokensDocument,
+} from '@/pages/target-settings';
 import { ResultOf, VariablesOf } from '@graphql-typed-document-node/core';
 import { Cache, QueryInput, UpdateResolver } from '@urql/exchange-graphcache';
 

packages/web/app/src/pages/target-settings.tsx

@@ -12,6 +12,14 @@ import { SchemaContracts } from '@/components/target/settings/schema-contracts';
 import { Button } from '@/components/ui/button';
 import { CardDescription } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { DocsLink } from '@/components/ui/docs-note';
 import { Meta } from '@/components/ui/meta';
 import {
@@ -27,7 +35,6 @@ import { TimeAgo } from '@/components/ui/time-ago';
 import { useToast } from '@/components/ui/use-toast';
 import { Combobox } from '@/components/v2/combobox';
 import { Input } from '@/components/v2/input';
-import { DeleteTargetModal } from '@/components/v2/modals';
 import { Switch } from '@/components/v2/switch';
 import { Table, TBody, Td, Tr } from '@/components/v2/table';
 import { Tag } from '@/components/v2/tag';
@@ -1270,3 +1277,101 @@ export function TargetSettingsPage(props: {
     </>
   );
 }
+
+export const DeleteTargetMutation = graphql(`
+  mutation deleteTarget($selector: TargetSelectorInput!) {
+    deleteTarget(selector: $selector) {
+      selector {
+        organization
+        project
+        target
+      }
+      deletedTarget {
+        __typename
+        id
+      }
+    }
+  }
+`);
+
+export function DeleteTargetModal(props: {
+  isOpen: boolean;
+  toggleModalOpen: () => void;
+  organizationId: string;
+  projectId: string;
+  targetId: string;
+}) {
+  const { organizationId, projectId, targetId } = props;
+  const [, mutate] = useMutation(DeleteTargetMutation);
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const handleDelete = async () => {
+    const { error } = await mutate({
+      selector: {
+        organization: organizationId,
+        project: projectId,
+        target: targetId,
+      },
+    });
+    if (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Failed to delete target',
+        description: error.message,
+      });
+    } else {
+      toast({
+        title: 'Target deleted',
+        description: 'The target has been successfully deleted.',
+      });
+      props.toggleModalOpen();
+      void router.navigate({
+        to: '/$organizationId/$projectId',
+        params: {
+          organizationId,
+          projectId,
+        },
+      });
+    }
+  };
+
+  return (
+    <DeleteTargetModalContent
+      isOpen={props.isOpen}
+      toggleModalOpen={props.toggleModalOpen}
+      handleDelete={handleDelete}
+    />
+  );
+}
+
+export function DeleteTargetModalContent(props: {
+  isOpen: boolean;
+  toggleModalOpen: () => void;
+  handleDelete: () => void;
+}) {
+  return (
+    <Dialog open={props.isOpen} onOpenChange={props.toggleModalOpen}>
+      <DialogContent className="w-4/5 max-w-[520px] md:w-3/5">
+        <DialogHeader>
+          <DialogTitle>Delete target</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          Every published schema, reported data, and settings associated with this target will be
+          permanently deleted.
+        </DialogDescription>
+        <DialogDescription>
+          <span className="font-bold">This action is irreversible!</span>
+        </DialogDescription>
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={props.toggleModalOpen}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={props.handleDelete}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/web/app/src/stories/delete-target.stories.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { DeleteTargetModalContent } from '@/pages/target-settings';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof DeleteTargetModalContent> = {
+  title: 'Modals/Delete Target Modal',
+  component: DeleteTargetModalContent,
+};
+
+export default meta;
+type Story = StoryObj<typeof DeleteTargetModalContent>;
+
+export const Default: Story = {
+  render: () => {
+    const [openModal, setOpenModal] = useState(false);
+    const toggleModalOpen = () => setOpenModal(!openModal);
+
+    return (
+      <>
+        <Button onClick={toggleModalOpen}>Open Modal</Button>
+        {openModal && (
+          <DeleteTargetModalContent
+            isOpen={openModal}
+            toggleModalOpen={toggleModalOpen}
+            key="delete-target-modal"
+            handleDelete={() => console.log('Delete')}
+          />
+        )}
+      </>
+    );
+  },
+};