Non directory elements are not appearing anymore in left bar (#437)

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

Author: klesaulnier

src/components/search/search-bar.tsx

@@ -19,14 +19,23 @@ import {
     fetchDirectoryContent,
     searchElementsInfos,
 } from '../../utils/rest-api';
-import { useDebounce, useSnackMessage } from '@gridsuite/commons-ui';
+import {
+    ElementType,
+    useDebounce,
+    useSnackMessage,
+} 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 { IDirectory, ITreeData, ReduxState } from '../../redux/reducer.type';
+import {
+    IDirectory,
+    IElement,
+    ITreeData,
+    ReduxState,
+} from '../../redux/reducer.type';
 
 export const SEARCH_FETCH_TIMEOUT_MILLIS = 1000; // 1 second
 
@@ -112,7 +121,7 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
     );
 
     const updateMapData = useCallback(
-        (nodeId: string, children: IDirectory) => {
+        (nodeId: string, children: IDirectory[]) => {
             if (!treeDataRef.current) {
                 return;
             }
@@ -153,8 +162,13 @@ export const SearchBar: FunctionComponent<SearchBarProps> = ({ inputRef }) => {
                 const elementUuidPath = matchingElement?.pathUuid.reverse();
                 const promises = elementUuidPath.map((e: string) => {
                     return fetchDirectoryContent(e)
-                        .then((res) => {
-                            updateMapData(e, res);
+                        .then((res: IElement[]) => {
+                            updateMapData(
+                                e,
+                                res.filter(
+                                    (res) => res.type === ElementType.DIRECTORY
+                                ) as IDirectory[]
+                            );
                         })
                         .catch((error) =>
                             snackError({

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';
 
 type UserProfile = {
@@ -22,10 +23,10 @@ interface IUser {
     expires_at: number;
 }
 
-export interface IDirectory {
+export interface IElement {
     elementUuid: UUID;
     elementName: string;
-    type: 'DIRECTORY';
+    type: ElementType;
     owner: string;
     subdirectoriesCount: number;
     creationDate: string;
@@ -35,9 +36,14 @@ export interface IDirectory {
     parentUuid: null | UUID;
 }
 
+// IDirectory is exactly an IElement, with a specific type value
+export type IDirectory = IElement & {
+    type: ElementType.DIRECTORY;
+};
+
 export interface ITreeData {
     rootDirectories: IDirectory[];
-    mapData: Record<string, any>;
+    mapData: Record<string, IDirectory>;
 }
 
 export interface ReduxState {