chore(web): hide database policy when no policy (#1766)

Co-authored-by: maslow <[email protected]>

Author: newfish-cmyk

web/public/locales/en/translation.json

@@ -28,7 +28,7 @@
     "EmptyCollectionTip": "You have not created a collection",
     "EmptyDataText": "No data information,",
     "EmptyPolicyTip": "You have not created a policy",
-    "EmptyRuleTip": "This policy has no rules yet,",
+    "EmptyRuleTip": "This policy has no rules",
     "Query": "Please input the MongoDb query statement, press Enter to query. For example: { _id: ObjectId('') }.",
     "Search": "Please enter ID to search",
     "CreateTagTip": "Press \"Enter\" to separate tags, each tag can be up to 16 characters",
@@ -730,4 +730,5 @@
     "Title": "Laf is ready to update!",
     "Description": "Click to update"
   }
-}
+}
+

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

@@ -31,7 +31,7 @@
     "EmptyCollectionTip": "您还没有创建集合",
     "EmptyDataText": "暂无数据信息,",
     "EmptyPolicyTip": "您还没有创建策略",
-    "EmptyRuleTip": "此策略还没有规则,",
+    "EmptyRuleTip": "此策略没有规则",
     "CreateTagTip": "按「回车键」输入标签，每个标签最多由16个字符组成",
     "IndexManage": "索引管理",
     "ConfirmDeleteIndex": "确定删除该索引吗？",

web/public/locales/zh/translation.json

@@ -31,7 +31,7 @@
     "EmptyCollectionTip": "您还没有创建集合",
     "EmptyDataText": "暂无数据信息,",
     "EmptyPolicyTip": "您还没有创建策略",
-    "EmptyRuleTip": "此策略还没有规则,",
+    "EmptyRuleTip": "此策略没有规则",
     "CreateTagTip": "按「回车键」输入标签，每个标签最多由16个字符组成",
     "IndexManage": "索引管理",
     "ConfirmDeleteIndex": "确定删除该索引吗？",
@@ -730,4 +730,4 @@
     "Title": "Laf 新版本已经准备好了！",
     "Description": "点击立即更新"
   }
