feat: add search to Team list

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx

@@ -11,14 +11,13 @@ import { debounce } from "lodash";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useMemo, useState } from "react";
 import { Components, Virtuoso } from "react-virtuoso";
+import { SEARCH_DEBOUNCE_MS } from "ui/shared/constants";
 
 import { ExternalPortalList } from "./ExternalPortalList";
 import { ALL_FACETS, SearchFacets } from "./facets";
 import { SearchHeader } from "./SearchHeader";
 import { SearchResultCard } from "./SearchResultCard";
 
-const DEBOUNCE_MS = 500;
-
 interface SearchNodes {
   pattern: string;
   facets: SearchFacets;
@@ -87,7 +86,7 @@ const Search: React.FC = () => {
         search(pattern);
         setLastPattern(pattern);
         setIsSearching(false);
-      }, DEBOUNCE_MS),
+      }, SEARCH_DEBOUNCE_MS),
     [search],
   );
 

editor.planx.uk/src/pages/Team.tsx

@@ -3,14 +3,12 @@ import Container from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { hasFeatureFlag } from "lib/featureFlags";
+import { isEmpty } from "lodash";
 import React, { useCallback, useEffect, useState } from "react";
 import { useNavigation } from "react-navi";
 import { AddButton } from "ui/editor/AddButton";
 import { SortableFields, SortControl } from "ui/editor/SortControl";
-import Input from "ui/shared/Input/Input";
-import InputRow from "ui/shared/InputRow";
-import InputRowItem from "ui/shared/InputRowItem";
-import InputRowLabel from "ui/shared/InputRowLabel";
+import { SearchBox } from "ui/shared/SearchBox/SearchBox";
 import { slugify } from "utils";
 
 import FlowCard, { Card, CardContent } from "./FlowCard";
@@ -32,7 +30,7 @@ const DashboardList = styled("ul")(({ theme }) => ({
   },
 }));
 
-const GetStarted: React.FC<{ flows: FlowSummary[] }> = ({ flows }) => (
+const GetStarted: React.FC<{ flows: FlowSummary[] | null }> = ({ flows }) => (
   <DashboardList sx={{ paddingTop: 0 }}>
     <Card>
       <CardContent>
@@ -76,6 +74,9 @@ const Team: React.FC = () => {
     (state) => [state.getTeam(), state.canUserEditTeam, state.getFlows],
   );
   const [flows, setFlows] = useState<FlowSummary[] | null>(null);
+  const [filteredFlows, setFilteredFlows] = useState<FlowSummary[] | null>(
+    null,
+  );
 
   const sortOptions: SortableFields<FlowSummary>[] = [
     {
@@ -103,14 +104,15 @@ const Team: React.FC = () => {
         ),
       );
       setFlows(sortedFlows);
+      setFilteredFlows(sortedFlows);
     });
   }, [teamId, setFlows, getFlows]);
 
   useEffect(() => {
     fetchFlows();
   }, [fetchFlows]);
 
