refine filter logic and tests

theopensystemslab · Jan 13, 2025 · d687b3c · d687b3c
1 parent 3d1d3d8
commit d687b3c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 38 deletions.
diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -158,11 +158,9 @@ const createBaseComponent = async (
       await page.getByPlaceholder("Portal name").fill(title || "");
       break;
     case ComponentType.ExternalPortal:
-      await page
-        .getByTestId("flowId")
-        .selectOption(
-          `${contextDefaults.team.slug}/${externalPortalServiceProps.slug}`,
-        );
+       page.getByTestId('flowId').click()
+       await expect(page.getByText("An External Portal Service")).toBeVisible()
+       page.getByText("An External Portal Service").click()
       break;
     default:
       throw new Error(`Unsupported type: ${type}`);

diff --git a/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.test.tsx b/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.test.tsx
@@ -23,7 +23,7 @@ test("adding an external portal", async () => {
 
   screen.debug(autocompleteInput);
 
-  expect(autocompleteInput).toHaveValue("");
+  expect(autocompleteInput).toHaveValue("flow a");
 
   await user.click(autocompleteInput);
 

diff --git a/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx b/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx
@@ -1,9 +1,9 @@
+import ArrowIcon from "@mui/icons-material/KeyboardArrowDown";
 import Autocomplete, {
   autocompleteClasses,
   AutocompleteProps,
 } from "@mui/material/Autocomplete";
 import ListItem from "@mui/material/ListItem";
-import ArrowIcon from "@mui/icons-material/KeyboardArrowDown";
 import ListSubheader from "@mui/material/ListSubheader";
 import MenuItem from "@mui/material/MenuItem";
 import { styled } from "@mui/material/styles";
@@ -13,7 +13,7 @@ import {
   NodeTag,
 } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
@@ -62,7 +62,7 @@ const AutocompleteSubHeader = styled(ListSubheader)(({ theme }) => ({
 
 const renderOption: FlowAutocompleteListProps["renderOption"] = (
   props,
-  option
+  option,
 ) => {
   return (
     <MenuItem
@@ -111,25 +111,25 @@ const ExternalPortalForm: React.FC<{
   handleSubmit?: (val: any) => void;
   flows?: Array<Flow>;
   tags?: NodeTag[];
-}> = ({ handleSubmit, flowId = "", flows = [], tags = [], notes = "" }) => {
+}> = ({ handleSubmit, flowId, flows = [], tags = [], notes = "" }) => {
   const [teamArray, setTeamArray] = useState<string[]>([]);
-  const [firstFlow, setFirstFlow] = useState<Flow>(flows[0]);
 
   const uniqueTeamArray = [...new Set(flows.map((item) => item.team))];
-
-  useEffect(() => {
-    const filterFlows = () => {
-      const filteredFlows = flows.filter((flow: Flow) =>
-        teamArray.includes(flow.team)
-      );
-      filteredFlows[0] && setFirstFlow(filteredFlows[0]);
-    };
-    filterFlows();
-  }, [teamArray, flows]);
+  const filterFlows = (event: string[]) => {
+    setTeamArray([...event]);
+    const filteredFlows = flows?.filter((flow: Flow) =>
+      event.includes(flow.team),
+    );
+    if (filteredFlows.length > 0) {
+      formik.setFieldValue("flowId", filteredFlows[0].id);
+    } else {
+      formik.setFieldValue("flowId", flows[0].id);
+    }
+  };
 
   const formik = useFormik({
     initialValues: {
-      flowId,
+      flowId: flowId || flows[0].id,
       tags,
       notes,
     },
@@ -159,20 +159,22 @@ const ExternalPortalForm: React.FC<{
           <SelectMultiple
             id="team-select"
             onChange={(_options, event) => {
-              setTeamArray([...event]);
+              filterFlows(event);
             }}
             value={teamArray}
             options={uniqueTeamArray}
-            renderOption={(props, option, { selected }) => (
-              <ListItem {...props} key={`${option}-listitem`}>
-                <CustomCheckbox
-                  key={`${option}-checkbox`}
-                  aria-hidden="true"
-                  className={selected ? "selected" : ""}
-                />
-                {option}
-              </ListItem>
-            )}
+            renderOption={(props, option, { selected }) => {
+              return (
+                <ListItem {...props} key={`${option}-listitem`}>
+                  <CustomCheckbox
+                    key={`${option}-checkbox`}
+                    aria-hidden="true"
+                    className={selected ? "selected" : ""}
+                  />
+                  {option}
+                </ListItem>
+              );
+            }}
             placeholder=""
           />
         </ModalSectionContent>
@@ -193,15 +195,18 @@ const ExternalPortalForm: React.FC<{
             }}
             value={
               flows.find((flow: Flow) => flow.id === formik.values.flowId) ||
-              firstFlow
+              flows[0]
             }
             onChange={(_event, newValue: Flow) => {
               formik.setFieldValue("flowId", newValue.id);
             }}
-            options={flows.filter((flow) => {
-              if (teamArray.length > 0) return teamArray.includes(flow.team);
-              return true;
-            })}
+            options={
+              flows &&
+              flows.filter((flow) => {
+                if (teamArray.length > 0) return teamArray.includes(flow.team);
+                return true;
+              })
+            }
             groupBy={(option) => option.team}
             getOptionLabel={(option) => option.name}
             renderOption={renderOption}