fix: ensure "no flag" band always displays if no flags are present (#…

…3899)
theopensystemslab · Nov 1, 2024 · 9546e09 · 9546e09
1 parent 363cc94
commit 9546e09
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
@@ -5,10 +5,10 @@ import { Link } from "react-navi";
 
 import { useStore } from "../../../lib/store";
 import { DataField } from "./DataField";
+import { FlagBand, NoFlagBand } from "./FlagBand";
 import Hanger from "./Hanger";
 import Node from "./Node";
 import { Thumbnail } from "./Thumbnail";
-import { FlagBand, NoFlagBand } from "./FlagBand";
 
 const Option: React.FC<any> = (props) => {
   const childNodes = useStore((state) => state.childNodesOf(props.id));
@@ -20,7 +20,9 @@ const Option: React.FC<any> = (props) => {
     // Question & Checklist Options set zero or many flag values under "data.flag"
     if (props.data?.flag) {
       if (Array.isArray(props.data?.flag)) {
-        flags = flatFlags.filter(({ value }) => props.data?.flag?.includes(value));
+        flags = flatFlags.filter(
+          ({ value }) => props.data?.flag?.includes(value),
+        );
       } else {
         flags = flatFlags.filter(({ value }) => props.data?.flag === value);
       }
@@ -46,9 +48,17 @@ const Option: React.FC<any> = (props) => {
             imageAltText={props.data.text}
           />
         )}
-        {flags ? flags.map((flag) => <FlagBand key={`${props.id}-${flag.value}`} flag={flag} />) : <NoFlagBand />}
+        {flags && flags.length > 0 ? (
+          flags.map((flag) => (
+            <FlagBand key={`${props.id}-${flag.value}`} flag={flag} />
+          ))
+        ) : (
+          <NoFlagBand />
+        )}
         <div className="text">{props.data.text}</div>
-        {props.data?.val && <DataField value={props.data.val} variant="child" />}
+        {props.data?.val && (
+          <DataField value={props.data.val} variant="child" />
+        )}
       </Link>
       <ol className="decisions">
         {childNodes.map((child: any) => (