feat: add open responses card to page and resources

src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx

@@ -118,6 +118,7 @@ const AppSettingsModal = ({
   enableAppHelp,
   learnMoreText,
   enableReinitialize,
+  hideAppToggle,
 }) => {
   const { courseId } = useContext(PagesAndResourcesContext);
   const loadingStatus = useSelector(getLoadingStatus);
@@ -217,29 +218,31 @@ const AppSettingsModal = ({
                   {formikProps.errors.enabled?.message || intl.formatMessage(messages.errorSavingMessage)}
                 </Alert>
               )}
-              <FormSwitchGroup
-                id={`enable-${appId}-toggle`}
-                name="enabled"
-                onChange={(event) => formikProps.handleChange(event)}
-                onBlur={formikProps.handleBlur}
-                checked={formikProps.values.enabled}
-                label={(
-                  <div className="d-flex align-items-center">
-                    {enableAppLabel}
-                    {formikProps.values.enabled && (
-                      <Badge className="ml-2" variant="success" data-testid="enable-badge">
-                        {intl.formatMessage(messages.enabled)}
-                      </Badge>
-                    )}
-                  </div>
-                )}
-                helpText={(
-                  <div>
-                    <p>{enableAppHelp}</p>
-                    <span className="py-3">{learnMoreLink}</span>
-                  </div>
-                )}
-              />
+              {!hideAppToggle && (
+                <FormSwitchGroup
+                  id={`enable-${appId}-toggle`}
+                  name="enabled"
+                  onChange={(event) => formikProps.handleChange(event)}
+                  onBlur={formikProps.handleBlur}
+                  checked={formikProps.values.enabled}
+                  label={(
+                    <div className="d-flex align-items-center">
+                      {enableAppLabel}
+                      {formikProps.values.enabled && (
+                        <Badge className="ml-2" variant="success" data-testid="enable-badge">
+                          {intl.formatMessage(messages.enabled)}
+                        </Badge>
+                      )}
+                    </div>
+                  )}
+                  helpText={(
+                    <div>
+                      <p>{enableAppHelp}</p>
+                      <span className="py-3">{learnMoreLink}</span>
+                    </div>
+                  )}
+                />
+              )}
               {(formikProps.values.enabled || configureBeforeEnable) && children
                 && <AppConfigFormDivider marginAdj={{ default: 0, sm: 0 }} />}
               <AppSettingsForm formikProps={formikProps} showForm={formikProps.values.enabled || configureBeforeEnable}>
@@ -283,6 +286,7 @@ AppSettingsModal.propTypes = {
   learnMoreText: PropTypes.string.isRequired,
   configureBeforeEnable: PropTypes.bool,
   enableReinitialize: PropTypes.bool,
+  hideAppToggle: PropTypes.bool,
 };
 
 AppSettingsModal.defaultProps = {
@@ -292,6 +296,7 @@ AppSettingsModal.defaultProps = {
   validationSchema: {},
   configureBeforeEnable: false,
   enableReinitialize: false,
+  hideAppToggle: false,
 };
 
 export default injectIntl(AppSettingsModal);

src/pages-and-resources/data/thunks.js

@@ -24,6 +24,7 @@ const COURSE_APPS_ORDER = [
   'live',
   'textbooks',
   'custom_pages',
+  'ora_settings',
 ];
 
 /* eslint-disable import/prefer-default-export */

src/pages-and-resources/ora_settings/Settings.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { Hyperlink } from '@edx/paragon';
+import { useModel } from '../../generic/model-store';
+
+import FormSwitchGroup from '../../generic/FormSwitchGroup';
+import { useAppSetting } from '../../utils';
+import AppSettingsModal from '../app-settings-modal/AppSettingsModal';
+import messages from './messages';
+
+const ORASettings = ({ intl, onClose }) => {
+  const appId = 'ora_settings';
+  const appInfo = useModel('courseApps', appId);
+  const [enableFlexiblePeerGrade, saveSetting] = useAppSetting(
+    'forceOnFlexiblePeerOpenassessments',
+  );
+  const handleSettingsSave = (values) => saveSetting(values.enableFlexiblePeerGrade);
+
+  const title = (
+    <div>
+      <p>{intl.formatMessage(messages.heading)}</p>
+      <div className="pt-3">
+        <Hyperlink
+          className="text-primary-500 small"
+          destination={appInfo.documentationLinks?.learnMoreConfiguration}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          {intl.formatMessage(messages.ORASettingsHelpLink)}
+        </Hyperlink>
+      </div>
+    </div>
+  );
+
+  return (
+    <AppSettingsModal
+      appId={appId}
+      title={title}
+      onClose={onClose}
+      initialValues={{ enableFlexiblePeerGrade }}
+      validationSchema={{ enableFlexiblePeerGrade: Yup.boolean() }}
+      onSettingsSave={handleSettingsSave}
+      hideAppToggle
+    >
+      {({ values, handleChange, handleBlur }) => (
+        <FormSwitchGroup
+          id="enable-flexible-peer-grade"
+          name="enableFlexiblePeerGrade"
+          label={intl.formatMessage(messages.enableFlexPeerGradeLabel)}
+          helpText={intl.formatMessage(messages.enableFlexPeerGradeHelp)}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          checked={values.enableFlexiblePeerGrade}
+        />
+      )}
+    </AppSettingsModal>
+  );
+};
+
+ORASettings.propTypes = {
+  intl: intlShape.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default injectIntl(ORASettings);

src/pages-and-resources/ora_settings/Settings.test.jsx

@@ -0,0 +1,33 @@
+import { shallow } from 'enzyme';
+import ORASettings from './Settings';
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'), // use actual for all non-hook parts
+  injectIntl: (component) => component,
+  intlShape: {},
+}));
+jest.mock('yup', () => ({
+  boolean: jest.fn().mockReturnValue('Yub.boolean'),
+}));
+jest.mock('../../generic/model-store', () => ({
+  useModel: jest.fn().mockReturnValue({ documentationLinks: { learnMoreConfiguration: 'https://learnmore.test' } }),
+}));
+jest.mock('../../generic/FormSwitchGroup', () => 'FormSwitchGroup');
+jest.mock('../../utils', () => ({
+  useAppSetting: jest.fn().mockReturnValue(['abitrary value', jest.fn().mockName('saveSetting')]),
+}));
+jest.mock('../app-settings-modal/AppSettingsModal', () => 'AppSettingsModal');
+
+const props = {
+  onClose: jest.fn().mockName('onClose'),
+  intl: {
+    formatMessage: (message) => message.defaultMessage,
+  },
+};
+
+describe('ORASettings', () => {
+  it('should render', () => {
+    const wrapper = shallow(<ORASettings {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/pages-and-resources/ora_settings/__snapshots__/Settings.test.jsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ORASettings should render 1`] = `
+<AppSettingsModal
+  appId="ora_settings"
+  hideAppToggle={true}
+  initialValues={
+    Object {
+      "enableFlexiblePeerGrade": "abitrary value",
+    }
+  }
+  onClose={[MockFunction onClose]}
+  onSettingsSave={[Function]}
+  title={
+    <div>
+      <p>
+        Configure open response assessment
+      </p>
+      <div
+        className="pt-3"
+      >
+        <withDeprecatedProps(Hyperlink)
+          className="text-primary-500 small"
+          destination="https://learnmore.test"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          Learn more about open response assessment settings
+        </withDeprecatedProps(Hyperlink)>
+      </div>
+    </div>
+  }
+  validationSchema={
+    Object {
+      "enableFlexiblePeerGrade": "Yub.boolean",
+    }
+  }
+>
+  <Component />
+</AppSettingsModal>
+`;

src/pages-and-resources/ora_settings/messages.js

@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.ora.heading',
+    defaultMessage: 'Configure open response assessment',
+  },
+  ORASettingsHelpLink: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.link',
+    defaultMessage: 'Learn more about open response assessment settings',
+  },
+  enableFlexPeerGradeLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.label',
+    defaultMessage: 'Flex Peer Grading',
+  },
+  enableFlexPeerGradeHelp: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.help',
+    defaultMessage: 'Turn on Flexible Peer Grading for all open response assessments in the course with peer grading.',
+  },
+});
+
+export default messages;