fix(web): fix database page bugs & add storage refresh (#761)

Author: kongwy229

web/public/locales/en/translation.json

@@ -23,13 +23,16 @@
     "PolicyNameTip": "Please enter a policy ID",
     "RulesContent": "Rule content",
     "RulesNum": "Number of Rules",
-    "Search": "Please enter ID to query",
     "SelectCollection": "Select Collection",
     "SelectFunction": "Please select a cloud function",
-    "CollectionNameRule": "The collection name can only contain English, _ or -",
     "EmptyCollectionTip": "You have not created a collection",
     "EmptyDataText": "No data information,",
-    "EmptyPolicyTip": "You have not created a policy"
+    "EmptyPolicyTip": "You have not created a policy",
+    "EmptyRuleTip": "This policy has no rules yet,",
+    "Query": "Please enter the ID and press Enter to query",
+    "Search": "Please enter ID to search",
+    "CreateTagTip": "Press \"Enter\" or \"Space\" to separate tags, each tag can be up to 16 characters",
+    "CollectionNameRule": "The collection name can only start with a letter and consist of 3 to 32 characters including letters, _ or -"
   },
   "Add": "Add ",
   "AddData": "new data",
@@ -57,23 +60,23 @@
   "Name": "name",
   "Operation": "Operation",
   "Page": "Page",
-  "Save": "save",
+  "Save": "Save",
   "Search": "Search",
   "ToConfirm": "to determine",
   "Total": "Total",
   "Update": "Update ",
-  "UpdateSuccess": "update success",
-  "moreOperations": "more operations",
+  "UpdateSuccess": "Update Success",
+  "moreOperations": "More Operations",
   "FunctionPanel": {
     "AddFunction": "Add Function",
     "Code": "Function Template",
-    "ConfirmDeploy": "Confirm release",
+    "ConfirmDeploy": "Confirm Release",
     "CustomDependence": "Custom",
     "CustomDependenceTip": "No custom dependencies yet",
     "Debug": "Run",
     "DebugResult": "Run Result",
     "DeleteConfirm": "Are you sure you want to delete the function?",
-    "Dependence": "Dependence",
+    "Dependence": "NPM Dependence",
     "DependenceAdd": "Add Dependencies",
     "DependenceEdit": "Edit Dependencies",
     "DependenceName": "Dependency Package Name",
@@ -169,7 +172,9 @@
     "BucketNameRule": "Can only contain lowercase English, numbers, and the beginning and end cannot be numbers or -",
     "BucketNamePlaceholder": "bucket-name",
     "StorageList": "Cloud Storage List",
-    "EmptyStorageTip": "You have not created a Bucket"
+    "EmptyStorageTip": "You have not created a Bucket",
+    "UploadFile": "Upload File",
+    "UploadFolder": "Upload Folder"
   },
   "TriggerPanel": {
     "AddTrigger": "Add Trigger",
@@ -195,7 +200,7 @@
     "CreateError": "field cannot be empty"
   },
   "Refresh": "Refresh",
-  "RefreshData": "Refresh Data",
+  "RefreshData": "Refresh",
   "EditTip": "modified, unpublished",
   "NoInfo": "No information"
-}
+}

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

@@ -33,7 +33,8 @@
     "AddData": "添加数据",
     "AddIndex": "添加索引",
     "IndexName": "索引名称",
-    "Search": "请输入ID进行查询",
+    "Search": "请输入ID进行搜索",
+    "Query": "请输入ID按回车进行查询",
     "EmptyCollectionText": "暂无集合信息,",
     "EmptyDataText": "暂无数据信息,",
     "EmptyCollectionTip": "您还没有创建集合",
@@ -50,7 +51,9 @@
     "AddRules": "添加规则",
     "RulesNum": "规则数",
     "RulesContent": "规则内容",
-    "CollectionNameRule": "集合名称只能包含英文, _ 或者 -"
+    "CollectionNameRule": "集合名称只能由字母开头,包含字母, _ 或者 - 的3至32个字符组成",
+    "EmptyRuleTip": "此策略还没有规则,",
+    "CreateTagTip": "按「回车键」或「空格键」分隔标签,每个标签最多由16个字符组成"
   },
   "FunctionPanel": {
     "Debug": "运行",
@@ -70,7 +73,7 @@
     "Description": "函数描述",
     "Code": "函数模板",
     "isSupport": "是否支持",
-    "Dependence": "依赖",
+    "Dependence": "NPM依赖",
     "CustomDependence": "自定义依赖",
     "CustomDependenceTip": "暂无自定义依赖",
     "SystemDependence": "内置依赖",
@@ -153,7 +156,10 @@
     "Success": "上传成功",
     "EmptyText": "暂无Bucket数据,",
     "BucketNameRule": "只能包含小写英文、数字，开头和结尾不能是数字或 -",
-    "BucketNamePlaceholder": "bucket-name"
+    "BucketNamePlaceholder": "bucket-name",
+    "UploadFile": "上传文件",
+    "UploadFolder": "上传文件夹",
+    "Bucket": "Bucket"
   },
   "Search": "搜索",
   "Close": "关闭",
@@ -197,4 +203,4 @@
   "Refresh": "刷新",
   "RefreshData": "刷新数据",
   "NoInfo": "暂无信息"
-}
+}

web/public/locales/zh/translation.json

@@ -23,13 +23,16 @@
     "PolicyNameTip": "请输入策略标识",
     "RulesContent": "规则内容",
     "RulesNum": "规则数",
-    "Search": "请输入ID进行查询",
+    "Search": "请输入ID进行搜索",
+    "Query": "请输入ID按回车进行查询",
     "SelectCollection": "选择集合",
     "SelectFunction": "请选择云函数",
