richie-education 2.25.0-b2.dev69 → 2.25.0-b2.dev77

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

@@ -4,7 +4,8 @@ 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 { CourseListItem } from 'types/Joanie';
+import { PropsWithChildren } from 'react';
+import { CourseListItem, CourseProductRelation, Organization } from 'types/Joanie';
 import {
   RichieContextFactory as mockRichieContextFactory,
   UserFactory,
@@ -16,7 +17,11 @@ import {
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 
-import { CourseFactory } from 'utils/test/factories/joanie';
+import {
+  CourseFactory,
+  CourseProductRelationFactory,
+  OrganizationFactory,
+} from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { TeacherDashboardCourseSidebar, messages } from '.';
 
@@ -37,26 +42,44 @@ jest.mock('utils/indirection/window', () => ({
 const intl = createIntl({ locale: 'en' });
 
 interface RenderTeacherDashboardCourseSidebarProps {
-  courseId: string;
+  courseId: CourseListItem['id'];
+  organizationId?: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
 }
-const renderTeacherDashboardCourseSidebar = ({
+
+const Wrapper = ({
+  children,
   courseId,
-}: RenderTeacherDashboardCourseSidebarProps) =>
-  render(
+  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={[`/${courseId}`]}>
+            <MemoryRouter initialEntries={[initialEntry]}>
               <Routes>
-                <Route path="/:courseId" element={<TeacherDashboardCourseSidebar />} />
+                <Route path={routePath} element={children} />
               </Routes>
             </MemoryRouter>
           </CunninghamProvider>
         </JoanieSessionProvider>
       </QueryClientProvider>
-    </IntlProvider>,
+    </IntlProvider>
   );
+};
 
 describe('<TeacherDashboardCourseSidebar/>', () => {
   let nbApiRequest: number;
@@ -77,7 +100,12 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
     nbApiRequest += 1; // call to course
 
-    renderTeacherDashboardCourseSidebar({ courseId: course.id });
+    render(
+      <Wrapper courseId={course.id}>
+        <TeacherDashboardCourseSidebar />
+      </Wrapper>,
+    );
+
     await expectNoSpinner('Loading course...');
     const link = screen.getByRole('link', {
       name: intl.formatMessage(messages.syllabusLinkLabel),
@@ -85,25 +113,103 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
     expect(link).toHaveAttribute('href', `/redirects/courses/${course.code}`);
   });
 
-  it('should display menu items', async () => {
-    const course: CourseListItem = CourseFactory().one();
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
-    nbApiRequest += 1; // call to course
+  it.each([
+    {
+      label: 'course',
+      course: CourseFactory().one(),
+      organization: undefined,
+      courseProductRelation: undefined,
+      expectedRoutes: [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION],
+    },
+    {
+      label: 'training',
+      course: CourseFactory().one(),
+      organization: undefined,
+      courseProductRelation: CourseProductRelationFactory().one(),
+      expectedRoutes: [
+        TeacherDashboardPaths.COURSE_PRODUCT,
+        TeacherDashboardPaths.COURSE_CONTRACTS,
+      ],
+    },
+    {
+      label: "organization's course",
+      course: CourseFactory().one(),
+      organization: OrganizationFactory().one(),
+      courseProductRelation: undefined,
+      expectedRoutes: [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION],
+    },
+    {
+      label: "organization's training",
+      course: CourseFactory().one(),
+      organization: OrganizationFactory().one(),
+      courseProductRelation: CourseProductRelationFactory().one(),
+      expectedRoutes: [
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT,
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+      ],
+    },
+  ])(
+    'should display menu items for "$label" route',
+    async ({ course, organization, courseProductRelation, expectedRoutes }) => {
+      // mock api for organization's training
+      if (organization && courseProductRelation) {
+        // fetching training's contracts
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=half_signed&page=1&page_size=25`,
+          [],
+        );
+        // fetching organization's training
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/${courseProductRelation.id}/`,
+          courseProductRelation,
+        );
+      } else if (organization) {
+        // fetching organization's course
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/${course.id}/`,
+          course,
+        );
+      } else if (courseProductRelation) {
+        // fetching training
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
+          courseProductRelation,
+        );
+      } else {
+        // mock api for course
+        nbApiRequest += 1;
+        fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
+      }
 
-    renderTeacherDashboardCourseSidebar({ courseId: course.id });
-    await expectNoSpinner('Loading course...');
-    expect(
-      screen.getByRole('link', {
-        name: intl.formatMessage(
-          TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.COURSE_GENERAL_INFORMATION],
-        ),
-      }),
-    ).toBeInTheDocument();
-
-    expect(screen.queryByTestId('organization-links')).not.toBeInTheDocument();
-    // general informations
-    // go to syllabus
-    expect(screen.getAllByRole('link')).toHaveLength(2);
-    expect(fetchMock.calls()).toHaveLength(nbApiRequest);
-  });
+      render(
+        <Wrapper
+          courseId={course.id}
+          courseProductRelationId={courseProductRelation ? courseProductRelation.id : undefined}
+          organizationId={organization ? organization.id : undefined}
+        >
+          <TeacherDashboardCourseSidebar />
+        </Wrapper>,
+      );
+
+      await expectNoSpinner('Loading course...');
+      expectedRoutes.forEach((expectedRoute) => {
+        expect(
+          screen.getByRole('link', {
+            name: intl.formatMessage(TEACHER_DASHBOARD_ROUTE_LABELS[expectedRoute]),
+          }),
+        ).toBeInTheDocument();
+      });
+
+      expect(screen.queryByTestId('organization-links')).not.toBeInTheDocument();
+
+      let nbExpectedLinks = expectedRoutes.length;
+      nbExpectedLinks += 1; // link to syllabus
+      expect(screen.getAllByRole('link')).toHaveLength(nbExpectedLinks);
+      expect(fetchMock.calls()).toHaveLength(nbApiRequest);
+    },
+  );
 });

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

@@ -2,7 +2,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { useMemo } from 'react';
 import { capitalize } from 'lodash-es';
-import { DashboardSidebar } from 'widgets/Dashboard/components/DashboardSidebar';
+import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import {
   getDashboardRouteLabel,
   getDashboardRoutePath,
@@ -11,6 +11,8 @@ import { useCourse } from 'hooks/useCourses';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { useCourseProductRelation } from 'hooks/useCourseProductRelation';
+import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
+import ContractNavLink from '../DashboardSidebar/components/ContractNavLink';
 import { getMenuRoutes } from './utils';
 
 export const messages = defineMessages({
@@ -41,23 +43,35 @@ export const TeacherDashboardCourseSidebar = () => {
   const getRoutePath = getDashboardRoutePath(intl);
   const getRouteLabel = getDashboardRouteLabel(intl);
   const {
-    courseId,
-    courseProductRelationId = '',
-    organizationId,
+    organizationId: routeOrganizationId,
+    courseId: routeCourseId,
+    courseProductRelationId: routeCourseProductRelationId = '',
   } = useParams<{
+    organizationId?: string;
     courseId: string;
     courseProductRelationId: string;
-    organizationId?: string;
   }>();
 
   const {
     item: singleCourse,
     states: { fetching: courseFetching },
-  } = useCourse(courseId, { organization_id: organizationId });
+  } = useCourse(
+    routeCourseId,
+    { organization_id: routeOrganizationId },
+    { enabled: !routeCourseProductRelationId },
+  );
+
   const {
     item: courseProductRelation,
     states: { fetching: courseProductRelationFetching },
-  } = useCourseProductRelation(courseProductRelationId, { organization_id: organizationId });
+  } = useCourseProductRelation(
+    routeCourseProductRelationId,
+    {
+      organization_id: routeOrganizationId,
+    },
+    { enabled: !!routeCourseProductRelationId },
+  );
+
   const fetching = useMemo(
     () => courseFetching || courseProductRelationFetching,
     [courseFetching, courseProductRelationFetching],
@@ -71,14 +85,48 @@ export const TeacherDashboardCourseSidebar = () => {
     [courseProductRelation, singleCourse],
   );
 
-  const menuLinks = getMenuRoutes({ courseProductRelationId, organizationId }).map((path) => ({
-    to: getRoutePath(path, { courseId, courseProductRelationId, organizationId }),
-    label: getRouteLabel(path),
-  }));
+  const getMenuLinkFromPath = (basePath: TeacherDashboardPaths) => {
+    const path = getRoutePath(basePath, {
+      organizationId: routeOrganizationId,
+      courseId: routeCourseId,
+      courseProductRelationId: routeCourseProductRelationId,
+    });
+
+    const menuLink: MenuLink = {
+      to: path,
+      label: getRouteLabel(basePath),
+    };
+
+    if (
+      [
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+        TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS,
+      ].includes(basePath)
+    ) {
+      menuLink.component = (
+        <ContractNavLink
+          link={menuLink}
+          organizationId={routeOrganizationId}
+          courseProductRelationId={routeCourseProductRelationId}
+        />
+      );
+    }
+
+    return menuLink;
+  };
+
+  const menuLinkList = useMemo(
+    () =>
+      getMenuRoutes({
+        courseProductRelationId: routeCourseProductRelationId,
+        organizationId: routeOrganizationId,
+      }).map(getMenuLinkFromPath),
+    [routeOrganizationId, routeCourseProductRelationId],
+  );
 
   return (
     <DashboardSidebar
-      menuLinks={menuLinks}
+      menuLinks={menuLinkList}
       header={
         course === undefined
           ? ''

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

@@ -4,16 +4,20 @@ interface GetMenuRoutesArgs {
   courseProductRelationId?: string;
   organizationId?: string;
 }
+
 export const getMenuRoutes = ({ courseProductRelationId, organizationId }: GetMenuRoutesArgs) => {
   if (organizationId) {
     if (courseProductRelationId) {
-      return [TeacherDashboardPaths.ORGANIZATION_PRODUCT];
+      return [
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT,
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+      ];
     }
     return [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION];
   }
 
   if (courseProductRelationId) {
-    return [TeacherDashboardPaths.COURSE_PRODUCT];
+    return [TeacherDashboardPaths.COURSE_PRODUCT, TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS];
   }
   return [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION];
 };

package/package.json

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