From 14dcdf7510346062ba369d7938408944310d5bd7 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Wed, 21 Feb 2024 15:04:15 +0500
Subject: [PATCH] [MM-56844] Convert
 `./components/admin_console/admin_sidebar_header/admin_sidebar_header.tsx`
 from Class Component to Function Component (#26233)

---
 .../__snapshots__/admin_sidebar.test.tsx.snap | 18 ++--
 .../admin_sidebar_header.tsx                  | 88 +++++++++----------
 2 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/admin_sidebar/__snapshots__/admin_sidebar.test.tsx.snap b/webapp/channels/src/components/admin_console/admin_sidebar/__snapshots__/admin_sidebar.test.tsx.snap
index 6c3850d38b..399683f4b4 100644
--- a/webapp/channels/src/components/admin_console/admin_sidebar/__snapshots__/admin_sidebar.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/admin_sidebar/__snapshots__/admin_sidebar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`components/AdminSidebar Plugins should filter plugins 1`] = `
 <div
   className="admin-sidebar"
 >
-  <Connect(SidebarHeader) />
+  <Connect(Component) />
   <div
     className="filter-container"
   >
@@ -84,7 +84,7 @@ exports[`components/AdminSidebar Plugins should match snapshot 1`] = `
 <div
   className="admin-sidebar"
 >
-  <Connect(SidebarHeader) />
+  <Connect(Component) />
   <div
     className="filter-container"
   >
@@ -491,7 +491,7 @@ exports[`components/AdminSidebar should match snapshot 1`] = `
 <div
   className="admin-sidebar"
 >
-  <Connect(SidebarHeader) />
+  <Connect(Component) />
   <div
     className="filter-container"
   >
@@ -1185,7 +1185,7 @@ exports[`components/AdminSidebar should match snapshot with workspace optimizati
 <div
   className="admin-sidebar"
 >
-  <Connect(SidebarHeader) />
+  <Connect(Component) />
   <div
     className="filter-container"
   >
@@ -1879,7 +1879,7 @@ exports[`components/AdminSidebar should match snapshot, no access 1`] = `
 <div
   className="admin-sidebar"
 >
-  <Connect(SidebarHeader) />
+  <Connect(Component) />
   <div
     className="filter-container"
   >
@@ -1934,7 +1934,7 @@ exports[`components/AdminSidebar should match snapshot, not prevent the console
 <div
   className="admin-sidebar"
 >
-  <Connect(SidebarHeader) />
+  <Connect(Component) />
   <div
     className="filter-container"
   >
@@ -2628,7 +2628,7 @@ exports[`components/AdminSidebar should match snapshot, render plugins without a
 <div
   className="admin-sidebar"
 >
-  <Connect(SidebarHeader) />
+  <Connect(Component) />
   <div
     className="filter-container"
   >
@@ -3322,7 +3322,7 @@ exports[`components/AdminSidebar should match snapshot, with license (with all f
 <div
   className="admin-sidebar"
 >
-  <Connect(SidebarHeader) />
+  <Connect(Component) />
   <div
     className="filter-container"
   >
@@ -4178,7 +4178,7 @@ exports[`components/AdminSidebar should match snapshot, with license (without an
 <div
   className="admin-sidebar"
 >
-  <Connect(SidebarHeader) />
+  <Connect(Component) />
   <div
     className="filter-container"
   >
diff --git a/webapp/channels/src/components/admin_console/admin_sidebar_header/admin_sidebar_header.tsx b/webapp/channels/src/components/admin_console/admin_sidebar_header/admin_sidebar_header.tsx
index 43c984207b..8ae6d13a75 100644
--- a/webapp/channels/src/components/admin_console/admin_sidebar_header/admin_sidebar_header.tsx
+++ b/webapp/channels/src/components/admin_console/admin_sidebar_header/admin_sidebar_header.tsx
@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import React, {memo} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import type {UserProfile} from '@mattermost/types/users';
 
@@ -13,54 +13,52 @@ import MenuIcon from 'components/widgets/icons/menu_icon';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 import Avatar from 'components/widgets/users/avatar';
 
-import * as Utils from 'utils/utils';
-
 type Props = {
     currentUser: UserProfile;
 }
 
-export default class SidebarHeader extends React.PureComponent<Props> {
-    public render() {
-        const me = this.props.currentUser;
-        let profilePicture = null;
+const SidebarHeader = ({currentUser: me}: Props) => {
+    const intl = useIntl();
+    let profilePicture = null;
 
-        if (!me) {
-            return null;
-        }
+    if (!me) {
+        return null;
+    }
 
-        if (me.last_picture_update) {
-            profilePicture = (
-                <Avatar
-                    username={me.username}
-                    url={Client4.getProfilePictureUrl(me.id, me.last_picture_update)}
-                    size='lg'
-                />
-            );
-        }
-
-        return (
-            <MenuWrapper className='AdminSidebarHeader'>
-                <div>
-                    {profilePicture}
-                    <div className='header__info'>
-                        <div className='team__name'>
-                            <FormattedMessage
-                                id='admin.sidebarHeader.systemConsole'
-                                defaultMessage='System Console'
-                            />
-                        </div>
-                        <div className='user__name overflow--ellipsis whitespace--nowrap'>{'@' + me.username}</div>
-                    </div>
-                    <button
-                        type='button'
-                        className='style--none'
-                        aria-label={Utils.localizeMessage('generic_icons.menu', 'Menu Icon')}
-                    >
-                        <MenuIcon className='menu-icon'/>
-                    </button>
-                </div>
-                <AdminNavbarDropdown/>
-            </MenuWrapper>
+    if (me.last_picture_update) {
+        profilePicture = (
+            <Avatar
+                username={me.username}
+                url={Client4.getProfilePictureUrl(me.id, me.last_picture_update)}
+                size='lg'
+            />
         );
     }
-}
+
+    return (
+        <MenuWrapper className='AdminSidebarHeader'>
+            <div>
+                {profilePicture}
+                <div className='header__info'>
+                    <div className='team__name'>
+                        <FormattedMessage
+                            id='admin.sidebarHeader.systemConsole'
+                            defaultMessage='System Console'
+                        />
+                    </div>
+                    <div className='user__name overflow--ellipsis whitespace--nowrap'>{'@' + me.username}</div>
+                </div>
+                <button
+                    type='button'
+                    className='style--none'
+                    aria-label={intl.formatMessage({id: 'generic_icons.menu', defaultMessage: 'Menu Icon'})}
+                >
+                    <MenuIcon className='menu-icon'/>
+                </button>
+            </div>
+            <AdminNavbarDropdown/>
+        </MenuWrapper>
+    );
+};
+
+export default memo(SidebarHeader);