feat: add keyboard shortcut for search field

Author: OliverDudgeon

src/components/SearchTextField.tsx

@@ -1,21 +1,30 @@
+import { forwardRef } from "react";
+
 import { SearchRounded as SearchRoundedIcon } from "@mui/icons-material";
 import { InputAdornment, TextField, type TextFieldProps } from "@mui/material";
 
+import { getSearchShortcut } from "../utils/platform";
+
 /**
- * MuiTextField with a search icon at the end
+ * MuiTextField with a search icon at the end and platform-specific keyboard shortcut in label
  */
-export const SearchTextField = (TextFieldProps: TextFieldProps) => (
-  <TextField
-    label="Search"
-    {...TextFieldProps}
-    slotProps={{
-      input: {
-        endAdornment: (
-          <InputAdornment position="end">
-            <SearchRoundedIcon />
-          </InputAdornment>
-        ),
-      },
-    }}
-  />
+export const SearchTextField = forwardRef<HTMLDivElement, TextFieldProps>(
+  (TextFieldProps, ref) => (
+    <TextField
+      label={`Search (${getSearchShortcut()})`}
+      ref={ref}
+      {...TextFieldProps}
+      slotProps={{
+        input: {
+          endAdornment: (
+            <InputAdornment position="end">
+              <SearchRoundedIcon />
+            </InputAdornment>
+          ),
+        },
+      }}
+    />
+  ),
 );
+
+SearchTextField.displayName = "SearchTextField";

src/hooks/useKeyboardFocus.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+
+import { isMac } from "../utils/platform";
+
+/**
+ * Hook that provides a ref and keyboard shortcut (Ctrl+F/Cmd+F) to focus an input field
+ */
+export const useKeyboardFocus = () => {
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isCorrectModifier = isMac() ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+
+      if (isCorrectModifier && event.key === 'f') {
+        event.preventDefault();
+        inputRef.current?.querySelector('input')?.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return inputRef;
+};

src/hooks/useSearchFieldFocus.ts

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Hook that provides a ref and keyboard shortcut (Ctrl+F/Cmd+F) to focus an input field
+ */
+export const useKeyboardFocus = () => {
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
+        event.preventDefault();
+        inputRef.current?.querySelector('input')?.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return inputRef;
+};

src/pages/run.tsx

@@ -1,11 +1,12 @@
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { useGetApplications } from "@squonk/data-manager-client/application";
 import { useGetJobs } from "@squonk/data-manager-client/job";
 
 import { withPageAuthRequired as withPageAuthRequiredCSR } from "@auth0/nextjs-auth0/client";
 import { Alert, Container, Grid2 as Grid, MenuItem, TextField } from "@mui/material";
 import groupBy from "just-group-by";
+import { debounce } from "lodash-es";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 
@@ -17,6 +18,7 @@ import { TEST_JOB_ID } from "../components/runCards/TestJob/jobId";
 import { SearchTextField } from "../components/SearchTextField";
 import { AS_ROLES, DM_ROLES } from "../constants/auth";
 import { useCurrentProject, useIsUserAdminOrEditorOfCurrentProject } from "../hooks/projectHooks";
+import { useKeyboardFocus } from "../hooks/useKeyboardFocus";
 import Layout from "../layouts/Layout";
 import { search } from "../utils/app/searches";
 
@@ -30,6 +32,20 @@ const TestJobCard = dynamic(
 const Run = () => {
   const [executionTypes, setExecutionTypes] = useState(["application", "job"]);
   const [searchValue, setSearchValue] = useState("");
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState("");
+  const inputRef = useKeyboardFocus();
+
+  // Create debounced search function
+  const debouncedSetSearch = useMemo(
+    () => debounce((value: string) => setDebouncedSearchValue(value), 300),
+    []
+  );
+
+  // Update debounced value when search value changes
+  useEffect(() => {
+    debouncedSetSearch(searchValue);
+    return () => debouncedSetSearch.cancel();
+  }, [searchValue, debouncedSetSearch]);
 
   const currentProject = useCurrentProject();
 
@@ -53,27 +69,41 @@ const Run = () => {
     { query: { select: (data) => data.jobs } },
   );
 
+  // Memoize filtered applications
+  const filteredApplications = useMemo(() => {
+    if (!applications) {return [];}
+    return applications.filter(({ kind }) => search([kind], debouncedSearchValue));
+  }, [applications, debouncedSearchValue]);
+
+  // Memoize filtered and grouped jobs
+  const filteredAndGroupedJobs = useMemo(() => {
+    if (!jobs) {return {};}
+    const filteredJobs = jobs
+      .filter(({ keywords, category, name, job, description }) =>
+        search([keywords, category, name, job, description], debouncedSearchValue),
+      )
+      .filter(job => !job.replaced_by);
+
+    return groupBy(filteredJobs, (job) => `${job.collection}+${job.job}`);
+  }, [jobs, debouncedSearchValue]);
+
+  // Memoize event handlers
+  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value);
+  }, []);
+
+  const handleExecutionTypesChange = useCallback((event: any) => {
+    setExecutionTypes(event.target.value as string[]);
+  }, []);
+
   const cards = useMemo(() => {
-    const applicationCards =
-      applications
-        // Filter the apps by the search value
-        ?.filter(({ kind }) => search([kind], searchValue))
-        // Then create a card for each
-        .map((app) => (
-          <Grid key={app.application_id} size={{ md: 3, sm: 6, xs: 12 }}>
-            <ApplicationCard app={app} projectId={currentProject?.project_id} />
-          </Grid>
-        )) ?? [];
-
-    // Filter the apps by the search value
-    const filteredJobs = (jobs ?? []).filter(({ keywords, category, name, job, description }) =>
-      search([keywords, category, name, job, description], searchValue),
-    ).filter(job => !job.replaced_by);
-
-    const groupedJobObjects = groupBy(filteredJobs, (job) => `${job.collection}+${job.job}`)
-
-    // Then create a card for each
-    const jobCards = Object.entries(groupedJobObjects).map(([key, jobs]) => (
+    const applicationCards = filteredApplications.map((app) => (
+      <Grid key={app.application_id} size={{ md: 3, sm: 6, xs: 12 }}>
+        <ApplicationCard app={app} projectId={currentProject?.project_id} />
+      </Grid>
+    ));
+
+    const jobCards = Object.entries(filteredAndGroupedJobs).map(([key, jobs]) => (
       <Grid key={key} size={{ md: 3, sm: 6, xs: 12 }}>
         <JobCard disabled={!hasPermissionToRun} job={jobs} projectId={currentProject?.project_id} />
       </Grid>
@@ -91,11 +121,10 @@ const Run = () => {
     }
     return jobCards;
   }, [
-    applications,
+    filteredApplications,
+    filteredAndGroupedJobs,
     currentProject?.project_id,
     executionTypes,
-    jobs,
-    searchValue,
     hasPermissionToRun,
   ]);
 
@@ -118,9 +147,7 @@ const Run = () => {
                     slotProps={{
                       select: {
                         multiple: true,
-                        onChange: (event) => {
-                          setExecutionTypes(event.target.value as string[]);
-                        },
+                        onChange: handleExecutionTypesChange,
                       },
                     }}
                     value={executionTypes}
@@ -134,8 +161,9 @@ const Run = () => {
                 <Grid size={{ md: 4, sm: 6, xs: 12 }} sx={{ ml: "auto" }}>
                   <SearchTextField
                     fullWidth
+                    ref={inputRef}
                     value={searchValue}
-                    onChange={(event) => setSearchValue(event.target.value)}
+                    onChange={handleSearchChange}
                   />
                 </Grid>
               </Grid>

src/utils/platform.ts

@@ -0,0 +1,26 @@
+/**
+ * Detects if the current platform is macOS using modern APIs
+ */
+export const isMac = () => {
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+
+  // Modern approach using userAgentData (Chrome 90+)
+  if ('userAgentData' in navigator) {
+    const userAgentData = (navigator as any).userAgentData;
+    if (userAgentData?.platform) {
+      return userAgentData.platform === 'macOS';
+    }
+  }
+
+  // Fallback to userAgent string parsing
+  return (/Mac|iPhone|iPad|iPod/u).test(navigator.userAgent);
+};
+
+/**
+ * Returns the platform-specific keyboard shortcut text for search
+ */
+export const getSearchShortcut = () => {
+  return isMac() ? '⌘F' : 'Ctrl+F';
+};