From 17bb3aeb7335380d8f469f575b75345ad1c1ac74 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Wed, 2 Oct 2024 15:22:07 -0500
Subject: [PATCH] fix(client): add instructions to challenge view components
 (#56341)

---
 client/src/templates/Challenges/dialogue/show.tsx | 11 +++++++++++
 client/src/templates/Challenges/odin/show.tsx     |  9 +++++++++
 2 files changed, 20 insertions(+)

diff --git a/client/src/templates/Challenges/dialogue/show.tsx b/client/src/templates/Challenges/dialogue/show.tsx
index 0ef10b36053ccb..fec6814f424c93 100644
--- a/client/src/templates/Challenges/dialogue/show.tsx
+++ b/client/src/templates/Challenges/dialogue/show.tsx
@@ -197,6 +197,7 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
           challenge: {
             title,
             description,
+            instructions,
             superBlock,
             block,
             fields: { blockName },
@@ -255,6 +256,15 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <Spacer size='medium' />
+                {instructions && (
+                  <>
+                    <PrismFormatted
+                      className={'line-numbers'}
+                      text={instructions}
+                    />
+                    <Spacer size='medium' />
+                  </>
+                )}
                 <ObserveKeys>
                   <Assignments
                     assignments={assignments}
@@ -302,6 +312,7 @@ export const query = graphql`
         videoId
         title
         description
+        instructions
         challengeType
         helpCategory
         superBlock
diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index 4b8321dae85835..91c0bc2845f210 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -230,6 +230,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
           challenge: {
             title,
             description,
+            instructions,
             superBlock,
             block,
             videoId,
@@ -310,6 +311,13 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
               )}
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+                {instructions && (
+                  <PrismFormatted
+                    className={'line-numbers'}
+                    text={instructions}
+                  />
+                )}
+
                 <ObserveKeys>
                   {assignments.length > 0 && (
                     <Assignments
@@ -389,6 +397,7 @@ export const query = graphql`
         }
         title
         description
+        instructions
         challengeType
         helpCategory
         superBlock