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);