refactor: Add presentational component to Result (#3725)

api.planx.uk/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@airbrake/node": "^2.1.8",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#c4a725f",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#79b6409",
     "@types/isomorphic-fetch": "^0.0.36",
     "adm-zip": "^0.5.10",
     "aws-sdk": "^2.1467.0",

e2e/tests/api-driven/package.json

@@ -7,7 +7,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@cucumber/cucumber": "^9.3.0",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#c4a725f",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#79b6409",
     "axios": "^1.7.4",
     "dotenv": "^16.3.1",
     "dotenv-expand": "^10.0.0",

e2e/tests/ui-driven/package.json

@@ -8,7 +8,7 @@
     "postinstall": "./install-dependencies.sh"
   },
   "dependencies": {
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#c4a725f",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#79b6409",
     "axios": "^1.7.4",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",

editor.planx.uk/package.json

@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.3",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#c4a725f",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#79b6409",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

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

@@ -1,7 +1,7 @@
 import Box from "@mui/material/Box";
 import Collapse from "@mui/material/Collapse";
 import Typography from "@mui/material/Typography";
-import { Flag, FlagSet, flatFlags } from "@opensystemslab/planx-core/types";
+import { Flag, flatFlags } from "@opensystemslab/planx-core/types";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import groupBy from "lodash/groupBy";
@@ -11,8 +11,8 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import Input from "ui/shared/Input";
 import InputRow from "ui/shared/InputRow";
 
-import { ICONS } from "../ui";
-import type { Result } from "./model";
+import { EditorProps, ICONS } from "../ui";
+import { FlagDisplayText, Result } from "./model";
 
 type FlagWithValue = Flag & { value: NonNullable<Flag["value"]> };
 
@@ -21,16 +21,6 @@ const flagsWithValues = flatFlags.filter((flag): flag is FlagWithValue =>
 );
 const flags = groupBy(flagsWithValues, (f) => f.category);
 
-interface FormData {
-  flagSet: FlagSet;
-  overrides?: { [flagId: string]: FlagDisplayText };
-}
-
-interface FlagDisplayText {
-  heading?: string;
-  description?: string;
-}
-
 const FlagEditor: React.FC<{
   flag: Flag;
   existingOverrides?: FlagDisplayText;
@@ -82,8 +72,10 @@ const FlagEditor: React.FC<{
   );
 };
 
-const ResultComponent: React.FC<Result> = (props) => {
-  const formik = useFormik<FormData>({
+type Props = EditorProps<TYPES.Result, Result>;
+
+const ResultComponent: React.FC<Props> = (props) => {
+  const formik = useFormik<Result>({
     initialValues: {
       flagSet: props.node?.data?.flagSet || Object.keys(flags)[0],
       overrides: props.node?.data?.overrides || {},
@@ -93,7 +85,7 @@ const ResultComponent: React.FC<Result> = (props) => {
         props.handleSubmit({ type: TYPES.Result, data: newValues });
       }
     },
-    validate: () => {},
+    validate: () => { },
   });
 
   const allFlagsForSet = flags[formik.values.flagSet];
@@ -157,4 +149,4 @@ const ResultComponent: React.FC<Result> = (props) => {
   );
 };
 
-export default ResultComponent;
+export default ResultComponent;

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

@@ -5,7 +5,7 @@ import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
 import { useStore } from "../../../pages/FlowEditor/lib/store";
-import Result from "./Public";
+import { Presentational } from "./Public";
 
 const { getState, setState } = useStore;
 
@@ -17,7 +17,7 @@ test("renders correctly", async () => {
   const handleSubmit = vi.fn();
 
   const { user } = setup(
-    <Result
+    <Presentational
       headingColor={{ text: "#000", background: "#fff" }}
       responses={[]}
       handleSubmit={handleSubmit}
@@ -32,7 +32,7 @@ test("renders correctly", async () => {
 
 it("should not have any accessibility violations", async () => {
   const { container } = setup(
-    <Result
+    <Presentational
       headingColor={{ text: "#000", background: "#fff" }}
       responses={[
         {
@@ -58,15 +58,15 @@ it("should not have any accessibility violations", async () => {
 describe("showing and hiding change capabilities", () => {
   it("hides the change button by default", () => {
     setup(
-      <Result
+      <Presentational
         responses={[
           {
             question: { data: { text: "How's the weather?" }, id: "a" },
             hidden: false,
             selections: [],
           },
         ]}
-        handleSubmit={() => {}}
+        handleSubmit={() => { }}
         headingColor={{ text: "pink", background: "white" }}
       />,
     );
@@ -154,23 +154,21 @@ describe("showing and hiding change capabilities", () => {
     ];
 
     scenarios.forEach(({ allowChanges, autoAnswered, shouldBeChangeable }) => {
-      it(`${
-        shouldBeChangeable ? "shows" : "hides"
-      } the change button when allowChanges is ${allowChanges} and question ${
-        autoAnswered ? "was" : "wasn't"
-      } auto-answered`, () => {
-        setup(
-          <Result
-            {...{ allowChanges, responses }}
-            handleSubmit={() => {}}
-            headingColor={{ text: "pink", background: "white" }}
-          />,
-        );
-
-        expect(Boolean(screen.queryByText("Change"))).toEqual(
-          shouldBeChangeable,
-        );
-      });
+      it(`${shouldBeChangeable ? "shows" : "hides"
+        } the change button when allowChanges is ${allowChanges} and question ${autoAnswered ? "was" : "wasn't"
+        } auto-answered`, () => {
+          setup(
+            <Presentational
+              {...{ allowChanges, responses }}
+              handleSubmit={() => { }}
+              headingColor={{ text: "pink", background: "white" }}
+            />,
+          );
+
+          expect(Boolean(screen.queryByText("Change"))).toEqual(
+            shouldBeChangeable,
+          );
+        });
     });
   });
-});
+});