diff --git a/packages/base/src/hooks/useDbService/__snapshots__/index.test.tsx.snap b/packages/base/src/hooks/useDbService/__snapshots__/index.test.tsx.snap index 4332c9e36..5e7b268a4 100644 --- a/packages/base/src/hooks/useDbService/__snapshots__/index.test.tsx.snap +++ b/packages/base/src/hooks/useDbService/__snapshots__/index.test.tsx.snap @@ -1,6 +1,303 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`useDbService should render options when use generateRoleSelectOption 1`] = ` +exports[`useDbService should render options when use generateDbServiceIDSelectOptions 1`] = ` +Array [ + Object { + "label": , + "options": Array [ + Object { + "label": "test (127.0.0.1:3306)", + "value": "123123", + }, + Object { + "label": "test2 (localhost:3306)", + "value": "300123", + }, + ], + }, +] +`; + +exports[`useDbService should render options when use generateDbServiceIDSelectOptions 2`] = ` + +
+
+
+
+ + + + + test (127.0.0.1:3306) + +
+ +
+
+ +`; + +exports[`useDbService should render options when use generateDbServiceIDSelectOptions 3`] = ` + +
+
+
+
+ + + + + test (127.0.0.1:3306) + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ + + MySQL + +
+
+
+
+ test (127.0.0.1:3306) +
+
+
+
+ test2 (localhost:3306) +
+
+
+
+
+ +
+
+
+ +`; + +exports[`useDbService should render options when use generateDbServiceSelectOptions 1`] = ` +Array [ + Object { + "label": , + "options": Array [ + Object { + "label": "test (127.0.0.1:3306)", + "value": "test", + }, + Object { + "label": "test2 (localhost:3306)", + "value": "test2", + }, + ], + }, +] +`; + +exports[`useDbService should render options when use generateDbServiceSelectOptions 2`] = `
@@ -70,7 +367,7 @@ exports[`useDbService should render options when use generateRoleSelectOption 1` `; -exports[`useDbService should render options when use generateRoleSelectOption 2`] = ` +exports[`useDbService should render options when use generateDbServiceSelectOptions 3`] = `
@@ -85,7 +382,7 @@ exports[`useDbService should render options when use generateRoleSelectOption 2` class="ant-select-selection-search" >
diff --git a/packages/base/src/hooks/useDbService/index.test.tsx b/packages/base/src/hooks/useDbService/index.test.tsx index 74fb7c78e..99b8f4690 100644 --- a/packages/base/src/hooks/useDbService/index.test.tsx +++ b/packages/base/src/hooks/useDbService/index.test.tsx @@ -79,14 +79,49 @@ describe('useDbService', () => { expect(result.current.dbServiceList).toEqual([]); }); - it('should render options when use generateRoleSelectOption', async () => { + it('should render options when use generateDbServiceIDSelectOptions', async () => { const { result } = renderHooksWithRedux(() => useDbService(), {}); + + act(() => { + result.current.updateDbServiceList({ project_uid: projectID }); + }); + await act(async () => jest.advanceTimersByTime(3000)); + const { baseElement: baseElementWithOptions } = render( ); + expect(result.current.dbServiceIDOptions).toMatchSnapshot(); + + await act(async () => jest.advanceTimersByTime(3000)); + expect(baseElementWithOptions).toMatchSnapshot(); + + await act(() => { + fireEvent.mouseDown(screen.getByText('test (127.0.0.1:3306)')); + jest.runAllTimers(); + }); + + await screen.findAllByText('test (127.0.0.1:3306)'); + expect(baseElementWithOptions).toMatchSnapshot(); + }); + + it('should render options when use generateDbServiceSelectOptions', async () => { + const { result } = renderHooksWithRedux(() => useDbService(), {}); + + act(() => { + result.current.updateDbServiceList({ project_uid: projectID }); + }); + await act(async () => jest.advanceTimersByTime(3000)); + + const { baseElement: baseElementWithOptions } = render( + + ); + expect(result.current.dbServiceOptions).toMatchSnapshot(); + await act(async () => jest.advanceTimersByTime(3000)); expect(baseElementWithOptions).toMatchSnapshot(); diff --git a/packages/base/src/hooks/useDbService/index.tsx b/packages/base/src/hooks/useDbService/index.tsx index 664d13b4b..5dd369782 100644 --- a/packages/base/src/hooks/useDbService/index.tsx +++ b/packages/base/src/hooks/useDbService/index.tsx @@ -93,25 +93,36 @@ const useDbService = () => { return generateCommonOptions('name'); }, [generateCommonOptions]); + const generateCommonDbServiceOptions = React.useCallback( + (valueType: 'id' | 'name') => { + return dbTypeList.map((type) => ({ + label: ( + + ), + options: dbServiceList + .filter((db) => db.db_type === type) + .map((db) => ({ + value: valueType === 'id' ? db?.id : db?.name, + label: + !!db.host && !!db.port + ? `${db.name} (${db.host}:${db.port})` + : db.name + })) + })); + }, + [dbServiceList, dbTypeList, getLogoUrlByDbType] + ); + const dbServiceOptions = useMemo(() => { - return dbTypeList.map((type) => ({ - label: ( - - ), - options: dbServiceList - .filter((db) => db.db_type === type) - .map((db) => ({ - value: db?.name ?? '', - label: - !!db.host && !!db.port - ? `${db.name} (${db.host}:${db.port})` - : db.name - })) - })); - }, [dbServiceList, dbTypeList, getLogoUrlByDbType]); + return generateCommonDbServiceOptions('name'); + }, [generateCommonDbServiceOptions]); + + const dbServiceIDOptions = useMemo(() => { + return generateCommonDbServiceOptions('id'); + }, [generateCommonDbServiceOptions]); return { dbServiceList, @@ -119,7 +130,8 @@ const useDbService = () => { loading, updateDbServiceList, generateDbServiceSelectOptions, - generateDbServiceIDSelectOptions + generateDbServiceIDSelectOptions, + dbServiceIDOptions }; }; diff --git a/packages/base/src/page/DataExportManagement/List/index.tsx b/packages/base/src/page/DataExportManagement/List/index.tsx index da74363f7..e8cda8e44 100644 --- a/packages/base/src/page/DataExportManagement/List/index.tsx +++ b/packages/base/src/page/DataExportManagement/List/index.tsx @@ -57,7 +57,7 @@ const ExportWorkflowList: React.FC = () => { const { requestErrorMessage, handleTableRequestError } = useTableRequestError(); - const { dbServiceOptions, updateDbServiceList } = useDbService(); + const { dbServiceIDOptions, updateDbServiceList } = useDbService(); const { memberOptions, updateMemberTips } = useMemberTips(); const { @@ -99,7 +99,7 @@ const ExportWorkflowList: React.FC = () => { [ 'db_service_uid', { - options: dbServiceOptions + options: dbServiceIDOptions } ], ['created_at', { showTime: true }], @@ -107,7 +107,7 @@ const ExportWorkflowList: React.FC = () => { ['creater', { options: memberOptions }], ['current_step_assignee_user_list', { options: memberOptions }] ]); - }, [dbServiceOptions, memberOptions]); + }, [dbServiceIDOptions, memberOptions]); const rowSelection = { selectedRowKeys,