feat: Add support for toggling more parts of the progress page on or …

…off.
open-craft · Oct 8, 2024 · 373955f · 373955f
1 parent 0d38279
commit 373955f
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 22 deletions.
diff --git a/src/pages-and-resources/progress/Settings.jsx b/src/pages-and-resources/progress/Settings.jsx
@@ -1,19 +1,32 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import React from 'react';
 import * as Yup from 'yup';
-import { getConfig } from '@edx/frontend-platform';
+import messages from './messages';
 import FormSwitchGroup from '../../generic/FormSwitchGroup';
 import { useAppSetting } from '../../utils';
 import AppSettingsModal from '../app-settings-modal/AppSettingsModal';
-import messages from './messages';
 
-const ProgressSettings = ({ intl, onClose }) => {
+const ProgressSettings = ({ onClose }) => {
+  const intl = useIntl();
   const [disableProgressGraph, saveSetting] = useAppSetting('disableProgressGraph');
-  const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toLowerCase() === 'true';
+  const [otherCourseSettings, saveOtherCourseSettings] = useAppSetting('otherCourseSettings');
+  const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toString().toLowerCase() === 'true';
 
-  const handleSettingsSave = (values) => {
-    if (showProgressGraphSetting) { saveSetting(!values.enableProgressGraph); }
+  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 (
@@ -24,32 +37,70 @@ const ProgressSettings = ({ intl, onClose }) => {
       enableAppLabel={intl.formatMessage(messages.enableProgressLabel)}
       learnMoreText={intl.formatMessage(messages.enableProgressLink)}
       onClose={onClose}
-      initialValues={{ enableProgressGraph: !disableProgressGraph }}
-      validationSchema={{ enableProgressGraph: Yup.boolean() }}
+      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}
-          />
-          )
+          <>
+            {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 = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(ProgressSettings);
+export default ProgressSettings;
diff --git a/src/pages-and-resources/progress/messages.js b/src/pages-and-resources/progress/messages.js
@@ -28,6 +28,30 @@ const messages = defineMessages({
     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;