From 440039ba98690a96700c9cc5424472ea56caf673 Mon Sep 17 00:00:00 2001
From: Aditi Patel <aditipatelpro@gmail.com>
Date: Wed, 13 Dec 2023 09:16:02 -0600
Subject: [PATCH] Migrate `./components/widgets/icons/fa_warning_icon.tsx` from
 Class Component to Function Component  (#25644)

* chore: migrate fa_warning_icon to functional component

* test: updated snapshots

* removed injectIntl funtion call

* test: updated snapshots
---
 .../request_button.test.tsx.snap              | 108 ++----------------
 .../widgets/icons/fa_warning_icon.tsx         |  24 ++--
 2 files changed, 23 insertions(+), 109 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap b/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap
index 06cdca2002..cc6f2d8e3e 100644
--- a/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap
@@ -115,54 +115,12 @@ exports[`components/admin_console/request_button/request_button.jsx should match
           <div
             className="alert alert-warning"
           >
-            <injectIntl(WarningIcon)>
-              <WarningIcon
-                intl={
-                  Object {
-                    "$t": [Function],
-                    "defaultFormats": Object {},
-                    "defaultLocale": "en",
-                    "defaultRichTextElements": undefined,
-                    "fallbackOnEmptyString": true,
-                    "formatDate": [Function],
-                    "formatDateTimeRange": [Function],
-                    "formatDateToParts": [Function],
-                    "formatDisplayName": [Function],
-                    "formatList": [Function],
-                    "formatListToParts": [Function],
-                    "formatMessage": [Function],
-                    "formatNumber": [Function],
-                    "formatNumberToParts": [Function],
-                    "formatPlural": [Function],
-                    "formatRelativeTime": [Function],
-                    "formatTime": [Function],
-                    "formatTimeToParts": [Function],
-                    "formats": Object {},
-                    "formatters": Object {
-                      "getDateTimeFormat": [Function],
-                      "getDisplayNames": [Function],
-                      "getListFormat": [Function],
-                      "getMessageFormat": [Function],
-                      "getNumberFormat": [Function],
-                      "getPluralRules": [Function],
-                      "getRelativeTimeFormat": [Function],
-                    },
-                    "locale": "en",
-                    "messages": Object {},
-                    "onError": [Function],
-                    "onWarn": [Function],
-                    "textComponent": "span",
-                    "timeZone": "Etc/UTC",
-                    "wrapRichTextChunksInFragment": undefined,
-                  }
-                }
-              >
-                <i
-                  className="fa fa-warning"
-                  title="Warning Icon"
-                />
-              </WarningIcon>
-            </injectIntl(WarningIcon)>
+            <Memo(WarningIcon)>
+              <i
+                className="fa fa-warning"
+                title="Warning Icon"
+              />
+            </Memo(WarningIcon)>
             <FormattedMessage
               defaultMessage="Error Message: {error}"
               id="error.message"
@@ -282,54 +240,12 @@ exports[`components/admin_console/request_button/request_button.jsx should match
           <div
             className="alert alert-warning"
           >
-            <injectIntl(WarningIcon)>
-              <WarningIcon
-                intl={
-                  Object {
-                    "$t": [Function],
-                    "defaultFormats": Object {},
-                    "defaultLocale": "en",
-                    "defaultRichTextElements": undefined,
-                    "fallbackOnEmptyString": true,
-                    "formatDate": [Function],
-                    "formatDateTimeRange": [Function],
-                    "formatDateToParts": [Function],
-                    "formatDisplayName": [Function],
-                    "formatList": [Function],
-                    "formatListToParts": [Function],
-                    "formatMessage": [Function],
-                    "formatNumber": [Function],
-                    "formatNumberToParts": [Function],
-                    "formatPlural": [Function],
-                    "formatRelativeTime": [Function],
-                    "formatTime": [Function],
-                    "formatTimeToParts": [Function],
-                    "formats": Object {},
-                    "formatters": Object {
-                      "getDateTimeFormat": [Function],
-                      "getDisplayNames": [Function],
-                      "getListFormat": [Function],
-                      "getMessageFormat": [Function],
-                      "getNumberFormat": [Function],
-                      "getPluralRules": [Function],
-                      "getRelativeTimeFormat": [Function],
-                    },
-                    "locale": "en",
-                    "messages": Object {},
-                    "onError": [Function],
-                    "onWarn": [Function],
-                    "textComponent": "span",
-                    "timeZone": "Etc/UTC",
-                    "wrapRichTextChunksInFragment": undefined,
-                  }
-                }
-              >
-                <i
-                  className="fa fa-warning"
-                  title="Warning Icon"
-                />
-              </WarningIcon>
-            </injectIntl(WarningIcon)>
+            <Memo(WarningIcon)>
+              <i
+                className="fa fa-warning"
+                title="Warning Icon"
+              />
+            </Memo(WarningIcon)>
             <FormattedMessage
               defaultMessage="Error Message: {error}"
               id="error.message"
diff --git a/webapp/channels/src/components/widgets/icons/fa_warning_icon.tsx b/webapp/channels/src/components/widgets/icons/fa_warning_icon.tsx
index 0f827949ec..d73f0cdd78 100644
--- a/webapp/channels/src/components/widgets/icons/fa_warning_icon.tsx
+++ b/webapp/channels/src/components/widgets/icons/fa_warning_icon.tsx
@@ -3,22 +3,20 @@
 
 import classNames from 'classnames';
 import React from 'react';
-import {injectIntl, type IntlShape} from 'react-intl';
+import {useIntl} from 'react-intl';
 
 type Props = {
     additionalClassName?: string;
-    intl: IntlShape;
 }
 
-class WarningIcon extends React.PureComponent<Props> {
-    public render(): JSX.Element {
-        return (
-            <i
-                className={classNames('fa fa-warning', this.props.additionalClassName)}
-                title={this.props.intl.formatMessage({id: 'generic_icons.warning', defaultMessage: 'Warning Icon'})}
-            />
-        );
-    }
-}
+const WarningIcon = ({additionalClassName}: Props) => {
+    const {formatMessage} = useIntl();
+    return (
+        <i
+            className={classNames('fa fa-warning', additionalClassName)}
+            title={formatMessage({id: 'generic_icons.warning', defaultMessage: 'Warning Icon'})}
+        />
+    );
+};
 
-export default injectIntl(WarningIcon);
+export default React.memo(WarningIcon);