fix(web): fix function page ui, update triger modal

web/public/locales/en/translation.json

@@ -83,15 +83,16 @@
     "Function": "Function",
     "FunctionList": "Function List",
     "FunctionName": "Function Name",
-    "FunctionNameTip": "The unique identifier of the function, such as",
+    "FunctionNameTip": "The unique identifier of the function, such as get-user",
     "InterfaceDebug": "Interface Debugging",
     "Methods": "Request Method",
     "Name": "Parameter Name",
     "SearchPlaceholder": "Please enter the function name query",
     "Select": "chosen",
     "SystemDependence": "Built-In",
     "Value": "Value",
-    "isSupport": "Whether to support"
+    "isSupport": "Whether to support",
+    "FunctionNameRule": "Function names can only be in letters"
   },
   "HomePanel": {
     "APP": "Android or iOS app",
@@ -166,7 +167,8 @@
     "SetTimeout": "timed task",
     "Time": "Creation/update time",
     "Trigger": "Trigger",
-    "Type": "Type"
+    "Type": "Type",
+    "CronHelp": "more examples"
   },
   "NoData": "Currently no data"
 }

web/public/locales/zh-CN/translation.json

@@ -59,7 +59,7 @@
     "AddFunction": "添加函数",
     "EditFunction": "编辑函数",
     "FunctionName": "函数名",
-    "FunctionNameTip": "函数唯一标识, 如",
+    "FunctionNameTip": "函数唯一标识, 如 get-user",
     "Methods": "请求方法",
     "Description": "函数描述",
     "Code": "函数模板",
@@ -79,7 +79,8 @@
     "DependenceName": "依赖包名",
     "DependenceVersion": "依赖版本",
     "DependenceTip": "请输入依赖包名",
-    "Select": "已选择"
+    "Select": "已选择",
+    "FunctionNameRule": "函数名只能是英文"
   },
   "TriggerPanel": {
     "Trigger": "触发器",
@@ -90,11 +91,13 @@
     "Function": "关联函数",
     "FunctionTip": "请选择关联的云函数",
     "Type": "类型",
+    "Cron": "表达式",
     "SetTimeout": "定时任务",
-    "Time": "创建/更新时间",
+    "Time": "更新时间",
     "Express": "表达式",
     "CornTip": "例:0/1 * * * * ？表示每 1 秒执行任务",
-    "DeleteConfirm": "确定删除该触发器吗"
+    "DeleteConfirm": "确定删除该触发器吗",
+    "CronHelp": "更多示例"
   },
   "LogPanel": {
     "Log": "日志",

web/public/locales/zh/translation.json

@@ -83,15 +83,16 @@
     "Function": "函数",
     "FunctionList": "函数列表",
     "FunctionName": "函数名",
-    "FunctionNameTip": "函数唯一标识, 如",
+    "FunctionNameTip": "函数唯一标识, 如 get-user",
     "InterfaceDebug": "接口调试",
     "Methods": "请求方法",
     "Name": "参数名",
     "SearchPlaceholder": "请输入函数名查询",
     "Select": "已选择",
     "SystemDependence": "内置依赖",
     "Value": "值",
-    "isSupport": "是否支持"
+    "isSupport": "是否支持",
+    "FunctionNameRule": "函数名只能是英文"
   },
   "HomePanel": {
     "APP": "Android or iOS 应用",
@@ -166,7 +167,8 @@
     "SetTimeout": "定时任务",
     "Time": "创建/更新时间",
     "Trigger": "触发器",
-    "Type": "类型"
+    "Type": "类型",
+    "CronHelp": "更多示例"
   },
   "NoData": "当前无数据"
 }

web/src/apis/typing.d.ts

@@ -198,12 +198,14 @@ export interface TFunction {
   desc: string;
   tags: any[];
   websocket: boolean;
-  methods: string[];
+  methods: TMethod[];
   createdAt: string;
   updatedAt: string;
   createdBy: string;
 }
 
