Authoring-mfe-progress-page-with-additional-fields.md

Replacement of progress page in Authoring MFE

Installation steps:

• Clone this gist to a directory in your system.
• Install it in the authoring MFE using npm install --no-save @openedx-plugins/course-app-progress@file:./path/to/this-repo

Testing steps:

• Try using the new setting in this page.
• They should be saved and persist across reloads.

messages.js

import { defineMessages } from '@edx/frontend-platform/i18n';

const messages = defineMessages({
  heading: {
    id: 'course-authoring.pages-resources.progress.heading',
    defaultMessage: 'Configure progress',
  },
  enableProgressLabel: {
    id: 'course-authoring.pages-resources.progress.enable-progress.label',
    defaultMessage: 'Progress',
  },
  enableProgressHelp: {
    id: 'course-authoring.pages-resources.progress.enable-progress.help',
    defaultMessage: `As students work through graded assignments, scores
        will appear under the progress tab. The progress tab contains a chart of
        all graded assignments in the course, with a list of all assignments and
        scores below.`,
  },
  enableProgressLink: {
    id: 'course-authoring.pages-resources.progress.enable-progress.link',
    defaultMessage: 'Learn more about progress',
  },
  enableGraphLabel: {
    id: 'course-authoring.pages-resources.progress.enable-graph.label',
    defaultMessage: 'Enable progress graph',
  },
  enableGraphHelp: {
    id: 'course-authoring.pages-resources.progress.enable-graph.help',
    defaultMessage: 'If enabled, students can view the progress graph',
  },
  showGradesLabel: {
    id: 'course-authoring.pages-resources.progress.show-grades.label',
    defaultMessage: 'Show grades',
  },
  showGradesHelp: {
    id: 'course-authoring.pages-resources.progress.show-grades.help',
    defaultMessage: 'If enabled, students can see their grades on the progress page.',
  },
  showGradeSummaryLabel: {
    id: 'course-authoring.pages-resources.progress.show-grade-summary.label',
    defaultMessage: 'Show grades Summary',
  },
  showGradeSummaryHelp: {
    id: 'course-authoring.pages-resources.progress.show-grade-summary.help',
    defaultMessage: 'If enabled, students can see a summary of their grades on the progress page.',
  },
  showRelatedLinksLabel: {
    id: 'course-authoring.pages-resources.progress.show-related-links.label',
    defaultMessage: 'Show Related Links',
  },
  showRelatedLinksHelp: {
    id: 'course-authoring.pages-resources.progress.show-related-links.help',
    defaultMessage: 'If enabled, students can see related links in the sidebar on the progress page.',
  },
});

export default messages;

package.json

{
    "name": "@openedx-plugins/course-app-progress",
    "version": "0.1.0",
    "description": "Progress configuration for courses using it",
    "peerDependencies": {
        "@edx/frontend-app-course-authoring": "*",
        "@edx/frontend-platform": "*",
        "@openedx/paragon": "*",
        "prop-types": "*",
        "react": "*",
        "yup": "*"
    },
    "peerDependenciesMeta": {
        "@edx/frontend-app-course-authoring": {
            "optional": true
        }
    }
}

Settings.jsx

import { getConfig } from '@edx/frontend-platform';
import { useIntl } from '@edx/frontend-platform/i18n';
import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
import { useAppSetting } from 'CourseAuthoring/utils';
import PropTypes from 'prop-types';
import React from 'react';
import * as Yup from 'yup';
import messages from './messages';

const ProgressSettings = ({ onClose }) => {
  const intl = useIntl();
  const [disableProgressGraph, saveSetting] = useAppSetting('disableProgressGraph');
  const [otherCourseSettings, saveOtherCourseSettings] = useAppSetting('otherCourseSettings');
  const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toString().toLowerCase() === 'true';

  const handleSettingsSave = async (values) => {
    if (showProgressGraphSetting) {
      await saveSetting(!values.enableProgressGraph);
    }
    const updatedOtherCourseSettings = {
      ...otherCourseSettings,
      progressPage: {
        showGrades: values.showGrades,
        showGradeSummary: values.showGradeSummary,
        showRelatedLinks: values.showRelatedLinks,
      },
    };
    await saveOtherCourseSettings(updatedOtherCourseSettings);
  };

  return (
    <AppSettingsModal
      appId="progress"
      title={intl.formatMessage(messages.heading)}
      enableAppHelp={intl.formatMessage(messages.enableProgressHelp)}
      enableAppLabel={intl.formatMessage(messages.enableProgressLabel)}
      learnMoreText={intl.formatMessage(messages.enableProgressLink)}
      onClose={onClose}
      initialValues={{
        enableProgressGraph: !disableProgressGraph,
        showGrades: !!otherCourseSettings?.progressPage?.showGrades,
        showGradeSummary: !!otherCourseSettings?.progressPage?.showGradeSummary,
        showRelatedLinks: !!otherCourseSettings?.progressPage?.showRelatedLinks,
      }}
      validationSchema={{
        enableProgressGraph: Yup.boolean(),
        showGrades: Yup.boolean(),
        showGradeSummary: Yup.boolean(),
        showRelatedLinks: Yup.boolean(),
      }}
      onSettingsSave={handleSettingsSave}
    >
      {
        ({ handleChange, handleBlur, values }) => (
          <>
            {showProgressGraphSetting && (
              <FormSwitchGroup
                id="enable-progress-graph"
                name="enableProgressGraph"
                label={intl.formatMessage(messages.enableGraphLabel)}
                helpText={intl.formatMessage(messages.enableGraphHelp)}
                onChange={handleChange}
                onBlur={handleBlur}
                checked={values.enableProgressGraph}
              />
            )}
            <FormSwitchGroup
              id="show-grades"
              name="showGrades"
              label={intl.formatMessage(messages.showGradesLabel)}
              helpText={intl.formatMessage(messages.showGradesHelp)}
              onChange={handleChange}
              onBlur={handleBlur}
              checked={values.showGrades}
            />
            <FormSwitchGroup
              id="show-grade-summary"
              name="showGradeSummary"
              label={intl.formatMessage(messages.showGradeSummaryLabel)}
              helpText={intl.formatMessage(messages.showGradeSummaryHelp)}
              onChange={handleChange}
              onBlur={handleBlur}
              checked={values.showGradeSummary}
            />
            <FormSwitchGroup
              id="show-related-links"
              name="showRelatedLinks"
              label={intl.formatMessage(messages.showRelatedLinksLabel)}
              helpText={intl.formatMessage(messages.showRelatedLinksHelp)}
              onChange={handleChange}
              onBlur={handleBlur}
              checked={values.showRelatedLinks}
            />
          </>
        )
      }
    </AppSettingsModal>
  );
};

ProgressSettings.propTypes = {
  onClose: PropTypes.func.isRequired,
};

export default ProgressSettings;