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

package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnerDataGrid/index.spec.tsx

@@ -0,0 +1,62 @@
+import { createIntl } from 'react-intl';
+import { screen } from '@testing-library/react';
+import { getAllByRole, within } from '@testing-library/dom';
+import { faker } from '@faker-js/faker';
+import { NestedCourseOrderFactory } from 'utils/test/factories/joanie';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { PaginationFactory } from 'utils/test/factories/cunningham';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import { OrderState } from 'types/Joanie';
+import { render } from 'utils/test/render';
+import { PresentationalAppWrapper } from 'utils/test/wrappers/PresentationalAppWrapper';
+import CourseLearnerDataGrid from '.';
+
+describe('pages/CourseLearnerDataGrid', () => {
+  it('should render a list of user', async () => {
+    const courseOrderList = NestedCourseOrderFactory({
+      state: OrderState.VALIDATED,
+      certificate_id: faker.string.uuid(),
+    }).many(3);
+    render(
+      <CourseLearnerDataGrid
+        courseOrders={courseOrderList}
+        sortModel={[
+          {
+            field: 'created_on',
+            sort: 'asc',
+          },
+        ]}
+        setSortModel={jest.fn()}
+        pagination={PaginationFactory().one()}
+        isLoading={false}
+      />,
+      { wrapper: PresentationalAppWrapper },
+    );
+
+    await expectNoSpinner();
+
+    // Table header should have been rendered with 5 columns
+    const columnHeaders = screen.getAllByRole('columnheader');
+    expect(columnHeaders.length).toBe(5);
+    // avatar column have no header
+    expect(columnHeaders[0]).toHaveTextContent('');
+    expect(columnHeaders[1]).toHaveTextContent('Learner');
+    expect(columnHeaders[2]).toHaveTextContent('Enrolled on');
+    expect(columnHeaders[3]).toHaveTextContent('State');
+    expect(columnHeaders[4]).toHaveTextContent('Actions');
+
+    const intl = createIntl({ locale: 'en' });
+    // Table body should have been rendered with 3 rows (one per contract)
+    courseOrderList.forEach((courseOrder) => {
+      const row = screen.getByTestId(courseOrder.id);
+      const cells = getAllByRole(row, 'cell');
+      expect(cells.length).toBe(5);
+      expect(cells[1]).toHaveTextContent(courseOrder.owner.full_name);
+      expect(cells[2]).toHaveTextContent(
+        intl.formatDate(new Date(courseOrder.created_on), DEFAULT_DATE_FORMAT),
+      );
+      expect(cells[3]).toHaveTextContent('Completed');
+      expect(within(cells[4]).getByText('Contact')).toBeInTheDocument();
+    });
+  });
+});

package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnerDataGrid/index.tsx

