chore: add xblock studio view (#178)

* chore: add xblock studio view

* chore: linting

* chore: add preview route

* chore: fix url

Author: leangseu-edx

.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/hooks.js

@@ -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/Prompt/index.jsx

@@ -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)];