richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -7,12 +7,17 @@ export enum TeacherDashboardPaths {
   ROOT = '/teacher',
   TEACHER_COURSES = '/teacher/courses',
   ORGANIZATION = '/teacher/organizations/{organizationId}',
+  ORGANIZATION_CONTRACTS = '/teacher/organizations/{organizationId}/contracts',
   ORGANIZATION_COURSES = '/teacher/organizations/{organizationId}/courses',
-  ORGANIZATION_COURSE_GENERAL_INFORMATION = '/teacher/organizations/{organizationId}/courses/{courseId}/information',
   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_GENERAL_INFORMATION = '/teacher/organizations/{organizationId}/courses/{courseId}/information',
   COURSE = '/teacher/courses/{courseId}',
   COURSE_GENERAL_INFORMATION = '/teacher/courses/{courseId}/information',
-  COURSE_PRODUCT = '/teacer/courses/{courseId}/products/{courseProductRelationId}',
+  COURSE_PRODUCT = '/teacher/courses/{courseId}/products/{courseProductRelationId}',
+  COURSE_CONTRACTS = '/teacher/courses/{courseId}/contracts',
+  COURSE_PRODUCT_CONTRACTS = '/teacher/courses/{courseId}/products/{courseProductRelationId}/contracts',
 }
 
 // Translations of dashboard route paths
@@ -32,11 +37,27 @@ export const TEACHER_DASHBOARD_ROUTE_PATHS = defineMessages<TeacherDashboardPath
     description: 'The path to display the organization view.',
     defaultMessage: '/teacher/organizations/{organizationId}',
   },
+  [TeacherDashboardPaths.ORGANIZATION_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.contracts.path',
+    description: 'The path to display the organization contracts view.',
+    defaultMessage: '/teacher/organizations/{organizationId}/contracts',
+  },
   [TeacherDashboardPaths.ORGANIZATION_COURSES]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.courses.path',
     description: 'The path to display the organization courses view.',
     defaultMessage: '/teacher/organizations/{organizationId}/courses',
   },
+  [TeacherDashboardPaths.ORGANIZATION_COURSE_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.contracts.path',
+    description: "The path to display the organization course's contracts view.",
+    defaultMessage: '/teacher/organizations/{organizationId}/courses/{courseId}/contracts',
+  },
+  [TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.product.contracts.path',
+    description: "The path to display the organization product's contracts view.",
+    defaultMessage:
+      '/teacher/organizations/{organizationId}/courses/{courseId}/products/{courseProductRelationId}/contracts',
+  },
   [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.generalInformation.path',
     description: 'The path to display the organization course general information view.',
@@ -63,6 +84,16 @@ export const TEACHER_DASHBOARD_ROUTE_PATHS = defineMessages<TeacherDashboardPath
     description: 'The path to display the product view.',
     defaultMessage: '/teacher/courses/{courseId}/products/{courseProductRelationId}',
   },
+  [TeacherDashboardPaths.COURSE_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.contracts.path',
+    description: 'The path to display a course contracts view.',
+    defaultMessage: '/teacher/courses/{courseId}/contracts',
+  },
+  [TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.product.contracts.path',
+    description: 'The path to display a product contracts view.',
+    defaultMessage: '/teacher/courses/{courseId}/products/{courseProductRelationId}/contracts',
+  },
 });
 
 // Translations of dashboard route labels
@@ -87,6 +118,21 @@ export const TEACHER_DASHBOARD_ROUTE_LABELS = defineMessages<TeacherDashboardPat
     description: 'Label of the organization courses view.',
     defaultMessage: 'Courses',
   },
+  [TeacherDashboardPaths.ORGANIZATION_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.contracts.label',
+    description: 'Label of the organization contracts view.',
+    defaultMessage: 'Contracts',
+  },
+  [TeacherDashboardPaths.ORGANIZATION_COURSE_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.contracts.label',
+    description: "Label of the organization course's contracts view.",
+    defaultMessage: 'Contracts',
+  },
+  [TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.product.contracts.label',
+    description: "Label of the organization product's contracts view.",
+    defaultMessage: 'Contracts',
+  },
   [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.generalInformation.label',
     description: 'Label of the organization course general information view.',
@@ -95,7 +141,7 @@ export const TEACHER_DASHBOARD_ROUTE_LABELS = defineMessages<TeacherDashboardPat
   [TeacherDashboardPaths.ORGANIZATION_PRODUCT]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.product.label',
     description: 'Label of the organization product view.',
-    defaultMessage: 'Training',
+    defaultMessage: 'General information',
   },
   [TeacherDashboardPaths.COURSE]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.label',
