From 56bec4ff70a5993ab01253c853a427165c163edf Mon Sep 17 00:00:00 2001
From: Sovas Tiwari <subashtiwari1010@gmail.com>
Date: Tue, 14 Oct 2025 13:26:15 +0100
Subject: [PATCH 1/2] Add the link existing dashboard support for the tabbed
 dashboard

---
 web/client/actions/widgets.js                 |  13 ++
 .../components/dashboard/ConfigureView.jsx    | 161 ++++++++++++------
 web/client/components/dashboard/Dashboard.jsx |  56 +++---
 web/client/components/dashboard/Layouts.jsx   |  43 +++++
 .../dashboard/WidgetViewWrapper.jsx           |  44 +++--
 .../dashboard/hooks/useLoadDashboardData.js   |  83 +++++++++
 web/client/epics/widgets.js                   |   5 +-
 web/client/plugins/AddWidgetDashboard.jsx     |  15 +-
 web/client/plugins/Dashboard.jsx              |  24 ++-
 web/client/plugins/MapConnectionDashboard.jsx |  16 +-
 web/client/reducers/widgets.js                |  59 ++++++-
 web/client/selectors/widgets.js               |  50 +++++-
 web/client/themes/default/less/dashboard.less |  17 +-
 web/client/translations/data.ca-ES.json       |   3 +-
 web/client/translations/data.da-DK.json       |   3 +-
 web/client/translations/data.de-DE.json       |   3 +-
 web/client/translations/data.en-US.json       |   3 +-
 web/client/translations/data.es-ES.json       |   3 +-
 web/client/translations/data.fi-FI.json       |   3 +-
 web/client/translations/data.fr-FR.json       |   3 +-
 web/client/translations/data.hr-HR.json       |   3 +-
 web/client/translations/data.is-IS.json       |   3 +-
 web/client/translations/data.it-IT.json       |   3 +-
 web/client/translations/data.nl-NL.json       |   3 +-
 web/client/translations/data.pt-PT.json       |   3 +-
 web/client/translations/data.sk-SK.json       |   3 +-
 web/client/translations/data.sv-SE.json       |   3 +-
 web/client/translations/data.vi-VN.json       |   3 +-
 web/client/translations/data.zh-ZH.json       |   3 +-
 web/client/utils/GeostoreUtils.js             |  42 ++++-
 web/client/utils/WidgetsUtils.js              |  42 +++++
 .../utils/__tests__/WidgetsUtils-test.js      |  39 ++++-
 32 files changed, 592 insertions(+), 165 deletions(-)
 create mode 100644 web/client/components/dashboard/Layouts.jsx
 create mode 100644 web/client/components/dashboard/hooks/useLoadDashboardData.js

diff --git a/web/client/actions/widgets.js b/web/client/actions/widgets.js
index efcf27eee5..054eb3a8be 100644
--- a/web/client/actions/widgets.js
+++ b/web/client/actions/widgets.js
@@ -46,6 +46,7 @@ export const TOGGLE_TRAY = "WIDGET:TOGGLE_TRAY";
 
 export const REPLACE_LAYOUT_VIEW = "WIDGET:REPLACE_LAYOUT_VIEW";
 export const SET_SELECTED_LAYOUT_VIEW_ID = "WIDGET:SET_SELECTED_LAYOUT_VIEW_ID";
+export const SET_LINKED_DASHBOARD_DATA = "WIDGET:SET_LINKED_DASHBOARD_DATA";
 
 /**
  * Intent to create a new Widgets
@@ -348,3 +349,15 @@ export const setSelectedLayoutViewId = (viewId, target = DEFAULT_TARGET) => ({
     target,
     viewId
 });
+
+/**
+ * Set the layouts, widgets of the linked dashboard
+ * @param  {object} data The layouts and widgets
+ * @param {string} [target=floating] the target container of the layouts
+ * @return {object}        action with type `WIDGETS:SET_LINKED_DASHBOARD_DATA`, the data and the target
+ */
+export const setLinkedDashboardData = (data, target = DEFAULT_TARGET) => ({
+    type: SET_LINKED_DASHBOARD_DATA,
+    data,
+    target
+});
diff --git a/web/client/components/dashboard/ConfigureView.jsx b/web/client/components/dashboard/ConfigureView.jsx
index 3c0c726a0c..6b20e4baec 100644
--- a/web/client/components/dashboard/ConfigureView.jsx
+++ b/web/client/components/dashboard/ConfigureView.jsx
@@ -1,67 +1,118 @@
 import React, { useEffect, useState } from 'react';
 import Dialog from '../misc/Dialog';
-import { Button, ControlLabel, FormControl, FormGroup, Glyphicon } from 'react-bootstrap';
+import { Button, ControlLabel, FormControl, FormGroup, Glyphicon, InputGroup } from 'react-bootstrap';
 import Message from '../I18N/Message';
 import ColorSelector from '../style/ColorSelector';
+import Select from 'react-select';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
+import { userSelector } from '../../selectors/security';
+import { getMonitoredStateSelector } from '../../plugins/ResourcesCatalog/selectors/resources';
+import Portal from '../misc/Portal';
+import { getCatalogResources } from '../../api/persistence';
 
-const ConfigureView = ({ active, onToggle, name, color, onSave }) => {
+const ConfigureView = ({ active, onToggle, data, onSave, user, monitoredState }) => {
     const [setting, setSetting] = useState({ name: null, color: null });
+    const [dashboardOptions, setDashboardOptions] = useState([]);
+
+    useEffect(() => {
+        setSetting(data);
+    }, [data]);
+
     useEffect(() => {
-        setSetting({ name, color });
-    }, [name, color]);
-    return (
-        <div>
-            {active && (
-                <Dialog
-                    id="mapstore-export-data-results"
-                    draggable={false}
-                    modal>
-                    <span role="header">
-                        <span className="modal-title about-panel-title"><Message msgId="dashboard.view.configure"/></span>
-                        <button onClick={() => onToggle()} className="settings-panel-close close">
-                            <Glyphicon glyph="1-close"/>
-                        </button>
-                    </span>
-                    <div role="body" className="_padding-lg">
-                        <FormGroup className="_padding-b-sm">
-                            <ControlLabel><Message msgId="dashboard.view.name" /></ControlLabel>
-                            <FormControl
-                                type="text"
-                                value={setting.name}
-                                onChange={event => {
-                                    const { value } = event.target || {};
-                                    setSetting(prev => ({ ...prev, name: value }));
-                                }}
+        if (!setting?.linkExistingDashboard) return;
+        const args = [{ params: { pageSize: 9999999 }, monitoredState }, { user }, ["DASHBOARD"]];
+        const catalogResources = getCatalogResources(...args).toPromise();
+        catalogResources.then(res => {
+            const options = res.resources.map(d => ({
+                value: d.id || d.pk,
+                label: d.name
+            }));
+            setDashboardOptions(options);
+        });
+    }, [setting?.linkExistingDashboard]);
+
+    return active && (
+        <Portal>
+            <Dialog
+                id="mapstore-export-data-results"
+                draggable={false}
+                style={{ marginTop: '150px' }}
+                containerClassName="configure-view-dialog-container"
+                modal>
+                <span role="header">
+                    <span className="modal-title about-panel-title"><Message msgId="dashboard.view.configure"/></span>
+                    <button onClick={() => onToggle()} className="settings-panel-close close">
+                        <Glyphicon glyph="1-close"/>
+                    </button>
+                </span>
+                <div role="body" className="_padding-lg">
+                    <FormGroup className="_padding-b-sm">
+                        <ControlLabel><Message msgId="dashboard.view.name" /></ControlLabel>
+                        <FormControl
+                            type="text"
+                            value={setting.name}
+                            onChange={event => {
+                                const { value } = event.target || {};
+                                setSetting(prev => ({ ...prev, name: value }));
+                            }}
+                        />
+                    </FormGroup>
+                    <FormGroup className="ms-flex-box _flex _flex-gap-sm _flex-center-v form-group-inline-content _relative">
+                        <ControlLabel><Message msgId="dashboard.view.color" /></ControlLabel>
+                        <InputGroup className="dashboard-color-picker _relative">
+                            <ColorSelector
+                                format="rgb"
+                                color={setting.color}
+                                onChangeColor={(colorVal) => colorVal && setSetting(prev =>({
+                                    ...prev,
+                                    color: colorVal
+                                }))}
+                                placement="right"
+                            />
+                        </InputGroup>
+                    </FormGroup>
+                    <FormGroup className="ms-flex-box _flex _flex-gap-sm _flex-center-v form-group-inline-content">
+                        <ControlLabel>Link existing dashboard</ControlLabel>
+                        <FormControl
+                            type="checkbox"
+                            checked={setting.linkExistingDashboard}
+                            onChange={event => {
+                                const { checked } = event.target || {};
+                                setSetting(prev => ({ ...prev, linkExistingDashboard: checked }));
+                            }}
+                        />
+                    </FormGroup>
+                    {setting.linkExistingDashboard && (
+                        <FormGroup>
+                            <ControlLabel>Select dashboard</ControlLabel>
+                            <Select
+                                value={setting.dashboard || ''}
+                                options={dashboardOptions}
+                                name="dashboard"
+                                onChange={selected => setSetting(prev => ({...prev, dashboard: selected?.value }))}
                             />
                         </FormGroup>
-                        <FormGroup className="ms-flex-box _flex _flex-gap-sm _flex-center-v">
-                            <ControlLabel><Message msgId="dashboard.view.color" /></ControlLabel>
-                            <div className="dashboard-color-picker">
-                                <ColorSelector
-                                    format="rgb"
-                                    color={setting.color}
-                                    onChangeColor={(colorVal) => colorVal && setSetting(prev =>({
-                                        ...prev,
-                                        color: colorVal
-                                    }))}
-                                />
-                            </div>
-                        </FormGroup>
-                    </div>
-                    <div role="footer">
-                        <Button
-                            bsStyle="default"
-                            onClick={() => onToggle()}
-                        >Cancel</Button>
-                        <Button
-                            bsStyle="primary"
-                            onClick={() => onSave(setting)}
-                        >Save</Button>
-                    </div>
-                </Dialog>
-            )}
-        </div>
+                    )}
+                </div>
+                <div role="footer">
+                    <Button
+                        bsStyle="default"
+                        onClick={() => onToggle()}
+                    >Cancel</Button>
+                    <Button
+                        bsStyle="primary"
+                        onClick={() => onSave(setting)}
+                    >Save</Button>
+                </div>
+            </Dialog>
+        </Portal>
     );
 };
 
-export default ConfigureView;
+export default connect(
+    createStructuredSelector({
+        user: userSelector,
+        monitoredState: getMonitoredStateSelector
+    })
+)(ConfigureView);
diff --git a/web/client/components/dashboard/Dashboard.jsx b/web/client/components/dashboard/Dashboard.jsx
index faaff95904..c7027e6bf4 100644
--- a/web/client/components/dashboard/Dashboard.jsx
+++ b/web/client/components/dashboard/Dashboard.jsx
@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { compose, defaultProps, pure, withProps, withStateHandlers, withHandlers, lifecycle } from 'recompose';
+import { compose, defaultProps, pure, withProps, withStateHandlers, withHandlers } from 'recompose';
 
 import Message from '../I18N/Message';
 import { widthProvider } from '../layout/enhancers/gridLayout';
