feat: Append, replace, removeOne, & removeAll operations for SetValue

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

@@ -1,3 +1,4 @@
+import Typography from "@mui/material/Typography";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { EditorProps, InternalNotes } from "@planx/components/ui";
 import { useFormik } from "formik";
@@ -6,13 +7,72 @@ import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import Input from "ui/shared/Input";
 import InputRow from "ui/shared/InputRow";
+import Radio from "ui/shared/Radio";
 
 import { parseSetValue, SetValue } from "./model";
 
 type Props = EditorProps<TYPES.SetValue, SetValue>;
 
 export default SetValueComponent;
 
+interface Option {
+  value: SetValue["operation"];
+  label: string;
+}
+
+const options: Option[] = [
+  {
+    value: "replace",
+    label: "Replace",
+  },
+  {
+    value: "append",
+    label: "Append",
+  },
+  {
+    value: "removeOne",
+    label: "Remove single value",
+  },
+  {
+    value: "removeAll",
+    label: "Remove all values",
+  },
+];
+
+const DescriptionText: React.FC<SetValue> = ({ fn, val, operation }) => {
+  if (!fn || !val) return null;
+
+  switch (operation) {
+    case "replace":
+      return (
+        <Typography mb={2}>
+          Any existing value for <strong>{fn}</strong> will be replaced by{" "}
+          <strong>{val}</strong>
+        </Typography>
+      );
+    case "append":
+      return (
+        <Typography mb={2}>
+          Any existing value for <strong>{fn}</strong> will have{" "}
+          <strong>{val}</strong> appended to it
+        </Typography>
+      );
+    case "removeOne":
+      return (
+        <Typography mb={2}>
+          Any existing value for <strong>{fn}</strong> set to{" "}
+          <strong>{val}</strong> will be removed
+        </Typography>
+      );
+    case "removeAll":
+      return (
+        <Typography mb={2}>
+          All existing values for <strong>{fn}</strong> will be removed
+        </Typography>
+      );
+  }
+};
+
 function SetValueComponent(props: Props) {
   const formik = useFormik({
     initialValues: parseSetValue(props.node?.data),
@@ -41,24 +101,26 @@ function SetValueComponent(props: Props) {
         </ModalSectionContent>
         <ModalSectionContent title="Field value">
           <InputRow>
-            <div>
-              <Input
-                required
-                format="data"
-                name="val"
-                value={formik.values.val}
-                placeholder="value"
-                onChange={formik.handleChange}
-              />
-              {formik.values.fn && formik.values.val && (
-                <p>
-                  any existing value for <strong>{formik.values.fn}</strong>{" "}
-                  will be replaced by <strong>{formik.values.val}</strong>
-                </p>
-              )}
-            </div>
+            <Input
+              required
+              format="data"
+              name="val"
+              value={formik.values.val}
+              placeholder="value"
+              onChange={formik.handleChange}
+            />
           </InputRow>
         </ModalSectionContent>
+        <ModalSectionContent title="Operation">
+          <DescriptionText {...formik.values} />
+          <Radio
+            options={options}
+            value={formik.values.operation}
+            onChange={(newOperation) => {
+              formik.setFieldValue("operation", newOperation);
+            }}
+          />
+        </ModalSectionContent>
       </ModalSection>
       <InternalNotes
         name="notes"

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

@@ -3,12 +3,14 @@ import { MoreInformation, parseMoreInformation } from "../shared";
 export interface SetValue extends MoreInformation {
   fn: string;
   val: string;
+  operation: "replace" | "append" | "removeOne" | "removeAll";
 }
 
 export const parseSetValue = (
   data: Record<string, any> | undefined,
 ): SetValue => ({
   fn: data?.fn || "",
   val: data?.val || "",
+  operation: data?.operation || "replace",
   ...parseMoreInformation(data),
 });

editor.planx.uk/src/@planx/components/SetValue/utils.test.ts

@@ -0,0 +1,135 @@
+import { SetValue } from "./model";
+import { handleSetValue } from "./utils";
+import { Store } from "pages/FlowEditor/lib/store";
+
+
+describe("calculateNewValues() helper function", () => {
+  describe('"replace" operation', () => {
+    test.each([
+      { previous: undefined, expected: ["lion"] },
+      { previous: "panda", expected: ["lion"] },
+      { previous: "lion", expected: ["lion"] },
+      { previous: ["lion"], expected: ["lion"] },
+      { previous: ["bear", "dog", "monkey"], expected: ["lion"] },
+      { previous: ["bear", "dog", "lion"], expected: ["lion"] },
+    ])('input of $previous sets passport value to be $expected', ({ previous, expected }) => {
+      const mockKey = "myAnimals";
+      const mockSetValue: SetValue = {
+        operation: "replace",
+        fn: mockKey,
+        val: "lion",
+      };
+      const mockPassport: Store.passport = {
+        data: { mockNode: mockSetValue, [mockKey]: previous },
+      };
+
+      const updatedPassport = handleSetValue({
+        nodeData: mockSetValue,
+        previousValues: previous,
+        passport: mockPassport,
+      });
+
+      const actual = updatedPassport.data?.[mockKey];
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('"append" operation', () => {
+    test.each([
+      { previous: undefined, expected: ["lion"] },
+      { previous: "panda", expected: ["panda", "lion"] },
+      { previous: "lion", expected: ["lion"] },
+      { previous: ["lion"], expected: ["lion"] },
+      {
+        previous: ["bear", "dog", "monkey"],
+        expected: ["bear", "dog", "monkey", "lion"],
+      },
+      { previous: ["bear", "dog", "lion"], expected: ["bear", "dog", "lion"] },
+    ])('input of $previous sets passport value to be $expected', ({ previous, expected }) => {
+      const mockKey = "myAnimals";
+      const mockSetValue: SetValue = {
+        operation: "append",
+        fn: mockKey,
+        val: "lion",
+      };
+      const mockPassport: Store.passport = {
+        data: { mockNode: mockSetValue, [mockKey]: previous },
+      };
+
+      const updatedPassport = handleSetValue({
+        nodeData: mockSetValue,
+        previousValues: previous,
+        passport: mockPassport,
+      });
+
+      const actual = updatedPassport.data?.[mockKey];
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('"removeOne" operation', () => {
+    test.each([
+      { previous: undefined, expected: undefined },
+      { previous: "panda", expected: "panda" },
+      { previous: "lion", expected: undefined },
+      { previous: ["lion"], expected: undefined },
+      {
+        previous: ["bear", "dog", "monkey"],
+        expected: ["bear", "dog", "monkey"],
+      },
+      { previous: ["bear", "dog", "lion"], expected: ["bear", "dog"] },
+    ])('input of $previous sets passport value to be $expected', ({ previous, expected }) => {
+      const mockKey = "myAnimals";
+      const mockSetValue: SetValue = {
+        operation: "removeOne",
+        fn: mockKey,
+        val: "lion",
+      };
+      const mockPassport: Store.passport = {
+        data: { mockNode: mockSetValue, [mockKey]: previous },
+      };
+
+      const updatedPassport = handleSetValue({
+        nodeData: mockSetValue,
+        previousValues: previous,
+        passport: mockPassport,
+      });
+
+      const actual = updatedPassport.data?.[mockKey];
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('"removeAll" operation', () => {
+    test.each([
+      { previous: undefined, expected: undefined },
+      { previous: "panda", expected: undefined },
+      { previous: "lion", expected: undefined },
+      { previous: ["lion"], expected: undefined },
+      {
+        previous: ["bear", "dog", "monkey"],
+        expected: undefined,
+      },
+      { previous: ["bear", "dog", "lion"], expected: undefined },
+    ])('input of $previous sets passport value to be $expected', ({ previous, expected }) => {
+      const mockKey = "myAnimals";
+      const mockSetValue: SetValue = {
+        operation: "removeAll",
+        fn: mockKey,
+        val: "lion",
+      };
+      const mockPassport: Store.passport = {
+        data: { mockNode: mockSetValue, [mockKey]: previous },
+      };
+
+      const updatedPassport = handleSetValue({
+        nodeData: mockSetValue,
+        previousValues: previous,
+        passport: mockPassport,
+      });
+
+      const actual = updatedPassport.data?.[mockKey];
+      expect(actual).toEqual(expected);
+    });
+  });
+});

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

@@ -0,0 +1,89 @@
+import { Store } from "pages/FlowEditor/lib/store";
+import { SetValue } from "./model";
+
+type PreviousValues = string | string[] | undefined;
+
+type HandleSetValue = (params: {
+  nodeData: SetValue;
+  previousValues: PreviousValues;
+  passport: Store.passport;
+}) => Store.passport;
+
+/**
+ * Handle modifying passport values when passing through a SetValue component
+ * Called by computePassport()
+ */
+export const handleSetValue: HandleSetValue = ({
+  nodeData: { operation, fn, val: current },
+  previousValues,
+  passport,
+}) => {
+  // We do not amend values set at objects
+  // These are internal exceptions we do not want to allow users to edit
+  // e.g. property.boundary.title
+  const isObject =
+    typeof previousValues === "object" &&
+    !Array.isArray(previousValues) &&
+    previousValues !== null;
+  if (isObject) return passport;
+
+  const previous = formatPreviousValues(previousValues);
+
+  const newValues = calculateNewValues({
+    operation,
+    previous,
+    current,
+  });
+
+  if (newValues) {
+    passport.data![fn] = newValues;
+
+    // Operation has cleared passport value
+    if (!newValues.length) delete passport.data![fn];
+  }
+
+  return passport;
+};
+
+type CalculateNewValues = (params: {
+  operation: SetValue["operation"];
+  previous: string[];
+  current: string;
+}) => string | string[] | undefined;
+
+const calculateNewValues: CalculateNewValues = ({
+  operation,
+  previous,
+  current,
+}) => {
+  switch (operation) {
+    case "replace":
+      return [current];
+
+    case "removeOne": {
+      // Do not convert output from string to string[] if operation not possible
+      if (previous.length === 1 && previous[0] !== current) {
+        return previous[0];
+      }
+
+      const removeCurrent = (val: string) => val !== current;
+      const filtered = previous.filter(removeCurrent);
+      return filtered;
+    }
+
+    case "removeAll":
+      return [];
+
+    case "append": {
+      const combined = [...previous, current];
+      const unique = [...new Set(combined)];
+      return unique;
+    }
+  }
+};
+
+const formatPreviousValues = (values: PreviousValues): string[] => {
+  if (!values) return [];
+  if (Array.isArray(values)) return values;
+  return [values];
+};