From 940e7ffaae3a29ef703675755b0e6f0a2e3e156b Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Wed, 31 Jan 2024 10:18:42 -0500
Subject: [PATCH 1/2] chore: add staff prompt header

---
 src/components/Instructions/index.jsx | 20 ++++++++++++++------
 src/components/Prompt/index.jsx       |  4 ++--
 src/components/Prompt/messages.js     |  5 +++++
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/Instructions/index.jsx b/src/components/Instructions/index.jsx
index accd341c..677838ce 100644
--- a/src/components/Instructions/index.jsx
+++ b/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>
+    <div className='py-4'>
+      <p className='mb-0'>
+        <strong>{formatMessage(messages.instructions)}: </strong>
+        {message}
+      </p>
     </div>
   );
 };
diff --git a/src/components/Prompt/index.jsx b/src/components/Prompt/index.jsx
index c6523af5..cb2dff19 100644
--- a/src/components/Prompt/index.jsx
+++ b/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();
diff --git a/src/components/Prompt/messages.js b/src/components/Prompt/messages.js
index b58fb173..60e263c0 100644
--- a/src/components/Prompt/messages.js
+++ b/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;

From 267ea9f12c196d64c8dc00eca1374b334223dc89 Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Wed, 31 Jan 2024 10:52:55 -0500
Subject: [PATCH 2/2] chore: linting

---
 src/components/Instructions/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Instructions/index.jsx b/src/components/Instructions/index.jsx
index 677838ce..f8617909 100644
--- a/src/components/Instructions/index.jsx
+++ b/src/components/Instructions/index.jsx
@@ -22,8 +22,8 @@ const Instructions = () => {
     return null;
   }
   return (
-    <div className='py-4'>
-      <p className='mb-0'>
+    <div className="py-4">
+      <p className="mb-0">
         <strong>{formatMessage(messages.instructions)}: </strong>
         {message}
       </p>