fix: rollup rows dropzone area in table sidebar

packages/components/src/DraggableItemList.tsx

@@ -33,6 +33,8 @@ type DraggableItemListProps<T> = Omit<
   className: string;
   draggingItemClassName: string;
   isDropDisabled: boolean;
+  // Whether to include the droppable provided.placeholder in the DOM
+  hasPlaceholder: boolean;
   // Whether to allow dragging items from this list
   isDragDisabled: boolean;
 
@@ -73,6 +75,7 @@ class DraggableItemList<T> extends PureComponent<
     isDeselectOnClick: true,
     isDoubleClickSelect: true,
     isDropDisabled: false,
+    hasPlaceholder: false,
     isDragDisabled: false,
     isMultiSelect: false,
     isStickyBottom: false,
@@ -316,6 +319,7 @@ class DraggableItemList<T> extends PureComponent<
       isDoubleClickSelect,
       isDragDisabled,
       isDropDisabled,
+      hasPlaceholder,
       isMultiSelect,
       isStickyBottom,
       itemCount,
@@ -380,6 +384,7 @@ class DraggableItemList<T> extends PureComponent<
               rowHeight={rowHeight}
               selectedRanges={selectedRanges}
             />
+            {hasPlaceholder && provided.placeholder}
           </div>
         )}
       </Droppable>

packages/iris-grid/src/sidebar/RollupRows.scss

@@ -67,7 +67,10 @@
 
     .draggable-item-list {
       flex-grow: 1;
-      transition: height $transition;
+      // group-list-height assigned from JS
+      min-height: calc(
+        var(--group-list-height) + var(--placeholder-height, 0px)
+      );
     }
 
     .btn-delete-grouping {
@@ -81,6 +84,7 @@
       padding: $spacer-3;
       text-align: center;
       border: dashed 1px;
+      text-wrap: pretty;
     }
   }
 
@@ -98,19 +102,43 @@
     .rollup-rows-group-by {
       .placeholder {
         border: dashed 1px transparent;
+
         @include ants-base($foreground, $background);
+
+        &.is-dragging-over {
+          background-color: var(--dh-color-item-list-selected-hover-bg);
+        }
       }
 
       .item-list-scroll-pane {
         @include ants-base($foreground, $background);
       }
+
+      .draggable-item-list.is-dragging-over {
+        .item-list-scroll-pane {
+          background-color: var(--dh-color-item-list-selected-hover-bg);
+        }
+
+        &:not(.is-dragging-from-this) {
+          // placeholder doesn't add height with current AutoSizer
+          // so add the height of the placeholder manually
+          // rowHeight variable assigned from JS
+          --placeholder-height: var(--row-height);
+        }
+      }
     }
 
     .rollup-rows-available-columns
       .draggable-item-list:not(.is-dragging-from-this) {
       .item-list-scroll-pane {
         @include ants-base($foreground, $background);
       }
+
+      &.is-dragging-over {
+        .item-list-scroll-pane {
+          background-color: var(--dh-color-item-list-selected-hover-bg);
+        }
+      }
     }
   }
 }

packages/iris-grid/src/sidebar/RollupRows.tsx

@@ -486,10 +486,8 @@ class RollupRows extends Component<RollupRowsProps, RollupRowsState> {
     } = this.state;
 
     const ungroupedColumns = this.getSortedUngroupedColumns();
-    let groupListHeight = columns.length * DraggableItemList.DEFAULT_ROW_HEIGHT;
-    if (dragSource?.droppableId === UNGROUPED_LIST_ID) {
-      groupListHeight += DraggableItemList.DEFAULT_ROW_HEIGHT;
-    }
+    const groupListHeight =
+      columns.length * DraggableItemList.DEFAULT_ROW_HEIGHT;
     const ungroupMaxListHeight =
       ungroupedColumns.length * DraggableItemList.DEFAULT_ROW_HEIGHT + 10;
     const ungroupMinListHeight = Math.min(
@@ -542,8 +540,14 @@ class RollupRows extends Component<RollupRowsProps, RollupRowsState> {
                 ref={this.groupedList}
                 renderItem={this.renderGroupedItem}
                 selectedRanges={groupedSelectedRanges}
-                style={{ height: groupListHeight }}
+                style={
+                  {
+                    '--group-list-height': `${groupListHeight}px`,
+                    '--row-height': `${DraggableItemList.DEFAULT_ROW_HEIGHT}px`,
+                  } as React.CSSProperties
+                }
                 isMultiSelect
+                hasPlaceholder
               />
             )}
           </div>