Merge main

Author: Hugo Marcellin

src/components/search/search-bar.tsx

@@ -17,19 +17,24 @@ import {
 import { Autocomplete, TextField } from '@mui/material';
 import { searchElementsInfos } from '../../utils/rest-api';
 import {
+    ElementType,
     useDebounce,
     useSnackMessage,
-    fetchDirectoryContent,
-    ElementAttributes,
-    ElementType,
+  fetchDirectoryContent,
+  ElementAttributes,
 } from '@gridsuite/commons-ui';
 import { Search } from '@mui/icons-material';
 import { useDispatch, useSelector } from 'react-redux';
 import { setSelectedDirectory, setTreeData } from '../../redux/actions';
 import { updatedTree } from '../tree-views-container';
 import { useIntl } from 'react-intl';
 import { SearchItem } from './search-item';
-import { ITreeData, ReduxState } from '../../redux/reducer.type';
+import {
+    IDirectory,
+    IElement,
+    ITreeData,
+    ReduxState,
+} from '../../redux/reducer.type';
 import { UUID } from 'crypto';
 
 export const SEARCH_FETCH_TIMEOUT_MILLIS = 1000; // 1 second
@@ -116,7 +121,7 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
     );
 
     const updateMapData = useCallback(
-        (nodeId: string, children: ElementAttributes[]) => {
+        (nodeId: string, children: IDirectory[]) => {
             if (!treeDataRef.current) {
                 return;
             }
@@ -157,8 +162,13 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
                 const elementUuidPath = matchingElement?.pathUuid.reverse();
                 const promises = elementUuidPath.map((e: string) => {
                     return fetchDirectoryContent(e as UUID)
-                        .then((res) => {
-                            updateMapData(e, res);
+                        .then((res: IElement[]) => {
+                            updateMapData(
+                                e,
+                                res.filter(
+                                    (res) => res.type === ElementType.DIRECTORY
+                                ) as IDirectory[]
+                            );
                         })
                         .catch((error) =>
                             snackError({

src/components/search/search-item.tsx

@@ -53,7 +53,8 @@ export const HighlightedText: FunctionComponent<HighlightedTextProps> = ({
     text,
     highlight,
 }) => {
-    const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
+    const escapedHighlight = highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const parts = text.split(new RegExp(`(${escapedHighlight})`, 'gi'));
     return (
         <span>
             {parts.map((part, i) =>

src/redux/reducer.js

@@ -39,6 +39,7 @@ import {
     USER_VALIDATION_ERROR,
     RESET_AUTHENTICATION_ROUTER_ERROR,
     SHOW_AUTH_INFO_LOGIN,
+    ElementType,
 } from '@gridsuite/commons-ui';
 import { PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 
@@ -73,6 +74,12 @@ const initialState = {
     ...paramsInitialState,
 };
 
+const filterFromObject = (objectToFilter, filterMethod) => {
+    return Object.fromEntries(
+        Object.entries(objectToFilter).filter(filterMethod)
+    );
+};
+
 export const reducer = createReducer(initialState, (builder) => {
     builder.addCase(SELECT_THEME, (state, action) => {
         state.theme = action.theme;
@@ -160,7 +167,29 @@ export const reducer = createReducer(initialState, (builder) => {
     });
 
     builder.addCase(TREE_DATA, (state, action) => {
-        state.treeData = action.treeData;
+        //TODO: remove those filters below when this file has been migrated to Typescript
+        // it's only here to prevent regressions due to javascript not checking types
+
+        // filtering non DIRECTORY elements from action.treeData
+        // used to prevent non DIRECTORY elements from appearing in left menu
+        const filteredTreeDataRootDirectories =
+            action.treeData.rootDirectories.filter(
+                (element) => element.type === ElementType.DIRECTORY
+            );
+
+        // action.treeData.mapData is an object looking like this : {<elementId1>: <element1>, <elementId2>: <element2>}
+        // Object.entries changes it to an array looking like [[elementId1, element1], [elementId2, element2]], in order to make it easier to filter
+        // Object.fromEntries will turn [[elementId1, element1], [elementId2, element2]] back to {<elementId1>: <element1>, <elementId2>: <element2>} which is the initial form
+        const filteredTreeDataMapData = filterFromObject(
+            action.treeData.mapData,
+            ([elementId, element]) => element.type === ElementType.DIRECTORY
+        );
+
+        state.treeData = {
+            ...action.treeData,
+            rootDirectories: filteredTreeDataRootDirectories,
+            mapData: filteredTreeDataMapData,
+        };
     });
 
     builder.addCase(SELECTION_FOR_COPY, (state, action) => {

src/redux/reducer.type.ts

@@ -4,6 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { ElementType } from '@gridsuite/commons-ui';
 import { UUID } from 'crypto';
 import { ElementAttributes } from '@gridsuite/commons-ui';
 
@@ -23,9 +24,27 @@ interface IUser {
     expires_at: number;
 }
 
+export interface IElement {
+    elementUuid: UUID;
+    elementName: string;
+    type: ElementType;
+    owner: string;
+    subdirectoriesCount: number;
+    creationDate: string;
+    lastModificationDate: string;
+    lastModifiedBy: string;
+    children: any[];
+    parentUuid: null | UUID;
+}
+
+// IDirectory is exactly an IElement, with a specific type value
+export type IDirectory = IElement & {
+    type: ElementType.DIRECTORY;
+};
+
 export interface ITreeData {
-    rootDirectories: ElementAttributes[];
-    mapData: Record<string, any>;
+    rootDirectories: IDirectory[];
+    mapData: Record<string, IDirectory>;
 }
 
 export interface ReduxState {