From 6a757e3cc320ee396624e04df888e0324f1e66c8 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Sun, 1 Dec 2024 20:50:50 +0100
Subject: [PATCH] show icon if help text defined

---
 .../components/Flow/components/Checklist.tsx           | 10 +++++++++-
 .../FlowEditor/components/Flow/components/Question.tsx | 10 +++++++++-
 .../components/FlowEditor/ToggleHelpTextButton.tsx     |  4 ++--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
index b56db2325c..54742247a9 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
@@ -1,3 +1,4 @@
+import Help from "@mui/icons-material/Help";
 import Box from "@mui/material/Box";
 import {
   ComponentType as TYPES,
@@ -25,10 +26,11 @@ type Props = {
 } & NodeTags;
 
 const Checklist: React.FC<Props> = React.memo((props) => {
-  const [isClone, childNodes, copyNode] = useStore((state) => [
+  const [isClone, childNodes, copyNode, showHelpText] = useStore((state) => [
     state.isClone,
     state.childNodesOf(props.id),
     state.copyNode,
+    state.showHelpText,
   ]);
 
   const parent = getParentId(props.parent);
@@ -76,6 +78,9 @@ const Checklist: React.FC<Props> = React.memo((props) => {
 
   const Icon = ICONS[props.type];
 
+  const hasHelpText =
+    props.data.policyRef || props.data.info || props.data.howMeasured;
+
   return (
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
@@ -109,6 +114,9 @@ const Checklist: React.FC<Props> = React.memo((props) => {
               )}
               <Box sx={{ display: "flex", flexDirection: "row" }}>
                 {Icon && <Icon />}
+                {showHelpText && hasHelpText && (
+                  <Help fontSize="small" color="primary" />
+                )}
                 <span>{props.text}</span>
               </Box>
             </Box>
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
index 437c5b33c4..09a8838dae 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
@@ -1,4 +1,5 @@
 import ErrorIcon from "@mui/icons-material/Error";
+import Help from "@mui/icons-material/Help";
 import Box from "@mui/material/Box";
 import {
   ComponentType as TYPES,
@@ -25,10 +26,11 @@ type Props = {
 } & NodeTags;
 
 const Question: React.FC<Props> = React.memo((props) => {
-  const [isClone, childNodes, copyNode] = useStore((state) => [
+  const [isClone, childNodes, copyNode, showHelpText] = useStore((state) => [
     state.isClone,
     state.childNodesOf(props.id),
     state.copyNode,
+    state.showHelpText,
   ]);
 
   const parent = getParentId(props.parent);
@@ -60,6 +62,9 @@ const Question: React.FC<Props> = React.memo((props) => {
   // If there is an error, the icon has a semantic meaning and needs a title
   const iconTitleAccess = props.type === "Error" ? "Error" : undefined;
 
+  const hasHelpText =
+    props.data.policyRef || props.data.info || props.data.howMeasured;
+
   return (
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
@@ -91,6 +96,9 @@ const Question: React.FC<Props> = React.memo((props) => {
               />
             )}
             {Icon && <Icon titleAccess={iconTitleAccess} />}
+            {showHelpText && hasHelpText && (
+              <Help fontSize="small" color="primary" />
+            )}
             <span>{props.text}</span>
           </Link>
           {props.type !== TYPES.SetValue && props.data?.fn && (
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx
index b2ac9159ae..d59112d010 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx
@@ -1,5 +1,5 @@
-import HelpTextIcon from "@mui/icons-material/SpeakerNotes";
-import HelpTextOffIcon from "@mui/icons-material/SpeakerNotesOff";
+import HelpTextOffIcon from "@mui/icons-material/DoNotDisturbOff";
+import HelpTextIcon from "@mui/icons-material/Help";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";