richie-education 2.8.2 → 2.11.0

package/.eslintrc.json

@@ -51,6 +51,7 @@
     "no-nested-ternary": "warn",
     "no-param-reassign": "off",
     "no-plusplus": "off",
+    "no-promise-executor-return": "off",
     "no-prototype-builtins": "off",
     "no-return-assign": "off",
     "no-return-await": "off",
@@ -60,11 +61,17 @@
     "prefer-template": "off",
     "react/button-has-type": "off",
     "react/destructuring-assignment": "off",
+    "react/function-component-definition": [
+      "error",
+      { "namedComponents": "arrow-function", "unnamedComponents": "arrow-function" }
+    ],
     "react/jsx-boolean-value": "off",
     "react/jsx-fragments": "off",
     "react/jsx-props-no-spreading": "off",
+    "react/jsx-uses-react": "off",
     "react/no-array-index-key": "warn",
     "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off"
   },
   "settings": {

package/babel.config.js

@@ -20,7 +20,12 @@ module.exports = {
         useBuiltIns: 'usage',
       },
     ],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
     '@babel/preset-typescript',
-    'react',
   ],
 };

package/i18n/locales/ar-SA.json

@@ -103,9 +103,13 @@
     "description": "Accessibility text for the spinner while search results are being loaded",
     "message": "Loading search results..."
   },
+  "components.Search.textQueryLengthWarning": {
+    "description": "Warning message in search results when the text query is not long enough to be used.",
+    "message": "Text search requires at least 3 characters. { query } is not long enough to search. Search results will not be affected by this query."
+  },
   "components.SearchFilterGroupModal.closeModal": {
     "description": "Text for the button to close the search filters modal",
-    "message": "Close"
+    "message": "Close modal"
   },
   "components.SearchFilterGroupModal.error": {
     "description": "Error message when the search for more filter value fails in the search filters modal.",
@@ -119,6 +123,14 @@
     "description": "Placeholder message for the search input in the search filter modal.",
     "message": "Search in { filterName }"
   },
+  "components.SearchFilterGroupModal.loadMoreResults": {
+    "description": "Button to manually load more results for the current active filter",
+    "message": "Load more results"
+  },
+  "components.SearchFilterGroupModal.loadingResults": {
+    "description": "Loading message while loading more results in the search filter modal.",
+    "message": "Loading search results..."
+  },
   "components.SearchFilterGroupModal.modalTitle": {
     "description": "Title for the modal to add more filter values in the search filters modal.",
     "message": "Add filters for {filterName}"

package/i18n/locales/es-ES.json

@@ -103,9 +103,13 @@
     "description": "Accessibility text for the spinner while search results are being loaded",
     "message": "Cargando resultados de búsqueda..."
   },
+  "components.Search.textQueryLengthWarning": {
+    "description": "Warning message in search results when the text query is not long enough to be used.",
+    "message": "La búsqueda de texto requiere al menos 3 caracteres. { query } no es lo suficientemente larga para buscar. Los resultados de la búsqueda no se verán afectados por esta consulta."
+  },
   "components.SearchFilterGroupModal.closeModal": {
     "description": "Text for the button to close the search filters modal",
-    "message": "Cerrar"
+    "message": "Cerrar ventana modal"
   },
   "components.SearchFilterGroupModal.error": {
     "description": "Error message when the search for more filter value fails in the search filters modal.",
@@ -119,6 +123,14 @@
     "description": "Placeholder message for the search input in the search filter modal.",
     "message": "Buscar en { filterName }"
   },
+  "components.SearchFilterGroupModal.loadMoreResults": {
+    "description": "Button to manually load more results for the current active filter",
+    "message": "Cargar más resultados"
+  },
+  "components.SearchFilterGroupModal.loadingResults": {
+    "description": "Loading message while loading more results in the search filter modal.",
+    "message": "Cargando resultados de búsqueda..."
+  },
   "components.SearchFilterGroupModal.modalTitle": {
     "description": "Title for the modal to add more filter values in the search filters modal.",
     "message": "Añadir filtros para {filterName}"

package/i18n/locales/fr-CA.json

@@ -103,9 +103,13 @@
     "description": "Accessibility text for the spinner while search results are being loaded",
     "message": "Chargement des résultats de recherche..."
   },
