feat: Add tags to Node data (take 2) (#3716)

theopensystemslab · Oct 2, 2024 · c95b5de · c95b5de
1 parent 699c784
commit c95b5de
Show file tree

Hide file tree

Showing 16 changed files with 174 additions and 123 deletions.
diff --git a/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx b/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx
@@ -7,9 +7,9 @@ import ErrorWrapper from "ui/shared/ErrorWrapper";
 import { PASSPORT_REQUESTED_FILES_KEY } from "../FileUploadAndLabel/model";
 import { PrivateFileUpload } from "../shared/PrivateFileUpload/PrivateFileUpload";
 import { getPreviouslySubmittedData, makeData } from "../shared/utils";
-import { FileUploadSlot, Props, slotsSchema } from "./model";
+import { FileUpload, FileUploadSlot, slotsSchema } from "./model";
 
-const FileUpload: React.FC<Props> = (props) => {
+const FileUploadComponent: React.FC<FileUpload> = (props) => {
   const recoveredSlots = getPreviouslySubmittedData(props)?.map(
     (slot: FileUploadSlot) => slot.cachedSlot,
   );
@@ -96,4 +96,4 @@ const FileUpload: React.FC<Props> = (props) => {
   );
 };
 
-export default FileUpload;
+export default FileUploadComponent;
diff --git a/editor.planx.uk/src/@planx/components/FileUpload/model.tsx b/editor.planx.uk/src/@planx/components/FileUpload/model.tsx
@@ -4,7 +4,7 @@ import type { HandleSubmit } from "pages/Preview/Node";
 import { FileWithPath } from "react-dropzone";
 import { array } from "yup";
 
-export interface Props extends MoreInformation {
+export interface FileUpload extends MoreInformation {
   id?: string;
   title?: string;
   fn: string;

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx
@@ -3,12 +3,12 @@ import {
   GovUKPayment,
   PaymentStatus,
 } from "@opensystemslab/planx-core/types";
+import { PublicProps } from "@planx/components/ui";
 import { logger } from "airbrake";
 import axios from "axios";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
 import { setLocalFlow } from "lib/local.new";
 import { useStore } from "pages/FlowEditor/lib/store";
-import { HandleSubmit } from "pages/Preview/Node";
 import React, { useEffect, useReducer } from "react";
 import { useErrorHandler } from "react-error-boundary";
 import type { Session } from "types";
@@ -18,9 +18,7 @@ import { createPayload, GOV_UK_PAY_URL, Pay, toDecimal } from "../model";
 import Confirm from "./Confirm";
 
 export default Component;
-interface Props extends Pay {
-  handleSubmit: HandleSubmit;
-}
+export type Props = PublicProps<Pay>;
 
 type ComponentState =
   | { status: "indeterminate"; displayText?: string }
@@ -119,7 +117,7 @@ function Component(props: Props) {
   useEffect(() => {
     // Auto-skip component when fee=0
     if (fee <= 0) {
-      return props.handleSubmit({ auto: true });
+      return props.handleSubmit && props.handleSubmit({ auto: true });
     }
 
     // If props.fn is undefined, display & log an error
@@ -144,7 +142,8 @@ function Component(props: Props) {
 
   const handleSuccess = () => {
     dispatch(Action.Success);
-    props.handleSubmit(makeData(props, govUkPayment, GOV_PAY_PASSPORT_KEY));
+    props.handleSubmit &&
+      props.handleSubmit(makeData(props, govUkPayment, GOV_PAY_PASSPORT_KEY));
   };
 
   const normalizePaymentResponse = (responseData: any): GovUKPayment => {
@@ -282,7 +281,7 @@ function Component(props: Props) {
           onConfirm={() => {
             if (props.hidePay || state.status === "unsupported_team") {
               // Show "Continue" button to proceed
-              props.handleSubmit({ auto: false });
+              props.handleSubmit && props.handleSubmit({ auto: false });
             } else if (state.status === "init") {
               startNewPayment();
             } else if (state.status === "retry") {

diff --git a/editor.planx.uk/src/@planx/components/Question/model.ts b/editor.planx.uk/src/@planx/components/Question/model.ts
@@ -11,7 +11,7 @@ export interface Question {
   definitionImg?: string;
   img?: string;
   responses: {
-    id: string;
+    id?: string;
     responseKey: string | number;
     title: string;
     description?: string;

diff --git a/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx b/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx
@@ -149,9 +149,9 @@ const ResultReason: React.FC<IResultReason> = ({
     }
   }, [summaryRef]);
 
-  const hasMoreInfo = question.data.info ?? question.data.policyRef;
+  const hasMoreInfo = question.data?.info ?? question.data?.policyRef;
 
-  const ariaLabel = `${question.data.text}: Your answer was: ${response}. ${
+  const ariaLabel = `${question.data?.text}: Your answer was: ${response}. ${
     hasMoreInfo
       ? "Click to expand for more information about this question."
       : ""
@@ -194,22 +194,22 @@ const ResultReason: React.FC<IResultReason> = ({
                 color="textPrimary"
                 id={`questionText-${id}`}
               >
-                {question.data.text} <br />
+                {question.data?.text} <br />
                 <strong>{response}</strong>
               </Typography>
             </SummaryWrap>
           </StyledAccordionSummary>
           <AccordionDetails sx={{ py: 1, px: 0 }}>
             <MoreInfo>
-              {question.data.info && (
+              {question.data?.info && (
                 <ReactMarkdownOrHtml
-                  source={question.data.info}
+                  source={question.data?.info}
                   openLinksOnNewTab
                 />
               )}
-              {question.data.policyRef && (
+              {question.data?.policyRef && (
                 <ReactMarkdownOrHtml
-                  source={question.data.policyRef}
+                  source={question.data?.policyRef}
                   openLinksOnNewTab
                 />
               )}
@@ -223,7 +223,7 @@ const ResultReason: React.FC<IResultReason> = ({
             color="textPrimary"
             id={`questionText-${id}`}
           >
-            {question.data.text} <br />
+            {question.data?.text} <br />
             <strong>{response}</strong>
           </Typography>
         </NonExpandingSummary>
@@ -239,7 +239,7 @@ const ResultReason: React.FC<IResultReason> = ({
           >
             Change
             <span style={visuallyHidden}>
-              your response to {question.data.text || "this question"}
+              your response to {question.data?.text || "this question"}
             </span>
           </Link>
         )}

diff --git a/editor.planx.uk/src/@planx/components/TaskList/model.ts b/editor.planx.uk/src/@planx/components/TaskList/model.ts
@@ -5,6 +5,12 @@ export interface TaskList extends MoreInformation {
   title: string;
   description?: string;
   tasks: Array<Task>;
+  /**
+   * @deprecated Remove once migrated
+   */
+  taskList?: {
+    tasks: Array<Task>;
+  };
 }
 
 export interface Task {
@@ -15,7 +21,7 @@ export interface Task {
 export const parseTaskList = (
   data: Record<string, any> | undefined,
 ): TaskList => ({
-  tasks: /* remove once migrated */ data?.taskList?.tasks || data?.tasks || [],
+  tasks: data?.taskList?.tasks || data?.tasks || [],
   title: data?.title || "",
   description: data?.description || "",
   ...parseMoreInformation(data),

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -385,19 +385,19 @@ function Question(props: ComponentProps) {
   function getNodeText() {
     try {
       const answerId = getAnswers(props)[0];
-      return props.flow[answerId].data.text;
+      return props.flow[answerId].data?.text;
     } catch (err) {
       return "";
     }
   }
 }
 
 function FindProperty(props: ComponentProps) {
-  const { source } = props.passport.data?._address;
+  const { source } = props.passport.data?._address || {};
 
   if (source === "os") {
     const { postcode, single_line_address, town } =
-      props.passport.data?._address;
+      props.passport.data?._address || {};
     return (
       <>
         <Box component="dt">{FIND_PROPERTY_DT}</Box>
@@ -432,7 +432,7 @@ function Checklist(props: ComponentProps) {
       <Box component="dd">
         <ul>
           {getAnswers(props).map((nodeId, i: number) => (
-            <li key={i}>{props.flow[nodeId].data.text}</li>
+            <li key={i}>{props.flow[nodeId].data?.text}</li>
           ))}
         </ul>
       </Box>

diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx
@@ -6,7 +6,7 @@ import Radio from "@mui/material/Radio";
 import React from "react";
 
 export interface Props {
-  id: string;
+  id?: string;
   title: string;
   onChange: FormControlLabelProps["onChange"];
   variant?: "default" | "compact";

diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/ImageRadio.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/ImageRadio.tsx
@@ -8,7 +8,7 @@ import Typography from "@mui/material/Typography";
 import React, { useLayoutEffect, useRef, useState } from "react";
 
 export interface Props {
-  id: string;
+  id?: string;
   title: string;
   description?: string;
   responseKey?: string | number;

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx
@@ -149,7 +149,7 @@ const Node: React.FC<any> = (props) => {
   }
 };
 
-const getSetValueText = ({ operation, fn, val }: Store.Node["data"]) => {
+const getSetValueText = ({ operation, fn, val }: Store.Node["data"] = {}) => {
   switch (operation) {
     case "append":
       return `Append ${val} to ${fn}`;

diff --git a/...anx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.tsx b/...anx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.tsx
@@ -37,7 +37,7 @@ const DISPLAY_DATA: Partial<ComponentMap> = {
       displayKey: "Option (data)",
       getTitle: ({ item }) => {
         const parentNode = useStore.getState().flow[item.parentId];
-        return parentNode.data.text;
+        return parentNode.data?.text;
       },
       getHeadline: ({ item, key }) => get(item, key)?.toString(),
     },

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx
@@ -34,7 +34,7 @@ const HeaderRoot = styled(Box)(({ theme }) => ({
 }));
 
 const InternalPortalHeader: React.FC<{ portalId: string }> = ({ portalId }) => {
-  const portalName = useStore((state) => state.flow)[portalId].data.text;
+  const portalName = useStore((state) => state.flow)[portalId].data?.text;
   const Icon = ICONS[ComponentType.InternalPortal];
 
   return (

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/analytics/utils.ts b/editor.planx.uk/src/pages/FlowEditor/lib/analytics/utils.ts
@@ -14,7 +14,7 @@ import {
  * Generate meaningful title for content analytic log
  */
 export function getContentTitle(node: Store.Node): string {
-  const dom = new DOMParser().parseFromString(node.data.content, "text/html");
+  const dom = new DOMParser().parseFromString(node.data?.content, "text/html");
   const h1 = dom.body.getElementsByTagName("h1")[0]?.textContent;
   const text = h1 || dom.body.textContent;
   if (!text) return `Content: ${node.id}`;

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/index.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/index.ts
@@ -1,6 +1,7 @@
 import {
   Node as PlanXCoreNode,
   NodeId,
+  NodeTags,
 } from "@opensystemslab/planx-core/types";
 import { isPreviewOnlyDomain } from "routes/utils";
 import { create, StoreApi, UseBoundStore } from "zustand";
@@ -36,7 +37,7 @@ export declare namespace Store {
    * @deprecated Should share type with PlanX core once `Value` is retired and Flow Graph is typed
    */
   export interface Node extends PlanXCoreNode {
-    data?: any;
+    data?: Record<string, any> & NodeTags;
   }
   export interface Passport {
     data?: Record<string, any>;

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/preview.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/preview.ts
@@ -468,13 +468,15 @@ export const previewStore: StateCreator<
                 passportValues = [passportValues];
 
               passportValues = (passportValues || []).filter((pv: any) =>
-                sortedResponses.some((r) => pv.startsWith(r.data.val)),
+                sortedResponses.some((r) => pv.startsWith(r.data?.val)),
               );
 
               if (passportValues.length > 0) {
                 responsesThatCanBeAutoAnswered = (sortedResponses || []).filter(
                   (r) => {
-                    const responseValues = String(r.data.val).split(",").sort();
+                    const responseValues = String(r.data?.val)
+                      .split(",")
+                      .sort();
                     return String(responseValues) === String(passportValues);
                   },
                 );
@@ -483,7 +485,9 @@ export const previewStore: StateCreator<
                   responsesThatCanBeAutoAnswered = (
                     sortedResponses || []
                   ).filter((r) => {
-                    const responseValues = String(r.data.val).split(",").sort();
+                    const responseValues = String(r.data?.val)
+                      .split(",")
+                      .sort();
 
                     for (const responseValue of responseValues) {
                       return passportValues.some((passportValue: any) =>