@@ -59,21 +59,35 @@ export default compose(
             ...maximizedProps
         });
     }),
+    withStateHandlers(
+        ({ pathname }) => ({
+            active: isNaN(pathname.substr(-1))
+        }),
+        {
+            setActive: () => (active) => ({ active })
+        }
+    ),
     emptyState(
-        ({widgets = []} = {}) => widgets.length === 0,
-        ({loading}) => ({
-            glyph: "dashboard",
-            title: loading ? <Message msgId="loading" /> : <Message msgId="dashboard.emptyTitle" />
-        })
+        ({layouts = []} = {}) => (!layouts || layouts.length === 0),
+        ({loading, layouts = [], onLayoutViewReplace}) => {
+            const _layout = [{
+                id: uuidv1(),
+                name: "Main view",
+                color: null
+            }];
+            if (!layouts || layouts.length === 0) {
+                // Replace the layout view with default value
+                onLayoutViewReplace(_layout);
+            }
+            return {
+                glyph: "dashboard",
+                title: loading ? <Message msgId="loading" /> : <Message msgId="dashboard.emptyTitle" />
+            };
+        }
     ),
     defaultProps({
         isWidgetSelectable: () => true
     }),
-    withStateHandlers(
-        // Initial state to set the Configure view for the selected layout
-        () => ({ active: false }),
-        { setActive: () => (active) => ({ active }) }
-    ),
     // Intercept onLayoutChange to inspect and modify data
     withHandlers({
         onLayoutChange: props => (layout, allLayouts) => {
@@ -104,25 +118,5 @@ export default compose(
             return { layout, allLayouts: updatedLayouts };
         }
     }),
-    lifecycle({
-        componentDidMount() {
-            const { layouts, widgets, onLayoutViewReplace = () => {}, onWidgetsReplace = () => {} } = this.props;
-            // DEFAULT value for the tabbed dashboard (Handling the first load in new dashboard)
-            const _layout = [{
-                id: uuidv1(),
-                name: "Main view",
-                color: null
-            }];
-            if (!layouts) {
-                // Replace the layout view with default value
-                onLayoutViewReplace(_layout);
-            }
-            if (widgets) {
-                // Check if the widgets have layoutId or not and assign if missing
-                // Replace the existing widgets
-                onWidgetsReplace(widgets.map(w => w.layoutId ? w : { ...w, layoutId: _layout?.[0]?.id }));
-            }
-        }
-    }),
     withSelection
 )(WidgetViewWrapper);
diff --git a/web/client/components/dashboard/Layouts.jsx b/web/client/components/dashboard/Layouts.jsx
new file mode 100644
index 0000000000..6f8a2d07d2
--- /dev/null
+++ b/web/client/components/dashboard/Layouts.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import LoadingSpinner from '../misc/LoadingSpinner';
+import Message from '../I18N/Message';
+import FlexBox from '../layout/FlexBox';
+import WidgetsView from '../widgets/view/WidgetsView';
+import useLoadDashboardData from './hooks/useLoadDashboardData';
+import EmptyView from '../misc/EmptyView';
+
+export default function Layouts({ selectedLayout, layoutsData, ...props }) {
+    const [isLoading, error] = useLoadDashboardData({ props, dashboard: selectedLayout.dashboard });
+
+    const filteredProps = {...props};
+    if (props.widgets) {
+        filteredProps.widgets = props.widgets.filter(widget => widget.layoutId === props.selectedLayoutId);
+    }
+
+    if (error) {
+        return (
+            <div style={{ margin: "auto", fontWeight: 'bold' }} >
+                <EmptyView title={<Message msgId={error.messageId} />} />
+            </div>
+        );
+    }
+
+    return isLoading
+        ? (
+            <div style={{ margin: "auto", fontWeight: 'bold' }} >
+                <LoadingSpinner style={{ display: "inline-block", verticalAlign: "middle" }}/>
+                <Message msgId="loading" />
+            </div>
+        )
+        : (
+            <FlexBox.Fill classNames={["_relative", "_overflow-auto"]}>
+                <WidgetsView
+                    {...filteredProps}
+                    layouts={layoutsData}
+                    canEdit={selectedLayout.dashboard ? false : props.canEdit}
+                />
+            </FlexBox.Fill>
+        );
+
+
+}
diff --git a/web/client/components/dashboard/WidgetViewWrapper.jsx b/web/client/components/dashboard/WidgetViewWrapper.jsx
index 847601f909..fa56836e12 100644
--- a/web/client/components/dashboard/WidgetViewWrapper.jsx
+++ b/web/client/components/dashboard/WidgetViewWrapper.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import WidgetsView from '../widgets/view/WidgetsView';
 import ViewSwitcher from './ViewSwitcher';
 import uuidv1 from 'uuid/v1';
 import { getNextAvailableName } from '../../utils/WidgetsUtils';
 import ConfigureView from './ConfigureView';
 import FlexBox from '../layout/FlexBox';
