feat(web): fix home page & function page bugs (#735)

labring · Feb 6, 2023 · f468748 · f468748
1 parent cd5336d
commit f468748
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 95 deletions.
diff --git a/web/src/components/InputTag/index.tsx b/web/src/components/InputTag/index.tsx
@@ -7,8 +7,8 @@ export default function InputTag(props: { value: string[]; onChange: (value: str
   const handleEnter = (e: any) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      const input = inputV.trim();
-      if (input.trim() !== "" && !value.some((x) => x === input)) {
+      const input = inputV.trim().slice(0, 16);
+      if (input !== "" && !value.some((x) => x === input)) {
         onChange([...value, input]);
       }
       setInputV("");
@@ -20,7 +20,7 @@ export default function InputTag(props: { value: string[]; onChange: (value: str
   return (
     <>
       <Input
-        placeholder=" 按「回车键」或「空格键」分隔"
+        placeholder=" 按「回车键」或「空格键」分隔标签，每个标签最多由16个字符组成"
         className="mb-2"
         value={inputV}
         onKeyDown={(e) => handleEnter(e)}

diff --git a/web/src/pages/app/database/mods/AddRulesModal/index.tsx b/web/src/pages/app/database/mods/AddRulesModal/index.tsx
@@ -104,6 +104,7 @@ const AddRulesModal = (props: { onSuccessSubmit: (data: any) => void }) => {
                   {...register("collectionName", {
                     required: "collectionName is required",
                   })}
+                  placeholder={collectionListQuery?.data?.data?.length ? undefined : "暂无可选集合"}
                   id="collectionName"
                   variant="filled"
                 >

diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
@@ -122,7 +122,7 @@ export default function DebugPanel() {
                     variant="filled"
                     size="sm"
                     value={runningMethod}
-                    disabled={getFunctionUrl() === ""}
+                    disabled={getFunctionUrl() === "" || !currentFunction.methods?.length}
                     onChange={(e) => {
                       setRunningMethod(e.target.value as TMethod);
                     }}

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx
@@ -159,9 +159,6 @@ const CreateModal = (props: { functionItem?: any; children?: React.ReactElement
                         })}
                       </CheckboxGroup>
                     )}
-                    rules={{
-                      required: { value: true, message: "Please select at least one" },
-                    }}
                   />
                 </HStack>
                 <FormErrorMessage>{errors.methods?.message}</FormErrorMessage>

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -163,21 +163,23 @@ export default function FunctionList() {
             />
           </InputGroup>
         </PopoverTrigger>
-        <PopoverContent borderColor="lafWhite.100" width="260px" padding="4px">
-          <PopoverBody>
-            <p className="text-grayModern-500 pb-4"> {t("FunctionPanel.Tags")}</p>
-            {tagsList.map((item) => (
-              <Tag
-                className="mr-2 mb-2 cursor-pointer"
-                key={item.tagName}
-                variant={item.selected ? "inputTagActive" : "inputTag"}
-                onClick={() => handleClick(item.tagName, !item.selected)}
-              >
-                <TagLabel>{item.tagName}</TagLabel>
-              </Tag>
-            ))}
-          </PopoverBody>
-        </PopoverContent>
+        {tagsList.length > 0 ? (
+          <PopoverContent borderColor="lafWhite.100" width="260px" padding="4px">
+            <PopoverBody>
+              <p className="text-grayModern-500 pb-4"> {t("FunctionPanel.Tags")}</p>
+              {tagsList.map((item) => (
+                <Tag
+                  className="mr-2 mb-2 cursor-pointer"
+                  key={item.tagName}
+                  variant={item.selected ? "inputTagActive" : "inputTag"}
+                  onClick={() => handleClick(item.tagName, !item.selected)}
+                >
+                  <TagLabel>{item.tagName}</TagLabel>
+                </Tag>
+              ))}
+            </PopoverBody>
+          </PopoverContent>
+        ) : null}
       </Popover>
       {renderSelectedTags()}
       <SectionList className="flex-grow" style={{ overflowY: "auto" }}>

diff --git a/web/src/pages/app/storages/mods/FileList/index.tsx b/web/src/pages/app/storages/mods/FileList/index.tsx
@@ -1,18 +1,18 @@
 import { DeleteIcon, ViewIcon } from "@chakra-ui/icons";
-import { HStack, Input, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
+import { HStack, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
 
 import ConfirmButton from "@/components/ConfirmButton";
-import CopyText from "@/components/CopyText";
+// import CopyText from "@/components/CopyText";
 import FileTypeIcon from "@/components/FileTypeIcon";
 import IconWrap from "@/components/IconWrap";
 import Panel from "@/components/Panel";
 import { formatDate, formateType, formatSize } from "@/utils/format";
 
 import useStorageStore, { TFile } from "../../store";
 import CreateFolderModal from "../CreateFolderModal";
-import CreateWebsiteModal from "../CreateWebsiteModal";
+// import CreateWebsiteModal from "../CreateWebsiteModal";
 import PathLink from "../PathLink";
 import UploadButton from "../UploadButton";
 
@@ -63,12 +63,12 @@ export default function FileList() {
             <UploadButton onUploadSuccess={() => query.refetch()} />
             <CreateFolderModal onCreateSuccess={() => query.refetch()} />
           </HStack>
-          <HStack spacing={4}>
+          {/* <HStack spacing={4}>
             <CreateWebsiteModal onCreateSuccess={() => query.refetch()} />
             <CopyText text={""}>
               <Input minW={"200px"} size="sm" readOnly value={""} />
             </CopyText>
-          </HStack>
+          </HStack> */}
         </Panel.Header>
       </Panel>
       <Panel className="flex-grow overflow-hidden">

diff --git a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
@@ -35,7 +35,7 @@ export default function StorageListPanel() {
   return (
     <Panel className="h-full">
       <Panel.Header
-        title={t("StoragePanel.Storage")}
+        title={t("StoragePanel.StorageList")}
         actions={[
           <CreateBucketModal key="create_modal">
             <IconWrap size={20} tooltip={t("Create") + " Bucket"}>

diff --git a/web/src/pages/home/index.tsx b/web/src/pages/home/index.tsx
@@ -33,7 +33,10 @@ function HomePage() {
   return (appListQuery.data?.data || []).length === 0 ? (
     <Empty />
   ) : (
-    <div className="w-8/12 mt-10 mx-auto">
+    <div
+      className="w-8/12 mt-10 mx-auto overflow-hidden flex flex-col"
+      style={{ height: "calc(100vh - 150px)" }}
+    >
       <List appListQuery={appListQuery} />
     </div>
   );

diff --git a/web/src/pages/home/mods/CreateAppModal/index.tsx b/web/src/pages/home/mods/CreateAppModal/index.tsx
@@ -48,6 +48,7 @@ const CreateAppModal = (props: { application?: any; children: React.ReactElement
     name: application.name,
     state: application.state || APP_STATUS.Running,
     region: application.regionName || regions[0].name,
+    bundleName: application.bundleName,
     runtimeName: runtimes[0].name,
   };
 
@@ -73,7 +74,7 @@ const CreateAppModal = (props: { application?: any; children: React.ReactElement
   const onSubmit = async (data: any) => {
     let res: any = {};
     if (isEdit) {
-      res = await updateAppMutation.mutateAsync(data);
+      res = await updateAppMutation.mutateAsync({ ...data, appid: application.appid });
     } else {
       res = await appCreateMutation.mutateAsync(data);
     }

diff --git a/web/src/pages/home/mods/Empty/index.tsx b/web/src/pages/home/mods/Empty/index.tsx
@@ -25,7 +25,8 @@ function Empty() {
     <div style={{ height: "75vh", minHeight: "500px" }}>
       <div className="flex flex-col items-center justify-center h-full">
         <h2 className="text-3xl font-bold">
-          {t("HomePanel.Hello")} 👋 ， {userInfo?.profile.name} ， {t("HomePanel.Welcome")}
+          {t("HomePanel.Hello")} 👋 ， {userInfo?.profile?.name || userInfo?.username} ，{" "}
+          {t("HomePanel.Welcome")}
         </h2>
         <p className="mt-10 text-xl w-[460px] mx-auto mb-8">{t("HomePanel.Introduction")}</p>
         <div className="grid grid-cols-3 w-[722px]">

diff --git a/web/src/pages/home/mods/List/index.tsx b/web/src/pages/home/mods/List/index.tsx
@@ -76,78 +76,80 @@ function List(props: { appListQuery: any }) {
         </div>
       </div>
 
-      <div>
-        <div className="flex bg-lafWhite-200 rounded-lg h-12 items-center px-6 mb-3">
+      <div className="flex flex-col overflow-auto">
+        <div className="flex-none flex bg-lafWhite-200 rounded-lg h-12 items-center px-6 mb-3">
           <div className="w-2/12 text-second ">{t("HomePanel.Application") + t("Name")}</div>
           <div className="w-2/12 text-second ">App ID</div>
           <div className="w-2/12 text-second pl-2">{t("HomePanel.State")}</div>
           <div className="w-2/12 text-second ">{t("HomePanel.Region")}</div>
           <div className="w-3/12 text-second ">{t("CreateTime")}</div>
           <div className="w-1/12 text-second pl-2 min-w-[100px]">{t("Operation")}</div>
         </div>
-        {(appListQuery.data?.data || [])
-          .filter((item: any) => item?.name.indexOf(searchKey) >= 0)
-          .map((item: any) => {
-            return (
-              <div
-                key={item?.appid}
-                className="flex bg-lafWhite-200 rounded-lg h-16 items-center px-6 mb-3"
-              >
-                <div className="w-2/12 font-bold text-lg">{item?.name}</div>
-                <div className="w-2/12 ">{item?.appid}</div>
-                <div className="w-2/12 ">
-                  <StatusBadge statusConditions={item?.phase} />
+        <div className="flex-grow overflow-auto">
+          {(appListQuery.data?.data || [])
+            .filter((item: any) => item?.name.indexOf(searchKey) >= 0)
+            .map((item: any) => {
+              return (
+                <div
+                  key={item?.appid}
+                  className="flex bg-lafWhite-200 rounded-lg h-16 items-center px-6 mb-3"
+                >
+                  <div className="w-2/12 font-bold text-lg">{item?.name}</div>
+                  <div className="w-2/12 ">{item?.appid}</div>
+                  <div className="w-2/12 ">
+                    <StatusBadge statusConditions={item?.phase} />
+                  </div>
+                  <div className="w-2/12 ">{item.regionName}</div>
+                  <div className="w-3/12 ">{formatDate(item.createdAt)}</div>
+                  <div className="w-1/12 flex min-w-[100px]">
+                    <Button
+                      className="mr-2"
+                      fontWeight={"semibold"}
+                      size={"sm"}
+                      variant={"text"}
+                      onClick={(event) => {
+                        event?.preventDefault();
+                        setCurrentApp(item?.appid);
+                        navigate(`/app/${item?.appid}/${Pages.function}`);
+                      }}
+                    >
+                      <RiCodeBoxFill size={20} className="mr-2" />
+                      {t("HomePanel.Develop")}
+                    </Button>
+                    <Menu>
+                      <MenuButton>
+                        <IconWrap>
+                          <BsThreeDotsVertical size={16} />
+                        </IconWrap>
+                      </MenuButton>
+                      <MenuList width={12} minW={24}>
+                        <MenuItem minH="40px" display={"block"}>
+                          <CreateAppModal application={item}>
+                            <a className="text-primary block " href="/edit">
+                              {t("Edit")}
+                            </a>
+                          </CreateAppModal>
+                        </MenuItem>
+                        <MenuItem minH="40px" display={"block"}>
+                          <ConfirmButton
+                            headerText={t("HomePanel.DeleteApp")}
+                            bodyText={t("HomePanel.DeleteTip")}
+                            onSuccessAction={() => {
+                              deleteAppMutation.mutate({ appid: item?.appid });
+                            }}
+                          >
+                            <a className="text-danger block" href="/delete">
+                              {t("Delete")}
+                            </a>
+                          </ConfirmButton>
+                        </MenuItem>
+                      </MenuList>
+                    </Menu>
+                  </div>
                 </div>
-                <div className="w-2/12 ">{item.regionName}</div>
-                <div className="w-3/12 ">{formatDate(item.createdAt)}</div>
-                <div className="w-1/12 flex min-w-[100px]">
-                  <Button
-                    className="mr-2"
-                    fontWeight={"semibold"}
-                    size={"sm"}
-                    variant={"text"}
-                    onClick={(event) => {
-                      event?.preventDefault();
-                      setCurrentApp(item?.appid);
-                      navigate(`/app/${item?.appid}/${Pages.function}`);
-                    }}
-                  >
-                    <RiCodeBoxFill size={20} className="mr-2" />
-                    {t("HomePanel.Develop")}
-                  </Button>
-                  <Menu>
-                    <MenuButton>
-                      <IconWrap>
-                        <BsThreeDotsVertical size={16} />
-                      </IconWrap>
-                    </MenuButton>
-                    <MenuList width={12} minW={24}>
-                      <MenuItem minH="40px" display={"block"}>
-                        <CreateAppModal application={item}>
-                          <a className="text-primary block " href="/edit">
-                            {t("Edit")}
-                          </a>
-                        </CreateAppModal>
-                      </MenuItem>
-                      <MenuItem minH="40px" display={"block"}>
-                        <ConfirmButton
-                          headerText={t("HomePanel.DeleteApp")}
-                          bodyText={t("HomePanel.DeleteTip")}
-                          onSuccessAction={() => {
-                            deleteAppMutation.mutate({ appid: item?.appid });
-                          }}
-                        >
-                          <a className="text-danger block" href="/delete">
-                            {t("Delete")}
-                          </a>
-                        </ConfirmButton>
-                      </MenuItem>
-                    </MenuList>
-                  </Menu>
-                </div>
-              </div>
-            );
-          })}
+              );
+            })}
+        </div>
       </div>
     </>
   );