richie-education 2.25.0-b2.dev41 → 2.25.0-b2.dev42

package/js/components/Badge/index.tsx

@@ -6,6 +6,7 @@ type BadgeProps = PropsWithChildren<{
 }>;
 const Badge = ({ children, color }: BadgeProps) => (
   <div
+    data-testid="badge"
     className={classNames('category-badge', {
       [`category-badge--${color}`]: Boolean(color),
     })}

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

@@ -0,0 +1,244 @@
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import fetchMock from 'fetch-mock';
+import { faker } from '@faker-js/faker';
+import queryString from 'query-string';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { PER_PAGE } from 'settings';
+import { ContractResourceQuery, ContractState } from 'types/Joanie';
+import { ContractFactory } from 'utils/test/factories/joanie';
+import { ContractActions } from 'utils/AbilitiesHelper/types';
+import { MenuLink } from '../..';
+import ContractNavLink from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('<ContractNavLink />', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <QueryClientProvider client={createTestQueryClient({ user: true })}>
+      <IntlProvider locale="en">
+        <JoanieSessionProvider>
+          <MemoryRouter>{children}</MemoryRouter>
+        </JoanieSessionProvider>
+      </IntlProvider>
+    </QueryClientProvider>
+  );
+
+  beforeEach(() => {
+    // JoanieSessionProvider queries
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('should render a ContractNavLink with route and label when neither organizationId and courseProductRelationId are given', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My contract navigation link',
+    };
+
+    render(
+      <Wrapper>
+        <ContractNavLink link={link} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('link', { name: 'My contract navigation link' })).toBeInTheDocument();
+    expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+  });
+
+  describe('without sign ability', () => {
+    const contractAbilities = { [ContractActions.SIGN]: false };
+    it.each([
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: undefined,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: faker.string.uuid(),
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: faker.string.uuid(),
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: undefined,
+      },
+    ])(
+      'should never render Badge for organizationId: $organizationId and courseProductId: $courseProductRelationId',
+      async ({ organizationId, courseProductRelationId }) => {
+        let contractQueryParams: ContractResourceQuery = {
+          signature_state: ContractState.LEARNER_SIGNED,
+          page: 1,
+          page_size: PER_PAGE.teacherContractList,
+        };
+        if (courseProductRelationId) {
+          contractQueryParams = {
+            course_product_relation_id: courseProductRelationId,
+            ...contractQueryParams,
+          };
+        }
+
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organizationId}/contracts/?${queryString.stringify(
+            contractQueryParams,
+            { sort: false },
+          )}`,
+          {
+            count: 1,
+            next: null,
+            previous: null,
+            results: [ContractFactory({ abilities: contractAbilities }).one()],
+          },
+        );
+        render(
+          <Wrapper>
+            <ContractNavLink
+              link={{
+                to: '/dummy/url/',
+                label: 'My contract navigation link',
+              }}
+              organizationId={organizationId}
+              courseProductRelationId={courseProductRelationId}
+            />
+          </Wrapper>,
+        );
+
+        expect(
+          screen.getByRole('link', { name: 'My contract navigation link' }),
+        ).toBeInTheDocument();
+        expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+      },
+    );
+  });
+
+  describe('with sign ability', () => {
+    const contractAbilities = { [ContractActions.SIGN]: true };
+    it.each([
+      // with 1 contracts to sign
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: undefined,
+        nbContractsToSign: 1,
+        expectedBadgeCount: 1,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 1,
+        expectedBadgeCount: 1,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 1,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: undefined,
+        nbContractsToSign: 1,
+        expectedBadgeCount: undefined,
+      },
+
+      // with 0 contracts to sign
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: undefined,
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: undefined,
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+    ])(
+      'should render Badge (count: $expectedBadgeCount) for nb contracts to sign: $nbContractsToSign, organizationId: $organizationId and courseProductId: $courseProductRelationId',
+      async ({
+        nbContractsToSign,
+        organizationId,
+        courseProductRelationId,
+        expectedBadgeCount,
+      }) => {
+        let contractQueryParams: ContractResourceQuery = {
+          signature_state: ContractState.LEARNER_SIGNED,
+          page: 1,
+          page_size: PER_PAGE.teacherContractList,
+        };
+        if (courseProductRelationId) {
+          contractQueryParams = {
+            course_product_relation_id: courseProductRelationId,
+            ...contractQueryParams,
+          };
+        }
+
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organizationId}/contracts/?${queryString.stringify(
+            contractQueryParams,
+            { sort: false },
+          )}`,
+          {
+            count: nbContractsToSign,
+            next: null,
+            previous: null,
+            results: [ContractFactory({ abilities: contractAbilities }).one()],
+          },
+        );
+        render(
+          <Wrapper>
+            <ContractNavLink
+              link={{
+                to: '/dummy/url/',
+                label: 'My contract navigation link',
+              }}
+              organizationId={organizationId}
+              courseProductRelationId={courseProductRelationId}
+            />
+          </Wrapper>,
+        );
+
+        expect(
+          screen.getByRole('link', { name: 'My contract navigation link' }),
+        ).toBeInTheDocument();
+        if (expectedBadgeCount === undefined) {
+          expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+        } else {
+          const $badge = await screen.findByTestId('badge');
+          expect($badge).toBeInTheDocument();
+          expect($badge).toHaveTextContent(`${expectedBadgeCount}`);
+        }
+      },
+    );
+  });
+});

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

