[MM-54877] Replace usage of LocalizedIcon in "select_team_item.tsx" & "file_upload_overlay.tsx" with i/span tags (#25071)

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

@@ -16,14 +16,9 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
         src={null}
       />
       <span>
-        <LocalizedIcon
+        <i
           className="fa fa-upload"
-          title={
+          title="Upload Icon"
-            Object {
-              "defaultMessage": "Upload Icon",
-              "id": "generic_icons.upload",
-            }
-          }
         />
         <MemoizedFormattedMessage
           defaultMessage="Drop a file to upload it."
@@ -56,14 +51,9 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
         src={null}
       />
       <span>
-        <LocalizedIcon
+        <i
           className="fa fa-upload"
-          title={
+          title="Upload Icon"
-            Object {
-              "defaultMessage": "Upload Icon",
-              "id": "generic_icons.upload",
-            }
-          }
         />
         <MemoizedFormattedMessage
           defaultMessage="Drop a file to upload it."
@@ -96,14 +86,9 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
         src={null}
       />
       <span>
-        <LocalizedIcon
+        <i
           className="fa fa-upload"
-          title={
+          title="Upload Icon"
-            Object {
-              "defaultMessage": "Upload Icon",
-              "id": "generic_icons.upload",
-            }
-          }
         />
         <MemoizedFormattedMessage
           defaultMessage="Drop a file to upload it."

webapp/channels/src/components/file_upload_overlay.tsx

@@ -2,19 +2,18 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import fileOverlayImage from 'images/filesOverlay.png';
 import overlayLogoImage from 'images/logoWhite.png';
-import {t} from 'utils/i18n';
-
-import LocalizedIcon from './localized_icon';
 
 type Props = {
     overlayType: string;
 }
 
-const FileUploadOverlay: React.FC<Props> = (props: Props) => {
+const FileUploadOverlay = (props: Props) => {
+    const {formatMessage} = useIntl();
+
     let overlayClass = 'file-overlay hidden';
     if (props.overlayType === 'right') {
         overlayClass += ' right-file-overlay';
@@ -32,9 +31,9 @@ const FileUploadOverlay: React.FC<Props> = (props: Props) => {
                         alt='Files'
                     />
                     <span>
-                        <LocalizedIcon
+                        <i
                             className='fa fa-upload'
-                            title={{id: t('generic_icons.upload'), defaultMessage: 'Upload Icon'}}
+                            title={formatMessage({id: 'generic_icons.upload', defaultMessage: 'Upload Icon'})}
                         />
                         <FormattedMessage
                             id='upload_overlay.info'

webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap

@@ -15,15 +15,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
     >
       team_display_name
     </span>
-    <LocalizedIcon
+    <span
       className="fa fa-refresh fa-spin right signup-team__icon"
-      component="span"
-      title={
-        Object {
-          "defaultMessage": "Loading Icon",
-          "id": "generic_icons.loading",
-        }
-      }
     />
   </a>
 </div>
@@ -44,24 +37,11 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
     >
       team_display_name
     </span>
-    <LocalizedIcon
+    <i
       className="fa fa-lock light"
-      title={
-        Object {
-          "defaultMessage": "Private team",
-          "id": "select_team.private.icon",
-        }
-      }
     />
-    <LocalizedIcon
+    <span
       className="fa fa-angle-right right signup-team__icon"
-      component="span"
-      title={
-        Object {
-          "defaultMessage": "Join Team Icon",
-          "id": "select_team.join.icon",
-        }
-      }
     />
   </a>
 </div>
@@ -81,14 +61,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
     >
       team_display_name
     </span>
-    <LocalizedIcon
+    <i
       className="fa fa-lock light"
-      title={
-        Object {
-          "defaultMessage": "Private team",
-          "id": "select_team.private.icon",
-        }
-      }
     />
   </a>
 </div>
@@ -109,15 +83,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
     >
       team_display_name
     </span>
-    <LocalizedIcon
+    <span
       className="fa fa-angle-right right signup-team__icon"
-      component="span"
-      title={
-        Object {
-          "defaultMessage": "Join Team Icon",
-          "id": "select_team.join.icon",
-        }
-      }
     />
   </a>
 </div>
@@ -153,6 +120,24 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
         "props": Object {
           "canJoinPrivateTeams": false,
           "canJoinPublicTeams": true,
+          "intl": Object {
+            "formatMessage": [MockFunction] {
+              "calls": Array [
+                Array [
+                  Object {
+                    "defaultMessage": "Join Team Icon",
+                    "id": "select_team.join.icon",
+                  },
+                ],
+              ],
+              "results": Array [
+                Object {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            },
+          },
           "loading": false,
           "onTeamClick": [MockFunction],
           "team": Object {
@@ -192,6 +177,26 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
             "_element": <SelectTeamItem
               canJoinPrivateTeams={false}
               canJoinPublicTeams={true}
+              intl={
+                Object {
+                  "formatMessage": [MockFunction] {
+                    "calls": Array [
+                      Array [
+                        Object {
+                          "defaultMessage": "Join Team Icon",
+                          "id": "select_team.join.icon",
+                        },
+                      ],
+                    ],
+                    "results": Array [
+                      Object {
+                        "type": "return",
+                        "value": undefined,
+                      },
+                    ],
+                  },
+                }
+              }
               loading={false}
               onTeamClick={[MockFunction]}
               team={
@@ -248,15 +253,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
                 >
                   team_display_name
                 </span>
-                <LocalizedIcon
+                <span
                   className="fa fa-angle-right right signup-team__icon"
-                  component="span"
-                  title={
-                    Object {
-                      "defaultMessage": "Join Team Icon",
-                      "id": "select_team.join.icon",
-                    }
-                  }
                 />
               </a>
             </div>,
@@ -300,15 +298,8 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
     >
       team_display_name
     </span>
-    <LocalizedIcon
+    <span
       className="fa fa-angle-right right signup-team__icon"
-      component="span"
-      title={
-        Object {
-          "defaultMessage": "Join Team Icon",
-          "id": "select_team.join.icon",
-        }
-      }
     />
   </a>
 </div>

webapp/channels/src/components/select_team/components/select_team_item.test.tsx

@@ -6,7 +6,9 @@ import React from 'react';
 
 import type {Team} from '@mattermost/types/teams';
 
-import SelectTeamItem from './select_team_item';
+import type {MockIntl} from 'tests/helpers/intl-test-helper';
+
+import {SelectTeamItem} from './select_team_item';
 
 describe('components/select_team/components/SelectTeamItem', () => {
     const baseProps = {
@@ -15,6 +17,9 @@ describe('components/select_team/components/SelectTeamItem', () => {
         loading: false,
         canJoinPublicTeams: true,
         canJoinPrivateTeams: false,
+        intl: {
+            formatMessage: jest.fn(),
+        } as MockIntl,
     };
 
     test('should match snapshot, on public joinable', () => {

webapp/channels/src/components/select_team/components/select_team_item.tsx

@@ -3,26 +3,25 @@
 
 import React from 'react';
 import type {ReactNode, MouseEvent} from 'react';
+import {injectIntl, type WrappedComponentProps} from 'react-intl';
 
 import type {Team} from '@mattermost/types/teams';
 
-import LocalizedIcon from 'components/localized_icon';
 import OverlayTrigger from 'components/overlay_trigger';
 import Tooltip from 'components/tooltip';
 import TeamInfoIcon from 'components/widgets/icons/team_info_icon';
 
-import {t} from 'utils/i18n';
 import * as Utils from 'utils/utils';
 
-type Props = {
+interface Props extends WrappedComponentProps {
     team: Team;
     onTeamClick: (team: Team) => void;
     loading: boolean;
     canJoinPublicTeams: boolean;
     canJoinPrivateTeams: boolean;
-};
+}
 
-export default class SelectTeamItem extends React.PureComponent<Props> {
+export class SelectTeamItem extends React.PureComponent<Props> {
     handleTeamClick = (e: MouseEvent): void => {
         e.preventDefault();
         this.props.onTeamClick(this.props.team);
@@ -58,18 +57,16 @@ export default class SelectTeamItem extends React.PureComponent<Props> {
         let icon;
         if (loading) {
             icon = (
-                <LocalizedIcon
+                <span
                     className='fa fa-refresh fa-spin right signup-team__icon'
-                    component='span'
+                    title={this.props.intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
-                    title={{id: t('generic_icons.loading'), defaultMessage: 'Loading Icon'}}
                 />
             );
         } else {
             icon = (
-                <LocalizedIcon
+                <span
                     className='fa fa-angle-right right signup-team__icon'
-                    component='span'
+                    title={this.props.intl.formatMessage({id: 'select_team.join.icon', defaultMessage: 'Join Team Icon'})}
-                    title={{id: t('select_team.join.icon'), defaultMessage: 'Join Team Icon'}}
                 />
             );
         }
@@ -87,9 +84,9 @@ export default class SelectTeamItem extends React.PureComponent<Props> {
                 >
                     <span className='signup-team-dir__name'>{team.display_name}</span>
                     {!team.allow_open_invite &&
-                        <LocalizedIcon
+                        <i
                             className='fa fa-lock light'
-                            title={{id: t('select_team.private.icon'), defaultMessage: 'Private team'}}
+                            title={this.props.intl.formatMessage({id: 'select_team.private.icon', defaultMessage: 'Private team'})}
                         />}
                     {canJoin && icon}
                 </a>
@@ -97,3 +94,5 @@ export default class SelectTeamItem extends React.PureComponent<Props> {
         );
     }
 }
+
+export default injectIntl(SelectTeamItem);