+  "components.Search.textQueryLengthWarning": {
+    "description": "Warning message in search results when the text query is not long enough to be used.",
+    "message": "La recherche de texte nécessite au moins 3 caractères. { query } n'est pas assez long. Les résultats de recherche ne seront pas affectés par cette requête."
+  },
   "components.SearchFilterGroupModal.closeModal": {
     "description": "Text for the button to close the search filters modal",
-    "message": "Fermer"
+    "message": "Fermer le modal"
   },
   "components.SearchFilterGroupModal.error": {
     "description": "Error message when the search for more filter value fails in the search filters modal.",
@@ -119,6 +123,14 @@
     "description": "Placeholder message for the search input in the search filter modal.",
     "message": "Rechercher parmi les { filterName }"
   },
+  "components.SearchFilterGroupModal.loadMoreResults": {
+    "description": "Button to manually load more results for the current active filter",
+    "message": "Charger plus de résultats"
+  },
+  "components.SearchFilterGroupModal.loadingResults": {
+    "description": "Loading message while loading more results in the search filter modal.",
+    "message": "Chargement des résultats de recherche..."
+  },
   "components.SearchFilterGroupModal.modalTitle": {
     "description": "Title for the modal to add more filter values in the search filters modal.",
     "message": "Ajouter des filtres pour {filterName}"

package/i18n/locales/fr-FR.json

@@ -103,9 +103,13 @@
     "description": "Accessibility text for the spinner while search results are being loaded",
     "message": "Chargement des résultats de recherche..."
   },
+  "components.Search.textQueryLengthWarning": {
+    "description": "Warning message in search results when the text query is not long enough to be used.",
+    "message": "La recherche de texte nécessite au moins 3 caractères. { query } n'est pas assez long pour la recherche. Les résultats de recherche ne seront pas affectés par cette requête."
+  },
   "components.SearchFilterGroupModal.closeModal": {
     "description": "Text for the button to close the search filters modal",
-    "message": "Fermer"
+    "message": "Fermer la fenêtre modale"
   },
   "components.SearchFilterGroupModal.error": {
     "description": "Error message when the search for more filter value fails in the search filters modal.",
@@ -119,6 +123,14 @@
     "description": "Placeholder message for the search input in the search filter modal.",
     "message": "Rechercher parmi les { filterName }"
   },
+  "components.SearchFilterGroupModal.loadMoreResults": {
+    "description": "Button to manually load more results for the current active filter",
+    "message": "Charger plus de résultats"
+  },
+  "components.SearchFilterGroupModal.loadingResults": {
+    "description": "Loading message while loading more results in the search filter modal.",
+    "message": "Chargement des résultats de recherche..."
+  },
   "components.SearchFilterGroupModal.modalTitle": {
     "description": "Title for the modal to add more filter values in the search filters modal.",
     "message": "Ajouter des filtres pour {filterName}"

package/i18n/locales/pt-PT.json

@@ -103,9 +103,13 @@
     "description": "Accessibility text for the spinner while search results are being loaded",
     "message": "A carregar os resultados da pesquisa..."
   },
+  "components.Search.textQueryLengthWarning": {
+    "description": "Warning message in search results when the text query is not long enough to be used.",
+    "message": "A pesquisa de texto requer pelo menos 3 caracteres. { query } não é longo o suficiente para pesquisar. Os resultados da pesquisa não serão alterados por esta consulta."
+  },
   "components.SearchFilterGroupModal.closeModal": {
     "description": "Text for the button to close the search filters modal",
-    "message": "Fechar"
+    "message": "Fechar modal"
   },
   "components.SearchFilterGroupModal.error": {
     "description": "Error message when the search for more filter value fails in the search filters modal.",
@@ -119,6 +123,14 @@
     "description": "Placeholder message for the search input in the search filter modal.",
     "message": "Pesquisar em { filterName }"
   },