@@ -0,0 +1,47 @@
+import { createSearchParams } from 'react-router-dom';
+import { useMemo } from 'react';
+import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
+import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
+import useTeacherPendingContractsCount from 'hooks/useTeacherPendingContractsCount';
+import { ContractActions } from 'utils/AbilitiesHelper/types';
+import useContractAbilities from 'hooks/useContractAbilities';
+import MenuNavLink from '../MenuNavLink';
+
+interface ContractNavLinkProps {
+  link: MenuLink;
+  organizationId?: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
+}
+
+const ContractNavLink = ({
+  link,
+  organizationId,
+  courseProductRelationId,
+}: ContractNavLinkProps) => {
+  const { contracts: pendingContracts, pendingContractCount } = useTeacherPendingContractsCount({
+    organizationId,
+    courseProductRelationId,
+  });
+  const contractAbilities = useContractAbilities(pendingContracts);
+  const canSignContracts = contractAbilities.can(ContractActions.SIGN);
+  const hasContractsToSign = useMemo(
+    () => canSignContracts && pendingContractCount > 0,
+    [canSignContracts, pendingContractCount],
+  );
+  const searchParams = useMemo(() => {
+    if (hasContractsToSign) {
+      return createSearchParams({ signature_state: ContractState.LEARNER_SIGNED });
+    }
+
+    return createSearchParams({ signature_state: ContractState.SIGNED });
+  }, [hasContractsToSign]);
+
+  return (
+    <MenuNavLink
+      link={{ ...link, to: `${link.to}?${searchParams.toString()}` }}
+      badgeCount={hasContractsToSign ? pendingContractCount : undefined}
+    />
+  );
+};
+
+export default ContractNavLink;

