feat: add members data table to group detail page

src/components/PeopleManagement/EnrollmentsTableColumnHeader.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+const EnrollmentsTableColumnHeader = () => (
+  <span data-testid="members-table-enrollments-column-header">
+    <FormattedMessage
+      id="people.management.groups.detail.page.learnersTable.enrollmentsColumn"
+      defaultMessage="Enrollments"
+      description="Enrollments column header in the Members table"
+    />
+  </span>
+);
+
+export default EnrollmentsTableColumnHeader;

src/components/PeopleManagement/GroupDetailPage.jsx

@@ -11,6 +11,8 @@ import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
 import DeleteGroupModal from './DeleteGroupModal';
 import EditGroupNameModal from './EditGroupNameModal';
 import formatDates from './utils';
+import GroupMembersTable from './GroupMembersTable';
+import useEnterpriseGroupLearnersTableData from '../learner-credit-management/data/hooks/useEnterpriseGroupLearnersTableData';
 
 const GroupDetailPage = () => {
   const intl = useIntl();
@@ -20,7 +22,11 @@ const GroupDetailPage = () => {
   const [isEditModalOpen, openEditModal, closeEditModal] = useToggle(false);
   const [isLoading, setIsLoading] = useState(true);
   const [groupName, setGroupName] = useState(enterpriseGroup?.name);
-
+  const {
+    isLoading: isTableLoading,
+    enterpriseGroupLearnersTableData,
+    fetchEnterpriseGroupLearnersTableData,
+  } = useEnterpriseGroupLearnersTableData({ groupUuid });
   const handleNameUpdate = (name) => {
     setGroupName(name);
   };
@@ -119,7 +125,29 @@ const GroupDetailPage = () => {
             </Card.Footer>
           </Card>
         </>
-      ) : <Skeleton className="mt-3" height={200} count={1} /> }
+      ) : <Skeleton className="mt-3" height={200} count={1} />}
+      <div className="mb-4 mt-5">
+        <h4 className="mt-1">
+          <FormattedMessage
+            id="people.management.group.details.page.label"
+            defaultMessage="Group members"
+            description="Label for the groups detail page with members"
+          />
+        </h4>
+        <p className="font-weight-light">
+          <FormattedMessage
+            id="people.management.group.details.page.description"
+            defaultMessage="Add and remove group members."
+            description="Description for the members table in the Groups detail page"
+          />
+        </p>
+      </div>
+      <GroupMembersTable
+        isLoading={isTableLoading}
+        tableData={enterpriseGroupLearnersTableData}
+        fetchTableData={fetchEnterpriseGroupLearnersTableData}
+        groupUuid={groupUuid}
+      />
     </div>
   );
 };

src/components/PeopleManagement/GroupMembersTable.jsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  DataTable, Dropdown, Icon, IconButton,
+} from '@openedx/paragon';
+import { MoreVert, RemoveCircle } from '@openedx/paragon/icons';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import TableTextFilter from '../learner-credit-management/TableTextFilter';
+import CustomDataTableEmptyState from '../learner-credit-management/CustomDataTableEmptyState';
+import MemberDetailsTableCell from '../learner-credit-management/members-tab/MemberDetailsTableCell';
+import { DEFAULT_PAGE, MEMBERS_TABLE_PAGE_SIZE } from '../learner-credit-management/data';
+import EnrollmentsTableColumnHeader from './EnrollmentsTableColumnHeader';
+
+const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
+
+const KabobMenu = () => (
+  <Dropdown drop="top">
+    <Dropdown.Toggle
+      id="kabob-menu-dropdown"
+      data-testid="kabob-menu-dropdown"
+      as={IconButton}
+      src={MoreVert}
+      iconAs={Icon}
+      variant="primary"
+    />
+    <Dropdown.Menu>
+      <Dropdown.Item>
+        <Icon src={RemoveCircle} className="mr-2 text-danger-500" />
+        <FormattedMessage
+          id="people.management.budgetDetail.membersTab.kabobMenu.removeMember"
+          defaultMessage="Remove member"
+          description="Remove member option in the kabob menu"
+        />
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+);
+
+const selectColumn = {
+  id: 'selection',
+  Header: DataTable.ControlledSelectHeader,
+  Cell: DataTable.ControlledSelect,
+  disableSortBy: true,
+};
+
+const GroupMembersTable = ({
+  isLoading,
+  tableData,
+  fetchTableData,
+  groupUuid,
+}) => {
+  const intl = useIntl();
+  return (
+    <span className="budget-detail-assignments">
+      <DataTable
+        isSortable
+        manualSortBy
+        isSelectable
+        SelectionStatusComponent={DataTable.ControlledSelectionStatus}
+        manualSelectColumn={selectColumn}
+        isPaginated
+        manualPagination
+        isFilterable
+        manualFilters
+        isLoading={isLoading}
+        defaultColumnValues={{ Filter: TableTextFilter }}
+        FilterStatusComponent={FilterStatus}
+        numBreakoutFilters={2}
+        columns={[
+          {
+            Header: intl.formatMessage({
+              id: 'people.management.groups.detail.page.members.columns.memberDetails',
+              defaultMessage: 'Member Details',
+              description: 'Column header for the Member Details column in the People management Groups detail page',
+            }),
+            accessor: 'memberDetails',
+            Cell: MemberDetailsTableCell,
+          },
+          {
+            Header: intl.formatMessage({
+              id: 'people.management.groups.detail.page.members.columns.recentAction',
+              defaultMessage: 'Recent action',
+              description: 'Column header for the Recent action column in the People management Groups detail page',
+            }),
+            accessor: 'recentAction',
+            Cell: ({ row }) => row.original.recentAction,
+            disableFilters: true,
+          },
+          {
+            Header: EnrollmentsTableColumnHeader,
+            accessor: 'enrollmentCount',
+            Cell: () => 0,
+            disableFilters: true,
+          },
+        ]}
+        initialTableOptions={{
+          getRowId: row => row?.memberDetails.userEmail,
+          autoResetPage: true,
+        }}
+        initialState={{
+          pageSize: MEMBERS_TABLE_PAGE_SIZE,
+          pageIndex: DEFAULT_PAGE,
+          sortBy: [
+            { id: 'memberDetails', desc: true },
+          ],
+          filters: [],
+        }}
+        additionalColumns={[
+          {
+            id: 'action',
+            Header: '',
+            // eslint-disable-next-line react/no-unstable-nested-components
+            Cell: (props) => (
+              <KabobMenu {...props} groupUuid={groupUuid} />
+            ),
+          },
+        ]}
+        fetchData={fetchTableData}
+        data={tableData.results}
+        itemCount={tableData.itemCount}
+        pageCount={tableData.pageCount}
+        EmptyTableComponent={CustomDataTableEmptyState}
+      />
+    </span>
+  );
+};
+
+GroupMembersTable.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  tableData: PropTypes.shape({
+    results: PropTypes.arrayOf(PropTypes.shape({
+    })),
+    itemCount: PropTypes.number.isRequired,
+    pageCount: PropTypes.number.isRequired,
+  }).isRequired,
+  fetchTableData: PropTypes.func.isRequired,
+  groupUuid: PropTypes.string.isRequired,
+};
+
+export default GroupMembersTable;

