feat: support async model creation (#324)

Because

- Model backend had refactored model creation to be async

This commit

- support async model creation

README.md

@@ -107,6 +107,20 @@ We maintain another container `Dockerfile.playwright` specifically for test usag
 - The playwright version should align with the pulled playwright image version. Two should be the same.
 - If you want to debug in the test container, you should grant this container the root user permission. (default is specific user: playwright) with `--build-arg TEST_USER='root'` in you `docker build` command
 
+### How to test at local
+
+- In VDP folder: `git pull --rebase` to pull the up-to-date code.
+- In VDP folder: `make build PROFILE=console` 
+- In console folder: `pnpm dev` to setup local dev server
+- If you want to test in your host 
+  - In VDP folder: `make dev PROFILE=console ITMODE=true CONSOLE_BASE_URL_HOST=localhost CONSOLE_BASE_API_GATEWAY_URL_HOST=localhost`
+  - In console folder: `pnpm integration-test`
+- If you want to test in the docker-container
+  - In VDP folder: `make dev PROFILE=console ITMODE=true CONSOLE_BASE_URL_HOST=console CONSOLE_BASE_API_GATEWAY_URL_HOST=api-gateway`
+  - In console folder: `pnpm docker-build-test`
+  - In console folder: `pnpm docker-run-test`
+
+
 ## Other Caveats
 
 - If you want to set up new path aliases using typescript, remember to add them in the `.storybook/main.js` to make sure storybook will correctly access the file.

src/components/model/CreateModelForm.tsx

@@ -27,13 +27,16 @@ import {
   CreateGithubModelPayload,
   CreateHuggingFaceModelPayload,
   CreateLocalModelPayload,
+  getModelQuery,
   Model,
   validateResourceId,
+  checkCreateModelOperationUntilDone,
 } from "@/lib/instill";
 import { Nullable } from "@/types/general";
 import { useAmplitudeCtx } from "@/contexts/AmplitudeContext";
 import { sendAmplitudeData } from "@/lib/amplitude";
 import { AxiosError } from "axios";
+import { useQueryClient } from "react-query";
 
 export type CreateModelFormValue = {
   id: Nullable<string>;
@@ -49,6 +52,7 @@ export type CreateModelFormValue = {
 
 const CreateModelForm = () => {
   const { amplitudeIsInit } = useAmplitudeCtx();
+  const queryClient = useQueryClient();
 
   // #########################################################################
   // # 1 - Initialize the model definition                                   #
@@ -171,6 +175,34 @@ const CreateModelForm = () => {
   const createArtivcModel = useCreateArtivcModel();
   const createHuggingFaceModel = useCreateHuggingFaceModel();
 
+  const prepareNewModel = useCallback(
+    async (modelName: string) => {
+      const model = await getModelQuery(modelName);
+      setModelCreated(true);
+      setNewModel(model);
+
+      queryClient.setQueryData<Model>(["models", model.id], model);
+      queryClient.setQueryData<Model[]>(["models"], (old) =>
+        old ? [...old, model] : [model]
+      );
+
+      setCreateModelMessageBoxState({
+        activate: true,
+        status: "success",
+        description: null,
+        message: "Succeed.",
+      });
+
+      if (amplitudeIsInit) {
+        sendAmplitudeData("create_github_model", {
+          type: "critical_action",
+          process: "model",
+        });
+      }
+    },
+    [amplitudeIsInit, sendAmplitudeData]
+  );
+
   const handelCreateModel = useCallback(async () => {
     if (!fieldValues.id) return;
 
@@ -203,22 +235,14 @@ const CreateModelForm = () => {
       };
 
       createGithubModel.mutate(payload, {
-        onSuccess: (newModel) => {
-          setModelCreated(true);
-          setNewModel(newModel);
-
-          setCreateModelMessageBoxState(() => ({
-            activate: true,
-            status: "success",
-            description: null,
-            message: "Succeed.",
-          }));
-
-          if (amplitudeIsInit) {
-            sendAmplitudeData("create_github_model", {
-              type: "critical_action",
-              process: "model",
-            });
+        onSuccess: async ({ operation }) => {
+          if (!fieldValues.id) return;
+          const operationIsDone = await checkCreateModelOperationUntilDone(
+            operation.name
+          );
+
+          if (operationIsDone) {
+            await prepareNewModel(`models/${fieldValues.id.trim()}`);
           }
         },
         onError: (error) => {
@@ -258,19 +282,14 @@ const CreateModelForm = () => {
       };
 
       createLocalModel.mutate(payload, {
-        onSuccess: (newModel) => {
-          setModelCreated(true);
-          setNewModel(newModel);
-          setCreateModelMessageBoxState(() => ({
-            activate: true,
-            status: "success",
-            description: null,
-            message: "Succeed",
-          }));
-          if (amplitudeIsInit) {
-            sendAmplitudeData("create_local_model", {
-              type: "critical_action",
-            });
+        onSuccess: async ({ operation }) => {
+          if (!fieldValues.id) return;
+          const operationIsDone = await checkCreateModelOperationUntilDone(
+            operation.name
+          );
+
+          if (operationIsDone) {
+            await prepareNewModel(`models/${fieldValues.id.trim()}`);
           }
         },
         onError: (error) => {
@@ -311,19 +330,14 @@ const CreateModelForm = () => {
       };
 
       createArtivcModel.mutate(payload, {
-        onSuccess: (newModel) => {
-          setModelCreated(true);
-          setNewModel(newModel);
-          setCreateModelMessageBoxState(() => ({
-            activate: true,
-            status: "success",
-            description: null,
-            message: "Succeed.",
-          }));
-          if (amplitudeIsInit) {
-            sendAmplitudeData("create_artivc_model", {
-              type: "critical_action",
-            });
+        onSuccess: async ({ operation }) => {
+          if (!fieldValues.id) return;
+          const operationIsDone = await checkCreateModelOperationUntilDone(
+            operation.name
+          );
+
+          if (operationIsDone) {
+            await prepareNewModel(`models/${fieldValues.id.trim()}`);
           }
         },
         onError: (error) => {
@@ -361,19 +375,14 @@ const CreateModelForm = () => {
       };
 
       createHuggingFaceModel.mutate(payload, {
-        onSuccess: (newModel) => {
-          setModelCreated(true);
-          setNewModel(newModel);
-          setCreateModelMessageBoxState(() => ({
-            activate: true,
-            status: "success",
-            description: null,
-            message: "Succeed.",
-          }));
-          if (amplitudeIsInit) {
-            sendAmplitudeData("create_artivc_model", {
-              type: "critical_action",
-            });
+        onSuccess: async ({ operation }) => {
+          if (!fieldValues.id) return;
+          const operationIsDone = await checkCreateModelOperationUntilDone(
+            operation.name
+          );
+
+          if (operationIsDone) {
+            await prepareNewModel(`models/${fieldValues.id.trim()}`);
           }
         },
         onError: (error) => {