fix(web): keep each function expanded when making modifications (#1463)

labring · Aug 14, 2023 · 01fe18c · 01fe18c
1 parent 3bcd8fd
commit 01fe18c
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 33 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -116,7 +116,8 @@
     "getCodeOnline": "Retrieve the latest released online code",
     "versionHistory": "Version History",
     "Restore": "Restore",
-    "Invite": "Invite"
+    "Invite": "Invite",
+    "HistoryTips": "No historical versions available"
   },
   "HomePanel": {
     "APP": "Android or iOS app",
@@ -611,4 +612,4 @@
     "Quit": "Quit"
   },
   "Collaborative": "Collaborative"
-}
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -116,7 +116,8 @@
     "getCodeOnline": "获取线上最新发布的代码",
     "versionHistory": "历史版本",
     "Restore": "恢复",
-    "Invite": "邀请"
+    "Invite": "邀请",
+    "HistoryTips": "暂无历史版本"
   },
   "HomePanel": {
     "APP": "Android or iOS 应用",

diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -116,7 +116,8 @@
     "getCodeOnline": "获取线上最新发布的代码",
     "versionHistory": "历史版本",
     "Restore": "恢复",
-    "Invite": "邀请"
+    "Invite": "邀请",
+    "HistoryTips": "暂无历史版本"
   },
   "HomePanel": {
     "APP": "Android or iOS 应用",

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx
@@ -27,6 +27,7 @@ import { DEFAULT_CODE, SUPPORTED_METHODS } from "@/constants";
 import { changeURL } from "@/utils/format";
 
 import { useCreateFunctionMutation, useUpdateFunctionMutation } from "../../../service";
+import useFunctionStore from "../../../store";
 
 import { TFunctionTemplate, TMethod } from "@/apis/typing";
 import FunctionTemplate from "@/pages/functionTemplate";
@@ -48,13 +49,14 @@ const CreateModal = (props: {
   const navigate = useNavigate();
   const [searchKey, setSearchKey] = useState("");
   const [templateOpen, setTemplateOpen] = useState(false);
+  const { recentFunctionList, setRecentFunctionList } = useFunctionStore();
 
   const defaultValues = {
     name: functionItem?.name || "",
     description: functionItem?.desc || "",
     websocket: !!functionItem?.websocket,
     methods: functionItem?.methods || ["GET", "POST"],
-    code: functionItem?.source.code || aiCode || DEFAULT_CODE || "",
+    code: functionItem?.source?.code || aiCode || DEFAULT_CODE || "",
     tags: functionItem?.tags || [],
   };
 
@@ -103,6 +105,14 @@ const CreateModal = (props: {
         name: functionItem.name,
         newName: data.name,
       });
+      setRecentFunctionList(
+        recentFunctionList.map((item: any) => {
+          if (item.name === functionItem.name) {
+            return { ...item, name: data.name };
+          }
+          return item;
+        }),
+      );
     } else if (isEdit && functionItem.name === data.name) {
       res = await updateFunctionMutation.mutateAsync(data);
     } else {

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -36,7 +36,7 @@ type TagItem = {
   selected: boolean;
 };
 
-type TreeNode = {
+export type TreeNode = {
   _id: string;
   name: string;
   level?: number;
@@ -55,7 +55,13 @@ export default function FunctionList() {
   } = useFunctionStore((store) => store);
 
   const functionCache = useFunctionCache();
-  const [root, setRoot] = useState<TreeNode>({ _id: "", name: "", children: [] });
+  const [functionRoot, setFunctionRoot] = useState<TreeNode>({
+    _id: "",
+    name: "",
+    level: 0,
+    isExpanded: true,
+    children: [],
+  });
 
   const [keywords, setKeywords] = useState("");
 
@@ -79,12 +85,14 @@ export default function FunctionList() {
   });
 
   function generateRoot(data: TFunction[]) {
-    const root = { _id: "", name: "", level: 0, isExpanded: true, children: [] };
+    const root = functionRoot;
     data.forEach((item) => {
       const nameParts = item.name.split("/");
       let currentNode: TreeNode = root;
       nameParts.forEach((part, index) => {
-        if (index === nameParts.length - 1) {
+        if (currentNode.children.find((node) => node.name === item.name)) {
+          return;
+        } else if (index === nameParts.length - 1) {
           currentNode.children.push(item);
           return;
         }
@@ -105,13 +113,26 @@ export default function FunctionList() {
         currentNode = existingNode as TreeNode;
       });
     });
+    pruneTree(root, data);
     return root;
   }
 
+  function pruneTree(node: TreeNode, data: TFunction[]): void {
+    node.children = node.children.filter((child) => pruneChildTree(child, data));
+  }
+
+  function pruneChildTree(node: any, data: TFunction[]): boolean {
+    if (!node.children || node.children.length === 0) {
+      return data.some((item) => item.name === node.name);
+    }
+    node.children = node.children.filter((child: TreeNode) => pruneChildTree(child, data));
+    return node.children.length > 0 || data.some((item) => item.name === node.name);
+  }
+
   useFunctionListQuery({
     onSuccess: (data) => {
       setAllFunctionList(data.data);
-      setRoot(generateRoot(data.data));
+      setFunctionRoot(generateRoot(data.data));
       const tags = data.data.reduce((pre: any, item: any) => {
         return pre.concat(item.tags);
       }, []);
@@ -178,7 +199,7 @@ export default function FunctionList() {
   };
 
   function renderSectionItems(items: TreeNode[], isFuncList = false) {
-    items.sort((a: TreeNode, b: TreeNode) => {
+    const sortedItems = [...items].sort((a: TreeNode, b: TreeNode) => {
       const isFolderA = a.children && a.children.length > 0;
       const isFolderB = b.children && b.children.length > 0;
       if (isFolderA && !isFolderB) {
@@ -189,7 +210,7 @@ export default function FunctionList() {
       return 0;
     });
 
-    return items.map((item, index) => {
+    return sortedItems.map((item, index) => {
       let fileType = FileType.ts;
       if (item.children?.length) {
         fileType = FileType.folder;
@@ -211,7 +232,7 @@ export default function FunctionList() {
                 navigate(`/app/${currentApp?.appid}/${Pages.function}/${item?.name}`);
               } else {
                 item.isExpanded = !item.isExpanded;
-                setRoot({ ...root });
+                setFunctionRoot({ ...functionRoot });
               }
             }}
           >
@@ -322,8 +343,8 @@ export default function FunctionList() {
           <SectionList>
             {renderSectionItems(filterFunctions as unknown as TreeNode[], true)}
           </SectionList>
-        ) : root.children?.length ? (
-          <SectionList>{renderSectionItems(root.children as TreeNode[])}</SectionList>
+        ) : functionRoot.children?.length ? (
+          <SectionList>{renderSectionItems(functionRoot.children as TreeNode[])}</SectionList>
         ) : (
           <EmptyBox hideIcon>
             <p>{t("FunctionPanel.EmptyFunctionTip")}</p>

diff --git a/web/src/pages/app/functions/mods/VersionHistoryPanel/index.tsx b/web/src/pages/app/functions/mods/VersionHistoryPanel/index.tsx
@@ -1,6 +1,8 @@
-import { useColorMode } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { Center, Spinner, useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 
+import EmptyBox from "@/components/EmptyBox";
 import { formatDate } from "@/utils/format";
 
 import { useFunctionHistoryQuery } from "../../service";
@@ -12,14 +14,19 @@ export default function VersionHistoryPanel() {
   const { currentFunction } = useFunctionStore((state) => state);
   const { colorMode } = useColorMode();
   const darkMode = colorMode === "dark";
+  const { t } = useTranslation();
 
   const history = useFunctionHistoryQuery(encodeURIComponent(currentFunction.name), {
     enabled: currentFunction.name !== undefined,
   });
 
   return (
     <div className="h-full overflow-auto pt-2">
-      {!history.isFetching &&
+      {history.isFetching ? (
+        <Center className="h-full">
+          <Spinner />
+        </Center>
+      ) : history.data?.data.length !== 0 ? (
         history.data?.data.map((item: any, index: number) => {
           return (
             <FetchButton key={index} functionCode={item.source.code}>
@@ -60,7 +67,12 @@ export default function VersionHistoryPanel() {
               </div>
             </FetchButton>
           );
-        })}
+        })
+      ) : (
+        <EmptyBox hideIcon>
+          <span>{t("FunctionPanel.HistoryTips")}</span>
+        </EmptyBox>
+      )}
     </div>
   );
 }
diff --git a/web/src/pages/app/mods/SideBar/index.tsx b/web/src/pages/app/mods/SideBar/index.tsx
@@ -2,7 +2,7 @@
  * cloud functions SideBar menu
  ***************************/
 
-import { NavLink, useNavigate, useParams } from "react-router-dom";
+import { NavLink, useParams } from "react-router-dom";
 import { Center } from "@chakra-ui/react";
 import clsx from "clsx";
 import { t } from "i18next";
@@ -26,7 +26,6 @@ type TIcon = {
 };
 export default function SideBar() {
   const { pageId } = useParams();
-  const navigate = useNavigate();
   const { currentApp, setCurrentPage, userInfo, avatarUpdatedAt, regions = [] } = useGlobalStore();
   const currentRegion =
     regions.find((item: any) => item._id === currentApp?.regionId) || regions[0];
@@ -96,20 +95,9 @@ export default function SideBar() {
             {icons.map((item) => {
               if (item.pageId === "nav") {
                 return (
-                  <Center
-                    key={item.pageId}
-                    style={{
-                      height: 40,
-                      marginTop: 12,
-                      marginBottom: 24,
-                    }}
-                    className="cursor-pointer"
-                    onClick={() => {
-                      navigate(Routes.dashboard);
-                    }}
-                  >
+                  <a key={item.pageId} href={Routes.dashboard}>
                     {item.icon}
-                  </Center>
+                  </a>
                 );
               }
               if (item.icon) {