[MM-55106] Replace usage of LocalizedIcon in 'system_notice.tsx' with i/span tags (#25268)

webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap

@@ -94,7 +94,7 @@ exports[`components/Root Routes Should mount public product routes 1`] = `
       <WindowSizeObserver />
       <Connect(ModalController) />
       <Connect(Component) />
-      <Connect(SystemNotice) />
+      <Connect(injectIntl(SystemNotice)) />
       <GlobalHeader />
       <CloudEffectsWrapper />
       <withRouter(Connect(TeamSidebar)) />

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

@@ -1,11 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
 import React from 'react';
 
 import SystemNotice from 'components/system_notice/system_notice';
 
+import {mountWithIntl, type MockIntl} from 'tests/helpers/intl-test-helper';
+
 describe('components/SystemNotice', () => {
     const baseProps = {
         currentUserId: 'someid',
@@ -17,6 +18,9 @@ describe('components/SystemNotice', () => {
         license: {IsLicensed: 'true'},
         config: {},
         analytics: {TOTAL_USERS: 300},
+        intl: {
+            formatMessage: jest.fn(),
+        } as MockIntl,
         actions: {
             savePreferences: jest.fn(),
             dismissNotice: jest.fn(),
@@ -25,19 +29,19 @@ describe('components/SystemNotice', () => {
     };
 
     test('should match snapshot for regular user, regular notice', () => {
-        const wrapper = shallow(<SystemNotice {...baseProps}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...baseProps}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot for regular user, no notice', () => {
         const props = {...baseProps, notices: []};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot for regular user, admin notice', () => {
         const props = {...baseProps, notices: [{...baseProps.notices[0], adminOnly: true}]};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -47,55 +51,55 @@ describe('components/SystemNotice', () => {
                 {...baseProps.notices[0], adminOnly: true},
                 {...baseProps.notices[0], name: 'notice2', title: 'some title2', body: 'some body2'},
             ]};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot for admin, regular notice', () => {
         const props = {...baseProps, isSystemAdmin: true};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot for admin, admin notice', () => {
         const props = {...baseProps, isSystemAdmin: true, notices: [{...baseProps.notices[0], adminOnly: true}]};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot for regular user, dismissed notice', () => {
         const props = {...baseProps, dismissedNotices: {notice1: true}};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot for regular user, dont show again notice', () => {
         const props = {...baseProps, preferences: {notice1: {}}};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot for show function returning false', () => {
         const props = {...baseProps, notices: [{...baseProps.notices[0], show: () => false}]};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot for show function returning true', () => {
         const props = {...baseProps, notices: [{...baseProps.notices[0], show: () => true}]};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot for with allowForget equal false', () => {
         const props = {...baseProps, notices: [{...baseProps.notices[0], allowForget: false}]};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot when a custom icon is passed', () => {
         const props = {...baseProps, notices: [{...baseProps.notices[0], icon: <span>{'icon'}</span>}]};
-        const wrapper = shallow(<SystemNotice {...props}/>);
+        const wrapper = mountWithIntl(<SystemNotice {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 });

webapp/channels/src/components/system_notice/system_notice.tsx

@@ -2,21 +2,19 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, injectIntl, type WrappedComponentProps} from 'react-intl';
 
 import type {AnalyticsRow} from '@mattermost/types/admin';
 import type {Channel} from '@mattermost/types/channels';
 import type {ClientConfig, ClientLicense} from '@mattermost/types/config';
 import type {PreferenceType} from '@mattermost/types/preferences';
 
-import LocalizedIcon from 'components/localized_icon';
 import type {Notice} from 'components/system_notice/types';
 import MattermostLogo from 'components/widgets/icons/mattermost_logo';
 
 import {Preferences} from 'utils/constants';
-import {t} from 'utils/i18n';
 
-type Props = {
+interface Props extends WrappedComponentProps {
     currentUserId: string;
     notices: Notice[];
     preferences: {[key: string]: any};
@@ -33,7 +31,7 @@ type Props = {
         getStandardAnalytics(teamId?: string): void;
     };
 }
-export default class SystemNotice extends React.PureComponent<Props> {
+export class SystemNotice extends React.PureComponent<Props> {
     componentDidMount() {
         if (this.props.isSystemAdmin) {
             this.props.actions.getStandardAnalytics();
@@ -114,9 +112,9 @@ export default class SystemNotice extends React.PureComponent<Props> {
         if (notice.adminOnly) {
             visibleMessage = (
                 <div className='system-notice__info'>
-                    <LocalizedIcon
+                    <i
                         className='fa fa-eye'
-                        title={{id: t('system_notice.adminVisible.icon'), defaultMessage: 'Only visible to System Admins Icon'}}
+                        title={this.props.intl.formatMessage({id: 'system_notice.adminVisible.icon', defaultMessage: 'Only visible to System Admins Icon'})}
                     />
                     <FormattedMessage
                         id='system_notice.adminVisible'
@@ -169,3 +167,5 @@ export default class SystemNotice extends React.PureComponent<Props> {
         );
     }
 }
+
+export default injectIntl(SystemNotice);