-    "CollectionNameRule": "集合名称只能包含英文, _ 或者 -",
+    "CollectionNameRule": "集合名称只能由字母开头,包含字母, _ 或者 - 的3至32个字符组成",
     "EmptyCollectionTip": "您还没有创建集合",
     "EmptyDataText": "暂无数据信息,",
-    "EmptyPolicyTip": "您还没有创建策略"
+    "EmptyPolicyTip": "您还没有创建策略",
+    "EmptyRuleTip": "此策略还没有规则,",
+    "CreateTagTip": "按「回车键」或「空格键」分隔标签，每个标签最多由16个字符组成"
   },
   "Add": "添加",
   "AddData": "新增数据",
@@ -73,7 +76,7 @@
     "Debug": "运行",
     "DebugResult": "运行结果",
     "DeleteConfirm": "确认要删除函数吗？",
-    "Dependence": "依赖",
+    "Dependence": "NPM依赖",
     "DependenceAdd": "添加依赖",
     "DependenceEdit": "编辑依赖",
     "DependenceName": "依赖包名",
@@ -169,7 +172,9 @@
     "EditBucket": "编辑Bucket",
     "DeleteBucket": "删除Bucket",
     "BucketNamePlaceholder": "bucket-name",
-    "EmptyStorageTip": "您还没有创建Bucket"
+    "EmptyStorageTip": "您还没有创建Bucket",
+    "UploadFile": "上传文件",
+    "UploadFolder": "上传文件夹"
   },
   "TriggerPanel": {
     "AddTrigger": "新建触发器",

web/src/chakraTheme.ts

@@ -282,6 +282,9 @@ const Badge = {
     borderRadius: "50px",
     textTransform: "none",
     fontWeight: "medium",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   }),
   variants: {
     Started: {

web/src/components/Editor/JsonEditor.tsx

@@ -29,23 +29,6 @@ function JsonEditor(props: {
   const subscriptionRef = useRef<monaco.IDisposable | undefined>(undefined);
   const monacoEl = useRef(null);
 
-  // onChange
-  useEffect(() => {
-    subscriptionRef.current?.dispose();
-
-    if (onChange) {
-      subscriptionRef.current = editorRef.current?.onDidChangeModelContent((event) => {
-        onChange(editorRef.current?.getValue());
-      });
-    }
-  }, [onChange]);
-
-  useEffect(() => {
-    if (monacoEl && editorRef.current && value !== editorRef.current?.getValue()) {
-      editorRef.current?.getModel()?.setValue(value);
-    }
-  }, [value]);
-
   useEffect(() => {
     if (monacoEl && !editorRef.current) {
       editorRef.current = monaco.editor.create(monacoEl.current!, {
@@ -75,6 +58,22 @@ function JsonEditor(props: {
     return () => {};
   }, [value]);
 
+  // onChange
+  useEffect(() => {
+    subscriptionRef.current?.dispose();
+
+    if (onChange) {
+      subscriptionRef.current = editorRef.current?.onDidChangeModelContent((event) => {
+        onChange(editorRef.current?.getValue());
+      });
+    }
+  }, [onChange]);
+
+  useEffect(() => {
+    if (monacoEl && editorRef.current && value !== editorRef.current?.getValue()) {
+      editorRef.current?.getModel()?.setValue(value);
+    }
+  }, [value]);
   return <div style={{ height: height, width: "100%" }} ref={monacoEl}></div>;
 }
 

web/src/components/FileUpload/index.tsx

@@ -83,8 +83,7 @@ function FileUpload(props: { onUpload: (files: any) => void; uploadType: "file"
             {t("StoragePanel.Drag")}
           </p>
           <button className={styles.uploadButton} onClick={onButtonClick}>
-            {t("StoragePanel.Upload") +
-              (uploadType === "file" ? t("StoragePanel.File") : t("StoragePanel.Folder"))}
+            {uploadType === "file" ? t("StoragePanel.UploadFile") : t("StoragePanel.UploadFolder")}
           </button>
         </div>
       </label>

web/src/components/InputTag/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Input, Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
+import { t } from "i18next";
 
 export default function InputTag(props: { value: string[]; onChange: (value: string[]) => any }) {
   const { value, onChange } = props;
@@ -20,7 +21,7 @@ export default function InputTag(props: { value: string[]; onChange: (value: str
   return (
     <>
       <Input
-        placeholder=" 按「回车键」或「空格键」分隔标签，每个标签最多由16个字符组成"
+        placeholder={String(t("CollectionPanel.CreateTagTip"))}
         className="mb-2"
         value={inputV}
         onKeyDown={(e) => handleEnter(e)}

web/src/components/Pagination/index.tsx

@@ -19,6 +19,18 @@ export default function Pagination(props: {
   const { page, total, limit } = values;
   const maxPage = total && limit ? Math.ceil(total / limit) : -1;
 
+  if (maxPage > 0 && page && page > maxPage) {
+    onChange({
+      ...values,
+      page: maxPage,
+    });
+  } else if (page && page < 1) {
+    onChange({
+      ...values,
+      page: 1,
+    });
+  }
+
   return (
     <HStack alignItems="center" spacing={"1"} display="flex" whiteSpace={"nowrap"}>
       <Text as="div" className="text-lg mr-2">

web/src/constants/index.ts

@@ -33,6 +33,7 @@ export enum SUPPORTED_METHODS {
 
 export enum APP_PHASE_STATUS {
   Creating = "Creating",
+  Created = "Created",
   Started = "Started",
   Starting = "Starting",
   Restarting = "Restarting",

web/src/main.tsx

@@ -8,8 +8,4 @@ if (typeof (window as any).global === "undefined") {
   (window as any).global = window;
 }
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<App />);