Merge remote-tracking branch 'origin' into knguyen2/ent-9525

src/components/PeopleManagement/EnrollmentsTableColumnHeader.jsx

@@ -1,14 +1,40 @@
 import React from 'react';
+import {
+  OverlayTrigger,
+  Tooltip,
+  Stack,
+  Icon,
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 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>
+  <Stack gap={1} direction="horizontal">
+    <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>
+    <OverlayTrigger
+      key="enrollments-column-tooltip"
+      placement="top"
+      overlay={(
+        <Tooltip id="enrollments-column-tooltip">
+          <div>
+            <FormattedMessage
+              id="people.management.groups.detail.page.learnersTable.enrollmentsColumn.tooltip"
+              defaultMessage="Total number of enrollment originated from the budget"
+              description="Tooltip for the Enrollments column header in the Group Members table"
+            />
+          </div>
+        </Tooltip>
+      )}
+    >
+      <Icon size="xs" src={InfoOutline} className="ml-1 d-inline-flex" />
+    </OverlayTrigger>
+  </Stack>
 );
 
 export default EnrollmentsTableColumnHeader;

src/components/PeopleManagement/GroupMembersTable.jsx

@@ -8,8 +8,9 @@ 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';
+import { GROUP_MEMBERS_TABLE_DEFAULT_PAGE, GROUP_MEMBERS_TABLE_PAGE_SIZE } from './constants';
+import RecentActionTableCell from './RecentActionTableCell';
 
 const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
 
@@ -70,8 +71,8 @@ const GroupMembersTable = ({
           {
             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',
+              defaultMessage: 'Member details',
+              description: 'Column header for the Member details column in the People management Groups detail page',
             }),
             accessor: 'memberDetails',
             Cell: MemberDetailsTableCell,
@@ -83,7 +84,7 @@ const GroupMembersTable = ({
               description: 'Column header for the Recent action column in the People management Groups detail page',
             }),
             accessor: 'recentAction',
-            Cell: ({ row }) => row.original.recentAction,
+            Cell: RecentActionTableCell,
             disableFilters: true,
           },
           {
@@ -98,8 +99,8 @@ const GroupMembersTable = ({
           autoResetPage: true,
         }}
         initialState={{
-          pageSize: MEMBERS_TABLE_PAGE_SIZE,
-          pageIndex: DEFAULT_PAGE,
+          pageSize: GROUP_MEMBERS_TABLE_PAGE_SIZE,
+          pageIndex: GROUP_MEMBERS_TABLE_DEFAULT_PAGE,
           sortBy: [
             { id: 'memberDetails', desc: true },
           ],

src/components/PeopleManagement/RecentActionTableCell.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import formatDates from './utils';
+
+const RecentActionTableCell = ({
+  row,
+}) => (
+  <div>Added: {formatDates(row.original.activatedAt)}</div>
+);
+
+RecentActionTableCell.propTypes = {
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      activatedAt: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default RecentActionTableCell;

src/components/PeopleManagement/constants.js

@@ -3,3 +3,6 @@ export const MAX_LENGTH_GROUP_NAME = 60;
 export const GROUP_TYPE_BUDGET = 'budget';
 export const GROUP_TYPE_FLEX = 'flex';
 export const GROUP_DROPDOWN_TEXT = 'Select group';
+
+export const GROUP_MEMBERS_TABLE_PAGE_SIZE = 10;
+export const GROUP_MEMBERS_TABLE_DEFAULT_PAGE = 0; // `DataTable` uses zero-index array

src/components/PeopleManagement/tests/GroupDetailPage.test.jsx

@@ -91,7 +91,7 @@ describe('<GroupDetailPageWrapper >', () => {
     expect(screen.getByText('View group progress')).toBeInTheDocument();
     expect(screen.getByText('Add and remove group members.')).toBeInTheDocument();
     expect(screen.getByText('Test 2u')).toBeInTheDocument();
-    userEvent.click(screen.getByText('Member Details'));
+    userEvent.click(screen.getByText('Member details'));
     await waitFor(() => expect(mockFetchEnterpriseGroupLearnersTableData).toHaveBeenCalledWith({
       filters: [],
       pageIndex: 0,

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

@@ -43,7 +43,7 @@ const useEnterpriseGroupLearnersTableData = ({ groupUuid }) => {
         setEnterpriseGroupLearnersTableData({
           itemCount: data.count,
           pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
-          results: data.results,
+          results: data.results.filter(result => result.activatedAt),
         });
       } catch (error) {
         logError(error);

src/data/services/LmsApiService.js

@@ -120,7 +120,7 @@ class LmsApiService {
   }
 
   static fetchReportingConfigs(uuid) {
-    return LmsApiService.apiClient().get(`${LmsApiService.reportingConfigUrl}?enterprise_customer=${uuid}`);
+    return LmsApiService.apiClient().get(`${LmsApiService.reportingConfigUrl}?enterprise_customer=${uuid}&page_size=100`);
   }
 
   static fetchReportingConfigTypes(uuid) {

src/data/services/tests/LmsApiService.test.js

@@ -114,4 +114,29 @@ describe('LmsApiService', () => {
       },
     });
   });
+  test('fetchReportingConfigs returns reporting configs', async () => {
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: {
+        results: [{
+          active: true,
+          data_type: 'test-data-type',
+          uuid: 'test-uuid',
+          enterprise_customer: 'test-enterprise-customer',
+        }],
+      },
+    });
+    const response = await LmsApiService.fetchReportingConfigs();
+    expect(response).toEqual({
+      status: 200,
+      data: {
+        results: [{
+          active: true,
+          data_type: 'test-data-type',
+          uuid: 'test-uuid',
+          enterprise_customer: 'test-enterprise-customer',
+        }],
+      },
+    });
+  });
 });