coder · Kira-Pilot · Jun 29, 2022 · Jun 28, 2022 · Jun 28, 2022 · Jun 28, 2022
diff --git a/site/package.json b/site/package.json
@@ -42,9 +42,10 @@
     "formik": "2.2.9",
     "front-matter": "4.0.2",
     "history": "5.3.0",
+    "just-debounce-it": "3.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-helmet": "^6.1.0",
+    "react-helmet": "6.1.0",
     "react-markdown": "8.0.3",
     "react-router-dom": "6.3.0",
     "sourcemapped-stacktrace": "1.1.11",
@@ -74,7 +75,7 @@
     "@types/node": "14.18.16",
     "@types/react": "17.0.44",
     "@types/react-dom": "17.0.16",
-    "@types/react-helmet": "^6.1.5",
+    "@types/react-helmet": "6.1.5",
     "@types/superagent": "4.1.15",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "5.27.0",

diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.test.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.test.tsx
@@ -0,0 +1,38 @@
+import { fireEvent, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { render } from "../../testHelpers/renderHelpers"
+import { SearchBarWithFilter } from "./SearchBarWithFilter"
+
+// mock the debounce utility
+jest.mock("just-debounce-it", () =>
+  jest.fn((fn) => {
+    fn.cancel = jest.fn()
+    return fn
+  }),
+)
+
+describe("SearchBarWithFilter", () => {
+  it("calls the onFilter handler on keystroke", async () => {
+    // When
+    const onFilter = jest.fn()
+    render(<SearchBarWithFilter onFilter={onFilter} />)
+
+    const searchInput = screen.getByRole("textbox")
+    await userEvent.type(searchInput, "workspace") // 9 characters
+
+    // Then
+    expect(onFilter).toBeCalledTimes(10) // 9 characters + 1 on component mount
+  })
+
+  it("calls the onFilter handler on submit", async () => {
+    // When
+    const onFilter = jest.fn()
+    render(<SearchBarWithFilter onFilter={onFilter} />)
+
+    const searchInput = screen.getByRole("textbox")
+    await fireEvent.keyDown(searchInput, { key: "Enter", code: "Enter", charCode: 13 })
+
+    // Then
+    expect(onFilter).toBeCalledTimes(1)
+  })
+})
diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
@@ -7,7 +7,8 @@ import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import SearchIcon from "@material-ui/icons/Search"
 import { FormikErrors, useFormik } from "formik"
-import { useState } from "react"
+import debounce from "just-debounce-it"
+import { useCallback, useEffect, useState } from "react"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
 import { Stack } from "../Stack/Stack"
@@ -50,6 +51,23 @@ export const SearchBarWithFilter: React.FC<SearchBarWithFilterProps> = ({
     },
   })
 
+  // debounce query string entry by user
+  // we want the dependency array empty here
+  // as we don't need to redefine the function
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedOnFilter = useCallback(
+    debounce((debouncedQueryString: string) => {
+      onFilter(debouncedQueryString)
+    }, 300),
+    [],
+  )
+
+  // update the query params while typing
+  useEffect(() => {
+    debouncedOnFilter(form.values.query)
+    return () => debouncedOnFilter.cancel()
+  }, [debouncedOnFilter, form.values.query])
+
   const getFieldHelpers = getFormHelpers<FilterFormValues>(form)
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,27 +1,16 @@
 import { useMachine } from "@xstate/react"
-import { FC, useEffect } from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet"
 import { useSearchParams } from "react-router-dom"
 import { pageTitle } from "../../util/page"
-import { workspaceFilterQuery } from "../../util/workspace"
 import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
 import { WorkspacesPageView } from "./WorkspacesPageView"
 
 const WorkspacesPage: FC = () => {
   const [workspacesState, send] = useMachine(workspacesMachine)
-  const [searchParams, setSearchParams] = useSearchParams()
+  const [_, setSearchParams] = useSearchParams()
   const { workspaceRefs } = workspacesState.context
 
-  useEffect(() => {
-    const filter = searchParams.get("filter")
-    const query = filter !== null ? filter : workspaceFilterQuery.me
-
-    send({
-      type: "GET_WORKSPACES",
-      query,
-    })
-  }, [searchParams, send])
-
   return (
     <>
       <Helmet>
@@ -33,8 +22,11 @@ const WorkspacesPage: FC = () => {
         loading={workspacesState.hasTag("loading")}
         workspaceRefs={workspaceRefs}
         onFilter={(query) => {
-          searchParams.set("filter", query)
-          setSearchParams(searchParams)
+          setSearchParams({ filter: query })
+          send({
+            type: "GET_WORKSPACES",
+            query,
+          })
         }}
       />
     </>

diff --git a/site/yarn.lock b/site/yarn.lock
@@ -3041,7 +3041,7 @@
   dependencies:
     "@types/react" "^17"
 
-"@types/react-helmet@^6.1.5":
+"@types/react-helmet@6.1.5":
   version "6.1.5"
   resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.5.tgz#35f89a6b1646ee2bc342a33a9a6c8777933f9083"
   integrity sha512-/ICuy7OHZxR0YCAZLNg9r7I9aijWUWvxaPR6uTuyxe8tAj5RL4Sw1+R6NhXUtOsarkGYPmaHdBDvuXh2DIN/uA==
@@ -9122,6 +9122,11 @@ junk@^3.1.0:
   resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
   integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==
 
+just-debounce-it@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/just-debounce-it/-/just-debounce-it-3.0.1.tgz#8c8a4c9327c9523366ec79ac9a959a938153bd2f"
+  integrity sha512-6EQWOpRV8fm/ame6XvGBSxvsjoMbqj7JS9TV/4Q9aOXt9DQw22GBfTGP6gTAqcBNN/PbzlwtwH7jtM0k9oe9pg==
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -11487,7 +11492,7 @@ react-helmet-async@^1.0.7:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
-react-helmet@^6.1.0:
+react-helmet@6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
   integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==