@@ -110,6 +156,16 @@ export const TEACHER_DASHBOARD_ROUTE_LABELS = defineMessages<TeacherDashboardPat
   [TeacherDashboardPaths.COURSE_PRODUCT]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.product.label',
     description: 'Label of the product view.',
-    defaultMessage: 'Training',
+    defaultMessage: 'General information',
+  },
+  [TeacherDashboardPaths.COURSE_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.contracts.label',
+    description: 'Label of the course contracts view.',
+    defaultMessage: 'Contracts',
+  },
+  [TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS]: {
+    id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.product.contracts.label',
+    description: 'Label of the product contracts view.',
+    defaultMessage: 'Contracts',
   },
 });

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

@@ -1,15 +1,19 @@
 import { useIntl } from 'react-intl';
 import { Navigate, RouteObject } from 'react-router-dom';
-import { TeacherOrganizationCourseDashboardLoader } from 'pages/TeacherOrganizationCourseDashboardLoader';
-import { TeacherCoursesDashboardLoader } from 'pages/TeacherCoursesDashboardLoader';
+import {
+  TeacherDashboardCourseContractsLayout,
+  TeacherDashboardOrganizationContractsLayout,
+} from 'pages/TeacherDashboardContractsLayout';
+import { TeacherDashboardOrganizationCourseLoader } from 'pages/TeacherDashboardOrganizationCourseLoader';
+import { TeacherDashboardCoursesLoader } from 'pages/TeacherDashboardCoursesLoader';
 import NavigateWithParams from 'widgets/Dashboard/components/NavigateWithParams';
 import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
 import {
   TeacherDashboardPaths,
   TEACHER_DASHBOARD_ROUTE_LABELS,
 } from 'widgets/Dashboard/utils/teacherRouteMessages';
-import { TeacherCourseDashboardLoader } from 'pages/TeacherCourseDashboardLoader';
-import { TeacherTrainingDashboardLoader } from 'pages/TeacherTrainingDashboard';
+import { TeacherDashboardCourseLoader } from 'pages/TeacherDashboardCourseLoader';
+import { TeacherDashboardTrainingLoader } from 'pages/TeacherDashboardTraining';
 
 export function getTeacherDashboardRoutes() {
   const intl = useIntl();
@@ -24,7 +28,7 @@ export function getTeacherDashboardRoutes() {
       children: [
         {
           index: true,
-          element: <TeacherCoursesDashboardLoader />,
+          element: <TeacherDashboardCoursesLoader />,
         },
         {
           path: getRoutePath(TeacherDashboardPaths.COURSE, {
@@ -46,7 +50,7 @@ export function getTeacherDashboardRoutes() {
               path: getRoutePath(TeacherDashboardPaths.COURSE_GENERAL_INFORMATION, {
                 courseId: ':courseId',
               }),
-              element: <TeacherCourseDashboardLoader />,
+              element: <TeacherDashboardCourseLoader />,
               handle: {
                 crumbLabel: TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.COURSE],
               },
@@ -56,9 +60,36 @@ export function getTeacherDashboardRoutes() {
                 courseId: ':courseId',
                 courseProductRelationId: ':courseProductRelationId',
               }),
-              element: <TeacherTrainingDashboardLoader />,
+              children: [
+                {
+                  index: true,
+                  element: <TeacherDashboardTrainingLoader />,
+                  handle: {
+                    crumbLabel: TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.COURSE],
+                  },
+                },
+                {
+                  path: getRoutePath(TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS, {
+                    courseId: ':courseId',
+                    courseProductRelationId: ':courseProductRelationId',
+                  }),
+                  element: <TeacherDashboardCourseContractsLayout />,
+                  handle: {
+                    crumbLabel:
+                      TEACHER_DASHBOARD_ROUTE_LABELS[
+                        TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS
+                      ],
+                  },
+                },
+              ],
+            },
+            {
+              path: getRoutePath(TeacherDashboardPaths.COURSE_CONTRACTS, {
+                courseId: ':courseId',
+              }),
+              element: <TeacherDashboardCourseContractsLayout />,
               handle: {
-                crumbLabel: TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.COURSE],
+                crumbLabel: TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.COURSE_CONTRACTS],
               },
             },
           ],
