richie-education 2.25.0-b2.dev131 → 2.25.0-b2.dev138

package/js/components/TeacherDashboardCourseList/_styles.scss

@@ -15,6 +15,10 @@
     margin-bottom: rem-calc(10px);
   }
 
+  &--fade {
+    opacity: 0.4;
+  }
+
   //
   // Course Glimpse in dashboards
   //

package/js/components/TeacherDashboardCourseList/index.spec.tsx

@@ -1,20 +1,10 @@
-import { MemoryRouter } from 'react-router-dom';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
-import { IntlProvider } from 'react-intl';
-
-import { CourseListItem } from 'types/Joanie';
-import {
-  RichieContextFactory as mockRichieContextFactory,
-  UserFactory,
-} from 'utils/test/factories/richie';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import { CourseListItemFactory } from 'utils/test/factories/joanie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
-import { expectNoSpinner } from 'utils/test/expectSpinner';
-import { PER_PAGE } from 'settings';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { CourseListItemFactory, CourseProductRelationFactory } from 'utils/test/factories/joanie';
+import { render } from 'utils/test/render';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import TeacherDashboardCourseList from '.';
 
 jest.mock('utils/context', () => ({
@@ -38,125 +28,77 @@ jest.mock('hooks/useIntersectionObserver', () => ({
 }));
 
 describe('components/TeacherDashboardCourseList', () => {
-  const perPage = PER_PAGE.useCourseProductUnion;
+  const joanieSessionData = setupJoanieSession();
   let nbApiCalls: number;
   beforeEach(() => {
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', [], { overwriteRoutes: true });
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [], { overwriteRoutes: true });
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [], { overwriteRoutes: true });
-    nbApiCalls = 3;
-  });
-  afterEach(() => {
-    fetchMock.restore();
+    nbApiCalls = joanieSessionData.nbSessionApiRequest;
   });
 
-  it('should render', async () => {
-    const courseCooking: CourseListItem = CourseListItemFactory({
-      title: 'One lesson about: How to cook birds',
-    }).one();
-    const courseDancing: CourseListItem = CourseListItemFactory({
-      title: "One lesson about: Let's dance, the online lesson",
-    }).one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
-      mockPaginatedResponse([courseCooking, courseDancing], 15, false),
-    );
-    const productCooking: CourseListItem = CourseListItemFactory({
-      title: 'Full training: How to cook birds',
-    }).one();
-    const productDancing: CourseListItem = CourseListItemFactory({
-      title: "Full training: Let's dance, the online lesson",
-    }).one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
-      mockPaginatedResponse([productCooking, productDancing], 15, false),
+  it('should render loading more state', async () => {
+    const trainings = CourseProductRelationFactory().many(2);
+    const courses = CourseListItemFactory().many(2);
+    const courseAndProductList = [...courses, ...trainings];
+
+    render(
+      <TeacherDashboardCourseList
+        titleTranslated="TeacherDashboardCourseList test title"
+        isLoadingMore={true}
+        loadMore={jest.fn()}
+        courseAndProductList={courseAndProductList}
+      />,
     );
 
-    const user = UserFactory().one();
+    await expectSpinner('Loading courses...');
+    expect(fetchMock.calls()).toHaveLength(nbApiCalls);
+
+    courses.forEach((course) => {
+      expect(screen.getByRole('heading', { name: course.title })).toBeInTheDocument();
+    });
+    trainings.forEach((training) => {
+      expect(screen.getByRole('heading', { name: training.product.title })).toBeInTheDocument();
+    });
+  });
+
+  it('should render courses and products list', async () => {
+    const trainings = CourseProductRelationFactory().many(2);
+    const courses = CourseListItemFactory().many(2);
+    const courseAndProductList = [...courses, ...trainings];
+
     render(
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <JoanieSessionProvider>
-            <MemoryRouter>
-              <TeacherDashboardCourseList titleTranslated="TeacherDashboardCourseList test title" />
-            </MemoryRouter>
-          </JoanieSessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>,
+      <TeacherDashboardCourseList
+        titleTranslated="TeacherDashboardCourseList test title"
+        loadMore={jest.fn()}
+        courseAndProductList={courseAndProductList}
+      />,
     );
-    nbApiCalls += 1; // courses api call
-    nbApiCalls += 1; // course-product-relations api call
 
     await expectNoSpinner('Loading courses...');
+
     expect(
       screen.getByRole('heading', { name: /TeacherDashboardCourseList test title/ }),
     ).toBeInTheDocument();
 
-    const calledUrls = fetchMock.calls().map((call) => call[0]);
-    expect(calledUrls).toHaveLength(nbApiCalls);
-    expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
-    );
-    expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
-    );
+    expect(fetchMock.calls()).toHaveLength(nbApiCalls);
 
-    expect(
-      await screen.findByRole('heading', { name: /One lesson about: How to cook birds/ }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('heading', { name: /One lesson about: Let's dance, the online lesson/ }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('heading', { name: /Full training: How to cook birds/ }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('heading', { name: /Full training: Let's dance, the online lesson/ }),
-    ).toBeInTheDocument();
+    courses.forEach((course) => {
+      expect(screen.getByRole('heading', { name: course.title })).toBeInTheDocument();
+    });
+    trainings.forEach((training) => {
+      expect(screen.getByRole('heading', { name: training.product.title })).toBeInTheDocument();
+    });
   });
 
   it('should render empty list', async () => {
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
-      mockPaginatedResponse([], 0, false),
-      {
-        overwriteRoutes: true,
-      },
-    );
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
-      mockPaginatedResponse([], 0, false),
-      {
-        overwriteRoutes: true,
-      },
-    );
-
-    const user = UserFactory().one();
     render(
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <JoanieSessionProvider>
-            <MemoryRouter>
-              <TeacherDashboardCourseList titleTranslated="TeacherDashboardCourseList test title" />
-            </MemoryRouter>
-          </JoanieSessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>,
+      <TeacherDashboardCourseList
+        titleTranslated="TeacherDashboardCourseList test title"
+        loadMore={jest.fn()}
+        courseAndProductList={[]}
+      />,
     );
-    nbApiCalls += 1; // courses api call
-    nbApiCalls += 1; // course-product-relations api call
 
     expect(await screen.getByRole('heading', { name: /TeacherDashboardCourseList test title/ }));
-
-    const calledUrls = fetchMock.calls().map((call) => call[0]);
-    expect(calledUrls).toHaveLength(nbApiCalls);
-    expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
-    );
-    expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
-    );
-
+    expect(fetchMock.calls()).toHaveLength(nbApiCalls);
     expect(await screen.findByText('You have no courses yet.')).toBeInTheDocument();
   });
 });

