fix(web): create same function cause page error (#603)

Author: LeezQ

web/public/locales/en/translation.json

@@ -9,5 +9,16 @@
   "Cancel": "Cancel",
   "Edit": "Edit",
   "Delete": "Delete",
-  "CreateTime": "CreateTime"
-}
+  "CreateTime": "CreateTime",
+  "Common": {
+    "Dialog": {
+      "ConfirmDeploy": "Confirm Deploy"
+    }
+  },
+  "FunctionPanel": {
+    "Deploy": "Deploy"
+  },
+  "Message": {
+    "DeploySuccess": "Published successfully"
+  }
+}

web/src/pages/app/functions/mods/DeployButton/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Button,
   Modal,
@@ -73,33 +72,35 @@ export default function DeployButton() {
         {t("FunctionPanel.Deploy")} ({hotKeyP})
       </Button>
 
-      <Modal isOpen={isOpen} onClose={onClose} size="6xl" isCentered>
-        <ModalOverlay />
-        <ModalContent maxW={"80%"}>
-          <ModalHeader>Code Diff</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody borderBottom={"1px"} borderBottomColor="gray.200">
-            <CommonDiffEditor
-              original={store.currentFunction.source?.code}
-              modified={functionCache.getCache(store.currentFunction.id)}
-            />
-          </ModalBody>
+      {isOpen ? (
+        <Modal isOpen={isOpen} onClose={onClose} size="6xl" isCentered>
+          <ModalOverlay />
+          <ModalContent maxW={"80%"}>
+            <ModalHeader>Code Diff</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody borderBottom={"1px"} borderBottomColor="gray.200">
+              <CommonDiffEditor
+                original={store.currentFunction?.source?.code}
+                modified={functionCache.getCache(store.currentFunction?.id)}
+              />
+            </ModalBody>
 
-          <ModalFooter>
-            <Button mr={3} onClick={onClose}>
-              {t("Cancel")}
-            </Button>
-            <Button
-              colorScheme={"blue"}
-              onClick={() => {
-                deploy();
-              }}
-            >
-              {t("Common.Dialog.ConfirmDeploy")}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+            <ModalFooter>
+              <Button mr={3} onClick={onClose}>
+                {t("Cancel")}
+              </Button>
+              <Button
+                colorScheme={"blue"}
+                onClick={() => {
+                  deploy();
+                }}
+              >
+                {t("Common.Dialog.ConfirmDeploy")}
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      ) : null}
     </>
   );
 }

web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx

@@ -73,15 +73,14 @@ const CreateModal = (props: { functionItem?: any }) => {
     let res: any = {};
     if (isEdit) {
       res = await updateFunctionMutation.mutateAsync(data);
-      store.setCurrentFunction(res.data);
     } else {
       res = await createFuncitonMutation.mutateAsync(data);
-      store.setCurrentFunction(res.data);
     }
 
     if (!res.error) {
       showSuccess(isEdit ? "update success" : "create success");
       onClose();
+      store.setCurrentFunction(res.data);
       reset(defaultValues);
     }
   };
@@ -126,7 +125,12 @@ const CreateModal = (props: { functionItem?: any }) => {
 
               <FormControl>
                 <FormLabel htmlFor="description">函数描述</FormLabel>
-                <Input id="description" placeholder="函数描述" variant="filled" />
+                <Input
+                  {...register("description")}
+                  id="description"
+                  placeholder="函数描述"
+                  variant="filled"
+                />
               </FormControl>
 
               <FormControl isInvalid={!!errors?.websocket}>

web/src/pages/app/storages/mods/FileList/index.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { DeleteIcon, ViewIcon } from "@chakra-ui/icons";
 import { HStack, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
@@ -24,17 +23,13 @@ export default function FileList() {
   // const bucketType = currentStorage?.spec.policy;
 
   const query = useQuery(
-    ["fileList", bucketName],
+    ["fileList", bucketName, prefix],
     () => getList(bucketName, { marker: "", prefix }),
     {
       enabled: !!bucketName,
     },
   );
 
-  useEffect(() => {
-    query.refetch();
-  }, [bucketName, prefix, query]);
-
   const viewAppFile = (file: TFile) => {
     if (file.Prefix) {
       changeDirectory(file);