From a70d00f332d1134f772644c08b4b3218c25cd449 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:58:15 +0000
Subject: [PATCH 01/10] Refactor Checklist folder into subfolders

---
 .../Checklist/Public/tests/Public.test.tsx    | 121 ++++++++++++++++++
 1 file changed, 121 insertions(+)

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
index f77d90ae1b..742753c1f5 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
@@ -8,8 +8,129 @@ import { setup } from "testUtils";
 import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
+<<<<<<<< HEAD:editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
 import Checklist, { ChecklistLayout } from "../Public";
 import { groupedOptions, options } from "./mockOptions";
+========
+import { Option } from "../../shared";
+import { Group } from "../model";
+import Checklist, { ChecklistLayout } from "./Public";
+
+const options: {
+  [key in ChecklistLayout]?: Array<Option>;
+} = {
+  [ChecklistLayout.Basic]: [
+    {
+      id: "flat_id",
+      data: {
+        text: "Flat",
+      },
+    },
+    {
+      id: "caravan_id",
+      data: {
+        text: "Caravan",
+      },
+    },
+    {
+      id: "house_id",
+      data: {
+        text: "House",
+      },
+    },
+    {
+      id: "spaceship_id",
+      data: {
+        text: "Spaceship",
+      },
+    },
+  ],
+  [ChecklistLayout.Images]: [
+    {
+      id: "flat_id",
+      data: {
+        text: "Flat",
+        img: "flat.jpg",
+      },
+    },
+    {
+      id: "caravan_id",
+      data: {
+        text: "Caravan",
+        img: "caravan.jpg",
+      },
+    },
+    {
+      id: "house_id",
+      data: {
+        text: "House",
+        img: "house.jpg",
+      },
+    },
+    {
+      id: "spaceship_id",
+      data: {
+        text: "Spaceship",
+        img: "spaceship.jpg",
+      },
+    },
+  ],
+};
+
+const groupedOptions: Array<Group<Option>> = [
+  {
+    title: "Section 1",
+    children: [
+      {
+        id: "S1_Option1",
+        data: {
+          text: "S1 Option1",
+        },
+      },
+      {
+        id: "S1_Option2",
+        data: {
+          text: "S1 Option2",
+        },
+      },
+    ],
+  },
+  {
+    title: "Section 2",
+    children: [
+      {
+        id: "S2_Option1",
+        data: {
+          text: "S2 Option1",
+        },
+      },
+      {
+        id: "S2_Option2",
+        data: {
+          text: "S2 Option2",
+        },
+      },
+    ],
+  },
+  {
+    title: "Section 3",
+    children: [
+      {
+        id: "S3_Option1",
+        data: {
+          text: "S3 Option1",
+        },
+      },
+      {
+        id: "S3_Option2",
+        data: {
+          text: "S3 Option2",
+        },
+      },
+    ],
+  },
+];
+>>>>>>>> 82a41ef1 (Refactor Checklist folder into subfolders):editor.planx.uk/src/@planx/components/Checklist/Public/Public.test.tsx
 
 describe("Checklist Component - Grouped Layout", () => {
   it("answers are submitted in order they were supplied", async () => {

From 32689a2af438fa16e295f268894d9381120a9311 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Wed, 4 Dec 2024 12:05:54 +0000
Subject: [PATCH 02/10] More refactor

---
 .../Checklist/Public/tests/Public.test.tsx    | 137 +-----------------
 1 file changed, 8 insertions(+), 129 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
index 742753c1f5..c7a6804537 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
@@ -8,129 +8,8 @@ import { setup } from "testUtils";
 import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
-<<<<<<<< HEAD:editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
 import Checklist, { ChecklistLayout } from "../Public";
 import { groupedOptions, options } from "./mockOptions";
-========
-import { Option } from "../../shared";
-import { Group } from "../model";
-import Checklist, { ChecklistLayout } from "./Public";
-
-const options: {
-  [key in ChecklistLayout]?: Array<Option>;
-} = {
-  [ChecklistLayout.Basic]: [
-    {
-      id: "flat_id",
-      data: {
-        text: "Flat",
-      },
-    },
-    {
-      id: "caravan_id",
-      data: {
-        text: "Caravan",
-      },
-    },
-    {
-      id: "house_id",
-      data: {
-        text: "House",
-      },
-    },
-    {
-      id: "spaceship_id",
-      data: {
-        text: "Spaceship",
-      },
-    },
-  ],
-  [ChecklistLayout.Images]: [
-    {
-      id: "flat_id",
-      data: {
-        text: "Flat",
-        img: "flat.jpg",
-      },
-    },
-    {
-      id: "caravan_id",
-      data: {
-        text: "Caravan",
-        img: "caravan.jpg",
-      },
-    },
-    {
-      id: "house_id",
-      data: {
-        text: "House",
-        img: "house.jpg",
-      },
-    },
-    {
-      id: "spaceship_id",
-      data: {
-        text: "Spaceship",
-        img: "spaceship.jpg",
-      },
-    },
-  ],
-};
-
-const groupedOptions: Array<Group<Option>> = [
-  {
-    title: "Section 1",
-    children: [
-      {
-        id: "S1_Option1",
-        data: {
-          text: "S1 Option1",
-        },
-      },
-      {
-        id: "S1_Option2",
-        data: {
-          text: "S1 Option2",
-        },
-      },
-    ],
-  },
-  {
-    title: "Section 2",
-    children: [
-      {
-        id: "S2_Option1",
-        data: {
-          text: "S2 Option1",
-        },
-      },
-      {
-        id: "S2_Option2",
-        data: {
-          text: "S2 Option2",
-        },
-      },
-    ],
-  },
-  {
-    title: "Section 3",
-    children: [
-      {
-        id: "S3_Option1",
-        data: {
-          text: "S3 Option1",
-        },
-      },
-      {
-        id: "S3_Option2",
-        data: {
-          text: "S3 Option2",
-        },
-      },
-    ],
-  },
-];
->>>>>>>> 82a41ef1 (Refactor Checklist folder into subfolders):editor.planx.uk/src/@planx/components/Checklist/Public/Public.test.tsx
 
 describe("Checklist Component - Grouped Layout", () => {
   it("answers are submitted in order they were supplied", async () => {
@@ -143,7 +22,7 @@ describe("Checklist Component - Grouped Layout", () => {
         text="home type?"
         handleSubmit={handleSubmit}
         groupedOptions={groupedOptions}
-      />,
+      />
     );
 
     await user.click(screen.getByText("Section 1"));
@@ -167,7 +46,7 @@ describe("Checklist Component - Grouped Layout", () => {
         handleSubmit={handleSubmit}
         previouslySubmittedData={{ answers: ["S1_Option1", "S3_Option1"] }}
         groupedOptions={groupedOptions}
-      />,
+      />
     );
 
     expect(screen.getByTestId("group-0-expanded")).toBeTruthy();
@@ -188,7 +67,7 @@ describe("Checklist Component - Grouped Layout", () => {
         description=""
         text="home type?"
         groupedOptions={groupedOptions}
-      />,
+      />
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -204,7 +83,7 @@ describe("Checklist Component - Grouped Layout", () => {
         text="home type?"
         handleSubmit={handleSubmit}
         groupedOptions={groupedOptions}
-      />,
+      />
     );
     const [section1Button, section2Button, section3Button] =
       screen.getAllByRole("button");
@@ -261,7 +140,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
           text="home type?"
           handleSubmit={handleSubmit}
           options={options[type]}
-        />,
+        />
       );
 
       expect(screen.getByRole("heading")).toHaveTextContent("home type?");
@@ -298,7 +177,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
           handleSubmit={handleSubmit}
           previouslySubmittedData={{ answers: ["flat_id", "house_id"] }}
           options={options[type]}
-        />,
+        />
       );
 
       await user.click(screen.getByTestId("continue-button"));
@@ -315,7 +194,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
           description=""
           text="home type?"
           options={options[type]}
-        />,
+        />
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -331,7 +210,7 @@ describe("Checklist Component - Basic & Images Layout", () => {
           text="home type?"
           handleSubmit={handleSubmit}
           options={options[type]}
-        />,
+        />
       );
 
       await user.tab();

From bf201d328b944012be355eff2ed5f03e33f4105b Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Wed, 4 Dec 2024 12:13:50 +0000
Subject: [PATCH 03/10] Refactor editor

---
 .../Checklist/Editor/components/Options.tsx   | 151 ++++++++++++++++++
 .../Editor/components/OptionsEditor.tsx       | 104 ++++++++++++
 2 files changed, 255 insertions(+)
 create mode 100644 editor.planx.uk/src/@planx/components/Checklist/Editor/components/Options.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/Options.tsx
new file mode 100644
index 0000000000..ea42df93eb
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/Options.tsx
@@ -0,0 +1,151 @@
+import Delete from "@mui/icons-material/Delete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import adjust from "ramda/src/adjust";
+import compose from "ramda/src/compose";
+import remove from "ramda/src/remove";
+import React from "react";
+import { FormikHookReturn } from "types";
+import ListManager from "ui/editor/ListManager/ListManager";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+
+import { Option } from "../../../shared";
+import type { Group } from "../../model";
+import { OptionEditor } from "./OptionsEditor";
+
+export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
+  return (
+    <ModalSectionContent subtitle="Options">
+      {formik.values.groupedOptions ? (
+        <Box>
+          {formik.values.groupedOptions.map(
+            (groupedOption: Group<Option>, groupIndex: number) => (
+              <Box key={groupIndex} mt={groupIndex === 0 ? 0 : 4}>
+                <Box display="flex" pb={1}>
+                  <InputRow>
+                    <Input
+                      required
+                      format="bold"
+                      name={`groupedOptions[${groupIndex}].title`}
+                      value={groupedOption.title}
+                      placeholder="Section Title"
+                      onChange={formik.handleChange}
+                    />
+                  </InputRow>
+                  <Box flex={0}>
+                    <IconButton
+                      title="Delete group"
+                      aria-label="Delete group"
+                      onClick={() => {
+                        formik.setFieldValue(
+                          `groupedOptions`,
+                          remove(groupIndex, 1, formik.values.groupedOptions),
+                        );
+                      }}
+                      size="large"
+                    >
+                      <Delete />
+                    </IconButton>
+                  </Box>
+                </Box>
+                <Box pl={{ md: 2 }}>
+                  <ListManager
+                    values={groupedOption.children}
+                    onChange={(newOptions) => {
+                      formik.setFieldValue(
+                        `groupedOptions[${groupIndex}].children`,
+                        newOptions,
+                      );
+                    }}
+                    newValue={() =>
+                      ({
+                        data: {
+                          text: "",
+                          description: "",
+                          val: "",
+                        },
+                      }) as Option
+                    }
+                    newValueLabel="add new option"
+                    Editor={OptionEditor}
+                    editorExtraProps={{
+                      groupIndex,
+                      showValueField: !!formik.values.fn,
+                      onMoveToGroup: (
+                        movedItemIndex: number,
+                        moveToGroupIndex: number,
+                      ) => {
+                        const item = groupedOption.children[movedItemIndex];
+                        formik.setFieldValue(
+                          "groupedOptions",
+                          compose(
+                            adjust(
+                              moveToGroupIndex,
+                              (option: Group<Option>) => ({
+                                ...option,
+                                children: [...option.children, item],
+                              }),
+                            ),
+                            adjust(groupIndex, (option: Group<Option>) => ({
+                              ...option,
+                              children: remove(
+                                movedItemIndex,
+                                1,
+                                option.children,
+                              ),
+                            })),
+                          )(formik.values.groupedOptions),
+                        );
+                      },
+                      groups: formik.values.groupedOptions.map(
+                        (opt: Group<Option>) => opt.title,
+                      ),
+                    }}
+                  />
+                </Box>
+              </Box>
+            ),
+          )}
+          <Box mt={1}>
+            <Button
+              size="large"
+              onClick={() => {
+                formik.setFieldValue(`groupedOptions`, [
+                  ...formik.values.groupedOptions,
+                  {
+                    title: "",
+                    children: [],
+                  },
+                ]);
+              }}
+            >
+              add new group
+            </Button>
+          </Box>
+        </Box>
+      ) : (
+        <ListManager
+          values={formik.values.options || []}
+          onChange={(newOptions) => {
+            formik.setFieldValue("options", newOptions);
+          }}
+          newValueLabel="add new option"
+          newValue={() =>
+            ({
+              data: {
+                text: "",
+                description: "",
+                val: "",
+              },
+            }) as Option
+          }
+          Editor={OptionEditor}
+          editorExtraProps={{ showValueField: !!formik.values.fn }}
+        />
+      )}
+    </ModalSectionContent>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx
new file mode 100644
index 0000000000..034a5ecbea
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx
@@ -0,0 +1,104 @@
+import React from "react";
+import ImgInput from "ui/editor/ImgInput/ImgInput";
+import SimpleMenu from "ui/editor/SimpleMenu";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+import InputRowItem from "ui/shared/InputRowItem";
+
+import { FlagsSelect } from "../../../shared/FlagsSelect";
+import { OptionEditorProps } from "../../types";
+
+export const OptionEditor: React.FC<OptionEditorProps> = (props) => {
+  return (
+    <div style={{ width: "100%" }}>
+      <InputRow>
+        {props.value.id ? (
+          <input type="hidden" value={props.value.id} readOnly />
+        ) : null}
+        <InputRowItem width="200%">
+          <Input
+            required
+            format="bold"
+            multiline
+            value={props.value.data.text || ""}
+            onChange={(ev) => {
+              props.onChange({
+                ...props.value,
+                data: {
+                  ...props.value.data,
+                  text: ev.target.value,
+                },
+              });
+            }}
+            placeholder="Option"
+          />
+        </InputRowItem>
+
+        <ImgInput
+          img={props.value.data.img}
+          onChange={(img) => {
+            props.onChange({
+              ...props.value,
+              data: {
+                ...props.value.data,
+                img,
+              },
+            });
+          }}
+        />
+
+        {typeof props.index !== "undefined" &&
+          props.groups &&
+          props.onMoveToGroup && (
+            <SimpleMenu
+              items={props.groups.map((group, groupIndex) => ({
+                label: `Move to ${group || `group ${groupIndex}`}`,
+                onClick: () => {
+                  props.onMoveToGroup &&
+                    typeof props.index === "number" &&
+                    props.onMoveToGroup(props.index, groupIndex);
+                },
+                disabled: groupIndex === props.groupIndex,
+              }))}
+            />
+          )}
+      </InputRow>
+
+      {props.showValueField && (
+        <InputRow>
+          <Input
+            format="data"
+            value={props.value.data.val || ""}
+            placeholder="Data Value"
+            onChange={(ev) => {
+              props.onChange({
+                ...props.value,
+                data: {
+                  ...props.value.data,
+                  val: ev.target.value,
+                },
+              });
+            }}
+          />
+        </InputRow>
+      )}
+
+      <FlagsSelect
+        value={
+          Array.isArray(props.value.data.flag)
+            ? props.value.data.flag
+            : [props.value.data.flag]
+        }
+        onChange={(ev) => {
+          props.onChange({
+            ...props.value,
+            data: {
+              ...props.value.data,
+              flag: ev,
+            },
+          });
+        }}
+      />
+    </div>
+  );
+};

From 2aabdc6ba7763df31782bf3073b3440b9816f138 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:15:31 +0000
Subject: [PATCH 04/10] refactor optionsEditor into shared component

---
 .../components/Checklist/Editor/Options.tsx   |   2 +-
 .../Checklist/Editor/components/Options.tsx   | 151 ------------------
 .../Editor/components/OptionsEditor.tsx       | 104 ------------
 .../src/@planx/components/Question/Editor.tsx | 102 +-----------
 .../components/shared/OptionsEditor.tsx       | 125 +++++++++++++++
 5 files changed, 131 insertions(+), 353 deletions(-)
 delete mode 100644 editor.planx.uk/src/@planx/components/Checklist/Editor/components/Options.tsx
 delete mode 100644 editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
index 0080d90a92..62229141dc 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -2,6 +2,7 @@ import Delete from "@mui/icons-material/Delete";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
+import { OptionEditor } from "@planx/components/shared/OptionsEditor";
 import adjust from "ramda/src/adjust";
 import compose from "ramda/src/compose";
 import remove from "ramda/src/remove";
@@ -14,7 +15,6 @@ import InputRow from "ui/shared/InputRow";
 
 import { Option } from "../../shared";
 import type { Group } from "../model";
-import { OptionEditor } from "./OptionsEditor";
 
 export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
   return (
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/Options.tsx
deleted file mode 100644
index ea42df93eb..0000000000
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/Options.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import Delete from "@mui/icons-material/Delete";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import adjust from "ramda/src/adjust";
-import compose from "ramda/src/compose";
-import remove from "ramda/src/remove";
-import React from "react";
-import { FormikHookReturn } from "types";
-import ListManager from "ui/editor/ListManager/ListManager";
-import ModalSectionContent from "ui/editor/ModalSectionContent";
-import Input from "ui/shared/Input/Input";
-import InputRow from "ui/shared/InputRow";
-
-import { Option } from "../../../shared";
-import type { Group } from "../../model";
-import { OptionEditor } from "./OptionsEditor";
-
-export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
-  return (
-    <ModalSectionContent subtitle="Options">
-      {formik.values.groupedOptions ? (
-        <Box>
-          {formik.values.groupedOptions.map(
-            (groupedOption: Group<Option>, groupIndex: number) => (
-              <Box key={groupIndex} mt={groupIndex === 0 ? 0 : 4}>
-                <Box display="flex" pb={1}>
-                  <InputRow>
-                    <Input
-                      required
-                      format="bold"
-                      name={`groupedOptions[${groupIndex}].title`}
-                      value={groupedOption.title}
-                      placeholder="Section Title"
-                      onChange={formik.handleChange}
-                    />
-                  </InputRow>
-                  <Box flex={0}>
-                    <IconButton
-                      title="Delete group"
-                      aria-label="Delete group"
-                      onClick={() => {
-                        formik.setFieldValue(
-                          `groupedOptions`,
-                          remove(groupIndex, 1, formik.values.groupedOptions),
-                        );
-                      }}
-                      size="large"
-                    >
-                      <Delete />
-                    </IconButton>
-                  </Box>
-                </Box>
-                <Box pl={{ md: 2 }}>
-                  <ListManager
-                    values={groupedOption.children}
-                    onChange={(newOptions) => {
-                      formik.setFieldValue(
-                        `groupedOptions[${groupIndex}].children`,
-                        newOptions,
-                      );
-                    }}
-                    newValue={() =>
-                      ({
-                        data: {
-                          text: "",
-                          description: "",
-                          val: "",
-                        },
-                      }) as Option
-                    }
-                    newValueLabel="add new option"
-                    Editor={OptionEditor}
-                    editorExtraProps={{
-                      groupIndex,
-                      showValueField: !!formik.values.fn,
-                      onMoveToGroup: (
-                        movedItemIndex: number,
-                        moveToGroupIndex: number,
-                      ) => {
-                        const item = groupedOption.children[movedItemIndex];
-                        formik.setFieldValue(
-                          "groupedOptions",
-                          compose(
-                            adjust(
-                              moveToGroupIndex,
-                              (option: Group<Option>) => ({
-                                ...option,
-                                children: [...option.children, item],
-                              }),
-                            ),
-                            adjust(groupIndex, (option: Group<Option>) => ({
-                              ...option,
-                              children: remove(
-                                movedItemIndex,
-                                1,
-                                option.children,
-                              ),
-                            })),
-                          )(formik.values.groupedOptions),
-                        );
-                      },
-                      groups: formik.values.groupedOptions.map(
-                        (opt: Group<Option>) => opt.title,
-                      ),
-                    }}
-                  />
-                </Box>
-              </Box>
-            ),
-          )}
-          <Box mt={1}>
-            <Button
-              size="large"
-              onClick={() => {
-                formik.setFieldValue(`groupedOptions`, [
-                  ...formik.values.groupedOptions,
-                  {
-                    title: "",
-                    children: [],
-                  },
-                ]);
-              }}
-            >
-              add new group
-            </Button>
-          </Box>
-        </Box>
-      ) : (
-        <ListManager
-          values={formik.values.options || []}
-          onChange={(newOptions) => {
-            formik.setFieldValue("options", newOptions);
-          }}
-          newValueLabel="add new option"
-          newValue={() =>
-            ({
-              data: {
-                text: "",
-                description: "",
-                val: "",
-              },
-            }) as Option
-          }
-          Editor={OptionEditor}
-          editorExtraProps={{ showValueField: !!formik.values.fn }}
-        />
-      )}
-    </ModalSectionContent>
-  );
-};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx
deleted file mode 100644
index 034a5ecbea..0000000000
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from "react";
-import ImgInput from "ui/editor/ImgInput/ImgInput";
-import SimpleMenu from "ui/editor/SimpleMenu";
-import Input from "ui/shared/Input/Input";
-import InputRow from "ui/shared/InputRow";
-import InputRowItem from "ui/shared/InputRowItem";
-
-import { FlagsSelect } from "../../../shared/FlagsSelect";
-import { OptionEditorProps } from "../../types";
-
-export const OptionEditor: React.FC<OptionEditorProps> = (props) => {
-  return (
-    <div style={{ width: "100%" }}>
-      <InputRow>
-        {props.value.id ? (
-          <input type="hidden" value={props.value.id} readOnly />
-        ) : null}
-        <InputRowItem width="200%">
-          <Input
-            required
-            format="bold"
-            multiline
-            value={props.value.data.text || ""}
-            onChange={(ev) => {
-              props.onChange({
-                ...props.value,
-                data: {
-                  ...props.value.data,
-                  text: ev.target.value,
-                },
-              });
-            }}
-            placeholder="Option"
-          />
-        </InputRowItem>
-
-        <ImgInput
-          img={props.value.data.img}
-          onChange={(img) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                img,
-              },
-            });
-          }}
-        />
-
-        {typeof props.index !== "undefined" &&
-          props.groups &&
-          props.onMoveToGroup && (
-            <SimpleMenu
-              items={props.groups.map((group, groupIndex) => ({
-                label: `Move to ${group || `group ${groupIndex}`}`,
-                onClick: () => {
-                  props.onMoveToGroup &&
-                    typeof props.index === "number" &&
-                    props.onMoveToGroup(props.index, groupIndex);
-                },
-                disabled: groupIndex === props.groupIndex,
-              }))}
-            />
-          )}
-      </InputRow>
-
-      {props.showValueField && (
-        <InputRow>
-          <Input
-            format="data"
-            value={props.value.data.val || ""}
-            placeholder="Data Value"
-            onChange={(ev) => {
-              props.onChange({
-                ...props.value,
-                data: {
-                  ...props.value.data,
-                  val: ev.target.value,
-                },
-              });
-            }}
-          />
-        </InputRow>
-      )}
-
-      <FlagsSelect
-        value={
-          Array.isArray(props.value.data.flag)
-            ? props.value.data.flag
-            : [props.value.data.flag]
-        }
-        onChange={(ev) => {
-          props.onChange({
-            ...props.value,
-            data: {
-              ...props.value.data,
-              flag: ev,
-            },
-          });
-        }}
-      />
-    </div>
-  );
-};
diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index e60f851311..025590803b 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -10,14 +10,13 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
-import InputRowItem from "ui/shared/InputRowItem";
 import { Switch } from "ui/shared/Switch";
 
 import { InternalNotes } from "../../../ui/editor/InternalNotes";
 import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
 import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
-import { FlagsSelect } from "../shared/FlagsSelect";
 import { ICONS } from "../shared/icons";
+import { OptionEditor } from "../shared/OptionsEditor";
 
 interface Props {
   node: {
@@ -34,100 +33,6 @@ interface Props {
   handleSubmit?: Function;
 }
 
-const OptionEditor: React.FC<{
-  value: Option;
-  onChange: (newVal: Option) => void;
-  showValueField?: boolean;
-}> = (props) => (
-  <div style={{ width: "100%" }}>
-    <InputRow>
-      {props.value.id && (
-        <input type="hidden" value={props.value.id} readOnly />
-      )}
-      <InputRowItem width="200%">
-        <Input
-          required
-          format="bold"
-          multiline
-          value={props.value.data.text || ""}
-          onChange={(ev) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                text: ev.target.value,
-              },
-            });
-          }}
-          placeholder="Option"
-        />
-      </InputRowItem>
-      <ImgInput
-        img={props.value.data.img}
-        onChange={(img) => {
-          props.onChange({
-            ...props.value,
-            data: {
-              ...props.value.data,
-              img,
-            },
-          });
-        }}
-      />
-    </InputRow>
-    <InputRow>
-      <Input
-        value={props.value.data.description || ""}
-        placeholder="Description"
-        multiline
-        onChange={(ev) => {
-          props.onChange({
-            ...props.value,
-            data: {
-              ...props.value.data,
-              description: ev.target.value,
-            },
-          });
-        }}
-      />
-    </InputRow>
-    {props.showValueField && (
-      <InputRow>
-        <Input
-          format="data"
-          value={props.value.data.val || ""}
-          placeholder="Data Value"
-          onChange={(ev) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                val: ev.target.value,
-              },
-            });
-          }}
-        />
-      </InputRow>
-    )}
-    <FlagsSelect
-      value={
-        Array.isArray(props.value.data.flag)
-          ? props.value.data.flag
-          : [props.value.data.flag]
-      }
-      onChange={(ev) => {
-        props.onChange({
-          ...props.value,
-          data: {
-            ...props.value.data,
-            flag: ev,
-          },
-        });
-      }}
-    />
-  </div>
-);
-
 export const Question: React.FC<Props> = (props) => {
   const type = TYPES.Question;
 
@@ -247,7 +152,10 @@ export const Question: React.FC<Props> = (props) => {
               }) as Option
             }
             Editor={OptionEditor}
-            editorExtraProps={{ showValueField: !!formik.values.fn }}
+            editorExtraProps={{
+              showValueField: !!formik.values.fn,
+              showDescriptionField: true,
+            }}
           />
         </ModalSectionContent>
       </ModalSection>
diff --git a/editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx
new file mode 100644
index 0000000000..39227423ca
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx
@@ -0,0 +1,125 @@
+import React from "react";
+import ImgInput from "ui/editor/ImgInput/ImgInput";
+import SimpleMenu from "ui/editor/SimpleMenu";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+import InputRowItem from "ui/shared/InputRowItem";
+
+import { Option } from "../shared";
+import { FlagsSelect } from "../shared/FlagsSelect";
+
+export const OptionEditor: React.FC<{
+  value: Option;
+  onChange: (newVal: Option) => void;
+  showValueField?: boolean;
+  showDescriptionField?: boolean;
+  index: number;
+  groupIndex?: number;
+  groups?: Array<string>;
+  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
+}> = (props) => (
+  <div style={{ width: "100%" }}>
+    <InputRow>
+      {props.value.id && (
+        <input type="hidden" value={props.value.id} readOnly />
+      )}
+      <InputRowItem width="200%">
+        <Input
+          required
+          format="bold"
+          multiline
+          value={props.value.data.text || ""}
+          onChange={(ev) => {
+            props.onChange({
+              ...props.value,
+              data: {
+                ...props.value.data,
+                text: ev.target.value,
+              },
+            });
+          }}
+          placeholder="Option"
+        />
+      </InputRowItem>
+      <ImgInput
+        img={props.value.data.img}
+        onChange={(img) => {
+          props.onChange({
+            ...props.value,
+            data: {
+              ...props.value.data,
+              img,
+            },
+          });
+        }}
+      />
+    </InputRow>
+    <InputRow>
+      {props.showDescriptionField && (
+        <Input
+          value={props.value.data.description || ""}
+          placeholder="Description"
+          multiline
+          onChange={(ev) => {
+            props.onChange({
+              ...props.value,
+              data: {
+                ...props.value.data,
+                description: ev.target.value,
+              },
+            });
+          }}
+        />
+      )}
+      {typeof props.index !== "undefined" &&
+        props.groups &&
+        props.onMoveToGroup && (
+          <SimpleMenu
+            items={props.groups.map((group, groupIndex) => ({
+              label: `Move to ${group || `group ${groupIndex}`}`,
+              onClick: () => {
+                props.onMoveToGroup &&
+                  typeof props.index === "number" &&
+                  props.onMoveToGroup(props.index, groupIndex);
+              },
+              disabled: groupIndex === props.groupIndex,
+            }))}
+          />
+        )}
+    </InputRow>
+    {props.showValueField && (
+      <InputRow>
+        <Input
+          format="data"
+          value={props.value.data.val || ""}
+          placeholder="Data Value"
+          onChange={(ev) => {
+            props.onChange({
+              ...props.value,
+              data: {
+                ...props.value.data,
+                val: ev.target.value,
+              },
+            });
+          }}
+        />
+      </InputRow>
+    )}
+    <FlagsSelect
+      value={
+        Array.isArray(props.value.data.flag)
+          ? props.value.data.flag
+          : [props.value.data.flag]
+      }
+      onChange={(ev) => {
+        props.onChange({
+          ...props.value,
+          data: {
+            ...props.value.data,
+            flag: ev,
+          },
+        });
+      }}
+    />
+  </div>
+);

From cc9fe2485bac74fdc9105a77d26265e3759e39f7 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Thu, 5 Dec 2024 11:26:20 +0000
Subject: [PATCH 05/10] retrigger checks


From db6fe7f6443c6d64b56b7cfca74a6af4dc123192 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Thu, 5 Dec 2024 11:36:28 +0000
Subject: [PATCH 06/10] Remove redundant file

---
 .../Checklist/Editor/OptionsEditor.tsx        | 104 ------------------
 1 file changed, 104 deletions(-)
 delete mode 100644 editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
deleted file mode 100644
index 67bff66212..0000000000
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from "react";
-import ImgInput from "ui/editor/ImgInput/ImgInput";
-import SimpleMenu from "ui/editor/SimpleMenu";
-import Input from "ui/shared/Input/Input";
-import InputRow from "ui/shared/InputRow";
-import InputRowItem from "ui/shared/InputRowItem";
-
-import { FlagsSelect } from "../../shared/FlagsSelect";
-import { OptionEditorProps } from "../types";
-
-export const OptionEditor: React.FC<OptionEditorProps> = (props) => {
-  return (
-    <div style={{ width: "100%" }}>
-      <InputRow>
-        {props.value.id ? (
-          <input type="hidden" value={props.value.id} readOnly />
-        ) : null}
-        <InputRowItem width="200%">
-          <Input
-            required
-            format="bold"
-            multiline
-            value={props.value.data.text || ""}
-            onChange={(ev) => {
-              props.onChange({
-                ...props.value,
-                data: {
-                  ...props.value.data,
-                  text: ev.target.value,
-                },
-              });
-            }}
-            placeholder="Option"
-          />
-        </InputRowItem>
-
-        <ImgInput
-          img={props.value.data.img}
-          onChange={(img) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                img,
-              },
-            });
-          }}
-        />
-
-        {typeof props.index !== "undefined" &&
-          props.groups &&
-          props.onMoveToGroup && (
-            <SimpleMenu
-              items={props.groups.map((group, groupIndex) => ({
-                label: `Move to ${group || `group ${groupIndex}`}`,
-                onClick: () => {
-                  props.onMoveToGroup &&
-                    typeof props.index === "number" &&
-                    props.onMoveToGroup(props.index, groupIndex);
-                },
-                disabled: groupIndex === props.groupIndex,
-              }))}
-            />
-          )}
-      </InputRow>
-
-      {props.showValueField && (
-        <InputRow>
-          <Input
-            format="data"
-            value={props.value.data.val || ""}
-            placeholder="Data Value"
-            onChange={(ev) => {
-              props.onChange({
-                ...props.value,
-                data: {
-                  ...props.value.data,
-                  val: ev.target.value,
-                },
-              });
-            }}
-          />
-        </InputRow>
-      )}
-
-      <FlagsSelect
-        value={
-          Array.isArray(props.value.data.flag)
-            ? props.value.data.flag
-            : [props.value.data.flag]
-        }
-        onChange={(ev) => {
-          props.onChange({
-            ...props.value,
-            data: {
-              ...props.value.data,
-              flag: ev,
-            },
-          });
-        }}
-      />
-    </div>
-  );
-};