@@ -0,0 +1,123 @@
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { Button, DataGrid, DataGridProps, PaginationProps, Row } from '@openfun/cunningham-react';
+import { useMemo } from 'react';
+import { NestedCourseOrder } from 'types/Joanie';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import OrderStateMessage from 'widgets/Dashboard/components/DashboardItem/Order/OrderStateMessage';
+import DashboardListAvatar from 'widgets/Dashboard/components/DashboardListAvatar';
+
+const messages = defineMessages({
+  columnLearnerName: {
+    defaultMessage: 'Learner',
+    description: "Label for learner's name column",
+    id: 'pages.CourseLearnerDataGrid.columnLearnerName',
+  },
+  columnActions: {
+    defaultMessage: 'Actions',
+    description: 'Label for actions column',
+    id: 'pages.CourseLearnerDataGrid.columnActions',
+  },
+  columnPurchaseDate: {
+    defaultMessage: 'Enrolled on',
+    description: 'Label for enrolled date column',
+    id: 'pages.CourseLearnerDataGrid.columnPurchaseDate',
+  },
+  columnState: {
+    defaultMessage: 'State',
+    description: 'Label for state column',
+    id: 'pages.CourseLearnerDataGrid.columnState',
+  },
+  contactButton: {
+    defaultMessage: 'Contact',
+    description: 'Label for the contact learner button',
+    id: 'pages.CourseLearnerDataGrid.contactButton',
+  },
+});
+
+interface CourseLearnerDataGridProps {
+  courseOrders: NestedCourseOrder[];
+  sortModel: DataGridProps['sortModel'];
+  setSortModel: DataGridProps['onSortModelChange'];
+  pagination: PaginationProps;
+  isLoading: boolean;
+}
+
+const CourseLearnerDataGrid = ({
+  courseOrders,
+  sortModel,
+  setSortModel,
+  pagination,
+  isLoading,
+}: CourseLearnerDataGridProps) => {
+  const intl = useIntl();
+
+  const columns = [
+    {
+      id: 'avatar',
+      enableSorting: false,
+      renderCell: (params: { row: Row }) => {
+        return <DashboardListAvatar title={params.row.owner__full_name} />;
+      },
+    },
+    {
+      field: 'owner__full_name',
+      headerName: intl.formatMessage(messages.columnLearnerName),
+      enableSorting: false,
+    },
+    {
+      field: 'created_on',
+      headerName: intl.formatMessage(messages.columnPurchaseDate),
+      enableSorting: false,
+    },
+    {
+      id: 'orderState',
+      headerName: intl.formatMessage(messages.columnState),
+      enableSorting: false,
+      renderCell: (params: { row: Row }) => {
+        // TODO(rlecellier): create NestedOrderCourseStateMessage that's get label dedicated to teatchers.
+        // like signature needed for studdent is awaiting signature for a teacher.
+        return (
+          <OrderStateMessage
+            order={params.row.courseOrder}
+            contractDefinition={params.row.courseOrder.product.contract_definition_id}
+          />
+        );
+      },
+    },
+    {
+      id: 'actions',
+      headerName: intl.formatMessage(messages.columnActions),
+      renderCell: (params: { row: Row }) => {
+        return (
+          <Button href={`mailto:${params.row.owner__email}`} size="small" color="secondary">
+            <FormattedMessage {...messages.contactButton} />
+          </Button>
+        );
+      },
+      enableSorting: false,
+    },
+  ];
+
+  const rows = useMemo(() => {
+    return courseOrders.map((courseOrder) => ({
+      id: courseOrder.id,
+      owner__full_name: courseOrder.owner.full_name || courseOrder.owner.username,
+      owner__email: courseOrder.owner.email,
+      created_on: intl.formatDate(new Date(courseOrder.created_on), DEFAULT_DATE_FORMAT),
+      courseOrder,
+    }));
+  }, [courseOrders]);
+
+  return (
+    <DataGrid
+      columns={columns}
+      rows={rows}
+      pagination={pagination}
+      sortModel={sortModel}
+      onSortModelChange={setSortModel}
+      isLoading={isLoading}
+    />
+  );
+};
+
+export default CourseLearnerDataGrid;

package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnersFiltersBar/index.spec.tsx

