[MM-54795] Convert ./components/widgets/icons/fa_previous_icon.tsx to function component (#24786)

* chore(channels): convert previous icon to functional components

* chore(channels): change to arrow function, remove `t`, and use `classNames`

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_users.test.tsx.snap

@@ -212,9 +212,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -442,9 +440,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next "
@@ -672,9 +668,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next "
@@ -862,9 +856,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -1092,9 +1084,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -1364,9 +1354,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"

webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap

@@ -310,9 +310,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -439,9 +437,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -568,9 +564,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -732,9 +726,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -987,9 +979,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -1242,9 +1232,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -1406,9 +1394,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"
@@ -1597,9 +1583,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"

webapp/channels/src/components/admin_console/system_user_detail/team_list/__snapshots__/abstract_list.test.tsx.snap

@@ -248,9 +248,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next "
@@ -477,9 +475,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next "
@@ -594,9 +590,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
       onClick={[Function]}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"

webapp/channels/src/components/admin_console/team_channel_settings/__snapshots__/abstract_list.test.tsx.snap

@@ -112,9 +112,7 @@ exports[`admin_console/team_channel_settings/AbstractList should match snapshot,
       disabled={true}
       type="button"
     >
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
     </button>
     <button
       className="btn btn-tertiary next disabled"

webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap

@@ -48,9 +48,7 @@ exports[`ProductNoticesModal Match snapshot for user notice 1`] = `
   bodyPadding={true}
   cancelButtonText={
     <React.Fragment>
-      <PreviousIcon
+      <Memo(PreviousIcon) />
-        additionalClassName={null}
-      />
       <Memo(MemoizedFormattedMessage)
         defaultMessage="Previous"
         id="generic.previous"

webapp/channels/src/components/widgets/icons/fa_previous_icon.tsx

@@ -1,28 +1,29 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import React from 'react';
+import {defineMessage} from 'react-intl';
 
 import LocalizedIcon from 'components/localized_icon';
 
-import {t} from 'utils/i18n';
-
 type Props = {
-    additionalClassName: string | null;
+    additionalClassName?: string;
 }
 
-export default class PreviousIcon extends React.PureComponent<Props> {
+const iconTitle = defineMessage({
-    public static defaultProps: Props = {
+    id: 'generic_icons.previous',
-        additionalClassName: null,
+    defaultMessage: 'Previous Icon',
-    };
+});
+
+const PreviousIcon = ({additionalClassName}: Props) => {
+    return (
+        <LocalizedIcon
+            className={classNames('icon icon-chevron-left', additionalClassName)}
+            title={iconTitle}
+        />
+    );
+};
+
+export default React.memo(PreviousIcon);
 
-    public render(): JSX.Element {
-        const className = 'icon icon-chevron-left' + (this.props.additionalClassName ? ' ' + this.props.additionalClassName : '');
-        return (
-            <LocalizedIcon
-                className={className}
-                title={{id: t('generic_icons.previous'), defaultMessage: 'Previous Icon'}}
-            />
-        );
-    }
-}