feat: Add alt+click shortcut to copy cell and column headers

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

@@ -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/components/src/context-actions/ContextActionUtils.ts

@@ -17,6 +17,7 @@ export interface ContextAction {
   icon?: IconDefinition | React.ReactElement;
   iconColor?: string;
   shortcut?: Shortcut;
+  shortcutText?: string;
   isGlobal?: boolean;
   group?: number;
   order?: number;

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

@@ -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/dashboard-core-plugins/src/panels/IrisGridPanel.scss

@@ -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.tsx

@@ -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/grid/src/Grid.tsx

@@ -343,6 +343,7 @@ class Grid extends PureComponent<GridProps, GridState> {
     this.handleEditCellCommit = this.handleEditCellCommit.bind(this);
     this.handleDoubleClick = this.handleDoubleClick.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);
@@ -1732,6 +1733,24 @@ class Grid extends PureComponent<GridProps, GridState> {
     }
   }
 
+  /**
+   * Handle a key up event from the keyboard. Pass the event to the registered keyboard handlers until one handles it.
+   * @param event Keyboard event
+   */
+  handleKeyUp(event: GridKeyboardEvent): void {
+    const keyHandlers = this.getKeyHandlers();
+    for (let i = 0; i < keyHandlers.length; i += 1) {
+      const keyHandler = keyHandlers[i];
+      const result = keyHandler.onUp(event, this);
+      if (result !== false) {
+        const options = result as EventHandlerResultOptions;
+        if (options?.stopPropagation ?? true) event.stopPropagation();
+        if (options?.preventDefault ?? true) event.preventDefault();
+        break;
+      }
+    }
+  }
+
   /**
    * 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/KeyHandler.ts

@@ -33,6 +33,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/iris-grid/src/IrisGrid.tsx

@@ -120,6 +120,7 @@ import {
   IrisGridColumnSelectMouseHandler,
   IrisGridColumnTooltipMouseHandler,
   IrisGridContextMenuHandler,
+  IrisGridCopyCellMouseHandler,
   IrisGridDataSelectMouseHandler,
   IrisGridFilterMouseHandler,
   IrisGridRowTreeMouseHandler,
@@ -310,6 +311,9 @@ export interface IrisGridProps {
 
   // eslint-disable-next-line react/no-unused-prop-types
   columnNotAllowedCursor: string;
+
+  // eslint-disable-next-line react/no-unused-prop-types
+  copyCursor: string;
   name: string;
   onlyFetchVisibleColumns: boolean;
 
@@ -484,6 +488,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     columnSelectionValidator: null,
     columnAllowedCursor: null,
     columnNotAllowedCursor: null,
+    copyCursor: null,
     name: 'table',
     onlyFetchVisibleColumns: true,
     showSearchBar: false,
@@ -616,6 +621,8 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
     this.gotoRowRef = React.createRef();
 
+    this.isCopying = false;
+
     this.toggleFilterBarAction = {
       action: () => this.toggleFilterBar(),
       shortcut: SHORTCUTS.TABLE.TOGGLE_QUICK_FILTER,
@@ -702,6 +709,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     }
     const { dh } = model;
     const mouseHandlers = [
+      new IrisGridCopyCellMouseHandler(this),
       new IrisGridCellOverflowMouseHandler(this),
       new IrisGridRowTreeMouseHandler(this),
       new IrisGridTokenMouseHandler(this),
@@ -1009,6 +1017,8 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
   gotoRowRef: React.RefObject<GotoRowElement>;
 
+  isCopying: boolean;
+
   toggleFilterBarAction: Action;
 
   toggleSearchBarAction: Action;
@@ -2018,6 +2028,17 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     }
   }
 
+  copyColumnHeader(columnIndex: GridRangeIndex): void {
+    if (columnIndex === null) {
+      return;
+    }
+    const { model } = this.props;
+
+    copyToClipboard(model.textForColumnHeader(columnIndex) ?? '').catch(e =>
+      log.error('Unable to copy header', e)
+    );
+  }
+
   /**
    * Copy the provided ranges to the clipboard
    * @paramranges The ranges to copy

packages/iris-grid/src/mousehandlers/IrisGridContextMenuHandler.tsx

@@ -337,6 +337,7 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
     actions.push({
       title: 'Copy Column Name',
       group: IrisGridContextMenuHandler.GROUP_COPY,
+      shortcutText: ContextActionUtils.isMacPlatform() ? '⌥Click' : 'Alt+Click',
       action: () => {
         copyToClipboard(model.textForColumnHeader(modelIndex) ?? '').catch(e =>
           log.error('Unable to copy header', e)
@@ -632,6 +633,9 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
       actions.push({
         title: 'Copy Cell',
         group: IrisGridContextMenuHandler.GROUP_COPY,
+        shortcutText: ContextActionUtils.isMacPlatform()
+          ? '⌥Click'
+          : 'Alt+Click',
         order: 10,
         action: () => {
           irisGrid.copyCell(columnIndex, rowIndex);

packages/iris-grid/src/mousehandlers/IrisGridCopyCellMouseHandler.ts

@@ -0,0 +1,60 @@
+import {
+  Grid,
+  GridMouseHandler,
+  GridPoint,
+  EventHandlerResult,
+  GridMouseEvent,
+} from '@deephaven/grid';
+import { ContextActionUtils } from '@deephaven/components';
+import IrisGrid from '../IrisGrid';
+
+class IrisGridCopyCellMouseHandler extends GridMouseHandler {
+  private irisGrid: IrisGrid;
+
+  constructor(irisGrid: IrisGrid) {
+    super();
+
+    this.irisGrid = irisGrid;
+    this.cursor = null;
+  }
+
+  onClick(
+    gridPoint: GridPoint,
+    grid: Grid,
+    event: GridMouseEvent
+  ): EventHandlerResult {
+    if (
+      event.altKey &&
+      !ContextActionUtils.isModifierKeyDown(event) &&
+      !event.shiftKey
+    ) {
+      this.cursor = null;
+      if (gridPoint.columnHeaderDepth !== undefined) {
+        this.irisGrid.copyColumnHeader(gridPoint.column);
+      } else {
+        this.irisGrid.copyCell(gridPoint.column, gridPoint.row);
+      }
+      return true;
+    }
+    return false;
+  }
+
+  onMove(
+    gridPoint: GridPoint,
+    _grid: Grid,
+    event: GridMouseEvent
+  ): EventHandlerResult {
+    if (
+      event.altKey &&
+      !ContextActionUtils.isModifierKeyDown(event) &&
+      !event.shiftKey &&
+      gridPoint.column != null &&
+      (gridPoint.row != null || gridPoint.columnHeaderDepth != null)
+    ) {
+      this.cursor = this.irisGrid.props.copyCursor;
+      return true;
+    }
+    return false;
+  }
+}
+export default IrisGridCopyCellMouseHandler;

packages/iris-grid/src/mousehandlers/index.ts

@@ -2,6 +2,7 @@ export { default as IrisGridCellOverflowMouseHandler } from './IrisGridCellOverf
 export { default as IrisGridColumnSelectMouseHandler } from './IrisGridColumnSelectMouseHandler';
 export { default as IrisGridColumnTooltipMouseHandler } from './IrisGridColumnTooltipMouseHandler';
 export { default as IrisGridContextMenuHandler } from './IrisGridContextMenuHandler';
+export { default as IrisGridCopyCellMouseHandler } from './IrisGridCopyCellMouseHandler';
 export { default as IrisGridDataSelectMouseHandler } from './IrisGridDataSelectMouseHandler';
 export { default as IrisGridFilterMouseHandler } from './IrisGridFilterMouseHandler';
 export { default as IrisGridRowTreeMouseHandler } from './IrisGridRowTreeMouseHandler';