+  "components.SearchFilterGroupModal.loadMoreResults": {
+    "description": "Button to manually load more results for the current active filter",
+    "message": "Carregar mais resultados"
+  },
+  "components.SearchFilterGroupModal.loadingResults": {
+    "description": "Loading message while loading more results in the search filter modal.",
+    "message": "A carregar os resultados da pesquisa..."
+  },
   "components.SearchFilterGroupModal.modalTitle": {
     "description": "Title for the modal to add more filter values in the search filters modal.",
     "message": "Adicionar filtros para {filterName}"

package/i18n/locales/ru-RU.json

@@ -0,0 +1,186 @@
+{
+  "components.CourseGlimpse.cover": {
+    "description": "Placeholder text when the course we are glimpsing at is missing a cover image",
+    "message": "Обложка"
+  },
+  "components.CourseGlimpseList.courseCount": {
+    "description": "Result count & pagination information for course search. Appears right above search results",
+    "message": "Показано от {start, number} до {end, number} на {courseCount, number} {courseCount, plural, one {курсе} few {курсах} many {курсах} other {курсах}} в соответствии с вашим поиском"
+  },
+  "components.CourseRunEnrollment.enroll": {
+    "description": "CTA for users who can enroll in the course run or could enroll if they logged in.",
+    "message": "Записаться сейчас"
+  },
+  "components.CourseRunEnrollment.enrolled": {
+    "description": "Help text for users who see the \"Go to course\" CTA on course run enrollment",
+    "message": "Вы зачислены на этот курс"
+  },
+  "components.CourseRunEnrollment.enrollmentClosed": {
+    "description": "Help text replacing the CTA on a course run when enrollment is closed.",
+    "message": "Регистрация на курс в данный момент закрыта"
+  },
+  "components.CourseRunEnrollment.enrollmentFailed": {
+    "description": "Help text below the \"Enroll now\" CTA when an enrollment attempt has already failed.",
+    "message": "Не удалось выполнить запрос на зачисление."
+  },
+  "components.CourseRunEnrollment.goToCourse": {
+    "description": "CTA for users who are already enrolled in a course run.",
+    "message": "Перейти к курсу"
+  },
+  "components.CourseRunEnrollment.loadingInitial": {
+    "description": "Accessible text for the initial loading spinner on the course run enrollment button.",
+    "message": "Загрузка информации о зачислении..."
+  },
+  "components.CourseRunEnrollment.loginToEnroll": {
+    "description": "Helper text in the enroll button for non logged in users",
+    "message": "Войти для записи"
+  },
+  "components.DesktopUserMenu.menuPurpose": {
+    "description": "Accessible label for user menu button",
+    "message": "Доступ к настройкам вашего профиля"
+  },
+  "components.LanguageSelector.currentlySelected": {
+    "description": "Accessible hint to mark the currently selected language in the language selector",
+    "message": "(сейчас выбрано)"
+  },
+  "components.LanguageSelector.languages": {
+    "description": "Default text for the language selector button when the current language cannot be identified",
+    "message": "Языки"
+  },
+  "components.LanguageSelector.selectLanguage": {
+    "description": "Accessible label for the language selector button",
+    "message": "Выберите язык:"
+  },
+  "components.LanguageSelector.switchToLanguage": {
+    "description": "Accessible link title for the language switching links in language selector",
+    "message": "Переключиться на {language}"
+  },
+  "components.PaginateCourseSearch.currentlyReadingLastPageN": {
+    "description": "Accessibility helper in pagination, shown next to the current page number when it is the last page.",
+    "message": "В настоящее время чтение последней страницы {page}"
+  },
+  "components.PaginateCourseSearch.currentlyReadingPageN": {
+    "description": "Accessibility helper in pagination, shown next to the current page number when it is not the last page.",
+    "message": "Сейчас чтение страницы {page}"
+  },
+  "components.PaginateCourseSearch.lastPageN": {
+    "description": "Accessibility helper for pagination, added on the last page link.",
+    "message": "Последняя страница {page}"
+  },
+  "components.PaginateCourseSearch.nextPageN": {
+    "description": "Accessibility helper for pagination, added on the next page link.",
+    "message": "Следующая страница {page}"
+  },
+  "components.PaginateCourseSearch.pageN": {
+    "description": "Accessibility helper for pagination, added on all page links for screen readers,\n      only shown next to \"page 1\" visually.",
+    "message": "Страница {page}"
+  },
+  "components.PaginateCourseSearch.pagination": {
+    "description": "Label for the pagination navigation in course search results.",
+    "message": "Постраничная навигация"
+  },
+  "components.PaginateCourseSearch.previousPageN": {
+    "description": "Accessibility helper for pagination, added on the previous page link.",
+    "message": "Предыдущая страница {page}"
+  },
+  "components.RootSearchSuggestField.searchFieldPlaceholder": {
+    "description": "Placeholder text displayed in the search field when it is empty.",
+    "message": "Поиск курсов"
+  },
+  "components.Search.errorMessage": {
+    "description": "Error message for Search view when the request to load courses fails",
+    "message": "Что-то не так! Курсы не могут быть загружены."
+  },
+  "components.Search.hideFiltersPane": {
+    "description": "Accessibility text for the button/icon that toggles *off* the filters pane on mobile",
+    "message": "Скрыть панель фильтров"
+  },
+  "components.Search.showFiltersPane": {
+    "description": "Accessibility text for the button/icon that toggles *on* the filters pane on mobile",
+    "message": "Показать панель фильтров"
+  },
+  "components.Search.spinnerText": {
+    "description": "Accessibility text for the spinner while search results are being loaded",
+    "message": "Загрузка результатов поиска..."
+  },
+  "components.Search.textQueryLengthWarning": {
+    "description": "Warning message in search results when the text query is not long enough to be used.",
+    "message": "Текстовый поиск требует не менее 3 символов. { query } не достаточно длинный, чтобы искать. Этот запрос не повлияет на результаты поиска."
+  },
+  "components.SearchFilterGroupModal.closeModal": {
+    "description": "Text for the button to close the search filters modal",
+    "message": "Закрыть модальное окно"
+  },
+  "components.SearchFilterGroupModal.error": {
+    "description": "Error message when the search for more filter value fails in the search filters modal.",
+    "message": "Произошла ошибка при поиске {filterName}."
+  },
+  "components.SearchFilterGroupModal.inputLabel": {
+    "description": "Accessible label for the search input in the search filter modal.",
+    "message": "Поиск фильтров для добавления"
+  },
+  "components.SearchFilterGroupModal.inputPlaceholder": {
+    "description": "Placeholder message for the search input in the search filter modal.",
+    "message": "Искать в { filterName }"
+  },
+  "components.SearchFilterGroupModal.loadMoreResults": {
+    "description": "Button to manually load more results for the current active filter",
+    "message": "Загрузить больше результатов"
+  },
+  "components.SearchFilterGroupModal.loadingResults": {
+    "description": "Loading message while loading more results in the search filter modal.",
+    "message": "Загрузка результатов поиска..."
+  },
+  "components.SearchFilterGroupModal.modalTitle": {
+    "description": "Title for the modal to add more filter values in the search filters modal.",
+    "message": "Добавить фильтры для {filterName}"
+  },
+  "components.SearchFilterGroupModal.moreOptionsButton": {
+    "description": "Test for the button to see more filter values than the top N that appear by default.",
+    "message": "Ещё опции"
+  },
+  "components.SearchFilterGroupModal.queryTooShort": {
+    "description": "Users need to enter at least 3 characters to search for more filter values; this message informs them when they start typing.",
+    "message": "Введите минимум 3 символа, чтобы начать поиск."
+  },
+  "components.SearchFilterValueParent.ariaHideChildren": {
+    "description": "Accessibility message for the button to hide children of the current filter",
+    "message": "Скрыть дополнительные фильтры для {filterValueName}"
+  },
+  "components.SearchFilterValueParent.ariaShowChildren": {
+    "description": "Accessibility message for the button to show children of the current filter",
+    "message": "Показать больше фильтров для {filterValueName}"
+  },
+  "components.SearchFiltersPane.clearFilters": {
+    "description": "Helper button in search filters pane in search page to remove all active filters",
+    "message": "Очистите {activeFilterCount, number} {activeFilterCount, plural, one {активный фильтр} few {активных фильтра} many {активных фильтров} other {активных фильтров}}"
+  },
+  "components.SearchFiltersPane.title": {
+    "description": "Title for the search filters pane in course search.",
+    "message": "Фильтровать курсы"
+  },
+  "components.SearchInput.button": {
+    "description": "Accessibility text for the search button inside the Search input.",
+    "message": "Поиск"
+  },
+  "components.SearchSuggestField.searchFieldPlaceholder": {
+    "description": "Placeholder text displayed in the search field when it is empty.",
+    "message": "Поиск курсов, организаций, категорий"
+  },
+  "components.UserLogin.logIn": {
+    "description": "Text for the login button.",
+    "message": "Вход"
+  },
+  "components.UserLogin.logOut": {
+    "description": "Text for the logout button.",
+    "message": "Выход"
+  },
+  "components.UserLogin.signup": {
+    "description": "Text for the signup button.",
+    "message": "Зарегистрироваться"
+  },
+  "components.UserLogin.spinnerText": {
+    "description": "Accessibility text for the spinner in the login area.",
+    "message": "Загрузка статуса входа..."
+  }
+}

package/js/common/searchFields/getSuggestionsSection.spec.ts

@@ -5,9 +5,11 @@ import { getSuggestionsSection } from './getSuggestionsSection';
 
 const mockHandle: jest.Mock<typeof handle> = handle as any;
 jest.mock('utils/errors/handle');
+jest.mock('utils/context', () => jest.fn());
 
 describe('common/searchFields/getSuggestionsSection', () => {
   afterEach(() => {
+    jest.resetAllMocks();
     fetchMock.restore();
   });
 
@@ -53,6 +55,22 @@ describe('common/searchFields/getSuggestionsSection', () => {
     );
   });
 
+  it('reports the error and the explanation when the server returns a 400 error', async () => {
+    fetchMock.get('/api/v1.0/courses/autocomplete/?query=error', {
+      body: {
+        errors: ['Missing autocomplete "query" for request to richie_courses.'],
+      },
+      status: 400,
+    });
+    await getSuggestionsSection('courses', 'Courses', 'error');
+    expect(mockHandle).toHaveBeenCalledWith(
+      new Error('Failed to get list from courses autocomplete : 400'),
+      {
+        errors: ['Missing autocomplete "query" for request to richie_courses.'],
+      },
+    );
+  });
+
   it('reports the error when it receives broken json', async () => {
     fetchMock.get('/api/v1.0/courses/autocomplete/?query=some%20search', 'not json');
     await getSuggestionsSection('courses', 'Courses', 'some search');

package/js/common/searchFields/getSuggestionsSection.ts

@@ -28,7 +28,8 @@ export const getSuggestionsSection = async (kind: string, title: string, query:
   // Fetch treats remote errors (400, 404, 503...) as successes
   // The ok flag is the way to discriminate
   if (!response.ok) {
-    return handle(new Error(`Failed to get list from ${kind} autocomplete : ${response.status}`));
+    const error = new Error(`Failed to get list from ${kind} autocomplete : ${response.status}`);
+    return response.status === 400 ? handle(error, await response.json()) : handle(error);
   }
 
   let responseData: Suggestion<string>[];

package/js/common/searchFields/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import debounce from 'lodash-es/debounce';
 
 import { StaticFilterDefinitions } from 'types/filters';
@@ -77,17 +76,5 @@ export const getRelevantFilter = (
   suggestion: SearchSuggestion,
 ) => {
   // Use the `kind` field on the suggestion to pick the relevant filter to update.
-  let filter = Object.values(filters).find((fltr) => fltr.name === suggestion.kind)!;
-
-  // We need a special-case to handle categories until we refactor the API to separate endpoints between
-  // kinds of categories
-  if (!filter) {
-    // Pick the filter to update based on the payload's path: it contains the relevant filter's page path
-    // (for eg. a meta-category or the "organizations" root page)
-    filter = Object.values(filters).find(
-      (fltr) => !!fltr.base_path && String(suggestion.id).substr(2).startsWith(fltr.base_path),
-    )!;
-  }
-
-  return filter;
+  return Object.values(filters).find((fltr) => fltr.name === suggestion.kind)!;
 };

package/js/components/CourseGlimpse/CourseGlimpseFooter.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl } from 'react-intl';
 
 import { CommonDataProps } from 'types/commonDataProps';

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

@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { CommonDataProps } from 'types/commonDataProps';
 import { ContextFactory } from 'utils/test/factories';
@@ -21,6 +20,11 @@ describe('components/CourseGlimpse', () => {
     icon: null,
     id: '742',
     organization_highlighted: 'Some Organization',
+    organization_highlighted_cover_image: {
+      sizes: '330px',
+      src: '/thumbs/org_small.png',
+      srcset: 'some srcset',
+    },
     organizations: ['36', '63'],
     state: {
       call_to_action: 'Enroll now',
@@ -34,7 +38,7 @@ describe('components/CourseGlimpse', () => {
   const contextProps: CommonDataProps['context'] = ContextFactory().generate();
 
   it('renders a course glimpse with its data', () => {
-    render(
+    const { container } = render(
       <IntlProvider locale="en">
         <CourseGlimpse
           context={contextProps}
@@ -55,10 +59,24 @@ describe('components/CourseGlimpse', () => {
     screen.getByText('Some Organization');
     // Matches on 'Starts on Mar 14, 2019', date is wrapped with intl <span>
     screen.getByText('Starts on Mar 14, 2019');
+
+    // Check course logo
+    const courseGlipseMedia = container.getElementsByClassName('course-glimpse__media');
+    expect(courseGlipseMedia.length).toBe(1);
+    const img = courseGlipseMedia[0].firstChild;
+    expect(img).toBeInstanceOf(HTMLImageElement);
     // The logo is rendered along with alt text "" as it is decorative and included in a link block
-    const img = screen.getByRole('img');
     expect(img).toHaveAttribute('alt', '');
     expect(img).toHaveAttribute('src', '/thumbs/small.png');
+
+    // Check organization logo
+    const orgLogoElement = container.getElementsByClassName('course-glimpse__organization-logo');
+    expect(orgLogoElement.length).toBe(1);
+    const orgImg = orgLogoElement[0].firstChild;
+    expect(orgImg).toBeInstanceOf(HTMLImageElement);
+    // The logo is rendered along with alt text "" as it is decorative and included in a link block
+    expect(orgImg).toHaveAttribute('alt', '');
+    expect(orgImg).toHaveAttribute('src', '/thumbs/org_small.png');
   });
 
   it('works when there is no call to action or datetime on the state (eg. an archived course)', () => {

package/js/components/CourseGlimpse/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { CommonDataProps } from 'types/commonDataProps';
@@ -20,6 +20,7 @@ const messages = defineMessages({
 const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataProps) => (
   <a className="course-glimpse course-glimpse--link" href={course.absolute_url}>
     <div className="course-glimpse__media">
+      {/* alt forced to empty string because it's a decorative image */}
       {course.cover_image ? (
         <img
           alt=""
@@ -36,14 +37,32 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
     <div className="course-glimpse__content">
       {course.icon ? (
         <div className="course-glimpse__icon">
-          <div className="course-glimpse__band" style={{ background: course.icon.color }}>
-            {course.icon.title}
-          </div>
-          <img src={course.icon.src} srcSet={course.icon.srcset} sizes={course.icon.sizes} alt="" />
+          <span className="category-badge">
+            {/* alt forced to empty string because it's a decorative image */}
+            <img
+              alt=""
+              className="category-badge__icon"
+              sizes={course.icon.sizes}
+              src={course.icon.src}
+              srcSet={course.icon.srcset}
+            />
+            <span className="category-badge__title">{course.icon.title}</span>
+          </span>
         </div>
       ) : null}
       <div className="course-glimpse__wrapper">
         <p className="course-glimpse__title">{course.title}</p>
+        {course.organization_highlighted_cover_image ? (
+          <div className="course-glimpse__organization-logo">
+            {/* alt forced to empty string because it's a decorative image */}
+            <img
+              alt=""
+              sizes={course.organization_highlighted_cover_image.sizes}
+              src={course.organization_highlighted_cover_image.src}
+              srcSet={course.organization_highlighted_cover_image.srcset}
+            />
+          </div>
+        ) : null}
         <div className="course-glimpse__organization">
           <svg aria-hidden={true} role="img" className="icon">
             <use xlinkHref="#icon-org" />
@@ -68,4 +87,4 @@ const areEqual: (
 ) => boolean = (prevProps, newProps) =>
   prevProps.context === newProps.context && prevProps.course.id === newProps.course.id;
 
-export const CourseGlimpse = React.memo(CourseGlimpseBase, areEqual);
+export const CourseGlimpse = memo(CourseGlimpseBase, areEqual);

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

@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 
 import { ContextFactory } from 'utils/test/factories';

package/js/components/CourseGlimpseList/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { CourseGlimpse } from 'components/CourseGlimpse';