From 63eb8f27872dea56479140195371b5437a5148b6 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:25:03 +0000
Subject: [PATCH 07/10] Refactor to use BaseOptionseditor instead

---
 .../Checklist/Editor/OptionEditor.tsx         | 46 ++++++++++++++++
 .../components/Checklist/Editor/Options.tsx   |  7 ++-
 .../src/@planx/components/Checklist/types.ts  |  9 ---
 .../src/@planx/components/Question/Editor.tsx |  4 +-
 .../components/Question/OptionEditor.tsx      | 38 +++++++++++++
 ...ptionsEditor.tsx => BaseOptionsEditor.tsx} | 55 ++++---------------
 6 files changed, 100 insertions(+), 59 deletions(-)
 create mode 100644 editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx
 rename editor.planx.uk/src/@planx/components/shared/{OptionsEditor.tsx => BaseOptionsEditor.tsx} (58%)

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx
new file mode 100644
index 0000000000..1e54704039
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx
@@ -0,0 +1,46 @@
+import {
+  BaseOptionEditor,
+  BaseOptionEditorProps,
+} from "@planx/components/shared/BaseOptionsEditor";
+import React from "react";
+import SimpleMenu from "ui/editor/SimpleMenu";
+
+export type ChecklistOptionEditorProps = BaseOptionEditorProps & {
+  index: number;
+  groupIndex?: number;
+  groups?: Array<string>;
+  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
+  showValueField?: boolean;
+};
+
+const ChecklistOptionEditor: React.FC<ChecklistOptionEditorProps> = ({
+  value,
+  onChange,
+  showValueField = false,
+  groups,
+  onMoveToGroup,
+  index,
+}) => {
+  return (
+    <BaseOptionEditor
+      value={value}
+      onChange={onChange}
+      showValueField={showValueField}
+    >
+      {typeof index !== "undefined" && groups && onMoveToGroup && (
+        <SimpleMenu
+          items={groups.map((group, groupIndex) => ({
+            label: `Move to ${group || `group ${groupIndex}`}`,
+            onClick: () => {
+              if (onMoveToGroup && typeof index === "number")
+                onMoveToGroup(index, groupIndex);
+            },
+            disabled: groupIndex === groupIndex,
+          }))}
+        />
+      )}
+    </BaseOptionEditor>
+  );
+};
+
+export default ChecklistOptionEditor;
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
index 62229141dc..32f3dd88cd 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -2,7 +2,7 @@ import Delete from "@mui/icons-material/Delete";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
-import { OptionEditor } from "@planx/components/shared/OptionsEditor";
+import { BaseOptionEditor } from "@planx/components/shared/BaseOptionsEditor";
 import adjust from "ramda/src/adjust";
 import compose from "ramda/src/compose";
 import remove from "ramda/src/remove";