+import Layouts from './Layouts';
 
 const WidgetViewWrapper = props => {
     const { layouts = [], onLayoutViewReplace, selectedLayoutId, onLayoutViewSelected, active, setActive, widgets = [], onWidgetsReplace, canEdit } = props;
@@ -23,12 +23,7 @@ const WidgetViewWrapper = props => {
 
     // strip out "properties" before passing
     const selectedLayout = getSelectedLayout();
-    const { id, name, color, order, ...layoutForWidgets } = selectedLayout;
-
-    const filteredProps = {...props};
-    if (props.widgets) {
-        filteredProps.widgets = props.widgets.filter(widget => widget.layoutId === selectedLayoutId);
-    }
+    const { id, name, color, linkExistingDashboard, dashboard, ...layoutsData } = selectedLayout;
 
     const handleAddLayout = () => {
         const newLayout = {
@@ -41,6 +36,7 @@ const WidgetViewWrapper = props => {
         const finalLayout = [...layouts, newLayout];
         onLayoutViewReplace?.(finalLayout);
         onLayoutViewSelected(newLayout.id);
+        setActive(true);
     };
 
     const handleRemoveLayout = (layoutId) => {
@@ -73,7 +69,13 @@ const WidgetViewWrapper = props => {
 
     const handleSave = (data) => {
         const updatedLayouts = layouts.map(layout => layout.id === id
-            ? { ...layout, name: data.name, color: data.color }
+            ? {
+                ...layout,
+                name: data.name,
+                color: data.color,
+                linkExistingDashboard: data.linkExistingDashboard,
+                dashboard: data.dashboard
+            }
             : layout
         );
         onLayoutViewReplace(updatedLayouts);
@@ -84,31 +86,27 @@ const WidgetViewWrapper = props => {
 
     return (
         <FlexBox column classNames={["_relative", "_fill"]}>
-            <FlexBox.Fill classNames={["_relative", "_overflow-auto"]}>
-                <WidgetsView
-                    {...filteredProps}
-                    layouts={layoutForWidgets} // only selected layout without properties
-                />
-            </FlexBox.Fill>
+            <Layouts selectedLayout={selectedLayout} layoutsData={layoutsData} {...props} />
             {(canEdit || layoutViews.length > 1) && (
                 <ViewSwitcher
-                    layouts={layoutViews}
+                    layouts={Array.isArray(layouts) ? layouts : [layouts]}
                     selectedLayoutId={selectedLayoutId}
                     onSelect={handleSelectLayout}
                     onAdd={handleAddLayout}
                     onRemove={handleRemoveLayout}
                     onMove={handleMoveLayout}
                     onConfigure={() => setActive(true)}
-                    canEdit={canEdit}
+                    canEdit={props.canEdit}
+                />
+            )}
+            {active && (
+                <ConfigureView
+                    active={active}
+                    onToggle={handleToggle}
+                    onSave={handleSave}
+                    data={{ name, color, linkExistingDashboard, dashboard }}
                 />
             )}
-            <ConfigureView
-                active={active}
-                onToggle={handleToggle}
-                onSave={handleSave}
-                name={name}
-                color={color}
-            />
         </FlexBox>
     );
 };
diff --git a/web/client/components/dashboard/hooks/useLoadDashboardData.js b/web/client/components/dashboard/hooks/useLoadDashboardData.js
new file mode 100644
index 0000000000..411dd039dc
--- /dev/null
+++ b/web/client/components/dashboard/hooks/useLoadDashboardData.js
@@ -0,0 +1,83 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getErrorMessageId, updateDependenciesMap } from '../../../utils/WidgetsUtils';
+import { getResource } from '../../../api/persistence';
+
+export default function useLoadDashboardData({ props, dashboard }) {
+    const [loading, setLoading] = useState(false);
+    const [errors, setErrors] = useState({});
+
+    // Track previous dashboard per layoutId
+    const prevDashboardsRef = useRef({});
+    const isFetchingRef = useRef(false);
+
+    const { layouts = [], selectedLayoutId, onLinkedDashboardDataLoad, widgets = [] } = props || {};
+
+    const layout = useMemo(() => {
+        if (!layouts || !selectedLayoutId) return null;
+        return layouts.find(l => l.id === selectedLayoutId);
+    }, [selectedLayoutId, layouts]);
+
+    useEffect(() => {
+        if (!dashboard || !layout) return;
+
+        const prevDashboard = prevDashboardsRef.current[selectedLayoutId];
+        setErrors(prev => ({ ...prev, [selectedLayoutId]: null }));
+
+        const hasLayoutData = layout?.md?.length > 0 || layout?.xxs?.length > 0;
+        const isSameDashboard = prevDashboard === dashboard;
+
+        // If layout already has data AND dashboard hasn't changed, skip API call
+        if ((hasLayoutData && isSameDashboard) || isFetchingRef.current) return;
+
+        isFetchingRef.current = true;
+        setLoading(true);
+        getResource(dashboard, 'dashboard')
+            .toPromise()
+            .then(res => {
+                const layoutsData = Array.isArray(res.data.layouts) ? res.data.layouts : [res.data.layouts];
+                // Handle multiple dashboard error
+                if (layoutsData?.length > 1) {
+                    const messageId = "dashboard.errors.multipleDashboardError";
+                    setErrors(prev => ({ ...prev, [selectedLayoutId]: { messageId } }));
+                    return;
+                }
+
+                const layoutData = layoutsData?.[0];
+                // Prefix widget IDs and dependencies
+                const widgetsData = res.data.widgets.map(w => ({
+                    ...w,
+                    id: `${selectedLayoutId}-${w.id}`,
+                    layoutId: selectedLayoutId,
+                    ...(w.dependenciesMap && {
+                        dependenciesMap: updateDependenciesMap(w.dependenciesMap, selectedLayoutId)
+                    })
+                }));
+
+                // Prefix layout "i" fields
+                const prefixLayoutItems = (items = []) =>
+                    items.map(item => ({ ...item, i: `${selectedLayoutId}-${item.i}` }));
+
+                const updatedLayouts = layouts.map(l => l.id === selectedLayoutId
+                    ? { ...l, md: prefixLayoutItems(layoutData.md), xxs: prefixLayoutItems(layoutData.xxs) }
+                    : l
+                );
+                onLinkedDashboardDataLoad({
+                    // filter out the existing widgets when the dashboard is changed
+                    widgets: [...widgets.filter(w => w.layoutId !== selectedLayoutId), ...widgetsData],
+                    layouts: updatedLayouts
+                });
+                // Update the dashboard for this layout
+                prevDashboardsRef.current[selectedLayoutId] = dashboard;
+            })
+            .catch(err => {
+                const messageId = getErrorMessageId(err);
+                setErrors(prev => ({ ...prev, [selectedLayoutId]: { messageId } }));
+            })
+            .finally(() => {
+                isFetchingRef.current = false;
+                setLoading(false);
+            });
+    }, [dashboard, layout, layouts, onLinkedDashboardDataLoad, selectedLayoutId, widgets]);
+
+    return [loading, errors[selectedLayoutId]];
+}
diff --git a/web/client/epics/widgets.js b/web/client/epics/widgets.js
index 5ade0d4af2..b920062433 100644
--- a/web/client/epics/widgets.js
+++ b/web/client/epics/widgets.js
@@ -27,7 +27,8 @@ import {
     replaceWidgets,
     WIDGETS_MAPS_REGEX,
     EDITOR_CHANGE,
-    OPEN_FILTER_EDITOR
+    OPEN_FILTER_EDITOR,
+    SET_LINKED_DASHBOARD_DATA
 } from '../actions/widgets';
 
 import { changeMapEditor } from '../actions/queryform';
@@ -131,7 +132,7 @@ export const exportWidgetData = action$ =>
  * Then re-configures the dependencies to it.
  */
 export const alignDependenciesToWidgets = (action$, { getState = () => { } } = {}) =>
-    action$.ofType(MAP_CONFIG_LOADED, DASHBOARD_LOADED, INSERT)
+    action$.ofType(MAP_CONFIG_LOADED, DASHBOARD_LOADED, INSERT, SET_LINKED_DASHBOARD_DATA)
         .map(() => availableDependenciesSelector(getState()))
         .pluck('availableDependencies')
         .distinctUntilChanged( (oldMaps = [], newMaps = []) => isEqual([...oldMaps], [...newMaps]))
diff --git a/web/client/plugins/AddWidgetDashboard.jsx b/web/client/plugins/AddWidgetDashboard.jsx
index ada8b63621..d126d761f2 100644
--- a/web/client/plugins/AddWidgetDashboard.jsx
+++ b/web/client/plugins/AddWidgetDashboard.jsx
@@ -16,18 +16,21 @@ import { buttonCanEdit, isDashboardEditing } from '../selectors/dashboard';
 import { setEditing } from '../actions/dashboard';
 import { createWidget } from '../actions/widgets';
 import { createPlugin } from '../utils/PluginsUtils';
+import { canEditLayoutView } from '../selectors/widgets';
 
 class AddWidgetDashboard extends React.Component {
     static propTypes = {
         canEdit: PropTypes.bool,
         editing: PropTypes.bool,
         onAddWidget: PropTypes.func,
-	    setEditing: PropTypes.func
+	    setEditing: PropTypes.func,
+        disabled: PropTypes.bool
     }
 
     static defaultProps = {
         editing: false,
- 		canEdit: false
+ 		canEdit: false,
+        disabled: false
     }
 
     render() {
@@ -36,7 +39,7 @@ class AddWidgetDashboard extends React.Component {
             glyph={'plus'}
             tooltipId={'dashboard.editor.addACardToTheDashboard'}
             bsStyle={ this.props.editing ? 'primary' : 'tray'}
-            disabled={this.props.editing}
+            disabled={this.props.editing || this.props.disabled}
             onClick={() => {
  				if (this.props.editing) this.props.setEditing(false);
  				else {
@@ -53,9 +56,11 @@ const ConnectedAddWidget = connect(
     createSelector(
         buttonCanEdit,
         isDashboardEditing,
-        ( edit, editing ) => ({
+        canEditLayoutView,
+        ( edit, editing, canEditView ) => ({
             canEdit: edit,
-            editing
+            editing,
+            disabled: !canEditView
         })
     ),
     {
diff --git a/web/client/plugins/Dashboard.jsx b/web/client/plugins/Dashboard.jsx
index a200a78cc5..b1820b1faa 100644
--- a/web/client/plugins/Dashboard.jsx
+++ b/web/client/plugins/Dashboard.jsx
@@ -24,7 +24,8 @@ import {
     toggleMaximize,
     replaceLayoutView,
     replaceWidgets,
-    setSelectedLayoutViewId
+    setSelectedLayoutViewId,
+    setLinkedDashboardData
 } from '../actions/widgets';
 import Dashboard from '../components/dashboard/Dashboard';
 import widgetsReducers from '../reducers/widgets';
@@ -56,6 +57,7 @@ import GlobalSpinner from '../components/misc/spinners/GlobalSpinner/GlobalSpinn
 import { createPlugin } from '../utils/PluginsUtils';
 import { canTableWidgetBeDependency } from '../utils/WidgetsUtils';
 import usePluginItems from '../hooks/usePluginItems';
+import { pathnameSelector } from '../selectors/router';
 
 const WidgetsView = compose(
     connect(
@@ -78,8 +80,9 @@ const WidgetsView = compose(
             isDashboardAvailable,
             getSelectedLayoutId,
             buttonCanEdit,
+            pathnameSelector,
             (resource, widgets, layouts, dependencies, selectionActive, editingWidget, groups, showGroupColor, loading, isMobile, currentLocaleLanguage, isLocalizedLayerStylesEnabled,
-                env, maximized, currentLocale, isDashboardOpened, selectedLayoutId, edit) => ({
+                env, maximized, currentLocale, isDashboardOpened, selectedLayoutId, edit, pathname) => ({
                 resource,
                 loading,
                 canEdit: edit,
@@ -87,15 +90,23 @@ const WidgetsView = compose(
                 dependencies,
                 selectionActive,
                 editingWidget,
-                widgets: !isEmpty(maximized) ? widgets.filter(w => w.id === maximized.widget.id) : widgets,
+                widgets: !isEmpty(maximized) && Array.isArray(maximized.widget) && maximized.widget.some(w => w.layoutId === selectedLayoutId)
+                    ? widgets.filter(w => maximized.widget.some(mw => mw.id === w.id))
+                    : widgets,
                 groups,
                 showGroupColor,
                 language: isLocalizedLayerStylesEnabled ? currentLocaleLanguage : null,
                 env,
-                maximized,
+                maximized: !isEmpty(maximized) && (
+                    (Array.isArray(maximized.widget)
+                        ? maximized.widget.every(w => w.layoutId !== selectedLayoutId)
+                        : maximized.widget.layoutId !== selectedLayoutId
+                    )
+                ) ? {} : maximized,
                 currentLocale,
                 isDashboardOpened,
-                selectedLayoutId
+                selectedLayoutId,
+                pathname
             })
         ), {
             editWidget,
@@ -107,7 +118,8 @@ const WidgetsView = compose(
             toggleMaximize,
             onLayoutViewReplace: replaceLayoutView,
             onWidgetsReplace: replaceWidgets,
-            onLayoutViewSelected: setSelectedLayoutViewId
+            onLayoutViewSelected: setSelectedLayoutViewId,
+            onLinkedDashboardDataLoad: setLinkedDashboardData
         }
     ),
     withProps(() => ({
diff --git a/web/client/plugins/MapConnectionDashboard.jsx b/web/client/plugins/MapConnectionDashboard.jsx
index d1132ec1a5..73b4723218 100644
--- a/web/client/plugins/MapConnectionDashboard.jsx
+++ b/web/client/plugins/MapConnectionDashboard.jsx
@@ -13,7 +13,7 @@ import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
 import ToolbarButton from '../components/misc/toolbar/ToolbarButton';
 import { buttonCanEdit, showConnectionsSelector } from '../selectors/dashboard';
-import { dashboardHasWidgets, getWidgetsDependenciesGroups } from '../selectors/widgets';
+import { canEditLayoutView, dashboardHasWidgets, getWidgetsDependenciesGroups } from '../selectors/widgets';
 import { triggerShowConnections } from '../actions/dashboard';
 import { createPlugin } from '../utils/PluginsUtils';
 
@@ -23,7 +23,8 @@ class MapConnectionDashboard extends React.Component {
         canEdit: PropTypes.bool,
         hasWidgets: PropTypes.bool,
         hasConnections: PropTypes.bool,
-        onShowConnections: PropTypes.func
+        onShowConnections: PropTypes.func,
+        disabled: PropTypes.bool
     }
 
     static defaultProps = {
@@ -31,7 +32,7 @@ class MapConnectionDashboard extends React.Component {
     }
 
     render() {
-        const { showConnections, canEdit, hasConnections, hasWidgets, onShowConnections } = this.props;
+        const { showConnections, canEdit, hasConnections, hasWidgets, onShowConnections, disabled } = this.props;
         if (!(!!hasWidgets && !!hasConnections || !canEdit)) return false;
         return  (<ToolbarButton
             glyph={showConnections ? 'bulb-on' : 'bulb-off'}
@@ -40,7 +41,8 @@ class MapConnectionDashboard extends React.Component {
             onClick={()=>onShowConnections(!showConnections)}
             tooltipPosition={'left'}
             id={'ms-map-connection-card-dashboard'}
-            btnDefaultProps={{ tooltipPosition: 'bottom', className: 'square-button-md', bsStyle: 'primary' }}/>);
+            btnDefaultProps={{ tooltipPosition: 'bottom', className: 'square-button-md', bsStyle: 'primary' }}
+            disabled={disabled} />);
     }
 }
 
@@ -50,11 +52,13 @@ const ConnectedMapAddWidget = connect(
         dashboardHasWidgets,
         buttonCanEdit,
         getWidgetsDependenciesGroups,
-        (showConnections, hasWidgets, edit, groups = []) => ({
+        canEditLayoutView,
+        (showConnections, hasWidgets, edit, groups = [], canEditView) => ({
             showConnections,
             hasConnections: groups.length > 0,
             hasWidgets,
-            canEdit: edit
+            canEdit: edit,
+            disabled: !canEditView
         })
     ),
     {
diff --git a/web/client/reducers/widgets.js b/web/client/reducers/widgets.js
index 7f13b7b5a6..a7e91f1b92 100644
--- a/web/client/reducers/widgets.js
+++ b/web/client/reducers/widgets.js
@@ -32,7 +32,8 @@ import {
     REPLACE,
     WIDGETS_REGEX,
     REPLACE_LAYOUT_VIEW,
-    SET_SELECTED_LAYOUT_VIEW_ID
+    SET_SELECTED_LAYOUT_VIEW_ID,
+    SET_LINKED_DASHBOARD_DATA
 } from '../actions/widgets';
 import { REFRESH_SECURITY_LAYERS, CLEAR_SECURITY } from '../actions/security';
 import { MAP_CONFIG_LOADED } from '../actions/config';
@@ -147,7 +148,7 @@ function widgetsReducer(state = emptyState, action) {
         let uValue = action.value;
         if (action.mode === "merge") {
             uValue = action.key === "maps"
-                ? oldWidget.maps.map(m => m.mapId === action.value?.mapId ? {...m, ...action?.value} : m)
+                ? oldWidget?.maps?.map(m => m.mapId === action.value?.mapId ? {...m, ...action?.value} : m)
                 : Object.assign({}, oldWidget[action.key], action.value);
         }
         return arrayUpsert(`containers[${action.target}].widgets`,
@@ -372,7 +373,35 @@ function widgetsReducer(state = emptyState, action) {
             return state;
         }
 
-        if (maximized?.widget) {
+        const layouts = state?.containers?.[action.target]?.layouts;
+        const selectedLayoutId = state?.containers?.[action.target]?.selectedLayoutId || layouts?.[0]?.id;
+        const isLayoutArray = Array.isArray(layouts);
+
+        const isWidgetArray = maximized?.widget ? Array.isArray(maximized.widget) : false;
+        const isIncluded = isWidgetArray ? maximized.widget.find(w => w.id === widget.id) : widget;
+
+        if (isIncluded && maximized?.widget && maximized?.widget?.length > 1) {
+            const maximizedState = { ...maximized, widget: maximized.widget.filter(w => w.id !== widget.id) };
+            const updatedLayouts = layouts.map(l => l.id === widget.layoutId
+                ? { ...maximized.layouts.find(ml => ml.id === widget.layoutId) }
+                : { ...l }
+            );
+            return compose(
+                set(`containers[${action.target}].maximized`, maximizedState),
+                set(`containers[${action.target}].layout`, updatedLayouts.find(l => l.id === widget.layoutId)?.md),
+                set(`containers[${action.target}].layouts`, updatedLayouts),
+                set(`containers[${action.target}].widgets`, state?.containers?.[action.target]?.widgets?.map(w => w.id === widget.id ?
+                    {
+                        ...w,
+                        dataGrid: {
+                            ...w.dataGrid,
+                            isDraggable: true,
+                            isResizable: true
+                        }
+                    } : w)
+                )
+            )(state);
+        } else if (isIncluded && maximized?.widget) {
             return compose(
                 set(`containers[${action.target}].layout`, maximized.layout),
                 set(`containers[${action.target}].layouts`, maximized.layouts),
@@ -408,16 +437,22 @@ function widgetsReducer(state = emptyState, action) {
             ...newLayoutValues
         };
 
+        const updatedLayout = isLayoutArray
+            ? layouts.map(l =>
+                l.id === selectedLayoutId
+                    ? { ...l, xxs: [newLayoutValue], md: [] }
+                    : { ...l }
+            )
+            : { xxs: [newLayoutValue] };
+
         return compose(
             set(`containers[${action.target}].maximized`, {
-                widget,
-                layout: state?.containers?.[action.target]?.layout,
-                layouts: state?.containers?.[action.target]?.layouts
+                widget: isLayoutArray ? [...(maximized?.widget || []), widget] : widget,
+                layout: maximized?.layout || state?.containers?.[action.target]?.layout,
+                layouts: maximized?.layouts || state?.containers?.[action.target]?.layouts
             }),
             set(`containers[${action.target}].layout`, [newLayoutValue]),
-            set(`containers[${action.target}].layouts`, {
-                xxs: [newLayoutValue]
-            }),
+            set(`containers[${action.target}].layouts`, updatedLayout),
             set(`containers[${action.target}].widgets`, state?.containers?.[action.target]?.widgets?.map(w => w.id === widget.id ?
                 {
                     ...w,
@@ -459,6 +494,12 @@ function widgetsReducer(state = emptyState, action) {
     case SET_SELECTED_LAYOUT_VIEW_ID: {
         return set(`containers[${action.target}].selectedLayoutId`, action.viewId, state);
     }
+    case SET_LINKED_DASHBOARD_DATA: {
+        return set(`containers[${DEFAULT_TARGET}]`, {
+            ...state?.containers?.[DEFAULT_TARGET],
+            ...action.data
+        }, state);
+    }
     default:
         return state;
     }
diff --git a/web/client/selectors/widgets.js b/web/client/selectors/widgets.js
index 2e5d43383d..97cb57b3cc 100644
--- a/web/client/selectors/widgets.js
+++ b/web/client/selectors/widgets.js
@@ -50,7 +50,7 @@ export const getFloatingWidgetsPerView = createSelector(
     getSelectedLayoutId,
     getEditingWidget,
     (widgets = [], selectedLayoutId, editingWidget) => {
-        if (editingWidget) {
+        if (editingWidget?.layoutId) {
             return widgets.filter(w => w.layoutId === editingWidget.layoutId);
         }
         if (selectedLayoutId) {
@@ -194,9 +194,39 @@ export const dependenciesSelector = createShallowSelector(
         [Object.keys(map)[i]]: values[i]
     }), {})
 );
+
+export const getUpdatedLayout = createSelector(
+    getFloatingWidgetsLayout,
+    (layouts) => {
+        const isLayoutArray = Array.isArray(layouts);
+        return isLayoutArray
+            ? layouts.map(l => l.dashboard
+                ? { id: l.id, name: l.name, color: l.color, dashboard: l.dashboard, linkExistingDashboard: l.linkExistingDashboard, md: [], xxs: [] }
+                : { ...l }
+            ) : layouts;
+    }
+);
+
+export const filterLinkedWidgets = createSelector(
+    getUpdatedLayout,
+    getFloatingWidgets,
+    (layouts, widgets = []) => {
+        const isLayoutArray = Array.isArray(layouts);
+        if (isLayoutArray) {
+            // Layouts that have a dashboard link
+            const linkedLayoutIds = layouts.filter(l => !!l.dashboard).map(l => l.id);
+            // Widgets without dashboard-linked layouts
+            const filteredWidgets = (Array.isArray(widgets) ? widgets : Object.values(widgets))
+                .filter(w => !linkedLayoutIds.includes(w.layoutId));
+            return filteredWidgets;
+        }
+        return widgets;
+    }
+);
+
 export const widgetsConfig = createStructuredSelector({
-    widgets: getFloatingWidgets,
-    layouts: getFloatingWidgetsLayout,
+    widgets: filterLinkedWidgets,
+    layouts: getUpdatedLayout,
     catalogs: dashboardServicesSelector
 });
 
@@ -219,3 +249,17 @@ export const getTblWidgetZoomLoader = state => {
     let tableWidgets = (getFloatingWidgets(state) || []).filter(({ widgetType } = {}) => widgetType === "table");
     return tableWidgets?.find(t=>t.dependencies?.zoomLoader) ? true : false;
 };
+
+/**
+ * Get if the selected view can be edited
+ * Checks if the selected view have existing dashboard linked to it
+ */
+export const canEditLayoutView = createSelector(
+    getFloatingWidgetsLayout,
+    getSelectedLayoutId,
+    (layouts = [], selectedLayoutId) => {
+        const layout = layouts?.find(l => l.id === selectedLayoutId);
+        if (layout && layout.dashboard) return false;
+        return true;
+    }
+);
diff --git a/web/client/themes/default/less/dashboard.less b/web/client/themes/default/less/dashboard.less
index 5f051005d5..ea2b3f7992 100644
--- a/web/client/themes/default/less/dashboard.less
+++ b/web/client/themes/default/less/dashboard.less
@@ -74,8 +74,17 @@
 }
 
 
-.dashboard-color-picker {
-    width: 100px;
+
+.form-group-inline-content {
+    label {
+        width: 50%;
+    }
+    input {
+        width: 30px;
+    }
+    .dashboard-color-picker {
+        width: 100px;
+    }
 }
 
 .view-switcher-container {
@@ -108,4 +117,8 @@
     .view-switcher-tabs::-webkit-scrollbar {
         display: none;
     }
+}
+
+.fade.in.modal.configure-view-dialog-container {
+    z-index: 3000;
 }
\ No newline at end of file
diff --git a/web/client/translations/data.ca-ES.json b/web/client/translations/data.ca-ES.json
index b728a065e5..6eb2d88ea5 100644
--- a/web/client/translations/data.ca-ES.json
+++ b/web/client/translations/data.ca-ES.json
@@ -2390,7 +2390,8 @@
         },
         "resourceAlreadyExists": "Ja existeix un recurs amb aquest nom",
         "forbidden": "Es va produir un error inesperat (403 prohibit). Poseu -vos en contacte amb l'administrador",
-        "forbidden405": "Es va produir un error inesperat (405 prohibits). Poseu -vos en contacte amb l'administrador"
+        "forbidden405": "Es va produir un error inesperat (405 prohibits). Poseu -vos en contacte amb l'administrador",
+        "multipleDashboardError": "Aquest tauler conté diverses vistes, cosa que no és compatible. Si us plau, seleccioneu una sola vista per continuar."
       },
       "editor": {
         "save": "Deseu el tauler",
diff --git a/web/client/translations/data.da-DK.json b/web/client/translations/data.da-DK.json
index 9c042ac030..14e257bc88 100644
--- a/web/client/translations/data.da-DK.json
+++ b/web/client/translations/data.da-DK.json
@@ -2149,7 +2149,8 @@
         },
         "resourceAlreadyExists": "A resource with this name already exists",
         "forbidden": "An unexpected error occured (403 Forbidden). Please contact the Administrator",
-        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator"
+        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator",
+        "multipleDashboardError": "This dashboard contains multiple views, which is not supported. Please select a single view to continue."
       },
       "editor": {
         "save": "Save the dashboard",
diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json
index 1df82c7884..697585aefd 100644
--- a/web/client/translations/data.de-DE.json
+++ b/web/client/translations/data.de-DE.json
@@ -2467,7 +2467,8 @@
         },
         "resourceAlreadyExists": "Eine Ressource mit diesem Namen existiert bereits",
         "forbidden": "Ein unerwarteter Fehler ist aufgetreten (403 Verboten). Bitte wenden Sie sich an den Administrator",
-        "forbidden405": "Ein unerwarteter Fehler ist aufgetreten (405 Verboten). Bitte wenden Sie sich an den Administrator"
+        "forbidden405": "Ein unerwarteter Fehler ist aufgetreten (405 Verboten). Bitte wenden Sie sich an den Administrator",
+        "multipleDashboardError": "Dieses Dashboard enthält mehrere Ansichten, was nicht unterstützt wird. Bitte wähle eine einzelne Ansicht aus, um fortzufahren."
       },
       "editor": {
         "save": "Speichern Sie das Dashboard",
diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json
index adde3eec53..799acdd786 100644
--- a/web/client/translations/data.en-US.json
+++ b/web/client/translations/data.en-US.json
@@ -2428,7 +2428,8 @@
         },
         "resourceAlreadyExists": "A resource with this name already exists",
         "forbidden": "An unexpected error occured (403 Forbidden). Please contact the Administrator",
-        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator"
+        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator",
+        "multipleDashboardError": "This dashboard contains multiple views, which is not supported. Please select a single view to continue."
       },
       "editor": {
         "save": "Save the dashboard",
diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json
index cb9f5c5e7d..acef70056f 100644
--- a/web/client/translations/data.es-ES.json
+++ b/web/client/translations/data.es-ES.json
@@ -2428,7 +2428,8 @@
         },
         "resourceAlreadyExists": "Ya existe un recurso con este nombre",
         "forbidden": "Ocurrió un error inesperado (403 Prohibido). Por favor contacte al administrador",
-        "forbidden405": "Ocurrió un error inesperado (405 Prohibido). Por favor contacte al administrador"
+        "forbidden405": "Ocurrió un error inesperado (405 Prohibido). Por favor contacte al administrador",
+        "multipleDashboardError": "Este panel contiene varias vistas, lo cual no es compatible. Por favor, selecciona una sola vista para continuar."
       },
       "editor": {
         "save": "Guardar el panel de control",
diff --git a/web/client/translations/data.fi-FI.json b/web/client/translations/data.fi-FI.json
index b4cb56573c..2b8440c48e 100644
--- a/web/client/translations/data.fi-FI.json
+++ b/web/client/translations/data.fi-FI.json
@@ -1688,7 +1688,8 @@
         },
         "resourceAlreadyExists": "Tämän nimen resurssi on jo olemassa",
         "forbidden": "Odottamaton virhe (403 kielletty). Ota yhteyttä järjestelmänvalvojaan",
-        "forbidden405": "Odottamaton virhe (405 kielletty). Ota yhteyttä järjestelmänvalvojaan"
+        "forbidden405": "Odottamaton virhe (405 kielletty). Ota yhteyttä järjestelmänvalvojaan",
+        "multipleDashboardError": "Tämä hallintapaneeli sisältää useita näkymiä, mikä ei ole tuettu. Valitse yksi näkymä jatkaaksesi."
       },
       "editor": {
         "save": "Tallenna hallintapaneeli",
diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json
index 46383efd5d..2759bb7f30 100644
--- a/web/client/translations/data.fr-FR.json
+++ b/web/client/translations/data.fr-FR.json
@@ -2429,7 +2429,8 @@
         },
         "resourceAlreadyExists": "Une ressource avec ce nom existe déjà",
         "forbidden": "Une erreur inattendue s'est produite (403 interdit). Veuillez contacter l'administrateur",
-        "forbidden405": "Une erreur inattendue s'est produite (405 interdit). Veuillez contacter l'administrateur"
+        "forbidden405": "Une erreur inattendue s'est produite (405 interdit). Veuillez contacter l'administrateur",
+        "multipleDashboardError": "Ce tableau de bord contient plusieurs vues, ce qui n’est pas pris en charge. Veuillez sélectionner une seule vue pour continuer."
       },
       "editor": {
         "save": "Sauvegarder le tableau de bord",
diff --git a/web/client/translations/data.hr-HR.json b/web/client/translations/data.hr-HR.json
index 3b7487768e..eaa512c725 100644
--- a/web/client/translations/data.hr-HR.json
+++ b/web/client/translations/data.hr-HR.json
@@ -1659,7 +1659,8 @@
         },
         "resourceAlreadyExists": "Resurs sa ovim imenom već postoji",
         "forbidden": "An unexpected error occured (403 Forbidden). Please contact the Administrator",
-        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator"
+        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator",
+        "multipleDashboardError": "Ova nadzorna ploča sadrži više prikaza, što nije podržano. Odaberite jedan prikaz za nastavak."
       },
       "editor": {
         "save": "Spremi kontrolnu ploču",
diff --git a/web/client/translations/data.is-IS.json b/web/client/translations/data.is-IS.json
index cf7830065f..fc0d3b134a 100644
--- a/web/client/translations/data.is-IS.json
+++ b/web/client/translations/data.is-IS.json
@@ -2182,7 +2182,8 @@
         },
         "resourceAlreadyExists": "A resource with this name already exists",
         "forbidden": "An unexpected error occured (403 Forbidden). Please contact the Administrator",
-        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator"
+        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator",
+        "multipleDashboardError": "This dashboard contains multiple views, which is not supported. Please select a single view to continue."
       },
       "editor": {
         "save": "Save the dashboard",
diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json
index 0bbf49fda9..980bd42f3c 100644
--- a/web/client/translations/data.it-IT.json
+++ b/web/client/translations/data.it-IT.json
@@ -2430,7 +2430,8 @@
         },
         "resourceAlreadyExists": "Una risorsa con questo nome esiste già",
         "forbidden": "Si è verificato un errore imprevisto (403 vietato). Si prega di contattare l'amministratore",
-        "forbidden405": "Si è verificato un errore imprevisto (405 vietato). Si prega di contattare l'amministratore"
+        "forbidden405": "Si è verificato un errore imprevisto (405 vietato). Si prega di contattare l'amministratore",
+        "multipleDashboardError": "Questa dashboard contiene più viste, il che non è supportato. Seleziona una sola vista per continuare."
       },
       "editor": {
         "save": "Salva la dashboard",
diff --git a/web/client/translations/data.nl-NL.json b/web/client/translations/data.nl-NL.json
index fd8a22a82c..20b2a572d6 100644
--- a/web/client/translations/data.nl-NL.json
+++ b/web/client/translations/data.nl-NL.json
@@ -2405,7 +2405,8 @@
         },
         "resourceAlreadyExists": "Er bestaat al een resource met deze naam",
         "forbidden": "Er is een onverwachte fout opgetreden (403 verboden). Neem contact op met de beheerder",
-        "forbidden405": "Er is een onverwachte fout opgetreden (405 verboden). Neem contact op met de beheerder"
+        "forbidden405": "Er is een onverwachte fout opgetreden (405 verboden). Neem contact op met de beheerder",
+        "multipleDashboardError": "Dit dashboard bevat meerdere weergaven, wat niet wordt ondersteund. Selecteer één weergave om door te gaan."
       },
       "editor": {
         "save": "Sla het dashboard op",
diff --git a/web/client/translations/data.pt-PT.json b/web/client/translations/data.pt-PT.json
index b029cdf14d..9d4f1969dd 100644
--- a/web/client/translations/data.pt-PT.json
+++ b/web/client/translations/data.pt-PT.json
@@ -1626,7 +1626,8 @@
         },
         "resourceAlreadyExists": "A resource with this name already exists",
         "forbidden": "An unexpected error occured (403 Forbidden). Please contact the Administrator",
-        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator"
+        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator",
+        "multipleDashboardError": "This dashboard contains multiple views, which is not supported. Please select a single view to continue."
       },
       "editor": {
         "save": "Save the dashboard",
diff --git a/web/client/translations/data.sk-SK.json b/web/client/translations/data.sk-SK.json
index c663b516f6..22794f130f 100644
--- a/web/client/translations/data.sk-SK.json
+++ b/web/client/translations/data.sk-SK.json
@@ -1977,7 +1977,8 @@
         },
         "resourceAlreadyExists": "A resource with this name already exists",
         "forbidden": "An unexpected error occured (403 Forbidden). Please contact the Administrator",
-        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator"
+        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator",
+        "multipleDashboardError": "This dashboard contains multiple views, which is not supported. Please select a single view to continue."
       },
       "editor": {
         "save": "Save the dashboard",
diff --git a/web/client/translations/data.sv-SE.json b/web/client/translations/data.sv-SE.json
index 1ef63c9ddf..d47fad8faf 100644
--- a/web/client/translations/data.sv-SE.json
+++ b/web/client/translations/data.sv-SE.json
@@ -2401,7 +2401,8 @@
         },
         "resourceAlreadyExists": "En resurs med detta namn finns redan",
         "forbidden": "Ett oväntat fel uppstod (403 förbjudet). Kontakta administratören",
-        "forbidden405": "Ett oväntat fel uppstod (405 förbjudet). Kontakta administratören"
+        "forbidden405": "Ett oväntat fel uppstod (405 förbjudet). Kontakta administratören",
+        "multipleDashboardError": "Denna instrumentpanel innehåller flera vyer, vilket inte stöds. Välj en enda vy för att fortsätta."
       },
       "editor": {
         "save": "Spara Verktygspanelen",
diff --git a/web/client/translations/data.vi-VN.json b/web/client/translations/data.vi-VN.json
index 4fe57d6edf..5a2e9a084a 100644
--- a/web/client/translations/data.vi-VN.json
+++ b/web/client/translations/data.vi-VN.json
@@ -232,7 +232,8 @@
         },
         "resourceAlreadyExists": "Một tài nguyên với tên này đã tồn tại",
         "forbidden": "An unexpected error occured (403 Forbidden). Please contact the Administrator",
-        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator"
+        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator",
+        "multipleDashboardError": "Bảng điều khiển này chứa nhiều chế độ xem, điều này không được hỗ trợ. Vui lòng chọn một chế độ xem duy nhất để tiếp tục."
       },
       "loadingSpinner": "Đang tải Bảng điều khiển",
       "saveDialog": {
diff --git a/web/client/translations/data.zh-ZH.json b/web/client/translations/data.zh-ZH.json
index 59abadb6fa..dc8a144168 100644
--- a/web/client/translations/data.zh-ZH.json
+++ b/web/client/translations/data.zh-ZH.json
@@ -1601,7 +1601,8 @@
         },
         "resourceAlreadyExists": "A resource with this name already exists",
         "forbidden": "An unexpected error occured (403 Forbidden). Please contact the Administrator",
-        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator"
+        "forbidden405": "An unexpected error occured (405 Forbidden). Please contact the Administrator",
+        "multipleDashboardError": "This dashboard contains multiple views, which is not supported. Please select a single view to continue."
       },
       "editor": {
         "save": "Save the dashboard",
diff --git a/web/client/utils/GeostoreUtils.js b/web/client/utils/GeostoreUtils.js
index 31a152496e..35320fe0ba 100644
--- a/web/client/utils/GeostoreUtils.js
+++ b/web/client/utils/GeostoreUtils.js
@@ -296,23 +296,53 @@ export const compareDashboardDataChanges = (currentDashboardData, initialDashboa
         return false;
     }
 
-
     const originalWidgets = initialDashboardData?.widgets || [];
-    const originalLayouts = initialDashboardData?.layouts || {};
+    const originalLayouts = initialDashboardData?.layouts || [];
     const widgets = currentDashboardData?.widgets || [];
-    const layout = currentDashboardData?.layouts || {};
+    const layouts = currentDashboardData?.layouts || [];
+
+    // Layouts that have a dashboard link
+    const linkedLayoutIds = layouts.filter(l => !!l.dashboard).map(l => l.id);
+    // Layouts without dashboard link OR with filtered fields (if is linked view)
+    const updatedLayouts = layouts.map(l => {
+        if (l.dashboard) {
+            // Keep only specific fields when dashboard is present
+            const { id, name, color, dashboard, linkExistingDashboard } = l;
+            return { id, name, color, dashboard, linkExistingDashboard };
+        }
+        return { ...l };
+    });
+    // Widgets without dashboard-linked layouts
+    const filteredWidgets = (Array.isArray(widgets) ? widgets : Object.values(widgets))
+        .filter(w => !linkedLayoutIds.includes(w.layoutId));
 
-    const layoutChanged = recursiveIsChanged(originalLayouts, layout || {});
+    const layoutChanged = originalLayouts.length !== updatedLayouts.length;
     if (layoutChanged) {
         return true;
     }
 
-    const widgetLengthChanged = originalWidgets.length !== (widgets?.length || 0);
+    const widgetLengthChanged = originalWidgets.length !== (filteredWidgets?.length || 0);
     if (widgetLengthChanged) {
         return true;
     }
 
-    return some(widgets || [], widget => {
+    const hasLayoutChanged = some(updatedLayouts || [], layout => {
+        const originalLayout = originalLayouts.find(l => l.id === layout.id);
+        if (!originalLayout) {
+            return true;
+        }
+        const layoutDataChanged = recursiveIsChanged(layout, originalLayout);
+        if (layoutDataChanged) {
+            return true;
+        }
+        return false;
+    });
+
+    if (hasLayoutChanged) {
+        return true;
+    }
+
+    return some(filteredWidgets || [], widget => {
         const originalWidget = originalWidgets.find(w => w.id === widget.id);
 
         if (!originalWidget) {
diff --git a/web/client/utils/WidgetsUtils.js b/web/client/utils/WidgetsUtils.js
index 12186634c5..a494fe13d2 100644
--- a/web/client/utils/WidgetsUtils.js
+++ b/web/client/utils/WidgetsUtils.js
@@ -1223,3 +1223,45 @@ export const getDefaultNullPlaceholderForDataType = (type) => {
         return "NULL";
     }
 };
+
+/**
+ * Returns the appropriate error message ID based on HTTP status code.
+ * @param {Object} error - The error object containing a status code.
+ * @returns {string} The corresponding message ID for the given error.
+ */
+export function getErrorMessageId(error) {
+    if (error.status === 403) {
+        return "dashboard.errors.loading.dashboardNotAccessible";
+    } else if (error.status === 404) {
+        return "dashboard.errors.loading.dashboardDoesNotExist";
+    }
+    return "dashboard.errors.loading.title";
+}
+
+/**
+ * Updates all widget reference strings inside a dependenciesMap object by prefixing
+ * the widget ID with the provided uniqueId.
+ * @param {Object} [dependenciesMap={}] - The object containing dependency references to update.
+ * @param {string} uniqueId - The layout ID used to prefix each widget ID reference.
+ * @returns {Object} A new dependenciesMap object with all widget references updated.
+ * @example
+ * Input:  widgets[widgetId].filter
+ * Output: widgets[uniqueId-widgetId].filter
+ */
+export function updateDependenciesMap(dependenciesMap = {}, uniqueId) {
+    const updated = {};
+    const pattern = /widgets\[([^\]]+)\]/g;
+
+    for (const [key, value] of Object.entries(dependenciesMap)) {
+        if (typeof value === 'string') {
+            updated[key] = value.replace(pattern, (_, widgetId) => `widgets[${uniqueId}-${widgetId}]`);
+        } else if (typeof value === 'object' && value !== null) {
+            // Handle nested objects if present
+            updated[key] = updateDependenciesMap(value, uniqueId);
+        } else {
+            updated[key] = value;
+        }
+    }
+
+    return updated;
+}
diff --git a/web/client/utils/__tests__/WidgetsUtils-test.js b/web/client/utils/__tests__/WidgetsUtils-test.js
index 9ec9890bec..1265f1f6dc 100644
--- a/web/client/utils/__tests__/WidgetsUtils-test.js
+++ b/web/client/utils/__tests__/WidgetsUtils-test.js
@@ -30,7 +30,9 @@ import {
     addCurrentTimeShapes,
     getNextAvailableName,
     updateDependenciesForMultiViewCompatibility,
-    getDefaultNullPlaceholderForDataType
+    getDefaultNullPlaceholderForDataType,
+    getErrorMessageId,
+    updateDependenciesMap
 } from '../WidgetsUtils';
 import * as simpleStatistics from 'simple-statistics';
 import { createClassifyGeoJSONSync } from '../../api/GeoJSONClassification';
@@ -922,4 +924,39 @@ describe('Test WidgetsUtils', () => {
             expect(dateTimeResult).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z$/);
         });
     });
+
+    // Tests for getErrorMessageId
+    describe('getErrorMessageId', () => {
+        it('should return "dashboardNotAccessible" for 403 status', () => {
+            const error = { status: 403 };
+            const result = getErrorMessageId(error);
+            expect(result).toBe("dashboard.errors.loading.dashboardNotAccessible");
+        });
+
+        it('should return "dashboardDoesNotExist" for 404 status', () => {
+            const error = { status: 404 };
+            const result = getErrorMessageId(error);
+            expect(result).toBe("dashboard.errors.loading.dashboardDoesNotExist");
+        });
+    });
+
+    // Tests for updateDependenciesMap
+    describe('updateDependenciesMap', () => {
+        it('should update simple widget references in strings', () => {
+            const deps = { center: 'widgets[widget1].center' };
+            const result = updateDependenciesMap(deps, 'layout1');
+            expect(result.center).toBe('widgets[layout1-widget1].center');
+        });
+
+        it('should update nested objects correctly', () => {
+            const deps = {
+                map: {
+                    center: 'widgets[widget1].maps[map1].center'
+                }
+            };
+            const result = updateDependenciesMap(deps, 'layout2');
+            expect(result.map.center).toBe('widgets[layout2-widget1].maps[map1].center');
+        });
+    });
+
 });

From ddd72132f2cf77da6d11923097629d4ca956fc8e Mon Sep 17 00:00:00 2001
From: Sovas Tiwari <subashtiwari1010@gmail.com>
Date: Fri, 17 Oct 2025 10:01:42 +0100
Subject: [PATCH 2/2] Fix the test cases for the dashboard

---
 .../components/dashboard/ConfigureView.jsx    | 49 +++++++++-------
 web/client/components/dashboard/Dashboard.jsx |  2 +-
 .../dashboard/WidgetViewWrapper.jsx           | 20 ++++++-
 .../dashboard/__tests__/Dashboard-test.jsx    | 12 ++--
 web/client/plugins/Dashboard.jsx              | 10 +++-
 .../selectors/__tests__/dashboardsave-test.js | 56 +++++++++----------
 web/client/themes/default/less/dashboard.less |  5 ++
 web/client/translations/data.ca-ES.json       |  3 +-
 web/client/translations/data.de-DE.json       |  3 +-
 web/client/translations/data.en-US.json       |  3 +-
 web/client/translations/data.es-ES.json       |  3 +-
 web/client/translations/data.fr-FR.json       |  3 +-
 web/client/translations/data.it-IT.json       |  3 +-
 web/client/translations/data.nl-NL.json       |  3 +-
 web/client/translations/data.sv-SE.json       |  3 +-
 .../utils/__tests__/GeostoreUtils-test.js     |  8 +--
 16 files changed, 116 insertions(+), 70 deletions(-)

diff --git a/web/client/components/dashboard/ConfigureView.jsx b/web/client/components/dashboard/ConfigureView.jsx
index 6b20e4baec..5f8919a6ca 100644
--- a/web/client/components/dashboard/ConfigureView.jsx
+++ b/web/client/components/dashboard/ConfigureView.jsx
@@ -4,12 +4,12 @@ import { Button, ControlLabel, FormControl, FormGroup, Glyphicon, InputGroup } f
 import Message from '../I18N/Message';
 import ColorSelector from '../style/ColorSelector';
 import Select from 'react-select';
-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-import { userSelector } from '../../selectors/security';
-import { getMonitoredStateSelector } from '../../plugins/ResourcesCatalog/selectors/resources';
 import Portal from '../misc/Portal';
 import { getCatalogResources } from '../../api/persistence';
+import withTooltip from '../misc/enhancers/tooltip';
+import FlexBox from '../layout/FlexBox';
+
+const GlyphiconIndicator = withTooltip(Glyphicon);
 
 const ConfigureView = ({ active, onToggle, data, onSave, user, monitoredState }) => {
     const [setting, setSetting] = useState({ name: null, color: null });
@@ -20,7 +20,7 @@ const ConfigureView = ({ active, onToggle, data, onSave, user, monitoredState })
     }, [data]);
 
     useEffect(() => {
-        if (!setting?.linkExistingDashboard) return;
+        if (!active || !user || !monitoredState) return;
         const args = [{ params: { pageSize: 9999999 }, monitoredState }, { user }, ["DASHBOARD"]];
         const catalogResources = getCatalogResources(...args).toPromise();
         catalogResources.then(res => {
@@ -30,7 +30,11 @@ const ConfigureView = ({ active, onToggle, data, onSave, user, monitoredState })
             }));
             setDashboardOptions(options);
         });
-    }, [setting?.linkExistingDashboard]);
+    }, [active, user, monitoredState]);
+
+    const canAddLayout = !data.dashboard
+        ? (data.layoutsData?.md?.length === 0 && data.layoutsData?.xxs?.length === 0)
+        : true;
 
     return active && (
         <Portal>
@@ -74,14 +78,24 @@ const ConfigureView = ({ active, onToggle, data, onSave, user, monitoredState })
                     </FormGroup>
                     <FormGroup className="ms-flex-box _flex _flex-gap-sm _flex-center-v form-group-inline-content">
                         <ControlLabel>Link existing dashboard</ControlLabel>
-                        <FormControl
-                            type="checkbox"
-                            checked={setting.linkExistingDashboard}
-                            onChange={event => {
-                                const { checked } = event.target || {};
-                                setSetting(prev => ({ ...prev, linkExistingDashboard: checked }));
-                            }}
-                        />
+                        <FlexBox centerChildrenVertically gap="sm">
+                            <FormControl
+                                key={setting.linkExistingDashboard}
+                                type="checkbox"
+                                disabled={!canAddLayout}
+                                checked={setting.linkExistingDashboard}
+                                onChange={event => {
+                                    const { checked } = event.target || {};
+                                    setSetting(prev => ({ ...prev, linkExistingDashboard: checked }));
+                                }}
+                            />
+                            {!canAddLayout && (
+                                <GlyphiconIndicator
+                                    glyph="info-sign"
+                                    tooltipId="dashboard.view.cannotAddExistingDashboard"
+                                />
+                            )}
+                        </FlexBox>
                     </FormGroup>
                     {setting.linkExistingDashboard && (
                         <FormGroup>
@@ -110,9 +124,4 @@ const ConfigureView = ({ active, onToggle, data, onSave, user, monitoredState })
     );
 };
 
-export default connect(
-    createStructuredSelector({
-        user: userSelector,
-        monitoredState: getMonitoredStateSelector
-    })
-)(ConfigureView);
+export default ConfigureView;
diff --git a/web/client/components/dashboard/Dashboard.jsx b/web/client/components/dashboard/Dashboard.jsx
index c7027e6bf4..c73897191a 100644
--- a/web/client/components/dashboard/Dashboard.jsx
+++ b/web/client/components/dashboard/Dashboard.jsx
@@ -61,7 +61,7 @@ export default compose(
     }),
     withStateHandlers(
         ({ pathname }) => ({
-            active: isNaN(pathname.substr(-1))
+            active: isNaN(pathname?.substr(-1))
         }),
         {
             setActive: () => (active) => ({ active })
diff --git a/web/client/components/dashboard/WidgetViewWrapper.jsx b/web/client/components/dashboard/WidgetViewWrapper.jsx
index fa56836e12..c459a277a4 100644
--- a/web/client/components/dashboard/WidgetViewWrapper.jsx
+++ b/web/client/components/dashboard/WidgetViewWrapper.jsx
@@ -7,7 +7,19 @@ import FlexBox from '../layout/FlexBox';
 import Layouts from './Layouts';
 
 const WidgetViewWrapper = props => {
-    const { layouts = [], onLayoutViewReplace, selectedLayoutId, onLayoutViewSelected, active, setActive, widgets = [], onWidgetsReplace, canEdit } = props;
+    const {
+        layouts = [],
+        onLayoutViewReplace,
+        selectedLayoutId,
+        onLayoutViewSelected,
+        active,
+        setActive,
+        widgets = [],
+        onWidgetsReplace,
+        user,
+        monitoredState,
+        canEdit
+    } = props;
 
     const getSelectedLayout = () => {
         if (Array.isArray(layouts)) {
@@ -96,7 +108,7 @@ const WidgetViewWrapper = props => {
                     onRemove={handleRemoveLayout}
                     onMove={handleMoveLayout}
                     onConfigure={() => setActive(true)}
-                    canEdit={props.canEdit}
+                    canEdit={canEdit}
                 />
             )}
             {active && (
@@ -104,7 +116,9 @@ const WidgetViewWrapper = props => {
                     active={active}
                     onToggle={handleToggle}
                     onSave={handleSave}
-                    data={{ name, color, linkExistingDashboard, dashboard }}
+                    data={{ name, color, linkExistingDashboard, dashboard, layoutsData }}
+                    user={user}
+                    monitoredState={monitoredState}
                 />
             )}
         </FlexBox>
diff --git a/web/client/components/dashboard/__tests__/Dashboard-test.jsx b/web/client/components/dashboard/__tests__/Dashboard-test.jsx
index 72ca9b92f4..bb8dc3097b 100644
--- a/web/client/components/dashboard/__tests__/Dashboard-test.jsx
+++ b/web/client/components/dashboard/__tests__/Dashboard-test.jsx
@@ -28,6 +28,10 @@ const testWidget = {
     }
 };
 
+const layouts = [
+    {id: '1', name: 'Layout 1', color: null, md: [], xxs: []}
+];
+
 describe('WidgetsView component', () => {
     beforeEach((done) => {
         document.body.innerHTML = '<div id="container"></div>';
@@ -39,13 +43,13 @@ describe('WidgetsView component', () => {
         setTimeout(done);
     });
     it('DashBoard empty', () => {
-        ReactDOM.render(<Dashboard widgets={[]}/>, document.getElementById("container"));
+        ReactDOM.render(<Dashboard widgets={[]} layouts={layouts} />, document.getElementById("container"));
         const container = document.getElementById('container');
         const el = container.querySelector('.widget-card-on-map');
         expect(el).toNotExist();
     });
     it('DashBoard empty', () => {
-        ReactDOM.render(<Dashboard widgets={[testWidget]}/>, document.getElementById("container"));
+        ReactDOM.render(<Dashboard widgets={[testWidget]} layouts={layouts} />, document.getElementById("container"));
         const container = document.getElementById('container');
         const el = container.querySelector('.mapstore-widget-card');
         expect(el).toExist();
@@ -53,7 +57,7 @@ describe('WidgetsView component', () => {
     it('DashBoard with width=460', () => {
         const WIDGET_MOBILE_RIGHT_SPACE = 18;
         const width = 460;
-        let cmp = ReactDOM.render(<Dashboard width={width} widgets={[testWidget]}/>, document.getElementById("container"));
+        let cmp = ReactDOM.render(<Dashboard width={width} widgets={[testWidget]} layouts={layouts} />, document.getElementById("container"));
         expect(cmp).toBeTruthy();
         const innerLayout = ReactTestUtils.findRenderedComponentWithType(cmp, Responsive);
         expect(innerLayout).toExist();
@@ -61,7 +65,7 @@ describe('WidgetsView component', () => {
     });
     it('DashBoard with width=640', () => {
         const width = 640;
-        const cmp = ReactDOM.render(<Dashboard width={width} widgets={[testWidget]}/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<Dashboard width={width} widgets={[testWidget]} layouts={layouts} />, document.getElementById("container"));
         expect(cmp).toExist();
         const innerLayout = ReactTestUtils.findRenderedComponentWithType(cmp, Responsive);
         expect(innerLayout).toExist();
diff --git a/web/client/plugins/Dashboard.jsx b/web/client/plugins/Dashboard.jsx
index b1820b1faa..74d7dc9045 100644
--- a/web/client/plugins/Dashboard.jsx
+++ b/web/client/plugins/Dashboard.jsx
@@ -58,6 +58,8 @@ import { createPlugin } from '../utils/PluginsUtils';
 import { canTableWidgetBeDependency } from '../utils/WidgetsUtils';
 import usePluginItems from '../hooks/usePluginItems';
 import { pathnameSelector } from '../selectors/router';
+import { userSelector } from '../selectors/security';
+import { getMonitoredStateSelector } from './ResourcesCatalog/selectors/resources';
 
 const WidgetsView = compose(
     connect(
@@ -81,8 +83,10 @@ const WidgetsView = compose(
             getSelectedLayoutId,
             buttonCanEdit,
             pathnameSelector,
+            userSelector,
+            getMonitoredStateSelector,
             (resource, widgets, layouts, dependencies, selectionActive, editingWidget, groups, showGroupColor, loading, isMobile, currentLocaleLanguage, isLocalizedLayerStylesEnabled,
-                env, maximized, currentLocale, isDashboardOpened, selectedLayoutId, edit, pathname) => ({
+                env, maximized, currentLocale, isDashboardOpened, selectedLayoutId, edit, pathname, user, monitoredState) => ({
                 resource,
                 loading,
                 canEdit: edit,
@@ -106,7 +110,9 @@ const WidgetsView = compose(
                 currentLocale,
                 isDashboardOpened,
                 selectedLayoutId,
-                pathname
+                pathname,
+                user,
+                monitoredState
             })
         ), {
             editWidget,
diff --git a/web/client/selectors/__tests__/dashboardsave-test.js b/web/client/selectors/__tests__/dashboardsave-test.js
index 163bbbf711..89b1809f32 100644
--- a/web/client/selectors/__tests__/dashboardsave-test.js
+++ b/web/client/selectors/__tests__/dashboardsave-test.js
@@ -18,7 +18,7 @@ describe('dashboardsave selectors', () => {
                     canEdit: true
                 },
                 originalData: {
-                    layouts: {
+                    layouts: [{
                         lg: {
                             w: 1,
                             x: 0,
@@ -26,7 +26,7 @@ describe('dashboardsave selectors', () => {
                             h: 1,
                             i: "252bb010-49f7-11e8-9f59-630c9298622e"
                         }
-                    },
+                    }],
                     widgets: [{
                         id: 'widget1',
                         dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -139,7 +139,7 @@ describe('dashboardsave selectors', () => {
             widgets: {
                 containers: {
                     floating: {
-                        layouts: {
+                        layouts: [{
                             lg: {
                                 w: 1,
                                 x: 0,
@@ -147,7 +147,7 @@ describe('dashboardsave selectors', () => {
                                 h: 1,
                                 i: "252bb010-49f7-11e8-9f59-630c9298622e"
                             }
-                        },
+                        }],
                         widgets: [{
                             id: 'widget1',
                             dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -268,7 +268,7 @@ describe('dashboardsave selectors', () => {
                     canEdit: true
                 },
                 originalData: {
-                    layouts: {
+                    layouts: [{
                         lg: {
                             w: 1,
                             x: 0,
@@ -276,7 +276,7 @@ describe('dashboardsave selectors', () => {
                             h: 1,
                             i: "252bb010-49f7-11e8-9f59-630c9298622e"
                         }
-                    },
+                    }],
                     widgets: [{
                         id: 'widget1',
                         dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -389,7 +389,7 @@ describe('dashboardsave selectors', () => {
             widgets: {
                 containers: {
                     floating: {
-                        layouts: {
+                        layouts: [{
                             lg: {
                                 w: 1,
                                 x: 0,
@@ -397,7 +397,7 @@ describe('dashboardsave selectors', () => {
                                 h: 1,
                                 i: "252bb010-49f7-11e8-9f59-630c9298622e"
                             }
-                        },
+                        }],
                         widgets: [{
                             id: 'widget1',
                             dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -524,7 +524,7 @@ describe('dashboardsave selectors', () => {
                     canEdit: true
                 },
                 originalData: {
-                    layouts: {
+                    layouts: [{
                         lg: {
                             w: 1,
                             x: 0,
@@ -532,7 +532,7 @@ describe('dashboardsave selectors', () => {
                             h: 1,
                             i: "252bb010-49f7-11e8-9f59-630c9298622e"
                         }
-                    },
+                    }],
                     widgets: [{
                         id: 'widget1',
                         dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -645,7 +645,7 @@ describe('dashboardsave selectors', () => {
             widgets: {
                 containers: {
                     floating: {
-                        layouts: {
+                        layouts: [{
                             lg: {
                                 w: 1,
                                 x: 0,
@@ -653,7 +653,7 @@ describe('dashboardsave selectors', () => {
                                 h: 1,
                                 i: "252bb010-49f7-11e8-9f59-630c9298622e"
                             }
-                        },
+                        }],
                         widgets: [{
                             id: 'widget1',
                             dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -755,7 +755,7 @@ describe('dashboardsave selectors', () => {
                     canEdit: true
                 },
                 originalData: {
-                    layouts: {
+                    layouts: [{
                         lg: {
                             w: 1,
                             x: 0,
@@ -763,7 +763,7 @@ describe('dashboardsave selectors', () => {
                             h: 1,
                             i: "252bb010-49f7-11e8-9f59-630c9298622e"
                         }
-                    },
+                    }],
                     widgets: [{
                         id: 'widget1',
                         dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -876,7 +876,7 @@ describe('dashboardsave selectors', () => {
             widgets: {
                 containers: {
                     floating: {
-                        layouts: {
+                        layouts: [{
                             lg: {
                                 w: 1,
                                 x: 0,
@@ -884,7 +884,7 @@ describe('dashboardsave selectors', () => {
                                 h: 1,
                                 i: "252bb010-49f7-11e8-9f59-630c9298622e"
                             }
-                        },
+                        }],
                         widgets: [{
                             id: 'widget1',
                             dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -1005,7 +1005,7 @@ describe('dashboardsave selectors', () => {
                     canEdit: true
                 },
                 originalData: {
-                    layouts: {
+                    layouts: [{
                         lg: {
                             w: 1,
                             x: 0,
@@ -1013,7 +1013,7 @@ describe('dashboardsave selectors', () => {
                             h: 1,
                             i: "252bb010-49f7-11e8-9f59-630c9298622e"
                         }
-                    },
+                    }],
                     widgets: [{
                         id: 'widget1',
                         dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -1126,7 +1126,7 @@ describe('dashboardsave selectors', () => {
             widgets: {
                 containers: {
                     floating: {
-                        layouts: {
+                        layouts: [{
                             lg: {
                                 w: 1,
                                 x: 0,
@@ -1134,7 +1134,7 @@ describe('dashboardsave selectors', () => {
                                 h: 1,
                                 i: "252bb010-49f7-11e8-9f59-630c9298622e"
                             }
-                        },
+                        }],
                         widgets: [{
                             id: 'widget1',
                             dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -1255,7 +1255,7 @@ describe('dashboardsave selectors', () => {
                     canEdit: true
                 },
                 originalData: {
-                    layouts: {
+                    layouts: [{
                         lg: {
                             w: 1,
                             x: 0,
@@ -1263,7 +1263,7 @@ describe('dashboardsave selectors', () => {
                             h: 1,
                             i: "252bb010-49f7-11e8-9f59-630c9298622e"
                         }
-                    },
+                    }],
                     widgets: [{
                         id: 'widget1',
                         dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -1376,7 +1376,7 @@ describe('dashboardsave selectors', () => {
             widgets: {
                 containers: {
                     floating: {
-                        layouts: {
+                        layouts: [{
                             lg: {
                                 w: 1,
                                 x: 0,
@@ -1384,7 +1384,7 @@ describe('dashboardsave selectors', () => {
                                 h: 1,
                                 i: "252bb010-49f7-11e8-9f59-630c9298622e"
                             }
-                        },
+                        }],
                         widgets: [{
                             id: 'widget1',
                             dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -1505,7 +1505,7 @@ describe('dashboardsave selectors', () => {
                     canEdit: true
                 },
                 originalData: {
-                    layouts: {
+                    layouts: [{
                         lg: {
                             w: 1,
                             x: 0,
@@ -1513,7 +1513,7 @@ describe('dashboardsave selectors', () => {
                             h: 1,
                             i: "252bb010-49f7-11e8-9f59-630c9298622e"
                         }
-                    },
+                    }],
                     widgets: [{
                         id: 'widget1',
                         dataGrid: {y: 0, x: 0, w: 1, h: 1},
@@ -1626,7 +1626,7 @@ describe('dashboardsave selectors', () => {
             widgets: {
                 containers: {
                     floating: {
-                        layouts: {
+                        layouts: [{
                             lg: {
                                 w: 1,
                                 x: 0,
@@ -1634,7 +1634,7 @@ describe('dashboardsave selectors', () => {
                                 h: 1,
                                 i: "252bb010-49f7-11e8-9f59-630c9298622e"
                             }
-                        },
+                        }],
                         widgets: [{
                             id: 'widget1',
                             dataGrid: {y: 0, x: 0, w: 1, h: 1},
diff --git a/web/client/themes/default/less/dashboard.less b/web/client/themes/default/less/dashboard.less
index ea2b3f7992..caa9d1665a 100644
--- a/web/client/themes/default/less/dashboard.less
+++ b/web/client/themes/default/less/dashboard.less
@@ -28,6 +28,11 @@
             }
         }
     }
+    .form-group-inline-content {
+        .glyphicon-info-sign {
+            .color-var(@theme-vars[danger]);
+        }
+    }
 }
 
 // **************
diff --git a/web/client/translations/data.ca-ES.json b/web/client/translations/data.ca-ES.json
index 6eb2d88ea5..8f183771c2 100644
--- a/web/client/translations/data.ca-ES.json
+++ b/web/client/translations/data.ca-ES.json
@@ -2409,7 +2409,8 @@
         "removeConfirmTitle": "N'estàs segur?",
         "removeConfirmContent": "Vols eliminar aquesta vista del tauler?",
         "name": "Nom",
-        "color": "Color"
+        "color": "Color",
+        "cannotAddExistingDashboard": "No podeu afegir una disposició existent a la vista perquè ja en té."
       }
     },
     "dashboardEmbedded": {
diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json
index 697585aefd..5763d71ca3 100644
--- a/web/client/translations/data.de-DE.json
+++ b/web/client/translations/data.de-DE.json
@@ -2486,7 +2486,8 @@
         "removeConfirmTitle": "Bist du sicher?",
         "removeConfirmContent": "Möchtest du diese Ansicht vom Dashboard entfernen?",
         "name": "Name",
-        "color": "Farbe"
+        "color": "Farbe",
+        "cannotAddExistingDashboard": "Sie können kein vorhandenes Layout zur Ansicht hinzufügen, da sie bereits Layouts enthält."
       }
     },
     "dashboardEmbedded": {
diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json
index 799acdd786..9ee4c47894 100644
--- a/web/client/translations/data.en-US.json
+++ b/web/client/translations/data.en-US.json
@@ -2447,7 +2447,8 @@
         "removeConfirmTitle": "Are you sure?",
         "removeConfirmContent": "Do you want to remove this view from the dasboard?",
         "name": "Name",
-        "color": "Color"
+        "color": "Color",
+        "cannotAddExistingDashboard": "You cannot add existing layout to the view as it already has layouts."
       }
     },
     "dashboardEmbedded": {
diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json
index acef70056f..4aef6bbdad 100644
--- a/web/client/translations/data.es-ES.json
+++ b/web/client/translations/data.es-ES.json
@@ -2447,7 +2447,8 @@
         "removeConfirmTitle": "¿Estás seguro?",
         "removeConfirmContent": "¿Deseas eliminar esta vista del panel?",
         "name": "Nombre",
-        "color": "Color"
+        "color": "Color",
+        "cannotAddExistingDashboard": "No puedes añadir un diseño existente a la vista porque ya tiene diseños."
       }
     },
     "dashboardEmbedded": {
diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json
index 2759bb7f30..5323db57ba 100644
--- a/web/client/translations/data.fr-FR.json
+++ b/web/client/translations/data.fr-FR.json
@@ -2448,7 +2448,8 @@
         "removeConfirmTitle": "Êtes-vous sûr ?",
         "removeConfirmContent": "Voulez-vous supprimer cette vue du tableau de bord ?",
         "name": "Nom",
-        "color": "Couleur"
+        "color": "Couleur",
+        "cannotAddExistingDashboard": "Vous ne pouvez pas ajouter une mise en page existante à la vue car elle en possède déjà."
       }
     },
     "dashboardEmbedded": {
diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json
index 980bd42f3c..d597552ca8 100644
--- a/web/client/translations/data.it-IT.json
+++ b/web/client/translations/data.it-IT.json
@@ -2449,7 +2449,8 @@
         "removeConfirmTitle": "Sei sicuro?",
         "removeConfirmContent": "Vuoi rimuovere questa vista dal cruscotto?",
         "name": "Nome",
-        "color": "Colore"
+        "color": "Colore",
+        "cannotAddExistingDashboard": "Non puoi aggiungere un layout esistente alla vista perché contiene già dei layout."
       }
     },
     "dashboardEmbedded": {
diff --git a/web/client/translations/data.nl-NL.json b/web/client/translations/data.nl-NL.json
index 20b2a572d6..b1d67a4b3a 100644
--- a/web/client/translations/data.nl-NL.json
+++ b/web/client/translations/data.nl-NL.json
@@ -2424,7 +2424,8 @@
         "removeConfirmTitle": "Weet je het zeker?",
         "removeConfirmContent": "Wil je deze weergave van het dashboard verwijderen?",
         "name": "Naam",
-        "color": "Kleur"
+        "color": "Kleur",
+        "cannotAddExistingDashboard": "Je kunt geen bestaand lay-out toevoegen aan de weergave omdat deze al lay-outs heeft."
       }
     },
     "dashboardEmbedded": {
diff --git a/web/client/translations/data.sv-SE.json b/web/client/translations/data.sv-SE.json
index d47fad8faf..7238163035 100644
--- a/web/client/translations/data.sv-SE.json
+++ b/web/client/translations/data.sv-SE.json
@@ -2420,7 +2420,8 @@
         "removeConfirmTitle": "Är du säker?",
         "removeConfirmContent": "Vill du ta bort denna vy från instrumentpanelen?",
         "name": "Namn",
-        "color": "Färg"
+        "color": "Färg",
+        "cannotAddExistingDashboard": "Du kan inte lägga till en befintlig layout i vyn eftersom den redan har layouter."
       }
     },
     "dashboardEmbedded": {
diff --git a/web/client/utils/__tests__/GeostoreUtils-test.js b/web/client/utils/__tests__/GeostoreUtils-test.js
index 71154abec9..0271074d44 100644
--- a/web/client/utils/__tests__/GeostoreUtils-test.js
+++ b/web/client/utils/__tests__/GeostoreUtils-test.js
@@ -321,11 +321,11 @@ describe('GeostoreUtils', () => {
         it('should detect dashboard data changes', () => {
             const currentDashboardData = {
                 widgets: [{ id: 'widget1', title: 'Widget 1' }],
-                layouts: { md: { widget1: { x: 0, y: 1 } } }
+                layouts: [{ md: { widget1: { x: 0, y: 1 } } }]
             };
             const initialDashboardData = {
                 widgets: [{ id: 'widget2', title: 'Widget 2' }],
-                layouts: { md: { widget1: { x: 0, y: 1 } } }
+                layouts: [{ md: { widget1: { x: 0, y: 1 } } }]
             };
 
             const result = compareDashboardDataChanges(currentDashboardData, initialDashboardData);
@@ -338,11 +338,11 @@ describe('GeostoreUtils', () => {
         it('should return false for no changes', () => {
             const currentDashboardData = {
                 widgets: [{ id: 'widget1', title: 'Widget 1' }],
-                layouts: { md: { widget1: { x: 0, y: 0 } } }
+                layouts: [{ md: { widget1: { x: 0, y: 0 } } }]
             };
             const initialDashboardData = {
                 widgets: [{ id: 'widget1', title: 'Widget 1' }],
-                layouts: { md: { widget1: { x: 0, y: 0 } } }
+                layouts: [{ md: { widget1: { x: 0, y: 0 } } }]
             };
 
             const result = compareDashboardDataChanges(currentDashboardData, initialDashboardData);