From ab11ad59dc295538ea857518edbb4b55527c44dc Mon Sep 17 00:00:00 2001
From: heheer <71265218+newfish-cmyk@users.noreply.github.com>
Date: Sun, 7 Apr 2024 11:10:20 +0800
Subject: [PATCH] fix(web): add database policy add modal back (#1939)

---
 .../app/database/PolicyDataList/index.tsx     | 22 +++++++++++++++++--
 .../app/database/PolicyListPanel/index.tsx    | 14 +++++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/app/database/PolicyDataList/index.tsx b/web/src/pages/app/database/PolicyDataList/index.tsx
index 96dcdbe50b..4d6f3f7dcf 100644
--- a/web/src/pages/app/database/PolicyDataList/index.tsx
+++ b/web/src/pages/app/database/PolicyDataList/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { Center, Input, Spinner, Text, useColorMode } from "@chakra-ui/react";
+import { AddIcon } from "@chakra-ui/icons";
+import { Button, Center, Input, Spinner, Text, useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 import { t } from "i18next";
 
@@ -13,6 +14,7 @@ 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";
@@ -85,7 +87,23 @@ export default function PolicyDataList() {
   return (
     <>
       <Panel.Header className="h-[60px] w-full flex-shrink-0 pr-2">
-        <span className="flex w-full justify-end">
+        <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>
           {t("CollectionPanel.RulesNum")} : {rulesListQuery?.data?.data?.length || 0}
         </span>
       </Panel.Header>
diff --git a/web/src/pages/app/database/PolicyListPanel/index.tsx b/web/src/pages/app/database/PolicyListPanel/index.tsx
index ae4c3b07fb..acaeb19e57 100644
--- a/web/src/pages/app/database/PolicyListPanel/index.tsx
+++ b/web/src/pages/app/database/PolicyListPanel/index.tsx
@@ -2,6 +2,7 @@
  * 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";
 
@@ -10,10 +11,12 @@ 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 } from "../service";
 import useDBMStore from "../store";
 export default function PolicyListPanel(props: { policyList: any }) {
@@ -30,7 +33,16 @@ export default function PolicyListPanel(props: { policyList: any }) {
         store.setCurrentShow("Policy");
       }}
     >
-      <Panel.Header title={t("CollectionPanel.Policy").toString()} actions={[<></>]} />
+      <Panel.Header
+        title={t("CollectionPanel.Policy").toString()}
+        actions={[
+          <AddPolicyModal key="AddPolicyModal">
+            <IconWrap tooltip={t("CollectionPanel.AddPolicy").toString()} size={20}>
+              <AddIcon fontSize={10} />
+            </IconWrap>
+          </AddPolicyModal>,
+        ]}
+      />
       <div style={{ flexGrow: 1, overflowY: "auto", overflowX: "hidden" }}>
         {policyList?.data?.length ? (
           <SectionList>