From 8ba157f2847bced07260e03e9a51d01ea1efbc00 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Wed, 24 Apr 2024 13:11:40 +0500
Subject: [PATCH] [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
---
 .../channel_groups.test.tsx.snap              |  2 +-
 .../__snapshots__/group_list.test.tsx.snap    |  6 ---
 .../group/group_list.test.tsx                 |  4 +-
 .../group/group_list.tsx                      | 42 +++++++++++--------
 .../__snapshots__/team_groups.test.tsx.snap   |  2 +-
 5 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_groups.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_groups.test.tsx.snap
index d992271725..64c095d249 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_groups.test.tsx.snap
+++ b/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,
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/group/__snapshots__/group_list.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/group/__snapshots__/group_list.test.tsx.snap
index c87056c873..a69e587cc0 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/group/__snapshots__/group_list.test.tsx.snap
+++ b/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"
 />
 `;
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_list.test.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/group/group_list.test.tsx
index 994a36de8a..d5cde3e20d 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_list.test.tsx
+++ b/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();
     });
 });
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_list.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/group/group_list.tsx
index 07154863d3..ee8bedcd70 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_list.tsx
+++ b/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);
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_groups.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_groups.test.tsx.snap
index 96a4aaccf6..2556e6c8ce 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_groups.test.tsx.snap
+++ b/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 {