Merge pull request #613 from actiontech/fix/workflow-sql-audit-error

[fix](SqlExecWorkflow): Optimize the verification of audit forms

Author: LZS911

packages/shared/lib/types/common.type.ts

@@ -51,3 +51,13 @@ export type RouterConfigItem =
       });
 
 export type ExcludeSymbol<T> = T extends symbol ? never : T;
+
+export type FormValidateError<T> = {
+  values: T;
+  errorFields: Array<{
+    name: string[];
+    errors: string[];
+    warnings: string[];
+  }>;
+  outOfDate: boolean;
+};

packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/__tests__/SqlFormatterAndSubmitter.test.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, renderHook, screen } from '@testing-library/react';
-import { Form, Input } from 'antd';
+import { Form, FormInstance, Input } from 'antd';
 import SqlFormatterAndSubmitter from '../components/SqlFormatterAndSubmitter';
 import { SqlFormatterAndSubmitterProps } from '../components/index.type';
 import instance from '../../../../../../testUtils/mockApi/instance';
@@ -24,11 +24,14 @@ describe('test SqlFormatterAndSubmitter', () => {
     jest.clearAllTimers();
   });
 
-  const customRender = (params: Partial<SqlFormatterAndSubmitterProps>) => {
+  const customRender = (
+    params: Partial<SqlFormatterAndSubmitterProps>,
+    form?: FormInstance
+  ) => {
     const { result } = renderHook(() => Form.useForm());
 
     return superRender(
-      <Form form={result.current[0]}>
+      <Form form={form ?? result.current[0]}>
         <SqlFormatterAndSubmitter
           isAuditing={{ set: jest.fn(), value: false }}
           auditAction={auditActionSpy}
@@ -163,4 +166,34 @@ describe('test SqlFormatterAndSubmitter', () => {
       SQL_EDITOR_PLACEHOLDER_VALUE
     );
   });
+
+  it('form validateFields return errorFields on submit button click', async () => {
+    const { result } = renderHook(() => Form.useForm());
+    const form = result.current[0];
+    jest.spyOn(form, 'validateFields').mockReturnValue(
+      Promise.reject({
+        values: {},
+        errorFields: [
+          {
+            name: ['1', AuditTaskResV1SqlSourceEnum.form_data],
+            errors: ['请输入SQL']
+          }
+        ],
+        outOfDate: false
+      })
+    );
+    const setActiveKeySpy = jest.fn();
+    customRender(
+      {
+        fieldPrefixPath: '1',
+        setActiveKey: setActiveKeySpy
+      },
+      form
+    );
+
+    fireEvent.click(screen.getByText('审 核'));
+    await act(async () => jest.advanceTimersByTime(0));
+    expect(setActiveKeySpy).toHaveBeenCalledTimes(1);
+    expect(setActiveKeySpy).toHaveBeenCalledWith('1');
+  });
 });

packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/__tests__/index.test.tsx

@@ -30,6 +30,7 @@ describe('test SqlStatementFormItem', () => {
           databaseInfo={[
             { key: '1', instanceName: 'mysql-1', schemaName: 'test' }
           ]}
+          setActiveKey={jest.fn()}
           isAtFormStep
           {...params}
         />

packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/components/SqlFormatterAndSubmitter.tsx

@@ -13,14 +13,16 @@ import instance from '@actiontech/shared/lib/api/sqle/service/instance';
 import { useCurrentProject } from '@actiontech/shared/lib/features';
 import { useBoolean } from 'ahooks';
 import { SQL_EDITOR_PLACEHOLDER_VALUE } from '@actiontech/shared/lib/data/common';
+import { FormValidateError } from '@actiontech/shared/lib/types/common.type';
 
 const SqlFormatterAndSubmitter: React.FC<SqlFormatterAndSubmitterProps> = ({
   fieldPrefixPath,
   isAuditing,
   auditAction,
   databaseInfo,
   isSameSqlForAll,
-  currentSqlUploadType
+  currentSqlUploadType,
+  setActiveKey
 }) => {
   const { t } = useTranslation();
   const { projectName } = useCurrentProject();
@@ -32,8 +34,21 @@ const SqlFormatterAndSubmitter: React.FC<SqlFormatterAndSubmitterProps> = ({
   ] = useBoolean();
 
   const internalSubmit = async () => {
-    const values = await form.validateFields();
-    auditAction(values);
+    form
+      .validateFields()
+      .then((values) => {
+        auditAction(values);
+      })
+      .catch((error: FormValidateError<SqlAuditInfoFormFields>) => {
+        const errorField = error.errorFields.filter((i) => {
+          return Object.keys(AuditTaskResV1SqlSourceEnum).some((v) => {
+            return i.name.includes(v);
+          });
+        });
+        if (!!errorField.length) {
+          setActiveKey?.(errorField[0].name?.[0]);
+        }
+      });
   };
 
   const formatSql = async () => {

packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/components/index.type.ts

@@ -21,6 +21,7 @@ export type SqlFormatterAndSubmitterProps = {
   | 'auditAction'
   | 'databaseInfo'
   | 'isSameSqlForAll'
+  | 'setActiveKey'
 >;
 
 export type SqlBackupSwitcherProps = Pick<

packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/index.tsx

@@ -26,7 +26,8 @@ const SqlStatementFormItem: React.FC<SqlStatementFormItemProps> = ({
   isSameSqlForAll,
   isSupportFileModeExecuteSql,
   isAtRejectStep,
-  isAtFormStep
+  isAtFormStep,
+  setActiveKey
 }) => {
   const { t } = useTranslation();
   const form = Form.useFormInstance<SqlAuditInfoFormProps>();
@@ -102,6 +103,7 @@ const SqlStatementFormItem: React.FC<SqlStatementFormItemProps> = ({
         auditAction={auditAction}
         databaseInfo={databaseInfo}
         isSameSqlForAll={isSameSqlForAll}
+        setActiveKey={setActiveKey}
       />
     </>
   );

packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/index.type.ts

@@ -9,4 +9,5 @@ export type SqlStatementFormItemProps = {
   isSameSqlForAll: boolean;
   isSupportFileModeExecuteSql: boolean;
   isAtRejectStep?: boolean;
+  setActiveKey?: (key: string) => void;
 } & Pick<SqlAuditInfoFormProps, 'isAuditing' | 'auditAction' | 'isAtFormStep'>;

packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/index.tsx

@@ -74,6 +74,7 @@ const SqlStatementFormController: React.FC<SqlStatementFormControllerProps> = ({
                 isSupportFileModeExecuteSql={
                   !!isSupportFileModeExecuteSqlRecord?.[v.key]
                 }
+                setActiveKey={setActiveKey}
                 {...props}
               />
             </div>