[MM-57722] Convert ./components/admin_console/team_channel_settings/group/group_list.tsx from Class Component to Function Component (#26721)

* [MM-57722] Convert `./components/admin_console/team_channel_settings/group/group_list.tsx` from Class Component to Function Component

* :refactor: improve code structure

webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_groups.test.tsx.snap

@@ -58,7 +58,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelGroups should match
     }
   }
 >
-  <Connect(GroupList)
+  <Connect(Component)
     channel={
       Object {
         "group_constrained": false,

webapp/channels/src/components/admin_console/team_channel_settings/group/__snapshots__/group_list.test.tsx.snap

@@ -34,12 +34,9 @@ exports[`admin_console/team_channel_settings/group/GroupList should match snapsh
   noPadding={false}
   onGroupRemoved={[MockFunction]}
   onPageChangedCallback={[MockFunction]}
-  removeGroup={[MockFunction]}
   renderRow={[Function]}
-  setNewGroupRole={[MockFunction]}
   total={1}
   totalGroups={0}
-  type="team"
 />
 `;
 
@@ -512,11 +509,8 @@ exports[`admin_console/team_channel_settings/group/GroupList should match snapsh
   noPadding={false}
   onGroupRemoved={[MockFunction]}
   onPageChangedCallback={[MockFunction]}
-  removeGroup={[MockFunction]}
   renderRow={[Function]}
-  setNewGroupRole={[MockFunction]}
   total={30}
   totalGroups={0}
-  type="team"
 />
 `;

webapp/channels/src/components/admin_console/team_channel_settings/group/group_list.test.tsx

@@ -38,7 +38,7 @@ describe('admin_console/team_channel_settings/group/GroupList', () => {
                 type='team'
                 setNewGroupRole={jest.fn()}
             />);
-        wrapper.setState({loading: false});
+
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -71,7 +71,7 @@ describe('admin_console/team_channel_settings/group/GroupList', () => {
                 removeGroup={jest.fn()}
                 setNewGroupRole={jest.fn()}
             />);
-        wrapper.setState({loading: false});
+
         expect(wrapper).toMatchSnapshot();
     });
 });

webapp/channels/src/components/admin_console/team_channel_settings/group/group_list.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, useCallback} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import type {Group} from '@mattermost/types/groups';
@@ -42,27 +42,33 @@ const Header = () => {
 
 type Props = OwnProps & PropsFromRedux;
 
-export default class GroupList extends React.PureComponent<Props> {
-    renderRow = (item: Partial<Group>) => {
+const GroupList = ({
+    removeGroup,
+    setNewGroupRole,
+    type,
+    isDisabled,
+    ...restProps
+}: Props) => {
+    const renderRow = useCallback((item: Partial<Group>) => {
         return (
             <GroupRow
                 key={item.id}
                 group={item}
-                removeGroup={this.props.removeGroup}
-                setNewGroupRole={this.props.setNewGroupRole}
-                type={this.props.type}
-                isDisabled={this.props.isDisabled}
+                removeGroup={removeGroup}
+                setNewGroupRole={setNewGroupRole}
+                type={type}
+                isDisabled={isDisabled}
             />
         );
-    };
+    }, [isDisabled, removeGroup, setNewGroupRole, type]);
 
-    render(): JSX.Element {
-        return (
-            <AbstractList
-                header={<Header/>}
-                renderRow={this.renderRow}
-                {...this.props}
-            />
-        );
-    }
-}
+    return (
+        <AbstractList
+            header={<Header/>}
+            renderRow={renderRow}
+            {...restProps}
+        />
+    );
+};
+
+export default memo(GroupList);

webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_groups.test.tsx.snap

@@ -77,7 +77,7 @@ exports[`admin_console/team_channel_settings/team/TeamGroups should match snapsh
     }
   }
 >
-  <Connect(GroupList)
+  <Connect(Component)
     groups={
       Array [
         Object {