@@ -0,0 +1,70 @@
+import { screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { ContractState } from 'types/Joanie';
+import { OrganizationFactory } from 'utils/test/factories/joanie';
+import { noop } from 'utils';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import CourseLearnersFiltersBar from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('<CourseLearnersFiltersBar/>', () => {
+  setupJoanieSession();
+
+  it('should render organization filter with default value', async () => {
+    const filterChange = jest.fn();
+    const organizations = OrganizationFactory().many(2);
+    const defaultValues = {
+      signature_state: ContractState.LEARNER_SIGNED,
+      organization_id: organizations[1].id,
+    };
+
+    render(
+      <CourseLearnersFiltersBar
+        onFiltersChange={filterChange}
+        defaultValues={defaultValues}
+        organizationList={organizations}
+      />,
+    );
+
+    // Two selects should have rendered
+    const organizationFilter: HTMLInputElement = screen.getByRole('combobox', {
+      name: 'Organization',
+    });
+
+    expect(organizationFilter).toHaveAttribute('value', organizations[1].title);
+    expect(filterChange).not.toHaveBeenCalled();
+
+    // Now change value of organization filter should trigger the onFiltersChange callback
+    const user = userEvent.setup();
+    await user.click(organizationFilter);
+
+    const optionToSelect = screen.getByRole('option', { name: organizations[0].title });
+    await user.click(optionToSelect);
+    expect(filterChange).toHaveBeenNthCalledWith(1, { organization_id: organizations[0].id });
+  });
+
+  it('should allow to hide organization filter', async () => {
+    const organizations = OrganizationFactory().many(2);
+
+    render(
+      <CourseLearnersFiltersBar
+        onFiltersChange={noop}
+        hideFilterOrganization={true}
+        organizationList={organizations}
+      />,
+    );
+
+    // Organization filter should not have been rendered
+    const organizationFilter = screen.queryByRole('combobox', { name: 'Organization' });
+    expect(organizationFilter).not.toBeInTheDocument();
+  });
+});

package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnersFiltersBar/index.tsx

@@ -0,0 +1,31 @@
+import { CourseOrderResourceQuery, Organization } from 'types/Joanie';
+import FilterOrganization from 'widgets/Dashboard/components/FilterOrganization';
+import FiltersBar from 'widgets/Dashboard/components/FiltersBar';
+
+export interface CourseLearnersFiltersBarProps {
+  defaultValues?: CourseOrderResourceQuery;
+  onFiltersChange: (filters: Partial<CourseOrderResourceQuery>) => void;
+  organizationList: Organization[];
+  hideFilterOrganization?: boolean;
+}
+const CourseLearnersFiltersBar = ({
+  defaultValues,
+  onFiltersChange,
+  organizationList,
+  hideFilterOrganization,
+}: CourseLearnersFiltersBarProps) => {
+  return (
+    !hideFilterOrganization && (
+      <FiltersBar>
+        <FilterOrganization
+          defaultValue={defaultValues?.organization_id}
+          organizationList={organizationList}
+          onChange={onFiltersChange}
+          clearable={true}
+        />
+      </FiltersBar>
+    )
+  );
+};
+
+export default CourseLearnersFiltersBar;

package/js/pages/TeacherDashboardCourseLearnersLayout/hooks/useCourseLearnersFilters/index.spec.tsx

@@ -0,0 +1,158 @@
+import fetchMock from 'fetch-mock';
+import { renderHook, waitFor } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { CourseProductRelationFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+import { JoanieAppWrapper, setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import useCourseLearnersFilters from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('useCourseLearnersFilters', () => {
+  setupJoanieSession();
+
+  it('should return default filter when called in a route without parameters', async () => {
+    const defaultOrganization = OrganizationFactory().one();
+    // fetching user's organizations to initialize default organizationId.
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', [defaultOrganization]);
+    const { result } = renderHook(useCourseLearnersFilters, {
+      wrapper: ({ children }) => (
+        <JoanieAppWrapper routerOptions={{ path: '/', initialEntries: ['/'] }}>
+          {children}
+        </JoanieAppWrapper>
+      ),
+    });
+
+    await waitFor(() => {
+      expect(result.current.initialFilters).toStrictEqual({
+        organization_id: undefined,
+        course_id: undefined,
+        course_product_relation_id: undefined,
+      });
+      expect(result.current.filters).toStrictEqual({
+        organization_id: undefined,
+        course_id: undefined,
+        course_product_relation_id: undefined,
+      });
+    });
+  });
+
+  it('should use route parameters values when given', async () => {
+    const defaultOrganization = OrganizationFactory().one();
+    const filteredOrganization = OrganizationFactory({ id: 'filtered' }).one();
+    const routeOrganization = OrganizationFactory({ id: 'route' }).one();
+    const routeCourseProductRelation = CourseProductRelationFactory().one();
+    // fetching user's organizations to initialize default organizationId.
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', [
+      defaultOrganization,
+      filteredOrganization,
+    ]);
+    const { result } = renderHook(useCourseLearnersFilters, {
+      wrapper: ({ children }) => (
+        <JoanieAppWrapper
+          routerOptions={{
+            path: '/:organizationId/:courseId/:courseProductRelationId',
+            initialEntries: [
+              `/${routeOrganization.id}/${routeCourseProductRelation.course.id}/${routeCourseProductRelation.id}?organization_id=${filteredOrganization.id}`,
+            ],
+          }}
+        >
+          {children}
+        </JoanieAppWrapper>
+      ),
+    });
+
+    await waitFor(() => {
+      expect(result.current.initialFilters).toStrictEqual({
+        organization_id: routeOrganization.id,
+        course_id: routeCourseProductRelation.course.id,
+        course_product_relation_id: routeCourseProductRelation.id,
+      });
+      expect(result.current.filters).toStrictEqual({
+        organization_id: routeOrganization.id,
+        course_id: routeCourseProductRelation.course.id,
+        course_product_relation_id: routeCourseProductRelation.id,
+      });
+    });
+  });
+
+  it("should use organizationId from query parameters when it's not in route params", async () => {
+    const defaultOrganization = OrganizationFactory().one();
+    const filteredOrganization = OrganizationFactory({ id: 'filtered' }).one();
+    const routeCourseProductRelation = CourseProductRelationFactory({ id: 'route' }).one();
+    // fetching user's organizations to initialize default organizationId.
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', [
+      defaultOrganization,
+      filteredOrganization,
+    ]);
+    const { result } = renderHook(useCourseLearnersFilters, {
+      wrapper: ({ children }) => (
+        <JoanieAppWrapper
+          routerOptions={{
+            path: '/:courseId/:courseProductRelationId',
+            initialEntries: [
+              `/${routeCourseProductRelation.course.id}/${routeCourseProductRelation.id}/?organization_id=${filteredOrganization.id}`,
+            ],
+          }}
+        >
+          {children}
+        </JoanieAppWrapper>
+      ),
+    });
+
+    await waitFor(() => {
+      expect(result.current.initialFilters).toStrictEqual({
+        organization_id: filteredOrganization.id,
+        course_id: routeCourseProductRelation.course.id,
+        course_product_relation_id: routeCourseProductRelation.id,
+      });
+      expect(result.current.filters).toStrictEqual({
+        organization_id: filteredOrganization.id,
+        course_id: routeCourseProductRelation.course.id,
+        course_product_relation_id: routeCourseProductRelation.id,
+      });
+    });
+  });
+
+  it('setFilters should update filter state', async () => {
+    const defaultOrganization = OrganizationFactory({ id: 'all' }).one();
+    const routeOrganization = OrganizationFactory({ id: 'route' }).one();
+    const routeCourseProductRelation = CourseProductRelationFactory().one();
+    // fetching user's organizations to initialize default organizationId.
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', [defaultOrganization]);
+    const { result } = renderHook(useCourseLearnersFilters, {
+      wrapper: ({ children }) => (
+        <JoanieAppWrapper routerOptions={{ path: '/', initialEntries: ['/'] }}>
+          {children}
+        </JoanieAppWrapper>
+      ),
+    });
+
+    const expectedInitialFilters = {
+      organization_id: undefined,
+      course_id: undefined,
+      course_product_relation_id: undefined,
+    };
+    await waitFor(() => {
+      expect(result.current.initialFilters).toStrictEqual(expectedInitialFilters);
+    });
+
+    const newFilters = {
+      organization_id: routeOrganization.id,
+      course_id: routeCourseProductRelation.course.id,
+      course_product_relation_id: routeCourseProductRelation.id,
+    };
+    act(() => {
+      result.current.setFilters(newFilters);
+    });
+
+    expect(result.current.filters).toStrictEqual(newFilters);
+    expect(result.current.initialFilters).toStrictEqual(expectedInitialFilters);
+  });
+});

