@openedx/frontend-app-learner-dashboard 1.0.0-alpha.0

package/src/setupTest.jsx

@@ -0,0 +1,251 @@
+import '@testing-library/jest-dom';
+
+import siteConfig from 'site.config';
+import { addAppConfigs, configureAnalytics, configureAuth, configureLogging, getSiteConfig, mergeSiteConfig, MockAnalyticsService, MockAuthService, MockLoggingService } from '@openedx/frontend-base';
+
+mergeSiteConfig(siteConfig);
+addAppConfigs();
+
+export function initializeMockServices() {
+  const loggingService = configureLogging(MockLoggingService, {
+    config: getSiteConfig(),
+  });
+
+  const authService = configureAuth(MockAuthService, {
+    config: getSiteConfig(),
+    loggingService,
+  });
+
+  const analyticsService = configureAnalytics(MockAnalyticsService, {
+    config: getSiteConfig(),
+    httpClient: authService.getAuthenticatedHttpClient(),
+    loggingService,
+  });
+
+  return { analyticsService, authService, loggingService };
+}
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn((val) => ({ current: val, useRef: true })),
+  useCallback: jest.fn((cb, prereqs) => ({ useCallback: { cb, prereqs } })),
+  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
+  useMemo: jest.fn((cb, prereqs) => cb(prereqs)),
+  useContext: jest.fn(context => context),
+  useState: jest.fn(),
+}));
+
+jest.mock('reselect', () => ({
+  createSelector: jest.fn((preSelectors, cb) => ({ preSelectors, cb })),
+}));
+
+// Mock react-redux hooks
+// unmock for integration tests
+jest.mock('react-redux', () => {
+  const dispatch = jest.fn((...args) => ({ dispatch: args })).mockName('react-redux.dispatch');
+  return {
+    connect: (mapStateToProps, mapDispatchToProps) => (component) => ({
+      mapStateToProps,
+      mapDispatchToProps,
+      component,
+    }),
+    useDispatch: jest.fn(() => dispatch),
+    useSelector: jest.fn((selector) => ({ useSelector: selector })),
+  };
+});
+
+jest.mock('moment', () => ({
+  __esModule: true,
+  default: (date) => ({
+    toDate: jest.fn().mockReturnValue(date),
+  }),
+}));
+
+jest.mock('@openedx/frontend-base', () => {
+  const PropTypes = jest.requireActual('prop-types');
+  const { formatMessage } = jest.requireActual('./testUtils');
+  const formatDate = jest.fn(date => new Date(date).toLocaleDateString()).mockName('useIntl.formatDate');
+
+  return {
+    ...jest.requireActual('@openedx/frontend-base'),
+    // React components
+    ErrorPage: () => 'ErrorPage',
+
+    // i18n functionality
+    intlShape: PropTypes.shape({
+      formatMessage: PropTypes.func,
+    }),
+    useIntl: () => ({
+      formatMessage,
+      formatDate,
+    }),
+    defineMessages: m => m,
+    FormattedMessage: () => 'FormattedMessage',
+  };
+});
+
+jest.mock('@openedx/paragon', () => jest.requireActual('testUtils').mockNestedComponents({
+  Alert: {
+    Heading: 'Alert.Heading',
+  },
+  AlertModal: 'AlertModal',
+  MarketingModal: 'MarketingModal',
+  ActionRow: 'ActionRow',
+  Badge: 'Badge',
+  Button: 'Button',
+  Card: {
+    Body: 'Card.Body',
+    Footer: 'Card.Footer',
+    Header: 'Card.Header',
+    ImageCap: 'Card.ImageCap',
+    Section: 'Card.Section',
+  },
+  CardGrid: 'CardGrid',
+  Chip: 'Chip',
+  Col: 'Col',
+  Collapsible: {
+    Advanced: 'Collapsible.Advanced',
+    Body: 'Collapsible.Body',
+    Trigger: 'Collapsible.Trigger',
+    Visible: 'Collapsible.Visible',
+  },
+  Container: 'Container',
+  DataTable: {
+    EmptyTable: 'DataTable.EmptyTable',
+    Table: 'DataTable.Table',
+    TableControlBar: 'DataTable.TableControlBar',
+    TableController: 'DataTable.TableController',
+    TableFooter: 'DataTable.TableFooter',
+  },
+  Dropdown: {
+    Item: 'Dropdown.Item',
+    Menu: 'Dropdown.Menu',
+    Toggle: 'Dropdown.Toggle',
+    Header: 'Dropdown.Header',
+    Divider: 'Dropdown.Divider',
+  },
+  Form: {
+    Checkbox: 'Form.Checkbox',
+    CheckboxSet: 'Form.CheckboxSet',
+    Control: {
+      Feedback: 'Form.Control.Feedback',
+    },
+    Group: 'Form.Group',
+    Label: 'Form.Label',
+    Radio: 'Form.Radio',
+    RadioSet: 'Form.RadioSet',
+    Switch: 'Form.Switch',
+  },
+  FormControl: 'FormControl',
+  FormControlFeedback: 'FormControlFeedback',
+  FormGroup: 'FormGroup',
+  FormLabel: 'FormLabel',
+  FullscreenModal: 'FullscreenModal',
+  Hyperlink: 'Hyperlink',
+  Icon: 'Icon',
+  IconButton: 'IconButton',
+  Image: 'Image',
+  MailtoLink: 'MailtoLink',
+  ModalDialog: {
+    Header: 'ModalDialog.Header',
+    Body: 'ModalDialog.Body',
+    Hero: 'ModalDialog.Hero',
+  },
+  ModalPopup: 'ModalPopup',
+  ModalCloseButton: 'ModalCloseButton',
+  MultiSelectDropdownFilter: 'MultiSelectDropdownFilter',
+  OverlayTrigger: 'OverlayTrigger',
+  Popover: {
+    Content: 'Popover.Content',
+  },
+  Row: 'Row',
+  Sheet: 'Sheet',
+  StatefulButton: 'StatefulButton',
+  TextFilter: 'TextFilter',
+  Truncate: 'Truncate',
+  Skeleton: 'Skeleton',
+  Spinner: 'Spinner',
+  PageBanner: 'PageBanner',
+  Pagination: 'Pagination',
+
+  useWindowSize: () => jest.fn(),
+  useToggle: () => jest.fn().mockImplementation((val) => [
+    val,
+    jest.fn().mockName('useToggle.setTrue'),
+    jest.fn().mockName('useToggle.setFalse'),
+  ]),
+  useCheckboxSetValues: () => jest.fn().mockImplementation((values) => ([values, {
+    add: jest.fn().mockName('useCheckboxSetValues.add'),
+    remove: jest.fn().mockName('useCheckboxSetValues.remove'),
+  }])),
+  breakpoints: () => ({
+    extraSmall: {
+      minWidth: 0,
+      maxWidth: 575,
+    },
+    small: {
+      minWidth: 576,
+      maxWidth: 767,
+    },
+    medium: {
+      minWidth: 768,
+      maxWidth: 991,
+    },
+    large: {
+      minWidth: 992,
+      maxWidth: 1199,
+    },
+    extraLarge: {
+      minWidth: 1200,
+      maxWidth: 100000,
+    },
+  }),
+}));
+
+jest.mock('@fortawesome/react-fontawesome', () => ({
+  FontAwesomeIcon: 'FontAwesomeIcon',
+}));
+jest.mock('@fortawesome/free-solid-svg-icons', () => ({
+  faUserCircle: jest.fn().mockName('fa-user-circle-icon'),
+}));
+
+jest.mock('@openedx/paragon/icons', () => ({
+  ArrowBack: jest.fn().mockName('icons.ArrowBack'),
+  ArrowDropDown: jest.fn().mockName('icons.ArrowDropDown'),
+  ArrowDropUp: jest.fn().mockName('icons.ArrowDropUp'),
+  Book: jest.fn().mockName('icons.Book'),
+  Cancel: jest.fn().mockName('icons.Cancel'),
+  Close: jest.fn().mockName('icons.Close'),
+  CheckCircle: jest.fn().mockName('icons.CheckCircle'),
+  ChevronLeft: jest.fn().mockName('icons.ChevronLeft'),
+  ChevronRight: jest.fn().mockName('icons.ChevronRight'),
+  Highlight: jest.fn().mockName('icons.Highlight'),
+  Info: jest.fn().mockName('icons.Info'),
+  InfoOutline: jest.fn().mockName('icons.InfoOutline'),
+  Launch: jest.fn().mockName('icons.Launch'),
+  Locked: jest.fn().mockName('icons.Locked'),
+  MoreVert: jest.fn().mockName('icons.MoreVert'),
+  Tune: jest.fn().mockName('icons.Tune'),
+  PersonSearch: jest.fn().mockName('icons.PersonSearch'),
+  Program: jest.fn().mockName('icons.Program'),
+  Search: jest.fn().mockName('icons.Search'),
+}));
+
+jest.mock('data/constants/app', () => ({
+  ...jest.requireActual('data/constants/app'),
+  locationId: 'fake-location-id',
+}));
+
+jest.mock('utils', () => ({
+  ...jest.requireActual('utils'),
+  nullMethod: jest.fn().mockName('utils.nullMethod'),
+}));
+
+jest.mock('utils/hooks', () => {
+  const formatDate = jest.fn(date => new Date(date).toLocaleDateString())
+    .mockName('utils.formatDate');
+  return {
+    formatDate,
+    useFormatDate: () => formatDate,
+  };
+});

