fix: rollup rows dropzone area in table sidebar (#2572)

Previous behaviour would grow the drop-zone when an item is picked up,
but that expanded area would not actually be droppable. Leading to
frustrating ux where it seemed like you dropped an item in the droppable
area, but it would revert. The list needs to grow, so that you can place
the item above or below any existing items.

![drag_before](https://github.com/user-attachments/assets/a4097c60-cc2a-41cc-82c8-c026af3dfc50)

Root cause is DnD doesn't treat that area as droppable unless it is
overlapping the list. This change enables the DnD placeholder item, to
fill out the expanded area. The list now grows after initial contact
rather than before, as that's when the placeholder gets added by DnD.


![drag_after](https://github.com/user-attachments/assets/d7cb7bf9-f890-48c0-88fb-8664e910bb0b)

Additionally, added a hover styling to positively show your drop is
going to be successful. Ultimately though, this goes away entirely with
pivot builder.

---------

Co-authored-by: Copilot <[email protected]>

Author: dsmmcken

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>