fix: fix create-source page memory leak and other form issues (#424)

Because

- create-source page has memory leak
- Other form has minor interaction issue

This commit

- fix create-source page memory leak and other form issues

package.json

@@ -29,7 +29,7 @@
     "@amplitude/analytics-browser": "^1.9.1",
     "@code-hike/mdx": "^0.7.3",
     "@instill-ai/design-system": "^0.10.6",
-    "@instill-ai/toolkit": "^0.46.1",
+    "@instill-ai/toolkit": "^0.46.3",
     "@radix-ui/react-select": "^1.2.1",
     "@tanstack/react-query": "^4.26.1",
     "@tanstack/react-query-devtools": "^4.26.1",

src/pages/destinations/[id].tsx

@@ -67,18 +67,6 @@ const DestinationDetailsPage: FC & {
     enabled: destinationWithPipelines.isSuccess,
   });
 
-  const destination = useMemo<Nullable<DestinationWithDefinition>>(() => {
-    if (!destinationWithPipelines.isSuccess) return null;
-    return {
-      name: destinationWithPipelines.data.name,
-      uid: destinationWithPipelines.data.uid,
-      id: destinationWithPipelines.data.id,
-      destination_connector_definition:
-        destinationWithPipelines.data.destination_connector_definition,
-      connector: destinationWithPipelines.data.connector,
-    };
-  }, [destinationWithPipelines.isSuccess, destinationWithPipelines.data]);
-
   const pipelinesWatchState = useWatchPipelines({
     pipelineNames: destinationWithPipelines.isSuccess
       ? destinationWithPipelines.data.pipelines.map((pipeline) => pipeline.name)
@@ -147,17 +135,24 @@ const DestinationDetailsPage: FC & {
         />
         <h3 className="mb-5 text-black text-instill-h3">Setting</h3>
         <div>
-          {destination ? (
+          {destinationWithPipelines.isSuccess ? (
             <ConfigureDestinationForm
-              destination={destination}
-              onDelete={() => {
-                init();
+              destination={{
+                name: destinationWithPipelines.data.name,
+                uid: destinationWithPipelines.data.uid,
+                id: destinationWithPipelines.data.id,
+                destination_connector_definition:
+                  destinationWithPipelines.data
+                    .destination_connector_definition,
+                connector: destinationWithPipelines.data.connector,
+              }}
+              onDelete={(initStore) => {
+                initStore();
                 router.push("/destinations");
               }}
               disabledDelete={enableGuard}
               onConfigure={null}
               disabledConfigure={enableGuard}
-              initStoreOnConfigure={true}
               width="w-full"
               accessToken={null}
             />

src/pages/destinations/create.tsx

@@ -80,8 +80,10 @@ const CreateDestinationPage: FC & {
         />
         <CreateDestinationForm
           title={null}
-          onCreate={() => router.push("/destinations")}
-          initStoreOnCreate={true}
+          onCreate={(_, initStore) => {
+            initStore();
+            router.push("/destinations");
+          }}
           accessToken={null}
           enabledQuery={true}
         />

src/pages/models/[id].tsx

@@ -163,7 +163,10 @@ const ModelDetailsPage: FC & {
             marginBottom="mb-[60px]"
             onConfigure={null}
             disabledConfigure={enableGuard}
-            onDelete={() => router.push("/models")}
+            onDelete={(initStore) => {
+              initStore();
+              router.push("/models");
+            }}
             disabledDelete={enableGuard}
             accessToken={null}
           />

src/pages/models/create.tsx

@@ -79,9 +79,11 @@ const CreateModelPage: FC & {
           marginBottom="mb-10"
         />
         <CreateModelForm
-          onCreate={() => router.push("/models")}
+          onCreate={(initStore) => {
+            initStore();
+            router.push("/models");
+          }}
           accessToken={null}
-          initStoreOnCreate={true}
           enabledQuery={true}
         />
       </PageContentContainer>

src/pages/pipelines/[id].tsx

@@ -243,7 +243,8 @@ const PipelineDetailsPage: FC<PipelinePageProps> & {
           pipeline={pipeline}
           marginBottom="mb-10"
           accessToken={null}
-          onDelete={() => {
+          onDelete={(initStore) => {
+            initStore();
             router.push("/pipelines");
           }}
           disabledDelete={enableGuard}

src/pages/pipelines/create.tsx

@@ -111,7 +111,8 @@ const CreatePipelinePage: FC & {
           marginBottom="mb-10"
         />
         <CreatePipelineForm
-          onCreate={() => {
+          onCreate={(initStore) => {
+            initStore();
             router.push("/pipelines");
           }}
           accessToken={null}

src/pages/sources/[id].tsx

@@ -113,9 +113,11 @@ const SourceDetailsPage: FC & {
           <ConfigureSourceForm
             width="w-full"
             source={sourceWithPipelines.data}
-            onDelete={() => {
+            onDelete={(initStore) => {
+              initStore();
               router.push("/sources");
             }}
+            onConfigure={null}
             disabledDelete={enableGuard}
             accessToken={null}
             disabledConfigure={true}

src/pages/sources/create.tsx

@@ -80,11 +80,10 @@ const CreateSourcePage: FC & {
           marginBottom="mb-10"
         />
         <CreateSourceForm
-          onCreate={() => {
-            init();
+          onCreate={(initStore) => {
+            initStore();
             router.push("/sources");
           }}
-          initStoreOnCreate={true}
           accessToken={null}
           width="w-full"
           enabledQuery={true}