chore: add xblock studio view (#178)

* chore: add xblock studio view

* chore: linting

* chore: add preview route

* chore: fix url

.env

@@ -6,6 +6,7 @@ CSRF_TOKEN_API_PATH=''
 ECOMMERCE_BASE_URL=''
 LANGUAGE_PREFERENCE_COOKIE_NAME=''
 LMS_BASE_URL=''
+STUDIO_BASE_URL=''
 LOGIN_URL=''
 LOGOUT_URL=''
 LOGO_URL=''

.env.development

@@ -7,6 +7,7 @@ CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
+STUDIO_BASE_URL='http://localhost:18010'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg

.env.test

@@ -5,6 +5,7 @@ CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
+STUDIO_BASE_URL='http://localhost:18010'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg

src/App.jsx

@@ -10,6 +10,7 @@ import { SkeletonTheme } from '@edx/paragon';
 import AssessmentView from 'views/AssessmentView';
 import SubmissionView from 'views/SubmissionView';
 import XBlockView from 'views/XBlockView';
+import XBlockStudioView from 'views/XBlockStudioView';
 import GradeView from 'views/GradeView';
 
 import AppContainer from 'components/AppContainer';
@@ -67,6 +68,8 @@ const App = () => {
   /*
   const embeddedRoutes = [
     <Route key="embedXblock" path={routes.xblockEmbed} element={<XBlockView />} />,
+    <Route key="embedXblockStudio" path={routes.xblockStudioEmbed} element={<XBlockStudioView />} />,
+    <Route key="embedXblockPreview" path={routes.xblockPreviewEmbed} element={<XBlockView />} />,
     modalRoute(routes.peerAssessmentEmbed, PeerAssessmentView, 'ORA Peer Assessment'),
     modalRoute(routes.selfAssessmentEmbed, SelfAssessmentView, 'ORA Self Assessment'),
     modalRoute(routes.studentTrainingEmbed, StudentTrainingView, 'ORA Student Training'),
@@ -81,6 +84,8 @@ const App = () => {
   */
   const baseRoutes = [
     appRoute(routes.xblock, XBlockView),
+    appRoute(routes.xblockStudio, XBlockStudioView),
+    appRoute(routes.xblockPreview, XBlockView),
     modalRoute(routes.peerAssessment, AssessmentView),
     modalRoute(routes.selfAssessment, AssessmentView),
     modalRoute(routes.studentTraining, AssessmentView),

src/components/Instructions/useInstructionsMessage.jsx

@@ -4,6 +4,7 @@ import { stepNames, stepStates } from 'constants/index';
 
 import { useGlobalState } from 'hooks/app';
 import { useViewStep } from 'hooks/routing';
+import { isXblockStep } from 'utils';
 
 import messages from './messages';
 
@@ -15,7 +16,7 @@ const useInstructionsMessage = () => {
     effectiveGrade,
     stepState,
   } = useGlobalState();
-  const stepName = (viewStep === stepNames.xblock) ? activeStepName : viewStep;
+  const stepName = isXblockStep(viewStep) ? activeStepName : viewStep;
   if (stepState !== stepStates.inProgress || stepName === stepNames.staff) {
     return null;
   }

src/components/ProgressBar/hooks.js

@@ -4,6 +4,7 @@ import { useViewStep } from 'hooks/routing';
 import { useGlobalState, useStepInfo } from 'hooks/app';
 import { useOpenModal } from 'hooks/modal';
 import { stepRoutes, stepStates, stepNames } from 'constants/index';
+import { isXblockStep } from 'utils';
 
 export const useProgressStepData = ({ step, canRevisit = false }) => {
   const { xblockId, courseId } = useParams();
@@ -15,10 +16,11 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
   } = useGlobalState({ step });
   const stepInfo = useStepInfo();
   const openModal = useOpenModal();
+  const isXblock = isXblockStep(viewStep);
 
   const href = `/${stepRoutes[step]}/${courseId}/${xblockId}`;
   const onClick = () => openModal({ view: step, title: step });
-  const isActive = viewStep === stepNames.xblock
+  const isActive = isXblock
     ? activeStepName === step
     : viewStep === step;
   let isEnabled = isActive
@@ -31,7 +33,7 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
     isEnabled = !isWaitingForSubmissions && (isEnabled || isPeerComplete);
   }
   return {
-    ...(viewStep === stepNames.xblock ? { onClick } : { href }),
+    ...(isXblock ? { onClick } : { href }),
     isEnabled,
     isActive,
     isComplete: stepState === stepStates.done,

src/components/ProgressBar/index.jsx

@@ -15,6 +15,8 @@ import {
 import { stepNames } from 'constants/index';
 
 import { useViewStep } from 'hooks/routing';
+import { isXblockStep } from 'utils';
+
 import ProgressStep from './ProgressStep';
 
 import messages from './messages';
@@ -42,6 +44,7 @@ export const ProgressBar = ({ className }) => {
 
   const activeStep = useViewStep();
   const { activeStepName } = useGlobalState();
+  const isXblock = isXblockStep(activeStep);
 
   const stepOrders = [
     stepNames.submission,
@@ -66,7 +69,7 @@ export const ProgressBar = ({ className }) => {
     />
   );
 
-  let activeStepTitle = activeStep === stepNames.xblock ? activeStepName : activeStep;
+  let activeStepTitle = isXblock ? activeStepName : activeStep;
   if (activeStepTitle === stepNames.staff) {
     activeStepTitle = stepNames.submission;
   }

src/components/Prompt/index.jsx

@@ -8,17 +8,17 @@ import { useActiveStepName, useORAConfigData } from 'hooks/app';
 import { useViewStep } from 'hooks/routing';
 
 import messages from './messages';
-import usePromptHooks from './hooks';
 
 import './index.scss';
 
-const Prompt = ({ prompt, defaultOpen }) => {
-  const { open, toggleOpen } = usePromptHooks({ defaultOpen });
+const Prompt = ({
+  prompt, title, open, onToggle,
+}) => {
   const { formatMessage } = useIntl();
   const viewStep = useViewStep();
   const activeStepName = useActiveStepName();
   const message = messages[viewStep] || messages[activeStepName];
-  const title = message ? formatMessage(message) : '';
+  const promptTitle = title || formatMessage(message) || '';
   const imgRegex = /img src="\/asset-v1([^"]*)?"/g;
   const linkRegex = /a href="\/asset-v1([^"]*)?"/g;
   const { baseAssetUrl } = useORAConfigData();
@@ -33,20 +33,32 @@ const Prompt = ({ prompt, defaultOpen }) => {
   const promptWithStaticAssets = promptWithAssets
     .replaceAll(staticRegex.img, `img src="${process.env.LMS_BASE_URL}/${baseAssetUrl}$1"`)
     .replaceAll(staticRegex.link, `a href="${process.env.LMS_BASE_URL}/${baseAssetUrl}$1"`);
+
+  const collapsibleProps = open !== null && onToggle !== null ? {
+    open,
+    onToggle,
+  } : {
+    defaultOpen: true,
+  };
+
   return (
-    <Collapsible title={(<h3 className="py-3">{title}</h3>)} open={open} onToggle={toggleOpen}>
+    <Collapsible title={(<h3 className="py-3">{promptTitle}</h3>)} {...collapsibleProps}>
       <div className="prompt" dangerouslySetInnerHTML={{ __html: promptWithStaticAssets }} />
     </Collapsible>
   );
 };
 
 Prompt.defaultProps = {
-  defaultOpen: true,
+  open: null,
+  onToggle: null,
+  title: null,
 };
 
 Prompt.propTypes = {
-  defaultOpen: PropTypes.bool,
   prompt: PropTypes.string.isRequired,
+  open: PropTypes.bool,
+  onToggle: PropTypes.func,
+  title: PropTypes.string,
 };
 
 export default Prompt;

src/components/StatusAlert/hooks/simpleAlerts.js

@@ -4,17 +4,19 @@ import { useExitAction, useStartStepAction } from 'hooks/actions';
 
 import { stepNames, stepStates } from 'constants/index';
 
+import { isXblockStep } from 'utils';
 import useCreateAlert from './useCreateAlert';
 import messages from '../messages';
 
 export const useGradedAlerts = ({ step }) => {
   const viewStep = useViewStep();
   const startAction = useStartStepAction();
+  const isXblock = isXblockStep(viewStep);
   const alert = {
     message: messages.alerts.done.status,
     heading: messages.headings.done.status,
   };
-  if (startAction && viewStep !== stepNames.xblock) {
+  if (startAction && !isXblock) {
     alert.actions = [startAction.action];
   }
   return [useCreateAlert({ step })(alert)];

src/components/StatusAlert/hooks/useModalAlerts.js

@@ -2,8 +2,9 @@ import { useViewStep } from 'hooks/routing';
 import { useGlobalState, useHasReceivedFinalGrade } from 'hooks/app';
 import { useHasSubmitted, useShowTrainingError } from 'hooks/assessment';
 
-import { stepNames, stepStates } from 'constants/index';
+import { stepStates } from 'constants/index';
 
+import { isXblockStep } from 'utils';
 import { useTrainingErrorAlerts } from './simpleAlerts';
 
 import useRevisitAlerts from './useRevisitAlerts';
@@ -20,7 +21,7 @@ const useModalAlerts = ({ step }) => {
   const successAlerts = useSuccessAlerts({ step });
 
   // Do nothing if in xblock view
-  if (viewStep === stepNames.xblock) {
+  if (isXblockStep(viewStep)) {
     return [];
   }
   if (showTrainingError) {

src/components/StatusAlert/hooks/useStatusAlertData.js

@@ -3,6 +3,7 @@ import { useGlobalState, useHasReceivedFinalGrade } from 'hooks/app';
 
 import { stepNames, stepStates } from 'constants/index';
 
+import { isXblockStep } from 'utils';
 import messages from '../messages';
 import useCreateAlert from './useCreateAlert';
 import {
@@ -28,13 +29,14 @@ const useStatusAlertData = ({
   const gradedAlerts = useGradedAlerts({ step });
   const { hasCancelled, cancelledAlerts } = useCancelledAlerts({ step });
   const staffAlerts = useStaffAlerts({ step });
+  const isXblock = isXblockStep(viewStep);
 
   const stepName = step || activeStepName;
 
   if (isDone) {
     return gradedAlerts;
   }
-  if (viewStep !== stepNames.xblock) {
+  if (!isXblock) {
     return modalAlerts;
   }
   if (hasCancelled) {

src/constants/index.js

@@ -39,6 +39,8 @@ export const closedReasons = StrictDict({
 
 export const stepNames = StrictDict({
   xblock: 'xblock',
+  xblockStudio: 'xblockStudio',
+  xblockPreview: 'xblockPreview',
   submission: 'submission',
   peer: 'peer',
   self: 'self',
@@ -55,6 +57,8 @@ export const assessmentSteps = [
 
 export const routeSteps = StrictDict({
   xblock: stepNames.xblock,
+  xblock_studio: stepNames.xblockStudio,
+  xblock_preview: stepNames.xblockPreview,
   submission: stepNames.submission,
   peer_assessment: stepNames.peer,
   self_assessment: stepNames.self,

src/constants/mockData.js

@@ -3,6 +3,8 @@ import { stepNames } from '.';
 
 export const viewKeys = StrictDict({
   xblock: 'xblock',
+  xblockStudio: 'xblock_studio',
+  xblockPreview: 'xblock_preview',
   submission: 'submission',
   studentTraining: 'student_training',
   self: 'self_assessment',
@@ -73,6 +75,8 @@ export const stateStepConfigs = {
 
 export const defaultViewProgressKeys = StrictDict({
   [viewKeys.xblock]: progressKeys.submissionUnsaved,
+  [viewKeys.xblockStudio]: progressKeys.submissionUnsaved,
+  [viewKeys.xblockPreview]: progressKeys.submissionUnsaved,
   [viewKeys.submission]: progressKeys.submissionSaved,
   [viewKeys.studentTraining]: progressKeys.studentTraining,
   [viewKeys.self]: progressKeys.selfAssessment,

src/data/services/lms/fakeData/pageData/progress.js

@@ -2,6 +2,7 @@ import { StrictDict } from '@edx/react-unit-test-utils';
 
 import { stepNames } from 'constants/index';
 import { closedStates, progressKeys } from 'constants/mockData';
+import { isXblockStep } from 'utils';
 import { assessmentSteps } from '../oraConfig';
 /* eslint-disable camelcase */
 
@@ -133,8 +134,10 @@ export const getProgressState = ({ viewStep, progressKey, stepConfig }) => {
         : { submission: subStatuses.unsubmitted, ...nullStepInfo };
     }
 
+    const isXblock = isXblockStep(viewStep);
+
     // by default, pass null for all steps after submission
-    const stepIndex = (isGraded || viewStep === stepNames.xblock)
+    const stepIndex = (isGraded || isXblock)
       ? stepConfig.length - 1 : stepConfig.indexOf(step);
 
     const out = { submission: subStatuses.submitted };

src/data/services/lms/urls.js

@@ -5,9 +5,14 @@ import { StrictDict } from '@edx/react-unit-test-utils';
 import { getConfig } from '@edx/frontend-platform';
 
 import { stepNames, stepRoutes } from 'constants/index';
+import { isXblockStep } from 'utils';
 
 export const useBaseUrl = () => {
   const { xblockId, courseId } = useParams();
+  const pathName = window.location.pathname;
+  if (pathName.startsWith(`/${stepRoutes[stepNames.xblockStudio]}`) || pathName.startsWith(`/${stepRoutes[stepNames.xblockPreview]}`)) {
+    return `${getConfig().STUDIO_BASE_URL}/preview/xblock/${xblockId}/handler`;
+  }
   return `${getConfig().LMS_BASE_URL}/courses/${courseId}/xblock/${xblockId}/handler`;
 };
 
@@ -20,7 +25,7 @@ export const usePageDataUrl = (hasSubmitted) => {
   const baseUrl = useBaseUrl();
   const url = `${baseUrl}/get_learner_data/`;
   return React.useCallback((step) => (
-    ((step === stepNames.xblock) || hasSubmitted) ? url : `${url}${step}`
+    (hasSubmitted || isXblockStep(step)) ? url : `${url}${step}`
   ), [hasSubmitted, url]);
 };
 

src/hooks/actions/useLoadNextAction.js

@@ -9,6 +9,7 @@ import {
 import { useResetAssessment } from 'hooks/assessment';
 import { useViewStep } from 'hooks/routing';
 import { MutationStatus, stepNames } from 'constants/index';
+import { isXblockStep } from 'utils';
 
 import messages, { loadNextSteps } from './messages';
 
@@ -21,7 +22,7 @@ export default () => {
   const viewStep = useViewStep();
   const activeStep = useActiveStepName();
   const stepInfo = useStepInfo();
-  const step = viewStep === stepNames.xblock ? activeStep : viewStep;
+  const step = isXblockStep(viewStep) ? activeStep : viewStep;
   if (
     !(
       step === stepNames.studentTraining

src/routes.ts

@@ -1,12 +1,16 @@
 export default {
   xblockEmbed: 'xblock/embedded/:courseId/:xblockId/:progressKey',
+  xblockStudioEmbed: 'xblock_studio/embedded/:courseId/:xblockId/:progressKey?',
+  xblockPreviewEmbed: 'xblock_preview/embedded/:courseId/:xblockId/:progressKey?',
   peerAssessmentEmbed: 'peer_assessment/embedded/:courseId/:xblockId/:progressKey?',
   selfAssessmentEmbed: 'self_assessment/embedded/:courseId/:xblockId/:progressKey?',
   studentTrainingEmbed: 'student_training/embedded/:courseId/:xblockId/:progressKey?',
   submissionEmbed: 'submission/embedded/:courseId/:xblockId/:progressKey?',
   gradedEmbed: 'graded/embedded/:courseId/:xblockId/:progressKey?',
   rootEmbed: 'embedded/*',
   xblock: 'xblock/:courseId/:xblockId/:progressKey?',
+  xblockStudio: 'xblock_studio/:courseId/:xblockId/:progressKey?',
+  xblockPreview: 'xblock_preview/:courseId/:xblockId/:progressKey?',
   peerAssessment: 'peer_assessment/:courseId/:xblockId/:progressKey?',
   selfAssessment: 'self_assessment/:courseId/:xblockId/:progressKey?',
   studentTraining: 'student_training/:courseId/:xblockId/:progressKey?',

src/test/constants.js

@@ -1,12 +1,15 @@
 import { stepNames } from 'constants/index';
 import { progressKeys } from 'constants/mockData';
+import { isXblockStep } from 'utils';
 
 const lmsBaseUrl = 'test-base-url';
+const studioBaseUrl = 'test-studio-base-url';
 export const courseId = 'test-course-id';
 export const xblockId = 'test-xblock-id';
 export const baseUrl = `${lmsBaseUrl}/courses/${courseId}/xblock/${xblockId}/handler`;
 export const config = {
   LMS_BASE_URL: lmsBaseUrl,
+  STUDIO_BASE_URL: studioBaseUrl,
 };
 
 const stepProgressKeys = {
@@ -60,5 +63,5 @@ const checkForProgressKeys = (steps) => (key) => steps.map(loadKeys).flat().incl
 
 export const getProgressKeys = (stepOrder, stepName) => viewProgressKeys[stepName]
   .filter(checkForProgressKeys(
-    stepName === stepNames.xblock ? allSteps(stepOrder) : stepOrders[stepOrder],
+    isXblockStep(stepName) ? allSteps(stepOrder) : stepOrders[stepOrder],
   ));