feat(web): add i18n language switch, refact loading state (#777)

* feat(web): add i18n language switch * refactor(web): confirm button add loading state * fix(web): empty view
labring · Feb 14, 2023 · 2de068b · 2de068b
1 parent 4b575c8
commit 2de068b
Show file tree

Hide file tree

Showing 25 changed files with 177 additions and 98 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -70,7 +70,7 @@
   "FunctionPanel": {
     "AddFunction": "Add Function",
     "Code": "Function Template",
-    "ConfirmDeploy": "Confirm Release",
+    "ConfirmDeploy": "Confirm Deploy",
     "CustomDependence": "Custom",
     "CustomDependenceTip": "No custom dependencies yet",
     "Debug": "Run",
@@ -203,5 +203,6 @@
   "RefreshData": "Refresh",
   "EditTip": "modified, unpublished",
   "NoInfo": "No information",
-  "RefreshDataSuccess": "data refreshed"
+  "RefreshDataSuccess": "data refreshed",
+  "Language": "Language"
 }
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -203,5 +203,6 @@
   "Refresh": "刷新",
   "RefreshData": "刷新数据",
   "NoInfo": "暂无信息",
-  "RefreshDataSuccess": "数据刷新成功"
-}
+  "RefreshDataSuccess": "数据刷新成功",
+  "Language": "语言"
+}
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -203,5 +203,6 @@
   "RefreshData": "刷新数据",
   "EditTip": "已修改,未发布",
   "NoInfo": "暂无信息",
