[MM-57721] Convert ./components/channel_header_dropdown/menu_items/leave_channel/leave_channel.tsx from Class Component to Function Component (#26722)

* [MM-57721] Convert `./components/channel_header_dropdown/menu_items/leave_channel/leave_channel.tsx` from Class Component to Function Component

* fix failing tests

---------

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

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

@@ -643,7 +643,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         text="Convert to Private Channel"
       />
     </Connect(Component)>
-    <Connect(LeaveChannel)
+    <Connect(Component)
       channel={
         Object {
           "create_at": 0,
@@ -1475,7 +1475,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         text="Convert to Private Channel"
       />
     </Connect(Component)>
-    <Connect(LeaveChannel)
+    <Connect(Component)
       channel={
         Object {
           "create_at": 0,

webapp/channels/src/components/channel_header_dropdown/menu_items/leave_channel/leave_channel.test.tsx

@@ -26,7 +26,7 @@ describe('components/ChannelHeaderDropdown/MenuItem.LeaveChannel', () => {
     };
 
     it('should match snapshot', () => {
-        const wrapper = shallow<LeaveChannel>(<LeaveChannel {...baseProps}/>);
+        const wrapper = shallow(<LeaveChannel {...baseProps}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -35,7 +35,7 @@ describe('components/ChannelHeaderDropdown/MenuItem.LeaveChannel', () => {
             ...baseProps,
             isDefault: true,
         };
-        const wrapper = shallow<LeaveChannel>(<LeaveChannel {...props}/>);
+        const wrapper = shallow(<LeaveChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -59,7 +59,7 @@ describe('components/ChannelHeaderDropdown/MenuItem.LeaveChannel', () => {
             channel: {...baseProps.channel},
             actions: {...baseProps.actions},
         };
-        const wrapper = shallow<LeaveChannel>(<LeaveChannel {...props}/>);
+        const wrapper = shallow(<LeaveChannel {...props}/>);
 
         wrapper.find(Menu.ItemAction).simulate('click', {
             preventDefault: jest.fn(),

webapp/channels/src/components/channel_header_dropdown/menu_items/leave_channel/leave_channel.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo, useCallback} from 'react';
+import {useIntl} from 'react-intl';
 
 import type {Channel} from '@mattermost/types/channels';
 
@@ -9,7 +10,6 @@ import LeaveChannelModal from 'components/leave_channel_modal';
 import Menu from 'components/widgets/menu/menu';
 
 import {Constants, ModalIdentifiers} from 'utils/constants';
-import {localizeMessage} from 'utils/utils';
 
 import type {PropsFromRedux} from './index';
 
@@ -36,23 +36,21 @@ interface Props extends PropsFromRedux {
     id?: string;
 }
 
-export default class LeaveChannel extends React.PureComponent<Props> {
+const LeaveChannel = ({
-    static defaultProps = {
+    isDefault = true,
-        isDefault: true,
+    isGuestUser = false,
-        isGuestUser: false,
+    channel,
-    };
+    actions: {
+        leaveChannel,
+        openModal,
+    },
+    id,
+}: Props) => {
+    const intl = useIntl();
 
-    handleLeave = (e: Event) => {
+    const handleLeave = useCallback((e: Event) => {
         e.preventDefault();
 
-        const {
-            channel,
-            actions: {
-                leaveChannel,
-                openModal,
-            },
-        } = this.props;
-
         if (channel.type === Constants.PRIVATE_CHANNEL) {
             openModal({
                 modalId: ModalIdentifiers.LEAVE_PRIVATE_CHANNEL_MODAL,
@@ -64,19 +62,17 @@ export default class LeaveChannel extends React.PureComponent<Props> {
         } else {
             leaveChannel(channel.id);
         }
-    };
+    }, [channel, leaveChannel, openModal]);
 
-    render() {
+    return (
-        const {channel, isDefault, isGuestUser, id} = this.props;
+        <Menu.ItemAction
+            id={id}
+            show={(!isDefault || isGuestUser) && channel.type !== Constants.DM_CHANNEL && channel.type !== Constants.GM_CHANNEL}
+            onClick={handleLeave}
+            text={intl.formatMessage({id: 'channel_header.leave', defaultMessage: 'Leave Channel'})}
+            isDangerous={true}
+        />
+    );
+};
 
-        return (
+export default memo(LeaveChannel);
-            <Menu.ItemAction
-                id={id}
-                show={(!isDefault || isGuestUser) && channel.type !== Constants.DM_CHANNEL && channel.type !== Constants.GM_CHANNEL}
-                onClick={this.handleLeave}
-                text={localizeMessage('channel_header.leave', 'Leave Channel')}
-                isDangerous={true}
-            />
-        );
-    }
-}