src/components/learner-credit-management/data/hooks/tests/useEnterpriseGroupLearnersTableData.test.jsx

@@ -0,0 +1,44 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import LmsApiService from '../../../../../data/services/LmsApiService';
+import useEnterpriseGroupLearnersTableData from '../useEnterpriseGroupLearnersTableData';
+
+describe('useEnterpriseGroupLearnersTableData', () => {
+  it('should fetch and return enterprise learners', async () => {
+    const mockGroupUUID = 'test-uuid';
+    const mockData = {
+      count: 1,
+      current_page: 1,
+      next: null,
+      num_pages: 1,
+      previous: null,
+      results: [{
+        activated_at: '2024-11-06T21:01:32.953901Z',
+        enterprise_customer_user_id: 1,
+        enterprise_group_membership_uuid: 'test-uuid',
+        member_details: {
+          user_email: '[email protected]',
+          user_name: 'Test 2u',
+        },
+        recent_action: 'Accepted: November 06, 2024',
+        status: 'accepted',
+      }],
+    };
+    const mockEnterpriseGroupLearners = jest.spyOn(LmsApiService, 'fetchEnterpriseGroupLearners');
+    mockEnterpriseGroupLearners.mockResolvedValue({ data: mockData });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useEnterpriseGroupLearnersTableData({ groupUuid: mockGroupUUID }),
+    );
+    result.current.fetchEnterpriseGroupLearnersTableData({
+      pageIndex: 0,
+      pageSize: 10,
+      filters: [],
+      sortBy: [],
+    });
+    await waitForNextUpdate();
+    expect(LmsApiService.fetchEnterpriseGroupLearners).toHaveBeenCalledWith(mockGroupUUID, { page: 1 });
+    expect(result.current.isLoading).toEqual(false);
+    expect(result.current.enterpriseGroupLearnersTableData.results).toEqual(camelCaseObject(mockData.results));
+  });
+});

src/components/learner-credit-management/data/hooks/useEnterpriseGroupLearnersTableData.js

@@ -0,0 +1,69 @@
+import {
+  useCallback, useMemo, useState,
+} from 'react';
+import _ from 'lodash';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import { logError } from '@edx/frontend-platform/logging';
+import debounce from 'lodash.debounce';
+
+import LmsApiService from '../../../../data/services/LmsApiService';
+
+const useEnterpriseGroupLearnersTableData = ({ groupUuid }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [enterpriseGroupLearnersTableData, setEnterpriseGroupLearnersTableData] = useState({
+    itemCount: 0,
+    pageCount: 0,
+    results: [],
+  });
+  const fetchEnterpriseGroupLearnersData = useCallback((args) => {
+    const fetch = async () => {
+      try {
+        setIsLoading(true);
+        const options = {};
+        if (args?.sortBy.length > 0) {
+          const sortByValue = args.sortBy[0].id;
+          options.sort_by = _.snakeCase(sortByValue);
+          if (!args.sortBy[0].desc) {
+            options.is_reversed = !args.sortBy[0].desc;
+          }
+        }
+        args.filters.forEach((filter) => {
+          const { id, value } = filter;
+          if (id === 'status') {
+            options.show_removed = value;
+          } else if (id === 'memberDetails') {
+            options.user_query = value;
+          }
+        });
+
+        options.page = args.pageIndex + 1;
+        const response = await LmsApiService.fetchEnterpriseGroupLearners(groupUuid, options);
+        const data = camelCaseObject(response.data);
+
+        setEnterpriseGroupLearnersTableData({
+          itemCount: data.count,
+          pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
+          results: data.results,
+        });
+      } catch (error) {
+        logError(error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetch();
+  }, [groupUuid]);
+
+  const debouncedFetchEnterpriseGroupLearnersData = useMemo(
+    () => debounce(fetchEnterpriseGroupLearnersData, 300),
+    [fetchEnterpriseGroupLearnersData],
+  );
+
+  return {
+    isLoading,
+    enterpriseGroupLearnersTableData,
+    fetchEnterpriseGroupLearnersTableData: debouncedFetchEnterpriseGroupLearnersData,
+  };
+};
+
+export default useEnterpriseGroupLearnersTableData;