fix: fix the missing destination deletion (#267)

Because - #263 This commit - fix the missing destination deletion (close #263)
instill-ai · Sep 6, 2022 · f96e65c · f96e65c
1 parent d86c25c
commit f96e65c
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 64 deletions.
diff --git a/src/components/destination/ConfigureDestinationForm.tsx b/src/components/destination/ConfigureDestinationForm.tsx
@@ -4,6 +4,7 @@ import {
   BasicProgressMessageBox,
   BasicSingleSelect,
   BasicTextArea,
+  OutlineButton,
   ProgressMessageBoxState,
   SolidButton,
 } from "@instill-ai/design-system";
@@ -25,10 +26,15 @@ import {
   UpdateDestinationPayload,
 } from "@/lib/instill";
 import { Nullable } from "@/types/general";
-import { FormBase } from "@/components/ui";
-import { useUpdateDestination } from "@/services/connector/destination/mutations";
+import { DeleteResourceModal, FormBase } from "@/components/ui";
+import {
+  useDeleteDestination,
+  useUpdateDestination,
+} from "@/services/connector/destination/mutations";
 import { useAmplitudeCtx } from "@/contexts/AmplitudeContext";
 import { sendAmplitudeData } from "@/lib/amplitude";
+import useDeleteResourceGuard from "@/hooks/useDeleteResourceGuard";
+import { useRouter } from "next/router";
 
 export type ConfigureDestinationFormProps = {
   destination: DestinationWithDefinition;
@@ -38,6 +44,7 @@ const ConfigureDestinationForm = ({
   destination,
 }: ConfigureDestinationFormProps) => {
   const { amplitudeIsInit } = useAmplitudeCtx();
+  const router = useRouter();
 
   // ##########################################################################
   // # 1 - Get the destination definition and static state for fields         #
@@ -282,68 +289,150 @@ const ConfigureDestinationForm = ({
     updateDestination,
   ]);
 
+  // ##########################################################################
+  // # 3 - Handle delete destination                                          #
+  // ##########################################################################
+
+  const { disableResourceDeletion } = useDeleteResourceGuard();
+
+  const [deleteDestinationModalIsOpen, setDeleteDestinationModalIsOpen] =
+    useState(false);
+
+  const deleteDestination = useDeleteDestination();
+
+  const handleDeleteDestination = useCallback(() => {
+    if (!destination) return;
+
+    setMessageBoxState(() => ({
+      activate: true,
+      status: "progressing",
+      description: null,
+      message: "Deleting...",
+    }));
+
+    deleteDestination.mutate(destination.name, {
+      onSuccess: () => {
+        setMessageBoxState(() => ({
+          activate: true,
+          status: "success",
+          description: null,
+          message: "Succeed.",
+        }));
+
+        if (amplitudeIsInit) {
+          sendAmplitudeData("delete_destination", {
+            type: "critical_action",
+            process: "destination",
+          });
+        }
+        router.push("/destinations");
+      },
+      onError: (error) => {
+        if (error instanceof AxiosError) {
+          setMessageBoxState(() => ({
+            activate: true,
+            message: `${error.response?.status} - ${error.response?.data.message}`,
+            description: JSON.stringify(
+              error.response?.data.details,
+              null,
+              "\t"
+            ),
+            status: "error",
+          }));
+        } else {
+          setMessageBoxState(() => ({
+            activate: true,
+            status: "error",
+            description: null,
+            message: "Something went wrong when delete the source",
+          }));
+        }
+      },
+    });
+    setDeleteDestinationModalIsOpen(false);
+  }, []);
+
   return (
-    <FormBase padding="" noValidate={true} flex1={false} marginBottom={null}>
-      <div className="flex flex-col mb-8 gap-y-5">
-        <BasicSingleSelect
-          id="definition"
-          key="definition"
-          instanceId="definition"
-          label="Destination type"
-          disabled={true}
-          value={destinationDefinitionOption}
-          options={[]}
-          description={`<a href='${destination.destination_connector_definition.connector_definition.documentation_url}'>Setup Guide</a>`}
-        />
-        {!isSyncDestination ? (
-          <BasicTextArea
-            id="description"
-            label="Description"
-            key="description"
-            description="Fill with a short description."
-            required={false}
-            error={
-              fieldErrors ? (fieldErrors.description as string) ?? null : null
-            }
-            value={
-              fieldValues ? (fieldValues.description as string) ?? null : null
-            }
-            onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-              updateFieldValues("description", event.target.value)
-            }
-            disabled={!canEdit}
+    <>
+      <FormBase padding="" noValidate={true} flex1={false} marginBottom={null}>
+        <div className="flex flex-col mb-8 gap-y-5">
+          <BasicSingleSelect
+            id="definition"
+            key="definition"
+            instanceId="definition"
+            label="Destination type"
+            disabled={true}
+            value={destinationDefinitionOption}
+            options={[]}
+            description={`<a href='${destination.destination_connector_definition.connector_definition.documentation_url}'>Setup Guide</a>`}
           />
-        ) : null}
-        <AirbyteDestinationFields
-          destinationFormTree={destinationFormTree}
-          fieldValues={fieldValues}
-          setFieldValues={setFieldValues}
-          fieldErrors={fieldErrors}
-          selectedConditionMap={selectedConditionMap}
-          setSelectedConditionMap={setSelectedConditionMap}
-          disableAll={!canEdit}
-          formIsDirty={formIsDirty}
-          setFormIsDirty={setFormIsDirty}
-        />
-      </div>
-      <div className="flex flex-row">
-        <BasicProgressMessageBox
-          state={messageBoxState}
-          setState={setMessageBoxState}
-          width="w-[25vw]"
-          closable={true}
-        />
-        <SolidButton
-          type="button"
-          color="primary"
-          disabled={isSyncDestination}
-          position="ml-auto my-auto"
-          onClickHandler={() => handleSubmit()}
-        >
-          {canEdit ? "Save" : "Edit"}
-        </SolidButton>
-      </div>
-    </FormBase>
+          {!isSyncDestination ? (
+            <BasicTextArea
+              id="description"
+              label="Description"
+              key="description"
+              description="Fill with a short description."
+              required={false}
+              error={
+                fieldErrors ? (fieldErrors.description as string) ?? null : null
+              }
+              value={
+                fieldValues ? (fieldValues.description as string) ?? null : null
+              }
+              onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
+                updateFieldValues("description", event.target.value)
+              }
+              disabled={!canEdit}
+            />
+          ) : null}
+          <AirbyteDestinationFields
+            destinationFormTree={destinationFormTree}
+            fieldValues={fieldValues}
+            setFieldValues={setFieldValues}
+            fieldErrors={fieldErrors}
+            selectedConditionMap={selectedConditionMap}
+            setSelectedConditionMap={setSelectedConditionMap}
+            disableAll={!canEdit}
+            formIsDirty={formIsDirty}
+            setFormIsDirty={setFormIsDirty}
+          />
+        </div>
+        <div className="flex flex-row mb-10">
+          <OutlineButton
+            disabled={disableResourceDeletion}
+            onClickHandler={() => setDeleteDestinationModalIsOpen(true)}
+            position="mr-auto my-auto"
+            type="button"
+            color="danger"
+          >
+            Delete
+          </OutlineButton>
+          <SolidButton
+            type="button"
+            color="primary"
+            disabled={isSyncDestination}
+            position="ml-auto my-auto"
+            onClickHandler={() => handleSubmit()}
+          >
+            {canEdit ? "Save" : "Edit"}
+          </SolidButton>
+        </div>
+        <div className="flex">
+          <BasicProgressMessageBox
+            state={messageBoxState}
+            setState={setMessageBoxState}
+            width="w-[25vw]"
+            closable={true}
+          />
+        </div>
+      </FormBase>
+      <DeleteResourceModal
+        resource={destination}
+        modalIsOpen={deleteDestinationModalIsOpen}
+        setModalIsOpen={setDeleteDestinationModalIsOpen}
+        handleDeleteResource={handleDeleteDestination}
+      />
+    </>
   );
 };
 

diff --git a/src/components/source/ConfigureSourceForm.tsx b/src/components/source/ConfigureSourceForm.tsx
@@ -96,7 +96,7 @@ const ConfigureSourceForm = ({
   }, [canEdit]);
 
   // ###################################################################
-  // # Handle delete destination                                       #
+  // # Handle delete source                                            #
   // ###################################################################
 
   const { disableResourceDeletion } = useDeleteResourceGuard();

diff --git a/src/components/ui/Modals/DeleteResourceModal/DeleteResourceModal.tsx b/src/components/ui/Modals/DeleteResourceModal/DeleteResourceModal.tsx
@@ -157,7 +157,7 @@ const DeleteResourceModal = ({
           <OutlineButton
             type="button"
             onClickHandler={handleDeleteResource}
-            color="secondary"
+            color="danger"
             disabled={canDeleteResource ? false : true}
           >
             <p className="mx-auto">Delete</p>