Update DragAndDropListItemContext to assign the correct id to the parent

frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import classes from './SchemaEditor.module.css';
 import { TypesInspector } from '../TypesInspector';
 import { SchemaInspector } from '../SchemaInspector';
@@ -11,35 +11,22 @@ import { useAddReference } from './hooks/useAddReference';
 import { NodePanel } from '../NodePanel';
 
 export const SchemaEditor = () => {
-  const { schemaModel, selectedTypePointer, selectedNodePointer } = useSchemaEditorAppContext();
+  const { schemaModel, selectedTypePointer } = useSchemaEditorAppContext();
   const moveProperty = useMoveProperty();
   const addReference = useAddReference();
 
-  const [expandedPropNodes, setExpandedPropNodes] = useState<string[]>([]);
-  const [expandedDefNodes, setExpandedDefNodes] = useState<string[]>([]);
-
-  const selectedPropertyParent = schemaModel.getParentNode(selectedNodePointer);
-
-  useEffect(() => {
-    if (selectedPropertyParent && !expandedPropNodes.includes(selectedPropertyParent.pointer)) {
-      setExpandedPropNodes((prevState) => [...prevState, selectedPropertyParent.pointer]);
-    }
-  }, [selectedPropertyParent, expandedPropNodes]);
-
-  const selectedDefinitionParent = schemaModel.getParentNode(selectedTypePointer);
-  useEffect(() => {
-    if (selectedDefinitionParent && !expandedDefNodes.includes(selectedDefinitionParent.pointer)) {
-      setExpandedDefNodes((prevState) => [...prevState, selectedDefinitionParent.pointer]);
-    }
-  }, [selectedPropertyParent, expandedDefNodes, selectedDefinitionParent]);
-
   if (schemaModel.isEmpty()) return null;
   const definitions: UiSchemaNodes = schemaModel.getDefinitions();
   const selectedType = selectedTypePointer && schemaModel.getNode(selectedTypePointer);
 
   return (
     <>
-      <DragAndDropTree.Provider onAdd={addReference} onMove={moveProperty} rootId={ROOT_POINTER}>
+      <DragAndDropTree.Provider
+        onAdd={addReference}
+        onMove={moveProperty}
+        rootId={ROOT_POINTER}
+        itemId={selectedTypePointer ?? null}
+      >
         <aside className={classes.inspector}>
           <TypesInspector schemaItems={definitions} />
         </aside>

frontend/packages/shared/src/components/dragAndDrop/DragAndDropProvider/DragAndDropProvider.tsx

@@ -4,13 +4,15 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DragAndDropRootContext } from './DragAndDropRootContext';
 import type { HandleAdd, HandleDrop, HandleMove } from 'app-shared/types/dndTypes';
+import { DragAndDropListItemContext } from '../DragAndDropListItem';
 
 export interface DragAndDropProviderProps<T> {
   children: ReactNode;
   gap?: string;
   onAdd: HandleAdd<T>;
   onMove: HandleMove;
   rootId: string;
+  itemId?: string;
 }
 
 export function DragAndDropProvider<T>({
@@ -19,14 +21,17 @@ export function DragAndDropProvider<T>({
   onAdd,
   onMove,
   rootId,
+  itemId,
 }: DragAndDropProviderProps<T>) {
   const onDrop: HandleDrop<T> = (item, position) =>
     item.isNew === true ? onAdd(item.payload, position) : onMove(item.id, position);
   const uniqueDomId = useId(); // Can not be the same as root id because root id might not be unique (if there are multiple drag and drop lists)
   return (
     <DndProvider backend={HTML5Backend}>
       <DragAndDropRootContext.Provider value={{ gap, rootId, onDrop, uniqueDomId }}>
-        {children}
+        <DragAndDropListItemContext.Provider value={{ isDisabled: false, itemId }}>
+          {children}
+        </DragAndDropListItemContext.Provider>
       </DragAndDropRootContext.Provider>
     </DndProvider>
   );