chore: add default prompt header (#180)

* chore: add staff prompt header

* chore: linting

Author: leangseu-edx

src/components/Instructions/index.jsx

@@ -2,8 +2,11 @@ import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { stepStates } from 'constants/index';
-import { useStepState } from 'hooks/app';
+import { stepNames, stepStates } from 'constants/index';
+
+import { useGlobalState } from 'hooks/app';
+import { useViewStep } from 'hooks/routing';
+import { isXblockStep } from 'utils';
 
 import useInstructionsMessage from './useInstructionsMessage';
 
@@ -12,13 +15,18 @@ import messages from './messages';
 const Instructions = () => {
   const { formatMessage } = useIntl();
   const message = useInstructionsMessage();
-  const stepState = useStepState({});
-  if (stepState !== stepStates.inProgress) {
+  const viewStep = useViewStep();
+  const { activeStepName, stepState } = useGlobalState();
+  const stepName = isXblockStep(viewStep) ? activeStepName : viewStep;
+  if (stepState !== stepStates.inProgress || stepName === stepNames.staff) {
     return null;
   }
   return (
     <div className="py-4">
-      <p className="mb-0"><strong>{formatMessage(messages.instructions)}: </strong>{message}</p>
+      <p className="mb-0">
+        <strong>{formatMessage(messages.instructions)}: </strong>
+        {message}
+      </p>
     </div>
   );
 };

src/components/Prompt/index.jsx

@@ -17,8 +17,8 @@ const Prompt = ({
   const { formatMessage } = useIntl();
   const viewStep = useViewStep();
   const activeStepName = useActiveStepName();
-  const message = messages[viewStep] || messages[activeStepName];
-  const promptTitle = title || formatMessage(message) || '';
+  const message = messages[viewStep] || messages[activeStepName] || messages.promptTitle;
+  const promptTitle = title || formatMessage(message);
   const imgRegex = /img src="\/asset-v1([^"]*)?"/g;
   const linkRegex = /a href="\/asset-v1([^"]*)?"/g;
   const { baseAssetUrl } = useORAConfigData();

src/components/Prompt/messages.js

@@ -27,6 +27,11 @@ const messages = defineMessages({
     description: 'Done step prompt header',
     id: 'frontend-app-ora.Prompt.header.done',
   },
+  promptTitle: {
+    defaultMessage: 'Prompt',
+    description: 'Prompt title',
+    id: 'frontend-app-ora.Prompt.promptTitle',
+  },
 });
 
 export default messages;