package/src/slots/CourseBannerSlot/README.md

@@ -0,0 +1,44 @@
+# Course Banner Slot
+
+### Slot ID: `org.openedx.frontend.slot.learnerDashboard.courseCardBanner.v1`
+
+### Slot Props
+
+* `cardId`
+
+## Description
+
+This slot is used for replacing or adding content for the `CourseBanner` component. This banner is rendered as a child of the `CourseCard`.
+
+The default CourseBanner looks like this when audit access has expired for the course:
+![Screenshot of the default CourseBanner when audit access has expired](./images/course_banner_slot_default.png)
+
+## Example
+
+The following configuration will render a custom implementation of a CourseBanner under every `CourseCard`.
+
+![Screenshot of custom banner added under CourseCard](./images/course_banner_slot_default.png)
+
+```js
+import { WidgetOperationTypes } from '@openedx/frontend-base';
+import { Alert } from '@openedx/paragon';
+
+const myComponent = ({ cardId }) => (
+  <Alert variant="info" className="mb-0">
+    Course banner for course with {cardId}
+  </Alert>
+)
+
+const config = {
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.learnerDashboard.courseCardBanner.v1',
+      id: 'my.widget',
+      op: WidgetOperationTypes.REPLACE,
+      component: myComponent
+    },
+  ]
+}
+
+export default config;
+```

