feat: Filters support choosing any flagset category

e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts

@@ -62,7 +62,7 @@ test.describe("Flow creation, publish and preview", () => {
     await expect(editor.nodeList).toContainText([
       "Find property",
       "an internal portalEdit Portal",
-      "(Flags Filter)ImmuneMissing informationPermission neededPrior approvalNoticePermitted developmentNot development(No Result)",
+      "Filter - Planning permissionImmuneMissing informationPermission neededPrior approvalNoticePermitted developmentNot developmentNo flag result",
       "Upload and label",
       "Confirm your location plan",
       "Planning constraints",

editor.planx.uk/src/@planx/components/Filter/Editor.test.tsx

@@ -0,0 +1,55 @@
+import {
+  ComponentType as TYPES,
+  DEFAULT_FLAG_CATEGORY,
+  flatFlags,
+} from "@opensystemslab/planx-core/types";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { setup } from "testUtils";
+import { vi } from "vitest";
+
+import Filter from "./Editor";
+
+test("Adding a filter for the default flagset", async () => {
+  const handleSubmit = vi.fn();
+
+  setup(<Filter category="Planning Permssion" handleSubmit={handleSubmit} />);
+
+  expect(screen.getByTestId("flagset-category-select")).toHaveValue(
+    DEFAULT_FLAG_CATEGORY,
+  );
+
+  fireEvent.submit(screen.getByTestId("filter-component-form"));
+
+  await waitFor(() =>
+    expect(handleSubmit).toHaveBeenCalledWith(
+      {
+        type: TYPES.Filter,
+        data: {
+          fn: "flag",
+          category: DEFAULT_FLAG_CATEGORY,
+        },
+      },
+      mockDefaultFlagOptions,
+    ),
+  );
+});
+
+test.todo("Adding a filter and picking a non-default flagset category");
+
+test.todo("Updating an existing filter");
+
+const mockDefaultFlagOptions = [
+  ...flatFlags.filter((flag) => flag.category === DEFAULT_FLAG_CATEGORY),
+  {
+    category: DEFAULT_FLAG_CATEGORY,
+    text: "No flag result",
+    value: "",
+  },
+].map((flag) => ({
+  type: TYPES.Answer,
+  data: {
+    text: flag.text,
+    val: flag.value,
+  },
+}));

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

@@ -1,33 +1,42 @@
+import Typography from "@mui/material/Typography";
 import {
+  ComponentType as TYPES,
   DEFAULT_FLAG_CATEGORY,
   flatFlags,
 } from "@opensystemslab/planx-core/types";
-import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import React from "react";
+import ModalSection from "ui/editor/ModalSection";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+
+import { ICONS } from "../ui";
 
 export interface Props {
   id?: string;
-  handleSubmit?: (d: any, c?: any) => void;
-  node?: any;
+  fn?: "flag";
+  category?: string;
+  handleSubmit?: (data: any, children?: any) => void;
 }
 
 const Filter: React.FC<Props> = (props) => {
   const formik = useFormik({
-    initialValues: {},
+    initialValues: {
+      fn: "flag",
+      category: DEFAULT_FLAG_CATEGORY,
+    },
     onSubmit: (newValues) => {
       if (props.handleSubmit) {
         const children = props.id
           ? undefined
           : [
               ...flatFlags,
               {
-                category: DEFAULT_FLAG_CATEGORY,
-                text: "(No Result)",
+                category: formik.values.category,
+                text: "No flag result",
                 value: "",
               },
             ]
-              .filter((f) => f.category === DEFAULT_FLAG_CATEGORY)
+              .filter((f) => f.category === formik.values.category)
               .map((f) => ({
                 type: TYPES.Answer,
                 data: {
@@ -36,17 +45,41 @@ const Filter: React.FC<Props> = (props) => {
                 },
               }));
 
-        props.handleSubmit(
-          { type: TYPES.Filter, data: { newValues, fn: "flag" } },
-          children,
-        );
+        props.handleSubmit({ type: TYPES.Filter, data: newValues }, children);
       }
     },
-    validate: () => {},
   });
+
+  const categories = new Set(flatFlags.map((flag) => flag.category));
+
   return (
-    <form onSubmit={formik.handleSubmit} id="modal">
-      <h1>Filter Component</h1>
+    <form
+      onSubmit={formik.handleSubmit}
+      id="modal"
+      data-testid="filter-component-form"
+    >
+      <ModalSection>
+        <ModalSectionContent title="Filter" Icon={ICONS[TYPES.Filter]}>
+          <Typography variant="body2">
+            Filters sort based on collected flags. Flags are heirarchical and
+            the filter will route through the left-most matching option only.
+          </Typography>
+        </ModalSectionContent>
+        <ModalSectionContent title="Pick a flagset category">
+          <select
+            data-testid="flagset-category-select"
+            name="category"
+            value={formik.values.category}
+            onChange={formik.handleChange}
+          >
+            {Array.from(categories).map((category) => (
+              <option key={category} value={category}>
+                {category}
+              </option>
+            ))}
+          </select>
+        </ModalSectionContent>
+      </ModalSection>
     </form>
   );
 };

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx

@@ -1,4 +1,7 @@
-import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import {
+  ComponentType as TYPES,
+  DEFAULT_FLAG_CATEGORY,
+} from "@opensystemslab/planx-core/types";
 import React from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { exhaustiveCheck } from "utils";
@@ -63,7 +66,12 @@ const Node: React.FC<any> = (props) => {
         />
       );
     case TYPES.Filter:
-      return <Filter {...allProps} text="(Flags Filter)" />;
+      return (
+        <Filter
+          {...allProps}
+          text={`Filter - ${node?.data?.category || DEFAULT_FLAG_CATEGORY}`}
+        />
+      );
     case TYPES.FindProperty:
       return <Question {...allProps} text="Find property" />;
     case TYPES.List: