Merge branch 'master' into jkantor/messages3

.github/workflows/commitlint.yml

@@ -7,14 +7,4 @@ on:
 
 jobs:
   commitlint:
-    runs-on: ubuntu-20.04
-    steps:
-      - name: Check out repository
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: remove tsconfig.json # see issue https://github.com/conventional-changelog/commitlint/issues/3256
-        run: |
-          rm tsconfig.json
-      - name: Check commits
-        uses: wagoid/commitlint-github-action@v5
+    uses: openedx/.github/.github/workflows/commitlint.yml@master

package.json

@@ -35,8 +35,6 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
-    "@edx/frontend-component-footer": "12.5.0",
-    "@edx/frontend-component-header": "4.8.0",
     "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^21.5.3",
     "@edx/react-unit-test-utils": "1.7.0",
@@ -53,7 +51,7 @@
     "@zip.js/zip.js": "^2.7.30",
     "axios": "^1.5.1",
     "classnames": "^2.3.2",
-    "core-js": "3.32.2",
+    "core-js": "3.33.3",
     "file-saver": "^2.0.5",
     "filesize": "^8.0.6",
     "jest-when": "^3.6.0",
@@ -80,7 +78,7 @@
     "@edx/reactifex": "^2.1.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
-    "jest": "29.7.0",
+    "jest": "^26.6.3",
     "ts-jest": "^26.5.6"
   }
 }

src/App.jsx

@@ -5,6 +5,7 @@ import {
   ErrorPage,
 } from '@edx/frontend-platform/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { SkeletonTheme } from '@edx/paragon';
 
 import AssessmentView from 'views/AssessmentView';
 import SubmissionView from 'views/SubmissionView';
@@ -15,40 +16,20 @@ import AppContainer from 'components/AppContainer';
 import ModalContainer from 'components/ModalContainer';
 
 import { useRefreshPageData } from 'hooks/app';
-import { useRefreshUpstream } from 'hooks/modal';
-import { useUpdateTestProgressKey } from 'hooks/test';
+import { useUpdateTestProgressKey } from 'hooks/testHooks';
 
 import messages from './messages';
 import routes from './routes';
 
 const App = () => {
-  /*
-  const { body } = document;
   const refreshPageData = useRefreshPageData();
-  const refreshUpstream = useRefreshUpstream();
-  React.useEffect(() => {
-    const resizeEvent = () => {
-      // const { clientHeight, scrollHeight, offsetHeight } = body;
-      const height = body.scrollHeight;
-      if (document.referrer !== '' && height !== 0) {
-        window.parent.postMessage(
-          { type: 'ora-resize', payload: { height } },
-          document.referrer,
-        );
-      }
-    };
-    resizeEvent();
-    window.addEventListener('resize', resizeEvent);
-  }, [body.scrollHeight]);
-
   React.useEffect(() => {
     window.addEventListener('message', (event) => {
       if (event.data.type === 'plugin.modal-close') {
         refreshPageData();
       }
     });
-  }, []);
-  */
+  }, [refreshPageData]);
 
   const { formatMessage } = useIntl();
 
