feat(web): fix database & storage bug

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

@@ -19,6 +19,9 @@
     "Deploy": "发布",
     "EmptyText": "请先选择函数"
   },
+  "CollectionPanel": {
+    "CollectionAdd": "添加集合"
+  },
   "Message": {
     "DeploySuccess": "发布成功"
   },

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,
       })}

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];
   };
 

web/src/pages/app/database/CollectionDataList/index.tsx

@@ -1,12 +1,15 @@
 import { 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 store = useDBMStore((state) => state);
   return (
     <RightPanel>
       <Tabs className="h-full">
@@ -17,7 +20,13 @@ 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 showText={true} />
+              </div>
+            ) : (
+              <DataPannel />
+            )}
           </TabPanel>
           {/* <TabPanel>
             <IndexPannel />

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) => {

web/src/pages/app/database/mods/CreateCollectionModal/index.tsx

@@ -23,11 +23,11 @@ import IconWrap from "@/components/IconWrap";
 
 import { useCreateDBMutation } from "../../service";
 
-const CreateCollectionModal = (props: { collection?: any }) => {
+const CreateCollectionModal = (props: { collection?: any; showText?: boolean }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
 
-  const { collection } = props;
+  const { collection, showText } = props;
 
   const isEdit = !!collection;
 
@@ -53,21 +53,37 @@ const CreateCollectionModal = (props: { collection?: any }) => {
 
   return (
     <>
-      <IconWrap
-        size={20}
-        onClick={() => {
-          onOpen();
-          reset({});
-          setTimeout(() => setFocus("name"), 0);
-        }}
-      >
-        <AddIcon fontSize={10} />
-      </IconWrap>
+      {showText ? (
+        <Button
+          size="lg"
+          variant="ghost"
+          leftIcon={<AddIcon />}
+          onClick={() => {
+            onOpen();
+            reset({});
+            setTimeout(() => setFocus("name"), 0);
+          }}
+        >
+          {t("CollectionPanel.CollectionAdd")}
+        </Button>
+      ) : (
+        <IconWrap
+          tooltip={t("CollectionPanel.CollectionAdd").toString()}
+          size={20}
+          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">

web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx

@@ -1,5 +1,6 @@
 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 +23,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 +64,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 +87,7 @@ function DeleteCollectionModal(props: { database: any }) {
 
           <ModalFooter>
             <Button mr={3} onClick={onClose}>
-              Cancel
+              {t("Common.Dialog.Cancel")}
             </Button>
             <Button
               colorScheme="red"
@@ -96,7 +97,7 @@ function DeleteCollectionModal(props: { database: any }) {
                 }
               })}
             >
-              Confirm
+              {t("Common.Dialog.Confirm")}
             </Button>
           </ModalFooter>
         </ModalContent>

web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx

@@ -156,6 +156,7 @@ const AddDepenceModal = () => {
         {(list || []).map((packageItem: TDependenceItem) => {
           return (
             <DepenceList.Item
+              style={{ minHeight: "45px" }}
               isActive={false}
               key={packageItem.package.name}
               className="group"

web/src/pages/app/storages/index.tsx

@@ -4,14 +4,24 @@
 
 import React from "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 showText={true} />
+        </div>
+      ) : (
+        <FileList />
+      )}
     </>
   );
 }

web/src/pages/app/storages/mods/CreateBucketModal/index.tsx

@@ -29,13 +29,12 @@ import useStorageStore from "../../store";
 import { TBucket } from "@/apis/typing";
 import useGlobalStore from "@/pages/globalStore";
 
-function CreateBucketModal(props: { storage?: TBucket }) {
+function CreateBucketModal(props: { storage?: TBucket; showText?: boolean }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
   const store = useStorageStore((store) => store);
 
-  const { storage } = props;
-
+  const { storage, showText } = props;
   const bucketCreateMutation = useBucketCreateMutation();
   const bucketUpdateMutation = useBucketUpdateMutation();
 
@@ -84,20 +83,36 @@ function CreateBucketModal(props: { storage?: TBucket }) {
 
   return (
     <>
-      <IconWrap
-        size={20}
-        onClick={() => {
-          onOpen();
-          reset(defaultValues);
-          setTimeout(() => {
-            setFocus("shortName");
-          }, 0);
-        }}
-        tooltip={isEdit ? "编辑 Bucket" : "创建 Bucket"}
-      >
-        {isEdit ? <EditIcon fontSize={13} /> : <AddIcon fontSize={10} />}
-      </IconWrap>
-
+      {showText ? (
+        <Button
+          size="lg"
+          variant="ghost"
+          leftIcon={<AddIcon />}
+          onClick={() => {
+            onOpen();
+            reset(defaultValues);
+            setTimeout(() => {
+              setFocus("shortName");
+            }, 0);
+          }}
+        >
+          创建 Bucket
+        </Button>
+      ) : (
+        <IconWrap
+          size={20}
+          onClick={() => {
+            onOpen();
+            reset(defaultValues);
+            setTimeout(() => {
+              setFocus("shortName");
+            }, 0);
+          }}
+          tooltip={isEdit ? "编辑 Bucket" : "创建 Bucket"}
+        >
+          {isEdit ? <EditIcon fontSize={13} /> : <AddIcon fontSize={10} />}
+        </IconWrap>
+      )}
       <Modal isOpen={isOpen} onClose={onClose} size="lg">
         <ModalOverlay />
         <ModalContent>
@@ -106,7 +121,7 @@ function CreateBucketModal(props: { storage?: TBucket }) {
 
           <ModalBody pb={6}>
             <VStack spacing={6} align="flex-start">
-              <FormControl>
+              <FormControl isRequired>
                 <FormLabel htmlFor="shortName">Bucket名称</FormLabel>
                 <Input
                   {...register("shortName", { required: true })}
@@ -124,12 +139,30 @@ function CreateBucketModal(props: { storage?: TBucket }) {
                 </Select>
               </FormControl>
 
-              <FormControl>
-                <FormLabel htmlFor="storage">容量</FormLabel>
+              <FormControl isRequired>
+                <FormLabel htmlFor="storage">
+                  容量（最大容量
+                  {defaultValues.storage
+                    ? store.maxStorage + defaultValues.storage
+                    : store.maxStorage}
+                  GB）
+                </FormLabel>
                 <InputGroup>
                   <Input
-                    {...register("storage", { required: true })}
+                    {...register("storage", {
+                      required: true,
+                      max: defaultValues.storage
+                        ? store.maxStorage + defaultValues.storage
+                        : store.maxStorage,
+                      min: 0,
+                    })}
                     type="number"
+                    min="0"
+                    max={
+                      defaultValues.storage
+                        ? store.maxStorage + defaultValues.storage
+                        : store.maxStorage
+                    }
                     variant="filled"
                     className="w-1"
                   />
@@ -143,7 +176,16 @@ function CreateBucketModal(props: { storage?: TBucket }) {
             <Button mr={3} onClick={onClose}>
               {t("Common.Dialog.Cancel")}
             </Button>
-            <Button colorScheme="primary" type="submit" onClick={handleSubmit(onSubmit)}>
+            <Button
+              disabled={
+                (defaultValues.storage
+                  ? store.maxStorage + defaultValues.storage
+                  : store.maxStorage) === 0
+              }
+              colorScheme="blue"
+              type="submit"
+              onClick={handleSubmit(onSubmit)}
+            >
               {t("Common.Dialog.Confirm")}
             </Button>
           </ModalFooter>