fix: restore individual column reorder and reflect in preview, revert null pass

Author: yordan-st

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx

@@ -174,7 +174,7 @@ function ColumnHeader({ column }: { column: ColumnsPreviewType }): ReactNode {
             >
                 <div className="column-container">
                     <div className="column-header">
-                        {columnsDraggable && (
+                        {columnsDraggable && columnPreview.canDrag && (
                             <DragHandle draggable={false} onDragStart={() => {}} onDragEnd={() => {}} />
                         )}
                         <span>{caption.length > 0 ? caption : "\u00a0"}</span>

packages/pluggableWidgets/datagrid-web/src/components/ColumnContainer.tsx

@@ -31,9 +31,9 @@ export const ColumnContainer = observer(function ColumnContainer(props: ColumnCo
             title={caption}
             ref={ref => column.setHeaderElementRef(ref)}
             data-column-id={columnId}
-            onDrop={vm.handleOnDrop}
-            onDragEnter={vm.handleDragEnter}
-            onDragOver={vm.handleDragOver}
+            onDrop={vm.isDraggable ? vm.handleOnDrop : undefined}
+            onDragEnter={vm.isDraggable ? vm.handleDragEnter : undefined}
+            onDragOver={vm.isDraggable ? vm.handleDragOver : undefined}
         >
             <div className={classNames("column-container")} id={`${gridId}-column${columnId}`}>
                 <ColumnHeader />

packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts

@@ -102,8 +102,8 @@ export class DatagridContainer extends Container {
         this.bind(CORE.columnsStore).toInstance(ColumnGroupStore).inSingletonScope();
         // Drag and Drop store
         this.bind(DG.headerDragDrop).toInstance(HeaderDragnDropStore).inSingletonScope();
-        // Drag and Drop view model
-        this.bind(DG.headerDragnDropVM).toInstance(HeaderDragnDropViewModel).inSingletonScope();
+        // Drag and Drop view model (per column, not singleton)
+        this.bind(DG.headerDragnDropVM).toInstance(HeaderDragnDropViewModel).inTransientScope();
         // Query service
         this.bind(DG.query).toInstance(DatasourceService).inSingletonScope();
         // Pagination service

packages/pluggableWidgets/gallery-web/src/helpers/useItemSelectHelper.ts

@@ -6,5 +6,5 @@ export function useItemSelectHelper(
     selectionHelper: SelectionHelper | undefined
 ): SelectActionHandler {
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    return useMemo(() => new SelectActionHandler(selection, selectionHelper ?? null), [selectionHelper]);
+    return useMemo(() => new SelectActionHandler(selection, selectionHelper), [selectionHelper]);
 }

packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx

@@ -81,7 +81,7 @@ export function createMockGalleryContext(): GalleryRootScope {
         refreshInterval: 0
     });
 
-    const mockSelectHelper = new SelectActionHandler("None", null);
+    const mockSelectHelper = new SelectActionHandler("None", undefined);
 
     return {
         rootStore: mockStore,
@@ -110,7 +110,7 @@ type Mocks = {
 export function mockProps(params: Helpers & Mocks = {}): GalleryProps<ObjectItem> {
     const {
         onClick = undefined,
-        selectHelper = new SelectActionHandler("None", null),
+        selectHelper = new SelectActionHandler("None", undefined),
         actionHelper = new ClickActionHelper("single", onClick),
         focusController = new FocusTargetController(new PositionController(), new VirtualGridLayout(3, 4, 10)),
         itemEventsController = new ItemEventsController(

packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts

@@ -6,7 +6,7 @@ import { SelectAdjacentFx, SelectAllFx, SelectFx, SelectionType, WidgetSelection
 export class SelectActionHandler {
     constructor(
         private selection: WidgetSelectionProperty,
-        protected selectionHelper: SelectionHelperService
+        protected selectionHelper: SelectionHelperService | undefined
     ) {}
 
     get selectionType(): SelectionType {