Wire up some more

frida · Sep 12, 2024 · 009b1f7 · 009b1f7
1 parent b9f8812
commit 009b1f7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/ui/tracer/package.json b/ui/tracer/package.json
@@ -15,7 +15,8 @@
     "monaco-editor": "^0.51.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-use-websocket": "^4.8.1"
+    "react-use-websocket": "^4.8.1",
+    "use-debounce": "^10.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

diff --git a/ui/tracer/src/AddTargetsDialog.tsx b/ui/tracer/src/AddTargetsDialog.tsx
@@ -12,15 +12,22 @@ import {
     MenuItem,
     Popover
 } from "@blueprintjs/core";
+import { useRef } from "react";
+import { useDebouncedCallback } from "use-debounce";
 
 export interface AddTargetsProps {
     isOpen: boolean;
     onClose: CloseEventHandler;
+    onQuery: QueryEventHandler;
 }
 
 export type CloseEventHandler = () => void;
+export type QueryEventHandler = (query: string) => void;
+
+export default function AddTargetsDialog({ isOpen, onClose, onQuery }: AddTargetsProps) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const onQueryDebounced = useDebouncedCallback(onQuery, 250);
 
-export default function AddTargetsDialog({ isOpen, onClose }: AddTargetsProps) {
     const kindMenu = (
         <Popover
             content={
@@ -67,10 +74,10 @@ export default function AddTargetsDialog({ isOpen, onClose }: AddTargetsProps) {
     ) : null;
 
     return (
-        <Dialog title="Add targets" isOpen={isOpen} onClose={onClose}>
+        <Dialog title="Add targets" isOpen={isOpen} onOpened={() => inputRef.current?.focus()} onClose={onClose}>
             <DialogBody>
                 <FormGroup>
-                    <InputGroup rightElement={kindMenu} />
+                    <InputGroup inputRef={inputRef} rightElement={kindMenu} onValueChange={onQueryDebounced} />
                 </FormGroup>
                 {candidates}
             </DialogBody>

diff --git a/ui/tracer/src/App.tsx b/ui/tracer/src/App.tsx
@@ -32,6 +32,10 @@ export default function App() {
         sendJsonMessage({ type: "save-handler", id: selectedHandler, code });
     }
 
+    function handleAddTargetsQuery(query: string) {
+        console.log("TODO: search for:", query);
+    }
+
     useEffect(() => {
         if (lastJsonMessage === null) {
             return;
@@ -89,7 +93,11 @@ export default function App() {
                     onSave={deploy}
                     />
             </section>
-            <AddTargetsDialog isOpen={addingTargets} onClose={() => setAddingTargets(false)} />
+            <AddTargetsDialog
+                isOpen={addingTargets}
+                onClose={() => setAddingTargets(false)}
+                onQuery={handleAddTargetsQuery}
+                />
             <BlueprintProvider>
                 <div />
             </BlueprintProvider>

diff --git a/ui/tracer/yarn.lock b/ui/tracer/yarn.lock
@@ -1794,6 +1794,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-debounce@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.3.tgz#636094a37f7aa2bcc77b26b961481a0b571bf7ea"
+  integrity sha512-DxQSI9ZKso689WM1mjgGU3ozcxU1TJElBJ3X6S4SMzMNcm2lVH0AHmyXB+K7ewjz2BSUKJTDqTcwtSMRfB89dg==
+
 use-sync-external-store@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"