[Task 3061766] Additional Keyboard Shortcuts (#1805)

* [Task 3061766] Additional Keyboard Shortcuts

refmt and fix lints

shortcuts for: discard, new item/sproc/udf/trigger, delete
item/sproc/udf/trigger

copilot shortcut

* remove 'Ctrl+I' due to conflict with Monaco Autocomplete

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -41,7 +41,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
   const backgroundColor = StyleConstants.BaseLight;
-  const setKeyboardShortcutHandlers = useKeyboardActionHandlers((state) => state.setHandlers);
+  const setKeyboardActionHandlers = useKeyboardActionHandlers((state) => state.setHandlers);
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
@@ -109,7 +109,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
   const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
-  setKeyboardShortcutHandlers(keyboardHandlers);
+  setKeyboardActionHandlers(keyboardHandlers);
 
   return (
     <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -58,6 +58,7 @@ export function createStaticCommandBarButtons(
     buttons.push(homeBtn);
 
     const newCollectionBtn = createNewCollectionGroup(container);
+    newCollectionBtn.keyboardAction = KeyboardAction.NEW_COLLECTION; // Just for the root button, not the child version we create below.
     buttons.push(newCollectionBtn);
     if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
       const addSynapseLink = createOpenSynapseLinkDialogButton(container);
@@ -95,6 +96,7 @@ export function createStaticCommandBarButtons(
       const newStoredProcedureBtn: CommandButtonComponentProps = {
         iconSrc: AddStoredProcedureIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.NEW_SPROC,
         onCommandClick: () => {
           const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
           selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
@@ -278,6 +280,7 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
   return {
     iconSrc: AddDatabaseIcon,
     iconAlt: label,
+    keyboardAction: KeyboardAction.NEW_DATABASE,
     onCommandClick: async () => {
       const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
       if (throughputCap && throughputCap !== -1) {
@@ -340,6 +343,7 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
     const newStoredProcedureBtn: CommandButtonComponentProps = {
       iconSrc: AddStoredProcedureIcon,
       iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_SPROC,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
@@ -359,6 +363,7 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
     const newUserDefinedFunctionBtn: CommandButtonComponentProps = {
       iconSrc: AddUdfIcon,
       iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_UDF,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection);
@@ -378,6 +383,7 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
     const newTriggerBtn: CommandButtonComponentProps = {
       iconSrc: AddTriggerIcon,
       iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_TRIGGER,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection);

src/Explorer/Tabs/DocumentsTab.ts

@@ -894,6 +894,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: NewDocumentIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.NEW_ITEM,
         onCommandClick: this.onNewDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -923,6 +924,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onRevertNewDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -953,6 +955,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onRevertExisitingDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -968,6 +971,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: DeleteDocumentIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.DELETE_ITEM,
         onCommandClick: this.onDeleteExisitingDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -440,7 +440,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
         hasPopup: false,
       };
 
-      const launchCopilotButton = {
+      const launchCopilotButton: CommandButtonComponentProps = {
         iconSrc: LaunchCopilot,
         iconAlt: mainButtonLabel,
         onCommandClick: this.launchQueryCopilotChat,
@@ -453,9 +453,10 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
     }
 
     if (this.props.copilotEnabled) {
-      const toggleCopilotButton = {
+      const toggleCopilotButton: CommandButtonComponentProps = {
         iconSrc: QueryCommandIcon,
         iconAlt: "Copilot",
+        keyboardAction: KeyboardAction.TOGGLE_COPILOT,
         onCommandClick: () => {
           this._toggleCopilot(!this.state.copilotActive);
         },
@@ -471,7 +472,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       buttons.push({
         iconSrc: CancelQueryIcon,
         iconAlt: label,
-        keyboardAction: KeyboardAction.CANCEL_QUERY,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: () => this.queryAbortController.abort(),
         commandButtonLabel: label,
         ariaLabel: label,

src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx

@@ -350,6 +350,7 @@ export default class StoredProcedureTabComponent extends React.Component<
       buttons.push({
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onDiscard,
         commandButtonLabel: label,
         ariaLabel: label,

src/Explorer/Tabs/TriggerTabContent.tsx

@@ -271,6 +271,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
         ...this,
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onDiscard,
         commandButtonLabel: label,
         ariaLabel: label,

src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx

@@ -112,6 +112,7 @@ export default class UserDefinedFunctionTabContent extends Component<
         ...this,
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onDiscard,
         commandButtonLabel: label,
         ariaLabel: label,

src/KeyboardShortcuts.tsx

@@ -18,10 +18,18 @@ export type KeyboardHandlerMap = Partial<Record<KeyboardAction, KeyboardActionHa
 export enum KeyboardAction {
   NEW_QUERY = "NEW_QUERY",
   EXECUTE_ITEM = "EXECUTE_ITEM",
-  CANCEL_QUERY = "CANCEL_QUERY",
+  CANCEL_OR_DISCARD = "CANCEL_OR_DISCARD",
   SAVE_ITEM = "SAVE_ITEM",
   OPEN_QUERY = "OPEN_QUERY",
   OPEN_QUERY_FROM_DISK = "OPEN_QUERY_FROM_DISK",
+  NEW_SPROC = "NEW_SPROC",
+  NEW_UDF = "NEW_UDF",
+  NEW_TRIGGER = "NEW_TRIGGER",
+  NEW_DATABASE = "NEW_DATABASE",
+  NEW_COLLECTION = "NEW_CONTAINER",
+  NEW_ITEM = "NEW_ITEM",
+  DELETE_ITEM = "DELETE_ITEM",
+  TOGGLE_COPILOT = "TOGGLE_COPILOT",
 }
 
 /**
@@ -33,12 +41,20 @@ const bindings: Record<KeyboardAction, string[]> = {
   // NOTE: The "$mod" special value is used to represent the "Control" key on Windows/Linux and the "Command" key on macOS.
   // See https://www.npmjs.com/package/tinykeys#commonly-used-keys-and-codes for more information on the expected values for keyboard shortcuts.
 
-  [KeyboardAction.NEW_QUERY]: ["$mod+J"],
+  [KeyboardAction.NEW_QUERY]: ["$mod+J", "Alt+N Q"],
   [KeyboardAction.EXECUTE_ITEM]: ["Shift+Enter"],
-  [KeyboardAction.CANCEL_QUERY]: ["Escape"],
+  [KeyboardAction.CANCEL_OR_DISCARD]: ["Escape"],
   [KeyboardAction.SAVE_ITEM]: ["$mod+S"],
   [KeyboardAction.OPEN_QUERY]: ["$mod+O"],
   [KeyboardAction.OPEN_QUERY_FROM_DISK]: ["$mod+Shift+O"],
+  [KeyboardAction.NEW_SPROC]: ["Alt+N P"],
+  [KeyboardAction.NEW_UDF]: ["Alt+N F"],
+  [KeyboardAction.NEW_TRIGGER]: ["Alt+N T"],
+  [KeyboardAction.NEW_DATABASE]: ["Alt+N D"],
+  [KeyboardAction.NEW_COLLECTION]: ["Alt+N C"],
+  [KeyboardAction.NEW_ITEM]: ["Alt+N I"],
+  [KeyboardAction.DELETE_ITEM]: ["Alt+D"],
+  [KeyboardAction.TOGGLE_COPILOT]: ["$mod+P"],
 };
 
 interface KeyboardShortcutState {