Merge pull request #32 from actiontech/fix/issue-1945

[fix](DataSourceForm): supply tips when user attempt to swtich off auditRequired
actiontech · Oct 27, 2023 · a3dd829 · a3dd829
2 parents fca57ee + 0ce8b5b
commit a3dd829
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 1 deletion.
diff --git a/packages/base/src/locale/en-US/dmsDataSource.ts b/packages/base/src/locale/en-US/dmsDataSource.ts
@@ -58,6 +58,9 @@ export default {
     queryTimeoutSecond: 'SQL超时限制(s)',
     maintenanceTime: '运维时间',
     maintenanceTimeTips: '设置运维时间后，仅能在此运维时间段内上线工单',
+    needAuditSqlService: '是否开启SQL审核业务',
+    closeAuditSqlServiceTips:
+      '如果不启用SQL审核业务，则在SQL审核相关业务中无法使用该数据源，是否确认关闭？',
     needAuditForSqlQuery: 'SQL查询是否需要审核',
     allowQueryWhenLessThanAuditLevel: '运行查询的最高审核等级',
     passwordTips:

diff --git a/packages/base/src/locale/zh-CN/dmsDataSource.ts b/packages/base/src/locale/zh-CN/dmsDataSource.ts
@@ -58,6 +58,9 @@ export default {
     queryTimeoutSecond: 'SQL超时限制(s)',
     maintenanceTime: '运维时间',
     maintenanceTimeTips: '设置运维时间后，仅能在此运维时间段内上线工单',
+    needAuditSqlService: '是否开启SQL审核业务',
+    closeAuditSqlServiceTips:
+      '如果不启用SQL审核业务，则在SQL审核相关业务中无法使用该数据源，是否确认关闭？',
     needAuditForSqlQuery: 'SQL查询是否需要审核',
     allowQueryWhenLessThanAuditLevel: '运行查询的最高审核等级',
     passwordTips:

diff --git a/packages/base/src/page/DataSource/DataSourceForm/index.tsx b/packages/base/src/page/DataSource/DataSourceForm/index.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FormInstance } from 'antd5';
+import { Form, FormInstance, Popconfirm } from 'antd5';
 import Select, { BaseOptionType } from 'antd5/es/select';
 import { DataSourceFormField, IDataSourceFormProps } from './index.type';
 import { useRequest } from 'ahooks';
@@ -45,6 +45,9 @@ const DataSourceForm: React.FC<IDataSourceFormProps> = (props) => {
     return props.defaultData.source !== SQLE_INSTANCE_SOURCE_NAME;
   }, [props.defaultData]);
 
+  const auditRequired = Form.useWatch('needSqlAuditService', props.form);
+  const [auditRequiredPopupVisible, setAuditRequiredPopupVisible] =
+    useState<boolean>(false);
   const [auditEnabled, setAuditEnabled] = useState<boolean>(false);
   const [databaseType, setDatabaseType] = useState<string>('');
   const { projectName } = useCurrentProject();
@@ -105,6 +108,7 @@ const DataSourceForm: React.FC<IDataSourceFormProps> = (props) => {
         user: props.defaultData.user,
         ruleTemplateId: props.defaultData.sqle_config?.rule_template_id,
         ruleTemplateName: props.defaultData.sqle_config?.rule_template_name,
+        needSqlAuditService: !!props.defaultData.sqle_config?.rule_template_id,
         params: generateFormValueByParams(
           turnDataSourceAsyncFormToCommon(
             props.defaultData.additional_params ?? []
@@ -128,6 +132,9 @@ const DataSourceForm: React.FC<IDataSourceFormProps> = (props) => {
         !!props.defaultData.sqle_config?.sql_query_config?.audit_enabled
       );
     } else {
+      props.form.setFieldsValue({
+        needSqlAuditService: true
+      });
       if (params.length > 0) {
         props.form.setFieldsValue({
           params: generateFormValueByParams(params)
@@ -144,6 +151,18 @@ const DataSourceForm: React.FC<IDataSourceFormProps> = (props) => {
     setDatabaseType('');
   }, [props.form]);
 
+  const changeAuditRequired = (check: boolean) => {
+    if (check)
+      props.form.setFieldsValue({
+        needSqlAuditService: check
+      });
+  };
+
+  const onAuditRequiredPopupOpenChange = (open: boolean) => {
+    if (!auditRequired) return;
+    setAuditRequiredPopupVisible(open);
+  };
+
   const changeAuditEnabled = (check: boolean) => {
     setAuditEnabled(check);
     if (!check) {
@@ -161,6 +180,14 @@ const DataSourceForm: React.FC<IDataSourceFormProps> = (props) => {
     }
   };
 
+  const clearRuleTemplate = () => {
+    props.form.setFieldsValue({
+      needSqlAuditService: false,
+      ruleTemplateId: undefined,
+      ruleTemplateName: undefined
+    });
+  };
+
   const changeRuleTemplate = (value: string, option: BaseOptionType) => {
     props.form.setFieldsValue({
       ruleTemplateId: option.key
@@ -169,6 +196,7 @@ const DataSourceForm: React.FC<IDataSourceFormProps> = (props) => {
 
   const submit = useCallback(async () => {
     const values = await props.form.validateFields();
+    delete values.needSqlAuditService;
     if (values.params) {
       values.asyncParams = dmsMergeFromValueIntoParams(values.params, params);
       delete values.params;
@@ -295,12 +323,34 @@ const DataSourceForm: React.FC<IDataSourceFormProps> = (props) => {
           <FormItemSubTitle>
             {t('dmsDataSource.dataSourceForm.sqlConfig')}
           </FormItemSubTitle>
+
+          <FormItemLabel
+            label={t('dmsDataSource.dataSourceForm.needAuditSqlService')}
+            name="needSqlAuditService"
+            valuePropName="checked"
+          >
+            <Popconfirm
+              title={t('dmsDataSource.dataSourceForm.closeAuditSqlServiceTips')}
+              overlayClassName="popconfirm-small"
+              open={auditRequiredPopupVisible}
+              onOpenChange={onAuditRequiredPopupOpenChange}
+              onConfirm={clearRuleTemplate}
+            >
+              <BasicSwitch
+                checked={auditRequired}
+                onChange={changeAuditRequired}
+              />
+            </Popconfirm>
+          </FormItemLabel>
           <FormItemLabel name="ruleTemplateId" hidden={true}>
             <BasicInput />
           </FormItemLabel>
           <FormItemLabel
+            hidden={!auditRequired}
             label={t('dmsDataSource.dataSourceForm.ruleTemplate')}
             name="ruleTemplateName"
+            className="has-required-style"
+            rules={[{ required: auditRequired }]}
           >
             <BasicSelect
               showSearch

diff --git a/packages/base/src/page/DataSource/DataSourceForm/index.type.ts b/packages/base/src/page/DataSource/DataSourceForm/index.type.ts
@@ -20,6 +20,7 @@ export type DataSourceFormField = {
   password: string;
   business: string;
   maintenanceTime: MaintenanceTimeValue[];
+  needSqlAuditService?: boolean;
   ruleTemplateId?: string;
   ruleTemplateName?: string;
   allowQueryWhenLessThanAuditLevel?: SQLQueryConfigAllowQueryWhenLessThanAuditLevelEnum;