package/src/slots/CourseBannerSlot/index.jsx

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import { Slot } from '@openedx/frontend-base';
+import CourseBanner from '../../containers/CourseCard/components/CourseCardBanners/CourseBanner';
+
+const CourseBannerSlot = ({ cardId }) => (
+  <Slot
+    id="org.openedx.frontend.slot.learnerDashboard.courseCardBanner.v1"
+    cardId={cardId}
+  >
+    <CourseBanner cardId={cardId} />
+  </Slot>
+);
+
+CourseBannerSlot.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseBannerSlot;

package/src/slots/CourseCardActionSlot/README.md

@@ -0,0 +1,53 @@
+# Course Card Action Slot
+
+### Slot ID: `org.openedx.frontend.slot.learnerDashboard.courseCardAction.v1`
+
+### Slot Props
+
+* `cardId`
+
+## Description
+
+This slot is used for adding content in the Action buttons section of each Course Card.
+
+## Example
+
+The following configuration will render the `cardId` of the course as `<p>` elements in a `<div>`.
+
+![Screenshot of Content added after the Sequence Container](./images/post_course_card_action.png)
+
+```js
+import { WidgetOperationTypes } from '@openedx/frontend-base';
+import ActionButton from 'containers/CourseCard/components/CourseCardActions/ActionButton';
+
+const myComponent = ({ cardId }) => (
+  <ActionButton variant="outline-primary">
+    📚: {cardId}
+  </ActionButton>
+)
+
+const mySlotId = 'org.openedx.frontend.slot.learnerDashboard.courseCardAction.v1';
+
+const config = {
+  slots: [
+    {
+      slotId: mySlotId,
+      id: 'my.first.widget',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <ActionButton variant="outline-primary">
+          Custom Button
+        </ActionButton>
+      )
+    },
+    {
+      slotId: mySlotId,
+      id: 'my.second.widget',
+      op: WidgetOperationTypes.APPEND,
+      component: myComponent
+    },
+  ]
+}
+
+export default config;
+```