@@ -91,31 +122,74 @@ export function getTeacherDashboardRoutes() {
           children: [
             {
               index: true,
-              element: <TeacherOrganizationCourseDashboardLoader />,
+              element: <TeacherDashboardOrganizationCourseLoader />,
             },
             {
               path: getRoutePath(TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION, {
                 organizationId: ':organizationId',
                 courseId: ':courseId',
               }),
-              element: <TeacherCourseDashboardLoader />,
+              element: <TeacherDashboardCourseLoader />,
               handle: {
                 crumbLabel: TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.COURSE],
               },
             },
             {
-              path: getRoutePath(TeacherDashboardPaths.ORGANIZATION_PRODUCT, {
+              path: getRoutePath(TeacherDashboardPaths.ORGANIZATION_COURSE_CONTRACTS, {
                 organizationId: ':organizationId',
                 courseId: ':courseId',
                 courseProductRelationId: ':courseProductRelationId',
               }),
-              element: <TeacherTrainingDashboardLoader />,
+              element: <TeacherDashboardCourseContractsLayout />,
               handle: {
-                crumbLabel: TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.COURSE],
+                crumbLabel:
+                  TEACHER_DASHBOARD_ROUTE_LABELS[
+                    TeacherDashboardPaths.ORGANIZATION_COURSE_CONTRACTS
+                  ],
               },
             },
+            {
+              path: getRoutePath(TeacherDashboardPaths.ORGANIZATION_PRODUCT, {
+                organizationId: ':organizationId',
+                courseId: ':courseId',
+                courseProductRelationId: ':courseProductRelationId',
+              }),
+              children: [
+                {
+                  index: true,
+                  element: <TeacherDashboardTrainingLoader />,
+                  handle: {
+                    crumbLabel: TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.COURSE],
+                  },
+                },
+                {
+                  path: getRoutePath(TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS, {
+                    organizationId: ':organizationId',
+                    courseId: ':courseId',
+                    courseProductRelationId: ':courseProductRelationId',
+                  }),
+                  element: <TeacherDashboardCourseContractsLayout />,
+                  handle: {
+                    crumbLabel:
+                      TEACHER_DASHBOARD_ROUTE_LABELS[
+                        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS
+                      ],
+                  },
+                },
+              ],
+            },
           ],
         },
+        {
+          path: getRoutePath(TeacherDashboardPaths.ORGANIZATION_CONTRACTS, {
+            organizationId: ':organizationId',
+          }),
+          element: <TeacherDashboardOrganizationContractsLayout />,
+          handle: {
+            crumbLabel:
+              TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.ORGANIZATION_CONTRACTS],
+          },
+        },
       ],
     },
   ];

package/js/widgets/LtiConsumer/index.spec.tsx

@@ -1,9 +1,12 @@
 import { type PropsWithChildren } from 'react';
-import { act, render, waitFor } from '@testing-library/react';
+import { act, render, renderHook, waitFor } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
 import { QueryClient, QueryClientProvider, QueryObserverOptions } from '@tanstack/react-query';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import {
+  RichieContextFactory as mockRichieContextFactory,
+  UserFactory,
+} from 'utils/test/factories/richie';
 import { Deferred } from 'utils/test/deferred';
 import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
 import { RICHIE_LTI_ANONYMOUS_USER_ID_CACHE_KEY } from 'settings';
@@ -11,6 +14,8 @@ import { handle } from 'utils/errors/handle';
 import { resolveAll } from 'utils/resolveAll';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { noop } from 'utils';
