fix: No context menu item for paste in an input table (#2341)

- Added paste as a context menu option in IrisGrid
- Added methods to check for and request clipboard permissions, which
are called when clicking paste in context menu
- For browsers that support the `clipboard-read` permission (e.g.
Chrome), clicking paste results in the same behaviour as pressing the
keyboard shortcut, provided the user has accepted the request for
permission
- For browsers that don't support the `clipboard-read` permission (e.g.
Firefox and Safari), a modal is shown to explain the reason and to
suggest using the keyboard shortcut instead

Additional related issues fixed
- Show relevant warning when attempting to paste too many columns into
input table
- Fixed copy and pasting between Deephaven tables on Firefox. The issue
is caused by tabs in pasted content being converted to
`    ` instead of `    ` which we were
expecting before. Was able to reproduce former behaviour on an older
build of Firefox (91.0), meaning this discrepancy is likely caused by an
update to Firefox (unsure when exactly)

Author: ericlln

packages/grid/src/Grid.tsx

@@ -1552,6 +1552,10 @@ class Grid extends PureComponent<GridProps, GridState> {
 
       const edits: EditOperation[] = [];
       ranges.forEach(range => {
+        if ((range.startColumn ?? 0) + tableWidth > columnCount) {
+          throw new PasteError('Pasted content would overflow columns.');
+        }
+
         for (let x = 0; x < tableWidth; x += 1) {
           for (let y = 0; y < tableHeight; y += 1) {
             edits.push({

packages/grid/src/key-handlers/PasteKeyHandler.test.tsx

@@ -66,13 +66,13 @@ describe('table parsing', () => {
 
   const TEXT_TABLE_FIREFOX = (
     <>
-      A&nbsp;&nbsp; &nbsp;B&nbsp;&nbsp; &nbsp;C
+      A&nbsp;&nbsp;&nbsp; B&nbsp;&nbsp;&nbsp; C
       <br />
-      1&nbsp;&nbsp; &nbsp;2&nbsp;&nbsp; &nbsp;3
+      1&nbsp;&nbsp;&nbsp; 2&nbsp;&nbsp;&nbsp; 3
     </>
   );
 
-  const SINGLE_ROW_FIREFOX = <>A&nbsp;&nbsp; &nbsp;B&nbsp;&nbsp; &nbsp;C</>;
+  const SINGLE_ROW_FIREFOX = <>A&nbsp;&nbsp;&nbsp; B&nbsp;&nbsp;&nbsp; C</>;
 
   function testTable(jsx: JSX.Element, expectedValue: string[][]) {
     const element = makeElementFromJsx(jsx);

packages/grid/src/key-handlers/PasteKeyHandler.ts

@@ -39,10 +39,9 @@ export function parseValueFromNodes(nodes: NodeListOf<ChildNode>): string[][] {
     if (text.length > 0) {
       // When Chrome pastes a table from text, it preserves the tab characters
       // In Firefox, it breaks it into a combination of non-breaking spaces and spaces
-      result.push(text.split(/\t|\u00a0\u00a0 \u00a0/));
+      result.push(text.split(/\t|\u00a0\u00a0\u00a0 /));
     }
   });
-
   return result;
 }
 
@@ -62,7 +61,7 @@ export function parseValueFromElement(
     // If there's only one row and it doesn't contain a tab, then just treat it as a regular value
     const { childNodes } = element;
     const hasTabChar = text.includes('\t');
-    const hasFirefoxTab = text.includes('\u00a0\u00a0 \u00a0');
+    const hasFirefoxTab = text.includes('\u00a0\u00a0\u00a0 ');
     if (
       hasTabChar &&
       childNodes.length !== 0 &&

packages/iris-grid/src/IrisGrid.tsx

@@ -194,6 +194,7 @@ import {
 import type ColumnHeaderGroup from './ColumnHeaderGroup';
 import { IrisGridThemeContext } from './IrisGridThemeProvider';
 import { isMissingPartitionError } from './MissingPartitionError';
+import { NoPastePermissionModal } from './NoPastePermissionModal';
 
 const log = Log.module('IrisGrid');
 
@@ -442,6 +443,8 @@ export interface IrisGridState {
   toastMessage: JSX.Element | null;
   frozenColumns: readonly ColumnName[];
   showOverflowModal: boolean;
+  showNoPastePermissionModal: boolean;
+  noPastePermissionError: string;
   overflowText: string;
   overflowButtonTooltipProps: CSSProperties | null;
   expandCellTooltipProps: CSSProperties | null;
@@ -624,6 +627,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     this.handleCrossColumnSearch = this.handleCrossColumnSearch.bind(this);
     this.handleRollupChange = this.handleRollupChange.bind(this);
     this.handleOverflowClose = this.handleOverflowClose.bind(this);
+    this.handleCloseNoPastePermissionModal =
+      this.handleCloseNoPastePermissionModal.bind(this);
     this.getColumnBoundingRect = this.getColumnBoundingRect.bind(this);
     this.handleGotoRowSelectedRowNumberChanged =
       this.handleGotoRowSelectedRowNumberChanged.bind(this);
@@ -870,6 +875,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       toastMessage: null,
       frozenColumns,
       showOverflowModal: false,
+      showNoPastePermissionModal: false,
+      noPastePermissionError: '',
       overflowText: '',
       overflowButtonTooltipProps: null,
       expandCellTooltipProps: null,
@@ -3853,6 +3860,19 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     });
   }
 
+  handleOpenNoPastePermissionModal(errorMessage: string): void {
+    this.setState({
+      showNoPastePermissionModal: true,
+      noPastePermissionError: errorMessage,
+    });
+  }
+
+  handleCloseNoPastePermissionModal(): void {
+    this.setState({
+      showNoPastePermissionModal: false,
+    });
+  }
+
   getColumnBoundingRect(): DOMRect {
     const { metrics, shownColumnTooltip } = this.state;
     assertNotNull(metrics);
@@ -4273,6 +4293,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       frozenColumns,
       columnHeaderGroups,
       showOverflowModal,
+      showNoPastePermissionModal,
+      noPastePermissionError,
       overflowText,
       overflowButtonTooltipProps,
       expandCellTooltipProps,
@@ -4998,6 +5020,11 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
           </div>
         </SlideTransition>
         <ContextActions actions={this.contextActions} />
+        <NoPastePermissionModal
+          isOpen={showNoPastePermissionModal}
+          onClose={this.handleCloseNoPastePermissionModal}
+          errorMessage={noPastePermissionError}
+        />
       </div>
     );
   }

packages/iris-grid/src/NoPastePermissionModal.tsx

@@ -0,0 +1,36 @@
+import {
+  Button,
+  GLOBAL_SHORTCUTS,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from '@deephaven/components';
+
+export type NoPastePermissionModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  errorMessage: string;
+};
+
+export function NoPastePermissionModal({
+  isOpen,
+  onClose,
+  errorMessage,
+}: NoPastePermissionModalProps): JSX.Element {
+  const pasteShortcutText = GLOBAL_SHORTCUTS.PASTE.getDisplayText();
+  return (
+    <Modal isOpen={isOpen} toggle={onClose} centered>
+      <ModalHeader closeButton={false}>No Paste Permission</ModalHeader>
+      <ModalBody>
+        <p>{errorMessage}</p>
+        <p>You can still use {pasteShortcutText} to paste.</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="primary" onClick={onClose}>
+          Dismiss
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}

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

@@ -40,11 +40,14 @@ import {
 import Log from '@deephaven/log';
 import type { DebouncedFunc } from 'lodash';
 import {
+  ClipboardPermissionsDeniedError,
+  ClipboardUnavailableError,
   TextUtils,
   assertNotEmpty,
   assertNotNaN,
   assertNotNull,
   copyToClipboard,
+  readFromClipboard,
 } from '@deephaven/utils';
 import {
   DateTimeFormatContextMenu,
@@ -477,6 +480,31 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
       });
     }
 
+    actions.push({
+      title: 'Paste',
+      group: IrisGridContextMenuHandler.GROUP_COPY,
+      order: 50,
+      action: async () => {
+        try {
+          const text = await readFromClipboard();
+          const items = text.split('\n').map(row => row.split('\t'));
+          await grid.pasteValue(items);
+        } catch (err) {
+          if (err instanceof ClipboardUnavailableError) {
+            irisGrid.handleOpenNoPastePermissionModal(
+              'For security reasons your browser does not allow access to your clipboard on click.'
+            );
+          } else if (err instanceof ClipboardPermissionsDeniedError) {
+            irisGrid.handleOpenNoPastePermissionModal(
+              'Requested clipboard permissions have not been granted, please grant them and try again.'
+            );
+          } else {
+            throw err;
+          }
+        }
+      },
+    });
+
     actions.push({
       title: 'View Cell Contents',
       group: IrisGridContextMenuHandler.GROUP_VIEW_CONTENTS,

packages/utils/src/ClipboardUtils.test.ts

@@ -1,7 +1,16 @@
-import { copyToClipboard } from './ClipboardUtils';
+import { copyToClipboard, readFromClipboard } from './ClipboardUtils';
+import {
+  ClipboardPermissionsDeniedError,
+  ClipboardUnavailableError,
+} from './errors';
+import { checkPermission } from './PermissionUtils';
 
 document.execCommand = jest.fn();
 
+jest.mock('./PermissionUtils', () => ({
+  checkPermission: jest.fn(),
+}));
+
 describe('Clipboard', () => {
   describe('writeText', () => {
     beforeEach(() => jest.resetAllMocks());
@@ -55,4 +64,113 @@ describe('Clipboard', () => {
       await expect(document.execCommand).toHaveBeenCalledWith('copy');
     });
   });
+
+  describe('readFromClipboard', () => {
+    beforeEach(() => jest.resetAllMocks());
+
+    it('should throw unavailable error if clipboard is undefined', async () => {
+      Object.assign(navigator, {
+        clipboard: undefined,
+      });
+
+      await expect(readFromClipboard()).rejects.toThrow(
+        ClipboardUnavailableError
+      );
+    });
+
+    it('should throw unavailable error if PermissionState is null', async () => {
+      (checkPermission as jest.Mock).mockResolvedValue(null);
+
+      await expect(readFromClipboard()).rejects.toThrow(
+        ClipboardUnavailableError
+      );
+    });
+
+    it('should return text if PermissionState is granted', async () => {
+      Object.assign(navigator, {
+        clipboard: {
+          readText: jest.fn().mockResolvedValueOnce('text from clipboard'),
+        },
+      });
+
+      (checkPermission as jest.Mock).mockResolvedValueOnce('granted');
+
+      await expect(readFromClipboard()).resolves.toBe('text from clipboard');
+    });
+
+    it('should throw denied error if PermissionState is denied', async () => {
+      Object.assign(navigator, {
+        clipboard: {
+          readText: jest.fn(),
+        },
+      });
+
+      (checkPermission as jest.Mock).mockResolvedValue('denied');
+
+      await expect(readFromClipboard()).rejects.toThrow(
+        ClipboardPermissionsDeniedError
+      );
+    });
+
+    it('should return text if permission prompt accepted', async () => {
+      const mockClipboard = {
+        readText: jest
+          .fn()
+          .mockRejectedValueOnce(new Error('Missing permission'))
+          .mockResolvedValueOnce('text from clipboard'),
+      };
+
+      Object.assign(navigator, {
+        clipboard: mockClipboard,
+      });
+
+      (checkPermission as jest.Mock)
+        .mockResolvedValueOnce('prompt')
+        .mockResolvedValue('granted');
+
+      await expect(readFromClipboard()).resolves.toBe('text from clipboard');
+      expect(checkPermission).toHaveBeenCalledTimes(2);
+      expect(mockClipboard.readText).toHaveBeenCalledTimes(2);
+    });
+
+    it('should throw denied error if permission prompt denied', async () => {
+      const mockClipboard = {
+        readText: jest
+          .fn()
+          .mockRejectedValueOnce(new Error('Missing permission')),
+      };
+
+      Object.assign(navigator, {
+        clipboard: mockClipboard,
+      });
+
+      (checkPermission as jest.Mock)
+        .mockResolvedValueOnce('prompt')
+        .mockResolvedValue('denied');
+
+      await expect(readFromClipboard()).rejects.toThrow(
+        ClipboardPermissionsDeniedError
+      );
+      expect(checkPermission).toHaveBeenCalledTimes(2);
+      expect(mockClipboard.readText).toHaveBeenCalledTimes(1);
+    });
+
+    it('should throw denied error if permission prompt closed', async () => {
+      const mockClipboard = {
+        readText: jest.fn().mockRejectedValue(new Error('Missing permission')),
+      };
+
+      Object.assign(navigator, {
+        clipboard: mockClipboard,
+      });
+
+      (checkPermission as jest.Mock).mockResolvedValue('prompt');
+
+      await expect(readFromClipboard()).rejects.toThrow(
+        ClipboardPermissionsDeniedError
+      );
+      expect(checkPermission).toHaveBeenCalledTimes(2);
+      expect(mockClipboard.readText).toHaveBeenCalledTimes(1);
+    });
+  });
 });