@@ -58,7 +39,9 @@ const App = () => {
   const pageWrapper = (children) => (
     <AuthenticatedPageRoute>
       <AppContainer>
-        {children}
+        <SkeletonTheme baseColor="#888" highlightColor="#444">
+          {children}
+        </SkeletonTheme>
       </AppContainer>
     </AuthenticatedPageRoute>
   );
@@ -69,12 +52,12 @@ const App = () => {
       element={pageWrapper(<Component />)}
     />
   );
-  const modalRoute = (route, Component, title) => (
+  const modalRoute = (route, Component) => (
     <Route
       key={route}
       path={route}
       element={pageWrapper(
-        <ModalContainer title={title}>
+        <ModalContainer>
           <Component />
         </ModalContainer>,
       )}
@@ -88,7 +71,7 @@ const App = () => {
     modalRoute(routes.selfAssessmentEmbed, SelfAssessmentView, 'ORA Self Assessment'),
     modalRoute(routes.studentTrainingEmbed, StudentTrainingView, 'ORA Student Training'),
     modalRoute(routes.submissionEmbed, SubmissionView, 'ORA Submission'),
-    modaleoute(routes.gradedEmbed, GradeView, 'My Grade'),
+    modalRoute(routes.gradedEmbed, GradeView, 'My Grade'),
     <Route
       key="embedError"
       path={routes.rootEmbed}
@@ -98,11 +81,11 @@ const App = () => {
   */
   const baseRoutes = [
     appRoute(routes.xblock, XBlockView),
-    modalRoute(routes.peerAssessment, AssessmentView, 'Assess your peers'),
-    modalRoute(routes.selfAssessment, AssessmentView, 'Assess yourself'),
-    modalRoute(routes.studentTraining, AssessmentView, 'Practice grading'),
-    modalRoute(routes.submission, SubmissionView, 'Your response'),
-    modalRoute(routes.graded, GradeView, 'My Grade'),
+    modalRoute(routes.peerAssessment, AssessmentView),
+    modalRoute(routes.selfAssessment, AssessmentView),
+    modalRoute(routes.studentTraining, AssessmentView),
+    modalRoute(routes.submission, SubmissionView),
+    modalRoute(routes.graded, GradeView),
     <Route key="error" path={routes.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />,
   ];
 

src/components/ActionButton.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, StatefulButton } from '@edx/paragon';
+
+import { MutationStatus } from 'constants';
+
+export const disabledStates = [MutationStatus.loading];
+
+const ActionButton = (props) => (
+  props.state
+    ? <StatefulButton {...props} disabledStates={disabledStates} />
+    : <Button {...props} />
+);
+ActionButton.defaultProps = {
+  state: null,
+};
+ActionButton.propTypes = {
+  state: PropTypes.string,
+};
+
+export default ActionButton;

src/components/AppContainer.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import ProgressBar from 'components/ProgressBar';
-
 import { useIsPageDataLoaded, useIsORAConfigLoaded } from 'hooks/app';
 
 /* The purpose of this component is to wrap views with a header/footer for situations
@@ -16,7 +14,7 @@ const AppContainer = ({ children }) => {
     return null;
   }
   return (
-    <div style={{ width: '100%' }}>
+    <div className="w-100 h-100">
       {children}
     </div>
   );

src/components/Assessment/Assessment.scss

@@ -78,5 +78,6 @@
 @include media-breakpoint-down(sm) {
   .assessment-card {
     margin-left: 0 !important;
+    width: 100% !important;
   } 
 }

src/components/Assessment/EditableAssessment/AssessmentActions.jsx

@@ -7,7 +7,8 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useCloseModal } from 'hooks/modal';
 import { MutationStatus } from 'constants';
 
-import messages from '../messages';
+import { useViewStep } from 'hooks/routing';
+import messages, { viewStepMessages } from '../messages';
 
 /**
  * <Rubric />
@@ -18,17 +19,20 @@ const AssessmentActions = ({
 }) => {
   const closeModal = useCloseModal();
   const { formatMessage } = useIntl();
+  const step = useViewStep();
+  const viewStep = viewStepMessages[step] ? `${formatMessage(viewStepMessages[step])} ` : '';
+
   return (
     <div className="assessment-footer">
-      <Button className="w-100" onClick={closeModal} variant="outlint-primary">
+      <Button className="w-100" onClick={closeModal} variant="outline-primary">
         {formatMessage(messages.finishLater)}
       </Button>
       <StatefulButton
         className="w-100"
         onClick={onSubmit}
         state={submitStatus}
         labels={{
-          [MutationStatus.idle]: formatMessage(messages.submitGrade),
+          [MutationStatus.idle]: formatMessage(messages.submitGrade, { viewStep }),
           [MutationStatus.loading]: formatMessage(messages.submittingGrade),
           [MutationStatus.success]: formatMessage(messages.gradeSubmitted),
         }}

src/components/Assessment/ReadonlyAssessment/AssessmentCriteria.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useCriteriaConfig } from 'hooks/assessment';
-import { feedbackRequirement } from 'constants';
 
 import Feedback from './Feedback';
 import messages from './messages';
@@ -22,7 +21,6 @@ const AssessmentCriteria = ({ criteria, overallFeedback, stepLabel }) => {
         return (
           <Feedback
             key={rubricCriterion.name}
-            feedbackRequired={rubricCriterion.feedbackRequired}
             criterionName={rubricCriterion.name}
             criterionDescription={rubricCriterion.description}
             selectedOption={option.name}
@@ -32,8 +30,8 @@ const AssessmentCriteria = ({ criteria, overallFeedback, stepLabel }) => {
           />
         );
       })}
+      <hr />
       <Feedback
-        feedbackRequired={feedbackRequirement.optional}
         criterionName={formatMessage(messages.overallFeedback)}
         commentHeader={stepLabel}
         commentBody={overallFeedback}