feat: embedded views

Author: muselesscreator

package-lock.json

@@ -34,7 +34,7 @@
     "url": "https://github.com/edx/frontend-app-ora/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/brand": "npm:@edx/brand-edx.org@2.1.2",
     "@edx/frontend-component-footer": "12.4.0",
     "@edx/frontend-component-header": "4.7.1",
     "@edx/frontend-platform": "5.6.1",

package.json

@@ -24,17 +24,21 @@ const RouterRoot = () => {
     <Route
       path={route}
       element={(
-        <AppContainer Component={Component} />
+        <AppContainer>
+          <Component />
+        </AppContainer>
       )}
     />
   );
   const modalRoute = (route, Component, title) => (
     <Route
       path={route}
       element={(
-        <ModalContainer title={title}>
-          <AppContainer Component={Component} />
-        </ModalContainer>
+        <AppContainer>
+          <ModalContainer title={title}>
+            <Component />
+          </ModalContainer>
+        </AppContainer>
       )}
     />
   );

src/App.jsx

@@ -1,22 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import ProgressBar from 'components/ProgressBar';
+
 import { useIsPageDataLoaded, useIsORAConfigLoaded } from 'data/services/lms/hooks/selectors';
 
 /* The purpose of this component is to wrap views with a header/footer for situations
  * where we need to run non-embedded
  */
 
