add shortcuts for the Items tab (#1827)

* add shortcuts for the Items tab

* Add shortcut to clear Items tab filter.

src/Explorer/Tabs/DocumentsTab.html

@@ -80,7 +80,8 @@
                                     placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
                                 },
                                 css: { placeholderVisible: filterContent().length === 0 },
-                                textInput: filterContent"
+                                textInput: filterContent,
+                                event: { keydown: onFilterKeyDown }"
           />
 
           <datalist

src/Explorer/Tabs/DocumentsTab.ts

@@ -1,7 +1,7 @@
 import { ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { Platform, configContext } from "ConfigContext";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
-import { KeyboardAction } from "KeyboardShortcuts";
+import { KeyboardAction, KeyboardActionGroup, KeyboardHandlerSetter, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import * as ko from "knockout";
@@ -86,9 +86,11 @@ export default class DocumentsTab extends TabsBase {
   private _isQueryCopilotSampleContainer: boolean;
   private queryAbortController: AbortController;
   private cancelQueryTimeoutID: NodeJS.Timeout;
+  private setKeyboardActions: KeyboardHandlerSetter;
 
   constructor(options: ViewModels.DocumentsTabOptions) {
     super(options);
+    this.setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
     this.isPreferredApiMongoDB = userContext.apiType === "Mongo" || options.isPreferredApiMongoDB;
 
     this.idHeader = this.isPreferredApiMongoDB ? "_id" : "id";
@@ -665,9 +667,38 @@ export default class DocumentsTab extends TabsBase {
     this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
   }
 
+  public onFilterKeyDown(model: unknown, e: KeyboardEvent): boolean {
+    if (e.key === "Enter") {
+      this.refreshDocumentsGrid(true);
+
+      // Suppress the default behavior of the key
+      return false;
+    } else if (e.key === "Escape") {
+      this.onHideFilterClick();
+
+      // Suppress the default behavior of the key
+      return false;
+    } else {
+      // Allow the default behavior of the key
+      return true;
+    }
+  }
+
   public async onActivate(): Promise<void> {
     super.onActivate();
 
+    this.setKeyboardActions({
+      [KeyboardAction.SEARCH]: () => {
+        this.onShowFilterClick();
+        return true;
+      },
+      [KeyboardAction.CLEAR_SEARCH]: () => {
+        this.filterContent("");
+        this.refreshDocumentsGrid(true);
+        return true;
+      },
+    });
+
     if (!this._documentsIterator) {
       try {
         await this.autoPopulateContent();

src/Explorer/Tabs/TabsBase.ts

@@ -1,3 +1,4 @@
+import { KeyboardActionGroup, clearKeyboardActionGroup } from "KeyboardShortcuts";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import * as ThemeUtility from "../../Common/ThemeUtility";
@@ -107,6 +108,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   }
 
   public onActivate(): void {
+    clearKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
     this.updateSelectedNode();
     this.collection?.selectedSubnodeKind(this.tabKind);
     this.database?.selectedSubnodeKind(this.tabKind);

src/KeyboardShortcuts.tsx

@@ -17,8 +17,17 @@ export type KeyboardHandlerMap = Partial<Record<KeyboardAction, KeyboardActionHa
  * Each group can be updated separately, but, when updated, must be completely replaced.
  */
 export enum KeyboardActionGroup {
+  /** Keyboard actions related to tab navigation. */
   TABS = "TABS",
+
+  /** Keyboard actions managed by the global command bar. */
   COMMAND_BAR = "COMMAND_BAR",
+
+  /**
+   * Keyboard actions specific to the active tab.
+   * This group is automatically cleared when the active tab changes.
+   */
+  ACTIVE_TAB = "ACTIVE_TAB",
 }
 
 /**
@@ -43,6 +52,8 @@ export enum KeyboardAction {
   SELECT_LEFT_TAB = "SELECT_LEFT_TAB",
   SELECT_RIGHT_TAB = "SELECT_RIGHT_TAB",
   CLOSE_TAB = "CLOSE_TAB",
+  SEARCH = "SEARCH",
+  CLEAR_SEARCH = "CLEAR_SEARCH",
 }
 
 /**
@@ -72,6 +83,8 @@ const bindings: Record<KeyboardAction, string[]> = {
   [KeyboardAction.SELECT_LEFT_TAB]: ["$mod+Alt+[", "$mod+Shift+F6"],
   [KeyboardAction.SELECT_RIGHT_TAB]: ["$mod+Alt+]", "$mod+F6"],
   [KeyboardAction.CLOSE_TAB]: ["$mod+Alt+W"],
+  [KeyboardAction.SEARCH]: ["$mod+Shift+F"],
+  [KeyboardAction.CLEAR_SEARCH]: ["$mod+Shift+C"],
 };
 
 interface KeyboardShortcutState {
@@ -91,13 +104,24 @@ interface KeyboardShortcutState {
   setHandlers: (group: KeyboardActionGroup, handlers: KeyboardHandlerMap) => void;
 }
 
+export type KeyboardHandlerSetter = (handlers: KeyboardHandlerMap) => void;
+
 /**
  * Defines the calling component as the manager of the keyboard actions for the given group.
  * @param group The group of keyboard actions to manage.
  * @returns A function that can be used to set the keyboard action handlers for the given group.
  */
-export const useKeyboardActionGroup = (group: KeyboardActionGroup) => (handlers: KeyboardHandlerMap) =>
-  useKeyboardActionHandlers.getState().setHandlers(group, handlers);
+export const useKeyboardActionGroup: (group: KeyboardActionGroup) => KeyboardHandlerSetter =
+  (group: KeyboardActionGroup) => (handlers: KeyboardHandlerMap) =>
+    useKeyboardActionHandlers.getState().setHandlers(group, handlers);
+
+/**
+ * Clears the keyboard action handlers for the given group.
+ * @param group The group of keyboard actions to clear.
+ */
+export const clearKeyboardActionGroup = (group: KeyboardActionGroup) => {
+  useKeyboardActionHandlers.getState().setHandlers(group, {});
+};
 
 const useKeyboardActionHandlers: UseStore<KeyboardShortcutState> = create((set, get) => ({
   allHandlers: {},