richie 2.25.0b2.dev41__tar.gz → 2.25.0b2.dev43__tar.gz

richie-2.25.0b2.dev43/PKG-INFO

@@ -0,0 +1,153 @@
+Metadata-Version: 2.1
+Name: richie
+Version: 2.25.0b2.dev43
+Summary: A CMS to build learning portals for open education
+Author-email: "Open FUN (France Université Numérique)" <fun.dev@fun-mooc.fr>
+License: MIT License
+        
+        Copyright (c) 2018-present GIP FUN MOOC.
+        
+        Permission is hereby granted, free of charge, to any person obtaining a copy
+        of this software and associated documentation files (the "Software"), to deal
+        in the Software without restriction, including without limitation the rights
+        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the Software is
+        furnished to do so, subject to the following conditions:
+        
+        The above copyright notice and this permission notice shall be included in all
+        copies or substantial portions of the Software.
+        
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+        
+        
+Project-URL: Bug Tracker, https://github.com/openfun/richie/issues/new
+Project-URL: Changelog, https://github.com/openfun/richie/blob/master/CHANGELOG.md
+Project-URL: Homepage, https://github.com/openfun/richie
+Project-URL: Repository, https://github.com/openfun/richie
+Project-URL: Documentation, https://richie.education/
+Project-URL: Demonstration website, https://demo.richie.education/
+Keywords: Django,Django-CMS,Open edX
+Classifier: Development Status :: 5 - Production/Stable
+Classifier: Framework :: Django
+Classifier: Framework :: Django :: 2.2
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Natural Language :: English
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.7
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: arrow
+Requires-Dist: Django<4
+Requires-Dist: djangocms-file
+Requires-Dist: djangocms-googlemap
+Requires-Dist: djangocms-link
+Requires-Dist: djangocms-picture
+Requires-Dist: djangocms-text-ckeditor
+Requires-Dist: djangocms-video
+Requires-Dist: djangorestframework
+Requires-Dist: django-autocomplete-light==3.9.7
+Requires-Dist: django-cms<4.0.0,>=3.11.0
+Requires-Dist: django-parler>=2.3
+Requires-Dist: django-redis>=4.11.0
+Requires-Dist: django-treebeard
+Requires-Dist: dj-pagination
+Requires-Dist: easy_thumbnails[svg]>=2.8
+Requires-Dist: elasticsearch<7.0.0,>=6.0.0
+Requires-Dist: exrex==0.11.0
+Requires-Dist: importlib-metadata
+Requires-Dist: oauthlib==3.2.2
+Requires-Dist: requests==2.31.0
+Provides-Extra: dev
+Requires-Dist: bandit==1.7.6; extra == "dev"
+Requires-Dist: black==23.12.1; extra == "dev"
+Requires-Dist: pyRdfa3==3.6.2; extra == "dev"
+Requires-Dist: cssselect==1.2.0; extra == "dev"
+Requires-Dist: factory-boy==3.3.0; extra == "dev"
+Requires-Dist: flake8==7.0.0; extra == "dev"
+Requires-Dist: flake8-pyproject==1.2.3; extra == "dev"
+Requires-Dist: htmlmin==0.1.12; extra == "dev"
+Requires-Dist: ipdb==0.13.13; extra == "dev"
+Requires-Dist: ipython==8.20.0; extra == "dev"
+Requires-Dist: isort==5.13.2; extra == "dev"
+Requires-Dist: lxml==5.1.0; extra == "dev"
+Requires-Dist: msgpack==1.0.7; extra == "dev"
+Requires-Dist: mysqlclient==2.2.1; extra == "dev"
+Requires-Dist: pylint==3.0.3; extra == "dev"
+Requires-Dist: pylint-django==2.5.5; extra == "dev"
+Requires-Dist: pytest==7.4.4; extra == "dev"
+Requires-Dist: pytest-cov==4.1.0; extra == "dev"
+Requires-Dist: pytest-django==4.7.0; extra == "dev"
+Requires-Dist: responses==0.24.1; extra == "dev"
+Provides-Extra: ci
+Requires-Dist: twine==4.0.2; extra == "ci"
+Provides-Extra: sandbox
+Requires-Dist: django-configurations==2.5; extra == "sandbox"
+Requires-Dist: dockerflow==2024.1.0; extra == "sandbox"
+Requires-Dist: factory-boy==3.3.0; extra == "sandbox"
+Requires-Dist: gunicorn==21.2.0; extra == "sandbox"
+Requires-Dist: psycopg2-binary==2.9.9; extra == "sandbox"
+Requires-Dist: sentry-sdk==1.39.2; extra == "sandbox"
+
+# Richie, the best OpenSource CMS to build education portals
+
+[![CircleCI](https://circleci.com/gh/openfun/richie/tree/master.svg?style=svg)](https://circleci.com/gh/openfun/richie/tree/master)
+
+## Overview
+
+`Learning Management Systems` (LMS) are great tools for hosting and playing interactive online
+courses and MOOCs.
+
+However, if you need to build a complete website with flexible content to aggregate your courses,
+in several languages and from different sources, **you will soon need a CMS**.
+
+At "France Université Numérique", we wanted to build an OpenSource portal with `Python` and
+`Django`. That's why we built `Richie` on top of [DjangoCMS](https://www.django-cms.org), one of
+the best CMS on the market, as a toolbox to easily create full fledged websites with a catalog of
+online courses.
+
+Among the features that `Richie` offers out of the box:
+
+- multi-lingual by default,
+- advanced access rights and moderation,
+- catalog of courses synchronized with one or more `LMS` instances,
+- search engine based on `Elasticsearch` and pre-configured to offer full-text queries,
+  multi-facetting, auto-complete,...
+- flexible custom pages for courses, organizations, categories, teachers, blog posts,
+  programs (and their inter-relations),
+- Extensible with any third-party `DjangoCMS` plugin or any third-party `Django` application.
+
+## Discover Richie
+
+If you're looking for a quick preview of `Richie`, you can take a look and have a tour of
+`Richie` on our dedicated [demo site](https://demo.richie.education).
+
+It is connected back-to-back with a demo of OpenEdX running on
+[OpenEdX Docker](https://github.com/openfun/openedx-docker).
+
+Two users are available for testing:
+
+- admin: `admin@example.com`/`admin`
+- student: `edx@example.com`/`edx`
+
+The database is regularly flushed.
+
+## Getting started
+
+Take a look at our [documentation](https://richie.education/docs/discover) to get started with Richie.
+
+## Contributing
+
+### [Contributing guide](https://richie.education/docs/contributing-guide)
+
+Read our [contributing guide](https://richie.education/docs/contributing-guide) to learn about our development process and get started developing on `Richie`.
+
+### License
+
+This work is released under the MIT License (see [LICENSE](./LICENSE)).

richie-2.25.0b2.dev43/src/frontend/js/components/Badge/index.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { PropsWithChildren } from 'react/ts5.0';
+
+type BadgeProps = PropsWithChildren<{
+  color?: 'primary' | 'secondary' | 'tertiary';
+}>;
+const Badge = ({ children, color }: BadgeProps) => (
+  <div
+    data-testid="badge"
+    className={classNames('category-badge', {
+      [`category-badge--${color}`]: Boolean(color),
+    })}
+  >
+    <span className="category-badge__title">{children}</span>
+  </div>
+);
+
+export default Badge;

richie-2.25.0b2.dev43/src/frontend/js/components/CourseGlimpse/index.spec.tsx

@@ -0,0 +1,148 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
+import { CommonDataProps } from 'types/commonDataProps';
+import { RichieContextFactory } from 'utils/test/factories/richie';
+import { CourseStateTextEnum } from 'types';
+import { CourseGlimpse, CourseGlimpseCourse } from '.';
+
+const renderCourseGlimpse = ({
+  course,
+  contextProps,
+}: {
+  course: CourseGlimpseCourse;
+  contextProps: CommonDataProps['context'];
+}) => {
+  return render(
+    <IntlProvider locale="en">
+      <MemoryRouter>
+        <CourseGlimpse context={contextProps} course={course} />
+      </MemoryRouter>
+    </IntlProvider>,
+  );
+};
+
+describe('widgets/Search/components/CourseGlimpse', () => {
+  const course: CourseGlimpseCourse = {
+    course_url: 'https://example/com/courses/42/',
+    code: '123abc',
+    cover_image: {
+      sizes: '330px',
+      src: '/thumbs/small.png',
+      srcset: 'some srcset',
+    },
+    icon: {
+      sizes: '60px',
+      src: '/thumbs/icon_small.png',
+      srcset: 'some srcset',
+      title: 'Some icon',
+    },
+    id: '742',
+    organization: {
+      title: 'Some Organization',
+      image: {
+        sizes: '330px',
+        src: '/thumbs/org_small.png',
+        srcset: 'some srcset',
+      },
+    },
+    state: {
+      call_to_action: 'enroll now',
+      datetime: '2019-03-14T10:35:47.823Z',
+      priority: 0,
+      text: CourseStateTextEnum.STARTING_ON,
+    },
+    title: 'Course 42',
+  };
+
+  const contextProps: CommonDataProps['context'] = RichieContextFactory().one();
+
+  it('renders a course glimpse with its data', () => {
+    const { container } = renderCourseGlimpse({ course, contextProps });
+
+    // first text we encounter should be the title, so that screen reader users get it first
+    expect(container.textContent?.indexOf('Course 42')).toBe(0);
+
+    // The link that wraps the course glimpse should have no title as its content is explicit enough
+    const link = container.querySelector('.course-glimpse__link');
+    expect(link).not.toHaveAttribute('title');
+    // The course glimpse shows the relevant information
+    screen.getByRole('heading', { name: 'Course 42', level: 3 });
+    screen.getByLabelText('Course code');
+    screen.getByText('123abc');
+    screen.getByLabelText('Organization');
+    screen.getByText('Some Organization');
+    screen.getByText('Category');
+    // Matches on 'Starting on Mar 14, 2019', date is wrapped with intl <span>
+    screen.getByLabelText('Course date');
+    screen.getByText('Starting on Mar 14, 2019');
+
+    // Check course logo
+    const courseGlipseMedia = container.getElementsByClassName('course-glimpse__media');
+    expect(courseGlipseMedia.length).toBe(1);
+    expect(courseGlipseMedia[0]).toHaveAttribute('aria-hidden', 'true');
+    const mediaLink = courseGlipseMedia[0].firstChild;
+    expect(mediaLink).toHaveAttribute('tabindex', '-1');
+    const img = mediaLink?.firstChild;
+    expect(img).toBeInstanceOf(HTMLImageElement);
+    // The logo is rendered along with alt text "" as it is decorative and included in a link block
+    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)', () => {
+    renderCourseGlimpse({
+      contextProps,
+      course: {
+        ...course,
+        state: {
+          ...course.state,
+          call_to_action: null,
+          text: CourseStateTextEnum.ARCHIVED,
+        },
+      },
+    });
+
+    // Make sure the component renders and shows the state
+    screen.getByRole('heading', { name: 'Course 42', level: 3 });
+    const dateFormatter = Intl.DateTimeFormat('en', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+    });
+    const formatedDatetime = dateFormatter.format(new Date(course.state.datetime!));
+    screen.getByText(`Archived ${formatedDatetime}`);
+  });
+
+  it('shows the "Cover" placeholder div when the course is missing a cover image', () => {
+    render(
+      <IntlProvider locale="en">
+        <CourseGlimpse context={contextProps} course={{ ...course, cover_image: null }} />
+      </IntlProvider>,
+    );
+
+    screen.getByRole('heading', { name: 'Course 42', level: 3 });
+    screen.getByText('Cover');
+  });
+
+  it('does include "-" if the course code is not set', () => {
+    renderCourseGlimpse({
+      contextProps,
+      course: { ...course, code: null },
+    });
+
+    expect(screen.getByText('-').parentElement).toHaveClass(
+      'course-glimpse__metadata',
+      'course-glimpse__metadata--code',
+    );
+  });
+});

richie-2.25.0b2.dev43/src/frontend/js/components/CourseGlimpse/index.tsx

@@ -0,0 +1,170 @@
+import React, { memo } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { Nullable } from 'types/utils';
+import { CommonDataProps } from 'types/commonDataProps';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import { CourseState } from 'types';
+import { CourseGlimpseFooter } from './CourseGlimpseFooter';
+import CourseLink from './CourseLink';
+
+export interface CourseGlimpseCourse {
+  id: string;
+  product_id?: string;
+  code: Nullable<string>;
+  course_url?: string;
+  course_route?: string;
+  cover_image?: Nullable<{
+    src: string;
+    sizes?: string;
+    srcset?: string;
+  }>;
+  title: string;
+  organization: {
+    title: string;
+    image?: Nullable<{
+      src: string;
+      sizes?: string;
+      srcset?: string;
+    }>;
+  };
+  icon?: Nullable<{
+    title: string;
+    src: string;
+    sizes?: string;
+    srcset?: string;
+  }>;
+  state: CourseState;
+  nb_course_runs?: number;
+  organizations?: string[];
+  duration?: string;
+  effort?: string;
+  categories?: string[];
+}
+
+export interface CourseGlimpseProps {
+  course: CourseGlimpseCourse;
+}
+
+const messages = defineMessages({
+  cover: {
+    defaultMessage: 'Cover',
+    description: 'Placeholder text when the course we are glimpsing at is missing a cover image',
+    id: 'components.CourseGlimpse.cover',
+  },
+  organizationIconAlt: {
+    defaultMessage: 'Organization',
+    description: 'Organization logo alternative text for screen reader users',
+    id: 'components.CourseGlimpse.organizationIconAlt',
+  },
+  codeIconAlt: {
+    defaultMessage: 'Course code',
+    description: 'Course code logo alternative text for screen reader users',
+    id: 'components.CourseGlimpse.codeIconAlt',
+  },
+  categoryLabel: {
+    defaultMessage: 'Category',
+    description: 'Category label text for screen reader users',
+    id: 'components.CourseGlimpse.categoryLabel',
+  },
+});
+
+const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataProps) => {
+  const intl = useIntl();
+  return (
+    <div className="course-glimpse" data-testid="course-glimpse">
+      {/* the media link is only here for mouse users, so hide it for keyboard/screen reader users.
+      Keyboard/sr will focus the link on the title */}
+      <div aria-hidden="true" className="course-glimpse__media">
+        <CourseLink
+          tabIndex={-1}
+          className="course-glimpse__link"
+          href={course.course_url}
+          to={course.course_route}
+        >
+          {/* alt forced to empty string because it's a decorative image */}
+          {course.cover_image ? (
+            <img
+              alt=""
+              sizes={course.cover_image.sizes}
+              src={course.cover_image.src}
+              srcSet={course.cover_image.srcset}
+            />
+          ) : (
+            <div className="course-glimpse__media__empty">
+              <FormattedMessage {...messages.cover} />
+            </div>
+          )}
+        </CourseLink>
+      </div>
+      <div className="course-glimpse__content">
+        <div className="course-glimpse__wrapper">
+          <h3 className="course-glimpse__title">
+            <CourseLink
+              className="course-glimpse__link"
+              href={course.course_url}
+              to={course.course_route}
+            >
+              <span className="course-glimpse__title-text">{course.title}</span>
+            </CourseLink>
+          </h3>
+          {course.organization.image ? (
+            <div className="course-glimpse__organization-logo">
+              {/* alt forced to empty string because the organization name is rendered after */}
+              <img
+                alt=""
+                sizes={course.organization.image.sizes}
+                src={course.organization.image.src}
+                srcSet={course.organization.image.srcset}
+              />
+            </div>
+          ) : null}
+          <div className="course-glimpse__metadata course-glimpse__metadata--organization">
+            <Icon
+              name={IconTypeEnum.ORG}
+              title={intl.formatMessage(messages.organizationIconAlt)}
+              size="small"
+            />
+            <span className="title">{course.organization.title}</span>
+          </div>
+          <div className="course-glimpse__metadata course-glimpse__metadata--code">
+            <Icon
+              name={IconTypeEnum.BARCODE}
+              title={intl.formatMessage(messages.codeIconAlt)}
+              size="small"
+            />
+            <span>{course.code || '-'}</span>
+          </div>
+        </div>
+        {course.icon ? (
+          <div className="course-glimpse__icon">
+            <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="offscreen">
+                <FormattedMessage {...messages.categoryLabel} />
+              </span>
+              <span className="category-badge__title">{course.icon.title}</span>
+            </span>
+          </div>
+        ) : null}
+        <CourseGlimpseFooter context={context} course={course} />
+      </div>
+    </div>
+  );
+};
+
+const areEqual: (
+  prevProps: Readonly<CourseGlimpseProps & CommonDataProps>,
+  newProps: Readonly<CourseGlimpseProps & CommonDataProps>,
+) => boolean = (prevProps, newProps) =>
+  prevProps.context === newProps.context && prevProps.course.id === newProps.course.id;
+
+export const CourseGlimpse = memo(CourseGlimpseBase, areEqual);
+export { getCourseGlimpseProps } from './utils';

richie-2.25.0b2.dev43/src/frontend/js/components/CourseGlimpse/utils.ts

@@ -0,0 +1,113 @@
+import { IntlShape } from 'react-intl';
+import { Course as RichieCourse, isRichieCourse } from 'types/Course';
+import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
+import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
+import {
+  CourseListItem as JoanieCourse,
+  CourseProductRelation,
+  isCourseProductRelation,
+} from 'types/Joanie';
+import { CourseGlimpseCourse } from '.';
+
+const getCourseGlimpsePropsFromCourseProductRelation = (
+  courseProductRelation: CourseProductRelation,
+  intl: IntlShape,
+  organizationId?: string,
+): CourseGlimpseCourse => {
+  const getRoutePath = getDashboardRoutePath(intl);
+  const courseRouteParams = {
+    courseId: courseProductRelation.course.id,
+    courseProductRelationId: courseProductRelation.id,
+  };
+  const courseRoute = organizationId
+    ? getRoutePath(TeacherDashboardPaths.ORGANIZATION_PRODUCT, {
+        ...courseRouteParams,
+        organizationId,
+      })
+    : getRoutePath(TeacherDashboardPaths.COURSE_PRODUCT, courseRouteParams);
+  return {
+    id: courseProductRelation.id,
+    code: courseProductRelation.course.code,
+    title: courseProductRelation.product.title,
+    cover_image: courseProductRelation.course.cover
+      ? {
+          src: courseProductRelation.course.cover.src,
+        }
+      : null,
+    organization: {
+      title: courseProductRelation.organizations[0].title,
+      image: courseProductRelation.organizations[0].logo || null,
+    },
+    product_id: courseProductRelation.product.id,
+    course_route: courseRoute,
+    state: courseProductRelation.product.state,
+  };
+};
+
+const getCourseGlimpsePropsFromRichieCourse = (course: RichieCourse): CourseGlimpseCourse => ({
+  id: course.id,
+  code: course.code,
+  course_url: course.absolute_url,
+  cover_image: course.cover_image,
+  title: course.title,
+  organization: {
+    title: course.organization_highlighted,
+    image: course.organization_highlighted_cover_image,
+  },
+  icon: course.icon,
+  state: course.state,
+  duration: course.duration,
+  effort: course.effort,
+  categories: course.categories,
+  organizations: course.organizations,
+});
+
+const getCourseGlimpsePropsFromJoanieCourse = (
+  course: JoanieCourse,
+  intl: IntlShape,
+  organizationId?: string,
+): CourseGlimpseCourse => {
+  const getRoutePath = getDashboardRoutePath(intl);
+  const courseRouteParams = {
+    courseId: course.id,
+  };
+  const courseRoute = organizationId
+    ? getRoutePath(TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION, {
+        ...courseRouteParams,
+        organizationId,
+      })
+    : getRoutePath(TeacherDashboardPaths.COURSE_GENERAL_INFORMATION, courseRouteParams);
+  return {
+    id: course.id,
+    code: course.code,
+    course_route: courseRoute,
+    cover_image: course.cover
+      ? {
+          src: course.cover.src,
+        }
+      : null,
+    title: course.title,
+    organization: {
+      title: course.organizations[0].title,
+      image: course.organizations[0].logo || null,
+    },
+    state: course.state,
+    nb_course_runs: course.course_run_ids.length,
+  };
+};
+
+export const getCourseGlimpseProps = (
+  course: RichieCourse | (JoanieCourse | CourseProductRelation),
+  intl?: IntlShape,
+  organizationId?: string,
+): CourseGlimpseCourse => {
+  if (isCourseProductRelation(course)) {
+    return getCourseGlimpsePropsFromCourseProductRelation(course, intl!, organizationId);
+  }
+
+  if (isRichieCourse(course)) {
+    return getCourseGlimpsePropsFromRichieCourse(course);
+  }
+
+  return getCourseGlimpsePropsFromJoanieCourse(course, intl!, organizationId);
+};