No table reloading when searching element within same directory (#462)

Signed-off-by: LE SAULNIER Kevin <[email protected]>

Author: klesaulnier

src/components/directory-content.jsx

@@ -95,7 +95,11 @@ const DirectoryContent = () => {
     const selectionForCopy = useSelector((state) => state.selectionForCopy);
     const activeDirectory = useSelector((state) => state.activeDirectory);
 
-    const [onGridReady, getRowStyle] = useHighlightSearchedElement();
+    const gridRef = useRef();
+
+    const [onGridReady, getRowStyle] = useHighlightSearchedElement(
+        gridRef?.current?.api
+    );
 
     const [languageLocal] = useParameterState(PARAM_LANGUAGE);
 
@@ -152,7 +156,6 @@ const DirectoryContent = () => {
         useState(true);
 
     const intl = useIntl();
-    const gridRef = useRef();
     const [rows, childrenMetadata] = useDirectoryContent(
         setIsMissingDataAfterDirChange
     );

src/components/search/search-bar.tsx

@@ -46,6 +46,9 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
     const { snackError } = useSnackMessage();
     const treeData = useSelector((state: ReduxState) => state.treeData);
     const treeDataRef = useRef<ITreeData>();
+    const selectedDirectory = useSelector(
+        (state: ReduxState) => state.selectedDirectory
+    );
     treeDataRef.current = treeData;
 
     const { elementsFound, isLoading, searchTerm, updateSearchTerm } =
@@ -128,11 +131,15 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
                     });
                 }
                 const lastElement = elementUuidPath.pop();
-                handleDispatchDirectory(lastElement);
+
                 dispatch(setSearchedElement(data));
+                if (lastElement !== selectedDirectory?.elementUuid) {
+                    handleDispatchDirectory(lastElement);
+                }
             }
         },
         [
+            selectedDirectory?.elementUuid,
             elementsFound,
             handleDispatchDirectory,
             updateMapData,

src/components/search/use-highlight-searched-element.tsx

@@ -6,23 +6,28 @@
  */
 
 import { ElementAttributes } from '@gridsuite/commons-ui';
-import { GridReadyEvent, RowClassParams, RowStyle } from 'ag-grid-community';
-import { useCallback, useRef } from 'react';
+import {
+    GridApi,
+    GridReadyEvent,
+    RowClassParams,
+    RowStyle,
+} from 'ag-grid-community';
+import { useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setSearchedElement } from '../../redux/actions';
 import { ReduxState } from '../../redux/reducer.type';
 
 const SEARCH_HIGHLIGHT_DURATION_S = 4;
 
-export const useHighlightSearchedElement = () => {
+export const useHighlightSearchedElement = (gridApi: GridApi | null) => {
     const searchedElement = useSelector(
         (state: ReduxState) => state.searchedElement
     );
     const dispatch = useDispatch();
     const timeout = useRef<ReturnType<typeof setTimeout>>();
 
-    const onGridReady = useCallback(
-        ({ api }: GridReadyEvent<ElementAttributes>) => {
+    const highlightElement = useCallback(
+        (api: GridApi<ElementAttributes>) => {
             // if there is a searched element, we scroll to it, style it for SEARCH_HIGHTLIGHT_DURATION, then remove it from searchedElement to go back to previous style
             if (!searchedElement) {
                 return;
@@ -42,6 +47,19 @@ export const useHighlightSearchedElement = () => {
         [searchedElement, dispatch]
     );
 
+    const onGridReady = useCallback(
+        ({ api }: GridReadyEvent<ElementAttributes>) => {
+            highlightElement(api);
+        },
+        [highlightElement]
+    );
+
+    useEffect(() => {
+        if (gridApi) {
+            highlightElement(gridApi);
+        }
+    }, [highlightElement, gridApi]);
+
     const getRowStyle = useCallback(
         (cellData: RowClassParams<ElementAttributes, any>) => {
             const style: RowStyle = { fontSize: '1rem' };