Lk/integration (#74)

* chore: hide file upload if it was disabled

* chore: prevent status alert from crashing for now

* chore: change step states from complete to done

* chore: change assessment data shape to match backend

* chore: remove unnecessary onclick on info popover

* chore: update some logic on progress bar

* chore: update url to use the real backend

* chore: update step state complete to done

* chore: update requested change

* chore: update requested change

src/components/Assessment/ReadonlyAssessment/AssessmentCriterion.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import Feedback from './Feedback';
+import messages from './messages';
+import { useORAConfigData } from 'data/services/lms/hooks/selectors';
+
+const AssessmentCriterion = ({
+  criteria,
+  overallFeedback,
+  stepLabel,
+}) => {
+  const { formatMessage } = useIntl();
+  const { rubricConfig } = useORAConfigData();
+  return (
+    <>
+      {rubricConfig.criteria.map((criterion, i) => {
+        const assessmentCriterion = criteria[i];
+        const option = criterion.options[assessmentCriterion.selectedOption];
+        return (
+          <Feedback
+            key={criterion.name}
+            criterionName={criterion.name}
+            criterionDescription={criterion.description}
+            selectedOption={option.name}
+            selectedPoints={option.points}
+            commentHeader={stepLabel}
+            commentBody={assessmentCriterion.feedback}
+          />
+        );
+      })}
+      <Feedback
+        criterionName={formatMessage(messages.overallFeedback)}
+        commentHeader={stepLabel}
+        commentBody={overallFeedback}
+      />
+    </>
+  );
+};
+AssessmentCriterion.defaultProps = {};
+AssessmentCriterion.propTypes = {
+  criteria: PropTypes.arrayOf(PropTypes.shape({
+    selectedOption: PropTypes.number,
+    // selectedPoints: PropTypes.number,
+    feedback: PropTypes.string,
+  })),
+  overallFeedback: PropTypes.string,
+  stepLabel: PropTypes.string.isRequired,
+};
+
+export default AssessmentCriterion;

src/components/Assessment/ReadonlyAssessment/Feedback.jsx

@@ -33,7 +33,7 @@ const Feedback = ({
         <div className="d-flex justify-content-between align-items-center">
           <h5 className="mb-0">{criterionName}</h5>
           {criterionDescription && (
-            <InfoPopover onClick={() => {}}>
+            <InfoPopover>
               <p>{criterionDescription}</p>
             </InfoPopover>
           )}

src/components/FileUpload/index.jsx

@@ -6,6 +6,7 @@ import { DataTable, Dropzone } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { nullMethod } from 'hooks';
+import { useFileUploadEnabled } from 'data/services/lms/hooks/selectors';
 
 import UploadConfirmModal from './UploadConfirmModal';
 import ActionCell from './ActionCell';
@@ -28,6 +29,9 @@ const FileUpload = ({
   defaultCollapsePreview,
 }) => {
   const { formatMessage } = useIntl();
+  if ( !useFileUploadEnabled() ) {
+    return null;
+  }
 
   const {
     confirmUpload,

src/components/ProgressBar/hooks.js

@@ -20,14 +20,14 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
   const isEnabled = (
     isActive
     || (stepState === stepStates.inProgress)
-    || (canRevisit && stepState === stepStates.completed)
+    || (canRevisit && stepState === stepStates.done)
   );
   const myGrade = useEffectiveGrade()?.stepScore;
   return {
     href,
     isEnabled,
     isActive,
-    isComplete: stepState === stepStates.completed,
+    isComplete: stepState === stepStates.done,
     inProgress: stepState === stepStates.inProgress,
     isPastDue: stepState === stepStates.closed,
     myGrade,

src/components/ProgressBar/index.jsx

@@ -7,7 +7,9 @@ import { Navbar } from '@edx/paragon';
 
 import {
   useAssessmentStepOrder,
+  useHasReceivedFinalGrade,
   useIsPageDataLoaded,
+  useStepInfo,
 } from 'data/services/lms/hooks/selectors';
 import { stepNames } from 'data/services/lms/constants';
 
@@ -34,33 +36,35 @@ export const stepCanRevisit = {
 
 export const ProgressBar = ({ className }) => {
   const isLoaded = useIsPageDataLoaded();
+  const stepInfo = useStepInfo();
+  const hasReceivedFinalGrade = useHasReceivedFinalGrade();
 
-  const stepOrder = useAssessmentStepOrder();
+  const stepOrders = [
+    stepNames.submission,
+    ...useAssessmentStepOrder(),
+    stepNames.done,
+  ];
   const { formatMessage } = useIntl();
 
   if (!isLoaded) {
     return null;
   }
 
-  const stepEl = (step) => (
-    stepLabels[step]
-      ? (
-        <ProgressStep
-          step={step}
-          key={step}
-          label={formatMessage(stepLabels[step])}
-          canRevisit={stepCanRevisit[step]}
-        />
-      ) : null
-  );
+  const stepEl = (curStep) =>
+    stepLabels[curStep] ? (
+      <ProgressStep
+        step={curStep}
+        key={curStep}
+        label={formatMessage(stepLabels[curStep])}
+        canRevisit={(curStep === 'done' && hasReceivedFinalGrade) || !!stepInfo[curStep]}
+      />
+    ) : null;
 
   return (
     <Navbar className={classNames('px-0', className)}>
-      <Navbar.Collapse className="ora-progress-nav-group bg-white">
-        <hr className="ora-progress-divider" />
-        {stepEl(stepNames.submission)}
-        {stepOrder.map(stepEl)}
-        {stepEl(stepNames.done)}
+      <Navbar.Collapse className='ora-progress-nav-group bg-white'>
+        <hr className='ora-progress-divider' />
+        {stepOrders.map(stepEl)}
       </Navbar.Collapse>
     </Navbar>
   );

src/components/StatusAlert/index.jsx

@@ -11,6 +11,9 @@ const StatusAlert = ({
   step,
   showTrainingError,
 }) => {
+  if ( step === null ) {
+    return null;
+  }
   const {
     variant,
     icon,

src/components/StatusAlert/useStatusAlert.js

@@ -0,0 +1,92 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { CheckCircle, Info, WarningFilled } from '@edx/paragon/icons';
+import { StrictDict } from '@edx/react-unit-test-utils';
+
+import {
+  stepNames,
+  stepStates,
+} from 'data/services/lms/constants';
+import { useGlobalState } from 'data/services/lms/hooks/selectors';
+import messages from './messages';
+import alertMessages from './alertMessages';
+import headingMessages from './alertHeadingMessages';
+
+export const alertMap = {
+  [stepStates.done]: {
+    variant: 'success',
+    icon: CheckCircle,
+  },
+  [stepStates.closed]: {
+    variant: 'danger',
+    icon: Info,
+  },
+  [stepStates.teamAlreadySubmitted]: {
+    variant: 'warning',
+    icon: WarningFilled,
+  },
+  [stepStates.cancelled]: {
+    variant: 'warning',
+    icon: WarningFilled,
+  },
+  [stepStates.inProgress]: {
+    variant: 'dark',
+    icon: null,
+  },
+};
+
+const useStatusAlertMessages = (step = null) => {
+  const { formatMessage } = useIntl();
+  const {
+    activeStepName,
+    stepState,
+    cancellationInfo,
+  } = useGlobalState({ step });
+  const stepName = step || activeStepName;
+  const isRevisit = stepName !== activeStepName;
+  if (cancellationInfo.hasCancelled) {
+    const { cancelledBy, cancelledAt } = cancellationInfo;
+    if (cancelledBy) {
+      return {
+        message: formatMessage(
+          alertMessages.submission.cancelledBy,
+          { cancelledBy, cancelledAt },
+        ),
+        heading: formatMessage(headingMessages.submission.cancelledBy),
+      };
+    }
+    return {
+      message: formatMessage(alertMessages.submission.cancelledAt, { cancelledAt }),
+      heading: formatMessage(headingMessages.submission.cancelledAt),
+    };
+  }
+  if (stepName === stepNames.submission && isRevisit) {
+    return {
+      message: formatMessage(alertMessages.submission.finished),
+      heading: formatMessage(headingMessages.submission.finished),
+    };
+  }
+  if (stepName === stepNames.peer && isRevisit && stepState !== stepStates.waiting) {
+    return {
+      message: formatMessage(alertMessages.peer.finished),
+      heading: formatMessage(headingMessages.peer.finished),
+    };
+  }
+  return {
+    message: formatMessage(alertMessages[stepName][stepState]),
+    heading: formatMessage(headingMessages[stepName][stepState]),
+  };
+};
+
+const useStatusAlert = (step = null) => {
+  const { stepState } = useGlobalState({ step });
+  const { variant, icon } = alertMap[stepState];
+  const { message, heading } = useStatusAlertMessages(step);
+  return {
+    variant,
+    icon,
+    message,
+    heading,
+  };
+};
+
+export default useStatusAlert;

src/components/StatusAlert/useStatusAlertData.jsx

@@ -15,7 +15,7 @@ import alertMessages from './alertMessages';
 import headingMessages from './alertHeadingMessages';
 
 export const alertMap = {
-  [stepStates.completed]: {
+  [stepStates.done]: {
     variant: 'success',
     icon: CheckCircle,
   },

src/data/services/lms/constants.js

@@ -20,7 +20,7 @@ export const MutationStatus = StrictDict({
 
 export const stepStates = StrictDict({
   inProgress: 'inProgress',
-  completed: 'completed',
+  done: 'done',
   cancelled: 'cancelled',
   closed: 'closed',
   notAvailable: 'notAvailable',

src/data/services/lms/fakeData/dataStates.js

@@ -31,7 +31,7 @@ export const loadState = (opts) => {
   const state = {
     progress: pageData.getProgressState({ progressKey, stepConfig, viewStep }),
     response: pageData.getResponseState({ progressKey, isTeam }),
-    assessments: pageData.getAssessmentState({ progressKey, stepConfig }),
+    assessment: pageData.getAssessmentState({ progressKey, stepConfig }),
   };
   console.log({
     opts, progressKey, state, isTeam,

src/data/services/lms/hooks/data.ts

@@ -17,15 +17,9 @@ export const useORAConfig = (): types.QueryData<types.ORAConfig> => {
   return useQuery({
     queryKey: [queryKeys.oraConfig],
     queryFn: () => {
-      /*
       return getAuthenticatedHttpClient().post(oraConfigUrl, {}).then(
         ({ data }) => camelCaseObject(data)
       );
-      */
-      console.log({ oraConfig: camelCaseObject(fakeData.oraConfig.assessmentTinyMCE) });
-      return Promise.resolve(
-        camelCaseObject(fakeData.oraConfig.assessmentTinyMCE)
-      );
     },
   });
 };
@@ -39,12 +33,9 @@ export const usePageData = (): types.QueryData<types.PageData> => {
   return useQuery({
     queryKey: [queryKeys.pageData],
     queryFn: () => {
-      /*
       return getAuthenticatedHttpClient().post(pageDataUrl, {}).then(
         ({ data }) => camelCaseObject(data)
       );
-      */
-      return Promise.resolve(camelCaseObject(loadState({ view, progressKey })));
     },
   });
 };

src/data/services/lms/hooks/selectors/index.ts

@@ -30,7 +30,7 @@ export const useStepState = ({ step = null } = {}) => {
   const stepIndex = selectors.useStepIndex({ step: stepName });
   const subState = selectors.useSubmissionState();
   if (hasReceivedFinalGrade) {
-    return stepStates.completed;
+    return stepStates.done;
   }
 
   if (step === stepNames.submission) {
@@ -41,14 +41,14 @@ export const useStepState = ({ step = null } = {}) => {
   if (hasCancelled) { return stepStates.cancelled; }
 
   if (step === stepNames.done) {
-    return hasReceivedFinalGrade ? stepStates.completed : stepStates.notAvailable;
+    return hasReceivedFinalGrade ? stepStates.done : stepStates.notAvailable;
   }
 
   if (step === stepNames.peer && stepInfo?.peer?.isWaitingForSubmissions) {
     return stepStates.waiting;
   }
   // For Assessment steps
-  if (stepIndex < activeStepIndex) { return stepStates.completed; }
+  if (stepIndex < activeStepIndex) { return stepStates.done; }
   if (stepIndex > activeStepIndex) { return stepStates.notAvailable; }
 
   // only check for closed or not-available on active step

src/data/services/lms/hooks/selectors/oraConfig.ts

@@ -36,6 +36,8 @@ export const useAssessmentStepConfig = (): types.AssessmentStepConfig => (
   useORAConfigData().assessmentSteps
 );
 
+export const useFileUploadEnabled = (): boolean => useSubmissionConfig().fileResponseConfig.enabled;
+
 export const useAssessmentStepOrder = (): string[] => useAssessmentStepConfig()?.order;
 export const useStepIndex = ({ step }): number => useAssessmentStepOrder().indexOf(step);
 

src/data/services/lms/hooks/selectors/pageData.ts

@@ -54,7 +54,7 @@ export const useSubmissionState = () => {
   }
 
   if (subStatus.hasSubmitted) {
-    return stepStates.completed;
+    return stepStates.done;
   }
   if (subStatus.isClosed) {
     if (subStatus.closedReason === closedReasons.pastDue) {
@@ -68,13 +68,10 @@ export const useSubmissionState = () => {
   return stepStates.inProgress;
 };
 
-// Assessments
-export const useAssessmentsData = (): types.AssessmentsData => {
-  console.log({ pageData: usePageData() });
-  return usePageData().assessments;
-};
-export const useHasReceivedFinalGrade = (): boolean => useAssessmentsData() !== null;
+// Assessment
+export const useAssessmentData = (): types.AssessmentsData => usePageData().assessment;
+export const useHasReceivedFinalGrade = (): boolean => useAssessmentData() !== null;
 export const useEffectiveGrade = () => {
-  const assessments = useAssessmentsData();
-  return assessments ? assessments[assessments.effectiveAssessmentType] : null;
+  const assessment = useAssessmentData();
+  return assessment ? assessment[assessment.effectiveAssessmentType] : null;
 };

src/data/services/lms/types/pageData.ts

@@ -76,7 +76,7 @@ export interface ResponseData {
 
 // Assessments Data
 export interface AssessmentData {
-  assessmentCriterions: {
+  criteria: {
     selectedOption: number | null,
     feedback: string,
   }[],
@@ -106,5 +106,5 @@ export interface AssessmentsData {
 export interface PageData {
   progress: ProgressData,
   response: ResponseData,
-  assessments: AssessmentsData
+  assessment: AssessmentsData
 }