package/src/slots/CourseCardActionSlot/index.jsx

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import { Slot } from '@openedx/frontend-base';
+
+const CourseCardActionSlot = ({ cardId }) => (
+  <Slot
+    id="org.openedx.frontend.slot.learnerDashboard.courseCardAction.v1"
+    cardId={cardId}
+  />
+);
+
+CourseCardActionSlot.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseCardActionSlot;

package/src/slots/CourseListSlot/README.md

@@ -0,0 +1,54 @@
+# Course List Slot
+
+### Slot ID: `org.openedx.frontend.slot.learnerDashboard.courseList.v1`
+
+### Slot Props
+
+* `courseListData`
+
+## Description
+
+This slot is used for replacing or adding content around the `CourseList` component. The `CourseListSlot` is only rendered if the learner has enrolled in at least one course.
+
+## Example
+
+The space will show the `CourseList` component by default.
+
+![Screenshot of the CourseListSlot](./images/course_list_slot.png)
+
+Using the following configuration will replace the slot's default content with a list of course titles.
+
+![Screenshot of a custom course list](./images/readme_custom_course_list.png)
+
+```js
+import { WidgetOperationTypes } from '@openedx/frontend-base';
+
+const myComponent = ({ courseListData }) => {
+  // Extract the "visibleList"
+  const courses = courseListData.visibleList;
+
+  // Render a list of course names
+  return (
+    <div>
+      {courses.map(courseData => (
+        <p>
+          {courseData.course.courseName}
+        </p>
+      ))}
+    </div>
+  )
+}
+
+const config = {
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.learnerDashboard.courseList.v1',
+      id: 'my.widget',
+      op: WidgetOperationTypes.REPLACE,
+      component: myComponent
+    },
+  ]
+}
+
+export default config;
+```

package/src/slots/CourseListSlot/index.jsx

@@ -0,0 +1,17 @@
+import { Slot } from '@openedx/frontend-base';
+import { CourseList, courseListDataShape } from '../../containers/CoursesPanel/CourseList';
+
+export const CourseListSlot = ({ courseListData }) => (
+  <Slot
+    id="org.openedx.frontend.slot.learnerDashboard.courseList.v1"
+    courseListData={courseListData}
+  >
+    <CourseList courseListData={courseListData} />
+  </Slot>
+);
+
+CourseListSlot.propTypes = {
+  courseListData: courseListDataShape,
+};
+
+export default CourseListSlot;

package/src/slots/DashboardModalSlot/README.md

@@ -0,0 +1,30 @@
+# Dashboard Modal Slot
+
+### Slot ID: `org.openedx.frontend.slot.learnerDashboard.dashboardModal.v1`
+
+## Description
+
+This slot is used for the modal on a dashboard.  The following configuration will render it.
+
+## Example
+
+Learner dashboard will show modal
+![Screenshot of the dashboard modal](./images/dashboard_modal_slot.png)
+
+```js
+import { WidgetOperationTypes } from '@openedx/frontend-base';
+import { ModalDialog } from '@openedx/paragon';
+
+const config = {
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.learnerDashboard.dashboardModal.v1',
+      id: 'my.widget',
+      op: WidgetOperationTypes.Append,
+      element: (<ModalDialog title="Modal that appears on learner dashboard" />)
+    },
+  ]
+}
+
+export default config;
+```

package/src/slots/DashboardModalSlot/index.jsx

@@ -0,0 +1,7 @@
+import { Slot } from '@openedx/frontend-base';
+
+const DashboardModalSlot = () => (
+  <Slot id="org.openedx.frontend.slot.learnerDashboard.dashboardModal.v1" />
+);
+
+export default DashboardModalSlot;

package/src/slots/NoCoursesViewSlot/README.md

@@ -0,0 +1,34 @@
+# No Courses View Slot
+
+### Slot ID: `org.openedx.frontend.slot.learnerDashboard.noCoursesView.v1`
+
+## Description
+
+This slot is used for replacing or adding content around the `NoCoursesView` component. The `NoCoursesViewSlot` only renders if the learner has not yet enrolled in any courses.
+
+## Example
+
+The space will show the `NoCoursesView` by default.
+
+![Screenshot of the no courses view](./images/no_courses_view_slot.png)
+
+Setting configuration to the following will replace the default experience with a custom call-to-action component.
+
+![Screenshot of a custom no courses view](./images/readme_custom_no_courses_view.png)
+
+```js
+import { WidgetOperationTypes } from '@openedx/frontend-base';
+
+const config = {
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.learnerDashboard.noCoursesView.v1',
+      id: 'my.widget',
+      op: WidgetOperationTypes.APPEND,
+      element: (<h3>Check out our catalog of courses and start learning today!</h3>)
+    },
+  ]
+}
+
+export default config;
+```

