Fix geosolutions-it#11794 Layout issue for the floating containers (geosolutions-it#11927)

* Fix the layout issue for the floating containers
* Fix the test case

Author: subashtiwari1010

web/client/plugins/BackgroundSelector.jsx

@@ -39,7 +39,7 @@ import {
     allowBackgroundsDeletionSelector
 } from '../selectors/backgroundselector';
 
-import { mapLayoutValuesSelector } from '../selectors/maplayout';
+import { boundingMapRectLayoutValuesSelector, mapLayoutValuesSelector } from '../selectors/maplayout';
 import thumbs from './background/DefaultThumbs';
 import { createPlugin } from '../utils/PluginsUtils';
 
@@ -60,7 +60,11 @@ const backgroundSelector = createSelector([
     mapIsEditableSelector,
     backgroundLayersSelector,
     backgroundControlsSelector,
-    state => mapLayoutValuesSelector(state, {left: true, bottom: true}),
+    state => {
+        const mapLayoutStyle = mapLayoutValuesSelector(state, { bottom: true });
+        const boundingMapRectStyle = boundingMapRectLayoutValuesSelector(state, {left: true});
+        return { ...boundingMapRectStyle, ...mapLayoutStyle };
+    },
     state => state.browser && state.browser.mobile ? 'mobile' : 'desktop',
     confirmDeleteBackgroundModalSelector,
     allowBackgroundsDeletionSelector, isCesium],

web/client/plugins/Search.jsx

@@ -52,7 +52,7 @@ import {mapSelector, mapSizeValuesSelector, projectionSelector} from '../selecto
 import ConfigUtils from '../utils/ConfigUtils';
 import { defaultIconStyle } from '../utils/SearchUtils';
 import ToggleButton from './searchbar/ToggleButton';
-import {mapLayoutValuesSelector} from "../selectors/maplayout";
+import {boundingMapRectLayoutValuesSelector} from "../selectors/maplayout";
 import {sidebarIsActiveSelector} from "../selectors/sidebarmenu";
 import classnames from "classnames";
 
@@ -414,8 +414,8 @@ const SearchPlugin = connect((state) => ({
 export default {
     SearchPlugin: Object.assign(
         connect(createStructuredSelector({
-            style: state => mapLayoutValuesSelector(state, { right: true }),
-            offsets: state => mapLayoutValuesSelector(state, { right: true, left: true }),
+            style: state => boundingMapRectLayoutValuesSelector(state, { right: true }),
+            offsets: state => boundingMapRectLayoutValuesSelector(state, { right: true, left: true }),
             mapSize: state => mapSizeValuesSelector({ width: true })(state),
             sidebarIsActive: state => sidebarIsActiveSelector(state)
         }), {})(SearchPlugin), {

web/client/plugins/Timeline.jsx

@@ -39,7 +39,7 @@ import withResizeSpy from '../components/misc/enhancers/withResizeSpy';
 import Toolbar from '../components/misc/toolbar/Toolbar';
 import InlineDateTimeSelector from '../components/time/InlineDateTimeSelector';
 import { currentTimeSelector, offsetEnabledSelector } from '../selectors/dimension';
-import { mapLayoutValuesSelector } from '../selectors/maplayout';
+import { boundingMapRectLayoutValuesSelector, mapLayoutValuesSelector } from '../selectors/maplayout';
 import { playbackRangeSelector, statusSelector } from '../selectors/playback';
 import {
     currentTimeRangeSelector,
@@ -162,8 +162,9 @@ const TimelinePlugin = compose(
         }),
         // get info about expand, collapse panel
         connect( createSelector(
-            state => mapLayoutValuesSelector(state, { right: true, bottom: true, left: true }),
-            mapLayoutStyle => ({mapLayoutStyle}))),
+            state => boundingMapRectLayoutValuesSelector(state, { right: true, left: true }),
+            state => mapLayoutValuesSelector(state, { bottom: true }),
+            (boundingMapRectStyle, mapLayoutStyle) => ({mapLayoutStyle: {...boundingMapRectStyle, ...mapLayoutStyle}}))),
         // guess when to hide
         withProps(
             ({containerWidth, style, mapLayoutStyle}) => {

web/client/plugins/featuregrid/__tests__/FeatureEditor-test.jsx

@@ -51,7 +51,7 @@ describe('FeatureEditor plugin component', () => {
             pagination: { startIndex: undefined, maxFeatures: undefined, resultSize: undefined, totalFeatures: undefined },
             pages: undefined,
             size: 20,
-            hasNoGeometry: true
+            hasNoGeometry: false
         };
         it('base state', () => {
             expect(BASE_EXPECTED).toEqual(BASE_EXPECTED);

web/client/plugins/featuregrid/hoc/withResize.jsx

@@ -7,15 +7,15 @@ import './style.less';
  * @returns {React.Component} A component wrapped in a resizable div
  *
  * Props:
- * @prop {boolean} hasNoGeometry - When true, disables resize functionality (default: false).
+ * @prop {boolean} hasNoGeometry - When true, disables resize functionality.
  * If true, the wrapped component is rendered to fill the available height without resize functionality.
  * @prop {number} defaultHeight - Initial height in pixels (default: 300)
  * @prop {number} minHeight - Minimum height in pixels (default: 75)
  * @prop {number} maxHeight - Maximum height in pixels (default: 70% of the window inner height)
  */
 const withResize = (Component) => {
     return (props) => {
-        const { hasNoGeometry = false, defaultHeight = 300, minHeight = 75, maxHeight = '70%' } = props;
+        const { hasNoGeometry, defaultHeight = 300, minHeight = 75, maxHeight = '70%' } = props;
         const [height, setHeight] = useState(defaultHeight);
         const [isResizing, setIsResizing] = useState(false);
         const containerRef = useRef(null);
@@ -59,7 +59,7 @@ const withResize = (Component) => {
         };
 
         // If hasNoGeometry is true, render the component without the resize container
-        if (hasNoGeometry) {
+        if (hasNoGeometry && typeof hasNoGeometry === 'boolean') {
             return (
                 <div className="ms-featuregrid-fill">
                     <Component {...props} />

web/client/selectors/featuregrid.js

@@ -245,5 +245,8 @@ export const hasNoGeometry = (state) => {
         return false;
     }
     const features = get(state, "featuregrid.features", []);
+    if (features.length === 0) {
+        return false;
+    }
     return !(features || []).some(({ geometry }) => geometry);
 };

web/client/selectors/maplayout.js

@@ -147,3 +147,28 @@ export const dockPanelsSelector = (state) => state?.maplayout?.dockPanels ?? { l
 
 export const dockStyleSelector = state => mapLayoutValuesSelector(state, { height: true, right: true }, true);
 export const helpStyleSelector = state => mapLayoutValuesSelector(state, { right: true }, true);
+
+/**
+ * Retrieve only specific attribute from bounding map rect layout
+ * @function
+ * @memberof selectors.mapLayout
+ * @param  {object} state the state
+ * @param  {object} attributes attributes to retrieve, bool {left: true}
+ * @param  {boolean} isDock flag to use dock paddings instead of toolbar paddings
+ * @return {object} selected attributes of layout of the map
+ */
+export const boundingMapRectLayoutValuesSelector = memoize((state, attributes = {}, isDock = false) => {
+    const layout = boundingMapRectSelector(state);
+    const boundingSidebarRect = boundingSidebarRectSelector(state);
+    return layout && Object.keys(layout).filter(key =>
+        attributes[key]).reduce((a, key) => {
+        if (isDock) {
+            return ({...a, [key]: (boundingSidebarRect[key] ?? layout[key])});
+        }
+        return ({...a, [key]: layout[key]});
+    },
+    {}) || {};
+}, (state, attributes, isDock) =>
+    JSON.stringify(boundingMapRectSelector(state)) +
+    JSON.stringify(boundingSidebarRectSelector(state)) +
+    JSON.stringify(attributes) + (isDock ? '_isDock' : ''));