-const AppContainer = ({ Component }) => {
+const AppContainer = ({ children }) => {
   const isConfigLoaded = useIsORAConfigLoaded();
   const isPageDataLoaded = useIsPageDataLoaded();
   if (!isConfigLoaded || !isPageDataLoaded) {
     return null;
   }
-  return <Component />;
+  return (
+    <div style={{ width: '100%' }}>
+      {children}
+    </div>
+  );
 };
 AppContainer.propTypes = {
-  Component: PropTypes.elementType.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default AppContainer;

src/components/AppContainer.jsx

@@ -22,7 +22,6 @@ const BaseAssessmentView = ({
   getValues,
 }) => (
   <AssessmentContextProvider>
-    <ProgressBar />
     <div className="assessment-content-layout mr-auto ml-auto">
       <div className="content-wrapper">
         <Row className="flex-nowrap m-0">

src/components/BaseAssessmentView/index.jsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { stepStates } from 'data/services/lms/constants';
+import { useStepState } from 'data/services/lms/hooks/selectors';
+
 import useInstructionsMessage from './useInstructionsMessage';
 
 const Instructions = ({ step }) => {
   const message = useInstructionsMessage(step);
+  const stepState = useStepState({ step });
+  if (stepState !== stepStates.inProgress) {
+    return null;
+  }
   return (
     <div>
       <h2>Instructions</h2>

src/components/Instructions/index.jsx

@@ -4,22 +4,22 @@ import { stepNames } from 'data/services/lms/constants';
 
 const messages = defineMessages({
   [stepNames.submission]: {
-    defaultMessage: '<Submittion Instructions: TODO>',
+    defaultMessage: 'Submittion Instructions: TODO',
     description: 'Submission step instructions',
     id: 'frontend-app-ora.instructions.submisison',
   },
   [stepNames.studentTraining]: {
-    defaultMessage: '<Student Training Instructions: TODO>',
+    defaultMessage: 'Student Training Instructions: TODO',
     description: 'StudentTraining step instructions',
     id: 'frontend-app-ora.instructions.studentTraining',
   },
   [stepNames.self]: {
-    defaultMessage: '<Self Assessment Instructions: TODO>',
+    defaultMessage: 'Self Assessment Instructions: TODO',
     description: 'Self Assessment step instructions',
     id: 'frontend-app-ora.instructions.selfAssessment',
   },
   [stepNames.peer]: {
-    defaultMessage: '<Peer Assessment Instructions: TODO>',
+    defaultMessage: 'Peer Assessment Instructions: TODO',
     description: 'Peer Assessment step instructions',
     id: 'frontend-app-ora.instructions.peerAssessment',
   },

src/components/Instructions/messages.js

@@ -1,28 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FullscreenModal } from '@edx/paragon';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import AppContainer from 'components/AppContainer';
+import ProgressBar from 'components/ProgressBar';
 
 /* The purpose of this component is to wrap views with a header/footer for situations
  * where we need to run non-embedded
  */
 
-const ModalContainer = ({ title, children }) => {
-  console.log({ children, title });
-  return (
-    <FullscreenModal
-      isOpen
-      onClose={null}
-      hasCloseButton={false}
-      title={title}
-      modalBodyClassName="content-body bg-light-300"
-    >
-      {children}
-    </FullscreenModal>
-  );
-};
+const ModalContainer = ({ title, children }) => (
+  <FullscreenModal
+    isOpen
+    onClose={null}
+    hasCloseButton={false}
+    title={title}
+    modalBodyClassName="content-body bg-light-300"
+    beforeBodyNode={<ProgressBar className="px-2" />}
+  >
+    {children}
+  </FullscreenModal>
+);
 ModalContainer.propTypes = {
   children: PropTypes.node.isRequired,
   title: PropTypes.string.isRequired,

src/components/ModalContainer.jsx

@@ -55,15 +55,19 @@ const ProgressStep = ({
       disabled={!isEnabled}
       className={classNames(
         'ora-progress-nav',
-        'px-4',
+        'px-0',
         { 'is-active': isActive },
       )}
     >
-      <Icon className={classNames('nav-icon', colorClass)} src={iconSrc} />
+      <Icon
+        className={classNames('nav-icon', 'my-auto', colorClass)}
+        src={iconSrc}
+        {...subLabel && { style: { position: 'relative', bottom: '0.7rem' } }}
+      />
       <div className="d-inline-block">
         {label}
         {subLabel && (
-          <p className={classNames('x-small', colorClass)}>{subLabel}</p>
+          <p className={classNames('x-small', 'm-0', colorClass)}>{subLabel}</p>
         )}
       </div>
     </Nav.Link>

src/components/ProgressBar/ProgressStep.jsx

@@ -1,6 +1,10 @@
 import { useParams } from 'react-router-dom';
 import { useActiveView, useIsEmbedded } from 'hooks';
-import { useStepState, useEffectiveGrade } from 'data/services/lms/hooks/selectors';
+import {
+  useStepState,
+  useEffectiveGrade,
+  useGlobalState,
+} from 'data/services/lms/hooks/selectors';
 import {
   routeSteps,
   stepRoutes,
@@ -12,7 +16,7 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
   const isEmbedded = useIsEmbedded();
   const activeView = useActiveView();
   const viewStep = routeSteps[activeView];
-  const stepState = useStepState({ step });
+  const { activeStepName, stepState } = useGlobalState({ step });
 
   const href = `/${stepRoutes[step]}${isEmbedded ? '/embedded' : ''}/${xblockId}`;
   const isActive = viewStep === step;
@@ -22,7 +26,6 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
     || (canRevisit && stepState === stepStates.completed)
   );
   const myGrade = useEffectiveGrade()?.stepScore;
-
   return {
     href,
     isEnabled,
@@ -33,7 +36,6 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
     myGrade,
     // myGrade: { earned: 8, possible: 10 },
     // isPastDue: step === 'self',
-    
   };
 };
 

src/components/ProgressBar/hooks.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Navbar } from '@edx/paragon';
@@ -30,7 +32,7 @@ export const stepCanRevisit = {
   [stepNames.done]: true,
 };
 
-export const ProgressBar = () => {
+export const ProgressBar = ({ className }) => {
   const isLoaded = useIsPageDataLoaded();
 
   const stepOrder = useAssessmentStepOrder();
@@ -53,7 +55,7 @@ export const ProgressBar = () => {
   );
 
   return (
-    <Navbar>
+    <Navbar className={classNames("px-0", className)}>
       <Navbar.Collapse className="ora-progress-nav-group bg-white">
         <hr className="ora-progress-divider" />
         {stepEl(stepNames.submission)}
@@ -63,5 +65,11 @@ export const ProgressBar = () => {
     </Navbar>
   );
 };
+ProgressBar.defaultProps = {
+  className: '',
+};
+ProgressBar.propTypes = {
+  className: PropTypes.string,
+};
 
 export default ProgressBar;

src/components/ProgressBar/index.jsx

@@ -1,4 +1,5 @@
 .ora-progress-nav-group {
+  width: 100%;
   display: flex;
   justify-content: space-between;
   .ora-progress-divider {
@@ -17,6 +18,9 @@
     display: inline-block;
     margin-inline-end: 0.5rem;
     margin-left: -0.25rem;
+    svg {
+      display: inline-block;
+    }
   }
   .number-icon {
     background-color: black;

src/components/ProgressBar/index.scss

@@ -3,32 +3,32 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const submission = defineMessages({
   inProgress: {
     id: 'ora-grading.StatusAlert.Heading.submission.inProgress',
-    defaultMessage: 'Submission in progress <TODO>',
+    defaultMessage: 'Submission in progress: TODO',
     description: 'Submission in-progress status alert heading',
   },
   finished: {
     id: 'ora-grading.StatusAlert.Heading.submission.finished',
-    defaultMessage: 'Submission finished <TODO>',
+    defaultMessage: 'Submission finished: TODO',
     description: 'Submission finished status alert heading',
   },
   notAvailable: {
     id: 'ora-grading.StatusAlert.Heading.submission.notAvailable',
-    defaultMessage: 'Submission not available <TODO>',
+    defaultMessage: 'Submission not available: TODO',
     description: 'Submission not avilable status alert heading',
   },
   cancelled: {
     id: 'ora-grading.StatusAlert.Heading.submission.cancelled',
-    defaultMessage: 'Submission cancelled <TODO>',
+    defaultMessage: 'Submission cancelled: TODO',
     description: 'Submission cancelled status alert heading',
   },
   cancelledBy: {
     id: 'ora-grading.StatusAlert.Heading.submission.cancelledBy',
-    defaultMessage: 'Submission cancelled <TODO>',
+    defaultMessage: 'Submission cancelled: TODO',
     description: 'Submission cancelled by user status alert heading',
   },
   closed: {
     id: 'ora-grading.StatusAlert.Heading.submission.closed',
-    defaultMessage: 'Submission closed <TODO>',
+    defaultMessage: 'Submission closed: TODO',
     description: 'Submission closed status alert heading',
   },
   teamAlreadySubmitted: {
@@ -46,51 +46,51 @@ const submission = defineMessages({
 const studentTraining = defineMessages({
   inProgress: {
     id: 'ora-grading.StatusAlert.Heading.studentTraining.inProgress',
-    defaultMessage: 'Student Training <TODO>',
+    defaultMessage: 'Student Training: TODO',
     description: 'Student Training in progress status alert heading',
   },
 });
 
 const self = defineMessages({
   inProgress: {
     id: 'ora-grading.StatusAlert.Heading.self.inProgress',
-    defaultMessage: 'Self in progress <TODO>',
+    defaultMessage: 'Self in progress: TODO',
     description: 'Student Training in progress status alert heading',
   },
   closed: {
     id: 'ora-grading.StatusAlert.Heading.self.closed',
-    defaultMessage: 'Self closed <TODO>',
+    defaultMessage: 'Self closed: TODO',
     description: 'Student Training closed status alert heading',
   },
 });
 
 const peer = defineMessages({
   inProgress: {
     id: 'ora-grading.StatusAlert.Heading.peer.inProgress',
-    defaultMessage: 'Peer in progress <TODO>',
+    defaultMessage: 'Peer in progress: TODO',
     description: 'Peer Assessment closed status alert heading',
   },
   waiting: {
     id: 'ora-grading.StatusAlert.Heading.peer.waiting',
-    defaultMessage: 'Peer waiting <TODO>',
+    defaultMessage: 'Peer waiting: TODO',
     description: 'Peer Assessment waiting status alert heading',
   },
   finished: {
     id: 'ora-grading.StatusAlert.Heading.peer.finished',
-    defaultMessage: 'Peer finished <TODO>',
+    defaultMessage: 'Peer finished: TODO',
     description: 'Peer Assessment finished status alert heading',
   },
   closed: {
     id: 'ora-grading.StatusAlert.Heading.peer.closed',
-    defaultMessage: 'Peer closed <TODO>',
+    defaultMessage: 'Peer closed: TODO',
     description: 'Peer Assessment closed status alert heading',
   },
 });
 
 const done = defineMessages({
   status: {
     id: 'ora-grading.StatusAlert.Heading.done',
-    defaultMessage: 'Graded <TODO>',
+    defaultMessage: 'Graded: TODO',
     description: 'Done status alert heading',
   },
 });