feat(web): support function changelog (#1757)

labring · Jan 9, 2024 · 9d86105 · 9d86105
1 parent 829fd8a
commit 9d86105
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 32 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -136,6 +136,7 @@
     "NoDesc": "No Description",
     "CurrentVersion": "Current Version",
     "HistoryVersion": "History version",
+    "DeployChangelog": "Input the description of this function modification (optional)",
     "MoveFunctionTip": "Are you sure to move {{srcFunc}} to {{targetDir}} directory?",
     "MoveFunctionToRootTip": "Are you sure to move {{srcFunc}} to the root directory?",
     "MovingFunction": "Moving functions..."

diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -136,6 +136,7 @@
     "NoDesc": "暂无描述",
     "CurrentVersion": "当前版本",
     "HistoryVersion": "历史版本",
+    "DeployChangelog": "输入此次函数修改的描述 (可选)",
     "MoveFunctionTip": "是否要将 {{srcFunc}} 移动到 {{targetDir}} 目录？",
     "MoveFunctionToRootTip": "是否要将 {{srcFunc}} 移动到根目录？",
     "MovingFunction": "移动函数中..."
@@ -752,4 +753,4 @@
     "Title": "Laf 新版本已经准备好了！",
     "Description": "点击立即更新"
   }
-}
+}
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -136,6 +136,7 @@
     "NoDesc": "暂无描述",
     "CurrentVersion": "当前版本",
     "HistoryVersion": "历史版本",
+    "DeployChangelog": "输入此次函数修改的描述 (可选)",
     "MoveFunctionTip": "是否要将 {{srcFunc}} 移动到 {{targetDir}} 目录？",
     "MoveFunctionToRootTip": "是否要将 {{srcFunc}} 移动到根目录？",
     "MovingFunction": "移动函数中..."

diff --git a/web/src/pages/app/functions/mods/DeployButton/index.tsx b/web/src/pages/app/functions/mods/DeployButton/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import {
   Button,
+  Input,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -32,6 +33,7 @@ export default function DeployButton() {
   const functionCache = useFunctionCache();
 
   const headerRef = React.useRef(null);
+  const [changelog, setChangelog] = React.useState("");
 
   const { showSuccess, currentPageId } = useGlobalStore((state) => state);
 
@@ -63,6 +65,7 @@ export default function DeployButton() {
       name: store.currentFunction?.name,
       tags: store.currentFunction?.tags,
       params: store.currentFunction?.params,
+      changelog,
     });
     if (!res.error) {
       store.setCurrentFunction(res.data);
@@ -113,6 +116,14 @@ export default function DeployButton() {
             </ModalBody>
 
             <ModalFooter>
+              <div className="mr-2 w-full">
+                <Input
+                  value={changelog}
+                  onChange={(v) => setChangelog(v.target.value)}
+                  variant="filled"
+                  placeholder={String("输入此次函数修改的描述 (可选)")}
+                />
+              </div>
               <Button variant="ghost" mr={3} onClick={onClose}>
                 {t("Cancel")}
               </Button>

diff --git a/web/src/pages/app/functions/mods/VersionHistoryPanel/index.tsx b/web/src/pages/app/functions/mods/VersionHistoryPanel/index.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { Center, Spinner, useColorMode } from "@chakra-ui/react";
+import { Center, Divider, Spinner, Tooltip, useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 
 import EmptyBox from "@/components/EmptyBox";
@@ -21,7 +21,7 @@ export default function VersionHistoryPanel() {
   });
 
   return (
-    <div className="h-full overflow-auto pt-2">
+    <div className="h-full w-full pt-2">
       {history.isFetching ? (
         <Center className="h-full">
           <Spinner />
@@ -30,41 +30,51 @@ export default function VersionHistoryPanel() {
         history.data?.data.map((item: any, index: number) => {
           return (
             <FetchModal key={index} functionCode={item.source.code}>
-              <div
-                className={clsx(
-                  "text-12px mx-3 flex h-10 cursor-pointer items-center justify-between rounded",
-                  darkMode ? "hover:bg-grayModern-800" : "hover:bg-primary-100",
-                )}
-              >
-                <div className="relative flex h-full items-center">
-                  <span
-                    className={clsx(
-                      "absolute ml-2 h-2.5 w-2.5 rounded-full border-[2px] border-primary-600",
-                      darkMode ? "bg-grayModern-900" : "bg-white",
-                    )}
-                  />
+              <Tooltip label={item.changelog || "changed"} placement="left">
+                <div className="mx-3">
                   <div
                     className={clsx(
-                      "ml-3 flex  h-full",
-                      index === 0 && "items-end",
-                      index === history.data?.data.length - 1 && "items-start",
+                      "flex h-10 cursor-pointer items-center justify-between rounded",
+                      darkMode ? "hover:bg-grayModern-800" : "hover:bg-primary-100",
                     )}
                   >
-                    <div
-                      className={clsx(
-                        "border",
-                        history.data?.data.length === 1 && "border-transparent",
-                        (index === 0 || index === history.data?.data.length - 1) && "h-1/2",
-                        !(index === 0 || index === history.data?.data.length - 1) && "h-full",
-                      )}
-                    />
+                    <div className="relative flex h-full items-center truncate">
+                      <span
+                        className={clsx(
+                          "absolute ml-2 h-2.5 w-2.5 rounded-full border-[2px] border-primary-600",
+                          darkMode ? "bg-grayModern-900" : "bg-white",
+                        )}
+                      />
+                      <div
+                        className={clsx(
+                          "ml-3 flex  h-full",
+                          index === 0 && "items-end",
+                          index === history.data?.data.length - 1 && "items-start",
+                        )}
+                      >
+                        <div
+                          className={clsx(
+                            "border",
+                            history.data?.data.length === 1 && "border-transparent",
+                            (index === 0 || index === history.data?.data.length - 1) && "h-1/2",
+                            !(index === 0 || index === history.data?.data.length - 1) && "h-full",
+                          )}
+                        />
+                      </div>
+                      <div className="truncate pl-4">
+                        <p className="truncat text-[12px] font-medium">
+                          {item.changelog || "changed"}
+                        </p>
+                        <p className="text-[10px] text-gray-500">{formatDate(item.createdAt)}</p>
+                      </div>
+                    </div>
+                    <span className={clsx("px-2", darkMode ? "text-blue-500" : "text-blue-700")}>
+                      #{history.data?.data.length - index}
+                    </span>
                   </div>
-                  <span className="pl-4 font-medium">{formatDate(item.createdAt)}</span>
+                  {index !== history.data?.data.length - 1 && <Divider />}
                 </div>
-                <span className={clsx("pr-2", darkMode ? "text-blue-500" : "text-blue-700")}>
-                  #{history.data?.data.length - index}
-                </span>
-              </div>
+              </Tooltip>
             </FetchModal>
           );
         })