feat(web): fix database & storage bug (#595)

1. reduce the height of editing dependency item 2. translate English into Chinese 3. add prompts and button when the database and storage list is empty 4. change the name of file list
labring · Jan 3, 2023 · 4ff0d9b · 4ff0d9b
1 parent c3dd637
commit 4ff0d9b
Show file tree

Hide file tree

Showing 20 changed files with 324 additions and 162 deletions.
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -19,6 +19,15 @@
     "Deploy": "发布",
     "EmptyText": "请先选择函数"
   },
+  "CollectionPanel": {
+    "CollectionAdd": "添加集合"
+  },
+  "StoragePanel": {
+    "Upload": "上传",
+    "File": "文件",
+    "Folder": "文件夹",
+    "Create": "新建"
+  },
   "Message": {
     "DeploySuccess": "发布成功"
   },

diff --git a/web/src/components/DepenceList/index.tsx b/web/src/components/DepenceList/index.tsx
@@ -15,12 +15,14 @@ function Item(props: {
   children: React.ReactNode;
   isActive: boolean;
   className?: string;
+  style?: React.CSSProperties;
   key: string;
   onClick: () => void;
 }) {
-  const { children, isActive, onClick, className } = props;
+  const { children, isActive, onClick, className, style } = props;
   return (
     <li
+      style={style || {}}
       className={clsx(className, {
         [styles.active]: isActive,
       })}

diff --git a/web/src/components/FileUplaod/index.tsx b/web/src/components/FileUplaod/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 
 import styles from "./index.module.scss";
@@ -10,7 +11,7 @@ function FileUpload(props: { onUpload: (files: any) => void; uploadType: "file"
   const [dragActive, setDragActive] = React.useState(false);
   // ref
   const inputRef = React.useRef<any>(null);
-
+  const { t } = useTranslation();
   useEffect(() => {
     if (uploadType === "folder") {
       inputRef.current.setAttribute("webkitdirectory", "");
@@ -77,9 +78,13 @@ function FileUpload(props: { onUpload: (files: any) => void; uploadType: "file"
         htmlFor="input-file-upload"
       >
         <div>
-          <p>Drag and drop your {uploadType} here or</p>
+          <p>
+            将{uploadType === "file" ? t("StoragePanel.File") : t("StoragePanel.Folder")}
+            拖放到此处或者
+          </p>
           <button className={styles.uploadButton} onClick={onButtonClick}>
-            {uploadType === "file" ? "Upload File" : "Upload Folder"}
+            {t("StoragePanel.Upload") +
+              (uploadType === "file" ? t("StoragePanel.File") : t("StoragePanel.Folder"))}
           </button>
         </div>
       </label>

diff --git a/web/src/hooks/useAwsS3.ts b/web/src/hooks/useAwsS3.ts
@@ -30,6 +30,7 @@ function useAwsS3() {
 
     const files = res.Contents || [];
     const dirs = res.CommonPrefixes || [];
+    // console.log(files, dirs)
     return [...files, ...dirs];
   };
 

diff --git a/web/src/pages/app/database/CollectionDataList/index.tsx b/web/src/pages/app/database/CollectionDataList/index.tsx
@@ -1,12 +1,18 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { AddIcon } from "@chakra-ui/icons";
+import { Button, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 
 import RightPanel from "../../mods/RightPanel";
+import CreateCollectionModal from "../mods/CreateCollectionModal";
+import useDBMStore from "../store";
 
 // import ColPannel from "./mods/ColPannel";
 import DataPannel from "./mods/DataPannel";
 // import IndexPannel from "./mods/IndexPannel";
 
 export default function CollectionDataList() {
+  const { t } = useTranslation();
+  const store = useDBMStore((state) => state);
   return (
     <RightPanel>
       <Tabs className="h-full">
@@ -17,7 +23,17 @@ export default function CollectionDataList() {
         </TabList>
         <TabPanels className="h-full">
           <TabPanel className="overflow-hidden relative" style={{ height: "calc(100% - 55px)" }}>
-            <DataPannel />
+            {store.currentDB === undefined ? (
+              <div className="h-full flex items-center  justify-center">
+                <CreateCollectionModal>
+                  <Button size="lg" variant="ghost" leftIcon={<AddIcon />}>
+                    {t("CollectionPanel.CollectionAdd")}
+                  </Button>
+                </CreateCollectionModal>
+              </div>
+            ) : (
+              <DataPannel />
+            )}
           </TabPanel>
           {/* <TabPanel>
             <IndexPannel />

diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPannel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPannel/index.tsx
@@ -57,7 +57,17 @@ export default function DataPannel() {
 
   return (
     <>
-      <div className="flex pb-4 shadow-sm justify-between items-center">
+      <div className="flex pb-4 justify-between items-center">
+        <Button
+          disabled={store.currentDB === undefined}
+          colorScheme={"primary"}
+          onClick={() => {
+            setCurrentData({});
+          }}
+        >
+          <AddIcon color="white" className="mr-2" />
+          新增记录
+        </Button>
         <form
           onSubmit={(event) => {
             event?.preventDefault();
@@ -93,17 +103,6 @@ export default function DataPannel() {
             </HStack>
           </div>
         </form>
-        <Button
-          disabled={store.currentDB === undefined}
-          colorScheme={"primary"}
-          size="sm"
-          onClick={() => {
-            setCurrentData({});
-          }}
-        >
-          <AddIcon color="white" className="mr-2" />
-          新增记录
-        </Button>
         <Pagination
           values={getPageInfo(entryDataQuery.data as any)}
           onChange={(values) => {

diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+import { AddIcon } from "@chakra-ui/icons";
 import { useState } from "react";
 import { Input } from "@chakra-ui/react";
 
@@ -15,7 +17,7 @@ import useDBMStore from "../store";
 
 export default function CollectionListPanel() {
   const store = useDBMStore((store) => store);
-
+  const { t } = useTranslation();
   const collectionListQuery = useCollectionListQuery({
     onSuccess: (data) => {
       if (data.data.length > 0) {
@@ -30,7 +32,16 @@ export default function CollectionListPanel() {
 
   return (
     <LeftPanel>
-      <Panel title="集合列表" actions={[<CreateCollectionModal key={"create_database"} />]}>
+      <Panel
+        title="集合列表"
+        actions={[
+          <CreateCollectionModal key={"create_database"}>
+            <IconWrap tooltip={t("CollectionPanel.CollectionAdd").toString()} size={20}>
+              <AddIcon fontSize={10} />
+            </IconWrap>
+          </CreateCollectionModal>,
+        ]}
+      >
         <div className="flex items-center m-2 mr-0 mb-3">
           <Input
             size="sm"

diff --git a/web/src/pages/app/database/mods/CreateCollectionModal/index.tsx b/web/src/pages/app/database/mods/CreateCollectionModal/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { AddIcon } from "@chakra-ui/icons";
 import {
   Button,
   FormControl,
@@ -19,15 +18,13 @@ import {
   VStack,
 } from "@chakra-ui/react";
 
-import IconWrap from "@/components/IconWrap";
-
 import { useCreateDBMutation } from "../../service";
 
-const CreateCollectionModal = (props: { collection?: any }) => {
+const CreateCollectionModal = (props: { collection?: any; children: React.ReactElement }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
 
-  const { collection } = props;
+  const { collection, children } = props;
 
   const isEdit = !!collection;
 
@@ -53,21 +50,17 @@ const CreateCollectionModal = (props: { collection?: any }) => {
 
   return (
     <>
-      <IconWrap
-        size={20}
-        onClick={() => {
+      {React.cloneElement(children, {
+        onClick: () => {
           onOpen();
           reset({});
           setTimeout(() => setFocus("name"), 0);
-        }}
-      >
-        <AddIcon fontSize={10} />
-      </IconWrap>
-
+        },
+      })}
       <Modal isOpen={isOpen} onClose={onClose} size="xl">
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>添加集合</ModalHeader>
+          <ModalHeader>{t("CollectionPanel.CollectionAdd")}</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={6}>
             <VStack spacing={6} align="flex-start">

diff --git a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { DeleteIcon } from "@chakra-ui/icons";
 import {
   Button,
@@ -22,7 +22,7 @@ import { useDeleteDBMutation } from "../../service";
 
 function DeleteCollectionModal(props: { database: any }) {
   const { database } = props;
-
+  const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const deleteDBMutation = useDeleteDBMutation({
@@ -63,13 +63,13 @@ function DeleteCollectionModal(props: { database: any }) {
           <ModalCloseButton />
           <ModalBody pb={6}>
             <p className="mb-2">
-              This action cannot be undone. This will permanently delete the{" "}
+              当前操作将永久删除集合
               <span className=" text-black mr-1 font-bold">{database.name}</span>
-              storage,
+              ,无法撤销。
             </p>
             <p className="mb-4">
-              Please type <span className=" text-red-500 mr-1 font-bold">{database.name}</span> to
-              confirm.
+              请输入集合名称 <span className=" text-red-500 mr-1 font-bold">{database.name}</span>
+              进行确定。
             </p>
             <FormControl>
               <Input
@@ -86,7 +86,7 @@ function DeleteCollectionModal(props: { database: any }) {
 
           <ModalFooter>
             <Button mr={3} onClick={onClose}>
-              Cancel
+              {t("Common.Dialog.Cancel")}
             </Button>
             <Button
               colorScheme="red"
@@ -96,7 +96,7 @@ function DeleteCollectionModal(props: { database: any }) {
                 }
               })}
             >
-              Confirm
+              {t("Common.Dialog.Confirm")}
             </Button>
           </ModalFooter>
         </ModalContent>

diff --git a/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx b/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx
@@ -161,6 +161,7 @@ const AddDepenceModal = () => {
         {(list || []).map((packageItem: TDependenceItem) => {
           return (
             <DepenceList.Item
+              style={{ minHeight: "45px" }}
               isActive={false}
               key={packageItem.package.name}
               className="group"

diff --git a/web/src/pages/app/storages/index.tsx b/web/src/pages/app/storages/index.tsx
@@ -2,16 +2,31 @@
  * cloud functions storage page
  ***************************/
 
-import React from "react";
+import { AddIcon } from "@chakra-ui/icons";
+import { Button } from "@chakra-ui/react";
 
+import CreateBucketModal from "./mods/CreateBucketModal";
 import FileList from "./mods/FileList";
 import StorageListPanel from "./mods/StorageListPanel";
 
+import useStorageStore from "./store";
+
 export default function StoragePage() {
+  const { currentStorage } = useStorageStore();
   return (
     <>
       <StorageListPanel />
-      <FileList />
+      {currentStorage === undefined ? (
+        <div className="h-full flex items-center  justify-center">
+          <CreateBucketModal>
+            <Button size="lg" variant="ghost" leftIcon={<AddIcon />}>
+              创建 Bucket
+            </Button>
+          </CreateBucketModal>
+        </div>
+      ) : (
+        <FileList />
+      )}
     </>
   );
 }