File Explorer drag and drop to move files

packages/code-studio/src/dashboard/panels/NotebookPanel.jsx

@@ -580,6 +580,7 @@ class NotebookPanel extends Component {
     const { fileMetadata } = this.state;
     if (fileMetadata.id === oldName) {
       this.setState({ fileMetadata: { id: newName, itemName: newName } });
+      this.debouncedSavePanelState();
     }
   }
 

packages/code-studio/src/styleguide/Grids.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Grid, MockGridModel, MockTreeGridModel } from '@deephaven/grid';
-import { IrisGrid } from '@deephaven/iris-grid/dist/IrisGrid';
+import IrisGrid from '@deephaven/iris-grid/dist/IrisGrid';
 import MockIrisGridTreeModel from './MockIrisGridTreeModel';
 
 class Grids extends PureComponent {

packages/code-studio/src/styleguide/MockIrisGridTreeModel.js

@@ -41,6 +41,18 @@ class MockIrisGridTreeModel extends IrisGridModel {
     return true;
   }
 
+  get pendingRowCount() {
+    return 0;
+  }
+
+  set pendingRowCount(count) {}
+
+  get pendingDataMap() {
+    return new Map();
+  }
+
+  set pendingDataMap(value) {}
+
   textForCell(column, row) {
     return (
       this.editedData[column]?.[row] ?? this.model.textForCell(column, row)

packages/code-studio/src/styleguide/StyleGuideInit.jsx

@@ -6,7 +6,7 @@ import {
   setWorkspace as setWorkspaceAction,
 } from '@deephaven/redux';
 import StyleGuide from './StyleGuide';
-import WorkspaceStorage from '../dashboard/WorkspaceStorage';
+import LocalWorkspaceStorage from '../dashboard/LocalWorkspaceStorage';
 
 /**
  * Initialize data needed for the styleguide
@@ -15,7 +15,7 @@ const StyleGuideInit = props => {
   const { workspace, setWorkspace } = props;
 
   useEffect(() => {
-    setWorkspace(WorkspaceStorage.makeDefaultWorkspace());
+    setWorkspace(LocalWorkspaceStorage.makeDefaultWorkspace());
   }, [setWorkspace]);
 
   return <>{workspace && <StyleGuide />}</>;

packages/components/src/SingleClickItemList.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { mount, ReactWrapper } from 'enzyme';
+import SingleClickItemList from './SingleClickItemList';
+
+function makeItems(count = 20) {
+  const items = [];
+
+  for (let i = 0; i < count; i += 1) {
+    items.push({ itemName: `${i}` });
+  }
+
+  return items;
+}
+
+function makeItemList({
+  itemCount = 100,
+  rowHeight = 20,
+  offset = 0,
+  items = makeItems(),
+  onSelect = jest.fn(),
+  onSelectionChange = jest.fn(),
+  onViewportChange = jest.fn(),
+  isMultiSelect = true,
+} = {}) {
+  return mount(
+    <SingleClickItemList
+      itemCount={itemCount}
+      rowHeight={rowHeight}
+      offset={offset}
+      items={items}
+      isMultiSelect={isMultiSelect}
+      onSelect={onSelect}
+      onSelectionChange={onSelectionChange}
+      onViewportChange={onViewportChange}
+    />
+  );
+}
+
+function clickItem(itemList: ReactWrapper, index: number, options = {}) {
+  itemList.find('.item-list-item').at(index).simulate('click', options);
+}
+
+it('mounts and unmounts properly', () => {
+  const itemList = makeItemList();
+  itemList.unmount();
+});
+
+describe('mouse', () => {
+  it('Sends the proper signal when an item is clicked', () => {
+    const onSelect = jest.fn();
+    const itemList = makeItemList({ onSelect });
+
+    clickItem(itemList, 3);
+
+    expect(onSelect).toHaveBeenCalledWith(3);
+
+    itemList.unmount();
+  });
+
+  it('handles shift+click properly', () => {
+    const onSelectionChange = jest.fn();
+    const itemList = makeItemList({ onSelectionChange });
+
+    clickItem(itemList, 3);
+
+    expect(onSelectionChange).toHaveBeenCalledWith([[3, 3]], 3);
+    onSelectionChange.mockClear();
+
+    clickItem(itemList, 6, { shiftKey: true });
+
+    expect(onSelectionChange).toHaveBeenCalledWith([[3, 6]], 3);
+  });
+});
+
+it('handles keyboard up and down properly', () => {
+  const itemList = makeItemList();
+
+  expect(itemList.state('keyboardIndex')).toBe(null);
+
+  itemList.simulate('keydown', { key: 'ArrowDown' });
+
+  expect(itemList.state('keyboardIndex')).toBe(0);
+
+  itemList.simulate('keydown', { key: 'ArrowDown' });
+  itemList.simulate('keydown', { key: 'ArrowDown' });
+  itemList.simulate('keydown', { key: 'ArrowDown' });
+
+  expect(itemList.state('keyboardIndex')).toBe(3);
+
+  itemList.simulate('keydown', { key: 'ArrowUp' });
+  itemList.simulate('keydown', { key: 'ArrowUp' });
+
+  expect(itemList.state('keyboardIndex')).toBe(1);
+
+  itemList.unmount();
+});

packages/components/src/SingleClickItemList.tsx

@@ -122,14 +122,11 @@ export class SingleClickItemList<
   constructor(props: SingleClickItemListProps<T>) {
     super(props);
 
-    this.handleItemBlur = this.handleItemBlur.bind(this);
-    this.handleItemFocus = this.handleItemFocus.bind(this);
     this.handleItemClick = this.handleItemClick.bind(this);
     this.handleItemDragStart = this.handleItemDragStart.bind(this);
     this.handleItemDragOver = this.handleItemDragOver.bind(this);
     this.handleItemDragEnd = this.handleItemDragEnd.bind(this);
     this.handleItemDrop = this.handleItemDrop.bind(this);
-    this.handleItemMouseDown = this.handleItemMouseDown.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
 
@@ -247,9 +244,6 @@ export class SingleClickItemList<
           onDragOver={this.handleItemDragOver}
           onDragEnd={this.handleItemDragEnd}
           onDrop={this.handleItemDrop}
-          onMouseDown={this.handleItemMouseDown}
-          onFocus={this.handleItemFocus}
-          onBlur={this.handleItemBlur}
           onKeyboardSelect={onKeyboardSelect}
           disableSelect={disableSelect}
           isDraggable={isDraggable}
@@ -348,7 +342,7 @@ export class SingleClickItemList<
       ContextActionUtils.isModifierKeyDown(e)
     );
 
-    if (isMultiSelect && e.shiftKey) {
+    if (isMultiSelect && e.shiftKey && oldFocus != null) {
       const range: Range = [
         Math.min(oldFocus ?? index, index),
         Math.max(oldFocus ?? index, index),
@@ -410,7 +404,7 @@ export class SingleClickItemList<
         draggedRanges,
         index
       );
-      log.debug('handleItemDragOver', index);
+      log.debug('handleItemDragOver', index, isDropTargetValid);
       return {
         dragOverIndex: index,
         isDropTargetValid,
@@ -438,52 +432,6 @@ export class SingleClickItemList<
     onDrop(draggedRanges, index);
   }
 
-  handleItemMouseDown(
-    index: number,
-    e: React.MouseEvent<HTMLDivElement>
-  ): void {
-    const { selectedRanges } = this.state;
-    log.debug('handleItemMouseDown', index, e.button);
-    if (e.button === 2) {
-      this.setKeyboardIndex(index);
-      this.setShiftRange(null);
-      if (!this.getItemSelected(index, selectedRanges)) {
-        this.deselectAll();
-        this.selectItem(index);
-      }
-    }
-  }
-
-  handleItemBlur(
-    itemIndex: number,
-    { currentTarget, relatedTarget }: React.FocusEvent<HTMLDivElement>
-  ): void {
-    log.debug2('item blur', itemIndex, currentTarget, relatedTarget);
-    if (
-      !relatedTarget ||
-      (relatedTarget instanceof Element &&
-        !this.list.current?.contains(relatedTarget) &&
-        !relatedTarget.classList?.contains('context-menu-container'))
-    ) {
-      // Next focused element is outside of the SingleClickItemList
-      this.setKeyboardIndex(null);
-    }
-  }
-
-  handleItemFocus(
-    itemIndex: number,
-    e: React.FocusEvent<HTMLDivElement>
-  ): void {
-    log.debug2('item focus', itemIndex, e.target);
-    this.setState(state => {
-      const { keyboardIndex } = state;
-      if (keyboardIndex !== itemIndex) {
-        return { keyboardIndex: itemIndex };
-      }
-      return null;
-    });
-  }
-
   handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>): void {
     const { itemCount, isMultiSelect, onSelect } = this.props;
     const { keyboardIndex: oldFocus } = this.state;
@@ -679,6 +627,7 @@ export class SingleClickItemList<
       draggedRanges,
       dragOverIndex,
     } = this.state;
+
     const itemElements = this.getCachedItems(
       items,
       rowHeight,