IBX-7030: [UDW] Inactive edit button in grid view (#1175)

src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.helpers.js

@@ -0,0 +1,9 @@
+export const getLoadedLocationsLimitedMap = (loadedLocationsFullMap, activeLocationId) => {
+    const itemIndex = loadedLocationsFullMap.findIndex(({ parentLocationId }) => parentLocationId === activeLocationId);
+
+    if (itemIndex === -1) {
+        return [];
+    }
+
+    return loadedLocationsFullMap.slice(0, itemIndex + 1);
+};

src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js

@@ -2,13 +2,17 @@ import React, { useContext, useState, useMemo, useEffect, useCallback } from 're
 
 import Icon from '../../../common/icon/icon';
 
-import { createCssClassNames } from '../../../common/helpers/css.class.names';
-import { LoadedLocationsMapContext } from '../../universal.discovery.module';
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+import { createCssClassNames } from '../../../common/helpers/css.class.names';
+import { getLoadedLocationsLimitedMap } from './breadcrumbs.helpers';
+import { LoadedLocationsMapContext, MarkedLocationIdContext, GridActiveLocationIdContext } from '../../universal.discovery.module';
 
 const Breadcrumbs = () => {
     const Translator = getTranslator();
-    const [loadedLocationsMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
+    const [, setMarkedLocationId] = useContext(MarkedLocationIdContext);
+    const [gridActiveLocationId, setGridActiveLocationId] = useContext(GridActiveLocationIdContext);
+    const [loadedLocationsFullMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
+    const loadedLocationsMap = getLoadedLocationsLimitedMap(loadedLocationsFullMap, gridActiveLocationId);
     const [hiddenListVisible, setHiddenListVisible] = useState(false);
     const { visibleItems, hiddenItems } = useMemo(() => {
         return loadedLocationsMap.reduce(
@@ -31,6 +35,8 @@ const Breadcrumbs = () => {
         updatedLoadedLocations[updatedLoadedLocations.length - 1].subitems = [];
 
         dispatchLoadedLocationsAction({ type: 'SET_LOCATIONS', data: updatedLoadedLocations });
+        setMarkedLocationId(locationId);
+        setGridActiveLocationId(locationId);
     };
     const toggleHiddenListVisible = useCallback(() => {
         setHiddenListVisible(!hiddenListVisible);

src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js

@@ -13,13 +13,15 @@ import {
     MultipleConfigContext,
     ContainersOnlyContext,
     AllowedContentTypesContext,
+    GridActiveLocationIdContext,
 } from '../../universal.discovery.module';
 
 const isSelectionButtonClicked = (event) => {
     return event.target.closest('.c-udw-toggle-selection');
 };
 
 const GridViewItem = ({ location, version }) => {
+    const [, setGridActiveLocationId] = useContext(GridActiveLocationIdContext);
     const [markedLocationId, setMarkedLocationId] = useContext(MarkedLocationIdContext);
     const [, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
     const contentTypesMap = useContext(ContentTypesMapContext);
@@ -44,6 +46,8 @@ const GridViewItem = ({ location, version }) => {
         }
 
         setMarkedLocationId(location.id);
+        dispatchLoadedLocationsAction({ type: 'CUT_LOCATIONS', locationId: location.id });
+        dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data: { parentLocationId: location.id, subitems: [] } });
 
         if (!multiple) {
             dispatchSelectedLocationsAction({ type: 'CLEAR_SELECTED_LOCATIONS' });
@@ -59,6 +63,7 @@ const GridViewItem = ({ location, version }) => {
         }
 
         dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data: { parentLocationId: location.id, subitems: [] } });
+        setGridActiveLocationId(location.id);
     };
     const renderToggleSelection = () => {
         return (

src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.js

@@ -5,7 +5,13 @@ import GridViewItem from './grid.view.item';
 import Breadcrumbs from '../breadcrumbs/breadcrumbs';
 
 import { useFindLocationsByParentLocationIdFetch } from '../../hooks/useFindLocationsByParentLocationIdFetch';
-import { SORTING_OPTIONS, LoadedLocationsMapContext, SortingContext, SortOrderContext } from '../../universal.discovery.module';
+import {
+    SORTING_OPTIONS,
+    LoadedLocationsMapContext,
+    SortingContext,
+    SortOrderContext,
+    GridActiveLocationIdContext,
+} from '../../universal.discovery.module';
 
 const SCROLL_OFFSET = 200;
 
@@ -14,10 +20,12 @@ const GridView = ({ itemsPerPage }) => {
     const [loadedLocationsMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
     const [sorting] = useContext(SortingContext);
     const [sortOrder] = useContext(SortOrderContext);
+    const [gridActiveLocationId] = useContext(GridActiveLocationIdContext);
     const sortingOptions = SORTING_OPTIONS.find((option) => option.sortClause === sorting);
-    const locationData = loadedLocationsMap.length ? loadedLocationsMap[loadedLocationsMap.length - 1] : { subitems: [] };
+    const locationData = loadedLocationsMap.find(({ parentLocationId }) => parentLocationId === gridActiveLocationId);
+    const locationDataToLoad = loadedLocationsMap.length ? loadedLocationsMap[loadedLocationsMap.length - 1] : { subitems: [] };
     const [loadedLocations, isLoading] = useFindLocationsByParentLocationIdFetch(
-        locationData,
+        locationDataToLoad,
         { sortClause: sortingOptions.sortClause, sortOrder },
         itemsPerPage,
         offset,
@@ -56,7 +64,7 @@ const GridView = ({ itemsPerPage }) => {
         <div className="c-grid">
             <Breadcrumbs />
             <div className="ibexa-grid-view c-grid__items-wrapper" onScroll={loadMore}>
-                {locationData.subitems.map(renderItem)}
+                {locationData?.subitems.map(renderItem)}
             </div>
         </div>
     );