Switch to use-debounce in the Lookout UI (#3426)

armadaproject · Feb 28, 2024 · 211878b · 211878b
1 parent 9d554ea
commit 211878b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 42 deletions.
diff --git a/internal/lookout/ui/package.json b/internal/lookout/ui/package.json
@@ -65,6 +65,7 @@
     "semver": "6.3.1",
     "tough-cookie": "^4.1.3",
     "typescript": "^4.9.3",
+    "use-debounce": "^10.0.0",
     "uuid": "^8.3.2",
     "validator": "^13.7.0",
     "web-vitals": "^0.2.4",

diff --git a/internal/lookout/ui/src/components/lookoutV2/DebouncedTextField.tsx b/internal/lookout/ui/src/components/lookoutV2/DebouncedTextField.tsx
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobsTableFilter.tsx b/internal/lookout/ui/src/components/lookoutV2/JobsTableFilter.tsx
@@ -2,10 +2,20 @@ import React, { RefObject, useEffect, useRef, useState } from "react"
 
 import MoreVert from "@material-ui/icons/MoreVert"
 import { Check } from "@mui/icons-material"
-import { Box, Checkbox, IconButton, InputAdornment, ListItemText, MenuItem, OutlinedInput, Select } from "@mui/material"
+import {
+  Box,
+  Checkbox,
+  IconButton,
+  InputAdornment,
+  ListItemText,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  TextField,
+} from "@mui/material"
 import Menu from "@mui/material/Menu"
-import { DebouncedTextField } from "components/lookoutV2/DebouncedTextField"
 import { Match, MATCH_DISPLAY_STRINGS } from "models/lookoutV2Models"
+import { useDebouncedCallback } from "use-debounce"
 import { ANNOTATION_COLUMN_PREFIX, FilterType, isStandardColId, VALID_COLUMN_MATCHES } from "utils/jobsTableColumns"
 
 const ELLIPSIS = "\u2026"
@@ -161,38 +171,36 @@ const TextFilter = ({
   useEffect(() => {
     onSetTextFieldRef(ref)
   }, [ref])
+  const debouncedOnChange = useDebouncedCallback(onChange, 300)
   return (
-    <DebouncedTextField
-      debouncedOnChange={onChange}
-      debounceWaitMs={300}
-      textFieldProps={{
-        inputRef: ref,
-        type: "text",
-        size: "small",
-        defaultValue: defaultValue,
-        error: parseError !== undefined,
-        placeholder: label,
+    <TextField
+      onChange={(e) => debouncedOnChange(e.currentTarget.value)}
+      inputRef={ref}
+      type={"text"}
+      size={"small"}
+      defaultValue={defaultValue}
+      error={parseError !== undefined}
+      placeholder={label}
+      sx={{
+        width: "100%",
+      }}
+      inputProps={{
+        "aria-label": label,
         sx: {
+          padding: "3.5px 7px",
+          height: "1em",
           width: "100%",
         },
-        inputProps: {
-          "aria-label": label,
-          sx: {
-            padding: "3.5px 7px",
-            height: "1em",
-            width: "100%",
-          },
-        },
-        InputProps: {
-          style: {
-            paddingRight: 0,
-          },
-          endAdornment: (
-            <InputAdornment position="end">
-              <MatchSelect possibleMatches={possibleMatches} currentMatch={match} onSelect={onColumnMatchChange} />
-            </InputAdornment>
-          ),
+      }}
+      InputProps={{
+        style: {
+          paddingRight: 0,
         },
+        endAdornment: (
+          <InputAdornment position="end">
+            <MatchSelect possibleMatches={possibleMatches} currentMatch={match} onSelect={onColumnMatchChange} />
+          </InputAdornment>
+        ),
       }}
     />
   )

diff --git a/internal/lookout/ui/yarn.lock b/internal/lookout/ui/yarn.lock
@@ -11289,6 +11289,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-debounce@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.0.tgz#5091b18d6c16292605f588bae3c0d2cfae756ff2"
+  integrity sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"