[MM-56842] Convert ./components/status_icon.tsx from Class Component to Function Component (#26257)

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

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

@@ -76,9 +76,7 @@ exports[`components/ChannelHeader should match snapshot with last active display
           dir="auto"
           id="channelHeaderDescription"
         >
-          <StatusIcon
+          <Memo(StatusIcon)
-            button={false}
-            className=""
             status="offline"
           />
           <span
@@ -372,9 +370,7 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
           dir="auto"
           id="channelHeaderDescription"
         >
-          <StatusIcon
+          <Memo(StatusIcon)
-            button={false}
-            className=""
             status="offline"
           />
           <span
@@ -2344,9 +2340,7 @@ exports[`components/ChannelHeader should render properly when custom status is e
           dir="auto"
           id="channelHeaderDescription"
         >
-          <StatusIcon
+          <Memo(StatusIcon)
-            button={false}
-            className=""
             status="offline"
           />
           <span
@@ -2638,9 +2632,7 @@ exports[`components/ChannelHeader should render properly when custom status is s
           dir="auto"
           id="channelHeaderDescription"
         >
-          <StatusIcon
+          <Memo(StatusIcon)
-            button={false}
-            className=""
             status="offline"
           />
           <span

webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap

@@ -151,9 +151,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                     </span>
                   </button>
                 </RoundButton>
-                <StatusIcon
+                <Memo(StatusIcon)
-                  button={false}
-                  className=""
                   status="status"
                 >
                   <StatusOfflineIcon
@@ -184,7 +182,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                       </svg>
                     </span>
                   </StatusOfflineIcon>
-                </StatusIcon>
+                </Memo(StatusIcon)>
               </span>
             </OverlayTrigger>
           </OverlayTrigger>
@@ -422,9 +420,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                     </span>
                   </button>
                 </RoundButton>
-                <StatusIcon
+                <Memo(StatusIcon)
-                  button={false}
-                  className=""
                   status="status"
                 >
                   <StatusOfflineIcon
@@ -455,7 +451,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                       </svg>
                     </span>
                   </StatusOfflineIcon>
-                </StatusIcon>
+                </Memo(StatusIcon)>
               </span>
             </OverlayTrigger>
           </OverlayTrigger>
@@ -699,9 +695,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                     </span>
                   </button>
                 </RoundButton>
-                <StatusIcon
+                <Memo(StatusIcon)
-                  button={false}
-                  className=""
                   status="status"
                 >
                   <StatusOfflineIcon
@@ -732,7 +726,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                       </svg>
                     </span>
                   </StatusOfflineIcon>
-                </StatusIcon>
+                </Memo(StatusIcon)>
               </span>
             </OverlayTrigger>
           </OverlayTrigger>
@@ -1038,9 +1032,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                     </span>
                   </button>
                 </RoundButton>
-                <StatusIcon
+                <Memo(StatusIcon)
-                  button={false}
-                  className=""
                   status="status"
                 >
                   <StatusOfflineIcon
@@ -1071,7 +1063,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                       </svg>
                     </span>
                   </StatusOfflineIcon>
-                </StatusIcon>
+                </Memo(StatusIcon)>
               </span>
             </OverlayTrigger>
           </OverlayTrigger>

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

@@ -12,9 +12,7 @@ exports[`components/ProfilePicture should match snapshot, no user specified, def
       url="http://example.com/image.png"
     />
   </span>
-  <StatusIcon
+  <Memo(StatusIcon)
-    button={false}
-    className=""
     status="away"
   />
 </span>
@@ -32,9 +30,7 @@ exports[`components/ProfilePicture should match snapshot, no user specified, ove
       url="http://example.com/image.png"
     />
   </span>
-  <StatusIcon
+  <Memo(StatusIcon)
-    button={false}
-    className=""
     status="away"
   />
 </span>
@@ -76,9 +72,7 @@ exports[`components/ProfilePicture should match snapshot, profile and src, defau
         />
       </span>
     </RoundButton>
-    <StatusIcon
+    <Memo(StatusIcon)
-      button={false}
-      className=""
       status="away"
     />
   </span>
@@ -97,9 +91,7 @@ exports[`components/ProfilePicture should match snapshot, user specified 1`] = `
       url="http://example.com/image.png"
     />
   </span>
-  <StatusIcon
+  <Memo(StatusIcon)
-    button={false}
-    className=""
     status="away"
   />
 </span>
@@ -117,9 +109,7 @@ exports[`components/ProfilePicture should match snapshot, user specified, overri
       url="http://example.com/image.png"
     />
   </span>
-  <StatusIcon
+  <Memo(StatusIcon)
-    button={false}
-    className=""
     status="away"
   />
 </span>

webapp/channels/src/components/status_icon.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 
 import StatusAwayAvatarIcon from 'components/widgets/icons/status_away_avatar_icon';
 import StatusAwayIcon from 'components/widgets/icons/status_away_icon';
@@ -19,47 +19,39 @@ type Props = {
     type?: string;
 }
 
-export default class StatusIcon extends React.PureComponent<Props> {
+const StatusIcon = ({
-    static defaultProps = {
+    className = '',
-        className: '',
+    button = false,
-        button: false,
+    status,
-    };
+    type,
-
+}: Props) => {
-    render() {
+    if (!status) {
-        const {button, status, type} = this.props;
+        return null;
-
-        if (!status) {
-            return null;
-        }
-
-        let className = 'status ' + this.props.className;
-
-        if (button) {
-            className = this.props.className || '';
-        }
-
-        let IconComponent: React.ComponentType<{className?: string}> | string;
-        const iconComponentProps = {className};
-        if (type === 'avatar') {
-            if (status === 'online') {
-                IconComponent = StatusOnlineAvatarIcon;
-            } else if (status === 'away') {
-                IconComponent = StatusAwayAvatarIcon;
-            } else if (status === 'dnd') {
-                IconComponent = StatusDndAvatarIcon;
-            } else {
-                IconComponent = StatusOfflineAvatarIcon;
-            }
-        } else if (status === 'online') {
-            IconComponent = StatusOnlineIcon;
-        } else if (status === 'away') {
-            IconComponent = StatusAwayIcon;
-        } else if (status === 'dnd') {
-            IconComponent = StatusDndIcon;
-        } else {
-            IconComponent = StatusOfflineIcon;
-        }
-
-        return <IconComponent {...iconComponentProps}/>;
     }
-}
+
+    let iconClassName = `status ${className}`;
+
+    if (button) {
+        iconClassName = className || '';
+    }
+
+    if (type === 'avatar') {
+        if (status === 'online') {
+            return <StatusOnlineAvatarIcon className={iconClassName}/>;
+        } else if (status === 'away') {
+            return <StatusAwayAvatarIcon className={iconClassName}/>;
+        } else if (status === 'dnd') {
+            return <StatusDndAvatarIcon className={iconClassName}/>;
+        }
+        return <StatusOfflineAvatarIcon className={iconClassName}/>;
+    } else if (status === 'online') {
+        return <StatusOnlineIcon className={iconClassName}/>;
+    } else if (status === 'away') {
+        return <StatusAwayIcon className={iconClassName}/>;
+    } else if (status === 'dnd') {
+        return <StatusDndIcon className={iconClassName}/>;
+    }
+    return <StatusOfflineIcon className={iconClassName}/>;
+};
+
+export default memo(StatusIcon);

webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap

@@ -63,10 +63,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
             />
           </Memo(Avatar)>
         </span>
-        <StatusIcon
+        <Memo(StatusIcon) />
-          button={false}
-          className=""
-        />
       </span>
       <span
         className="suggestion-list__ellipsis"
@@ -162,10 +159,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
             />
           </Memo(Avatar)>
         </span>
-        <StatusIcon
+        <Memo(StatusIcon) />
-          button={false}
-          className=""
-        />
       </span>
       <span
         className="suggestion-list__ellipsis"