feat: add groups membership section for learners (#1459)

* feat: add groups membership section for learners

* test: fetchEnterpriseGroupMemberships unit test

* fix: fit and finish

Author: marlonkeating

src/components/PeopleManagement/GroupDetailCard.jsx

@@ -4,11 +4,12 @@ import { connect } from 'react-redux';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import { Card, Hyperlink } from '@openedx/paragon';
-import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
 import EVENT_NAMES from '../../eventTracking';
+import { groupDetailPageUrl } from './utils';
 
 const GroupDetailCard = ({ enterpriseUUID, group }) => {
   const { enterpriseSlug } = useParams();
+  const groupDetailUrl = groupDetailPageUrl({ enterpriseSlug, groupUuid: group.uuid });
   return (
     <Card className="group-detail-card">
       <Card.Header title={group.name} />
@@ -18,7 +19,7 @@ const GroupDetailCard = ({ enterpriseUUID, group }) => {
       <Card.Footer className="card-button">
         <Hyperlink
           className="btn btn-outline-primary"
-          destination={`/${enterpriseSlug}/admin/${ROUTE_NAMES.peopleManagement}/${group.uuid}`}
+          destination={groupDetailUrl}
           onClick={() => {
             sendEnterpriseTrackEvent(
               enterpriseUUID,

src/components/PeopleManagement/LearnerDetailPage/LearnerDetailGroupMemberships.tsx

@@ -0,0 +1,92 @@
+import { useParams } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import {
+  Hyperlink, Icon, Skeleton,
+} from '@openedx/paragon';
+import { NorthEast } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { groupDetailPageUrl } from '../utils';
+import { useEnterpriseGroupMemberships } from '../data/hooks';
+import { EnterpriseGroupMembershipArgs } from '../../../data/services/LmsApiService';
+
+type GroupMembershipLinkProps = {
+  groupMembership: EnterpriseGroupMembership
+};
+
+const GroupMembershipLink = ({ groupMembership }: GroupMembershipLinkProps) => {
+  const { enterpriseSlug } = useParams() as { enterpriseSlug: string };
+  const { groupUuid, groupName, recentAction } = groupMembership;
+  const groupDetailUrl = groupDetailPageUrl({ enterpriseSlug, groupUuid });
+
+  return (
+    <div className="pl-3">
+      <Hyperlink
+        className="font-weight-bold pb-2"
+        destination={groupDetailUrl}
+        target="_blank"
+        showLaunchIcon={false}
+      >
+        {groupName}
+        <Icon
+          id="SampleIcon"
+          size="xs"
+          src={NorthEast}
+          screenReaderText="Visit group detail page"
+          className="ml-1 mb-1"
+        />
+      </Hyperlink>
+      <p className="small pb-2">{recentAction}</p>
+    </div>
+  );
+};
+
+GroupMembershipLink.propTypes = {
+  groupMembership: PropTypes.shape({
+    groupUuid: PropTypes.string.isRequired,
+    groupName: PropTypes.string.isRequired,
+    recentAction: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+const LearnerDetailGroupMemberships = ({ enterpriseUuid, lmsUserId }: EnterpriseGroupMembershipArgs) => {
+  const { isLoading, data } = useEnterpriseGroupMemberships({ enterpriseUuid, lmsUserId });
+  const groupMemberships = data?.data?.results;
+  const intl = useIntl();
+  const groupsHeader = intl.formatMessage({
+    id: 'adminPortal.peopleManagement.learnerDetailPage.groupsHeader',
+    defaultMessage: 'Groups',
+    description: 'Header for groups the learner is part of',
+  });
+
+  return (
+    <div>
+      {isLoading ? (
+        <Skeleton
+          width={400}
+          height={200}
+        />
+      ) : (groupMemberships && (
+        <div className="pt-3">
+          <h3 className="pb-3">{groupsHeader}</h3>
+          <div className="learner-detail-section">
+            {groupMemberships?.map((groupMembership) => (<GroupMembershipLink groupMembership={groupMembership} />))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+LearnerDetailGroupMemberships.propTypes = {
+  groupMembership: PropTypes.shape({
+    groupUuid: PropTypes.string.isRequired,
+    groupName: PropTypes.string.isRequired,
+    groupMembership: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default LearnerDetailGroupMemberships;
+
+// 21:1  error  Trailing spaces not allowed  no-trailing-spaces
+// 60:5  error  Missing semicolon            @typescript-eslint/semi

src/components/PeopleManagement/LearnerDetailPage/LearnerDetailPage.jsx

@@ -11,6 +11,7 @@ import { Person } from '@openedx/paragon/icons';
 import { ROUTE_NAMES } from '../../EnterpriseApp/data/constants';
 import { useEnterpriseGroupUuid } from '../data/hooks';
 import { useEnterpriseLearnerData } from './data/hooks';
+import LearnerDetailGroupMemberships from './LearnerDetailGroupMemberships';
 
 const LearnerDetailPage = ({ enterpriseUUID }) => {
   const { enterpriseSlug, groupUuid, learnerId } = useParams();
@@ -48,7 +49,7 @@ const LearnerDetailPage = ({ enterpriseUUID }) => {
     return baseLinks;
   }, [intl, enterpriseSlug, groupUuid, enterpriseGroup]);
   return (
-    <div className="pt-4 pl-4">
+    <div className="pt-4 pl-4 mb-3">
       <Breadcrumb
         ariaLabel="Learner detail page breadcrumb navigation"
         links={links}
@@ -70,6 +71,7 @@ const LearnerDetailPage = ({ enterpriseUUID }) => {
           </Card.Section>
         </Card>
       )}
+      <LearnerDetailGroupMemberships enterpriseUuid={enterpriseUUID} lmsUserId={learnerId} />
     </div>
   );
 };

src/components/PeopleManagement/_PeopleManagement.scss

@@ -21,4 +21,11 @@
   border-radius: 50%;
   padding: 10px;
   color: white;
+}
+.learner-detail-section {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.175);
+  padding-top: 2rem;
+  padding-bottom: 1px;
+  width: 25rem;
+  border-radius: 10px;
 }

src/components/PeopleManagement/constants.js

@@ -16,6 +16,7 @@ export const peopleManagementQueryKeys = {
   members: (enterpriseUuid) => [...peopleManagementQueryKeys.all, 'members', enterpriseUuid],
   removeMember: (groupUuid) => [...peopleManagementQueryKeys.all, 'removeMember', groupUuid],
   learners: (groupUuid) => [...peopleManagementQueryKeys.all, 'learners', groupUuid],
+  groupMemberships: ({ enterpriseUuid, lmsUserId }) => [...peopleManagementQueryKeys.all, 'groupMemberships', enterpriseUuid, lmsUserId],
 };
 
 export const MAX_INITIAL_LEARNER_EMAILS_DISPLAYED_COUNT = 15;

src/components/PeopleManagement/data/hooks/index.js

@@ -2,3 +2,4 @@ export { default as useEnterpriseGroupUuid } from './useEnterpriseGroupUuid';
 export { default as useEnterpriseGroupLearnersTableData } from './useEnterpriseGroupLearnersTableData';
 export { default as useEnterpriseMembersTableData } from './useEnterpriseMembersTableData';
 export { default as useAllEnterpriseGroupLearners } from './useAllEnterpriseGroupLearners';
+export { default as useEnterpriseGroupMemberships } from './useEnterpriseGroupMemberships';

src/components/PeopleManagement/data/hooks/useEnterpriseGroupMemberships.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+
+import LmsApiService, { EnterpriseGroupMembershipArgs } from '../../../../data/services/LmsApiService';
+import { peopleManagementQueryKeys } from '../../constants';
+
+const useEnterpriseGroupMemberships = ({ enterpriseUuid, lmsUserId }: EnterpriseGroupMembershipArgs) => useQuery({
+  queryKey: peopleManagementQueryKeys.groupMemberships({ enterpriseUuid, lmsUserId }),
+  queryFn: () => LmsApiService.fetchEnterpriseGroupMemberships({ enterpriseUuid, lmsUserId }),
+});
+
+export default useEnterpriseGroupMemberships;

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

@@ -8,7 +8,7 @@ import '@testing-library/jest-dom/extend-expect';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { useEnterpriseGroupUuid } from '../data/hooks';
+import { useEnterpriseGroupUuid, useEnterpriseGroupMemberships } from '../data/hooks';
 import LearnerDetailPage from '../LearnerDetailPage/LearnerDetailPage';
 import { ROUTE_NAMES } from '../../EnterpriseApp/data/constants';
 import LmsApiService from '../../../data/services/LmsApiService';
@@ -24,6 +24,18 @@ const TEST_GROUP = {
   groupType: 'flex',
 };
 
+const TEST_GROUPS = [
+  {
+    groupUuid: TEST_GROUP.uuid,
+    groupName: TEST_GROUP.name,
+    recentAction: 'Accepted: March 10, 2025',
+  }, {
+    groupUuid: '6721',
+    groupName: 'Another Group',
+    recentAction: 'Removed: March 17, 2025',
+  },
+];
+
 const TEST_ENTERPRISE_USER = {
   data: {
     results: [{
@@ -59,6 +71,7 @@ jest.mock('react-router-dom', () => ({
 
 jest.mock('../data/hooks', () => ({
   ...jest.requireActual('../data/hooks'),
+  useEnterpriseGroupMemberships: jest.fn(),
   useEnterpriseGroupUuid: jest.fn(),
 }));
 
@@ -84,6 +97,13 @@ const LearnerDetailPageWrapper = ({
 describe('LearnerDetailPage', () => {
   beforeEach(() => {
     useEnterpriseGroupUuid.mockReturnValue({ data: TEST_GROUP });
+    useEnterpriseGroupMemberships.mockReturnValue({
+      data: {
+        data: {
+          results: TEST_GROUPS,
+        },
+      },
+    });
     LmsApiService.fetchEnterpriseCustomerMembers.mockResolvedValue(TEST_ENTERPRISE_USER);
   });
   it('renders breadcrumb from people management page', async () => {
@@ -105,9 +125,9 @@ describe('LearnerDetailPage', () => {
     });
     render(<LearnerDetailPageWrapper />);
     const expectedLink = `/${ENTERPRISE_SLUG}/admin/${ROUTE_NAMES.peopleManagement}/${TEST_GROUP.uuid}`;
-    const groupDetailBreadcrumb = screen.getByText(TEST_GROUP.name);
-    expect(groupDetailBreadcrumb).toBeInTheDocument();
-    expect(groupDetailBreadcrumb).toHaveAttribute('href', expectedLink);
+    const groupDetailBreadcrumbs = screen.getAllByText(TEST_GROUP.name);
+    expect(groupDetailBreadcrumbs).toHaveLength(2);
+    expect(groupDetailBreadcrumbs[0]).toHaveAttribute('href', expectedLink);
   });
   it('renders learner detail card', async () => {
     useParams.mockReturnValue({
@@ -120,4 +140,22 @@ describe('LearnerDetailPage', () => {
     expect(screen.getByText('[email protected]')).toBeInTheDocument();
     expect(screen.getByText('Joined on Jun 30, 2023')).toBeInTheDocument();
   });
+  it('renders groups section', async () => {
+    useParams.mockReturnValue({
+      enterpriseSlug: ENTERPRISE_SLUG,
+      learnerId: LMS_USER_ID,
+    });
+    render(<LearnerDetailPageWrapper />);
+    await waitFor(() => {
+      expect(screen.getByText('Groups')).toBeInTheDocument();
+    });
+    const firstGroupLink = screen.getByText(TEST_GROUP.name);
+    expect(firstGroupLink).toBeInTheDocument();
+    expect(firstGroupLink).toHaveAttribute('href', '/test-slug/admin/people-management/1276');
+    const secondGroupLink = screen.getByText('Another Group');
+    expect(secondGroupLink).toBeInTheDocument();
+    expect(secondGroupLink).toHaveAttribute('href', '/test-slug/admin/people-management/6721');
+    expect(screen.getByText('Accepted: March 10, 2025').toBeInTheDocument);
+    expect(screen.getByText('Removed: March 17, 2025').toBeInTheDocument);
+  });
 });

src/components/PeopleManagement/utils.js renamed to src/components/PeopleManagement/utils.ts

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import { MAX_INITIAL_LEARNER_EMAILS_DISPLAYED_COUNT } from './constants';
+import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
 
 /**
  * Formats provided dates for display
@@ -12,17 +13,6 @@ export default function formatDates(timestamp) {
   return dayjs(timestamp).format(DATE_FORMAT);
 }
 
-export const getSelectedEmailsByRow = (selectedFlatRows) => {
-  const emails = [];
-  Object.keys(selectedFlatRows).forEach(key => {
-    const { original } = selectedFlatRows[key];
-    if (original.enterpriseCustomerUser !== null) {
-      emails.push(original.enterpriseCustomerUser.email);
-    }
-  });
-  return emails;
-};
-
 /**
  * Determine whether the number of learner emails exceeds a certain
  * threshold, whereby the list of emails should be truncated.
@@ -32,3 +22,14 @@ export const getSelectedEmailsByRow = (selectedFlatRows) => {
 export const hasLearnerEmailsSummaryListTruncation = (learnerEmails) => (
   learnerEmails.length > MAX_INITIAL_LEARNER_EMAILS_DISPLAYED_COUNT
 );
+
+export type GroupDetailPageUrlArgs = {
+  enterpriseSlug: string,
+  groupUuid: string,
+};
+/**
+ *
+ * @param GroupDetailPageUrlArgs enterpriseSlug and groupUuid pointing to Group Detail page
+ * @returns url to Group Detail page
+ */
+export const groupDetailPageUrl = ({ enterpriseSlug, groupUuid }: GroupDetailPageUrlArgs) => `/${enterpriseSlug}/admin/${ROUTE_NAMES.peopleManagement}/${groupUuid}`;

src/data/services/LmsApiService.ts

@@ -17,9 +17,15 @@ export type UpdateEnterpriseGroupArgs = {
   name: string,
 };
 
+export type EnterpriseGroupMembershipArgs = {
+  lmsUserId: string,
+  enterpriseUuid: string,
+};
+
 export type EnterpriseGroupResponse = Promise<AxiosResponse<EnterpriseGroup>>;
 export type EnterpriseGroupListResponse = Promise<AxiosResponse<PaginatedCurrentPage<EnterpriseGroup>>>;
 export type EnterpriseLearnersListResponse = Promise<AxiosResponse<PaginatedCurrentPage<EnterpriseLearner>>>;
+export type EnterpriseGroupMembershipResponse = Promise<AxiosResponse<PaginatedCurrentPage<EnterpriseGroupMembership>>>;
 
 export type FetchEnterpriseLearnerDataArgs = { enterpriseCustomer?: string, userId?: string, username?: string };
 
@@ -66,6 +72,8 @@ class LmsApiService {
 
   static enterpriseGroupListUrl = `${LmsApiService.baseUrl}/enterprise/api/v1/enterprise_group/`;
 
+  static enterpriseGroupMembershipUrl = `${LmsApiService.baseUrl}/enterprise/api/v1/enterprise-group-membership/`;
+
   static enterpriseLearnerUrl = `${LmsApiService.baseUrl}/enterprise/api/v1/enterprise-learner/`;
 
   static async createEnterpriseGroup(
@@ -540,6 +548,15 @@ class LmsApiService {
     const url = `${LmsApiService.enterpriseLearnerUrl}?${queryParams.toString()}`;
     return LmsApiService.apiClient().get(url);
   };
+
+  static fetchEnterpriseGroupMemberships = async ({ lmsUserId, enterpriseUuid }:
+  EnterpriseGroupMembershipArgs): EnterpriseGroupMembershipResponse => {
+    const queryString = `?lms_user_id=${lmsUserId}&enterprise_uuid=${enterpriseUuid}`;
+    const groupEndpoint = `${LmsApiService.enterpriseGroupMembershipUrl}${queryString}`;
+    const response = await LmsApiService.apiClient().get(groupEndpoint);
+    response.data = camelCaseObject(response.data);
+    return response;
+  };
 }
 
 export default LmsApiService;