Navigate logs with enter and shift+enter

kurtosis-tech · Dec 5, 2023 · 8991bdd · 8991bdd
1 parent 5e887d1
commit 8991bdd
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/enclave-manager/web/src/components/enclaves/logs/LogViewer.tsx b/enclave-manager/web/src/components/enclaves/logs/LogViewer.tsx
@@ -313,9 +313,12 @@ const SearchControls = ({ searchState, onChangeSearchState, logLines }: SearchCo
             searchRef.current.focus();
           }
         },
-        next: () => {
+        enter: () => {
           handleNextMatchClick();
         },
+        "shift-enter": () => {
+          handlePriorMatchClick();
+        },
         escape: () => {
           if (isDefined(searchRef.current) && searchRef.current === document.activeElement) {
             handleClearSearch();

diff --git a/enclave-manager/web/src/components/useKeyboardAction.ts b/enclave-manager/web/src/components/useKeyboardAction.ts
@@ -1,33 +1,44 @@
 import { useEffect } from "react";
+import { isDefined } from "../utils";
 
-export type KeyboardActions = "escape" | "find" | "omniFind" | "next";
+export type KeyboardActions = "escape" | "find" | "omniFind" | "enter" | "shift-enter";
 
 export type OnCtrlPressHandlers = Partial<Record<KeyboardActions, () => void>>;
 
-const eventIsType = (e: KeyboardEvent, type: KeyboardActions) => {
+const getEventType = (e: KeyboardEvent): KeyboardActions | null => {
   const ctrlOrMeta = e.ctrlKey || e.metaKey;
 
-  switch (type) {
-    case "find":
-      return ctrlOrMeta && e.keyCode === 70; // F
-    case "next":
-      return ctrlOrMeta && e.keyCode === 71; // G
-    case "omniFind":
-      return ctrlOrMeta && e.keyCode === 75; // K
-    case "escape":
-      return e.key === "Escape" || e.keyCode === 27;
+  if (ctrlOrMeta && e.keyCode === 70) {
+    // F
+    return "find";
   }
+  if (e.shiftKey && e.keyCode === 13) {
+    // shift + enter
+    return "shift-enter";
+  }
+  if (e.keyCode === 13) {
+    // enter
+    return "enter";
+  }
+  if (ctrlOrMeta && e.keyCode === 75) {
+    // K
+    return "omniFind";
+  }
+  if (e.key === "Escape" || e.keyCode === 27) {
+    return "escape";
+  }
+  return null;
 };
 
 export const useKeyboardAction = (handlers: OnCtrlPressHandlers) => {
   useEffect(() => {
     const listener = function (e: KeyboardEvent) {
-      for (const [handlerType, handler] of Object.entries(handlers)) {
-        if (eventIsType(e, handlerType as KeyboardActions)) {
-          e.preventDefault();
-          handler();
-          return;
-        }
+      const eventType = getEventType(e);
+      const handler = isDefined(eventType) ? handlers[eventType] : null;
+      if (isDefined(handler)) {
+        e.preventDefault();
+        handler();
+        return;
       }
     };
     window.addEventListener("keydown", listener);