@@ -15,6 +15,7 @@ import InputRow from "ui/shared/InputRow";
 
 import { Option } from "../../shared";
 import type { Group } from "../model";
+import ChecklistOptionEditor from "./OptionEditor";
 
 export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
   return (
@@ -70,7 +71,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                       }) as Option
                     }
                     newValueLabel="add new option"
-                    Editor={OptionEditor}
+                    Editor={BaseOptionEditor}
                     editorExtraProps={{
                       groupIndex,
                       showValueField: !!formik.values.fn,
@@ -142,7 +143,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
               },
             }) as Option
           }
-          Editor={OptionEditor}
+          Editor={ChecklistOptionEditor}
           editorExtraProps={{ showValueField: !!formik.values.fn }}
         />
       )}
diff --git a/editor.planx.uk/src/@planx/components/Checklist/types.ts b/editor.planx.uk/src/@planx/components/Checklist/types.ts
index cdebd204ad..76ef9d47bd 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/types.ts
+++ b/editor.planx.uk/src/@planx/components/Checklist/types.ts
@@ -17,14 +17,5 @@ export interface ChecklistProps extends Checklist {
     } & BaseNodeData;
   };
 }
-export interface OptionEditorProps {
-  index: number;
-  value: Option;
-  onChange: (newVal: Option) => void;
-  groupIndex?: number;
-  groups?: Array<string>;
-  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
-  showValueField?: boolean;
-}
 
 export type Props = PublicProps<Checklist>;
diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index 025590803b..9130dde3cb 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -16,7 +16,7 @@ import { InternalNotes } from "../../../ui/editor/InternalNotes";
 import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
 import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
 import { ICONS } from "../shared/icons";
-import { OptionEditor } from "../shared/OptionsEditor";
+import QuestionOptionEditor from "./OptionEditor";
 
 interface Props {
   node: {
@@ -151,7 +151,7 @@ export const Question: React.FC<Props> = (props) => {
                 },
               }) as Option
             }
-            Editor={OptionEditor}
+            Editor={QuestionOptionEditor}
             editorExtraProps={{
               showValueField: !!formik.values.fn,
               showDescriptionField: true,
diff --git a/editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx b/editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx
new file mode 100644
index 0000000000..eb0e9a4996
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import Input from "ui/shared/Input/Input";
+
+import {
+  BaseOptionEditor,
+  BaseOptionEditorProps,
+} from "../shared/BaseOptionsEditor";
+
+const QuestionOptionEditor: React.FC<BaseOptionEditorProps> = ({
+  value,
+  onChange,
+  showValueField = false,
+}) => {
+  return (
+    <BaseOptionEditor
+      value={value}
+      onChange={onChange}
+      showValueField={showValueField}
+    >
+      <Input
+        value={value.data.description || ""}
+        placeholder="Description"
+        multiline
+        onChange={(ev) =>
+          onChange({
+            ...value,
+            data: {
+              ...value.data,
+              description: ev.target.value,
+            },
+          })
+        }
+      />
+    </BaseOptionEditor>
+  );
+};
+
+export default QuestionOptionEditor;
diff --git a/editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
similarity index 58%
rename from editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx
rename to editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
index 39227423ca..cebe5fd076 100644
--- a/editor.planx.uk/src/@planx/components/shared/OptionsEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
@@ -1,23 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import ImgInput from "ui/editor/ImgInput/ImgInput";
-import SimpleMenu from "ui/editor/SimpleMenu";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
-import { Option } from "../shared";
-import { FlagsSelect } from "../shared/FlagsSelect";
+import { Option } from ".";
+import { FlagsSelect } from "./FlagsSelect";
 
-export const OptionEditor: React.FC<{
+export interface BaseOptionEditorProps {
   value: Option;
-  onChange: (newVal: Option) => void;
   showValueField?: boolean;
-  showDescriptionField?: boolean;
-  index: number;
-  groupIndex?: number;
-  groups?: Array<string>;
-  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
-}> = (props) => (
+  onChange: (newVal: Option) => void;
+  children?: ReactNode;
+}
+
+export const BaseOptionEditor: React.FC<BaseOptionEditorProps> = (props) => (
   <div style={{ width: "100%" }}>
     <InputRow>
       {props.value.id && (
@@ -54,39 +51,7 @@ export const OptionEditor: React.FC<{
         }}
       />
     </InputRow>
-    <InputRow>
-      {props.showDescriptionField && (
-        <Input
-          value={props.value.data.description || ""}
-          placeholder="Description"
-          multiline
-          onChange={(ev) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                description: ev.target.value,
-              },
-            });
-          }}
-        />
-      )}
-      {typeof props.index !== "undefined" &&
-        props.groups &&
-        props.onMoveToGroup && (
-          <SimpleMenu
-            items={props.groups.map((group, groupIndex) => ({
-              label: `Move to ${group || `group ${groupIndex}`}`,
-              onClick: () => {
-                props.onMoveToGroup &&
-                  typeof props.index === "number" &&
-                  props.onMoveToGroup(props.index, groupIndex);
-              },
-              disabled: groupIndex === props.groupIndex,
-            }))}
-          />
-        )}
-    </InputRow>
+    {props.children && <InputRow>{props.children}</InputRow>}
     {props.showValueField && (
       <InputRow>
         <Input

From dacbb0f13ff20a098d36deeb19dd3ea165cb6cdb Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:28:35 +0000
Subject: [PATCH 08/10] consistent renaming

---
 .../@planx/components/Checklist/Editor/Options.tsx |  8 ++++----
 .../Editor/{OptionEditor.tsx => OptionsEditor.tsx} | 14 +++++++-------
 .../src/@planx/components/Question/Editor.tsx      |  4 ++--
 .../{OptionEditor.tsx => OptionsEditor.tsx}        | 12 ++++++------
 .../@planx/components/shared/BaseOptionsEditor.tsx |  4 ++--
 5 files changed, 21 insertions(+), 21 deletions(-)
 rename editor.planx.uk/src/@planx/components/Checklist/Editor/{OptionEditor.tsx => OptionsEditor.tsx} (77%)
 rename editor.planx.uk/src/@planx/components/Question/{OptionEditor.tsx => OptionsEditor.tsx} (75%)

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
index 32f3dd88cd..876626f6c2 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -2,7 +2,7 @@ import Delete from "@mui/icons-material/Delete";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
-import { BaseOptionEditor } from "@planx/components/shared/BaseOptionsEditor";
+import { BaseOptionsEditor } from "@planx/components/shared/BaseOptionsEditor";
 import adjust from "ramda/src/adjust";
 import compose from "ramda/src/compose";
 import remove from "ramda/src/remove";
@@ -15,7 +15,7 @@ import InputRow from "ui/shared/InputRow";
 
 import { Option } from "../../shared";
 import type { Group } from "../model";
-import ChecklistOptionEditor from "./OptionEditor";
+import ChecklistOptionsEditor from "./OptionsEditor";
 
 export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
   return (
@@ -71,7 +71,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                       }) as Option
                     }
                     newValueLabel="add new option"
-                    Editor={BaseOptionEditor}
+                    Editor={BaseOptionsEditor}
                     editorExtraProps={{
                       groupIndex,
                       showValueField: !!formik.values.fn,
@@ -143,7 +143,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
               },
             }) as Option
           }
