feat: Merge pull request #52 from openedx/bw/fakeData

Bw/fake data

.eslintrc.js

@@ -1,17 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint', {
+const config =  createConfig('eslint', {
   rules: {
     'import/no-unresolved': 'off',
-    'import/no-named-as-default': 'off',
   },
-  overrides: [
-    {
-      files: ['*{h,H}ooks.js'],
-      rules: {
-        'react-hooks/rules-of-hooks': 'off',
-      },
-    },
-  ],
 });
+
+config.rules['react/function-component-definition'][1].unnamedComponents = 'arrow-function';
+module.exports = config;

jest.config.js

@@ -13,6 +13,7 @@ const config = createConfig('jest', {
 });
 
 config.moduleDirectories = ['node_modules', 'src'];
+
 // add axios to the list of modules to not transform
 config.transformIgnorePatterns = ['/node_modules/(?!@edx|axios)'];
 

package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
     "@edx/frontend-component-footer": "12.2.1",
-    "@edx/frontend-component-header": "4.6.1",
+    "@edx/frontend-component-header": "4.6.0",
     "@edx/frontend-platform": "5.4.0",
     "@edx/paragon": "^20.20.0",
     "@edx/react-unit-test-utils": "1.7.0",
@@ -51,7 +51,7 @@
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "^1.5.1",
     "classnames": "^2.3.2",
-    "core-js": "3.33.0",
+    "core-js": "3.32.2",
     "filesize": "^8.0.6",
     "jest-when": "^3.6.0",
     "pdfjs-dist": "^3.11.174",

src/App.jsx

@@ -12,42 +12,54 @@ import SelfAssessmentView from 'views/SelfAssessmentView';
 import StudentTrainingView from 'views/StudentTrainingView';
 import SubmissionView from 'views/SubmissionView';
 import XBlockView from 'views/XBlockView';