-  const teamHasFlows = flows && Boolean(flows.length);
+  const teamHasFlows = !isEmpty(filteredFlows) && !isEmpty(flows);
   const showAddFlowButton = teamHasFlows && canUserEditTeam(slug);
 
   return (
@@ -139,25 +141,13 @@ const Team: React.FC = () => {
             </Typography>
             {showAddFlowButton && <AddFlowButton flows={flows} />}
           </Box>
-          <Box maxWidth={360}>
-            <InputRow>
-              <InputRowLabel>
-                <strong>Search</strong>
-              </InputRowLabel>
-              <InputRowItem>
-                <Box sx={{ position: "relative" }}>
-                  <Input
-                    sx={{
-                      borderColor: (theme) => theme.palette.border.input,
-                      pr: 5,
-                    }}
-                    name="search"
-                    id="search"
-                  />
-                </Box>
-              </InputRowItem>
-            </InputRow>
-          </Box>
+          {hasFeatureFlag("SORT_FLOWS") && flows && (
+            <SearchBox<FlowSummary>
+              records={flows}
+              setRecords={setFilteredFlows}
+              searchKey={["name", "slug"]}
+            />
+          )}
         </Box>
         <Box>
           {hasFeatureFlag("SORT_FLOWS") && flows && (
@@ -169,9 +159,9 @@ const Team: React.FC = () => {
           )}
         </Box>
         <Box>
-          {teamHasFlows && (
+          {filteredFlows && flows && (
             <DashboardList>
-              {flows.map((flow) => (
+              {filteredFlows.map((flow) => (
                 <FlowCard
                   flow={flow}
                   flows={flows}

editor.planx.uk/src/ui/editor/SimpleMenu.tsx

@@ -6,7 +6,6 @@ import React, { PropsWithChildren, useState } from "react";
 
 interface Props {
   className?: string;
-  children?: React.ReactNode;
   items: Array<{
     label: string;
     disabled?: boolean;

editor.planx.uk/src/ui/shared/SearchBox/SearchBox.tsx

@@ -0,0 +1,131 @@
+import ClearIcon from "@mui/icons-material/Clear";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import { useFormik } from "formik";
+import { FuseOptionKey } from "fuse.js";
+import { useSearch } from "hooks/useSearch";
+import { debounce } from "lodash";
+import React, { useEffect, useMemo, useState } from "react";
+
+import { SEARCH_DEBOUNCE_MS } from "../constants";
+import Input from "../Input/Input";
+import InputRow from "../InputRow";
+import InputRowItem from "../InputRowItem";
+import InputRowLabel from "../InputRowLabel";
+
+interface SearchBoxProps<T> {
+  records: T[] | null;
+  setRecords: React.Dispatch<React.SetStateAction<T[] | null>>;
+  searchKey: FuseOptionKey<T>[];
+}
+
+export const SearchBox = <T extends object>({
+  records,
+  setRecords,
+  searchKey,
+}: SearchBoxProps<T>) => {
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchedTerm, setSearchedTerm] = useState<string>();
+
+  const searchKeys = useMemo(() => searchKey, []);
+
+  const formik = useFormik({
+    initialValues: { pattern: "" },
+    onSubmit: ({ pattern }) => {
+      setIsSearching(true);
+      debouncedSearch(pattern);
+    },
+  });
+
+  const { results, search } = useSearch({
+    list: records || [],
+    keys: searchKeys,
+  });
+
+  const debouncedSearch = useMemo(
+    () =>
+      debounce((pattern: string) => {
+        search(pattern);
+        setSearchedTerm(pattern);
+        setIsSearching(false);
+      }, SEARCH_DEBOUNCE_MS),
+    [search],
+  );
+
+  useEffect(() => {
+    if (results && searchedTerm) {
+      const mappedResults = results.map((result) => result.item);
+      setRecords(mappedResults);
+    }
+    if (results && !searchedTerm) {
+      records && setRecords(records);
+    }
+  }, [results, setRecords, searchedTerm, records]);
+
+  return (
+    <Box maxWidth={360}>
+      <InputRow>
+        <InputRowLabel>
+          <strong>Search</strong>
+        </InputRowLabel>
+        <InputRowItem>
+          <Box sx={{ position: "relative" }}>
+            <Input
+              sx={{
+                pr: 5,
+              }}
+              name="search"
+              id="search"
+              value={formik.values.pattern}
+              onChange={(e) => {
+                formik.setFieldValue("pattern", e.target.value);
+                formik.submitForm();
+              }}
+            />
+            {searchedTerm && !isSearching && (
+              <IconButton
+                aria-label="clear search"
+                onClick={() => {
+                  formik.setFieldValue("pattern", "");
+                  formik.submitForm();
+                }}
+                size="small"
+                sx={{
+                  position: "absolute",
+                  right: (theme) => theme.spacing(1),
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  padding: 0.5,
+                  zIndex: 1,
+                }}
+              >
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            )}
+            {isSearching && (
+              <IconButton
+                aria-label="clear search"
+                onClick={() => {
+                  formik.setFieldValue("pattern", "");
+                  formik.submitForm();
+                }}
+                size="small"
+                sx={{
+                  position: "absolute",
+                  right: (theme) => theme.spacing(1),
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  padding: 0.5,
+                  zIndex: 1,
+                }}
+              >
+                <CircularProgress size={"1.5rem"} />
+              </IconButton>
+            )}
+          </Box>
+        </InputRowItem>
+      </InputRow>
+    </Box>
+  );
+};

editor.planx.uk/src/ui/shared/constants.ts

@@ -0,0 +1 @@
+export const SEARCH_DEBOUNCE_MS = 500;