package/js/components/TeacherDashboardCourseList/index.tsx

@@ -1,12 +1,12 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useRef } from 'react';
 import { Button } from '@openfun/cunningham-react';
+import classNames from 'classnames';
 import { CourseGlimpseList, getCourseGlimpseListProps } from 'components/CourseGlimpseList';
 import { Spinner } from 'components/Spinner';
 import context from 'utils/context';
-import { useCourseProductUnion } from 'hooks/useCourseProductUnion';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { ProductType } from 'types/Joanie';
+import { CourseListItem, CourseProductRelation } from 'types/Joanie';
 
 const messages = defineMessages({
   loading: {
@@ -27,30 +27,36 @@ const messages = defineMessages({
 });
 
 interface TeacherDashboardCourseListProps {
-  titleTranslated: string;
+  titleTranslated?: string;
   organizationId?: string;
+  loadMore: () => void;
+  courseAndProductList?: (CourseListItem | CourseProductRelation)[];
+  isLoadingMore?: boolean;
+  hasMore?: boolean;
+  isLoading?: boolean;
 }
 
 const TeacherDashboardCourseList = ({
   titleTranslated,
   organizationId,
+  loadMore,
+  courseAndProductList = [],
+  isLoading = false,
+  isLoadingMore = false,
+  hasMore = false,
 }: TeacherDashboardCourseListProps) => {
   const loadMoreButtonRef = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   const intl = useIntl();
-  const {
-    data: courseAndProductList,
-    isLoading,
-    next,
-    hasMore,
-  } = useCourseProductUnion({ perPage: 25, organizationId, productType: ProductType.CREDENTIAL });
   useIntersectionObserver({
     target: loadMoreButtonRef,
-    onIntersect: next,
+    onIntersect: loadMore,
     enabled: hasMore,
   });
 
   return (
-    <div className="dashboard-course-list">
+    <div
+      className={classNames('dashboard-course-list', { 'dashboard-course-list--fade': isLoading })}
+    >
       {titleTranslated && (
         <h2 className="dashboard-course-list__title dashboard__page_title">{titleTranslated}</h2>
       )}
@@ -64,7 +70,7 @@ const TeacherDashboardCourseList = ({
         <FormattedMessage {...messages.emptyList} />
       )}
 
-      {isLoading && (
+      {isLoadingMore && (
         <Spinner aria-labelledby="loading-courses-data">
           <span id="loading-courses-data">
             <FormattedMessage {...messages.loading} />
@@ -74,8 +80,8 @@ const TeacherDashboardCourseList = ({
 
       {hasMore && (
         <Button
-          onClick={() => next()}
-          disabled={isLoading}
+          onClick={() => loadMore()}
+          disabled={isLoadingMore}
           ref={loadMoreButtonRef}
           color="tertiary"
         >

package/js/hooks/useCourseProductUnion/index.ts

@@ -28,12 +28,14 @@ const messages = defineMessages({
 interface UseCourseProductUnionProps extends ResourceUnionPaginationProps {
   organizationId?: string;
   productType?: ProductType;
+  query?: string;
 }
 
 export const useCourseProductUnion = ({
   perPage = 50,
   organizationId,
   productType,
+  query,
 }: UseCourseProductUnionProps = {}) => {
   const api = useJoanieApi();
   return useUnionResource<
@@ -45,12 +47,12 @@ export const useCourseProductUnion = ({
     queryAConfig: {
       queryKey: ['user', 'courses'],
       fn: api.courses.get,
-      filters: { organization_id: organizationId, has_listed_course_runs: true },
+      filters: { query, organization_id: organizationId, has_listed_course_runs: true },
     },
     queryBConfig: {
       queryKey: ['user', 'course_product_relations'],
       fn: api.courseProductRelations.get,
-      filters: { organization_id: organizationId, product_type: productType },
+      filters: { query, organization_id: organizationId, product_type: productType },
     },
     perPage,
     errorGetMessage: messages.errorGet,

package/js/hooks/useTeacherCoursesSearch/index.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { useCourseProductUnion } from 'hooks/useCourseProductUnion';
+import { CourseListItem, CourseProductRelation, ProductType } from 'types/Joanie';
+import { Maybe, Nullable } from 'types/utils';
+
+const useTeacherCoursesSearch = () => {
+  const { organizationId } = useParams<{ organizationId: string }>();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [count, setCount] = useState<Maybe<number>>(0);
+  const [courseAndProductList, setCourseAndProductList] = useState<
+    (CourseListItem | CourseProductRelation)[]
+  >([]);
+  const [isNewSearchLoading, setIsNewSearchLoading] = useState(false);
+  const query = searchParams.get('query') || undefined;
+  const {
+    data,
+    isLoading,
+    next,
+    hasMore,
+    count: currentCount,
+  } = useCourseProductUnion({
+    query,
+    organizationId,
+    perPage: 25,
+    productType: ProductType.CREDENTIAL,
+  });
+
+  useEffect(() => {
+    if (!data.length && isLoading) {
+      setIsNewSearchLoading(true);
+    }
+
+    if (isLoading) {
+      return;
+    }
+
+    if (isNewSearchLoading) {
+      setIsNewSearchLoading(false);
+    }
+
+    if (isNewSearchLoading || data.length > courseAndProductList?.length) {
+      setCourseAndProductList(data);
+
+      // research counter should not be displayed when query is empty
+      if (query) {
+        setCount(currentCount);
+      }
+    }
+  }, [data.length, isLoading, isNewSearchLoading, query]);
+
+  const submitSearch = (newQuery: Nullable<string>) => {
+    if (newQuery === null) {
+      searchParams.delete('query');
+    } else {
+      searchParams.set('query', newQuery);
+    }
+
+    setSearchParams(searchParams);
+    if (!newQuery) {
+      setCount(undefined);
+    }
+  };
+
+  return {
+    submitSearch,
+    data: courseAndProductList,
+    isNewSearchLoading,
+    isLoadingMore: isLoading && !isNewSearchLoading,
+    next,
+    hasMore,
+    count,
+  };
+};
+export default useTeacherCoursesSearch;

package/js/hooks/useUnionResource/index.ts

@@ -1,10 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { MessageDescriptor, defineMessages, useIntl } from 'react-intl';
-import { Maybe } from 'yup';
 import { PaginatedResourceQuery, PaginatedResponse } from 'types/Joanie';
 import { PER_PAGE } from 'settings';
 import { useQueryKeyInvalidateListener } from 'hooks/useQueryKeyInvalidateListener';
+import { Maybe } from 'types/utils';
 import { syncIntegrityCount } from './utils/syncIntegrityCount';
 import { FetchEntityData } from './utils/fetchEntities';
 import { QueryConfig } from './utils/fetchEntity';

package/js/pages/DashboardCourses/index.spec.tsx

@@ -123,7 +123,7 @@ describe('<DashboardCourses/>', () => {
     enrollmentsDeferred.resolve({ results: [], next: null, previous: null, count: 0 });
 
     await expectNoSpinner('Loading orders and enrollments...');
-    expectBannerInfo('You have no enrollments nor orders yet.');
+    await expectBannerInfo('You have no enrollments nor orders yet.');
     expect(screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
   });
 

package/js/pages/TeacherDashboardCoursesLoader/index.spec.tsx

@@ -1,20 +1,13 @@
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
-import { IntlProvider } from 'react-intl';
-
-import { CunninghamProvider } from '@openfun/cunningham-react';
-import {
-  RichieContextFactory as mockRichieContextFactory,
-  UserFactory,
-} from 'utils/test/factories/richie';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import userEvent from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { CourseListItemFactory, CourseProductRelationFactory } from 'utils/test/factories/joanie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
 import { TeacherDashboardCoursesLoader } from '.';
 
 jest.mock('utils/context', () => ({
@@ -38,17 +31,15 @@ jest.mock('hooks/useIntersectionObserver', () => ({
 }));
 
 describe('components/TeacherDashboardCoursesLoader', () => {
+  const joanieSessionData = setupJoanieSession();
   const perPage = PER_PAGE.useCourseProductUnion;
   let nbApiCalls: number;
   beforeEach(() => {
-    // Joanie providers calls
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    nbApiCalls = joanieSessionData.nbSessionApiRequest;
+
     // teacher course sidebar calls
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
-
-    nbApiCalls = 4;
+    nbApiCalls += 1;
   });
 
   it('should render', async () => {
@@ -61,25 +52,7 @@ describe('components/TeacherDashboardCoursesLoader', () => {
       mockPaginatedResponse(CourseProductRelationFactory().many(15), 15, false),
     );
 
-    const user = UserFactory().one();
-    render(
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <JoanieSessionProvider>
-            <CunninghamProvider>
-              <RouterProvider
-                router={createMemoryRouter([
-                  {
-                    path: '',
-                    element: <TeacherDashboardCoursesLoader />,
-                  },
-                ])}
-              />
-            </CunninghamProvider>
-          </JoanieSessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>,
-    );
+    render(<TeacherDashboardCoursesLoader />);
     await expectNoSpinner('Loading courses...');
 
     nbApiCalls += 1; // course api call
@@ -92,7 +65,7 @@ describe('components/TeacherDashboardCoursesLoader', () => {
 
     // section titles
     expect(
-      await screen.getByRole('heading', {
+      await screen.findByRole('heading', {
         name: 'Your courses',
       }),
     ).toBeInTheDocument();
@@ -100,4 +73,46 @@ describe('components/TeacherDashboardCoursesLoader', () => {
     // Lessons
     expect(await screen.findAllByTestId('course-glimpse')).toHaveLength(25);
   });
+
+  it('should perform search', async () => {
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseListItemFactory().many(15), 15, false),
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseProductRelationFactory().many(15), 15, false),
+    );
+
+    render(<TeacherDashboardCoursesLoader />);
+    await expectNoSpinner('Loading courses...');
+    fetchMock.restore();
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/?query=text+query&has_listed_course_runs=true&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseListItemFactory().many(5), 5, false),
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/course-product-relations/?query=text+query&product_type=credential&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseProductRelationFactory().many(5), 5, false),
+    );
+    const user = userEvent.setup();
+    await user.type(screen.getByRole('textbox', { name: /Search/ }), 'text query');
+    await user.click(screen.getByRole('button', { name: /Search/ }));
+
+    nbApiCalls = 1; // course api call
+    nbApiCalls += 1; // course-product-relations api call
+    const calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(nbApiCalls);
+    expect(calledUrls).toContain(
+      `https://joanie.endpoint/api/v1.0/courses/?query=text+query&has_listed_course_runs=true&page=1&page_size=${perPage}`,
+    );
+    expect(calledUrls).toContain(
+      `https://joanie.endpoint/api/v1.0/course-product-relations/?query=text+query&product_type=credential&page=1&page_size=${perPage}`,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('course-glimpse')).toHaveLength(10);
+    });
+  });
 });

package/js/pages/TeacherDashboardCoursesLoader/index.tsx

@@ -1,8 +1,10 @@
-import { defineMessages, useIntl } from 'react-intl';
-
+import { FormattedMessage, defineMessages } from 'react-intl';
 import TeacherDashboardCourseList from 'components/TeacherDashboardCourseList';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
 import { TeacherDashboardProfileSidebar } from 'widgets/Dashboard/components/TeacherDashboardProfileSidebar';
+import SearchBar from 'widgets/Dashboard/components/SearchBar';
+import SearchResultsCount from 'widgets/Dashboard/components/SearchResultsCount';
+import useTeacherCoursesSearch from 'hooks/useTeacherCoursesSearch';
 
 const messages = defineMessages({
   courses: {
@@ -28,11 +30,29 @@ const messages = defineMessages({
 });
 
 export const TeacherDashboardCoursesLoader = () => {
-  const intl = useIntl();
+  const { data, isLoadingMore, isNewSearchLoading, next, hasMore, submitSearch, count } =
+    useTeacherCoursesSearch();
+
   return (
     <DashboardLayout sidebar={<TeacherDashboardProfileSidebar />}>
+      <div className="dashboard__page_head">
+        <div className="dashboard__page_title_container">
+          <h1 className="dashboard__page_title">
+            <FormattedMessage {...messages.courses} />
+          </h1>
+        </div>
+
+        <SearchBar onSubmit={submitSearch} />
+        <SearchResultsCount nbResults={count} />
+      </div>
       <div className="teacher-courses-page">
-        <TeacherDashboardCourseList titleTranslated={intl.formatMessage(messages.courses)} />
+        <TeacherDashboardCourseList
+          courseAndProductList={data}
+          loadMore={next}
+          isLoadingMore={isLoadingMore}
+          isLoading={isNewSearchLoading}
+          hasMore={hasMore}
+        />
       </div>
     </DashboardLayout>
   );

package/js/pages/TeacherDashboardOrganizationCourseLoader/index.spec.tsx

@@ -0,0 +1,152 @@
+import { screen, waitFor } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import userEvent from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import {
+  CourseListItemFactory,
+  CourseProductRelationFactory,
+  OrganizationFactory,
+} from 'utils/test/factories/joanie';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
+import { PER_PAGE } from 'settings';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { TeacherDashboardOrganizationCourseLoader } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('settings', () => ({
+  __esModule: true,
+  ...jest.requireActual('settings'),
+  PER_PAGE: { useCourseProductUnion: 25 },
+}));
+
+jest.mock('hooks/useIntersectionObserver', () => ({
+  useIntersectionObserver: (props: any) => {
+    (globalThis as any).__intersection_observer_props__ = props;
+  },
+}));
+
+describe('components/TeacherDashboardOrganizationCourseLoader', () => {
+  const joanieSessionData = setupJoanieSession();
+  const perPage = PER_PAGE.useCourseProductUnion;
+  let nbApiCalls: number;
+  beforeEach(() => {
+    nbApiCalls = joanieSessionData.nbSessionApiRequest;
+  });
+
+  it('should render', async () => {
+    const organization = OrganizationFactory().one();
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/`,
+      organization,
+    );
+    nbApiCalls += 1;
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseListItemFactory().many(15), 15, false),
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseProductRelationFactory().many(15), 15, false),
+    );
+
+    render(<TeacherDashboardOrganizationCourseLoader />, {
+      routerOptions: {
+        path: '/:organizationId',
+        initialEntries: [`/${organization.id}`],
+      },
+    });
+    await expectNoSpinner('Loading courses...');
+
+    nbApiCalls += 1; // course api call
+    nbApiCalls += 1; // course-product-relations api call
+    const calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(nbApiCalls);
+    expect(calledUrls).toContain(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
+    );
+    expect(calledUrls).toContain(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
+    );
+
+    await expectNoSpinner('Loading organization...');
+
+    expect(
+      screen.getByRole('heading', {
+        name: `Courses of ${organization.title}`,
+      }),
+    ).toBeInTheDocument();
+
+    // Lessons
+    expect(await screen.findAllByTestId('course-glimpse')).toHaveLength(25);
+  });
+
+  it('should perform search', async () => {
+    const organization = OrganizationFactory().one();
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&page=1`,
+      [],
+    );
+    nbApiCalls += 1;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/`,
+      organization,
+    );
+    nbApiCalls += 1;
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseListItemFactory().many(15), 15, false),
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseProductRelationFactory().many(15), 15, false),
+    );
+
+    render(<TeacherDashboardOrganizationCourseLoader />, {
+      routerOptions: {
+        path: '/:organizationId',
+        initialEntries: [`/${organization.id}`],
+      },
+    });
+    await expectNoSpinner('Loading courses...');
+    await expectNoSpinner('Loading organization...');
+    fetchMock.restore();
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/?query=text+query&has_listed_course_runs=true&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseListItemFactory().many(5), 5, false),
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/?query=text+query&product_type=credential&page=1&page_size=${perPage}`,
+      mockPaginatedResponse(CourseProductRelationFactory().many(5), 5, false),
+    );
+    const user = userEvent.setup();
+    await user.type(screen.getByRole('textbox', { name: /Search/ }), 'text query');
+    await user.click(screen.getByRole('button', { name: /Search/ }));
+
+    nbApiCalls = 1; // course api call
+    nbApiCalls += 1; // course-product-relations api call
+    const calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(nbApiCalls);
+    expect(calledUrls).toContain(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/?query=text+query&has_listed_course_runs=true&page=1&page_size=${perPage}`,
+    );
+    expect(calledUrls).toContain(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/?query=text+query&product_type=credential&page=1&page_size=${perPage}`,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('course-glimpse')).toHaveLength(10);
+    });
+  });
+});

package/js/pages/TeacherDashboardOrganizationCourseLoader/index.tsx

@@ -1,4 +1,4 @@
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { Spinner } from 'components/Spinner';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
@@ -6,6 +6,9 @@ import { TeacherDashboardOrganizationSidebar } from 'widgets/Dashboard/component
 import { useOrganization } from 'hooks/useOrganizations';
 import TeacherDashboardCourseList from 'components/TeacherDashboardCourseList';
 import { useBreadcrumbsPlaceholders } from 'hooks/useBreadcrumbsPlaceholders';
+import SearchResultsCount from 'widgets/Dashboard/components/SearchResultsCount';
+import SearchBar from 'widgets/Dashboard/components/SearchBar';
+import useTeacherCoursesSearch from 'hooks/useTeacherCoursesSearch';
 
 const messages = defineMessages({
   title: {
@@ -21,8 +24,10 @@ const messages = defineMessages({
 });
 
 export const TeacherDashboardOrganizationCourseLoader = () => {
-  const intl = useIntl();
   const { organizationId } = useParams<{ organizationId: string }>();
+  const { data, isLoadingMore, isNewSearchLoading, next, hasMore, submitSearch, count } =
+    useTeacherCoursesSearch();
+
   const {
     item: organization,
     states: { fetching },
@@ -30,6 +35,7 @@ export const TeacherDashboardOrganizationCourseLoader = () => {
   useBreadcrumbsPlaceholders({
     organizationTitle: organization?.title ?? '',
   });
+
   return (
     <DashboardLayout sidebar={<TeacherDashboardOrganizationSidebar />}>
       {fetching && (
@@ -40,12 +46,29 @@ export const TeacherDashboardOrganizationCourseLoader = () => {
         </Spinner>
       )}
       {!fetching && (
-        <TeacherDashboardCourseList
-          titleTranslated={intl.formatMessage(messages.title, {
-            organizationTitle: organization.title,
-          })}
-          organizationId={organization.id}
-        />
+        <>
+          <div className="dashboard__page_head">
+            <div className="dashboard__page_title_container">
+              <h1 className="dashboard__page_title">
+                <FormattedMessage
+                  {...messages.title}
+                  values={{ organizationTitle: organization.title }}
+                />
+              </h1>
+            </div>
+
+            <SearchBar onSubmit={submitSearch} />
+            <SearchResultsCount nbResults={count} />
+          </div>
+          <TeacherDashboardCourseList
+            organizationId={organization.id}
+            courseAndProductList={data}
+            loadMore={next}
+            isLoadingMore={isLoadingMore}
+            isLoading={isNewSearchLoading}
+            hasMore={hasMore}
+          />
+        </>
       )}
     </DashboardLayout>
   );

package/js/types/Joanie.ts

@@ -473,6 +473,7 @@ export interface CourseQueryFilters extends ResourcesQuery {
   id?: CourseListItem['id'];
   organization_id?: Organization['id'];
   has_listed_course_runs?: Boolean;
+  query?: string;
 }
 export interface CourseProductQueryFilters extends ResourcesQuery {
   id?: Product['id'];
@@ -482,6 +483,7 @@ export interface CourseProductRelationQueryFilters extends PaginatedResourceQuer
   id?: CourseProductRelation['id'];
   organization_id?: Organization['id'];
   product_type?: ProductType;
+  query?: string;
 }
 
 export enum ContractState {

package/js/utils/test/expectBanner.ts

@@ -1,34 +1,34 @@
 import { screen, waitFor } from '@testing-library/react';
 import { BannerType, getBannerTestId } from 'components/Banner';
 
-export const expectBannerError = async (message: string, rootElement: ParentNode = document) => {
+export const expectBannerError = (message: string, rootElement: ParentNode = document) => {
   return expectBanner(BannerType.ERROR, message, rootElement);
 };
-export const expectBannerInfo = async (message: string, rootElement: ParentNode = document) => {
+export const expectBannerInfo = (message: string, rootElement: ParentNode = document) => {
   return expectBanner(BannerType.INFO, message, rootElement);
 };
 
-export const expectBanner = async (
+export const expectBanner = (
   type: BannerType,
   message: string,
   rootElement: ParentNode = document,
 ) => {
-  await waitFor(async () => {
+  return waitFor(async () => {
     const banner = rootElement.querySelector('.banner--' + type) as HTMLElement;
     expect(banner).not.toBeNull();
     expect(banner).toHaveTextContent(message);
   });
 };
 
-export const expectNoBannerError = async (message: string) => {
+export const expectNoBannerError = (message: string) => {
   return expectNoBanner(BannerType.ERROR, message);
 };
-export const expectNoBannerInfo = async (message: string) => {
+export const expectNoBannerInfo = (message: string) => {
   return expectNoBanner(BannerType.INFO, message);
 };
 
-export const expectNoBanner = async (type: BannerType, message: string) => {
-  await waitFor(() => {
+export const expectNoBanner = (type: BannerType, message: string) => {
+  return waitFor(() => {
     expect(screen.queryByTestId(getBannerTestId(message, type))).toBeNull();
   });
 };

package/js/utils/test/wrappers/PresentationalAppWrapper.tsx

@@ -1,17 +1,17 @@
 import { PropsWithChildren } from 'react';
 import { CunninghamProvider } from '@openfun/cunningham-react';
-import { IntlWrapper } from './IntlWrapper';
-import { RouterWrapper } from './RouterWrapper';
-import { AppWrapperProps } from './types';
+import { IntlWrapper, IntlWrapperProps } from './IntlWrapper';
+import { RouterWrapper, RouterWrapperProps } from './RouterWrapper';
 
 export const PresentationalAppWrapper = ({
   children,
-  options,
-}: PropsWithChildren<{ options?: AppWrapperProps }>) => {
+  intlOptions,
+  routerOptions,
+}: PropsWithChildren<{ intlOptions?: IntlWrapperProps; routerOptions?: RouterWrapperProps }>) => {
   return (
-    <IntlWrapper {...(options?.intlOptions || { locale: 'en' })}>
+    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
       <CunninghamProvider>
-        <RouterWrapper {...options?.routerOptions}>{children}</RouterWrapper>
+        <RouterWrapper {...routerOptions}>{children}</RouterWrapper>
       </CunninghamProvider>
     </IntlWrapper>
   );

package/js/widgets/Dashboard/components/SearchBar/_styles.scss

@@ -0,0 +1,12 @@
+.dashboard-search-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: rem-calc(8px);
+  margin-bottom: rem-calc(5px);
+
+  // TODO(rlecellier): cunningham should allow className on container
+  .c__field {
+    flex: 1 1 auto;
+  }
+}

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

@@ -0,0 +1,24 @@
+import { screen } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import { render } from 'utils/test/render';
+import { PresentationalAppWrapper } from 'utils/test/wrappers/PresentationalAppWrapper';
+import SearchBar from '.';
+
+describe('Dashbaord/components/SearchBar', () => {
+  it('should render', () => {
+    render(<SearchBar onSubmit={jest.fn()} />, { wrapper: PresentationalAppWrapper });
+    expect(screen.getByRole('textbox', { name: /Search/ })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Search/ })).toBeInTheDocument();
+  });
+
+  it('should call onSubmit callback', async () => {
+    const onSubmit = jest.fn();
+    render(<SearchBar onSubmit={onSubmit} />, { wrapper: PresentationalAppWrapper });
+
+    const user = userEvent.setup();
+    await user.type(screen.getByRole('textbox', { name: /Search/ }), 'text query');
+    await user.click(screen.getByRole('button', { name: /Search/ }));
+
+    expect(onSubmit).toHaveBeenNthCalledWith(1, 'text query');
+  });
+});

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

@@ -0,0 +1,84 @@
+import { Button, Input } from '@openfun/cunningham-react';
+import { MouseEvent, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useSearchParams } from 'react-router-dom';
+import { Nullable } from 'types/utils';
+
+const messages = defineMessages({
+  searchPlaceholder: {
+    defaultMessage: 'Search',
+    description: 'Placeholder of the dashboard search bar',
+    id: 'Dashboard.components.SearchBar.searchPlaceholder',
+  },
+  searchButtonLabel: {
+    defaultMessage: 'Search',
+    description: 'Label of the dashboard search bar submit button',
+    id: 'Dashboard.components.SearchBar.searchButtonLabel',
+  },
+  clearSearchButtonLabel: {
+    defaultMessage: 'clear current research',
+    description: 'Label of the dashboard search bar clear button',
+    id: 'Dashboard.components.SearchBar.clearSearchButtonLabel',
+  },
+});
+
+interface SearchBarProps {
+  onSubmit: (query: Nullable<string>) => void;
+}
+
+const SearchBar = ({ onSubmit }: SearchBarProps) => {
+  const intl = useIntl();
+  const [searchParams] = useSearchParams();
+  const query = (searchParams.get('query') || '').trim();
+  const [innerQuery, setInnerQuery] = useState<string>(query);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleOnSubmit = (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    onSubmit(innerQuery.trim() || null);
+  };
+  const clear = (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {
+    event.stopPropagation();
+
+    setInnerQuery('');
+    onSubmit(null);
+
+    event.currentTarget.blur();
+    inputRef?.current?.blur();
+  };
+  return (
+    <form className="dashboard-search-bar">
+      <Input
+        ref={inputRef}
+        label={intl.formatMessage(messages.searchPlaceholder)}
+        value={innerQuery}
+        onChange={(e) => setInnerQuery(e.target.value)}
+        rightIcon={
+          query && (
+            <Button
+              className="dashboard-search-bar__input"
+              type="button"
+              size="small"
+              color="tertiary"
+              icon={<span className="material-icons">close</span>}
+              onClick={clear}
+              aria-label={intl.formatMessage(messages.clearSearchButtonLabel)}
+            />
+          )
+        }
+        tabIndex={0}
+      />
+
+      <Button
+        className="dashboard-search-bar__input"
+        type="submit"
+        icon={<span className="material-icons">search</span>}
+        onClick={handleOnSubmit}
+        tabIndex={0}
+        aria-label={intl.formatMessage(messages.searchButtonLabel)}
+      />
+    </form>
+  );
+};
+
+export default SearchBar;

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

@@ -0,0 +1,57 @@
+import { screen } from '@testing-library/dom';
+import { render } from 'utils/test/render';
+import { PresentationalAppWrapper } from 'utils/test/wrappers/PresentationalAppWrapper';
+import SearchResultsCount from '.';
+
+describe('Dashbaord/components/SearchResultsCount', () => {
+  it('should render singular message', () => {
+    render(<SearchResultsCount nbResults={1} />, {
+      wrapper: PresentationalAppWrapper,
+      routerOptions: {
+        initialEntries: ['/?query=test+query'],
+      },
+    });
+    const $text = screen.getByText('1 result matching your search');
+    expect($text).toBeInTheDocument();
+    expect($text).not.toHaveClass('list__count-description--no-results');
+  });
+
+  it('should render plural message', () => {
+    render(<SearchResultsCount nbResults={10} />, {
+      wrapper: PresentationalAppWrapper,
+      routerOptions: {
+        initialEntries: ['/?query=test+query'],
+      },
+    });
+    const $text = screen.getByText('10 results matching your search');
+    expect($text).toBeInTheDocument();
+    expect($text).not.toHaveClass('list__count-description--no-results');
+  });
+
+  it.each([0, undefined])(
+    'should render with visibility hidden when nbResults is %s',
+    (nbResults) => {
+      render(<SearchResultsCount nbResults={nbResults} />, {
+        wrapper: PresentationalAppWrapper,
+        routerOptions: {
+          initialEntries: ['/?query=test+query'],
+        },
+      });
+      const $text = screen.getByTestId('search-results-count');
+      expect($text).toBeInTheDocument();
+      expect($text).toHaveClass('list__count-description--no-results');
+    },
+  );
+
+  it('should render with visibility hidden when no research is active', () => {
+    render(<SearchResultsCount nbResults={undefined} />, {
+      wrapper: PresentationalAppWrapper,
+      routerOptions: {
+        initialEntries: ['/'],
+      },
+    });
+    const $text = screen.getByTestId('search-results-count');
+    expect($text).toBeInTheDocument();
+    expect($text).toHaveClass('list__count-description--no-results');
+  });
+});

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

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import { FormattedMessage, defineMessages } from 'react-intl';
+import { useSearchParams } from 'react-router-dom';
+
+const messages = defineMessages({
+  searchCountText: {
+    defaultMessage:
+      '{nbResults} {nbResults, plural, one {result} other {results}} matching your search',
+    description: 'Text to indicate the total number of results for a research',
+    id: 'Dashboard.components.SearchResultsCount.searchCountText',
+  },
+});
+
+interface SearchResultsCountProps {
+  nbResults?: number;
+}
+
+const SearchResultsCount = ({ nbResults }: SearchResultsCountProps) => {
+  const [searchParams] = useSearchParams();
+  return (
+    <div
+      className={classNames('list__count-description', {
+        'list__count-description--no-results': !searchParams.get('query') || !nbResults,
+      })}
+      data-testid="search-results-count"
+    >
+      <FormattedMessage {...messages.searchCountText} values={{ nbResults }} />
+    </div>
+  );
+};
+
+export default SearchResultsCount;

package/package.json

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

package/scss/components/_index.scss

@@ -40,6 +40,7 @@
 @import '../../js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/styles';
 @import '../../js/widgets/Dashboard/components/TeacherDashboardProfileSidebar/components/OrganizationLinks/styles';
 @import '../../js/widgets/LtiConsumer/styles';
+@import '../../js/widgets/Dashboard/components/SearchBar/styles';
 @import '../../js/widgets/Search/components/SearchFilterGroup/styles';
 @import '../../js/widgets/Search/components/SearchFilterGroupModal/styles';
 @import '../../js/widgets/Search/components/SearchFiltersPane/styles';

package/scss/objects/_dashboard.scss

@@ -1,4 +1,14 @@
 .dashboard {
+  &__page_head {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: rem-calc(4px);
+
+    &__search_bar_container {
+      margin-bottom: rem-calc(16px);
+    }
+  }
+
   &__page_title,
   &__title--small,
   &__title--large {
@@ -28,6 +38,9 @@
 
   &__page_title_container {
     margin-bottom: rem-calc(20px);
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   &__title_container--small {

package/scss/objects/_list.scss

@@ -4,5 +4,9 @@
     color: r-theme-val(course-glimpse-list, count-color);
     text-align: right;
     align-self: self-end;
+
+    &--no-results {
+      visibility: hidden;
+    }
   }
 }

package/js/settings.dev.ts

@@ -1,12 +0,0 @@
-/**
- * Available users:
- *  * admin
- *  * user0
- *  * user1
- *  * user2
- *  * user3
- *  * user4
- *  * organization_owner
- *  * student_user
- */
-export const CURRENT_JOANIE_DEV_DEMO_USER = 'student_user';