From b4fe793f51ec5eceb86ffd15ceba3da70a13eb95 Mon Sep 17 00:00:00 2001
From: jasquat <2487833+jasquat@users.noreply.github.com>
Date: Mon, 22 Apr 2024 15:25:13 +0000
Subject: [PATCH] Task show toggle instructions (#1429)

* added support to toggle full and collapsed instructions on the task show page w/ burnettk

* collapse task show instructions by default w/ burnettk

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>
---
 .../src/components/InstructionsForEndUser.tsx          | 10 ++++++----
 spiffworkflow-frontend/src/routes/TaskShow.tsx         |  8 +++++++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx b/spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx
index a3c0e462..46d32027 100644
--- a/spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx
+++ b/spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx
@@ -14,6 +14,7 @@ type OwnProps = {
   taskInstructionForEndUser?: TaskInstructionForEndUser;
   defaultMessage?: string;
   allowCollapse?: boolean;
+  className?: string;
 };
 
 export default function InstructionsForEndUser({
@@ -21,6 +22,7 @@ export default function InstructionsForEndUser({
   taskInstructionForEndUser,
   defaultMessage = '',
   allowCollapse = false,
+  className,
 }: OwnProps) {
   const [collapsed, setCollapsed] = useState<boolean>(false);
   const [collapsable, setCollapsable] = useState<boolean>(false);
@@ -87,15 +89,15 @@ export default function InstructionsForEndUser({
     return null;
   };
 
-  let className = 'markdown';
+  let mdClassName = 'markdown';
   if (collapsed) {
-    className += ' markdown-collapsed';
+    mdClassName += ' markdown-collapsed';
   }
 
   if (instructions) {
     return (
-      <div>
-        <div className={className}>
+      <div className={className}>
+        <div className={mdClassName}>
           {/*
           https://www.npmjs.com/package/@uiw/react-md-editor switches to dark mode by default by respecting @media (prefers-color-scheme: dark)
           This makes it look like our site is broken, so until the rest of the site supports dark mode, turn off dark mode for this component.
diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx
index 358c44df..8cd3d933 100644
--- a/spiffworkflow-frontend/src/routes/TaskShow.tsx
+++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx
@@ -463,7 +463,13 @@ export default function TaskShow() {
   if (basicTask && taskData) {
     pageElements.push({
       key: 'instructions-for-end-user',
-      component: <InstructionsForEndUser task={taskWithTaskData} />,
+      component: (
+        <InstructionsForEndUser
+          task={taskWithTaskData}
+          allowCollapse
+          className="with-bottom-margin"
+        />
+      ),
     });
     pageElements.push({ key: 'main-form', component: formElement() });
   } else if (!atLeastOneTaskFetchHasError) {