[MM-54830] Convert LocalizedInput of 'team_general_tab.tsx' to regular input component (#25012)

webapp/channels/src/components/team_general_tab/team_general_tab.test.tsx

@@ -4,11 +4,16 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 import type {ChangeEvent, ComponentProps} from 'react';
+import {type IntlShape} from 'react-intl';
 
-import GeneralTab from 'components/team_general_tab/team_general_tab';
+import {GeneralTab} from 'components/team_general_tab/team_general_tab';
 
 import {TestHelper} from 'utils/test_helper';
 
+interface MockIntl extends IntlShape {
+    formatMessage: jest.Mock;
+}
+
 describe('components/TeamSettings', () => {
     const getTeam = jest.fn().mockResolvedValue({data: true});
     const patchTeam = jest.fn().mockReturnValue({data: true});
@@ -26,6 +31,9 @@ describe('components/TeamSettings', () => {
         team: TestHelper.getTeamMock({id: 'team_id'}),
         maxFileSize: 50,
         activeSection: 'team_icon',
+        intl: {
+            formatMessage: jest.fn(),
+        } as MockIntl,
         updateSection: jest.fn(),
         closeModal: jest.fn(),
         collapseModal: jest.fn(),

webapp/channels/src/components/team_general_tab/team_general_tab.tsx

@@ -3,18 +3,16 @@
 
 import React from 'react';
 import type {ChangeEvent, MouseEvent, ReactNode} from 'react';
-import {FormattedMessage, FormattedDate} from 'react-intl';
+import {FormattedMessage, FormattedDate, injectIntl, type WrappedComponentProps} from 'react-intl';
 
 import type {Team} from '@mattermost/types/teams';
 
-import LocalizedInput from 'components/localized_input/localized_input';
 import SettingItemMax from 'components/setting_item_max';
 import SettingItemMin from 'components/setting_item_min';
 import SettingPicture from 'components/setting_picture';
 import BackIcon from 'components/widgets/icons/fa_back_icon';
 
 import Constants from 'utils/constants';
-import {t} from 'utils/i18n';
 import {imageURLForTeam, localizeMessage, moveCursorToEnd} from 'utils/utils';
 
 import OpenInvite from './open_invite';
@@ -23,7 +21,7 @@ import type {PropsFromRedux, OwnProps} from '.';
 
 const ACCEPTED_TEAM_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/bmp'];
 
-type Props = PropsFromRedux & OwnProps;
+type Props = PropsFromRedux & OwnProps & WrappedComponentProps;
 
 type State = {
     name?: Team['display_name'];
@@ -39,7 +37,7 @@ type State = {
     shouldFetchTeam?: boolean;
 }
 
-export default class GeneralTab extends React.PureComponent<Props, State> {
+export class GeneralTab extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = this.setupInitialState(props);
@@ -582,7 +580,7 @@ export default class GeneralTab extends React.PureComponent<Props, State> {
                     className='form-group'
                 >
                     <div className='col-sm-12'>
-                        <LocalizedInput
+                        <input
                             id='allowedDomains'
                             autoFocus={true}
                             className='form-control'
@@ -590,7 +588,7 @@ export default class GeneralTab extends React.PureComponent<Props, State> {
                             onChange={this.updateAllowedDomains}
                             value={this.state.allowed_domains}
                             onFocus={moveCursorToEnd}
-                            placeholder={{id: t('general_tab.AllowedDomainsExample'), defaultMessage: 'corp.mattermost.com, mattermost.com'}}
+                            placeholder={this.props.intl.formatMessage({id: 'general_tab.AllowedDomainsExample', defaultMessage: 'corp.mattermost.com, mattermost.com'})}
                             aria-label={localizeMessage('general_tab.allowedDomains.ariaLabel', 'Allowed Domains')}
                         />
                     </div>
@@ -692,3 +690,5 @@ export default class GeneralTab extends React.PureComponent<Props, State> {
         );
     }
 }
+
+export default injectIntl(GeneralTab);