frontend-plugin-aspects

Purpose

This is a collection of components meant to integrate Apects into the platform UI. They are presently used in on the sidebar slots of the Authoring MFE.

Getting Started

Configuration

The components are added to the Authoring MFE when tutor-contrib-aspects is used in a Tutor deployment.

Development Setup

1. Install tutor-contrib-aspects and rebuild the edx-platform image

pip install tutor-contrib-aspects
tutor plugin enable aspects
tutor config save --set ASPECTS_ENABLE_STUDIO_IN_CONTEXT_METRICS=True
tutor images build openedx --no-cache
tutor images build aspects aspects-superset

2. Clone frontend-app-authoring

git clone https://github.com/openedx/frontend-app-authoring.git

3. Clone this repo inside frontend-app-authoring and install it

cd frontend-app-authoring
git clone https://github.com/openedx/frontend-plugin-aspects.git
npm install ./frontend-plugin-aspects

4. Create/Update the env.config.jsx file inside frontend-app-authoring with the slot definitions

import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from "@openedx/frontend-plugin-framework";
import {
  SidebarToggleWrapper,
  CourseHeaderButton,
  UnitActionsButton,
  AspectsSidebarProvider,
  CourseOutlineSidebar,
  UnitPageSidebar,
  SubSectionAnalyticsButton,
} from "@openedx/frontend-plugin-aspects";

const config = {
  ...process.env,
  pluginSlots: {
    "org.openedx.frontend.authoring.course_outline_sidebar.v1": {
      keepDefault: true,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: "outline-sidebar",
            priority: 1,
            type: DIRECT_PLUGIN,
            RenderWidget: CourseOutlineSidebar,
          },
        },
        {
          op: PLUGIN_OPERATIONS.Wrap,
          widgetId: "default_contents",
          wrapper: SidebarToggleWrapper,
        },
      ],
    },
    "org.openedx.frontend.authoring.course_unit_sidebar.v2": {
      keepDefault: true,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: "course-unit-sidebar",
            priority: 1,
            type: DIRECT_PLUGIN,
            RenderWidget: UnitPageSidebar,
          },
        },
        {
          op: PLUGIN_OPERATIONS.Wrap,
          widgetId: "default_contents",
          wrapper: SidebarToggleWrapper,
        },
      ],
    },
    "org.openedx.frontend.authoring.course_outline_header_actions.v1": {
      keepDefault: true,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: "outline-analytics",
            type: DIRECT_PLUGIN,
            priority: 51,
            RenderWidget: CourseHeaderButton,
          },
        },
      ],
    },
    "org.openedx.frontend.authoring.course_unit_header_actions.v1": {
      keepDefault: true,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: "unit-analytics",
            type: DIRECT_PLUGIN,
            priority: 51,
            RenderWidget: CourseHeaderButton,
          },
        },
      ],
    },
    "org.openedx.frontend.authoring.course_outline_unit_card_extra_actions.v1":
      {
        keepDefault: true,
        plugins: [
          {
            op: PLUGIN_OPERATIONS.Insert,
            widget: {
              id: "uni-card-my-extra-action",
              type: DIRECT_PLUGIN,
              priority: 51,
              RenderWidget: UnitActionsButton,
            },
          },
        ],
      },
    "org.openedx.frontend.authoring.course_outline_subsection_card_extra_actions.v1":
      {
        keepDefault: true,
        plugins: [
          {
            op: PLUGIN_OPERATIONS.Insert,
            widget: {
              id: "sub-card-my-extra-action",
              type: DIRECT_PLUGIN,
              priority: 51,
              RenderWidget: SubSectionAnalyticsButton,
            },
          },
        ],
      },
  },
};

export default config;

5. Add Authoring MFE source as a tutor mount and rebuild the MFE images

tutor mounts add /path/to/frontend-app-authoring
tutor images build mfe --no-cache

6. Start the services using turor dev launch, which should setup everything have the services running.
7. Edit the code in frontend-plugin-aspects to make changes and then run npm run build to update the MFE.

Note

As npm run build needs to be run before changes are reflected in the UI, it is recommended to use a file watcher like nodemon to automate this.

For example: nodemon --watch src --exec "npm run build"

Known Issues

N/A

Development Roadmap

N/A

Getting Help

If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.

Our real-time conversations are on Slack. You can request a Slack invitation, then join our community Slack workspace. Because this is a frontend repository, the best place to discuss it would be in the #wg-frontend channel.

For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.

https://github.com/openedx/frontend-app-[PLACEHOLDER]/issues

For more information about these options, see the Getting Help page.

License

The code in this repository is licensed under the AGPLv3 unless otherwise noted.

Please see LICENSE for details.

Contributing

Contributions are very welcome. Please read How To Contribute for details.

This project is currently accepting all types of contributions, bug fixes, security fixes, maintenance work, or new features. However, please make sure to have a discussion about your new feature idea with the maintainers prior to beginning development to maximize the chances of your change being accepted. You can start a conversation by creating a new issue on this repo summarizing your idea.

The Open edX Code of Conduct

All community members are expected to follow the Open edX Code of Conduct.

People

The assigned maintainers for this component and other project details may be found in Backstage. Backstage pulls this data from the catalog-info.yaml file in this repo.

Reporting Security Issues

Please do not report security issues in public. Email [email protected] instead.