+import { useSession } from 'contexts/SessionContext';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 import {
   LtiConsumerContentParameters,
   LtiConsumerContext,
@@ -195,10 +200,9 @@ describe('widgets/LtiConsumer', () => {
       id: 1337,
     } as LtiConsumerProps;
 
-    const ltiContextDeferred = new Deferred();
     fetchMock.get(
       '/api/v1.0/plugins/lti-consumer/1337/context/?user_id=a-random-uuid',
-      ltiContextDeferred.promise,
+      HttpStatusCode.INTERNAL_SERVER_ERROR,
     );
 
     const { container } = render(
@@ -207,12 +211,8 @@ describe('widgets/LtiConsumer', () => {
       </Wrapper>,
     );
 
-    await act(async () => ltiContextDeferred.resolve(500));
-
     await waitFor(() =>
-      expect(mockHandle).toHaveBeenCalledWith(
-        Error('Failed to retrieve LTI consumer context at placeholder 1337'),
-      ),
+      expect(mockHandle).toHaveBeenCalledWith(new HttpError(500, 'Internal Server Error')),
     );
 
     // Nothing has been rendered
@@ -339,22 +339,13 @@ describe('widgets/LtiConsumer', () => {
     ).toBeDefined();
   });
 
-  it('sets stale time to 5 minutes', async () => {
-    const client = createTestQueryClient({ user: null });
-    const ltiContextDeferred = new Deferred();
+  it('does not refetch context on user update', async () => {
+    const user = UserFactory({ username: 'johndoe', email: undefined }).one();
+    const client = createTestQueryClient({ user });
+    fetchMock.get('https://endpoint.test/logout', 200);
     fetchMock.get(
-      '/api/v1.0/plugins/lti-consumer/1337/context/?user_id=a-random-uuid',
-      ltiContextDeferred.promise,
-    );
-
-    render(
-      <Wrapper client={client}>
-        <LtiConsumer id={1337} />
-      </Wrapper>,
-    );
-
-    await act(async () =>
-      ltiContextDeferred.resolve({
+      '/api/v1.0/plugins/lti-consumer/1337/context/?lis_person_name_given=johndoe&lis_person_sourcedid=johndoe&user_id=johndoe',
+      {
         url: 'http://localhost:8060/lti/videos/c761d6e9-5371-4650-b27a-fa4c8865fd34',
         content_parameters: {
           lti_message_type: 'Marsha Video',
@@ -372,17 +363,37 @@ describe('widgets/LtiConsumer', () => {
           oauth_signature: 'frVp4JuvT1mVXlxktiAUjQ7/1cw=',
         },
         is_automatic_resizing: true,
-      }),
+      },
     );
 
-    const cacheQueries = client.getQueryCache().getAll();
-
-    expect(
-      cacheQueries.find(
-        (query) =>
-          query.queryKey.includes('lti-consumer-plugin-1337') &&
-          (query.options as QueryObserverOptions).staleTime === 300_000,
+    const { result } = renderHook(useSession, {
+      wrapper: ({ children }: PropsWithChildren) => (
+        <Wrapper client={client}>
+          <LtiConsumer id={1337} />
+          {children}
+        </Wrapper>
       ),
-    ).toBeDefined();
+    });
+
+    expect(result.current.user?.username).toBe('johndoe');
+    expect(fetchMock.calls()).toHaveLength(1);
+    expect(fetchMock.lastUrl()).toBe(
+      '/api/v1.0/plugins/lti-consumer/1337/context/?lis_person_name_given=johndoe&lis_person_sourcedid=johndoe&user_id=johndoe',
+    );
+
+    // User logout
+    await act(async () => {
+      result.current.destroy();
+    });
+
+    expect(fetchMock.calls()).toHaveLength(2);
+    expect(fetchMock.lastUrl()).toBe('https://endpoint.test/logout');
+
+    await waitFor(() => {
+      expect(result.current.user).toBeNull();
+    });
+
+    // Once LTIConsumer component has been rerenred, it should not have been refetched context
+    expect(fetchMock.calls()).toHaveLength(2);
   });
 });

package/js/widgets/LtiConsumer/index.tsx

@@ -2,10 +2,10 @@ import { useEffect, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { iframeResize } from 'iframe-resizer';
 import queryString from 'query-string';
+import { useQuery } from '@tanstack/react-query';
 import { useSession } from 'contexts/SessionContext';
-import { REACT_QUERY_SETTINGS, RICHIE_LTI_ANONYMOUS_USER_ID_CACHE_KEY } from 'settings';
-import { handle } from 'utils/errors/handle';
-import { useSessionQuery } from 'utils/react-query/useSessionQuery';
+import { RICHIE_LTI_ANONYMOUS_USER_ID_CACHE_KEY } from 'settings';
+import { HttpError } from 'utils/errors/HttpError';
 import { LtiConsumerContext, LtiConsumerProps } from './types/LtiConsumer';
 
 const LtiConsumer = ({ id }: LtiConsumerProps) => {
@@ -13,14 +13,14 @@ const LtiConsumer = ({ id }: LtiConsumerProps) => {
 
   const checkResponseStatus = (response: Response) => {
     if (!response.ok) {
-      throw new Error(`Failed to retrieve LTI consumer context at placeholder ${id}`);
+      throw new HttpError(response.status, response.statusText, undefined, response.json());
     }
     return response.json();
   };
 
-  const [{ data: context }] = useSessionQuery<LtiConsumerContext>(
-    [`lti-consumer-plugin-${id}`],
-    () => {
+  const { data: context } = useQuery<LtiConsumerContext>({
+    queryKey: [`lti-consumer-plugin-${id}`],
+    queryFn: () => {
       // We have to provide a unique user_id to generate the lti context. When user is authenticated, we use its
       // username as user_id. In the case the user is anonymous, we generate an uuid then store it into the session
       // storage. Furthermore, we provide to LTI context some "lis_person" information (id, username and email) if they
@@ -45,14 +45,10 @@ const LtiConsumer = ({ id }: LtiConsumerProps) => {
         })}`,
       ).then(checkResponseStatus);
     },
-    {
-      // Do not fetch LTI context until session state has been retrieved.
-      enabled: user !== undefined,
-      // LTI Context lifetime is 5 minutes except in editor mode
-      staleTime: window.CMS?.config.auth ? 0 : REACT_QUERY_SETTINGS.staleTimes.session,
-      onError: handle,
-    },
-  );
+    // Do not fetch LTI context until session state has been retrieved.
+    enabled: user !== undefined,
+    staleTime: 0,
+  });
   const formRef = useRef<HTMLFormElement>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
 

package/js/widgets/Search/components/SearchFilterGroup/index.spec.tsx

@@ -53,11 +53,6 @@ describe('widgets/Search/components/SearchFilterGroup', () => {
   };
 
   beforeEach(jest.resetAllMocks);
-  beforeEach(() => {
-    const modalExclude = document.createElement('div');
-    modalExclude.setAttribute('id', 'modal-exclude');
-    document.body.appendChild(modalExclude);
-  });
 
   it('renders the name of the filter with the values as SearchFilters', () => {
     render(

package/js/widgets/Search/components/SearchFilterGroupModal/_styles.scss

@@ -59,16 +59,7 @@
   }
 
   &-button {
-    @include button-small();
     margin-top: 1rem;
-    width: 100%;
     font-weight: $font-weight-boldest;
-    text-transform: uppercase;
-    background: r-theme-val(search-filters-group-modal, button-background);
-    color: r-theme-val(search-filters-group-modal, button-color);
-
-    &:hover {
-      color: r-theme-val(search-filters-group-modal, button-color);
-    }
   }
 }

package/js/widgets/Search/components/SearchFilterGroupModal/index.spec.tsx

@@ -63,11 +63,6 @@ describe('<SearchFilterGroupModal />', () => {
 
   beforeEach(() => fetchMock.restore());
   beforeEach(jest.resetAllMocks);
-  beforeEach(() => {
-    const modalExclude = document.createElement('div');
-    modalExclude.setAttribute('id', 'modal-exclude');
-    document.body.appendChild(modalExclude);
-  });
 
   it('renders a button with a modal to search values for a given filter', async () => {
     {