package/js/pages/TeacherDashboardCourseLearnersLayout/hooks/useCourseLearnersFilters/index.ts

@@ -0,0 +1,44 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import {
+  CourseListItem,
+  CourseOrderResourceQuery,
+  CourseProductRelation,
+  Organization,
+} from 'types/Joanie';
+
+export type CourseLearnersParams = {
+  courseId: CourseListItem['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
+  organizationId?: Organization['id'];
+};
+
+const useCourseLearnersFilters = () => {
+  const { courseId, courseProductRelationId, organizationId } = useParams<CourseLearnersParams>();
+  const [searchParams] = useSearchParams();
+  const searchFilters: CourseOrderResourceQuery = useMemo(() => {
+    return {
+      course_id: courseId,
+      organization_id: searchParams.get('organization_id') || undefined,
+      course_product_relation_id: searchParams.get('course_product_relation_id') || undefined,
+    };
+  }, Array.from(searchParams.entries()));
+
+  const initialFilters = useMemo(() => {
+    return {
+      ...searchFilters,
+      organization_id: organizationId || searchFilters.organization_id,
+      course_product_relation_id: courseProductRelationId,
+    };
+  }, []);
+  const [filters, setFilters] = useState<CourseOrderResourceQuery>(initialFilters);
+
+  // update current filter with initial value when it's ready
+  useEffect(() => {
+    setFilters(initialFilters);
+  }, [initialFilters]);
+
+  return { initialFilters, filters, setFilters };
+};
+
+export default useCourseLearnersFilters;