[MM-52828] Migrate "components/admin_console/team_channel_settings/group/index.js" (#25640)

* migrating team_channel_settings/group/index.js to .tsx

* fixing CI/Lint issues

* Fixed eslint issues, changed Props export and usage structure in index.ts and group_list.tsx

* Remove empty array in getData call

* Update promise to void in AbstractList and response to unknown Group | Team

* remove bindActionCreators and dispatch Type from team_channel_settings/group/index.ts

---------

Co-authored-by: Kapil Dutta <duttakapil@Kapils-MacBook-Pro.local>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/team_channel_settings/abstract_list.tsx

@@ -31,7 +31,7 @@ type Props = {
     emptyListTextId: string;
     emptyListTextDefaultMessage: string;
     actions: {
-        getData: (page: number, perPage: number, notAssociatedToGroup?: string, excludeDefaultChannels?: boolean, includeDeleted?: boolean) => Promise<Array<Group | Team>>;
+        getData: (page: number, perPage: number, notAssociatedToGroup?: string, excludeDefaultChannels?: boolean, includeDeleted?: boolean) => Promise<void>;
     };
     noPadding?: boolean;
 };
@@ -107,7 +107,7 @@ export default class AbstractList extends React.PureComponent<Props, State> {
 
         this.props.actions.getData(page, PAGE_SIZE, '', false, true).then((response) => {
             if (this.props.onPageChangedCallback) {
-                this.props.onPageChangedCallback(this.getPaging(), response);
+                this.props.onPageChangedCallback(this.getPaging(), response as unknown as Array<Group | Team>);
             }
             this.setState({loading: false});
         });

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

@@ -11,11 +11,11 @@ import {ChannelGroups} from './channel_groups';
 
 describe('admin_console/team_channel_settings/channel/ChannelGroups', () => {
     test('should match snapshot', () => {
-        const groups: Array<Partial<Group>> = [{
+        const groups: Group[] = [{
             id: '123',
             display_name: 'DN',
             member_count: 3,
-        }];
+        } as Group];
 
         const testChannel: Partial<Channel> & {team_name: string} = {
             id: '123',

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

@@ -20,7 +20,7 @@ interface ChannelGroupsProps {
     channel: Partial<Channel>;
     onAddCallback: (groupIDs: string[]) => void;
     totalGroups: number;
-    groups: Array<Partial<Group>>;
+    groups: Group[];
     removedGroups: Array<{[key: string]: any}>;
     onGroupRemoved: (gid: string) => void;
     setNewGroupRole: (gid: string) => void;

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

@@ -28,13 +28,17 @@ exports[`admin_console/team_channel_settings/group/GroupList should match snapsh
   }
   emptyListTextDefaultMessage="test"
   emptyListTextId="test"
+  groups={Array []}
   header={<Header />}
+  isModeSync={false}
   noPadding={false}
+  onGroupRemoved={[MockFunction]}
   onPageChangedCallback={[MockFunction]}
   removeGroup={[MockFunction]}
   renderRow={[Function]}
   setNewGroupRole={[MockFunction]}
   total={1}
+  totalGroups={0}
   type="team"
 />
 `;
@@ -502,13 +506,17 @@ exports[`admin_console/team_channel_settings/group/GroupList should match snapsh
   }
   emptyListTextDefaultMessage="test"
   emptyListTextId="test"
+  groups={Array []}
   header={<Header />}
+  isModeSync={false}
   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

@@ -16,7 +16,6 @@ describe('admin_console/team_channel_settings/group/GroupList', () => {
             id: '123',
             display_name: 'DN',
             member_count: 3,
-
         })];
 
         const actions = {
@@ -26,6 +25,10 @@ describe('admin_console/team_channel_settings/group/GroupList', () => {
         const wrapper = shallow(
             <GroupList
                 data={testGroups}
+                groups={[]}
+                onGroupRemoved={jest.fn()}
+                isModeSync={false}
+                totalGroups={0}
                 onPageChangedCallback={jest.fn()}
                 total={testGroups.length}
                 emptyListTextId={'test'}
@@ -55,6 +58,10 @@ describe('admin_console/team_channel_settings/group/GroupList', () => {
         const wrapper = shallow(
             <GroupList
                 data={testGroups}
+                groups={[]}
+                onGroupRemoved={jest.fn()}
+                isModeSync={false}
+                totalGroups={0}
                 onPageChangedCallback={jest.fn()}
                 total={30}
                 emptyListTextId={'test'}

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

@@ -4,14 +4,14 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import type {Channel} from '@mattermost/types/channels';
 import type {Group} from '@mattermost/types/groups';
-import type {Team} from '@mattermost/types/teams';
 
 import AbstractList from 'components/admin_console/team_channel_settings/abstract_list';
 
 import GroupRow from './group_row';
 
+import type {PropsFromRedux, OwnProps} from './index';
+
 const Header = () => {
     return (
         <div className='groups-list--header'>
@@ -40,22 +40,7 @@ const Header = () => {
     );
 };
 
-interface Props {
+type Props = OwnProps & PropsFromRedux;
-    data?: Group[];
-    onPageChangedCallback?: () => void;
-    total: number;
-    emptyListTextId: string;
-    emptyListTextDefaultMessage: string;
-    actions: {
-        getData: () => Promise<Group[]>;
-    };
-    removeGroup: (gid: string) => void;
-    setNewGroupRole: (gid: string) => void;
-    type: string;
-    team?: Team;
-    channel?: Partial<Channel>;
-    isDisabled?: boolean;
-}
 
 export default class GroupList extends React.PureComponent<Props> {
     renderRow = (item: Partial<Group>) => {

webapp/channels/src/components/admin_console/team_channel_settings/group/index.js

@@ -1,30 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-
-import {t} from 'utils/i18n';
-
-import List from './group_list';
-
-function mapStateToProps(state, {groups, totalGroups, isModeSync, onGroupRemoved, setNewGroupRole}) {
-    return {
-        data: groups,
-        removeGroup: onGroupRemoved,
-        setNewGroupRole,
-        emptyListTextId: isModeSync ? t('admin.team_channel_settings.group_list.no-synced-groups') : t('admin.team_channel_settings.group_list.no-groups'),
-        emptyListTextDefaultMessage: isModeSync ? 'At least one group must be specified' : 'No groups specified yet',
-        total: totalGroups,
-    };
-}
-
-function mapDispatchToProps() {
-    return {
-        actions: {
-            getData: () => Promise.resolve(),
-        },
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(List);
-

webapp/channels/src/components/admin_console/team_channel_settings/group/index.ts

@@ -0,0 +1,54 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import type {ConnectedProps} from 'react-redux';
+
+import type {Channel} from '@mattermost/types/channels';
+import type {Group} from '@mattermost/types/groups';
+import type {Team} from '@mattermost/types/teams';
+
+import {t} from 'utils/i18n';
+
+import type {GlobalState} from 'types/store';
+
+import GroupList from './group_list';
+
+export type OwnProps = {
+    groups: Group[];
+    onGroupRemoved: (gid: string) => void;
+    setNewGroupRole: (gid: string) => void;
+    isModeSync: boolean;
+    totalGroups: number;
+    isDisabled?: boolean;
+    type: string;
+    onPageChangedCallback?: () => void;
+    team?: Team;
+    channel?: Partial<Channel>;
+}
+
+function mapStateToProps(state: GlobalState, ownProps: OwnProps) {
+    return {
+        data: ownProps.groups,
+        removeGroup: ownProps.onGroupRemoved,
+        setNewGroupRole: ownProps.setNewGroupRole,
+        emptyListTextId: ownProps.isModeSync ? t('admin.team_channel_settings.group_list.no-synced-groups') : t('admin.team_channel_settings.group_list.no-groups'),
+        emptyListTextDefaultMessage: ownProps.isModeSync ? 'At least one group must be specified' : 'No groups specified yet',
+        total: ownProps.totalGroups,
+    };
+}
+
+function mapDispatchToProps() {
+    return {
+        actions: {
+            getData: () => Promise.resolve(),
+        },
+    };
+}
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export default connector(GroupList);
+