-}
+}

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

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
-import { AddIcon } from "@chakra-ui/icons";
-import { Button, Center, Input, Spinner, Text, useColorMode } from "@chakra-ui/react";
+import { Center, Input, Spinner, Text, useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 import { t } from "i18next";
 
@@ -14,7 +13,6 @@ import Panel from "@/components/Panel";
 import { COLOR_MODE } from "@/constants";
 
 import AddPolicyModal from "../mods/AddPolicyModal";
-import AddRulesModal from "../mods/AddRulesModal";
 import policyTemplate from "../mods/AddRulesModal/policyTemplate";
 import RightPanelEditBox from "../RightComponent/EditBox";
 import RightPanelList from "../RightComponent/List";
@@ -87,23 +85,7 @@ export default function PolicyDataList() {
   return (
     <>
       <Panel.Header className="h-[60px] w-full flex-shrink-0 pr-2">
-        <AddRulesModal
-          onSuccessSubmit={(data) => {
-            setCurrentData(data);
-            setRecord(JSON.stringify(data?.value, null, 2));
-            rulesListQuery.refetch();
-          }}
-        >
-          <Button
-            disabled={store.currentPolicy === undefined}
-            leftIcon={<AddIcon fontSize={10} className="text-grayModern-500" />}
-            variant="textGhost"
-            size="xs"
-          >
-            {t("CollectionPanel.AddRules")}
-          </Button>
-        </AddRulesModal>
-        <span>
+        <span className="flex w-full justify-end">
           {t("CollectionPanel.RulesNum")} : {rulesListQuery?.data?.data?.length || 0}
         </span>
       </Panel.Header>
@@ -200,17 +182,6 @@ export default function PolicyDataList() {
           <EmptyBox>
             <div>
               <span>{t("CollectionPanel.EmptyRuleTip")}</span>
-              <AddRulesModal
-                onSuccessSubmit={(data) => {
-                  setCurrentData(data);
-                  setRecord(JSON.stringify(data.value, null, 2));
-                  rulesListQuery.refetch();
-                }}
-              >
-                <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
-                  {t("CreateNow")}
-                </span>
-              </AddRulesModal>
             </div>
           </EmptyBox>
         )}

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

@@ -2,7 +2,6 @@
  * cloud functions list sidebar
  ***************************/
 import { useTranslation } from "react-i18next";
-import { AddIcon } from "@chakra-ui/icons";
 import { useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 
@@ -11,47 +10,31 @@ 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";
 import SectionList from "@/components/SectionList";
 
-import AddPolicyModal from "../mods/AddPolicyModal";
-import { useDeletePolicyMutation, usePolicyListQuery } from "../service";
+import { useDeletePolicyMutation } from "../service";
 import useDBMStore from "../store";
-export default function PolicyListPanel() {
+export default function PolicyListPanel(props: { policyList: any }) {
+  const { policyList } = props;
   const { t } = useTranslation();
   const deletePolicyMutation = useDeletePolicyMutation();
   const store = useDBMStore((state) => state);
   const darkMode = useColorMode().colorMode === "dark";
-  const policyQuery = usePolicyListQuery((data) => {
-    if (data.data.length === 0) {
-      store.setCurrentPolicy(undefined);
-    } else if (store.currentPolicy === undefined) {
-      store.setCurrentPolicy(data?.data[0]);
-    }
-  });
+
   return (
     <Panel
       className="min-w-[200px]"
       onClick={() => {
         store.setCurrentShow("Policy");
       }}
     >
-      <Panel.Header
-        title={t("CollectionPanel.Policy").toString()}
-        actions={[
-          <AddPolicyModal key="AddPolicyModal">
-            <IconWrap tooltip={t("CollectionPanel.AddPolicy").toString()} size={20}>
-              <AddIcon fontSize={10} />
-            </IconWrap>
-          </AddPolicyModal>,
-        ]}
-      />
+      <Panel.Header title={t("CollectionPanel.Policy").toString()} actions={[<></>]} />
       <div style={{ flexGrow: 1, overflowY: "auto", overflowX: "hidden" }}>
-        {policyQuery?.data?.data?.length ? (
+        {policyList?.data?.length ? (
           <SectionList>
-            {policyQuery?.data?.data.map((item: any) => {
+            {policyList?.data.map((item: any) => {
               return (
                 <SectionList.Item
                   isActive={

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

@@ -14,6 +14,7 @@ import CollectionDataList from "./CollectionDataList";
 import CollectionListPanel from "./CollectionListPanel";
 import PolicyDataList from "./PolicyDataList";
 import PolicyListPanel from "./PolicyListPanel";
+import { usePolicyListQuery } from "./service";
 
 import useDBMStore from "./store";
 
@@ -22,21 +23,34 @@ function DatabasePage() {
   const containerRef = useRef<HTMLDivElement>(null);
   const store = useDBMStore((state) => state);
   const settingStore = useCustomSettingStore();
+
+  const { data: policyList } = usePolicyListQuery((data) => {
+    if (data.data.length === 0) {
+      store.setCurrentPolicy(undefined);
+    } else if (store.currentPolicy === undefined) {
+      store.setCurrentPolicy(data?.data[0]);
+    }
+  });
+
   return (
     <Content>
       <Row className="flex-grow" ref={containerRef}>
         <Col style={{ width: settingStore.layoutInfo.collectionPage.SideBar.style.width }}>
           <CollectionListPanel />
-          <Resize
-            type="y"
-            pageId="collectionPage"
-            panelId="PolicyPanel"
-            reverse
-            containerRef={containerRef}
-          />
-          <Row {...settingStore.layoutInfo.collectionPage.PolicyPanel}>
-            <PolicyListPanel />
-          </Row>
+          {!!policyList?.data?.length && (
+            <>
+              <Resize
+                type="y"
+                pageId="collectionPage"
+                panelId="PolicyPanel"
+                reverse
+                containerRef={containerRef}
+              />
+              <Row {...settingStore.layoutInfo.collectionPage.PolicyPanel}>
+                <PolicyListPanel policyList={policyList} />
+              </Row>
+            </>
+          )}
         </Col>
         <Resize type="x" pageId="collectionPage" panelId="SideBar" containerRef={containerRef} />
         <Col>