add shortcuts for the Items tab (#1827)

* add shortcuts for the Items tab

* Add shortcut to clear Items tab filter.
This commit is contained in:
Ashley Stanton-Nurse 2024-04-30 10:03:27 -07:00 committed by GitHub
parent b023250e67
commit 81a5b7cb6d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 62 additions and 4 deletions

View File

@ -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.' 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 }, css: { placeholderVisible: filterContent().length === 0 },
textInput: filterContent" textInput: filterContent,
event: { keydown: onFilterKeyDown }"
/> />
<datalist <datalist

View File

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

View File

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

View File

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