-          Editor={ChecklistOptionEditor}
+          Editor={ChecklistOptionsEditor}
           editorExtraProps={{ showValueField: !!formik.values.fn }}
         />
       )}
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
similarity index 77%
rename from editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx
rename to editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
index 1e54704039..bb4dfb6e41 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
@@ -1,11 +1,11 @@
 import {
-  BaseOptionEditor,
-  BaseOptionEditorProps,
+  BaseOptionsEditor,
+  BaseOptionsEditorProps,
 } from "@planx/components/shared/BaseOptionsEditor";
 import React from "react";
 import SimpleMenu from "ui/editor/SimpleMenu";
 
-export type ChecklistOptionEditorProps = BaseOptionEditorProps & {
+export type ChecklistOptionsEditorProps = BaseOptionsEditorProps & {
   index: number;
   groupIndex?: number;
   groups?: Array<string>;
@@ -13,7 +13,7 @@ export type ChecklistOptionEditorProps = BaseOptionEditorProps & {
   showValueField?: boolean;
 };
 
-const ChecklistOptionEditor: React.FC<ChecklistOptionEditorProps> = ({
+const ChecklistOptionsEditor: React.FC<ChecklistOptionsEditorProps> = ({
   value,
   onChange,
   showValueField = false,
@@ -22,7 +22,7 @@ const ChecklistOptionEditor: React.FC<ChecklistOptionEditorProps> = ({
   index,
 }) => {
   return (
-    <BaseOptionEditor
+    <BaseOptionsEditor
       value={value}
       onChange={onChange}
       showValueField={showValueField}
@@ -39,8 +39,8 @@ const ChecklistOptionEditor: React.FC<ChecklistOptionEditorProps> = ({
           }))}
         />
       )}
-    </BaseOptionEditor>
+    </BaseOptionsEditor>
   );
 };
 
-export default ChecklistOptionEditor;
+export default ChecklistOptionsEditor;
diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index 9130dde3cb..923ae811e8 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -16,7 +16,7 @@ import { InternalNotes } from "../../../ui/editor/InternalNotes";
 import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
 import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
 import { ICONS } from "../shared/icons";
-import QuestionOptionEditor from "./OptionEditor";
+import QuestionOptionsEditor from "./OptionsEditor";
 
 interface Props {
   node: {
@@ -151,7 +151,7 @@ export const Question: React.FC<Props> = (props) => {
                 },
               }) as Option
             }
-            Editor={QuestionOptionEditor}
+            Editor={QuestionOptionsEditor}
             editorExtraProps={{
               showValueField: !!formik.values.fn,
               showDescriptionField: true,
diff --git a/editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx b/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
similarity index 75%
rename from editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx
rename to editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
index eb0e9a4996..45ecd24e44 100644
--- a/editor.planx.uk/src/@planx/components/Question/OptionEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
@@ -2,17 +2,17 @@ import React from "react";
 import Input from "ui/shared/Input/Input";
 
 import {
-  BaseOptionEditor,
-  BaseOptionEditorProps,
+  BaseOptionsEditor,
+  BaseOptionsEditorProps,
 } from "../shared/BaseOptionsEditor";
 
-const QuestionOptionEditor: React.FC<BaseOptionEditorProps> = ({
+const QuestionOptionsEditor: React.FC<BaseOptionsEditorProps> = ({
   value,
   onChange,
   showValueField = false,
 }) => {
   return (
-    <BaseOptionEditor
+    <BaseOptionsEditor
       value={value}
       onChange={onChange}
       showValueField={showValueField}
@@ -31,8 +31,8 @@ const QuestionOptionEditor: React.FC<BaseOptionEditorProps> = ({
           })
         }
       />
-    </BaseOptionEditor>
+    </BaseOptionsEditor>
   );
 };
 
-export default QuestionOptionEditor;
+export default QuestionOptionsEditor;
diff --git a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
index cebe5fd076..f6bb6f8340 100644
--- a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
@@ -7,14 +7,14 @@ import InputRowItem from "ui/shared/InputRowItem";
 import { Option } from ".";
 import { FlagsSelect } from "./FlagsSelect";
 
-export interface BaseOptionEditorProps {
+export interface BaseOptionsEditorProps {
   value: Option;
   showValueField?: boolean;
   onChange: (newVal: Option) => void;
   children?: ReactNode;
 }
 
-export const BaseOptionEditor: React.FC<BaseOptionEditorProps> = (props) => (
+export const BaseOptionsEditor: React.FC<BaseOptionsEditorProps> = (props) => (
   <div style={{ width: "100%" }}>
     <InputRow>
       {props.value.id && (

From 688bff63ff36835cc53f9557aa700bc86a17637c Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:30:55 +0000
Subject: [PATCH 09/10] Tidy up

---
 .../src/@planx/components/Checklist/Editor/Options.tsx       | 3 +--
 editor.planx.uk/src/@planx/components/Question/Editor.tsx    | 5 +----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
index 876626f6c2..388c021dac 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -2,7 +2,6 @@ import Delete from "@mui/icons-material/Delete";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
-import { BaseOptionsEditor } from "@planx/components/shared/BaseOptionsEditor";
 import adjust from "ramda/src/adjust";
 import compose from "ramda/src/compose";
 import remove from "ramda/src/remove";
@@ -71,7 +70,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                       }) as Option
                     }
                     newValueLabel="add new option"
-                    Editor={BaseOptionsEditor}
+                    Editor={ChecklistOptionsEditor}
                     editorExtraProps={{
                       groupIndex,
                       showValueField: !!formik.values.fn,
diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index 923ae811e8..bf61ce94ed 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -152,10 +152,7 @@ export const Question: React.FC<Props> = (props) => {
               }) as Option
             }
             Editor={QuestionOptionsEditor}
-            editorExtraProps={{
-              showValueField: !!formik.values.fn,
-              showDescriptionField: true,
-            }}
+            editorExtraProps={{ showValueField: !!formik.values.fn }}
           />
         </ModalSectionContent>
       </ModalSection>

From d91ce15c1e2f0cb844537206f2b17ab2bbccbcc1 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:26:26 +0000
Subject: [PATCH 10/10] Fix UI issue

---
 .../components/Question/OptionsEditor.tsx     | 19 ++---------------
 .../components/shared/BaseOptionsEditor.tsx   | 21 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
index 45ecd24e44..d9e0c4792b 100644
--- a/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Input from "ui/shared/Input/Input";
 
 import {
   BaseOptionsEditor,
@@ -16,22 +15,8 @@ const QuestionOptionsEditor: React.FC<BaseOptionsEditorProps> = ({
       value={value}
       onChange={onChange}
       showValueField={showValueField}
-    >
-      <Input
-        value={value.data.description || ""}
-        placeholder="Description"
-        multiline
-        onChange={(ev) =>
-          onChange({
-            ...value,
-            data: {
-              ...value.data,
-              description: ev.target.value,
-            },
-          })
-        }
-      />
-    </BaseOptionsEditor>
+      showDescriptionField={true}
+    />
   );
 };
 
diff --git a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
index f6bb6f8340..702c843868 100644
--- a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
@@ -10,6 +10,7 @@ import { FlagsSelect } from "./FlagsSelect";
 export interface BaseOptionsEditorProps {
   value: Option;
   showValueField?: boolean;
+  showDescriptionField?: boolean;
   onChange: (newVal: Option) => void;
   children?: ReactNode;
 }
@@ -50,8 +51,26 @@ export const BaseOptionsEditor: React.FC<BaseOptionsEditorProps> = (props) => (
           });
         }}
       />
+      {props.children}
     </InputRow>
-    {props.children && <InputRow>{props.children}</InputRow>}
+    {props.showDescriptionField && (
+      <InputRow>
+        <Input
+          value={props.value.data.description || ""}
+          placeholder="Description"
+          multiline
+          onChange={(ev) =>
+            props.onChange({
+              ...props.value,
+              data: {
+                ...props.value.data,
+                description: ev.target.value,
+              },
+            })
+          }
+        />
+      </InputRow>
+    )}
     {props.showValueField && (
       <InputRow>
         <Input