Production deploy

editor.planx.uk/.eslintrc

@@ -87,7 +87,15 @@
         }
       }
     ],
-    "no-nested-ternary": "error"
+    "no-nested-ternary": "error",
+    "@vitest/expect-expect": [
+      "error",
+      {
+        "assertFunctionNames": [
+          "expect"
+        ]
+      }
+    ]
   },
   "overrides": [
     {

editor.planx.uk/package.json

@@ -14,7 +14,7 @@
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
-    "@opensystemslab/map": "1.0.0-alpha.3",
+    "@opensystemslab/map": "1.0.0-alpha.4",
     "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#54be9e0",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",

editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx

@@ -1,15 +1,12 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import {
-  EditorProps,
-  ICONS,
-} from "@planx/components/ui";
+import { EditorProps, ICONS } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
-import RichTextInput from "ui/editor/RichTextInput";
-import Input from "ui/shared/Input";
+import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
+import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
 import { AddressInput, parseAddressInput } from "./model";

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

@@ -4,7 +4,7 @@ import type { PublicProps } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
 import InputLabel from "ui/public/InputLabel";
-import Input from "ui/shared/Input";
+import Input from "ui/shared/Input/Input";
 import InputRowItem from "ui/shared/InputRowItem";
 
 import { ERROR_MESSAGE } from "../shared/constants";

editor.planx.uk/src/@planx/components/Calculate/Editor.tsx

@@ -10,7 +10,7 @@ import InputGroup from "ui/editor/InputGroup";
 import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
-import Input from "ui/shared/Input";
+import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
 import type { Calculate } from "./model";

editor.planx.uk/src/@planx/components/Calculate/logic.test.ts

@@ -1,11 +1,9 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { clickContinue, visitedNodes } from "pages/FlowEditor/lib/__tests__/utils";
 import { Store, useStore } from "pages/FlowEditor/lib/store";
 
 const { getState, setState } = useStore;
-const { upcomingCardIds, resetPreview, record } = getState();
-
-// Helper method
-const visitedNodes = () => Object.keys(getState().breadcrumbs);
+const { upcomingCardIds, resetPreview, autoAnswerableOptions } = getState();
 
 beforeEach(() => {
   resetPreview();
@@ -17,13 +15,12 @@ test("When formatOutputForAutomations is true, Calculate writes an array and fut
   expect(upcomingCardIds()).toEqual(["Calculate", "Question"]);
 
   // Step forwards through the Calculate
-  record("Calculate", { data: { testGroup: ["2"] }, auto: true });
-  upcomingCardIds();
-
-  // The Question has been auto-answered
-  expect(visitedNodes()).toEqual(["Calculate", "Question"]);
+  clickContinue("Calculate", { data: { testGroup: ["2"] }, auto: true });
 
-  expect(upcomingCardIds()).toEqual(["Group2Notice"]);
+  // The Question can be auto-answered
+  expect(visitedNodes()).toEqual(["Calculate"]);
+  expect(upcomingCardIds()).toEqual(["Question"])
+  expect(autoAnswerableOptions("Question")).toEqual(["Group2Response"]);
 });
 
 test("When formatOutputForAutomations is false, Calculate writes a number and future questions are not auto-answered", () => {
@@ -32,13 +29,12 @@ test("When formatOutputForAutomations is false, Calculate writes a number and fu
   expect(upcomingCardIds()).toEqual(["Calculate", "Question"]);
 
   // Step forwards through the Calculate
-  record("Calculate", { data: { testGroup: 2 }, auto: true });
-  upcomingCardIds();
+  clickContinue("Calculate", { data: { testGroup: 2 }, auto: true });
 
-  // The Question has NOT been auto-answered
+  // The Question cannot be auto-answered
   expect(visitedNodes()).toEqual(["Calculate"]);
-
   expect(upcomingCardIds()).toEqual(["Question"]);
+  expect(autoAnswerableOptions("Question")).toBeUndefined();
 });
 
 const flowWithAutomation: Store.Flow = {

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

@@ -11,15 +11,15 @@ import compose from "ramda/src/compose";
 import remove from "ramda/src/remove";
 import React, { useEffect, useRef } from "react";
 import { FormikHookReturn } from "types";
-import ImgInput from "ui/editor/ImgInput";
+import ImgInput from "ui/editor/ImgInput/ImgInput";
 import InputGroup from "ui/editor/InputGroup";
-import ListManager from "ui/editor/ListManager";
+import ListManager from "ui/editor/ListManager/ListManager";
 import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
-import RichTextInput from "ui/editor/RichTextInput";
+import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import SimpleMenu from "ui/editor/SimpleMenu";
-import Input from "ui/shared/Input";
+import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
@@ -35,6 +35,7 @@ export interface ChecklistProps extends Checklist {
   node?: {
     data?: {
       allRequired?: boolean;
+      neverAutoAnswer?: boolean;
       categories?: Array<Category>;
       description?: string;
       fn?: string;
@@ -285,6 +286,7 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
   const formik = useFormik<Checklist>({
     initialValues: {
       allRequired: props.node?.data?.allRequired || false,
+      neverAutoAnswer: props.node?.data?.neverAutoAnswer || false,
       description: props.node?.data?.description || "",
       fn: props.node?.data?.fn || "",
       groupedOptions: props.groupedOptions,
@@ -422,6 +424,22 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
                 label="All required"
               />
             </InputRow>
+            <InputRow>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={formik.values.neverAutoAnswer}
+                    onChange={() =>
+                      formik.setFieldValue(
+                        "neverAutoAnswer",
+                        !formik.values.neverAutoAnswer,
+                      )
+                    }
+                  />
+                }
+                label="Always put to user (forgo automation)"
+              />
+            </InputRow>
           </InputGroup>
         </ModalSectionContent>
 

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

@@ -12,11 +12,12 @@ import ImageButton from "@planx/components/shared/Buttons/ImageButton";
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/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";
-import ChecklistItem from "ui/shared/ChecklistItem";
+import ChecklistItem from "ui/shared/ChecklistItem/ChecklistItem";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 import { object } from "yup";
 
@@ -38,6 +39,40 @@ function toggleInArray<T>(value: T, arr: Array<T>): Array<T> {
 }
 
 const ChecklistComponent: React.FC<Props> = (props) => {
+  const autoAnswerableOptions = useStore(
+    (state) => state.autoAnswerableOptions,
+  );
+
+  if (props.neverAutoAnswer) {
+    return <VisibleChecklist {...props} />;
+  }
+
+  let idsThatCanBeAutoAnswered: string[] | undefined;
+  if (props.id) idsThatCanBeAutoAnswered = autoAnswerableOptions(props.id);
+  if (idsThatCanBeAutoAnswered) {
+    return (
+      <AutoAnsweredChecklist {...props} answerIds={idsThatCanBeAutoAnswered} />
+    );
+  }
+
+  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,
@@ -168,9 +203,8 @@ const ChecklistComponent: React.FC<Props> = (props) => {
                             pb={2}
                             aria-labelledby={`group-${index}-heading`}
                             id={`group-${index}-content`}
-                            data-testid={`group-${index}${
-                              isExpanded ? "-expanded" : ""
-                            }`}
+                            data-testid={`group-${index}${isExpanded ? "-expanded" : ""
+                              }`}
                           >
                             {group.children.map((option) => (
                               <ChecklistItem

editor.planx.uk/src/@planx/components/Checklist/model.ts

@@ -22,6 +22,7 @@ export interface Checklist extends BaseNodeData {
   img?: string;
   allRequired?: boolean;
   categories?: Array<Category>;
+  neverAutoAnswer?: boolean;
 }
 
 interface ChecklistExpandableProps {

editor.planx.uk/src/@planx/components/Confirmation/Editor.tsx

@@ -5,11 +5,11 @@ import { useFormik } from "formik";
 import React, { ChangeEvent } from "react";
 import ListManager, {
   EditorProps as ListManagerEditorProps,
-} from "ui/editor/ListManager";
+} from "ui/editor/ListManager/ListManager";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
-import RichTextInput from "ui/editor/RichTextInput";
-import Input from "ui/shared/Input";
+import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
+import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
 import { Confirmation, parseNextSteps, Step } from "./model";

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

@@ -11,7 +11,7 @@ import React, { useEffect, useState } from "react";
 import Banner from "ui/public/Banner";
 import FileDownload from "ui/public/FileDownload";
 import NumberedList from "ui/public/NumberedList";
-import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
+import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml/ReactMarkdownOrHtml";
 
 import type { Confirmation } from "./model";
 

editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx

@@ -1,15 +1,12 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import {
-  EditorProps,
-  ICONS,
-} from "@planx/components/ui";
+import { EditorProps, ICONS } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
-import RichTextInput from "ui/editor/RichTextInput";
-import Input from "ui/shared/Input";
+import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
+import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
 import { ContactInput, parseContactInput } from "./model";

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

@@ -4,7 +4,7 @@ import type { PublicProps } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
 import InputLabel from "ui/public/InputLabel";
-import Input from "ui/shared/Input";
+import Input from "ui/shared/Input/Input";
 import InputRowItem from "ui/shared/InputRowItem";
 
 import { ERROR_MESSAGE } from "../shared/constants";

editor.planx.uk/src/@planx/components/Content/Editor.tsx

@@ -1,17 +1,14 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import type { Content } from "@planx/components/Content/model";
 import { parseContent } from "@planx/components/Content/model";
-import {
-  EditorProps,
-  ICONS,
-} from "@planx/components/ui";
+import { EditorProps, ICONS } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
-import ColorPicker from "ui/editor/ColorPicker";
+import ColorPicker from "ui/editor/ColorPicker/ColorPicker";
 import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
-import RichTextInput from "ui/editor/RichTextInput";
+import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import InputRow from "ui/shared/InputRow";
 
 export type Props = EditorProps<TYPES.Content, Content>;

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

@@ -9,8 +9,8 @@ import { PublicProps } from "@planx/components/ui";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
 import React from "react";
 import { getContrastTextColor } from "styleUtils";
-import { emptyContent } from "ui/editor/RichTextInput";
-import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
+import { emptyContent } from "ui/editor/RichTextInput/RichTextInput";
+import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml/ReactMarkdownOrHtml";
 
 import { HelpButton, Image } from "../shared/Preview/CardHeader/styled";
 import MoreInfo from "../shared/Preview/MoreInfo";

editor.planx.uk/src/@planx/components/DateInput/Editor.tsx

@@ -4,20 +4,17 @@ import {
   DateInput,
   editorValidationSchema,
   paddedDate,
+  parseDateInput,
 } from "@planx/components/DateInput/model";
-import { parseDateInput } from "@planx/components/DateInput/model";
-import {
-  EditorProps,
-  ICONS,
-} from "@planx/components/ui";
+import { EditorProps, ICONS } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
-import RichTextInput from "ui/editor/RichTextInput";
-import DateInputUi from "ui/shared/DateInput";
-import Input from "ui/shared/Input";
+import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
+import DateInputUi from "ui/shared/DateInput/DateInput";
+import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
 export type Props = EditorProps<TYPES.DateInput, DateInput>;

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

@@ -10,7 +10,7 @@ import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHead
 import { PublicProps } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
-import DateInputComponent from "ui/shared/DateInput";
+import DateInputComponent from "ui/shared/DateInput/DateInput";
 import InputRow from "ui/shared/InputRow";
 import { object } from "yup";