Add hotkey shortcut for search component. (apache#46463)

airflow/ui/src/components/SearchBar.tsx

@@ -16,11 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Input, type ButtonProps } from "@chakra-ui/react";
-import { useState, type ChangeEvent } from "react";
+import { Button, Input, Kbd, type ButtonProps } from "@chakra-ui/react";
+import { useState, useRef, type ChangeEvent } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { FiSearch } from "react-icons/fi";
 import { useDebouncedCallback } from "use-debounce";
 
+import { getMetaKey } from "src/utils";
+
 import { CloseButton, InputGroup, type InputGroupProps } from "./ui";
 
 const debounceDelay = 200;
@@ -43,14 +46,23 @@ export const SearchBar = ({
   placeHolder,
 }: Props) => {
   const handleSearchChange = useDebouncedCallback((val: string) => onChange(val), debounceDelay);
-
+  const searchRef = useRef<HTMLInputElement>(null);
   const [value, setValue] = useState(defaultValue);
+  const metaKey = getMetaKey();
 
   const onSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
     handleSearchChange(event.target.value);
   };
 
+  useHotkeys(
+    "mod+k",
+    () => {
+      searchRef.current?.focus();
+    },
+    { preventDefault: true },
+  );
+
   return (
     <InputGroup
       {...groupProps}
@@ -74,6 +86,7 @@ export const SearchBar = ({
               Advanced Search
             </Button>
           )}
+          <Kbd size="sm">{metaKey}+K</Kbd>
         </>
       }
       startElement={<FiSearch />}
@@ -83,6 +96,7 @@ export const SearchBar = ({
         onChange={onSearchChange}
         placeholder={placeHolder}
         pr={150}
+        ref={searchRef}
         value={value}
       />
     </InputGroup>