richie-education 2.25.0-b2.dev103 → 2.25.0-b2.dev111

package/js/utils/test/factories/joanie.ts

@@ -36,12 +36,24 @@ import {
   OrderGroup,
   CertificateProduct,
   CredentialProduct,
+  NestedCourseOrder,
+  UserLight,
+  ContractLight,
+  DefinitionResourcesProduct,
 } from 'types/Joanie';
 import { CourseStateFactory } from 'utils/test/factories/richie';
 import { FactoryHelper } from 'utils/test/factories/helper';
 import { JoanieUserApiAbilityActions, JoanieUserProfile } from 'types/User';
 import { factory } from './factories';
 
+export const UserLightFactory = factory((): UserLight => {
+  return {
+    id: faker.string.uuid(),
+    username: faker.internet.userName(),
+    full_name: faker.person.fullName(),
+    email: faker.internet.email(),
+  };
+});
 export const JoanieUserProfileFactory = factory((): JoanieUserProfile => {
   return {
     id: faker.string.uuid(),
@@ -131,6 +143,14 @@ export const ContractFactory = factory((): Contract => {
   };
 });
 
+export const ContractLightFactory = factory((): ContractLight => {
+  return {
+    id: faker.string.uuid(),
+    student_signed_on: faker.date.past().toISOString(),
+    organization_signed_on: null,
+  };
+});
+
 export const OrganizationFactory = factory((): Organization => {
   return {
     id: faker.string.uuid(),
@@ -203,6 +223,14 @@ export const CertificateCourseProductFactory = factory((): CourseProduct => {
 // factories.js need a feature that return a random factory from a list.
 export const ProductFactory = CredentialProductFactory;
 
+export const DefinitionResourcesProductFactory = factory((): DefinitionResourcesProduct => {
+  return {
+    id: faker.string.uuid(),
+    certificate_definition_id: null,
+    contract_definition_id: null,
+  };
+});
+
 export const CourseRunFactory = factory((): CourseRun => {
   return {
     course: CourseLightFactory().one(),
@@ -273,6 +301,22 @@ export const OrderGroupFullFactory = factory((): OrderGroup => {
   };
 });
 
+export const NestedCourseOrderFactory = factory((): NestedCourseOrder => {
+  return {
+    id: faker.string.uuid(),
+    created_on: faker.date.past().toISOString(),
+    owner: UserLightFactory().one(),
+    course_id: faker.string.uuid(),
+    product_id: faker.string.uuid(),
+    state: OrderState.VALIDATED,
+    enrollment_id: faker.string.uuid(),
+    organization: OrganizationFactory().one(),
+    certificate_id: faker.string.uuid(),
+    product: DefinitionResourcesProductFactory().one(),
+    contract: ContractLightFactory().one(),
+  };
+});
+
 export const CourseProductRelationFactory = factory((): CourseProductRelation => {
   return {
     id: faker.string.uuid(),

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateMessage/index.tsx

@@ -1,6 +1,12 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
 import { useEffect } from 'react';
-import { CertificateOrder, CredentialOrder, OrderState, ContractDefinition } from 'types/Joanie';
+import {
+  CertificateOrder,
+  CredentialOrder,
+  OrderState,
+  ContractDefinition,
+  NestedCourseOrder,
+} from 'types/Joanie';
 import { StringHelper } from 'utils/StringHelper';
 import { handle } from 'utils/errors/handle';
 import { OrderHelper } from 'utils/OrderHelper';
@@ -52,7 +58,7 @@ export const messages = defineMessages({
 });
 
 interface OrderStateMessageProps {
-  order: CredentialOrder | CertificateOrder;
+  order: CredentialOrder | CertificateOrder | NestedCourseOrder;
   contractDefinition?: ContractDefinition;
 }
 

package/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.tsx

@@ -5,7 +5,7 @@ import { ContractState, CourseProductRelation, Organization } from 'types/Joanie
 import useTeacherPendingContractsCount from 'hooks/useTeacherPendingContractsCount';
 import { ContractActions } from 'utils/AbilitiesHelper/types';
 import useContractAbilities from 'hooks/useContractAbilities';
-import useDefaultOrganizationId from 'pages/TeacherDashboardContractsLayout/hooks/useDefaultOrganizationId';
+import useDefaultOrganizationId from 'hooks/useDefaultOrganizationId';
 import MenuNavLink from '../MenuNavLink';
 
 interface ContractNavLinkProps {

package/js/widgets/Dashboard/components/FilterOrganization/index.tsx

@@ -1,8 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { Select, SelectProps } from '@openfun/cunningham-react';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useOrganizations } from 'hooks/useOrganizations';
 import { Spinner } from 'components/Spinner';
+import { Organization } from 'types/Joanie';
 
 export const messages = defineMessages({
   organizationFilterLabel: {
@@ -10,20 +11,35 @@ export const messages = defineMessages({
     description: 'Use as organization filter label',
     id: 'components.ListFilterOrganization.organizationFilterLabel',
   },
+  allOrganizationOption: {
+    defaultMessage: 'All organizations',
+    description: 'Use as organization filter option label for "all organizations"',
+    id: 'components.ListFilterOrganization.allOrganizationOption',
+  },
 });
 
 interface FilterOrganizationProps {
   defaultValue?: string;
+  organizationList?: Organization[];
   onChange: ({ organization_id }: { organization_id?: string }) => void;
+  clearable?: boolean;
 }
 
-const FilterOrganization = ({ defaultValue, onChange }: FilterOrganizationProps) => {
+const FilterOrganization = ({
+  defaultValue,
+  organizationList,
+  onChange,
+  clearable = false,
+}: FilterOrganizationProps) => {
   const intl = useIntl();
   const {
-    items: organizations,
+    items: fetchedOrganizationList,
     states: { isFetched },
-  } = useOrganizations();
-
+  } = useOrganizations(undefined, { enabled: !organizationList });
+  const isReady = useMemo(() => {
+    return organizationList || isFetched;
+  }, [organizationList, isFetched]);
+  const organizations = organizationList || fetchedOrganizationList;
   const organizationOptions = organizations.map((organization) => ({
     label: organization.title,
     value: organization.id,
@@ -35,21 +51,22 @@ const FilterOrganization = ({ defaultValue, onChange }: FilterOrganizationProps)
   };
 
   useEffect(() => {
-    if (isFetched && defaultValue === undefined) {
+    if (!clearable && isReady && defaultValue === undefined) {
       onChange({ organization_id: organizationOptions[0]?.value });
     }
   }, [defaultValue, isFetched]);
 
-  if (!isFetched) return <Spinner />;
+  if (!isReady) {
+    return <Spinner />;
+  }
 
   return (
     <Select
       label={intl.formatMessage(messages.organizationFilterLabel)}
       options={organizationOptions}
-      defaultValue={defaultValue || organizationOptions[0].value}
+      defaultValue={defaultValue}
       onChange={handleChange}
-      disabled={!isFetched}
-      clearable={false}
+      clearable={clearable}
       searchable={true}
     />
   );

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/index.spec.tsx

@@ -1,21 +1,12 @@
 import fetchMock from 'fetch-mock';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import { IntlProvider, createIntl } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { CunninghamProvider } from '@openfun/cunningham-react';
-import { PropsWithChildren } from 'react';
-import { CourseListItem, CourseProductRelation, Organization } from 'types/Joanie';
-import {
-  RichieContextFactory as mockRichieContextFactory,
-  UserFactory,
-} from 'utils/test/factories/richie';
+import { screen } from '@testing-library/react';
+import { createIntl } from 'react-intl';
+import { CourseListItem } from 'types/Joanie';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import {
   TEACHER_DASHBOARD_ROUTE_LABELS,
   TeacherDashboardPaths,
 } from 'widgets/Dashboard/utils/teacherRouteMessages';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 
 import {
   CourseFactory,
@@ -23,6 +14,8 @@ import {
   OrganizationFactory,
 } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { render } from 'utils/test/render';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { TeacherDashboardCourseSidebar, messages } from '.';
 
 jest.mock('utils/context', () => ({
@@ -41,58 +34,11 @@ jest.mock('utils/indirection/window', () => ({
 
 const intl = createIntl({ locale: 'en' });
 
-interface RenderTeacherDashboardCourseSidebarProps {
-  courseId: CourseListItem['id'];
-  organizationId?: Organization['id'];
-  courseProductRelationId?: CourseProductRelation['id'];
-}
-
-const Wrapper = ({
-  children,
-  courseId,
-  organizationId,
-  courseProductRelationId,
-}: PropsWithChildren<RenderTeacherDashboardCourseSidebarProps>) => {
-  let routePath = '/:courseId';
-  let initialEntry = `/${courseId}`;
-
-  if (courseProductRelationId) {
-    routePath += '/:courseProductRelationId';
-    initialEntry += `/${courseProductRelationId}`;
-  }
-  if (organizationId) {
-    routePath = '/:organizationId' + routePath;
-    initialEntry = `/${organizationId}` + initialEntry;
-  }
-  return (
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user: UserFactory().one() })}>
-        <JoanieSessionProvider>
-          <CunninghamProvider>
-            <MemoryRouter initialEntries={[initialEntry]}>
-              <Routes>
-                <Route path={routePath} element={children} />
-              </Routes>
-            </MemoryRouter>
-          </CunninghamProvider>
-        </JoanieSessionProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  );
-};
-
 describe('<TeacherDashboardCourseSidebar/>', () => {
+  const joanieSessionData = setupJoanieSession();
   let nbApiRequest: number;
   beforeEach(() => {
-    // JoanieSessionProvider inital requests
-    nbApiRequest = 3;
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-  });
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
+    nbApiRequest = joanieSessionData.nbSessionApiRequest;
   });
 
   it('should display syllabus link', async () => {
@@ -100,11 +46,12 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
     nbApiRequest += 1; // call to course
 
-    render(
-      <Wrapper courseId={course.id}>
-        <TeacherDashboardCourseSidebar />
-      </Wrapper>,
-    );
+    render(<TeacherDashboardCourseSidebar />, {
+      routerOptions: {
+        path: '/:courseId',
+        initialEntries: [`/${course.id}`],
+      },
+    });
 
     await expectNoSpinner('Loading course...');
     const link = screen.getByRole('link', {
@@ -129,6 +76,7 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
       expectedRoutes: [
         TeacherDashboardPaths.COURSE_PRODUCT,
         TeacherDashboardPaths.COURSE_CONTRACTS,
+        TeacherDashboardPaths.COURSE_PRODUCT_LEARNER_LIST,
       ],
     },
     {
@@ -146,6 +94,7 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
       expectedRoutes: [
         TeacherDashboardPaths.ORGANIZATION_PRODUCT,
         TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+        TeacherDashboardPaths.ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST,
       ],
     },
   ])(
@@ -179,21 +128,32 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
           `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
           courseProductRelation,
         );
+        nbApiRequest += 1;
+        fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
       } else {
         // mock api for course
         nbApiRequest += 1;
         fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
       }
 
-      render(
-        <Wrapper
-          courseId={course.id}
-          courseProductRelationId={courseProductRelation ? courseProductRelation.id : undefined}
-          organizationId={organization ? organization.id : undefined}
-        >
-          <TeacherDashboardCourseSidebar />
-        </Wrapper>,
-      );
+      let routePath = '/:courseId';
+      let initialEntry = `/${course.id}`;
+
+      if (courseProductRelation) {
+        routePath += '/:courseProductRelationId';
+        initialEntry += `/${courseProductRelation.id}`;
+      }
+      if (organization) {
+        routePath = '/:organizationId' + routePath;
+        initialEntry = `/${organization.id}` + initialEntry;
+      }
+
+      render(<TeacherDashboardCourseSidebar />, {
+        routerOptions: {
+          path: routePath,
+          initialEntries: [initialEntry],
+        },
+      });
 
       await expectNoSpinner('Loading course...');
       expectedRoutes.forEach((expectedRoute) => {

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/utils.ts

@@ -11,13 +11,18 @@ export const getMenuRoutes = ({ courseProductRelationId, organizationId }: GetMe
       return [
         TeacherDashboardPaths.ORGANIZATION_PRODUCT,
         TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+        TeacherDashboardPaths.ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST,
       ];
     }
     return [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION];
   }
 
   if (courseProductRelationId) {
-    return [TeacherDashboardPaths.COURSE_PRODUCT, TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS];
+    return [
+      TeacherDashboardPaths.COURSE_PRODUCT,
+      TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS,
+      TeacherDashboardPaths.COURSE_PRODUCT_LEARNER_LIST,
+    ];
   }
   return [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION];
 };

package/js/widgets/Dashboard/utils/teacherRouteMessages.tsx

@@ -12,10 +12,12 @@ export enum TeacherDashboardPaths {
   ORGANIZATION_PRODUCT = '/teacher/organizations/{organizationId}/courses/{courseId}/products/{courseProductRelationId}',
   ORGANIZATION_COURSE_CONTRACTS = '/teacher/organizations/{organizationId}/courses/{courseId}/contracts',
   ORGANIZATION_PRODUCT_CONTRACTS = '/teacher/organizations/{organizationId}/courses/{courseId}/products/{courseProductRelationId}/contracts',
+  ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST = '/teacher/organizations/{organizationId}/courses/{courseId}/products/{courseProductRelationId}/learners',
   ORGANIZATION_COURSE_GENERAL_INFORMATION = '/teacher/organizations/{organizationId}/courses/{courseId}/information',
   COURSE = '/teacher/courses/{courseId}',
   COURSE_GENERAL_INFORMATION = '/teacher/courses/{courseId}/information',
   COURSE_PRODUCT = '/teacher/courses/{courseId}/products/{courseProductRelationId}',
+  COURSE_PRODUCT_LEARNER_LIST = '/teacher/courses/{courseId}/products/{courseProductRelationId}/learners',
   COURSE_CONTRACTS = '/teacher/courses/{courseId}/contracts',
   COURSE_PRODUCT_CONTRACTS = '/teacher/courses/{courseId}/products/{courseProductRelationId}/contracts',
 }
@@ -69,6 +71,12 @@ export const TEACHER_DASHBOARD_ROUTE_PATHS = defineMessages<TeacherDashboardPath
     defaultMessage:
       '/teacher/organizations/{organizationId}/courses/{courseId}/products/{courseProductRelationId}',
   },
+  [TeacherDashboardPaths.ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.product.learnerList.path',
+    description: "The path to display the organization product's learner list view.",
+    defaultMessage:
+      '/teacher/organizations/{organizationId}/courses/{courseId}/products/{courseProductRelationId}/learners',
+  },
   [TeacherDashboardPaths.COURSE]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.path',
     description: 'The path to display the course view.',
@@ -84,6 +92,11 @@ export const TEACHER_DASHBOARD_ROUTE_PATHS = defineMessages<TeacherDashboardPath
     description: 'The path to display the product view.',
     defaultMessage: '/teacher/courses/{courseId}/products/{courseProductRelationId}',
   },
+  [TeacherDashboardPaths.COURSE_PRODUCT_LEARNER_LIST]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.product.learnerList.path',
+    description: "The path to display the product's learner list view.",
+    defaultMessage: '/teacher/courses/{courseId}/products/{courseProductRelationId}/learners',
+  },
   [TeacherDashboardPaths.COURSE_CONTRACTS]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.contracts.path',
     description: 'The path to display a course contracts view.',
@@ -143,6 +156,11 @@ export const TEACHER_DASHBOARD_ROUTE_LABELS = defineMessages<TeacherDashboardPat
     description: 'Label of the organization product view.',
     defaultMessage: 'General information',
   },
+  [TeacherDashboardPaths.ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.product.learnerList.label',
+    description: "Label to display the organization product's learner list view.",
+    defaultMessage: 'Learners',
+  },
   [TeacherDashboardPaths.COURSE]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.label',
     description: 'Label of the course root view.',
@@ -158,6 +176,11 @@ export const TEACHER_DASHBOARD_ROUTE_LABELS = defineMessages<TeacherDashboardPat
     description: 'Label of the product view.',
     defaultMessage: 'General information',
   },
+  [TeacherDashboardPaths.COURSE_PRODUCT_LEARNER_LIST]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.product.learnerList.label',
+    description: "Label to display the product's learner list view.",
+    defaultMessage: 'Learners',
+  },
   [TeacherDashboardPaths.COURSE_CONTRACTS]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.contracts.label',
     description: 'Label of the course contracts view.',

package/js/widgets/Dashboard/utils/teacherRoutes.tsx

@@ -14,6 +14,7 @@ import {
 } from 'widgets/Dashboard/utils/teacherRouteMessages';
 import { TeacherDashboardCourseLoader } from 'pages/TeacherDashboardCourseLoader';
 import { TeacherDashboardTrainingLoader } from 'pages/TeacherDashboardTraining';
+import { TeacherDashboardCourseLearnersLayout } from 'pages/TeacherDashboardCourseLearnersLayout';
 
 export function getTeacherDashboardRoutes() {
   const intl = useIntl();
@@ -81,6 +82,19 @@ export function getTeacherDashboardRoutes() {
                       ],
                   },
                 },
+                {
+                  path: getRoutePath(TeacherDashboardPaths.COURSE_PRODUCT_LEARNER_LIST, {
+                    courseId: ':courseId',
+                    courseProductRelationId: ':courseProductRelationId',
+                  }),
+                  element: <TeacherDashboardCourseLearnersLayout />,
+                  handle: {
+                    crumbLabel:
+                      TEACHER_DASHBOARD_ROUTE_LABELS[
+                        TeacherDashboardPaths.COURSE_PRODUCT_LEARNER_LIST
+                      ],
+                  },
+                },
               ],
             },
             {
@@ -176,6 +190,23 @@ export function getTeacherDashboardRoutes() {
                       ],
                   },
                 },
+                {
+                  path: getRoutePath(
+                    TeacherDashboardPaths.ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST,
+                    {
+                      organizationId: ':organizationId',
+                      courseId: ':courseId',
+                      courseProductRelationId: ':courseProductRelationId',
+                    },
+                  ),
+                  element: <TeacherDashboardCourseLearnersLayout />,
+                  handle: {
+                    crumbLabel:
+                      TEACHER_DASHBOARD_ROUTE_LABELS[
+                        TeacherDashboardPaths.ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST
+                      ],
+                  },
+                },
               ],
             },
           ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev103",
+  "version": "2.25.0-b2.dev111",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {

package/scss/objects/_dashboard.scss

@@ -80,4 +80,11 @@
       }
     }
   }
+
+  .teacher-contract-page,
+  .teacher-training-learners-page {
+    background: #fff;
+    border-radius: 6px;
+    padding: 1rem;
+  }
 }