[MM-54799] Convert ./components/widgets/menu/menu_header.tsx from Class Component to Function Component (#24847)

* Converted Menu Header to function Component

* Converted MenuHeader to Function Component an d fixed test file

* Added deprecated line

* added jsdoc above the component

* Added Suggested Changes

---------

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

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

@@ -37,7 +37,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
     id="statusDropdownMenu"
     listId="status-drop-down-menu-list"
   >
-    <MenuHeader
+    <Memo(MenuHeader)
       onClick={[Function]}
     >
       <div
@@ -57,7 +57,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
           @undefined
         </Text>
       </div>
-    </MenuHeader>
+    </Memo(MenuHeader)>
     <MenuGroup>
       <MenuItemAction
         ariaLabel="out of office"
@@ -271,7 +271,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
     id="statusDropdownMenu"
     listId="status-drop-down-menu-list"
   >
-    <MenuHeader
+    <Memo(MenuHeader)
       onClick={[Function]}
     >
       <div
@@ -291,7 +291,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
           @undefined
         </Text>
       </div>
-    </MenuHeader>
+    </Memo(MenuHeader)>
     <MenuGroup>
       <MenuItemAction
         ariaLabel="out of office"
@@ -586,7 +586,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
     id="statusDropdownMenu"
     listId="status-drop-down-menu-list"
   >
-    <MenuHeader
+    <Memo(MenuHeader)
       onClick={[Function]}
     >
       <div
@@ -606,7 +606,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
           @undefined
         </Text>
       </div>
-    </MenuHeader>
+    </Memo(MenuHeader)>
     <MenuGroup>
       <MenuItemAction
         ariaLabel="out of office"
@@ -853,7 +853,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
     id="statusDropdownMenu"
     listId="status-drop-down-menu-list"
   >
-    <MenuHeader
+    <Memo(MenuHeader)
       onClick={[Function]}
     >
       <div
@@ -873,7 +873,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
           @undefined
         </Text>
       </div>
-    </MenuHeader>
+    </Memo(MenuHeader)>
     <MenuGroup>
       <MenuItemAction
         ariaLabel="out of office"
@@ -1120,7 +1120,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
     id="statusDropdownMenu"
     listId="status-drop-down-menu-list"
   >
-    <MenuHeader
+    <Memo(MenuHeader)
       onClick={[Function]}
     >
       <div
@@ -1140,7 +1140,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
           @undefined
         </Text>
       </div>
-    </MenuHeader>
+    </Memo(MenuHeader)>
     <MenuGroup>
       <MenuItemAction
         ariaLabel="out of office"
@@ -1392,7 +1392,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
     id="statusDropdownMenu"
     listId="status-drop-down-menu-list"
   >
-    <MenuHeader
+    <Memo(MenuHeader)
       onClick={[Function]}
     >
       <Memo(Avatar)
@@ -1416,7 +1416,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
           @undefined
         </Text>
       </div>
-    </MenuHeader>
+    </Memo(MenuHeader)>
     <MenuGroup>
       <MenuItemAction
         ariaLabel="out of office"
@@ -1630,7 +1630,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
     id="statusDropdownMenu"
     listId="status-drop-down-menu-list"
   >
-    <MenuHeader
+    <Memo(MenuHeader)
       onClick={[Function]}
     >
       <div
@@ -1650,7 +1650,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
           @undefined
         </Text>
       </div>
-    </MenuHeader>
+    </Memo(MenuHeader)>
     <MenuGroup>
       <MenuItemAction
         ariaLabel="out of office"
@@ -1864,7 +1864,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
     id="statusDropdownMenu"
     listId="status-drop-down-menu-list"
   >
-    <MenuHeader
+    <Memo(MenuHeader)
       onClick={[Function]}
     >
       <div
@@ -1884,7 +1884,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
           @undefined
         </Text>
       </div>
-    </MenuHeader>
+    </Memo(MenuHeader)>
     <MenuGroup>
       <MenuItemAction
         ariaLabel="out of office"
@@ -2131,7 +2131,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
     id="statusDropdownMenu"
     listId="status-drop-down-menu-list"
   >
-    <MenuHeader
+    <Memo(MenuHeader)
       onClick={[Function]}
     >
       <div
@@ -2151,7 +2151,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
           @undefined
         </Text>
       </div>
-    </MenuHeader>
+    </Memo(MenuHeader)>
     <MenuGroup>
       <MenuItemAction
         ariaLabel="out of office"

webapp/channels/src/components/widgets/menu/menu_header.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 import './menu_header.scss';
 
 type Props = {
-    divider?: React.ReactNode;
     children?: React.ReactNode;
     onClick?: () => void;
 }
@@ -14,17 +13,15 @@ type Props = {
 /**
  * @deprecated Use the "webapp/channels/src/components/menu" instead.
  */
-export default class MenuHeader extends React.PureComponent<Props> {
+const MenuHeader = ({children, onClick}: Props) => {
-    public render() {
+    return (
-        const {children, onClick} = this.props;
+        <li
+            className='MenuHeader'
+            onClick={onClick}
+        >
+            {children}
+        </li>
+    );
+};
 
-        return (
+export default React.memo(MenuHeader);
-            <li
-                className='MenuHeader'
-                onClick={onClick}
-            >
-                {children}
-            </li>
-        );
-    }
-}