-import FilePreviewView from 'views/FilePreviewView';
+import PageDataProvider from 'components/PageDataProvider';
+
 import messages from './messages';
 import routes from './routes';
 
 const RouterRoot = () => {
   const { formatMessage } = useIntl();
   const appRoute = (route, Component) => (
-    <Route path={route} element={<AppContainer Component={Component} />} />
+    <Route
+      path={route}
+      element={(
+        <PageDataProvider>
+          <AppContainer Component={Component} />
+        </PageDataProvider>
+      )}
+    />
   );
   const modalRoute = (route, Component, title) => (
-    <Route path={route} element={<ModalContainer {...{ title, Component }} />} />
+    <Route
+      path={route}
+      element={(
+        <PageDataProvider>
+          <ModalContainer {...{ title, Component }} />
+        </PageDataProvider>
+      )}
+    />
   );
 
   const embeddedRoutes = [
-    <Route path={routes.embedded.xblock} element={<XBlockView />} />,
-    modalRoute(routes.embedded.peerAssessment, PeerAssessmentView, 'ORA Peer Assessment'),
-    modalRoute(routes.embedded.selfAssessment, SelfAssessmentView, 'ORA Self Assessment'),
-    modalRoute(routes.embedded.studentTraining, StudentTrainingView, 'ORA Student Training'),
-    modalRoute(routes.embedded.submission, SubmissionView, 'ORA Submission'),
-    modalRoute(routes.preview, FilePreviewView, 'File Preview'),
-    <Route path={routes.embedded.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
+    <Route path={routes.xblockEmbed} element={<XBlockView />} />,
+    modalRoute(routes.peerAssessmentEmbed, PeerAssessmentView, 'ORA Peer Assessment'),
+    modalRoute(routes.selfAssessmentEmbed, SelfAssessmentView, 'ORA Self Assessment'),
+    modalRoute(routes.studentTrainingEmbed, StudentTrainingView, 'ORA Student Training'),
+    modalRoute(routes.submissionEmbed, SubmissionView, 'ORA Submission'),
+    <Route path={routes.rootEmbed} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
   ];
   const baseRoutes = [
     appRoute(routes.xblock, PeerAssessmentView),
     appRoute(routes.peerAssessment, PeerAssessmentView),
     appRoute(routes.selfAssessment, SelfAssessmentView),
     appRoute(routes.studentTraining, StudentTrainingView),
     appRoute(routes.submission, SubmissionView),
-    appRoute(routes.preview, FilePreviewView),
     <Route path={routes.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
   ];
 
   const isConfigLoaded = useIsORAConfigLoaded();
-  const isPageLoaded = useIsPageDataLoaded();
 
-  if (!isConfigLoaded || !isPageLoaded) {
+  if (!isConfigLoaded) {
     return (
       <div className="h-screen d-flex justify-content-center align-items-center">
         <Spinner

src/components/Assessment/Assessment.scss

@@ -0,0 +1,83 @@
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
+.criteria-label {
+  width: 100%;
+  .criteria-title {
+    display: inline-block;
+    max-width: calc(100% - 44px);
+    color: $primary-500;
+    font-weight: bold;
+    vertical-align: top;
+  }
+  .esg-help-icon {
+    float: right;
+    margin-top: (map-get($spacers, 2) * -1);
+    margin-right: (map-get($spacers, 2\.5) * -1);
+    vertical-align: top;
+  }
+}
+.criteria-option {
+  width: 100%;
+  > div {
+    display: inline;
+    width: 100%;
+    .pgn__form-label {
+      display: inline-flex;
+    }
+    .pgn__form-control-description {
+      float: right;
+    }
+  }
+}
+
+.criterion-feedback {
+  margin-top: 1rem;
+}
+
+.popover.overlay-help-popover {
+  z-index: 4000;
+  margin-right: map-get($spacers, 1) !important;
+  .help-popover-option {
+    margin-bottom: map-get($spacers, 1);
+  }
+}
+
+
+.assessment-card {
+  width: 320px !important;
+  height: fit-content;
+  max-height: 100%;
+  margin-left: map-get($spacers, 3);
+  position: sticky !important;
+  top: map-get($spacers, 1) * -1;
+
+  .assessment-header {
+    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
+    display: flex;
+    justify-content: center;
+    padding: map-get($spacers, 3);
+  }
+
+  .assessment-body {
+    overflow-y: scroll;
+  }
+
+  .assessment-footer {
+    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
+    display: flex;
+    justify-content: center;
+    padding: map-get($spacers, 3);
+  }
+
+  button.pgn__stateful-btn.pgn__stateful-btn-state-pending {
+    opacity: .4 !important;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .assessment-card {
+    margin-left: 0 !important;
+  } 
+}

src/components/Assessment/EditableAssessment/OverallFeedback/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<OverallFeedback /> renders overall feedback is disabled 1`] = `
+<Form.Group>
+  <Form.Label
+    className="criteria-label"
+  >
+    <span
+      className="criteria-title"
+    >
+      Overall comments
+    </span>
+    <InfoPopover
+      onClick={[Function]}
+    >
+      <div>
+        props.overallFeedbackPrompt
+      </div>
+    </InfoPopover>
+  </Form.Label>
+  <Form.Control
+    as="textarea"
+    className="rubric-feedback feedback-input"
+    disabled={true}
+    floatingLabel="Comments (Optional)"
+    onChange={[MockFunction props.onChange]}
+    value=""
+  />
+</Form.Group>
+`;
+
+exports[`<OverallFeedback /> renders overall feedback is enabled 1`] = `
+<Form.Group>
+  <Form.Label
+    className="criteria-label"
+  >
+    <span
+      className="criteria-title"
+    >
+      Overall comments
+    </span>
+    <InfoPopover
+      onClick={[Function]}
+    >
+      <div>
+        props.overallFeedbackPrompt
+      </div>
+    </InfoPopover>
+  </Form.Label>
+  <Form.Control
+    as="textarea"
+    className="rubric-feedback feedback-input"
+    disabled={false}
+    floatingLabel="Add comments (Optional)"
+    onChange={[MockFunction props.onChange]}
+    value=""
+  />
+</Form.Group>
+`;
+
+exports[`<OverallFeedback /> renders overall feedback is invalid 1`] = `
+<Form.Group>
+  <Form.Label
+    className="criteria-label"
+  >
+    <span
+      className="criteria-title"
+    >
+      Overall comments
+    </span>
+    <InfoPopover
+      onClick={[Function]}
+    >
+      <div>
+        props.overallFeedbackPrompt
+      </div>
+    </InfoPopover>
+  </Form.Label>
+  <Form.Control
+    as="textarea"
+    className="rubric-feedback feedback-input"
+    disabled={false}
+    floatingLabel="Add comments (Optional)"
+    onChange={[MockFunction props.onChange]}
+    value=""
+  />
+  <Form.Control.Feedback
+    className="feedback-error-msg"
+    type="invalid"
+  >
+    The overall feedback is required
+  </Form.Control.Feedback>
+</Form.Group>
+`;

src/components/Assessment/EditableAssessment/OverallFeedback/index.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Form } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import InfoPopover from 'components/InfoPopover';
+
+import messages from 'components/Assessment/messages';
+
+/**
+ * <OverallFeedback />
+ */
+const OverallFeedback = ({
+  prompt,
+  value,
+  isDisabled,
+  isInvalid,
+  onChange,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const inputLabel = formatMessage(
+    !isDisabled ? messages.addComments : messages.comments,
+  );
+
+  return (
+    <Form.Group>
+      <Form.Label className="criteria-label">
+        <span className="criteria-title">
+          {formatMessage(messages.overallComments)}
+        </span>
+        <InfoPopover>
+          <div>{prompt}</div>
+        </InfoPopover>
+      </Form.Label>
+      <Form.Control
+        as="textarea"
+        className="rubric-feedback feedback-input"
+        floatingLabel={inputLabel}
+        value={value}
+        onChange={onChange}
+        disabled={isDisabled}
+      />
+      {isInvalid && (
+        <Form.Control.Feedback type="invalid" className="feedback-error-msg">
+          {formatMessage(messages.overallFeedbackError)}
+        </Form.Control.Feedback>
+      )}
+    </Form.Group>
+  );
+};
+
+OverallFeedback.defaultProps = {
+  value: '',
+  isDisabled: false,
+  isInvalid: false,
+};
+
+OverallFeedback.propTypes = {
+  prompt: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  isInvalid: PropTypes.bool,
+};
+
+export default OverallFeedback;