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.

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,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/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.test.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.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/KeyHandler.ts

@@ -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/iris-grid/src/IrisGrid.test.tsx

@@ -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', () => {

packages/iris-grid/src/IrisGrid.tsx

@@ -120,6 +120,7 @@ import {
   IrisGridColumnSelectMouseHandler,
   IrisGridColumnTooltipMouseHandler,
   IrisGridContextMenuHandler,
+  IrisGridCopyCellMouseHandler,
   IrisGridDataSelectMouseHandler,
   IrisGridFilterMouseHandler,
   IrisGridRowTreeMouseHandler,
@@ -311,6 +312,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;
 
@@ -485,6 +489,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     columnSelectionValidator: null,
     columnAllowedCursor: null,
     columnNotAllowedCursor: null,
+    copyCursor: null,
     name: 'table',
     onlyFetchVisibleColumns: true,
     showSearchBar: false,
@@ -617,6 +622,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,
@@ -694,15 +701,12 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       columnHeaderGroups,
     } = props;
 
+    const { dh } = model;
     const keyHandlers: KeyHandler[] = [
       new ReverseKeyHandler(this),
       new ClearFilterKeyHandler(this),
     ];
-    if (canCopy) {
-      keyHandlers.push(new CopyKeyHandler(this));
-    }
-    const { dh } = model;
-    const mouseHandlers = [
+    const mouseHandlers: GridMouseHandler[] = [
       new IrisGridCellOverflowMouseHandler(this),
       new IrisGridRowTreeMouseHandler(this),
       new IrisGridTokenMouseHandler(this),
@@ -714,7 +718,10 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       new IrisGridDataSelectMouseHandler(this),
       new PendingMouseHandler(this),
     ];
-
+    if (canCopy) {
+      keyHandlers.push(new CopyKeyHandler(this));
+      mouseHandlers.push(new IrisGridCopyCellMouseHandler(this));
+    }
     const movedColumns =
       movedColumnsProp.length > 0
         ? movedColumnsProp
@@ -1010,6 +1017,8 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
   gotoRowRef: React.RefObject<GotoRowElement>;
 
+  isCopying: boolean;
+
   toggleFilterBarAction: Action;
 
   toggleSearchBarAction: Action;
@@ -2031,6 +2040,25 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     }
   }
 
+  copyColumnHeader(columnIndex: GridRangeIndex, columnDepth = 0): void {
+    if (columnIndex === null) {
+      return;
+    }
+    const { canCopy } = this.props;
+    const { movedColumns } = this.state;
+
+    if (canCopy) {
+      const copyOperation = {
+        columnIndex,
+        columnDepth,
+        movedColumns,
+      };
+      this.setState({ copyOperation });
+    } else {
+      log.error('Attempted copyColumnHeader for user without copy permission.');
+    }
+  }
+
   /**
    * Copy the provided ranges to the clipboard
    * @paramranges The ranges to copy