File Explorer drag and drop to move files (#109)

- Add drag and drop styling
- Get rid of SingleClickItemList and just used ItemList. This fixes Shift+Click selection
- Fixed up stealing focus when opening preview notebook
- Add isDoubleClickSelect to Itemlist
- Fix the CSV overlay appearing when dragging over it
- Allow dropping at the root and past the last element

Author: mofojed

packages/code-studio/src/dashboard/panels/FileExplorerPanel.tsx

@@ -2,10 +2,9 @@ import Log from '@deephaven/log';
 import { getFileStorage } from '@deephaven/redux';
 import FileExplorer, {
   FileExplorerToolbar,
-  FileListItem,
   FileStorage,
+  FileStorageItem,
   NewItemModal,
-  UpdateableComponent,
 } from '@deephaven/file-explorer';
 import GoldenLayout from 'golden-layout';
 import React, { ReactNode } from 'react';
@@ -65,7 +64,6 @@ export class FileExplorerPanel extends React.Component<
     );
     this.handleDelete = this.handleDelete.bind(this);
     this.handleRename = this.handleRename.bind(this);
-    this.handleResize = this.handleResize.bind(this);
     this.handleSessionOpened = this.handleSessionOpened.bind(this);
     this.handleSessionClosed = this.handleSessionClosed.bind(this);
     this.handleShow = this.handleShow.bind(this);
@@ -85,8 +83,6 @@ export class FileExplorerPanel extends React.Component<
     }
   }
 
-  private fileExplorer = React.createRef<UpdateableComponent>();
-
   handleCreateFile(): void {
     const { glEventHub } = this.props;
     const { session, language } = this.state;
@@ -121,7 +117,7 @@ export class FileExplorerPanel extends React.Component<
     fileStorage.createDirectory(path).catch(FileExplorerPanel.handleError);
   }
 
