[DataObject][AdvancedManyToManyObjectRelation] Reordering Advanced Objects Freezes UI (#3375)

* added the row virtualizer into the ManyToManyRelationGrid

* fixed styles

* Automatic frontend build

---------

Co-authored-by: ValeriaMaltseva <11871778+ValeriaMaltseva@users.noreply.github.com>

Author: ValeriaMaltseva

assets/js/src/core/components/grid/grid-cell/grid-row.tsx

@@ -32,6 +32,7 @@ export interface GridRowProps {
   onFocusCell?: (cell: GridCellReference) => void
   contextMenu?: ListGridContextMenuComponents
   onRowDoubleClick?: GridProps['onRowDoubleClick']
+  enableRowVirtualizer: boolean
   enableColumnVirtualizer: boolean
   size?: GridProps['size']
   rowStyle?: CSSProperties
@@ -42,7 +43,7 @@ export interface GridRowProps {
   virtualPaddingRight?: number
 }
 
-const GridRow = ({ row, isSelected, modifiedCells, rowStyle, virtualColumns, virtualPaddingLeft, virtualPaddingRight, enableColumnVirtualizer, ...props }: GridRowProps): React.JSX.Element => {
+const GridRow = ({ row, isSelected, modifiedCells, rowStyle, virtualColumns, virtualPaddingLeft, virtualPaddingRight, enableColumnVirtualizer, enableRowVirtualizer, ...props }: GridRowProps): React.JSX.Element => {
   const { setNodeRef, transform, transition, isDragging, attributes, listeners } = useSortable({
     id: row.id
   })
@@ -134,20 +135,26 @@ const GridRow = ({ row, isSelected, modifiedCells, rowStyle, virtualColumns, vir
       }
     >
       {visibleCells?.map((cell) => {
+        const isAutoWidth = cell.column.columnDef.meta?.autoWidth === true
+        const columnSize = cell.column.getSize()
+
+        const tdStyle: CSSProperties = isAutoWidth
+          ? {
+              width: 'auto',
+              minWidth: columnSize,
+              ...(enableRowVirtualizer ? { flexShrink: 1, flexGrow: 1 } : {})
+            }
+          : {
+              width: columnSize,
+              maxWidth: columnSize,
+              ...(enableRowVirtualizer ? { flexShrink: 0 } : {})
+            }
+
         return (
           <td
             className='ant-table-cell'
             key={ cell.id }
-            style={ cell.column.columnDef.meta?.autoWidth === true
-              ? {
-                  width: 'auto',
-                  minWidth: cell.column.getSize()
-                }
-              : {
-                  width: cell.column.getSize(),
-                  maxWidth: cell.column.getSize()
-                }
-                      }
+            style={ tdStyle }
           >
             {cell.column.id === 'drag-handle'
               ? renderRowReorderButton()

assets/js/src/core/components/grid/grid.tsx

@@ -390,6 +390,7 @@ export const Grid = ({
         columns={ columns }
         contextMenu={ props.contextMenu }
         enableColumnVirtualizer={ isEnableColumnVirtualizer }
+        enableRowVirtualizer={ isEnableRowVirtualizer }
         isSelected={ row.getIsSelected() }
         key={ row.id }
         measureElement={ measureElement }
@@ -461,11 +462,13 @@ export const Grid = ({
                                 header.column.columnDef.meta?.autoWidth === true && !header.column.getIsResizing()
                                   ? {
                                       width: 'auto',
-                                      minWidth: header.column.getSize()
+                                      minWidth: header.column.getSize(),
+                                      ...(isEnableRowVirtualizer ? { flexShrink: 1, flexGrow: 1 } : {})
                                     }
                                   : {
                                       width: header.column.getSize(),
-                                      maxWidth: header.column.getSize()
+                                      maxWidth: header.column.getSize(),
+                                      ...(isEnableRowVirtualizer ? { flexShrink: 0 } : {})
                                     }
                               }
                             >

assets/js/src/core/components/many-to-many-relation/grid.styles.tsx

@@ -0,0 +1,32 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { createStyles } from 'antd-style'
+
+export interface UseStylesProps {
+  height: string | null
+}
+
+export const useStyles = createStyles(({ css }, { height }: UseStylesProps) => {
+  const maxHeight = height ?? '500px'
+
+  return {
+    grid: css`
+      position: relative;
+      width: 100%;
+      max-height: ${maxHeight};
+      overflow: auto;
+      
+      .ant-table-content table {
+        width: calc(100% - 2px) !important;
+      }
+    `
+  }
+})

assets/js/src/core/components/many-to-many-relation/grid.tsx

@@ -22,6 +22,7 @@ import { toCssDimension } from '@Pimcore/utils/css'
 import { Content } from '@Pimcore/components/content/content'
 import { type OnUpdateCellDataEvent } from '@Pimcore/types/components/types'
 import { useColumns } from './hooks/use-columns'
+import { useStyles } from './grid.styles'
 
 export interface ManyToManyRelationGridProps {
   value?: ManyToManyRelationValue | null
@@ -45,6 +46,7 @@ export const ManyToManyRelationGrid = forwardRef(function ManyToManyRelationGrid
   const { getStateClasses } = useDroppable()
   const { mapToLegacyElementType } = useElementHelper()
   const { columns } = useColumns(props)
+  const { styles } = useStyles({ height: toCssDimension(props.height) ?? null })
   const [data, setData] = useState(getDataArray())
 
   useEffect(() => {
@@ -87,19 +89,20 @@ export const ManyToManyRelationGrid = forwardRef(function ManyToManyRelationGrid
 
   const content = useMemo(() => (
     <Content
+      overflow={ { x: 'hidden', y: 'hidden' } }
       style={ {
-        width: toCssDimension(props.width),
-        height: toCssDimension(props.height)
+        width: toCssDimension(props.width)
       } }
     >
       <div style={ { maxWidth: 'calc(100% - 2px)' } }>
         <Grid
           autoWidth
-          className={ props.className }
+          className={ cn(styles.grid, props.className) }
           columns={ columns }
           data={ data }
           disabled={ props.disabled === true || props.inherited === true }
           enableRowDrag={ props.enableRowDrag }
+          enableRowVirtualizer
           handleDragEnd={ handleDragEnd }
           onUpdateCellData={ props.onUpdateCellData }
           resizable