From 621f73d50d32cdd45d7106f7256a5b6d553bda7d Mon Sep 17 00:00:00 2001 From: wanghong Date: Wed, 15 Nov 2023 16:19:26 +0800 Subject: [PATCH 1/4] fix: fix uploadType reset bug --- src/data/EmitterKey.ts | 2 ++ src/page/Order/Create/index.tsx | 1 + .../SqlStatementFormTabs/SqlStatementForm.tsx | 29 +++++++++++++++++++ 3 files changed, 32 insertions(+) diff --git a/src/data/EmitterKey.ts b/src/data/EmitterKey.ts index 8927c3f4..854ddf45 100644 --- a/src/data/EmitterKey.ts +++ b/src/data/EmitterKey.ts @@ -10,6 +10,8 @@ enum EmitterKey { Reset_Create_Order_Form = 'RESET_CREATE_ORDER_FORM', + Reset_Sql_Statement_Form = 'RESET_SQL_STATEMENT_FORM ', + Reset_Test_Data_Source_Connect = 'RESET_TEST_DATA_SOURCE_CONNECT', Reset_Workflow_Template_Form = 'RESET_WORKFLOW_TEMPLATE_FORM', diff --git a/src/page/Order/Create/index.tsx b/src/page/Order/Create/index.tsx index 87567b3d..b5edc73d 100644 --- a/src/page/Order/Create/index.tsx +++ b/src/page/Order/Create/index.tsx @@ -163,6 +163,7 @@ const CreateOrder = () => { clearTaskInfos(); toggleHasDirtyData(false); EventEmitter.emit(EmitterKey.Reset_Create_Order_Form); + EventEmitter.emit(EmitterKey.Reset_Sql_Statement_Form); }, [baseForm, clearTaskInfos, sqlInfoForm, toggleHasDirtyData]); const closeModalAndResetForm = useCallback(() => { diff --git a/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx b/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx index e6306322..e6e0132b 100644 --- a/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx +++ b/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx @@ -9,6 +9,8 @@ import useChangeTheme from '../../../hooks/useChangeTheme'; import useMonacoEditor from '../../../hooks/useMonacoEditor'; import useStyles from '../../../theme'; import { getFileFromUploadChangeEvent } from '../../../utils/Common'; +import EmitterKey from '../../../data/EmitterKey'; +import EventEmitter from '../../../utils/EventEmitter'; const MonacoEditorFunComponent = MonacoEditor as ComponentType; @@ -54,11 +56,23 @@ const SqlStatementForm: React.FC = ({ return [fieldName ?? '0', name]; }; + const resetUploadTypeContent = () => { + setCurrentSQLInputTYpe(SQLInputType.manualInput); + if (isClearFormWhenChangeSqlType) { + form.resetFields([ + generateFieldName('sql'), + generateFieldName('sqlFile'), + generateFieldName('mybatisFile'), + ]); + } + } + const { editorDidMount } = useMonacoEditor(form, { formName: generateFieldName('sql'), }); useEffect(() => { + if (sqlStatement) { form.setFieldsValue({ [fieldName ?? '0']: { @@ -68,6 +82,21 @@ const SqlStatementForm: React.FC = ({ } }, [fieldName, form, sqlStatement]); + useEffect(() => { + EventEmitter.subscribe( + EmitterKey.Reset_Sql_Statement_Form, + resetUploadTypeContent + ); + + return () => { + EventEmitter.unsubscribe( + EmitterKey.Reset_Sql_Statement_Form, + resetUploadTypeContent + ); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + return ( <> Date: Wed, 15 Nov 2023 16:27:35 +0800 Subject: [PATCH 2/4] fix: remove useless empty line --- src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx b/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx index e6e0132b..f0271b20 100644 --- a/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx +++ b/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx @@ -72,7 +72,6 @@ const SqlStatementForm: React.FC = ({ }); useEffect(() => { - if (sqlStatement) { form.setFieldsValue({ [fieldName ?? '0']: { From cce835c605d977380f2b3e07115576b04a090e3d Mon Sep 17 00:00:00 2001 From: wanghong Date: Wed, 15 Nov 2023 17:21:21 +0800 Subject: [PATCH 3/4] fix: remove some reset func and supply unit test --- src/page/Order/Create/SqlInfoForm/index.tsx | 3 ++- src/page/Order/Create/index.test.tsx | 3 ++- src/page/Order/Create/index.tsx | 1 - src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx | 8 +------- 4 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/page/Order/Create/SqlInfoForm/index.tsx b/src/page/Order/Create/SqlInfoForm/index.tsx index 15122dac..83368f55 100644 --- a/src/page/Order/Create/SqlInfoForm/index.tsx +++ b/src/page/Order/Create/SqlInfoForm/index.tsx @@ -54,7 +54,7 @@ const SqlInfoForm: React.FC = (props) => { useBoolean(); const [connectErrorMessage, setConnectErrorMessage] = useState([]); const [changeSqlModeDisabled, setChangeSqlModeDisabled] = useState(false); - + const instanceNameList = useMemo(() => { return Array.from(instanceNames).map(([_, name]) => name ?? ''); }, [instanceNames]); @@ -231,6 +231,7 @@ const SqlInfoForm: React.FC = (props) => { setInstanceNames(new Map([[0, '']])); setConnectInitHideTrue(); setCurrentSqlMode(WorkflowResV2ModeEnum.same_sqls); + EventEmitter.emit(EmitterKey.Reset_Sql_Statement_Form); }; EventEmitter.subscribe( EmitterKey.Reset_Create_Order_Form, diff --git a/src/page/Order/Create/index.test.tsx b/src/page/Order/Create/index.test.tsx index e0bc6deb..a59e297c 100644 --- a/src/page/Order/Create/index.test.tsx +++ b/src/page/Order/Create/index.test.tsx @@ -304,8 +304,9 @@ describe('Order/Create', () => { const emitSpy = jest.spyOn(EventEmitter, 'emit'); fireEvent.click(screen.getByText('common.resetAndClose')); - expect(emitSpy).toBeCalledTimes(1); + expect(emitSpy).toBeCalledTimes(2); expect(emitSpy).toBeCalledWith(EmitterKey.Reset_Create_Order_Form); + expect(emitSpy).toBeCalledWith(EmitterKey.Reset_Sql_Statement_Form); expect(getBySelector('.ant-modal-wrap')).toHaveStyle('display: none'); expect(screen.getByLabelText('order.baseInfo.name')).toHaveValue(''); }); diff --git a/src/page/Order/Create/index.tsx b/src/page/Order/Create/index.tsx index b5edc73d..87567b3d 100644 --- a/src/page/Order/Create/index.tsx +++ b/src/page/Order/Create/index.tsx @@ -163,7 +163,6 @@ const CreateOrder = () => { clearTaskInfos(); toggleHasDirtyData(false); EventEmitter.emit(EmitterKey.Reset_Create_Order_Form); - EventEmitter.emit(EmitterKey.Reset_Sql_Statement_Form); }, [baseForm, clearTaskInfos, sqlInfoForm, toggleHasDirtyData]); const closeModalAndResetForm = useCallback(() => { diff --git a/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx b/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx index f0271b20..00cfae5e 100644 --- a/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx +++ b/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx @@ -58,13 +58,6 @@ const SqlStatementForm: React.FC = ({ const resetUploadTypeContent = () => { setCurrentSQLInputTYpe(SQLInputType.manualInput); - if (isClearFormWhenChangeSqlType) { - form.resetFields([ - generateFieldName('sql'), - generateFieldName('sqlFile'), - generateFieldName('mybatisFile'), - ]); - } } const { editorDidMount } = useMonacoEditor(form, { @@ -96,6 +89,7 @@ const SqlStatementForm: React.FC = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []) + return ( <> Date: Wed, 15 Nov 2023 17:35:31 +0800 Subject: [PATCH 4/4] fix: change emitter key --- src/data/EmitterKey.ts | 2 +- src/page/Order/Create/SqlInfoForm/index.tsx | 2 +- src/page/Order/Create/index.test.tsx | 2 +- src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/data/EmitterKey.ts b/src/data/EmitterKey.ts index 854ddf45..e3efdbce 100644 --- a/src/data/EmitterKey.ts +++ b/src/data/EmitterKey.ts @@ -10,7 +10,7 @@ enum EmitterKey { Reset_Create_Order_Form = 'RESET_CREATE_ORDER_FORM', - Reset_Sql_Statement_Form = 'RESET_SQL_STATEMENT_FORM ', + Reset_Upload_Type_Content = 'RESET_UPLOAD_TYPE_CONTENT', Reset_Test_Data_Source_Connect = 'RESET_TEST_DATA_SOURCE_CONNECT', diff --git a/src/page/Order/Create/SqlInfoForm/index.tsx b/src/page/Order/Create/SqlInfoForm/index.tsx index 83368f55..889a1855 100644 --- a/src/page/Order/Create/SqlInfoForm/index.tsx +++ b/src/page/Order/Create/SqlInfoForm/index.tsx @@ -231,7 +231,7 @@ const SqlInfoForm: React.FC = (props) => { setInstanceNames(new Map([[0, '']])); setConnectInitHideTrue(); setCurrentSqlMode(WorkflowResV2ModeEnum.same_sqls); - EventEmitter.emit(EmitterKey.Reset_Sql_Statement_Form); + EventEmitter.emit(EmitterKey.Reset_Upload_Type_Content); }; EventEmitter.subscribe( EmitterKey.Reset_Create_Order_Form, diff --git a/src/page/Order/Create/index.test.tsx b/src/page/Order/Create/index.test.tsx index a59e297c..ba748e6c 100644 --- a/src/page/Order/Create/index.test.tsx +++ b/src/page/Order/Create/index.test.tsx @@ -306,7 +306,7 @@ describe('Order/Create', () => { expect(emitSpy).toBeCalledTimes(2); expect(emitSpy).toBeCalledWith(EmitterKey.Reset_Create_Order_Form); - expect(emitSpy).toBeCalledWith(EmitterKey.Reset_Sql_Statement_Form); + expect(emitSpy).toBeCalledWith(EmitterKey.Reset_Upload_Type_Content); expect(getBySelector('.ant-modal-wrap')).toHaveStyle('display: none'); expect(screen.getByLabelText('order.baseInfo.name')).toHaveValue(''); }); diff --git a/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx b/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx index 00cfae5e..978c9edb 100644 --- a/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx +++ b/src/page/Order/SqlStatementFormTabs/SqlStatementForm.tsx @@ -76,13 +76,13 @@ const SqlStatementForm: React.FC = ({ useEffect(() => { EventEmitter.subscribe( - EmitterKey.Reset_Sql_Statement_Form, + EmitterKey.Reset_Upload_Type_Content, resetUploadTypeContent ); return () => { EventEmitter.unsubscribe( - EmitterKey.Reset_Sql_Statement_Form, + EmitterKey.Reset_Upload_Type_Content, resetUploadTypeContent ); };