+export type TMethod = "GET" | "POST" | "PUT" | "DELETE" | "HEAD" | "OPTIONS" | "PATCH";
+
 export interface Source {
   code: string;
   compiled: string;

web/src/chakraTheme.ts

@@ -201,7 +201,16 @@ const Tabs = {
 const Table = {
   baseStyle: {},
   variants: {
-    unstyled: {
+    simple: {
+      parts: ["th", "td"],
+      th: {
+        border: "none",
+      },
+      td: {
+        border: "none",
+      },
+    },
+    border: {
       parts: ["th", "td"],
       th: {
         border: "1px solid #dddddd",
@@ -212,7 +221,7 @@ const Table = {
     },
   },
   defaultProps: {
-    variant: "unstyled",
+    variant: "border",
   },
 };
 

web/src/constants/index.ts

@@ -4,7 +4,6 @@ export const SmallNavHeight = 42;
 
 export const Pages = {
   function: "function",
-  trigger: "trigger",
   storage: "storage",
   database: "database",
   logs: "logs",
@@ -24,6 +23,14 @@ export enum APP_STATUS {
 
 export const DEFAULT_REGION = "default";
 
+export enum SUPPORTED_METHODS {
+  GET = "GET",
+  POST = "POST",
+  PUT = "PUT",
+  PATCH = "PATCH",
+  DELETE = "DELETE",
+}
+
 export enum APP_PHASE_STATUS {
   Creating = "Creating",
   Started = "Started",

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

@@ -18,7 +18,7 @@ import { keyBy, mapValues } from "lodash";
 
 import { Row } from "@/components/Grid";
 import Panel from "@/components/Panel";
-import { Pages } from "@/constants";
+import { Pages, SUPPORTED_METHODS } from "@/constants";
 
 import { useCompileMutation } from "../../service";
 import useFunctionStore from "../../store";
@@ -27,6 +27,7 @@ import BodyParamsTab from "./BodyParamsTab";
 import QueryParamsTab from "./QueryParamsTab";
 import HeaderParamsTab from "./QueryParamsTab";
 
+import { TMethod } from "@/apis/typing";
 import useFunctionCache from "@/hooks/useFunctionCache";
 import useHotKey, { DEFAULT_SHORTCUTS } from "@/hooks/useHotKey";
 import useGlobalStore from "@/pages/globalStore";
@@ -44,7 +45,7 @@ export default function DebugPanel() {
 
   const [runningResData, setRunningResData] = useState();
   const [isLoading, setIsLoading] = useState(false);
-  const [runningMethod, setRunningMethod] = useState<string>("");
+  const [runningMethod, setRunningMethod] = useState<TMethod>();
 
   const compileMutation = useCompileMutation();
 
@@ -126,7 +127,7 @@ export default function DebugPanel() {
                       value={runningMethod}
                       disabled={getFunctionUrl() === ""}
                       onChange={(e) => {
-                        setRunningMethod(e.target.value);
+                        setRunningMethod(e.target.value as TMethod);
                       }}
                     >
                       {currentFunction.methods?.map((item: string) => {
@@ -158,12 +159,15 @@ export default function DebugPanel() {
                             <span className="ml-1">({queryParams.length})</span>
                           )}
                         </Tab>
-                        <Tab>
-                          Body
-                          {Object.keys(bodyParams).length > 0 && (
-                            <span className="ml-1">({Object.keys(bodyParams).length})</span>
-                          )}
-                        </Tab>
+                        {runningMethod === SUPPORTED_METHODS.POST && (
+                          <Tab>
+                            Body
+                            {Object.keys(bodyParams).length > 0 && (
+                              <span className="ml-1">({Object.keys(bodyParams).length})</span>
+                            )}
+                          </Tab>
+                        )}
+
                         <Tab>
                           Headers
                           {headerParams.length > 0 && (
@@ -187,13 +191,17 @@ export default function DebugPanel() {
                             }}
                           />
                         </TabPanel>
-                        <TabPanel px={2} py={3}>
-                          <BodyParamsTab
-                            onChange={(values) => {
-                              setBodyParams(values);
-                            }}
-                          />
-                        </TabPanel>
+
+                        {runningMethod === SUPPORTED_METHODS.POST && (
+                          <TabPanel px={2} py={3}>
+                            <BodyParamsTab
+                              onChange={(values) => {
+                                setBodyParams(values);
+                              }}
+                            />
+                          </TabPanel>
+                        )}
+
                         <TabPanel
                           px={0}
                           py={1}

web/src/pages/app/functions/mods/FunctionPanel/CreateModal/functionTemplates.ts

@@ -3,19 +3,19 @@ const functionTemplates = [
     label: "hello laf",
     value: `import cloud from '@lafjs/cloud'
 
-exports.main = async function (ctx: FunctionContext) {
+export async function main(ctx: FunctionContext) {
   console.log('Hello World')
   return { data: 'hi, laf' }
 }
+
 `,
   },
   {
     label: "database 示例",
     value: `import cloud from '@lafjs/cloud'
 
-exports.main = async function (ctx: FunctionContext) {
+export async function main(ctx: FunctionContext) {
 
-  // you should add a collection named 'test' first
   const res = await cloud.database().collection('test').getOne();
 
   console.log(res);

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

@@ -23,11 +23,14 @@ import {
 } from "@chakra-ui/react";
 import { t } from "i18next";
 
+import { SUPPORTED_METHODS } from "@/constants";
+
 import { useCreateFunctionMutation, useUpdateFunctionMutation } from "../../../service";
 import useFunctionStore from "../../../store";
 
 import functionTemplates from "./functionTemplates";
 
+import { TMethod } from "@/apis/typing";
 import useGlobalStore from "@/pages/globalStore";
 
 const CreateModal = (props: { functionItem?: any; children?: React.ReactElement }) => {
@@ -51,7 +54,7 @@ const CreateModal = (props: { functionItem?: any; children?: React.ReactElement
     name: string;
     description: string;
     websocket: boolean;
-    methods: string[];
+    methods: TMethod[];
     code: string;
   };
 
@@ -113,10 +116,13 @@ const CreateModal = (props: { functionItem?: any; children?: React.ReactElement
                 <FormLabel htmlFor="name">{t("FunctionPanel.FunctionName")}</FormLabel>
                 <Input
                   {...register("name", {
-                    required: "name is required",
+                    pattern: {
+                      value: /^[A-Za-z][A-Za-z0-9-_]+$/,
+                      message: t("FunctionPanel.FunctionNameRule"),
+                    },
                   })}
                   id="name"
-                  placeholder={t("FunctionPanel.FunctionNameTip") + "get-user "}
+                  placeholder={String(t("FunctionPanel.FunctionNameTip"))}
                   disabled={isEdit}
                   variant="filled"
                 />
@@ -131,11 +137,13 @@ const CreateModal = (props: { functionItem?: any; children?: React.ReactElement
                     control={control}
                     render={({ field: { ref, ...rest } }) => (
                       <CheckboxGroup {...rest}>
-                        <Checkbox value="GET">GET</Checkbox>
-                        <Checkbox value="POST">POST</Checkbox>
-                        <Checkbox value="HEAD">HEAD</Checkbox>
-                        <Checkbox value="PATCH">PATCH</Checkbox>
-                        <Checkbox value="DELETE">DELETE</Checkbox>
+                        {Object.keys(SUPPORTED_METHODS).map((item) => {
+                          return (
+                            <Checkbox value={item} key={item}>
+                              {item}
+                            </Checkbox>
+                          );
+                        })}
                       </CheckboxGroup>
                     )}
                     rules={{

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

@@ -18,11 +18,11 @@ import { Pages } from "@/constants";
 
 import { useDeleteFunctionMutation, useFunctionListQuery } from "../../service";
 import useFunctionStore from "../../store";
+import TriggerModal from "../TriggerModal";
 
 import CreateModal from "./CreateModal";
 
 import { TFunction } from "@/apis/typing";
-import AddTriggerModal from "@/pages/app/trigger/AddTriggerModal";
 import useGlobalStore from "@/pages/globalStore";
 
 export default function FunctionList() {
@@ -64,6 +64,11 @@ export default function FunctionList() {
       <Panel.Header
         title={t`FunctionPanel.FunctionList`}
         actions={[
+          <TriggerModal key="trigger_modal">
+            <IconWrap size={20} tooltip={t("TriggerPanel.Trigger").toString()}>
+              <TriggerIcon fontSize={13} />
+            </IconWrap>
+          </TriggerModal>,
           <CreateModal key="create_modal">
             <IconWrap size={20} tooltip={t("FunctionPanel.AddFunction").toString()}>
               <AddIcon fontSize={12} />
@@ -102,11 +107,6 @@ export default function FunctionList() {
                     <span className="ml-2 font-medium text-black">{func?.name}</span>
                   </div>
                   <div className="invisible flex items-center group-hover:visible">
-                    <AddTriggerModal targetFunc={func.name}>
-                      <IconWrap size={20} tooltip={t("TriggerPanel.AddTrigger").toString()}>
-                        <TriggerIcon fontSize={13} />
-                      </IconWrap>
-                    </AddTriggerModal>
                     <CreateModal functionItem={func}>
                       <IconWrap size={20} tooltip={t("Edit").toString()}>
                         <EditIcon fontSize={13} />