Fix renamed element selection (#558)

* fix(DirectoryContent): renaming an element added the activeElement into the selected rows state.

Signed-off-by: sBouzols <[email protected]>

Author: sBouzols

src/components/directory-content.tsx

@@ -383,24 +383,12 @@ export default function DirectoryContent() {
         [childrenMetadata, dispatch, getStudyUrl, handleError, intl, selectedDirectory?.elementUuid]
     );
 
-    useEffect(() => {
-        if (!selectedDirectory?.elementUuid) {
-            return;
-        }
-        setIsMissingDataAfterDirChange(true);
-        setCheckedRows([]);
-    }, [selectedDirectory?.elementUuid]);
-
-    useEffect(() => {
-        setIsMissingDataAfterDirChange(false);
-    }, [childrenMetadata]); // this will change after switching selectedDirectory
-
     const isActiveElementUnchecked = useMemo(
         () => activeElement && !checkedRows.find((children) => children.elementUuid === activeElement.elementUuid),
         [activeElement, checkedRows]
     );
 
-    const handleRowSelected = useCallback(() => {
+    const updateCheckedRows = useCallback(() => {
         setCheckedRows(computeCheckedElements(gridRef, childrenMetadata));
     }, [childrenMetadata]);
 
@@ -480,7 +468,7 @@ export default function DirectoryContent() {
                 gridRef={gridRef}
                 rows={rows}
                 handleCellContextualMenu={onCellContextMenu}
-                handleRowSelected={handleRowSelected}
+                handleRowSelected={updateCheckedRows}
                 handleCellClick={handleCellClick}
                 colDef={getColumnsDefinition(childrenMetadata, intl)}
                 getRowStyle={getRowStyle}
@@ -606,6 +594,21 @@ export default function DirectoryContent() {
         }
     };
 
+    useEffect(() => {
+        if (!selectedDirectory?.elementUuid) {
+            return;
+        }
+        setIsMissingDataAfterDirChange(true);
+        setCheckedRows([]);
+    }, [selectedDirectory?.elementUuid]);
+
+    useEffect(() => {
+        setIsMissingDataAfterDirChange(false);
+        // update checkecRows ElementAttributes objects if metadata changed
+        // ex: when the user renames a selected element
+        updateCheckedRows();
+    }, [childrenMetadata, updateCheckedRows]); // this will change after switching selectedDirectory
+
     return (
         <>
             {
@@ -640,7 +643,6 @@ export default function DirectoryContent() {
                     <ContentContextualMenu
                         activeElement={activeElement}
                         selectedElements={fullSelection}
-                        onUpdateSelectedElements={setCheckedRows}
                         open={openContentMenu}
                         openDialog={openDialog}
                         setOpenDialog={setOpenDialog}

src/components/menus/content-contextual-menu.tsx

@@ -61,7 +61,6 @@ import { AppState } from '../../redux/types';
 export interface ContentContextualMenuProps {
     activeElement: ElementAttributes;
     selectedElements: ElementAttributes[];
-    onUpdateSelectedElements: (elements: ElementAttributes[]) => void;
     open: boolean;
     onClose: () => void;
     openDialog: string;
@@ -72,17 +71,8 @@ export interface ContentContextualMenuProps {
 }
 
 export default function ContentContextualMenu(props: Readonly<ContentContextualMenuProps>) {
-    const {
-        activeElement,
-        selectedElements,
-        onUpdateSelectedElements,
-        open,
-        onClose,
-        openDialog,
-        setOpenDialog,
-        broadcastChannel,
-        ...others
-    } = props;
+    const { activeElement, selectedElements, open, onClose, openDialog, setOpenDialog, broadcastChannel, ...others } =
+        props;
     const userId = useSelector((state: AppState) => state.user?.profile.sub);
     const intl = useIntl();
     const dispatch = useDispatch();
@@ -355,14 +345,6 @@ export default function ContentContextualMenu(props: Readonly<ContentContextualM
                     nameItem: renamedElement[1],
                 });
             }
-            // update selected elements if element is renamed
-            const updatedSelectedElements = selectedElements.map((element) => {
-                if (element.elementUuid === renamedElement[0]) {
-                    return { ...element, elementName: renamedElement[1] };
-                }
-                return element;
-            });
-            onUpdateSelectedElements(updatedSelectedElements);
 
             handleCloseDialog();
         },
@@ -760,6 +742,5 @@ export default function ContentContextualMenu(props: Readonly<ContentContextualM
 }
 
 ContentContextualMenu.propTypes = {
-    onUpdateSelectedElements: PropTypes.func,
     onClose: PropTypes.func,
 };