package/src/slots/NoCoursesViewSlot/index.jsx

@@ -0,0 +1,11 @@
+import { Slot } from '@openedx/frontend-base';
+
+import NoCoursesView from '../../containers/CoursesPanel/NoCoursesView';
+
+export const NoCoursesViewSlot = () => (
+  <Slot id="org.openedx.frontend.slot.learnerDashboard.noCoursesView.v1">
+    <NoCoursesView />
+  </Slot>
+);
+
+export default NoCoursesViewSlot;

package/src/slots/README.md

@@ -0,0 +1,8 @@
+# `frontend-app-learner-dashboard` Slots
+
+* [`org.openedx.frontend.slot.learnerDashboard.courseCardBanner.v1`](./CourseBannerSlot/)
+* [`org.openedx.frontend.slot.learnerDashboard.courseCardAction.v1`](./CourseCardActionSlot/)
+* [`org.openedx.frontend.slot.learnerDashboard.courseList.v1`](./CourseListSlot/)
+* [`org.openedx.frontend.slot.learnerDashboard.dashboardModal.v1`](./DashboardModalSlot)
+* [`org.openedx.frontend.slot.learnerDashboard.noCoursesView.v1`](./NoCoursesViewSlot/)
+* [`org.openedx.frontend.slot.learnerDashboard.widgetSidebar.v1`](./WidgetSidebarSlot/)

package/src/slots/WidgetSidebarSlot/README.md

@@ -0,0 +1,51 @@
+# Widget Sidebar Slot
+
+### Slot ID: `org.openedx.frontend.slot.learnerDashboard.widgetSidebar.v1`
+
+## Description
+
+This slot is used for adding content to the right-hand sidebar.
+
+## Example
+
+The slot renders the "Looking for a Challenge" widget by default.
+
+![Screenshot of the widget sidebar](./images/widget_sidebar_slot.png)
+
+Setting configuration to the following will replace the default content with a custom sidebar component.
+
+![Screenshot of a custom call-to-action in the sidebar](./images/readme_custom_sidebar.png)
+
+```js
+import { WidgetOperationTypes } from '@openedx/frontend-base';
+
+const myComponent = () => (
+  <div>
+    <h3>
+      Sidebar Menu
+    </h3>
+    <p>
+      sidebar item #1
+    </p>
+    <p>
+      sidebar item #2
+    </p>
+    <p>
+      sidebar item #3
+    </p>
+  </div>
+)
+
+const config = {
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.learnerDashboard.widgetSidebar.v1',
+      id: 'my.widget',
+      op: WidgetOperationTypes.REPLACE,
+      component: myComponent
+    },
+  ]
+}
+
+export default config;
+```

package/src/slots/WidgetSidebarSlot/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WidgetSidebar snapshots 1`] = `
+<PluginSlot
+  id="org.openedx.frontend.learner_dashboard.widget_sidebar.v1"
+  idAliases={
+    [
+      "widget_sidebar_slot",
+    ]
+  }
+>
+  <LookingForChallengeWidget />
+</PluginSlot>
+`;

package/src/slots/WidgetSidebarSlot/index.jsx

@@ -0,0 +1,10 @@
+import { Slot } from '@openedx/frontend-base';
+import LookingForChallengeWidget from '../../widgets/LookingForChallengeWidget';
+
+export const WidgetSidebarSlot = () => (
+  <Slot id="org.openedx.frontend.slot.learnerDashboard.widgetSidebar.v1">
+    <LookingForChallengeWidget />
+  </Slot>
+);
+
+export default WidgetSidebarSlot;

package/src/slots/WidgetSidebarSlot/index.test.jsx

@@ -0,0 +1,18 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import WidgetSidebarSlot from '.';
+
+jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
+
+jest.mock('@openedx/frontend-plugin-framework', () => ({
+  PluginSlot: 'PluginSlot',
+}));
+
+describe('WidgetSidebar', () => {
+  beforeEach(() => jest.resetAllMocks());
+
+  test('snapshots', () => {
+    const wrapper = shallow(<WidgetSidebarSlot />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+});