diff --git a/packages/base/src/page/UserCenter/__tests__/__snapshots__/index.test.tsx.snap b/packages/base/src/page/UserCenter/__tests__/__snapshots__/index.test.tsx.snap index 035821af8..7df1cdb5f 100644 --- a/packages/base/src/page/UserCenter/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/base/src/page/UserCenter/__tests__/__snapshots__/index.test.tsx.snap @@ -166,6 +166,66 @@ exports[`base/UserCenter should render user list when it first entered the user
+
+
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
@@ -935,6 +995,66 @@ exports[`base/UserCenter switch to operate permission list 1`] = `
+
+
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
@@ -2002,6 +2122,66 @@ exports[`base/UserCenter switch to role list 1`] = `
+
+
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
diff --git a/packages/base/src/page/UserCenter/__tests__/index.test.tsx b/packages/base/src/page/UserCenter/__tests__/index.test.tsx index 17fdca2b6..08c8d86b3 100644 --- a/packages/base/src/page/UserCenter/__tests__/index.test.tsx +++ b/packages/base/src/page/UserCenter/__tests__/index.test.tsx @@ -42,6 +42,9 @@ describe('base/UserCenter', () => { page_index: 1, page_size: 20 }); + expect( + getBySelector('#actiontech-table-search-input', baseElement) + ).toHaveAttribute('placeholder', '请输入要搜索的 用户名'); fireEvent.click(screen.getByText('添加用户')); await act(async () => jest.advanceTimersByTime(300)); expect(dispatchSpy).toHaveBeenCalledWith({ @@ -70,6 +73,9 @@ describe('base/UserCenter', () => { page_index: 1, page_size: 20 }); + expect( + screen.queryByPlaceholderText('请输入要搜索的 用户名') + ).not.toBeVisible(); expect(baseElement).toMatchSnapshot(); fireEvent.click(screen.getByText('添加角色')); await act(async () => jest.advanceTimersByTime(300)); @@ -94,6 +100,9 @@ describe('base/UserCenter', () => { page_size: 20, filter_by_target: ListOpPermissionsFilterByTargetEnum.all }); + expect( + screen.queryByPlaceholderText('请输入要搜索的 用户名') + ).not.toBeVisible(); expect(baseElement).toMatchSnapshot(); }); diff --git a/packages/base/src/page/UserCenter/components/PermissionList/__tests__/PermissionList.test.tsx b/packages/base/src/page/UserCenter/components/PermissionList/__tests__/PermissionList.test.tsx index eac795acb..47c07752a 100644 --- a/packages/base/src/page/UserCenter/components/PermissionList/__tests__/PermissionList.test.tsx +++ b/packages/base/src/page/UserCenter/components/PermissionList/__tests__/PermissionList.test.tsx @@ -32,6 +32,9 @@ describe('base/UserCenter/PermissionList', () => { expect(permissionListSpy).toHaveBeenCalledTimes(1); expect(baseElement).toMatchSnapshot(); + expect( + queryBySelector('#actiontech-table-search-input', baseElement) + ).not.toBeInTheDocument(); expect(screen.getAllByText('创建项目')).toHaveLength(2); expect(screen.getByText('修改项目')).toBeInTheDocument(); expect(screen.getAllByText('数据源')).toHaveLength(2); diff --git a/packages/base/src/page/UserCenter/components/RoleList/__tests__/RoleList.test.tsx b/packages/base/src/page/UserCenter/components/RoleList/__tests__/RoleList.test.tsx index 88e214e80..3bbe49617 100644 --- a/packages/base/src/page/UserCenter/components/RoleList/__tests__/RoleList.test.tsx +++ b/packages/base/src/page/UserCenter/components/RoleList/__tests__/RoleList.test.tsx @@ -44,6 +44,9 @@ describe('base/UserCenter/RoleList', () => { await act(async () => jest.advanceTimersByTime(3300)); expect(roleListSpy).toHaveBeenCalledTimes(1); expect(baseElement).toMatchSnapshot(); + expect( + queryBySelector('#actiontech-table-search-input', baseElement) + ).not.toBeInTheDocument(); expect(screen.getByText('test role 1')).toBeInTheDocument(); expect(screen.getAllByText('编 辑')).toHaveLength(3); expect(screen.getAllByText('删 除')).toHaveLength(3); diff --git a/packages/base/src/page/UserCenter/components/UserList/List.tsx b/packages/base/src/page/UserCenter/components/UserList/List.tsx index b6072b205..fde1364b7 100644 --- a/packages/base/src/page/UserCenter/components/UserList/List.tsx +++ b/packages/base/src/page/UserCenter/components/UserList/List.tsx @@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'; import { useRequest } from 'ahooks'; import { ActiontechTable, + TableToolbar, useTableRequestError, useTableRequestParams } from '@actiontech/shared/lib/components/ActiontechTable'; @@ -34,10 +35,13 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({ const { requestErrorMessage, handleTableRequestError } = useTableRequestError(); - const { pagination, tableChange } = useTableRequestParams< - IListUser, - IListUsersParams - >(); + const { + pagination, + tableChange, + searchKeyword, + setSearchKeyword, + refreshBySearchKeyword + } = useTableRequestParams(); const { data: userList, @@ -48,6 +52,10 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({ const params: IListUsersParams = { ...pagination }; + const nameFuzzy = searchKeyword.trim(); + if (nameFuzzy) { + params.filter_by_name_fuzzy = nameFuzzy; + } return handleTableRequestError(User.ListUsers(params)); }, { @@ -105,6 +113,19 @@ const UserList: React.FC<{ activePage: UserCenterListEnum }> = ({ return ( <> {contextHolder} + { + refreshBySearchKeyword(); + }, + placeholder: t('common.form.placeholder.searchInput', { + name: t('common.username') + }) + }} + /> { ); await act(async () => jest.advanceTimersByTime(3000)); expect(userListSpy).toHaveBeenCalledTimes(1); + expect(userListSpy).toHaveBeenCalledWith({ + page_index: 1, + page_size: 20 + }); + expect(userListSpy.mock.calls[0][0]).not.toHaveProperty( + 'filter_by_name_fuzzy' + ); + expect(userListSpy.mock.calls[0][0]).not.toHaveProperty('filter_by_name'); + expect( + getBySelector('#actiontech-table-search-input', baseElement) + ).toBeInTheDocument(); + expect( + getBySelector('#actiontech-table-search-input', baseElement) + ).toHaveAttribute('placeholder', '请输入要搜索的 用户名'); expect(baseElement).toMatchSnapshot(); expect(screen.getByText('admin')).toBeInTheDocument(); expect(screen.getByText('test')).toBeInTheDocument(); @@ -135,6 +152,83 @@ describe('base/UserCenter/UserList', () => { expect(userListSpy).toHaveBeenCalled(); }); + it('should send filter_by_name_fuzzy when search by username', async () => { + const { baseElement } = renderWithReduxAndTheme( + + ); + await act(async () => jest.advanceTimersByTime(3000)); + expect(userListSpy).toHaveBeenCalledTimes(1); + + const searchInputEle = getBySelector( + '#actiontech-table-search-input', + baseElement + ); + fireEvent.change(searchInputEle, { + target: { + value: 'zjrc_assignee_repro_user_1001' + } + }); + await act(async () => jest.advanceTimersByTime(300)); + expect(searchInputEle).toHaveValue('zjrc_assignee_repro_user_1001'); + + fireEvent.click(getBySelector('.custom-icon-search')); + await act(async () => jest.advanceTimersByTime(3200)); + expect(userListSpy).toHaveBeenCalledTimes(2); + expect(userListSpy).toHaveBeenNthCalledWith(2, { + page_index: 1, + page_size: 20, + filter_by_name_fuzzy: 'zjrc_assignee_repro_user_1001' + }); + expect(userListSpy.mock.calls[1][0]).not.toHaveProperty('filter_by_name'); + expect(userListSpy.mock.calls[1][0]).not.toHaveProperty('fuzzy_keyword'); + }); + + it('should not send filter_by_name_fuzzy when keyword is empty or whitespace', async () => { + const { baseElement } = renderWithReduxAndTheme( + + ); + await act(async () => jest.advanceTimersByTime(3000)); + expect(userListSpy).toHaveBeenCalledTimes(1); + + const searchInputEle = getBySelector( + '#actiontech-table-search-input', + baseElement + ); + fireEvent.change(searchInputEle, { + target: { + value: ' ' + } + }); + await act(async () => jest.advanceTimersByTime(300)); + fireEvent.click(getBySelector('.custom-icon-search')); + await act(async () => jest.advanceTimersByTime(3200)); + expect(userListSpy).toHaveBeenCalledTimes(2); + expect(userListSpy).toHaveBeenNthCalledWith(2, { + page_index: 1, + page_size: 20 + }); + expect(userListSpy.mock.calls[1][0]).not.toHaveProperty( + 'filter_by_name_fuzzy' + ); + + fireEvent.change(searchInputEle, { + target: { + value: '' + } + }); + await act(async () => jest.advanceTimersByTime(300)); + fireEvent.click(getBySelector('.custom-icon-search')); + await act(async () => jest.advanceTimersByTime(3200)); + expect(userListSpy).toHaveBeenCalledTimes(3); + expect(userListSpy).toHaveBeenNthCalledWith(3, { + page_index: 1, + page_size: 20 + }); + expect(userListSpy.mock.calls[2][0]).not.toHaveProperty( + 'filter_by_name_fuzzy' + ); + }); + it('should dispatch action when edit user info', async () => { userListSpy.mockClear(); userListSpy.mockImplementation(() => diff --git a/packages/base/src/page/UserCenter/components/UserList/__tests__/__snapshots__/UserList.test.tsx.snap b/packages/base/src/page/UserCenter/components/UserList/__tests__/__snapshots__/UserList.test.tsx.snap index 036ddd1f3..95bb555b2 100644 --- a/packages/base/src/page/UserCenter/components/UserList/__tests__/__snapshots__/UserList.test.tsx.snap +++ b/packages/base/src/page/UserCenter/components/UserList/__tests__/__snapshots__/UserList.test.tsx.snap @@ -3,6 +3,66 @@ exports[`base/UserCenter/UserList render user table 1`] = `
+
+
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
@@ -605,6 +665,66 @@ exports[`base/UserCenter/UserList render user table 1`] = ` exports[`base/UserCenter/UserList should refresh user table when change current page 1`] = `
+
+
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
@@ -2815,6 +2935,66 @@ exports[`base/UserCenter/UserList should refresh user table when change current exports[`base/UserCenter/UserList should refresh user table when change current page 2`] = `
+
+
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
@@ -5025,6 +5205,66 @@ exports[`base/UserCenter/UserList should refresh user table when change current exports[`base/UserCenter/UserList should render empty tips when request not success 1`] = `
+
+
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+