-  handleDelete(files: FileListItem[]): void {
+  handleDelete(files: FileStorageItem[]): void {
     const { glEventHub } = this.props;
     files.forEach(file => {
       glEventHub.emit(NotebookEvent.CLOSE_FILE, {
@@ -131,7 +127,7 @@ export class FileExplorerPanel extends React.Component<
     });
   }
 
-  handleFileSelect(file: FileListItem): void {
+  handleFileSelect(file: FileStorageItem): void {
     log.debug('fileSelect', file);
     if (file.type === 'directory') {
       return;
@@ -159,10 +155,6 @@ export class FileExplorerPanel extends React.Component<
     glEventHub.emit(NotebookEvent.RENAME_FILE, oldName, newName);
   }
 
-  handleResize(): void {
-    this.fileExplorer.current?.updateDimensions();
-  }
-
   handleSessionOpened(
     session: DhSession,
     { language }: { language: string }
@@ -182,7 +174,6 @@ export class FileExplorerPanel extends React.Component<
 
   handleShow(): void {
     this.setState({ isShown: true });
-    this.fileExplorer.current?.updateDimensions();
   }
 
   isHidden(): boolean {
@@ -202,7 +193,6 @@ export class FileExplorerPanel extends React.Component<
         glEventHub={glEventHub}
         onSessionOpen={this.handleSessionOpened}
         onSessionClose={this.handleSessionClosed}
-        onResize={this.handleResize}
         onShow={this.handleShow}
       >
         <FileExplorerToolbar
@@ -212,7 +202,6 @@ export class FileExplorerPanel extends React.Component<
         {isShown && (
           <FileExplorer
             isMultiSelect
-            ref={this.fileExplorer}
             storage={fileStorage}
             onDelete={this.handleDelete}
             onRename={this.handleRename}

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();
     }
   }
 
@@ -715,13 +716,17 @@ class NotebookPanel extends Component {
       isDashboardActive,
       isLoaded,
       isLoading,
+      isPreview,
       fileMetadata,
       session,
       sessionLanguage,
       settings: initialSettings,
       showCloseModal,
       showSaveAsModal,
     } = this.state;
+    // We don't want to steal focus if this isn't shown or it's just a preview
+    const focusOnMount =
+      isDashboardActive && !glContainer.isHidden && !isPreview;
     const itemName = fileMetadata?.itemName ?? NotebookPanel.DEFAULT_NAME;
     const isExistingItem = fileMetadata?.id != null;
     const overflowActions = this.getOverflowActions();
@@ -859,7 +864,7 @@ class NotebookPanel extends Component {
             session={session}
             sessionLanguage={sessionLanguage}
             settings={settings}
-            focusOnMount={isDashboardActive && !glContainer.isHidden}
+            focusOnMount={focusOnMount}
             ref={notebook => {
               this.notebook = notebook;
             }}

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/DraggableItemList.tsx

@@ -5,7 +5,11 @@ import { Draggable, Droppable, DraggableChildrenFn } from 'react-beautiful-dnd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { vsGripper } from '@deephaven/icons';
 import { RangeUtils, Range } from '@deephaven/utils';
-import ItemList, { RenderItemProps, DefaultListItem } from './ItemList';
+import ItemList, {
+  RenderItemProps,
+  DefaultListItem,
+  ItemListProps,
+} from './ItemList';
 import { Tooltip } from './popper';
 import './DraggableItemList.scss';
 
@@ -18,33 +22,19 @@ type DraggableRenderItemFn<T> = (
   props: DraggableRenderItemProps<T>
 ) => React.ReactNode;
 
-type DraggableItemListProps<T> = {
+type DraggableItemListProps<T> = Omit<
+  ItemListProps<T>,
+  'overscanCount' | 'focusSelector' | 'isDragSelect'
+> & {
   className: string;
   draggingItemClassName: string;
-  // Total item count
-  itemCount: number;
-  rowHeight: number;
-  // Offset of the top item in the items array
-  offset: number;
-  // Item object format expected by the default renderItem function
-  // Can be anything as long as it's supported by the renderItem
-  items: T[];
-  // Whether to allow dropping items in this list
   isDropDisabled: boolean;
   // Whether to allow dragging items from this list
   isDragDisabled: boolean;
-  // Whether to allow multiple selections in this item list
-  isMultiSelect: boolean;
-  // Set to true if you want the list to scroll when new items are added and it's already at the bottom
-  isStickyBottom: boolean;
-  // Fired when an item is clicked. With multiple selection, fired on double click.
-  onSelect(index: number): void;
-  onSelectionChange(ranges: Range[]): void;
-  onViewportChange(): void;
-  selectedRanges: Range[];
-  disableSelect: boolean;
+
   renderItem: DraggableRenderItemFn<T>;
   style: React.CSSProperties;
+
   // The prefix to add to all draggable item IDs
   draggablePrefix: string;
   // The ID to give the droppable list
@@ -74,12 +64,16 @@ class DraggableItemList<T> extends PureComponent<
     offset: 0,
     items: [],
     rowHeight: DraggableItemList.DEFAULT_ROW_HEIGHT,
+    isDoubleClickSelect: true,
     isDropDisabled: false,
     isDragDisabled: false,
     isMultiSelect: false,
     isStickyBottom: false,
     disableSelect: false,
     style: null,
+    onFocusChange(): void {
+      // no-op
+    },
     onSelect(): void {
       // no-op
     },
@@ -165,16 +159,16 @@ class DraggableItemList<T> extends PureComponent<
 
   itemList: React.RefObject<ItemList<T>>;
 
+  selectItem(itemIndex: number): void {
+    this.itemList.current?.selectItem(itemIndex);
+  }
+
   focusItem(itemIndex: number): void {
-    if (this.itemList.current) {
-      this.itemList.current.focusItem(itemIndex);
-    }
+    this.itemList.current?.focusItem(itemIndex);
   }
 
   scrollToItem(itemIndex: number): void {
-    if (this.itemList.current) {
-      this.itemList.current.scrollToItem(itemIndex);
-    }
+    this.itemList.current?.scrollToItem(itemIndex);
   }
 
   getCachedDraggableItem = memoize(
@@ -183,7 +177,7 @@ class DraggableItemList<T> extends PureComponent<
       renderItem: DraggableRenderItemFn<T>,
       item: T,
       itemIndex: number,
-      isKeyboardSelected: boolean,
+      isFocused: boolean,
       isSelected: boolean,
       isDragDisabled: boolean,
       style: React.CSSProperties
@@ -211,7 +205,7 @@ class DraggableItemList<T> extends PureComponent<
             {renderItem({
               item,
               itemIndex,
-              isKeyboardSelected,
+              isFocused,
               isSelected,
               style,
               isClone: false,
@@ -238,7 +232,7 @@ class DraggableItemList<T> extends PureComponent<
     ) => ({
       item,
       itemIndex,
-      isKeyboardSelected,
+      isFocused,
       isSelected,
       style,
     }: RenderItemProps<T>) =>
@@ -247,7 +241,7 @@ class DraggableItemList<T> extends PureComponent<
         renderItem,
         item,
         itemIndex,
-        isKeyboardSelected,
+        isFocused,
         isSelected,
         isDragDisabled,
         style
@@ -287,7 +281,7 @@ class DraggableItemList<T> extends PureComponent<
             {renderItem({
               item,
               itemIndex,
-              isKeyboardSelected: false,
+              isFocused: false,
               isSelected: true,
               style: {},
               isClone: true,
@@ -306,18 +300,20 @@ class DraggableItemList<T> extends PureComponent<
       draggablePrefix,
       draggingItemClassName,
       droppableId,
+      isDoubleClickSelect,
       isDragDisabled,
       isDropDisabled,
       isMultiSelect,
       isStickyBottom,
       itemCount,
       items,
-      onViewportChange,
       offset,
+      onFocusChange,
+      onSelect,
+      onViewportChange,
       renderItem,
       rowHeight,
       selectedRanges,
-      onSelect,
       style,
     } = this.props;
     return (
@@ -349,11 +345,13 @@ class DraggableItemList<T> extends PureComponent<
           >
             <ItemList
               focusSelector=".draggable-item-list-item"
+              isDoubleClickSelect={isDoubleClickSelect}
               isDragSelect={false}
               isMultiSelect={isMultiSelect}
               isStickyBottom={isStickyBottom}
               itemCount={itemCount}
               items={items}
+              onFocusChange={onFocusChange}
               onSelect={onSelect}
               onSelectionChange={this.handleSelectionChange}
               onViewportChange={onViewportChange}