feat: Add _requestedFiles key to Passport

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

@@ -62,7 +62,7 @@ function Component(props: any) {
           </InputRow>
           <InputRow>
             <Input
-              // required
+              required
               format="data"
               name="fn"
               value={formik.values.fn}

editor.planx.uk/src/@planx/components/FileUpload/FileUpload.stories.tsx

@@ -16,6 +16,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic = {
   args: {
+    fn: "roofPlan",
     title: "Upload roof plan",
     description:
       "The plan should show the roof of the building as it looks today.",

editor.planx.uk/src/@planx/components/FileUpload/Public.test.tsx

@@ -3,47 +3,32 @@ import { uniqueId } from "lodash";
 import React from "react";
 import { axe, setup } from "testUtils";
 
+import { PASSPORT_REQUESTED_FILES_KEY } from "../FileUploadAndLabel/model";
 import FileUpload from "./Public";
 
 test("renders correctly and blocks submit if there are no files added", async () => {
   const handleSubmit = jest.fn();
 
-  setup(<FileUpload handleSubmit={handleSubmit} />);
+  setup(<FileUpload fn="someKey" handleSubmit={handleSubmit} />);
 
   expect(screen.getByRole("button", { name: "Continue" })).toBeDisabled();
 
   expect(handleSubmit).toHaveBeenCalledTimes(0);
 });
 
 test("recovers previously submitted files when clicking the back button", async () => {
-  const handleSubmit = jest.fn();
-  const componentId = uniqueId();
-  const uploadedFile = {
-    data: {
-      [componentId]: [dummyFile],
-    },
-  };
-
-  const { user } = setup(
-    <FileUpload
-      id={componentId}
-      handleSubmit={handleSubmit}
-      previouslySubmittedData={uploadedFile}
-    />,
-  );
-
-  await user.click(screen.getByTestId("continue-button"));
-
-  expect(handleSubmit).toHaveBeenCalledWith(uploadedFile);
-});
-
-test("recovers previously submitted files when clicking the back button even if a data field is set", async () => {
   const handleSubmit = jest.fn();
   const componentId = uniqueId();
   const dataField = "data-field";
   const uploadedFile = {
     data: {
       [dataField]: [dummyFile],
+      [PASSPORT_REQUESTED_FILES_KEY]: [
+        {
+          fn: dataField,
+          condition: "AlwaysRequired",
+        },
+      ],
     },
   };
 
@@ -85,6 +70,7 @@ it("should not have any accessibility violations", async () => {
 
   const { container } = setup(
     <FileUpload
+      fn="someKey"
       id={componentId}
       handleSubmit={handleSubmit}
       description="description"

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

@@ -1,20 +1,25 @@
 import { MoreInformation } from "@planx/components/shared";
 import Card from "@planx/components/shared/Preview/Card";
 import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader";
-import { Store } from "pages/FlowEditor/lib/store";
+import { Store, useStore } from "pages/FlowEditor/lib/store";
 import type { handleSubmit } from "pages/Preview/Node";
 import React, { useEffect, useRef, useState } from "react";
 import { FileWithPath } from "react-dropzone";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 import { array } from "yup";
 
+import {
+  Condition,
+  PASSPORT_REQUESTED_FILES_KEY,
+  RequestedFile,
+} from "../FileUploadAndLabel/model";
 import { PrivateFileUpload } from "../shared/PrivateFileUpload/PrivateFileUpload";
 import { getPreviouslySubmittedData, makeData } from "../shared/utils";
 
 interface Props extends MoreInformation {
   id?: string;
   title?: string;
-  fn?: string;
+  fn: string;
   description?: string;
   handleSubmit: handleSubmit;
   previouslySubmittedData?: Store.userData;
@@ -50,27 +55,46 @@ const FileUpload: React.FC<Props> = (props) => {
   const [slots, setSlots] = useState<FileUploadSlot[]>(recoveredSlots ?? []);
   const [validationError, setValidationError] = useState<string>();
 
+  const existingRequestedFiles: RequestedFile[] =
+    useStore(
+      (state) => state.computePassport().data?.[PASSPORT_REQUESTED_FILES_KEY],
+    ) || [];
+
+  const requestedFile: RequestedFile = {
+    fn: props.fn,
+    condition: Condition.AlwaysRequired,
+  };
+
+  const uploadedFiles = (slots: FileUploadSlot[]) =>
+    makeData(
+      props,
+      slots.map((slot) => ({
+        url: slot.url,
+        filename: slot.file.path,
+        cachedSlot: {
+          ...slot,
+          file: {
+            path: slot.file.path,
+            type: slot.file.type,
+            size: slot.file.size,
+          },
+        },
+      })),
+    );
+
   const handleSubmit = () => {
     slotsSchema
       .validate(slots)
       .then(() => {
-        props.handleSubmit(
-          makeData(
-            props,
-            slots.map((slot) => ({
-              url: slot.url,
-              filename: slot.file.path,
-              cachedSlot: {
-                ...slot,
-                file: {
-                  path: slot.file.path,
-                  type: slot.file.type,
-                  size: slot.file.size,
-                },
-              },
-            })),
-          ),
-        );
+        props.handleSubmit({
+          data: {
+            ...uploadedFiles(slots).data,
+            [PASSPORT_REQUESTED_FILES_KEY]: [
+              ...existingRequestedFiles,
+              requestedFile,
+            ],
+          },
+        });
       })
       .catch((err) => {
         setValidationError(err.message);

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

@@ -1,12 +1,19 @@
 import cloneDeep from "lodash/cloneDeep";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
-import { Store } from "pages/FlowEditor/lib/store";
+import { Store, useStore } from "pages/FlowEditor/lib/store";
 import { FileWithPath } from "react-dropzone";
 
 import { FileUploadSlot } from "../FileUpload/Public";
 import { MoreInformation, parseMoreInformation } from "../shared";
 
+export const PASSPORT_REQUESTED_FILES_KEY = "_requestedFiles" as const;
+
+export interface RequestedFile {
+  fn: string;
+  condition: Condition;
+}
+
 /**
  * Conditions which can apply to a rule
  * Order is significant - these represent the hierarchy of these rules
@@ -220,6 +227,11 @@ const formatUserFiles = (userFile: UserFileWithSlots): FormattedUserFile[] =>
     },
   }));
 
+const formatRequestedFiles = ({
+  fn,
+  rule: { condition },
+}: FileType): RequestedFile => ({ fn, condition });
+
 /**
  * Type guard to coerce UserFile -> UserFileWithSlot
  */
@@ -233,17 +245,32 @@ const hasSlots = (userFile: UserFile): userFile is UserFileWithSlots =>
 export const generatePayload = (fileList: FileList): Store.userData => {
   const newPassportData: Store.userData["data"] = {};
 
-  const uploadedFiles = [
+  const requestedFiles = [
     ...fileList.required,
     ...fileList.recommended,
     ...fileList.optional,
-  ].filter(hasSlots);
+  ];
+
+  const uploadedFiles = requestedFiles.filter(hasSlots);
 
   uploadedFiles.forEach((userFile) => {
     newPassportData[userFile.fn] = formatUserFiles(userFile);
   });
 
-  return { data: newPassportData };
+  const existingRequestedFiles: FileType[] =
+    useStore.getState().computePassport().data?.[
+      PASSPORT_REQUESTED_FILES_KEY
+    ] || [];
+
+  return {
+    data: {
+      ...newPassportData,
+      [PASSPORT_REQUESTED_FILES_KEY]: [
+        ...existingRequestedFiles,
+        ...requestedFiles.map(formatRequestedFiles),
+      ],
+    },
+  };
 };
 
 const getCachedSlotsFromPreviousData = (

editor.planx.uk/src/@planx/components/shared/utils.ts

@@ -41,7 +41,7 @@ export const makeData = <T>(
   props: any,
   value: T,
   overwriteKey?: string,
-): {} | { data: Record<string, T> } => {
+): Record<string, never> | { data: Record<string, T> } => {
   if (isEmpty(value)) return {};
   else
     return {