feat: auto-answer one at a time, not into the future

editor.planx.uk/src/@planx/components/Checklist/Public.tsx

@@ -12,7 +12,8 @@ import ImageButton from "@planx/components/shared/Buttons/ImageButton";
 import Card from "@planx/components/shared/Preview/Card";
 import CardHeader from "@planx/components/shared/Preview/CardHeader";
 import { getIn, useFormik } from "formik";
-import React, { useState } from "react";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { useEffect, useState } from "react";
 import { ExpandableList, ExpandableListItem } from "ui/public/ExpandableList";
 import FormWrapper from "ui/public/FormWrapper";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
@@ -38,6 +39,37 @@ function toggleInArray<T>(value: T, arr: Array<T>): Array<T> {
 }
 
 const ChecklistComponent: React.FC<Props> = (props) => {
+  const autoAnswerableOptions = useStore(
+    (state) => state.autoAnswerableOptions,
+  );
+
+  let idsThatCanBeAutoAnswered: string[] | undefined;
+  if (props.id) idsThatCanBeAutoAnswered = autoAnswerableOptions(props.id);
+
+  if (idsThatCanBeAutoAnswered && idsThatCanBeAutoAnswered.length > 0) {
+    return (
+      <AutoAnsweredChecklist {...props} answerIds={idsThatCanBeAutoAnswered} />
+    );
+  } else {
+    return <VisibleChecklist {...props} />;
+  }
+};
+
+// An auto-answered Checklist won't be seen by the user, but still leaves a breadcrumb
+const AutoAnsweredChecklist: React.FC<Props & { answerIds: string[] }> = (
+  props,
+) => {
+  useEffect(() => {
+    props.handleSubmit?.({
+      answers: props.answerIds,
+      auto: true,
+    });
+  }, []);
+
+  return null;
+};
+
+const VisibleChecklist: React.FC<Props> = (props) => {
   const {
     description = "",
     groupedOptions,

editor.planx.uk/src/@planx/components/Filter/Public.tsx

@@ -0,0 +1,26 @@
+import type { PublicProps } from "@planx/components/ui";
+import { useStore } from "pages/FlowEditor/lib/store";
+import { useEffect } from "react";
+
+import type { Filter } from "./model";
+
+export type Props = PublicProps<Filter>;
+
+// A Filter is always auto-answered and never seen by a user, but should still leave a breadcrumb
+export default function Component(props: Props) {
+  const autoAnswerableOptions = useStore(
+    (state) => state.autoAnswerableOptions,
+  );
+
+  let idsThatCanBeAutoAnswered: string[] | undefined;
+  if (props.id) idsThatCanBeAutoAnswered = autoAnswerableOptions(props.id);
+
+  useEffect(() => {
+    props.handleSubmit?.({
+      answers: idsThatCanBeAutoAnswered,
+      auto: true,
+    });
+  }, []);
+
+  return null;
+}

editor.planx.uk/src/@planx/components/Question/Public/Question.tsx

@@ -3,13 +3,15 @@ import FormLabel from "@mui/material/FormLabel";
 import Grid from "@mui/material/Grid";
 import RadioGroup from "@mui/material/RadioGroup";
 import { visuallyHidden } from "@mui/utils";
+import { Edges } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
 import CardHeader from "@planx/components/shared/Preview/CardHeader";
 import BasicRadio from "@planx/components/shared/Radio/BasicRadio";
 import DescriptionRadio from "@planx/components/shared/Radio/DescriptionRadio";
 import ImageRadio from "@planx/components/shared/Radio/ImageRadio";
 import { useFormik } from "formik";
-import React from "react";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { useEffect } from "react";
 import FormWrapper from "ui/public/FormWrapper";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
@@ -24,6 +26,45 @@ export enum QuestionLayout {
 }
 
 const QuestionComponent: React.FC<Question> = (props) => {
+  const [flow, autoAnswerableOptions] = useStore((state) => [
+    state.flow,
+    state.autoAnswerableOptions,
+  ]);
+
+  // Questions without edges function like 'sticky notes' in the graph for editors only
+  let edges: Edges | undefined;
+  if (props.id) edges = flow[props.id]?.edges;
+  if (!edges || edges.length === 0) {
+    return <AutoAnsweredQuestion {...props} answerIds={undefined} />;
+  }
+
+  let idsThatCanBeAutoAnswered: string[] | undefined;
+  if (props.id) idsThatCanBeAutoAnswered = autoAnswerableOptions(props.id);
+
+  if (idsThatCanBeAutoAnswered && idsThatCanBeAutoAnswered.length > 0) {
+    return (
+      <AutoAnsweredQuestion {...props} answerIds={idsThatCanBeAutoAnswered} />
+    );
+  } else {
+    return <VisibleQuestion {...props} />;
+  }
+};
+
+// An auto-answered Question won't be seen by the user, but still leaves a breadcrumb
+const AutoAnsweredQuestion: React.FC<
+  Question & { answerIds: string[] | undefined }
+> = (props) => {
+  useEffect(() => {
+    props.handleSubmit?.({
+      answers: props.answerIds,
+      auto: true,
+    });
+  }, []);
+
+  return null;
+};
+
+const VisibleQuestion: React.FC<Question> = (props) => {
   const previousResponseId = props?.previouslySubmittedData?.answers?.[0];
   const previousResponseKey = props.responses.find(
     (response) => response.id === previousResponseId,