feat: DH-14431: Add shortcuts to cycle dashboards (#2470)

Part of DH-14431. Introduces keyboard navigation shortcuts to cycle
between dashboards.

`Cmd/Ctrl + .`: to cycle the active dashboard forward
`Cmd/Ctrl + ,`: to cycle the active dashboard backward

Changes:
- Add shortcuts to cycle dashboard to `NavigationShortcuts.ts`
- Registered the shortcuts as global context actions
- Add `handleCycleDashboardForward` and `handleCycleDashboardBackward`
to manage cycling

Author: gzh2003

packages/code-studio/src/main/AppMainContainer.tsx

@@ -104,6 +104,11 @@ import {
 } from '../settings/SettingsUtils';
 import EmptyDashboard from './EmptyDashboard';
 
+enum CycleDirection {
+  Next,
+  Previous,
+}
+
 const log = Log.module('AppMainContainer');
 
 type InputFileFormat =
@@ -268,6 +273,20 @@ export class AppMainContainer extends Component<
           shortcut: NAVIGATION_SHORTCUTS.CYCLE_TO_PREVIOUS_TAB,
           isGlobal: true,
         },
+        {
+          action: () => {
+            this.handleCycleDashboardForward();
+          },
+          shortcut: NAVIGATION_SHORTCUTS.CYCLE_TO_NEXT_DASHBOARD,
+          isGlobal: true,
+        },
+        {
+          action: () => {
+            this.handleCycleDashboardBackward();
+          },
+          shortcut: NAVIGATION_SHORTCUTS.CYCLE_TO_PREVIOUS_DASHBOARD,
+          isGlobal: true,
+        },
         {
           action: () => {
             this.sendReopenLast();
@@ -464,6 +483,35 @@ export class AppMainContainer extends Component<
     this.emitLayoutEvent(PanelEvent.REOPEN_LAST);
   }
 
+  cycleDashboard(direction: CycleDirection): void {
+    const { tabs, activeTabKey } = this.state;
+
+    if (tabs.length <= 1) {
+      return;
+    }
+
+    const currentIndex = tabs.findIndex(tab => tab.key === activeTabKey);
+    if (currentIndex === -1) {
+      return;
+    }
+
+    const targetIndex =
+      direction === CycleDirection.Next
+        ? (currentIndex + 1) % tabs.length
+        : (currentIndex - 1 + tabs.length) % tabs.length;
+
+    const targetTab = tabs[targetIndex];
+    this.handleTabSelect(targetTab.key);
+  }
+
+  handleCycleDashboardForward(): void {
+    this.cycleDashboard(CycleDirection.Next);
+  }
+
+  handleCycleDashboardBackward(): void {
+    this.cycleDashboard(CycleDirection.Previous);
+  }
+
   getActiveEventHub(): EventHub {
     const { activeTabKey } = this.state;
     const layout = this.dashboardLayouts.get(activeTabKey);

packages/components/src/shortcuts/NavigationShortcuts.ts

@@ -30,6 +30,20 @@ const NAVIGATION_SHORTCUTS = {
     macShortcut: [MODIFIER.CMD, MODIFIER.SHIFT, KEY.SEMICOLON],
     isEditable: true,
   }),
+  CYCLE_TO_NEXT_DASHBOARD: ShortcutRegistry.createAndAdd({
+    id: 'NAVIGATION.CYCLE_TO_NEXT_DASHBOARD',
+    name: 'Cycle To Next Dashboard',
+    shortcut: [MODIFIER.CTRL, KEY.PERIOD],
+    macShortcut: [MODIFIER.CMD, KEY.PERIOD],
+    isEditable: true,
+  }),
+  CYCLE_TO_PREVIOUS_DASHBOARD: ShortcutRegistry.createAndAdd({
+    id: 'NAVIGATION.CYCLE_TO_PREVIOUS_DASHBOARD',
+    name: 'Cycle To Previous Dashboard',
+    shortcut: [MODIFIER.CTRL, KEY.COMMA],
+    macShortcut: [MODIFIER.CMD, KEY.COMMA],
+    isEditable: true,
+  }),
 };
 
 export default NAVIGATION_SHORTCUTS;