-  "RefreshDataSuccess": "数据刷新成功"
-}
+  "RefreshDataSuccess": "数据刷新成功",
+  "Language": "语言"
+}
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { BrowserRouter, useRoutes } from "react-router-dom";
 import { ChakraProvider } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -27,6 +28,8 @@ const queryClient = new QueryClient({
 });
 
 function APP() {
+  useTranslation();
+
   return (
     <>
       <QueryClientProvider client={queryClient}>

diff --git a/web/src/components/IconText/index.tsx b/web/src/components/IconText/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function IconText(props: {
+  icon: React.ReactElement;
+  text: string;
+  onClick?: () => void;
+}) {
+  return (
+    <div
+      onClick={props.onClick}
+      className="text-grayIron-600 flex flex-col items-center hover:text-black"
+    >
+      {React.cloneElement(props.icon, {
+        height: "20px",
+      })}
+      {props.text}
+    </div>
+  );
+}
diff --git a/web/src/layouts/Header/UserSetting/index.tsx b/web/src/layouts/Header/UserSetting/index.tsx
@@ -3,6 +3,7 @@ import { t } from "i18next";
 
 import SettingModal from "@/pages/app/setting";
 import PATList from "@/pages/app/setting/PATList";
+import ProfileSetting from "@/pages/app/setting/Profile";
 export default function UserSetting(props: { name: string; avatar?: string; width: string }) {
   return (
     <Menu>
@@ -20,6 +21,11 @@ export default function UserSetting(props: { name: string; avatar?: string; widt
         <SettingModal
           headerTitle={t("SettingPanel.UserSetting")}
           tabMatch={[
+            {
+              key: "user-profile",
+              name: "Profile",
+              component: <ProfileSetting />,
+            },
             {
               key: "pat",
               name: "Personal Access Token",

diff --git a/web/src/pages/app/database/CollectionDataList/index.tsx b/web/src/pages/app/database/CollectionDataList/index.tsx
@@ -1,5 +1,31 @@
+import { useTranslation } from "react-i18next";
+
+import EmptyBox from "@/components/EmptyBox";
+
+import CreateCollectionModal from "../mods/CreateCollectionModal";
+import useDBMStore from "../store";
+
 import DataPanel from "./mods/DataPanel";
 
 export default function CollectionDataList() {
-  return <DataPanel />;
+  const { t } = useTranslation();
+  const store = useDBMStore((state) => state);
+  return (
+    <>
+      {store.currentDB === undefined ? (
+        <EmptyBox>
+          <div>
+            {t("CollectionPanel.EmptyCollectionText")}
+            <CreateCollectionModal>
+              <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
+                {t("CreateNow")}
+              </span>
+            </CreateCollectionModal>
+          </div>
+        </EmptyBox>
+      ) : (
+        <DataPanel />
+      )}
+    </>
+  );
 }
diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
@@ -7,6 +7,7 @@ import { Center, Input, InputGroup, InputLeftElement, Spinner } from "@chakra-ui
 import CopyText from "@/components/CopyText";
 import EmptyBox from "@/components/EmptyBox";
 import FileTypeIcon from "@/components/FileTypeIcon";
+import IconText from "@/components/IconText";
 import IconWrap from "@/components/IconWrap";
 import MoreButton from "@/components/MoreButton";
 import Panel from "@/components/Panel";
@@ -104,12 +105,7 @@ export default function CollectionListPanel() {
                       >
                         <>
                           <CopyText hideToolTip text={db.name} tip="名称复制成功">
-                            <div>
-                              <div className="text-grayModern-900 w-[20px] h-[20px] text-center">
-                                <CopyIcon />
-                              </div>
-                              <div className="text-grayIron-600">{t("Copy")}</div>
-                            </div>
+                            <IconText icon={<CopyIcon />} text={t("Copy")} />
                           </CopyText>
                           <DeleteCollectionModal database={db} />
                         </>

diff --git a/web/src/pages/app/database/PolicyDataList/index.tsx b/web/src/pages/app/database/PolicyDataList/index.tsx
@@ -10,6 +10,7 @@ import EmptyBox from "@/components/EmptyBox";
 import IconWrap from "@/components/IconWrap";
 import Panel from "@/components/Panel";
 
+import AddPolicyModal from "../mods/AddPolicyModal";
 import AddRulesModal from "../mods/AddRulesModal";
 import policyTemplate from "../mods/AddRulesModal/policyTemplate";
 import RightPanelEditBox from "../RightComponent/EditBox";
@@ -60,6 +61,23 @@ export default function PolicyDataList() {
     }
   };
 
+  if (store.currentPolicy === undefined) {
+    return (
+      <Center className="h-full">
+        <EmptyBox>
+          <div>
+            {t("CollectionPanel.EmptyPolicyText")}
+            <AddPolicyModal>
+              <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
+                {t("CreateNow")}
+              </span>
+            </AddPolicyModal>
+          </div>
+        </EmptyBox>
+      </Center>
+    );
+  }
+
   return (
     <>
       <Panel.Header className="w-full pr-2 h-[60px] flex-shrink-0">

diff --git a/web/src/pages/app/database/PolicyListPanel/index.tsx b/web/src/pages/app/database/PolicyListPanel/index.tsx
@@ -7,6 +7,7 @@ import { t } from "i18next";
 import ConfirmButton from "@/components/ConfirmButton";
 import EmptyBox from "@/components/EmptyBox";
 import FileTypeIcon from "@/components/FileTypeIcon";
+import IconText from "@/components/IconText";
 import IconWrap from "@/components/IconWrap";
 import MoreButton from "@/components/MoreButton";
 import Panel from "@/components/Panel";
@@ -65,27 +66,14 @@ export default function PolicyListPanel() {
                       }
                     >
                       <>
-                        {/* <AddPolicyModal key="AddPolicyModal" isEdit defaultData={item}>
-                          <div className="text-grayIron-600">
-                            <div className="text-grayModern-900 w-[20px] h-[20px] text-center">
-                              <EditIcon />
-                            </div>
-                            {t("Edit")}
-                          </div>
-                        </AddPolicyModal> */}
                         <ConfirmButton
                           onSuccessAction={async () => {
                             await deletePolicyMutation.mutateAsync(item.name);
                           }}
                           headerText={String(t("Delete"))}
                           bodyText={t("CollectionPanel.ConformDelete")}
                         >
-                          <div className="text-grayIron-600">
-                            <div className="text-grayModern-900 w-[20px] h-[20px] text-center">
-                              <DeleteIcon />
-                            </div>
-                            {t("Delete")}
-                          </div>
+                          <IconText icon={<DeleteIcon />} text={t("Delete")} />
                         </ConfirmButton>
                       </>
                     </MoreButton>

diff --git a/web/src/pages/app/database/index.tsx b/web/src/pages/app/database/index.tsx
@@ -1,15 +1,10 @@
 /****************************
  * cloud functions database page
  ***************************/
-import { Center } from "@chakra-ui/react";
-import { t } from "i18next";
-
 import Content from "@/components/Content";
-import EmptyBox from "@/components/EmptyBox";
 import { Col, Row } from "@/components/Grid";
 import Panel from "@/components/Panel";
 
-import AddPolicyModal from "./mods/AddPolicyModal";
 import BottomPanel from "./BottomPanel";
 import CollectionDataList from "./CollectionDataList";
 import CollectionListPanel from "./CollectionListPanel";
@@ -33,24 +28,7 @@ function DatabasePage() {
         </Col>
         <Col>
           <Panel className="items-center h-full">
-            {store.currentShow === "DB" ? (
-              <CollectionDataList />
-            ) : store.currentPolicy === undefined ? (
-              <Center className="h-full">
-                <EmptyBox>
-                  <div>
-                    {t("CollectionPanel.EmptyPolicyText")}
-                    <AddPolicyModal>
-                      <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
-                        {t("CreateNow")}
-                      </span>
-                    </AddPolicyModal>
-                  </div>
-                </EmptyBox>
-              </Center>
-            ) : (
-              <PolicyDataList />
-            )}
+            {store.currentShow === "DB" ? <CollectionDataList /> : <PolicyDataList />}
           </Panel>
         </Col>
       </Row>

diff --git a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
@@ -16,6 +16,8 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 
+import IconText from "@/components/IconText";
+
 import { useDeleteDBMutation } from "../../service";
 function DeleteCollectionModal(props: { database: any }) {
   const { database } = props;
@@ -39,20 +41,17 @@ function DeleteCollectionModal(props: { database: any }) {
 
   return (
     <>
-      <div
+      <IconText
         onClick={() => {
           reset();
           onOpen();
           setTimeout(() => {
             setFocus("name");
           }, 0);
         }}
-      >
-        <div className="text-grayModern-900 w-[20px] h-[20px] text-center">
-          <DeleteIcon fontSize={12} />
-        </div>
-        <div className="text-grayIron-600">{t("Delete")}</div>
-      </div>
+        icon={<DeleteIcon />}
+        text={t("Delete")}
+      />
 
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
@@ -85,6 +84,7 @@ function DeleteCollectionModal(props: { database: any }) {
 
           <ModalFooter>
             <Button
+              isLoading={deleteDBMutation.isLoading}
               colorScheme="red"
               onClick={handleSubmit(async (data) => {
                 if (data.name === database.name) {

diff --git a/web/src/pages/app/database/service.ts b/web/src/pages/app/database/service.ts
@@ -278,6 +278,7 @@ export const useRulesListQuery = (onSuccess?: (data: any) => void) => {
       onSuccess(data) {
         onSuccess && onSuccess(data);
       },
+      enabled: !!currentPolicy,
     },
   );
 };

diff --git a/web/src/pages/app/functions/mods/BottomPanel/index.tsx b/web/src/pages/app/functions/mods/BottomPanel/index.tsx
@@ -16,7 +16,7 @@ function BottomPanel() {
           variant="plain"
           onClick={() => store.togglePanel("functionPage", "DependencePanel")}
         >
-          NPM {t("FunctionPanel.Dependence")}
+          {t("FunctionPanel.Dependence")}
         </Button>
         <Button
           size="xs"

diff --git a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
@@ -335,6 +335,7 @@ const AddDependenceModal = () => {
             )}
 
             <Button
+              isLoading={editPackageMutation.isLoading || addPackageMutation.isLoading}
               onClick={() => {
                 submitDependence();
               }}

diff --git a/web/src/pages/app/functions/mods/DeployButton/index.tsx b/web/src/pages/app/functions/mods/DeployButton/index.tsx
@@ -15,7 +15,7 @@ import { t } from "i18next";
 import CommonDiffEditor from "@/components/Editor/CommonDiffEditor";
 import { Pages } from "@/constants";
 
-import { useUpdateFunctionMutation } from "../../service";
+import { useFunctionDetailQuery, useUpdateFunctionMutation } from "../../service";
 import useFunctionStore from "../../store";
 
 import useFunctionCache from "@/hooks/useFunctionCache";
@@ -31,6 +31,10 @@ export default function DeployButton() {
 
   const updateFunctionMutation = useUpdateFunctionMutation();
 
+  const functionDetailQuery = useFunctionDetailQuery(store.currentFunction.name, {
+    enabled: isOpen,
+  });
+
   const { displayName } = useHotKey(
     DEFAULT_SHORTCUTS.deploy,
     async () => {
@@ -64,6 +68,7 @@ export default function DeployButton() {
       <Tooltip label={`快捷键: ${displayName.toUpperCase()}，调试可直接点击右侧「运行」按扭`}>
         <Button
           variant={"text"}
+          isLoading={functionDetailQuery.isFetching}
           disabled={store.getFunctionUrl() === ""}
           onClick={() => {
             onOpen();
@@ -73,15 +78,15 @@ export default function DeployButton() {
         </Button>
       </Tooltip>
 
-      {isOpen ? (
+      {isOpen && !functionDetailQuery.isFetching ? (
         <Modal isOpen={isOpen} onClose={onClose} size="6xl" isCentered>
           <ModalOverlay />
           <ModalContent maxW={"80%"}>
             <ModalHeader>Code Diff</ModalHeader>
             <ModalCloseButton />
             <ModalBody borderBottom={"1px"} borderBottomColor="gray.200">
               <CommonDiffEditor
-                original={store.currentFunction?.source?.code}
+                original={functionDetailQuery.data?.data?.source?.code}
                 modified={functionCache.getCache(
                   store.currentFunction?.id,
                   store.currentFunction?.source?.code,