richie-education 2.25.0-b2.dev116 → 2.25.0-b2.dev118

package/js/hooks/useDefaultOrganizationId/index.tsx

@@ -1,6 +1,6 @@
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useOrganizations } from 'hooks/useOrganizations';
-import { Organization } from 'types/Joanie';
+import { CourseProductRelation, Organization } from 'types/Joanie';
 
 /**
  * return organization id with this priority:
@@ -9,14 +9,21 @@ import { Organization } from 'types/Joanie';
  * * first organization of user's organizations
  */
 const useDefaultOrganizationId = () => {
-  const { organizationId: routeOrganizationId } = useParams<{
+  const {
+    organizationId: routeOrganizationId,
+    courseProductRelationId: routeCourseProductRelationId,
+  } = useParams<{
     organizationId?: Organization['id'];
+    courseProductRelationId: CourseProductRelation['id'];
   }>();
   const [searchParams] = useSearchParams();
   const queryOrganizationId = searchParams.get('organization_id') || undefined;
-  const { items: organizations } = useOrganizations(undefined, {
-    enabled: !routeOrganizationId && !queryOrganizationId,
-  });
+  const { items: organizations } = useOrganizations(
+    { course_product_relation_id: routeCourseProductRelationId },
+    {
+      enabled: !routeOrganizationId && !queryOrganizationId,
+    },
+  );
 
   return (
     routeOrganizationId ||

package/js/pages/TeacherDashboardContractsLayout/TeacherDashboardContracts/index.spec.tsx

@@ -3,7 +3,11 @@ import { screen } from '@testing-library/react';
 import { getAllByRole } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { ContractFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+import {
+  ContractFactory,
+  CourseProductRelationFactory,
+  OrganizationFactory,
+} from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { expectBannerError } from 'utils/test/expectBanner';
 import { HttpStatusCode } from 'utils/errors/HttpError';
@@ -34,6 +38,7 @@ describe('pages/TeacherDashboardContracts', () => {
   setupJoanieSession();
 
   it('should render a list of contracts for a course product relation', async () => {
+    const courseProductRelation = CourseProductRelationFactory().one();
     const contracts = ContractFactory({
       student_signed_on: Date.toString(),
       organization_signed_on: Date.toString(),
@@ -42,22 +47,27 @@ describe('pages/TeacherDashboardContracts', () => {
     const defaultOrganization = organizations[0];
 
     // OrganizationContractFilter request all organizations forwho the user have access
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, organizations);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+      organizations,
+    );
     // TeacherDashboardContracts request a paginated list of contracts to display
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?course_product_relation_id=2&signature_state=signed&page=1&page_size=25`,
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=signed&page=1&page_size=25`,
       { results: contracts, count: 0, previous: null, next: null },
     );
     // useTeacherContractsToSign request all contract to sign, without pagination
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed&course_product_relation_id=2`,
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed&course_product_relation_id=${courseProductRelation.id}`,
       { results: [], count: 0, previous: null, next: null },
     );
 
     render(<TeacherDashboardContracts />, {
       routerOptions: {
         path: '/courses/:courseId/products/:courseProductRelationId/contracts',
-        initialEntries: ['/courses/1/products/2/contracts'],
+        initialEntries: [
+          `/courses/${courseProductRelation.course.id}/products/${courseProductRelation.id}/contracts`,
+        ],
       },
     });
 

package/js/pages/TeacherDashboardContractsLayout/TeacherDashboardContracts/index.tsx

@@ -42,14 +42,20 @@ const TeacherDashboardContracts = () => {
     defaultPage: page ? parseInt(page, 10) : 1,
     pageSize: PER_PAGE.teacherContractList,
   });
-  const { organizationId: routeOrganizationId } = useParams<TeacherDashboardContractsParams>();
+  const {
+    organizationId: routeOrganizationId,
+    courseProductRelationId: routeCourseProductRelationId,
+  } = useParams<TeacherDashboardContractsParams>();
   // organization list is used to show/hide organization filter.
   // when organizationId is in route's params this filter is always hidden.
   // therefore we don't need to enable this query.
   const {
     items: organizationList,
     states: { isFetched: isOrganizationListFetched },
-  } = useOrganizations(undefined, { enabled: !!routeOrganizationId });
+  } = useOrganizations(
+    { course_product_relation_id: routeCourseProductRelationId },
+    { enabled: !routeOrganizationId },
+  );
   const hasMultipleOrganizations = isOrganizationListFetched && organizationList.length > 1;
   const { initialFilters, filters, setFilters } = useTeacherContractFilters();
   const {
@@ -97,6 +103,7 @@ const TeacherDashboardContracts = () => {
         <ContractFiltersBar
           defaultValues={initialFilters}
           onFiltersChange={handleFiltersChange}
+          organizationList={organizationList}
           hideFilterOrganization={!!(routeOrganizationId || !hasMultipleOrganizations)}
         />
       </div>

package/js/pages/TeacherDashboardContractsLayout/components/ContractFiltersBar/index.tsx

@@ -1,7 +1,7 @@
 import { Select, SelectProps } from '@openfun/cunningham-react';
 import { defineMessages, useIntl } from 'react-intl';
 import FiltersBar from 'widgets/Dashboard/components/FiltersBar';
-import { ContractState } from 'types/Joanie';
+import { ContractState, Organization } from 'types/Joanie';
 import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
 import FilterOrganization from 'widgets/Dashboard/components/FilterOrganization';
 
@@ -28,11 +28,13 @@ interface ContractFiltersBarProps {
   defaultValues?: ContractListFilters;
   hideFilterOrganization?: boolean;
   hideFilterSignatureState?: boolean;
+  organizationList?: Organization[];
 }
 
 const ContractFiltersBar = ({
   defaultValues,
   onFiltersChange,
+  organizationList,
   hideFilterOrganization = false,
   hideFilterSignatureState = false,
 }: ContractFiltersBarProps) => {
@@ -42,6 +44,7 @@ const ContractFiltersBar = ({
         <FilterOrganization
           defaultValue={defaultValues?.organization_id}
           onChange={onFiltersChange}
+          organizationList={organizationList}
         />
       )}
       {!hideFilterSignatureState && (

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

@@ -129,7 +129,10 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
           courseProductRelation,
         );
         nbApiRequest += 1;
-        fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+          [],
+        );
       } else {
         // mock api for course
         nbApiRequest += 1;

package/js/widgets/UserLogin/components/UserMenu/DesktopUserMenu.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { useSelect } from 'downshift';
+import classNames from 'classnames';
 import { location } from 'utils/indirection/window';
 import { UserHelper } from 'utils/UserHelper';
 import { UserMenuProps } from '.';
@@ -36,6 +37,21 @@ export const DesktopUserMenu: FC<UserMenuProps> = ({ user }) => {
     },
   });
 
+  const teacherDasbhoardUrl = user.urls.find((link) => {
+    return link.key === 'dashboard_teacher';
+  });
+  let menuLinkList;
+  if (teacherDasbhoardUrl) {
+    menuLinkList = [
+      teacherDasbhoardUrl,
+      ...user.urls.filter((link) => {
+        return link.key !== 'dashboard_teacher';
+      }),
+    ];
+  } else {
+    menuLinkList = user.urls;
+  }
+
   return (
     <div className="user-menu user-menu--desktop selector">
       <label {...getLabelProps()} className="offscreen">
@@ -52,8 +68,14 @@ export const DesktopUserMenu: FC<UserMenuProps> = ({ user }) => {
         className={`selector__list ${isOpen ? '' : 'selector__list--is-closed'}`}
       >
         {isOpen &&
-          user.urls.map((link, index) => (
-            <li key={link.key} {...getItemProps({ item: link, index })}>
+          menuLinkList.map((link, index) => (
+            <li
+              key={link.key}
+              {...getItemProps({ item: link, index })}
+              className={classNames({
+                'selector__list__item--bordered': link.key === 'dashboard_teacher',
+              })}
+            >
               {typeof link.action === 'string' ? (
                 <a
                   className={`selector__list__link ${

package/package.json

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

package/scss/objects/_selector.scss

@@ -57,6 +57,12 @@
       margin-left: calc(3rem - 12px);
     }
 
+    &__item {
+      &--bordered:not(:last-child) {
+        border-bottom: $onepixel solid r-theme-val(topbar, item-divider-border);
+      }
+    }
+
     &__link {
       @include button-reset-style();
       background: r-theme-val(selector, base-background);