[MM-54838] Convert LocalizedInput of 'system_users.tsx' to regular input component (#24858)

webapp/channels/src/components/admin_console/system_users/system_users.test.tsx

@@ -1,13 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
 import React from 'react';
 
-import SystemUsers from 'components/admin_console/system_users/system_users';
+import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
-
 import {Constants, SearchUserTeamFilter, UserFilters} from 'utils/constants';
 
+import SystemUsers from './system_users';
+import type {SystemUsers as SystemUserClass} from './system_users';
+
 jest.mock('actions/admin_actions');
 
 jest.useFakeTimers();
@@ -43,38 +44,42 @@ describe('components/admin_console/system_users', () => {
 
     test('should match default snapshot', () => {
         const props = defaultProps;
-        const wrapper = shallow<SystemUsers>(<SystemUsers {...props}/>);
+        const wrapper = shallowWithIntl(<SystemUsers {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('loadDataForTeam() should have called getProfiles', async () => {
         const getProfiles = jest.fn().mockResolvedValue(undefined);
         const props = {...defaultProps, actions: {...defaultProps.actions, getProfiles}};
-        const wrapper = shallow<SystemUsers>(<SystemUsers {...props}/>);
+        const wrapper = shallowWithIntl(<SystemUsers {...props}/>);
 
         wrapper.setState({loading: true});
 
-        await wrapper.instance().loadDataForTeam(SearchUserTeamFilter.ALL_USERS, '');
+        const instance = wrapper.instance() as SystemUserClass;
+
+        await instance.loadDataForTeam(SearchUserTeamFilter.ALL_USERS, '');
 
         expect(getProfiles).toHaveBeenCalled();
         expect(getProfiles).toHaveBeenCalledWith(0, Constants.PROFILE_CHUNK_SIZE, {});
-        expect(wrapper.state().loading).toEqual(false);
+        expect(wrapper.state('loading')).toEqual(false);
     });
 
     test('loadDataForTeam() should have called loadProfilesWithoutTeam', async () => {
         const loadProfilesWithoutTeam = jest.fn().mockResolvedValue(undefined);
         const props = {...defaultProps, actions: {...defaultProps.actions, loadProfilesWithoutTeam}};
-        const wrapper = shallow<SystemUsers>(<SystemUsers {...props}/>);
+        const wrapper = shallowWithIntl(<SystemUsers {...props}/>);
 
         wrapper.setState({loading: true});
 
-        await wrapper.instance().loadDataForTeam(SearchUserTeamFilter.NO_TEAM, '');
+        const instance = wrapper.instance() as SystemUserClass;
+
+        await instance.loadDataForTeam(SearchUserTeamFilter.NO_TEAM, '');
 
         expect(loadProfilesWithoutTeam).toHaveBeenCalled();
         expect(loadProfilesWithoutTeam).toHaveBeenCalledWith(0, Constants.PROFILE_CHUNK_SIZE, {});
-        expect(wrapper.state().loading).toEqual(false);
+        expect(wrapper.state('loading')).toEqual(false);
 
-        await wrapper.instance().loadDataForTeam(SearchUserTeamFilter.NO_TEAM, UserFilters.INACTIVE);
+        await instance.loadDataForTeam(SearchUserTeamFilter.NO_TEAM, UserFilters.INACTIVE);
 
         expect(loadProfilesWithoutTeam).toHaveBeenCalled();
         expect(loadProfilesWithoutTeam).toHaveBeenCalledWith(0, Constants.PROFILE_CHUNK_SIZE, {inactive: true});
@@ -87,15 +92,17 @@ describe('components/admin_console/system_users', () => {
             teamId: SearchUserTeamFilter.ALL_USERS,
             actions: {...defaultProps.actions, getProfiles},
         };
-        const wrapper = shallow<SystemUsers>(<SystemUsers {...props}/>);
+        const wrapper = shallowWithIntl(<SystemUsers {...props}/>);
 
         wrapper.setState({loading: true});
 
-        await wrapper.instance().nextPage(0);
+        const instance = wrapper.instance() as SystemUserClass;
+
+        await instance.nextPage(0);
 
         expect(getProfiles).toHaveBeenCalled();
         expect(getProfiles).toHaveBeenCalledWith(1, USERS_PER_PAGE, {});
-        expect(wrapper.state().loading).toEqual(false);
+        expect(wrapper.state('loading')).toEqual(false);
     });
 
     test('nextPage() should have called loadProfilesWithoutTeam', async () => {
@@ -105,15 +112,17 @@ describe('components/admin_console/system_users', () => {
             teamId: SearchUserTeamFilter.NO_TEAM,
             actions: {...defaultProps.actions, loadProfilesWithoutTeam},
         };
-        const wrapper = shallow<SystemUsers>(<SystemUsers {...props}/>);
+        const wrapper = shallowWithIntl(<SystemUsers {...props}/>);
 
         wrapper.setState({loading: true});
 
-        await wrapper.instance().nextPage(0);
+        const instance = wrapper.instance() as SystemUserClass;
+
+        await instance.nextPage(0);
 
         expect(loadProfilesWithoutTeam).toHaveBeenCalled();
         expect(loadProfilesWithoutTeam).toHaveBeenCalledWith(1, USERS_PER_PAGE, {});
-        expect(wrapper.state().loading).toEqual(false);
+        expect(wrapper.state('loading')).toEqual(false);
     });
 
     test('doSearch() should have called searchProfiles with allow_inactive', async () => {
@@ -123,9 +132,11 @@ describe('components/admin_console/system_users', () => {
             teamId: SearchUserTeamFilter.NO_TEAM,
             actions: {...defaultProps.actions, searchProfiles},
         };
-        const wrapper = shallow<SystemUsers>(<SystemUsers {...props}/>);
+        const wrapper = shallowWithIntl(<SystemUsers {...props}/>);
 
-        await wrapper.instance().doSearch('searchterm', '', '');
+        const instance = wrapper.instance() as SystemUserClass;
+
+        await instance.doSearch('searchterm', '', '');
 
         jest.runOnlyPendingTimers();
         expect(searchProfiles).toHaveBeenCalled();
@@ -139,9 +150,11 @@ describe('components/admin_console/system_users', () => {
             teamId: SearchUserTeamFilter.NO_TEAM,
             actions: {...defaultProps.actions, searchProfiles},
         };
-        const wrapper = shallow<SystemUsers>(<SystemUsers {...props}/>);
+        const wrapper = shallowWithIntl(<SystemUsers {...props}/>);
 
-        await wrapper.instance().doSearch('searchterm', '', 'system_admin');
+        const instance = wrapper.instance() as SystemUserClass;
+
+        await instance.doSearch('searchterm', '', 'system_admin');
 
         jest.runOnlyPendingTimers();
         expect(searchProfiles).toHaveBeenCalled();

webapp/channels/src/components/admin_console/system_users/system_users.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import type {ChangeEvent} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, type IntlShape, injectIntl} from 'react-intl';
 
 import type {ServerError} from '@mattermost/types/errors';
 import type {Team} from '@mattermost/types/teams';
@@ -17,13 +17,11 @@ import {emitUserLoggedOutEvent} from 'actions/global_actions';
 
 import ConfirmModal from 'components/confirm_modal';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-import LocalizedInput from 'components/localized_input/localized_input';
 import SystemPermissionGate from 'components/permissions_gates/system_permission_gate';
 import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import {Constants, UserSearchOptions, SearchUserTeamFilter, UserFilters} from 'utils/constants';
 import {getUserOptionsFromFilter, searchUserOptionsFromFilter} from 'utils/filter_users';
-import {t} from 'utils/i18n';
 import * as Utils from 'utils/utils';
 
 import SystemUsersList from './list';
@@ -33,6 +31,8 @@ const USERS_PER_PAGE = 50;
 
 type Props = {
 
+    intl: IntlShape;
+
     /**
      * Array of team objects
      */
@@ -114,7 +114,7 @@ type State = {
     term?: string;
 };
 
-export default class SystemUsers extends React.PureComponent<Props, State> {
+export class SystemUsers extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 
@@ -318,10 +318,10 @@ export default class SystemUsers extends React.PureComponent<Props, State> {
         return (
             <div className='system-users__filter-row'>
                 <div className='system-users__filter'>
-                    <LocalizedInput
+                    <input
                         id='searchUsers'
                         className='form-control filter-textbox'
-                        placeholder={{id: t('filtered_user_list.search'), defaultMessage: 'Search users'}}
+                        placeholder={this.props.intl.formatMessage({id: 'filtered_user_list.search', defaultMessage: 'Search users'})}
                         onInput={doSearch}
                     />
                 </div>
@@ -424,3 +424,5 @@ export default class SystemUsers extends React.PureComponent<Props, State> {
         );
     }
 }
+
+export default injectIntl(SystemUsers);