[MM-57723] Convert ./components/admin_console/system_user_detail/team_list/team_list_dropdown.tsx from Class Component to Function Component (#26720)

* [MM-57723] Convert `./components/admin_console/system_user_detail/team_list/team_list_dropdown.tsx` from Class Component to Function Component

* 🎨 Improve code quality

webapp/channels/src/components/admin_console/system_user_detail/team_list/team_list_dropdown.tsx

@@ -1,14 +1,13 @@
 // 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 EllipsisHorizontalIcon from 'components/widgets/icons/ellipsis_h_icon';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 
-import {localizeMessage} from 'utils/utils';
-
 import type {TeamWithMembership} from './types';
 
 type Props = {
@@ -19,66 +18,63 @@ type Props = {
     isDisabled?: boolean;
 }
 
-type State = {
+const TeamListDropdown = ({
-    serverError: string | null;
+    team,
-}
+    doRemoveUserFromTeam,
+    doMakeUserTeamAdmin,
+    doMakeUserTeamMember,
+    isDisabled,
+}: Props) => {
+    const intl = useIntl();
 
-export default class TeamListDropdown extends React.PureComponent<Props, State> {
+    const isAdmin = team.scheme_admin;
-    public constructor(props: Props) {
+    const isMember = team.scheme_user && !team.scheme_admin;
-        super(props);
+    const isGuest = team.scheme_guest;
+    const showMakeTeamAdmin = !isAdmin && !isGuest;
+    const showMakeTeamMember = !isMember && !isGuest;
 
-        this.state = {
+    const makeTeamAdminOnClick = useCallback(() => doMakeUserTeamAdmin(team.id), [team.id, doMakeUserTeamAdmin]);
-            serverError: null,
+    const makeTeamMemberOnClick = useCallback(() => doMakeUserTeamMember(team.id), [team.id, doMakeUserTeamMember]);
-        };
+    const removeUserTeamOnClick = useCallback(() => doRemoveUserFromTeam(team.id), [team.id, doRemoveUserFromTeam]);
-    }
 
-    public render(): JSX.Element {
+    return (
-        const {team} = this.props;
+        <MenuWrapper isDisabled={isDisabled}>
-        const isAdmin = team.scheme_admin;
+            <button
-        const isMember = team.scheme_user && !team.scheme_admin;
+                type='button'
-        const isGuest = team.scheme_guest;
+                id={`teamListDropdown_${team.id}`}
-        const showMakeTeamAdmin = !isAdmin && !isGuest;
+                className='dropdown-toggle theme color--link style--none'
-        const showMakeTeamMember = !isMember && !isGuest;
+                aria-expanded='true'
-
-        return (
-            <MenuWrapper
-                isDisabled={this.props.isDisabled}
             >
-                <button
+                <span className='SystemUserDetail__actions-menu-icon'><EllipsisHorizontalIcon/></span>
-                    type='button'
+            </button>
-                    id={`teamListDropdown_${team.id}`}
+            <div>
-                    className='dropdown-toggle theme color--link style--none'
+                <Menu
-                    aria-expanded='true'
+                    openLeft={true}
+                    openUp={false}
+                    ariaLabel={intl.formatMessage({id: 'team_members_dropdown.menuAriaLabel', defaultMessage: 'Change the role of a team member'})}
                 >
-                    <span className='SystemUserDetail__actions-menu-icon'><EllipsisHorizontalIcon/></span>
+                    <Menu.ItemAction
-                </button>
+                        id='makeTeamAdmin'
-                <div>
+                        show={showMakeTeamAdmin}
-                    <Menu
+                        onClick={makeTeamAdminOnClick}
-                        openLeft={true}
+                        text={intl.formatMessage({id: 'team_members_dropdown.makeAdmin', defaultMessage: 'Make Team Admin'})}
-                        openUp={false}
+                    />
-                        ariaLabel={localizeMessage('team_members_dropdown.menuAriaLabel', 'Change the role of a team member')}
+                    <Menu.ItemAction
-                    >
+                        show={showMakeTeamMember}
-                        <Menu.ItemAction
+                        onClick={makeTeamMemberOnClick}
-                            id='makeTeamAdmin'
+                        text={intl.formatMessage({id: 'team_members_dropdown.makeMember', defaultMessage: 'Make Team Member'})}
-                            show={showMakeTeamAdmin}
+                    />
-                            onClick={() => this.props.doMakeUserTeamAdmin(team.id)}
+                    <Menu.ItemAction
-                            text={localizeMessage('team_members_dropdown.makeAdmin', 'Make Team Admin')}
+                        id='removeFromTeam'
-                        />
+                        show={true}
-                        <Menu.ItemAction
+                        onClick={removeUserTeamOnClick}
-                            show={showMakeTeamMember}
+                        text={intl.formatMessage({id: 'team_members_dropdown.leave_team', defaultMessage: 'Remove from Team'})}
-                            onClick={() => this.props.doMakeUserTeamMember(team.id)}
+                        buttonClass='SystemUserDetail__action-remove-team'
-                            text={localizeMessage('team_members_dropdown.makeMember', 'Make Team Member')}
+                    />
-                        />
+                </Menu>
-                        <Menu.ItemAction
+            </div>
-                            id='removeFromTeam'
+        </MenuWrapper>
-                            show={true}
+    );
-                            onClick={() => this.props.doRemoveUserFromTeam(team.id)}
+};
-                            text={localizeMessage('team_members_dropdown.leave_team', 'Remove from Team')}
+
-                            buttonClass='SystemUserDetail__action-remove-team'
+export default memo(TeamListDropdown);
-                        />
-                    </Menu>
-                </div>
-            </MenuWrapper>
-        );
-    }
-}