feat: Add alt+click shortcut to copy cell and column headers (#1694)

Adds a alt/opt+click shortcut to copy the value of a cell or column
header.

Resolves #1585.

Author: georgecwan

packages/code-studio/src/assets/svg/cursor-copy.svg

@@ -248,6 +248,12 @@ $nav-space: 4px; // give a gap around some buttons for focus area that are in na
   }
 }
 
+.grid-cursor-copy {
+  cursor:
+    url('../assets/svg/cursor-copy.svg') 8 8,
+    copy;
+}
+
 .grid-cursor-linker {
   cursor:
     url('../assets/svg/cursor-linker.svg') 8 8,

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

@@ -17,6 +17,9 @@ export interface ContextAction {
   icon?: IconDefinition | React.ReactElement;
   iconColor?: string;
   shortcut?: Shortcut;
+
+  /* Display text for the shortcut if the shortcut is not wired up through the Shortcut class */
+  shortcutText?: string;
   isGlobal?: boolean;
   group?: number;
   order?: number;

packages/components/src/context-actions/ContextActionUtils.ts

@@ -71,7 +71,8 @@ const ContextMenuItem = React.forwardRef<HTMLDivElement, ContextMenuItemProps>(
       'data-testid': dataTestId,
     } = props;
 
-    const displayShortcut = menuItem.shortcut?.getDisplayText();
+    const displayShortcut =
+      menuItem.shortcutText ?? menuItem.shortcut?.getDisplayText();
     let icon: IconDefinition | React.ReactElement | null = null;
     if (menuItem.icon) {
       const menuItemIcon = menuItem.icon;

packages/components/src/context-actions/ContextMenuItem.tsx

@@ -31,3 +31,7 @@ $panel-message-overlay-top: 30px;
 .grid-cursor-linker {
   cursor: crosshair;
 }
+
+.grid-cursor-copy {
+  cursor: copy;
+}

packages/dashboard-core-plugins/src/panels/IrisGridPanel.scss

@@ -1308,6 +1308,7 @@ export class IrisGridPanel extends PureComponent<
             )}
             columnAllowedCursor="linker"
             columnNotAllowedCursor="linker-not-allowed"
+            copyCursor="copy"
             customColumns={customColumns}
             customColumnFormatMap={customColumnFormatMap}
             columnSelectionValidator={this.isColumnSelectionValid}

packages/dashboard-core-plugins/src/panels/IrisGridPanel.tsx

@@ -220,7 +220,8 @@ function mouseDoubleClick(
 
 function keyDown(key: string, component: Grid, extraArgs?: KeyboardEventInit) {
   const args = { key, ...extraArgs };
-  component.handleKeyDown(
+  component.notifyKeyboardHandlers(
+    'onDown',
     new KeyboardEvent('keydown', args) as unknown as React.KeyboardEvent
   );
 }

packages/grid/src/Grid.test.tsx

@@ -34,7 +34,10 @@ import {
   GridTokenMouseHandler,
 } from './mouse-handlers';
 import './Grid.scss';
-import KeyHandler, { GridKeyboardEvent } from './KeyHandler';
+import KeyHandler, {
+  GridKeyHandlerFunctionName,
+  GridKeyboardEvent,
+} from './KeyHandler';
 import {
   EditKeyHandler,
   PasteKeyHandler,
@@ -342,7 +345,9 @@ class Grid extends PureComponent<GridProps, GridState> {
     this.handleEditCellChange = this.handleEditCellChange.bind(this);
     this.handleEditCellCommit = this.handleEditCellCommit.bind(this);
     this.handleDoubleClick = this.handleDoubleClick.bind(this);
+    this.notifyKeyboardHandlers = this.notifyKeyboardHandlers.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
     this.handleMouseDown = this.handleMouseDown.bind(this);
     this.handleMouseDrag = this.handleMouseDrag.bind(this);
     this.handleMouseMove = this.handleMouseMove.bind(this);
@@ -1715,14 +1720,20 @@ class Grid extends PureComponent<GridProps, GridState> {
   }
 
   /**
-   * Handle a key down event from the keyboard. Pass the event to the registered keyboard handlers until one handles it.
-   * @param event Keyboard event
+   * Notify all of the keyboard handlers for this grid of a keyboard event.
+   * @param functionName The name of the function in the keyboard handler to call
+   * @param event The keyboard event to notify
    */
-  handleKeyDown(event: GridKeyboardEvent): void {
+  notifyKeyboardHandlers(
+    functionName: GridKeyHandlerFunctionName,
+    event: GridKeyboardEvent
+  ): void {
     const keyHandlers = this.getKeyHandlers();
     for (let i = 0; i < keyHandlers.length; i += 1) {
       const keyHandler = keyHandlers[i];
-      const result = keyHandler.onDown(event, this);
+      const result =
+        keyHandler[functionName] != null &&
+        keyHandler[functionName](event, this);
       if (result !== false) {
         const options = result as EventHandlerResultOptions;
         if (options?.stopPropagation ?? true) event.stopPropagation();
@@ -1732,6 +1743,14 @@ class Grid extends PureComponent<GridProps, GridState> {
     }
   }
 
+  handleKeyDown(event: GridKeyboardEvent): void {
+    this.notifyKeyboardHandlers('onDown', event);
+  }
+
+  handleKeyUp(event: GridKeyboardEvent): void {
+    this.notifyKeyboardHandlers('onUp', event);
+  }
+
   /**
    * Notify all of the mouse handlers for this grid of a mouse event.
    * @param functionName The name of the function in the mouse handler to call
@@ -2229,6 +2248,7 @@ class Grid extends PureComponent<GridProps, GridState> {
           onContextMenu={this.handleContextMenu}
           onDoubleClick={this.handleDoubleClick}
           onKeyDown={this.handleKeyDown}
+          onKeyUp={this.handleKeyUp}
           onMouseDown={this.handleMouseDown}
           onMouseMove={this.handleMouseMove}
           onMouseLeave={this.handleMouseLeave}

packages/grid/src/Grid.tsx

@@ -15,6 +15,8 @@ import type Grid from './Grid';
  */
 export type GridKeyboardEvent = KeyboardEvent | React.KeyboardEvent;
 
+export type GridKeyHandlerFunctionName = 'onDown' | 'onUp';
+
 export class KeyHandler {
   order: number;
 
@@ -33,6 +35,16 @@ export class KeyHandler {
   onDown(event: GridKeyboardEvent, grid: Grid): EventHandlerResult {
     return false;
   }
+
+  /**
+   * Handle a keyup event on the grid.
+   * @param event The keyboard event
+   * @param grid The grid component the key press is on
+   * @returns Response indicating if the key was consumed
+   */
+  onUp(event: GridKeyboardEvent, grid: Grid): EventHandlerResult {
+    return false;
+  }
 }
 
 export default KeyHandler;

packages/grid/src/KeyHandler.ts

@@ -80,7 +80,10 @@ function makeComponent(
 
 function keyDown(key, component, extraArgs?) {
   const args = { key, ...extraArgs };
-  component.grid.handleKeyDown(new KeyboardEvent('keydown', args));
+  component.grid.notifyKeyboardHandlers(
+    'onDown',
+    new KeyboardEvent('keydown', args)
+  );
 }
 
 it('renders without crashing', () => {