package/js/widgets/Dashboard/components/DashboardSidebar/components/MenuNavLink/index.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { MenuLink } from '../..';
+import MenuNavLink from '.';
+
+describe('<MenuNavLink />', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => <MemoryRouter>{children} </MemoryRouter>;
+  it('should render a MenuNavLink with route and label', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My navigation link',
+    };
+
+    render(
+      <Wrapper>
+        <MenuNavLink link={link} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('link', { name: 'My navigation link' })).toBeInTheDocument();
+    expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+  });
+
+  it('should render a MenuNavLink with a badge', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My navigation link',
+    };
+
+    render(
+      <Wrapper>
+        <MenuNavLink link={link} badgeCount={999} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('link', { name: 'My navigation link' })).toBeInTheDocument();
+    expect(screen.getByText('999')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import { NavLink, useLocation } from 'react-router-dom';
+import Badge from 'components/Badge';
+import { MenuLink } from '../..';
+import { isMenuLinkActive } from '../../utils';
+
+interface MenuNavLinkProps {
+  link: MenuLink;
+  badgeCount?: number;
+}
+
+const MenuNavLink = ({ link, badgeCount }: MenuNavLinkProps) => {
+  const location = useLocation();
+  return (
+    <li
+      className={classNames('dashboard-sidebar__container__nav__item', {
+        active: isMenuLinkActive(link.to, location),
+      })}
+    >
+      <NavLink to={link.to} end>
+        {link.label}
+      </NavLink>
+      {badgeCount && <Badge color="primary">{badgeCount}</Badge>}
+    </li>
+  );
+};
+
+export default MenuNavLink;

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

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import { UserFactory } from 'utils/test/factories/richie';
 import { StorybookHelper } from 'utils/StorybookHelper';
-import Badge from 'components/Badge';
+import MenuNavLink from './components/MenuNavLink';
 import { DashboardSidebar } from '.';
 
 export default {
@@ -19,7 +19,12 @@ export default {
               {
                 to: '/test/again',
                 label: 'An other menu link',
-                badge: <Badge color="primary">999</Badge>,
+                component: (
+                  <MenuNavLink
+                    link={{ to: '/test/again', label: 'An other menu link' }}
+                    badgeCount={999}
+                  />
+                ),
               },
             ]}
             header="Dashboard story header"

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

@@ -1,14 +1,13 @@
-import { matchPath, NavLink, resolvePath, useLocation } from 'react-router-dom';
-import { PropsWithChildren, ReactNode, useCallback } from 'react';
-import classNames from 'classnames';
+import { Fragment, PropsWithChildren, ReactNode } from 'react';
 import { useSession } from 'contexts/SessionContext';
 import { DashboardAvatar } from 'widgets/Dashboard/components/DashboardAvatar';
 import NavigationSelect from './components/NavigationSelect';
+import MenuNavLink from './components/MenuNavLink';
 
 export interface MenuLink {
   to: string;
   label: string;
-  badge?: ReactNode;
+  component?: ReactNode;
 }
 
 export interface DashboardSidebarProps extends PropsWithChildren {
@@ -28,15 +27,7 @@ export const DashboardSidebar = ({
   avatar,
 }: DashboardSidebarProps) => {
   const { user } = useSession();
-  const location = useLocation();
   const classes = ['dashboard-sidebar'];
-  const isActive = useCallback(
-    (to: string) => {
-      const path = resolvePath(to).pathname;
-      return !!matchPath({ path, end: true }, location.pathname);
-    },
-    [location],
-  );
 
   return (
     <aside className={classes.join(' ')} data-testid="dashboard__sidebar">
@@ -54,19 +45,13 @@ export const DashboardSidebar = ({
         </div>
 
         <ul className="dashboard-sidebar__container__nav">
-          {menuLinks.map((link) => (
-            <li
-              key={link.to}
-              className={classNames('dashboard-sidebar__container__nav__item', {
-                active: isActive(link.to),
-              })}
-            >
-              <NavLink to={link.to} end>
-                {link.label}
-              </NavLink>
-              {link.badge}
-            </li>
-          ))}
+          {menuLinks.map((link) =>
+            link.component ? (
+              <Fragment key={link.to}>{link.component}</Fragment>
+            ) : (
+              <MenuNavLink link={link} key={link.to} />
+            ),
+          )}
         </ul>
       </div>
       {children}

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

@@ -0,0 +1,6 @@
+import { Location, matchPath, resolvePath } from 'react-router-dom';
+
+export const isMenuLinkActive = (to: string, location: Location) => {
+  const path = resolvePath(to).pathname;
+  return !!matchPath({ path, end: true }, location.pathname);
+};

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

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
 import { CunninghamProvider } from '@openfun/cunningham-react';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
@@ -111,7 +111,9 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
 
     // It should display contract link with badge next to it displaying the number of contracts to sign
     const contractLink = screen.getByRole('link', { name: 'Contracts' });
-    expect(contractLink!.nextSibling).toHaveTextContent(contractToSignCount.toString());
+    await waitFor(() => {
+      expect(contractLink!.nextSibling).toHaveTextContent(contractToSignCount.toString());
+    });
     expect(contractLink).toHaveAttribute(
       'href',
       '/teacher/organizations/' + organization.id + '/contracts?signature_state=half_signed',

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

@@ -1,20 +1,15 @@
-import { useMemo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { createSearchParams, useParams } from 'react-router-dom';
-import Badge from 'components/Badge';
+import { useParams } from 'react-router-dom';
 import { Spinner } from 'components/Spinner';
 import { useOrganization } from 'hooks/useOrganizations';
-import { ContractState } from 'types/Joanie';
 import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import {
   getDashboardRouteLabel,
   getDashboardRoutePath,
 } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
-import useTeacherPendingContractsCount from 'hooks/useTeacherPendingContractsCount';
-import useContractAbilities from 'hooks/useContractAbilities';
-import { ContractActions } from 'utils/AbilitiesHelper/types';
 import { DashboardAvatar, DashboardAvatarVariantEnum } from '../DashboardAvatar';
+import ContractNavLink from '../DashboardSidebar/components/ContractNavLink';
 
 const messages = defineMessages({
   subHeader: {
@@ -42,13 +37,6 @@ export const TeacherDashboardOrganizationSidebar = () => {
     states: { fetching },
   } = useOrganization(organizationId);
 
-  const { contracts: pendingContracts, pendingContractCount } = useTeacherPendingContractsCount({
-    organizationId,
-    courseProductRelationId,
-  });
-  const contractAbilities = useContractAbilities(pendingContracts);
-  const canSignContracts = contractAbilities.can(ContractActions.SIGN);
-
   const getMenuLinkFromPath = (basePath: TeacherDashboardPaths) => {
     const path = getRoutePath(basePath, { organizationId });
 
@@ -57,30 +45,23 @@ export const TeacherDashboardOrganizationSidebar = () => {
       label: getRouteLabel(basePath),
     };
 
-    // For the contracts link, we want to display the number of contracts if needed and set
-    // the correct filter depending on the user's abilities
     if (basePath === TeacherDashboardPaths.ORGANIZATION_CONTRACTS) {
-      if (canSignContracts && pendingContractCount > 0) {
-        const searchParams = createSearchParams({ signature_state: ContractState.LEARNER_SIGNED });
-        menuLink.badge = <Badge color="primary">{pendingContractCount}</Badge>;
-        menuLink.to = `${path}?${searchParams.toString()}`;
-      } else {
-        const searchParams = createSearchParams({ signature_state: ContractState.SIGNED });
-        menuLink.to = `${path}?${searchParams.toString()}`;
-      }
+      menuLink.component = (
+        <ContractNavLink
+          link={menuLink}
+          organizationId={organizationId}
+          courseProductRelationId={courseProductRelationId}
+        />
+      );
     }
 
     return menuLink;
   };
 
-  const links = useMemo(
-    () =>
-      [
-        TeacherDashboardPaths.ORGANIZATION_COURSES,
-        TeacherDashboardPaths.ORGANIZATION_CONTRACTS,
-      ].map(getMenuLinkFromPath),
-    [pendingContractCount, canSignContracts],
-  );
+  const links = [
+    TeacherDashboardPaths.ORGANIZATION_COURSES,
+    TeacherDashboardPaths.ORGANIZATION_CONTRACTS,
+  ].map(getMenuLinkFromPath);
 
   if (fetching) {
     return (

package/package.json

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