@opengeoweb/workspace 13.1.0 → 13.2.1

package/index.esm.js

@@ -9,7 +9,7 @@ import { PROJECTION, getAxiosErrorMessage, isAxiosAuthError, isAxiosError as isA
 import { snackbarTypes, snackbarActions, snackbarListener, snackbarReducer, SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import { isAxiosError } from 'axios';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ThemeWrapper, lightTheme, SharedPresetsMyUser, SharedPresetsOtherUsers, Delete, Preset, PresetWorkspace, PresetTiles, CloudLoading, CloudIdle, Link, LinkOff, SplitVertical, SplitHorizontal, Expand, UnExpand, Close, WebAssetOff, Exclamation } from '@opengeoweb/theme';
+import { ThemeWrapper, lightTheme, SharedPresetsMyUser, SharedPresetsOtherUsers, Delete, Preset, PresetWorkspace, PresetTiles, CloudLoading, CloudIdle, Options, Link, LinkOff, SplitVertical, SplitHorizontal, Expand, UnExpand, Close, WebAssetOff, Exclamation } from '@opengeoweb/theme';
 import { Provider, useDispatch, useSelector, useStore, shallowEqual } from 'react-redux';
 import { useTranslation, I18nextProvider } from 'react-i18next';
 import { AuthenticationProvider, useAuthenticationContext, GEOWEB_ROLE_PRESETS_ADMIN } from '@opengeoweb/authentication';
@@ -20,7 +20,7 @@ import { coreTranslations, CORE_NAMESPACE } from '@opengeoweb/core';
 import { formFieldsTranslations, FORM_FIELDS_NAMESPACE, ReactHookFormTextField, ReactHookFormHiddenInput, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
 import * as React from 'react';
 import React__default, { useCallback, useEffect } from 'react';
-import { LinearProgress, Typography, styled, ListItemIcon, ListItem, ListItemButton, ListItemText, Grid, Box, Menu, ListSubheader, MenuItem, useTheme, List, Checkbox, FormGroup, FormControlLabel, Tabs } from '@mui/material';
+import { LinearProgress, Typography, styled, ListItemIcon, ListItem, ListItemButton, ListItemText, Grid, Box, useTheme, Menu, ListSubheader, MenuItem, List, Checkbox, FormGroup, FormControlLabel, Tabs } from '@mui/material';
 import 'react-mosaic-component/react-mosaic-component.css';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
@@ -112,7 +112,8 @@ var en = {
 	"workspace-viewpreset-success-unshare": "View preset \"{{TITLE}}\" has been successfully unshared",
 	"workspace-loading-indicator-loading": "Loading",
 	"workspace-loading-indicator-idle": "Loaded",
-	"workspace-open-tab": "Open in new tab"
+	"workspace-open-tab": "Open in new tab",
+	"workspace-currently": "Currently"
 };
 var fi = {
 	"workspace-menu": "Workspace menu",
@@ -195,7 +196,8 @@ var fi = {
 	"workspace-viewpreset-success-share": "ei käännetty",
 	"workspace-viewpreset-success-unshare": "ei käännetty",
 	"workspace-loading-indicator-loading": "Ladataan",
-	"workspace-loading-indicator-idle": "Ladattu"
+	"workspace-loading-indicator-idle": "Ladattu",
+	"workspace-currently": "Nykyinen"
 };
 var no = {
 	"workspace-menu": "Arbeidsflater",
@@ -279,7 +281,8 @@ var no = {
 	"workspace-viewpreset-success-share": "Vinduet \"{{TITLE}}\" har blitt delt",
 	"workspace-viewpreset-success-unshare": "Vinduet \"{{TITLE}}\" deles ikke lenger",
 	"workspace-loading-indicator-loading": "Laster inn",
-	"workspace-loading-indicator-idle": "Lastet inn"
+	"workspace-loading-indicator-idle": "Lastet inn",
+	"workspace-currently": "Nåværende"
 };
 var nl = {
 	"workspace-menu": "Workspace menu",
@@ -366,7 +369,8 @@ var nl = {
 	"workspace-viewpreset-success-unshare": "niet vertaald",
 	"workspace-loading-indicator-loading": "Aan het laden",
 	"workspace-loading-indicator-idle": "Klaar met laden",
-	"workspace-open-tab": "Open in nieuw tabblad"
+	"workspace-open-tab": "Open in nieuw tabblad",
+	"workspace-currently": "Huidig"
 };
 var workspaceTranslations = {
 	en: en,
@@ -2079,12 +2083,13 @@ var getViewPresetsStore = function getViewPresetsStore(store) {
   }
   return initialState$2;
 };
+var EMPTY_VIEW_PRESETS = {
+  entities: {},
+  ids: []
+};
 var selectors$2 = viewPresetsAdapter.getSelectors(function (state) {
   var _state$viewPresets;
-  return (_state$viewPresets = state == null ? void 0 : state.viewPresets) != null ? _state$viewPresets : {
-    entities: {},
-    ids: []
-  };
+  return (_state$viewPresets = state == null ? void 0 : state.viewPresets) != null ? _state$viewPresets : EMPTY_VIEW_PRESETS;
 });
 var getViewPresets = selectors$2.selectAll,
   getViewPresetById = selectors$2.selectById;
@@ -6862,1561 +6867,1548 @@ var ViewPresetMenu = function ViewPresetMenu(_ref) {
   });
 };
 
-var workspacePresetOptionId = 'workspace-options-toolbutton';
-var viewPresetOptionId = 'viewpreset-options-toolbutton';
-var WorkspaceOptionsNoMemo = function WorkspaceOptionsNoMemo(_ref) {
-  var title = _ref.title,
-    activeTab = _ref.activeTab,
-    _ref$isDefaultOpen = _ref.isDefaultOpen,
-    isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
-    handleSave = _ref.handleSave,
-    handleSaveAs = _ref.handleSaveAs,
-    handleEdit = _ref.handleEdit,
-    handleDelete = _ref.handleDelete,
-    handleReset = _ref.handleReset,
-    _ref$hasChanges = _ref.hasChanges,
-    hasChanges = _ref$hasChanges === void 0 ? false : _ref$hasChanges,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    panelId = _ref.panelId,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? workspacePresetOptionId : _ref$id;
-  var _useWorkspaceTranslat = useWorkspaceTranslation(),
-    t = _useWorkspaceTranslat.t;
-  var _React$useState = React.useState(null),
-    anchorEl = _React$useState[0],
-    setAnchorEl = _React$useState[1];
-  var isOpen = Boolean(anchorEl);
-  var handleClick = function handleClick(event) {
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-  React.useEffect(function () {
-    if (isDefaultOpen) {
-      setAnchorEl(document.getElementById(id));
-    }
-  }, [isDefaultOpen, id]);
-  var options = [{
-    title: t('workspace-save'),
-    callback: handleSave
-  }, {
-    title: t('workspace-save-as'),
-    callback: handleSaveAs
-  }, {
-    title: t('workspace-edit'),
-    callback: handleEdit
-  }, {
-    title: t('workspace-reset'),
-    callback: handleReset
-  }, {
-    title: t('workspace-delete'),
-    callback: handleDelete
-  }];
-  var renderButton = function renderButton() {
-    return jsxs(CustomToggleButton, {
-      variant: "tool",
-      selected: isOpen,
-      onClick: handleClick,
-      id: id,
-      "data-testid": id,
-      disableRipple: true,
-      disabled: isDisabled,
-      sx: {
-        fontSize: '12px',
-        '&&': {
-          color: activeTab && !isOpen ? 'geowebColors.buttons.icon.active.color' : undefined,
-          backgroundColor: !isOpen ? 'transparent' : undefined,
-          '&:hover': {
-            color: activeTab ? 'geowebColors.buttons.icon.active.color' : 'inherit',
-            backgroundColor: 'geowebColors.workspace.tabButtonHover'
-          },
-          paddingRight: '4px !important',
-          display: 'block',
-          width: '100%',
-          height: 20,
-          fontStyle: hasChanges ? 'italic' : undefined,
-          fontWeight: 500,
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          lineHeight: '1px',
-          textAlign: 'left',
-          textTransform: 'none',
-          '&.MuiButtonBase-root': {
-            paddingLeft: 1,
-            paddingTop: 1,
-            paddingBottom: 1,
-            border: 'none'
-          }
-        }
-      },
-      role: "button",
-      children: [title, panelId && jsx(Box, {
-        component: "span",
-        sx: {
-          fontStyle: 'normal',
-          marginLeft: 1,
-          color: 'geowebColors.captions.captionStatus.rgba'
-        },
-        children: panelId
-      }), jsxs(Menu, {
-        BackdropProps: {
-          style: {
-            opacity: 0,
-            transition: 'none'
-          }
-        },
-        open: isOpen,
-        anchorEl: anchorEl,
-        anchorOrigin: {
-          vertical: 21,
-          horizontal: 6
-        },
-        sx: {
-          '& .MuiMenu-list': {
-            padding: 0
-          },
-          '& .MuiMenuItem-root': {
-            fontSize: 16
-          }
-        },
-        children: [jsx(ListSubheader, {
-          sx: {
-            paddingTop: '8px'
-          },
-          children: jsx(Typography, {
-            sx: {
-              letterSpacing: '0.4px',
-              fontSize: 12
-            },
-            children: t('workspace-options')
-          })
-        }), options.map(function (_ref2) {
-          var title = _ref2.title,
-            callback = _ref2.callback;
-          return jsx(MenuItem, {
-            onClick: callback,
-            disabled: !callback,
-            children: title
-          }, title);
-        })]
-      })]
-    });
-  };
-  return isDisabled ? renderButton() : jsx(CustomTooltip, {
-    title: !isOpen && title,
-    TransitionProps: {
-      exit: false
-    },
-    children: renderButton()
-  });
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var config = sessionStorageProvider.getConfig();
+var presetBaseUrl = (config == null ? void 0 : config.GW_PRESET_BACKEND_URL) || '';
+var getWorkspace = function getWorkspace(workspaceId, auth) {
+  return fetch(presetBaseUrl + "/workspacepreset/" + workspaceId, {
+    headers: getHeaders(auth)
+  }).then(handleResponse);
 };
-var WorkspaceOptions = /*#__PURE__*/React.memo(WorkspaceOptionsNoMemo);
-
-var LoadingIndicatorConnect = function LoadingIndicatorConnect(_ref) {
-  var panelId = _ref.panelId;
-  var isLoading = useSelector(function (store) {
-    return loadingIndicatorSelectors.isLoading(store, panelId);
-  });
-  var _useWorkspaceTranslat = useWorkspaceTranslation(),
-    t = _useWorkspaceTranslat.t;
-  return jsx(CustomTooltip, {
-    title: isLoading ? t('workspace-loading-indicator-loading') : t('workspace-loading-indicator-idle'),
-    children: jsx("span", {
-      style: {
-        height: '100%'
-      },
-      children: isLoading ? jsx(CloudLoading, {
-        "data-testid": "cloudicon-loading",
-        style: {
-          fill: '#186DFF'
-        }
-      }) : jsx(CloudIdle, {
-        "data-testid": "cloudicon-idle"
-      })
-    })
-  });
+var deleteWorkspace = function deleteWorkspace(workspaceId, auth) {
+  return fetch(presetBaseUrl + "/workspacepreset/" + workspaceId, {
+    headers: getHeaders(auth),
+    method: 'DELETE'
+  }).then(handleResponse);
 };
-
-var _excluded$4 = ["title", "scope"];
-var customIconStyles = function customIconStyles(theme, isViewPresetDialogOpen) {
-  return {
-    marginLeft: -1,
-    marginRight: 1,
-    '&&': {
-      backgroundColor: !isViewPresetDialogOpen ? 'transparent' : undefined,
-      '&:hover': {
-        backgroundColor: 'geowebColors.workspace.tabButtonHover'
-      },
-      '.MuiSvgIcon-root > path': {
-        fill: isViewPresetDialogOpen ? theme.palette.geowebColors.iconButtons.tool.active.color : undefined
-      }
-    }
-  };
+var updateWorkspace = function updateWorkspace(workspaceId, data, auth) {
+  return fetch(presetBaseUrl + "/workspacepreset/" + workspaceId, {
+    headers: getHeaders(auth),
+    method: 'PUT',
+    body: JSON.stringify(data)
+  }).then(handleResponse);
 };
-var WorkspaceViewTitleConnectNoMemo = function WorkspaceViewTitleConnectNoMemo(_ref) {
-  var panelId = _ref.panelId,
-    isViewPresetDialogOpen = _ref.isViewPresetDialogOpen;
-  var dispatch = useDispatch();
-  var theme = useTheme();
-  var store = useStore();
-  var _useWorkspaceTranslat = useWorkspaceTranslation(),
-    t = _useWorkspaceTranslat.t;
+var createWorkspace = function createWorkspace(data, auth) {
+  return fetch(presetBaseUrl + "/workspacepreset", {
+    headers: getHeaders(auth),
+    method: 'POST',
+    body: JSON.stringify(data)
+  }).then(handleResponse);
+};
+
+var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
+  var _GENERIC$AUTH$error$c;
   var _useAuthenticationCon = useAuthenticationContext(),
     currentRole = _useAuthenticationCon.currentRole,
     isLoggedIn = _useAuthenticationCon.isLoggedIn,
     auth = _useAuthenticationCon.auth;
+  var username = (auth == null ? void 0 : auth.username) || '';
   var isAdmin = (currentRole == null ? void 0 : currentRole.name) === GEOWEB_ROLE_PRESETS_ADMIN.name;
-  var workspaceView = useSelector(function (store) {
-    var _workspaceSelectors$g;
-    var _ref2 = (_workspaceSelectors$g = getViewById(store, panelId)) != null ? _workspaceSelectors$g : {},
-      title = _ref2.title,
-      scope = _ref2.scope,
-      restProps = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
-    return Object.assign({
-      title: title,
-      scope: scope
-    }, restProps);
-  }, shallowEqual);
-  var viewComponentType = useSelector(function (store) {
-    return getViewComponentType(store, panelId);
+  var scope = !isAdmin ? 'user' : 'system';
+  var workspacePresets = useSelector(function (store) {
+    return getWorkspaceList(store);
   });
-  var hasViewPresetChanges = useSelector(function (store) {
-    return getViewPresetHasChanges(store, panelId);
+  var selectedFilters = useSelector(getWorkspaceListFilters);
+  var filteredPresets = React.useMemo(function () {
+    return filterAndSortPresets(workspacePresets, selectedFilters, username, isAdmin);
+  }, [workspacePresets, selectedFilters, username, isAdmin]);
+  var currentView = useSelector(function (store) {
+    return getWorkspaceState(store);
   });
-  var activeViewPresetId = useSelector(function (store) {
-    return getViewPresetActiveId(store, panelId);
+  var workspaceListFilters = useSelector(function (store) {
+    return getWorkspaceListFilters(store, scope, isAdmin);
   });
-  var relatedSyncGroupIds = useSelector(function (store) {
-    return syncGroupsSelectors.getAllTargetGroupsForSource(store, panelId);
+  var workspaceSearchQuery = useSelector(function (store) {
+    return getWorkspaceListSearchQuery(store);
   });
-  var currentViewPreset = useSelector(function (store) {
-    return workspaceView.id ? getViewPresetFromList(store, workspaceView.id) : undefined;
+  var isFetching = useSelector(function (store) {
+    return getIsWorkspaceListFetching(store);
   });
-  var presetAbstract = workspaceView == null ? void 0 : workspaceView["abstract"];
-  var isNewActive = activeViewPresetId === '';
-  var title = workspaceView.title || t('workspace-mappreset-new');
-  var viewScope = workspaceView.scope;
-  var fullTitle = getPresetTitle(title, hasViewPresetChanges, isNewActive, t);
-  var openViewPresetsDialog = React.useCallback(function (viewPresetDialogOptions) {
-    dispatch(viewPresetActions.openViewPresetDialog({
-      viewPresetDialog: viewPresetDialogOptions
-    }));
-  }, [dispatch]);
-  var currentWarningsPreset = useSelector(function (store) {
-    return publicWarningsSelectors.getWarningsPresetById(store, panelId);
+  var error = useSelector(function (store) {
+    return getWorkspaceListError(store);
   });
-  var constructInitialProps = React.useCallback(function () {
-    switch (viewComponentType) {
-      case 'WarningList':
-        return currentWarningsPreset;
-      case 'TimeSeries':
-        return timeSeriesSelectors.getTimeSeriesPreset(store.getState());
-      case 'Map':
-        return {
-          mapPreset: mapSelectors.getMapPreset(store.getState(), panelId),
-          syncGroupsIds: relatedSyncGroupIds
-        };
-      default:
-        return undefined;
-    }
-  }, [currentWarningsPreset, panelId, relatedSyncGroupIds, store, viewComponentType]);
-  var onSave = React.useCallback(function () {
-    dispatch(viewPresetActions.saveViewPreset({
-      panelId: panelId,
-      viewPresetId: activeViewPresetId,
-      viewPreset: Object.assign({}, emptyViewPreset(viewComponentType), {
-        title: title,
-        initialProps: constructInitialProps()
-      })
+  var dispatch = useDispatch();
+  var _useWorkspaceTranslat = useWorkspaceTranslation(),
+    t = _useWorkspaceTranslat.t;
+  var fetchWorkspaceList = React.useCallback(function () {
+    var filterParams = constructFilterParams([], workspaceSearchQuery);
+    dispatch(workspaceListActions.fetchWorkspaceList(filterParams));
+  }, [dispatch, workspaceSearchQuery]);
+  var fetchWorkspace = React.useCallback(function (workspaceId) {
+    dispatch(workspaceActions.fetchWorkspace({
+      workspaceId: workspaceId
     }));
-  }, [activeViewPresetId, constructInitialProps, dispatch, panelId, title, viewComponentType]);
-  var onDelete = React.useCallback(function () {
-    openViewPresetsDialog({
-      title: t('workspace-mappreset-dialog-title-delete'),
-      action: PresetAction.DELETE,
-      viewPresetId: activeViewPresetId,
-      panelId: panelId,
-      formValues: {
-        title: title,
-        "abstract": presetAbstract
-      }
-    });
-  }, [activeViewPresetId, openViewPresetsDialog, panelId, title, presetAbstract, t]);
-  var onSaveAs = React.useCallback(function () {
-    var formTitle = activeViewPresetId ? title : '';
-    openViewPresetsDialog({
-      title: t('workspace-mappreset-save-as'),
-      action: PresetAction.SAVE_AS,
-      viewPresetId: activeViewPresetId,
-      panelId: panelId,
-      formValues: {
-        title: formTitle,
-        initialProps: constructInitialProps(),
-        "abstract": presetAbstract
-      }
-    });
-  }, [activeViewPresetId, constructInitialProps, openViewPresetsDialog, panelId, t, title, presetAbstract]);
-  var onEdit = React.useCallback(function () {
-    var formTitle = activeViewPresetId ? title : '';
-    openViewPresetsDialog({
-      title: t('workspace-mappreset-dialog-title-edit'),
-      action: PresetAction.EDIT,
-      panelId: panelId,
-      viewPresetId: activeViewPresetId,
-      formValues: {
-        title: formTitle,
-        initialProps: constructInitialProps(),
-        "abstract": presetAbstract
-      }
-    });
-  }, [activeViewPresetId, constructInitialProps, openViewPresetsDialog, panelId, t, title, presetAbstract]);
-  var onReset = React.useCallback(function () {
-    openViewPresetsDialog({
-      title: t('workspace-reset-title'),
-      action: PresetAction.RESET,
-      viewPresetId: activeViewPresetId,
-      panelId: panelId,
-      formValues: {
-        title: title
-      }
-    });
-  }, [activeViewPresetId, openViewPresetsDialog, panelId, t, title]);
-  var toggleViewPresetDialog = React.useCallback(function (_ref3) {
-    var panelId = _ref3.panelId,
-      isViewPresetDialogOpen = _ref3.isViewPresetDialogOpen;
-    dispatch(viewPresetActions.toggleViewPresetListDialog({
-      panelId: panelId,
-      isViewPresetListDialogOpen: isViewPresetDialogOpen
+  }, [dispatch]);
+  var setWorkspaceActionDialogOptions = React.useCallback(function (dialogOptions) {
+    dispatch(workspaceListActions.openWorkspaceActionDialogOptions(dialogOptions));
+  }, [dispatch]);
+  var toggleSelectFilterChip = React.useCallback(function (id, isSelected) {
+    dispatch(workspaceListActions.toggleSelectFilterChip({
+      id: id,
+      isSelected: isSelected,
+      isAdmin: isAdmin
     }));
+  }, [dispatch, isAdmin]);
+  var setSelectAllFilterChip = React.useCallback(function () {
+    dispatch(workspaceListActions.setSelectAllFilterChip());
   }, [dispatch]);
-  var onClickOpenViewPreset = React.useCallback(function () {
-    toggleViewPresetDialog({
-      panelId: panelId,
-      isViewPresetDialogOpen: !isViewPresetDialogOpen
+  var searchFilter = React.useCallback(function (searchQuery) {
+    dispatch(workspaceListActions.searchFilter({
+      searchQuery: searchQuery
+    }));
+  }, [dispatch]);
+  // If we're loading the `New workspace` preset as defined in the FE, use this instead of retrieving from BE
+  var onClickNewPreset = React.useCallback(function () {
+    dispatch(routerActions.navigateToUrl({
+      url: getWorkspaceRouteUrl()
+    }));
+    dispatch(workspaceListActions.toggleWorkspaceDialog({
+      isWorkspaceListDialogOpen: false
+    }));
+    dispatch(workspaceActions.changeToEmptyMapWorkspace({
+      newMapPresetText: t('workspace-mappreset-new'),
+      newWorkspaceText: t('workspace-new')
+    }));
+  }, [dispatch, t]);
+  var onClickWorkspacePreset = function onClickWorkspacePreset(id) {
+    if (id === getEmptyMapWorkspace(t).id) {
+      onClickNewPreset();
+    } else if (!isFetching) {
+      fetchWorkspace(id);
+    }
+  };
+  var onClickFilterChip = function onClickFilterChip(id, shouldSelect) {
+    if (id === 'all') {
+      if (shouldSelect) {
+        setSelectAllFilterChip();
+      }
+    } else {
+      toggleSelectFilterChip(id, shouldSelect);
+    }
+  };
+  var onClickWorkspacePresetOption = function onClickWorkspacePresetOption(presetId, workspaceAction) {
+    // If affectedPreset is the FE defined `New workspace` - use the definition from FE instead of BE
+    var affectedPreset = presetId === getEmptyMapWorkspace(t).id ? getEmptyMapWorkspace(t) : workspacePresets.find(function (preset) {
+      return preset.id === presetId;
     });
-  }, [isViewPresetDialogOpen, panelId, toggleViewPresetDialog]);
-  var style = React.useMemo(function () {
-    return customIconStyles(theme, isViewPresetDialogOpen);
-  }, [isViewPresetDialogOpen, theme]);
-  var presetIcon = React.useMemo(function () {
-    return jsx(Preset, {});
-  }, []);
-  renderCounter.count(WorkspaceViewTitleConnectNoMemo.name);
-  var viewpresetCreator = (currentViewPreset == null ? void 0 : currentViewPreset.username) || '';
-  var isUserPresetCreator = (auth == null ? void 0 : auth.username) === viewpresetCreator;
-  var currentViewScope = viewScope || 'system';
-  var isEnabled = (currentViewScope === 'user' && isUserPresetCreator || isAdmin && currentViewScope === 'system') && activeViewPresetId !== '' && isLoggedIn;
-  return (
-    // Zero-length string assignment prevents showing title as an empty object '[object Object]'.
-    // in child components. This is a workaround for a limitation in the Tooltip component.
-    jsxs(Grid, {
-      title: "",
+    var presetTitle = affectedPreset == null ? void 0 : affectedPreset.title;
+    switch (workspaceAction) {
+      case WorkspacePresetAction.DUPLICATE:
+      case WorkspacePresetAction.EDIT:
+        {
+          setWorkspaceActionDialogOptions({
+            action: workspaceAction,
+            presetId: presetId,
+            formValues: {
+              title: presetTitle,
+              "abstract": affectedPreset["abstract"],
+              scope: scope
+            }
+          });
+          break;
+        }
+      // case WorkspacePresetAction.SAVE: {
+      // break;
+      // }
+      case WorkspacePresetAction.DELETE:
+        {
+          setWorkspaceActionDialogOptions({
+            action: workspaceAction,
+            presetId: presetId,
+            formValues: {
+              title: presetTitle,
+              scope: scope
+            }
+          });
+          break;
+        }
+      case WorkspacePresetAction.DELETE_SYSTEM_PRESET:
+        {
+          setWorkspaceActionDialogOptions({
+            action: workspaceAction,
+            presetId: presetId,
+            formValues: {
+              title: presetTitle,
+              scope: scope
+            }
+          });
+          break;
+        }
+      case WorkspacePresetAction.SHARE:
+        {
+          void getWorkspace(presetId, auth).then(function (preset) {
+            return updateWorkspace(presetId, Object.assign({}, preset, {
+              is_shared: !preset.is_shared
+            }), auth).then(function () {
+              dispatch(workspaceListActions.onSuccessWorkspacePresetAction({
+                workspaceId: presetId,
+                action: WorkspacePresetAction.SHARE,
+                title: presetTitle,
+                scope: scope,
+                is_shared: preset.is_shared
+              }));
+              fetchWorkspaceList();
+            })["catch"](function (error) {
+              dispatch(workspaceListActions.onErrorWorkspacePresetAction({
+                error: {
+                  message: "" + error,
+                  type: WorkspaceListErrorType.VERBATIM_ERROR,
+                  category: WorkspaceListErrorCategory.GENERIC
+                }
+              }));
+            });
+          });
+          break;
+        }
+      case WorkspacePresetAction.OPEN_TAB:
+        {
+          var url = getWorkspaceRouteUrl(presetId);
+          window.open(url, '_blank');
+          break;
+        }
+    }
+  };
+  var isAllSelected = workspaceListFilters.length > 0 && workspaceListFilters.every(function (filter) {
+    return filter.isSelected;
+  });
+  var shouldHideNewWorkspace = !isAllSelected || workspaceSearchQuery.length > 0;
+  return jsxs(Box, {
+    "data-testid": "workspace-selectlist-connect",
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%'
+    },
+    tabIndex: 0,
+    children: [isFetching && jsx(LinearProgress, {
+      "data-testid": "loading-bar",
+      color: "secondary",
+      sx: {
+        position: 'absolute',
+        width: '100%',
+        top: 0,
+        left: 0
+      }
+    }), error && jsx("div", {
+      style: {
+        whiteSpace: 'normal'
+      },
+      children: jsx(AlertBanner, Object.assign({
+        title: (_GENERIC$AUTH$error$c = {
+          GENERIC: '',
+          AUTH: t('workspace-error-auth')
+        }[error.category]) != null ? _GENERIC$AUTH$error$c : t('workspace-error-fetch'),
+        info: error.type === WorkspaceListErrorType.TRANSLATABLE_ERROR ? t(error.key, error.params) : error.message,
+        shouldClose: true
+      }, error.category === WorkspaceListErrorCategory.GENERIC && {
+        actionButtonProps: {
+          title: t('workspace-retry'),
+          onClick: function onClick() {
+            return fetchWorkspaceList();
+          }
+        }
+      }))
+    }), jsxs(Box, {
       sx: {
         display: 'flex',
-        flexGrow: 3,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center'
+        flexDirection: 'column',
+        height: '100%',
+        padding: 1,
+        overflow: 'hidden'
       },
-      children: [jsx(CustomIconButton, {
-        "data-testid": "open-viewpresets",
-        sx: style,
-        variant: "tool",
-        onClick: onClickOpenViewPreset,
-        tooltipTitle: t('workspace-viewpreset-menu'),
-        isSelected: isViewPresetDialogOpen,
-        children: presetIcon
-      }), jsx(WorkspaceOptions, {
-        panelId: panelId,
-        title: fullTitle,
-        hasChanges: hasViewPresetChanges || isNewActive,
-        handleSave: isEnabled ? onSave : undefined,
-        handleDelete: isEnabled ? onDelete : undefined,
-        handleSaveAs: isLoggedIn ? onSaveAs : undefined,
-        handleEdit: isEnabled ? onEdit : undefined,
-        handleReset: onReset,
-        id: viewPresetOptionId
+      children: [!error && jsxs(Box, {
+        sx: {
+          marginBottom: 1
+        },
+        children: [jsx(Box, {
+          sx: {
+            display: 'flex',
+            width: '100%'
+          },
+          children: jsx(Filter, {
+            filters: workspaceListFilters,
+            onClickFilterChip: onClickFilterChip,
+            isAllSelected: isAllSelected,
+            searchQuery: workspaceSearchQuery,
+            onSearch: searchFilter
+          })
+        }), jsx(Box, {
+          sx: {
+            display: 'flex',
+            justifyContent: 'flex-start'
+          },
+          children: jsx(LastUpdateTime, {
+            onPressRefresh: function onPressRefresh() {
+              return fetchWorkspaceList();
+            },
+            hideLabel: true
+          })
+        })]
       }), jsx(Box, {
         sx: {
-          pt: 0.72
+          flexGrow: 1,
+          minHeight: 0
+        },
+        children: jsx(WorkspaceSelectList, {
+          workspacePresets: filteredPresets,
+          currentSelectedId: currentView.id || '',
+          onClickWorkspacePreset: onClickWorkspacePreset,
+          onClickWorkspacePresetOption: onClickWorkspacePresetOption,
+          hideNewWorkspace: shouldHideNewWorkspace,
+          isEditable: isLoggedIn,
+          isAdmin: isAdmin,
+          searchQuery: workspaceSearchQuery
+        })
+      })]
+    })]
+  });
+};
+
+var WorkspaceMenu = function WorkspaceMenu(_ref) {
+  var _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    closeMenu = _ref.closeMenu;
+  var _useWorkspaceTranslat = useWorkspaceTranslation(),
+    t = _useWorkspaceTranslat.t;
+  return jsx(CustomDialog, {
+    open: isOpen,
+    onClose: function onClose() {
+      if (closeMenu) {
+        closeMenu();
+      }
+    },
+    isResizable: true,
+    hasLayout: false,
+    resizableDefaultSize: {
+      width: 380,
+      height: '90%'
+    },
+    slotProps: {
+      backdrop: {
+        style: {
+          top: 40
+        }
+      },
+      root: {
+        style: {
+          top: 40
+        }
+      }
+    },
+    "data-testid": "workspace-menu",
+    children: jsx(ToolContainer, {
+      title: t('workspace-menu'),
+      onClose: closeMenu,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      onClick: function onClick(event) {
+        event.stopPropagation();
+      },
+      children: jsx(WorkspaceSelectListConnect, {})
+    })
+  });
+};
+
+var workspacePresetOptionId = 'workspaceMenuButton';
+var viewPresetOptionId = 'viewpreset-options-toolbutton';
+var WorkspaceMenuButton = function WorkspaceMenuButton(_ref) {
+  var title = _ref.title,
+    activeTab = _ref.activeTab,
+    _ref$hasChanges = _ref.hasChanges,
+    hasChanges = _ref$hasChanges === void 0 ? false : _ref$hasChanges,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? workspacePresetOptionId : _ref$id,
+    _ref$showMenu = _ref.showMenu,
+    showMenu = _ref$showMenu === void 0 ? false : _ref$showMenu,
+    onToggleDialog = _ref.onToggleDialog;
+  var handleClick = function handleClick() {
+    if (onToggleDialog) {
+      onToggleDialog(!showMenu);
+    }
+  };
+  var _useWorkspaceTranslat = useWorkspaceTranslation(),
+    t = _useWorkspaceTranslat.t;
+  return jsxs(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      flexGrow: 1,
+      minWidth: 0
+    },
+    children: [jsx(CustomTooltip, {
+      title: !showMenu && jsxs(Fragment, {
+        children: [jsx(Box, {
+          component: "span",
+          sx: {
+            fontWeight: 'bold',
+            display: 'block'
+          },
+          children: t('workspace-menu')
+        }), jsx(Box, {
+          component: "span",
+          children: t('workspace-currently') + ": " + title
+        })]
+      }),
+      TransitionProps: {
+        exit: false
+      },
+      children: jsx(CustomToggleButton, {
+        variant: "tool",
+        selected: showMenu,
+        onClick: handleClick,
+        "data-testid": id,
+        "aria-label": "workspace menu",
+        disableRipple: true,
+        sx: {
+          flexGrow: 1,
+          // expand across the row
+          flexShrink: 1,
+          minWidth: 0,
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          textAlign: 'left',
+          fontSize: '12px',
+          fontWeight: 500,
+          fontStyle: hasChanges ? 'italic' : undefined,
+          height: 20,
+          maxHeight: 20,
+          overflow: 'hidden',
+          '&&': {
+            color: activeTab && !showMenu ? 'geowebColors.buttons.icon.active.color' : 'geowebColors.buttons.icon.active.color',
+            textTransform: 'none',
+            backgroundColor: !showMenu ? 'transparent' : 'geowebColors.workspace.tabButtonHover',
+            '&:hover': {
+              backgroundColor: 'geowebColors.workspace.tabButtonHover',
+              color: activeTab && showMenu ? 'white' : 'geowebColors.buttons.icon.active.color'
+            }
+          }
         },
-        children: jsx(LoadingIndicatorConnect, {
-          panelId: panelId
+        children: jsx(Box, {
+          component: "span",
+          sx: {
+            flexGrow: 1,
+            flexShrink: 1,
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          },
+          children: title
         })
-      })]
-    })
-  );
+      })
+    }), jsx(WorkspaceMenu, {
+      isOpen: showMenu,
+      closeMenu: function closeMenu() {
+        return onToggleDialog == null ? void 0 : onToggleDialog(false);
+      }
+    })]
+  });
 };
-var WorkspaceViewTitleConnect = /*#__PURE__*/React.memo(WorkspaceViewTitleConnectNoMemo);
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var getUniqueId = function getUniqueId(existingIds, count) {
-  if (count === void 0) {
-    count = 1;
-  }
-  var newId = count + "_screen";
-  if (existingIds.indexOf(newId) !== -1) {
-    return getUniqueId(existingIds, count + 1);
-  }
-  return newId;
-};
-var createBalancedMosaicNode = function createBalancedMosaicNode(currentNode) {
-  var leaves = getLeaves(currentNode);
-  return createBalancedTreeFromLeaves(leaves);
-};
-var closeDialogsWhenChangingPreset = function closeDialogsWhenChangingPreset(componentTypes, dispatch) {
-  if (!componentTypes || componentTypes.length === 0 || componentTypes.some(function (componentType) {
-    return componentType.toLowerCase().includes('viewloading');
-  })) {
-    return;
-  }
-  // Close all dialogs related to timeseries
-  if (!componentTypes.some(function (componentType) {
-    return componentType.toLowerCase().includes('timeseries');
-  })) {
-    dispatch(uiActions.setToggleOpenDialog({
-      setOpen: false,
-      type: uiTypes.DialogTypes.TimeSeriesManager
-    }));
-    dispatch(uiActions.setToggleOpenDialog({
-      setOpen: false,
-      type: uiTypes.DialogTypes.TimeSeriesSelect
-    }));
-    dispatch(uiActions.setToggleOpenDialog({
-      setOpen: false,
-      type: uiTypes.DialogTypes.TimeSeriesInfo
-    }));
-    dispatch(uiActions.setToggleOpenDialog({
-      setOpen: false,
-      type: uiTypes.DialogTypes.TimeSeriesLocationInfo
-    }));
-  }
-  // Close all dialogs related to soundings
-  if (!componentTypes.some(function (componentType) {
-    return componentType.toLowerCase().includes('soundings');
-  })) {
-    dispatch(uiActions.setToggleOpenDialog({
-      setOpen: false,
-      type: uiTypes.DialogTypes.SoundingsLocations
-    }));
-    dispatch(uiActions.setToggleOpenDialog({
-      setOpen: false,
-      type: uiTypes.DialogTypes.SoundingsSources
-    }));
-  }
-  // Close dialogs related to the warninglist
-  if (!componentTypes.some(function (componentType) {
-    return componentType.toLowerCase().includes('warninglist');
-  }) && !componentTypes.some(function (componentType) {
-    return componentType.toLowerCase().includes('map');
-  })) {
-    dispatch(uiActions.setToggleOpenDialog({
-      setOpen: false,
-      type: uiTypes.DialogTypes.PublicWarnings
-    }));
-  }
+var LoadingIndicatorConnect = function LoadingIndicatorConnect(_ref) {
+  var panelId = _ref.panelId;
+  var isLoading = useSelector(function (store) {
+    return loadingIndicatorSelectors.isLoading(store, panelId);
+  });
+  var _useWorkspaceTranslat = useWorkspaceTranslation(),
+    t = _useWorkspaceTranslat.t;
+  return jsx(CustomTooltip, {
+    title: isLoading ? t('workspace-loading-indicator-loading') : t('workspace-loading-indicator-idle'),
+    children: jsx("span", {
+      style: {
+        height: '100%'
+      },
+      children: isLoading ? jsx(CloudLoading, {
+        "data-testid": "cloudicon-loading",
+        style: {
+          fill: '#186DFF'
+        }
+      }) : jsx(CloudIdle, {
+        "data-testid": "cloudicon-idle"
+      })
+    })
+  });
 };
 
-var LinkMenuConnect = function LinkMenuConnect(_ref) {
-  var panelId = _ref.panelId;
-  var dispatch = useDispatch();
+var workspaceOptionsButtonId = 'workspace-options-toolbutton';
+var WorkspaceOptions = function WorkspaceOptions(_ref) {
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? workspaceOptionsButtonId : _ref$id,
+    handleSave = _ref.handleSave,
+    handleSaveAs = _ref.handleSaveAs,
+    handleEdit = _ref.handleEdit,
+    handleDelete = _ref.handleDelete,
+    handleReset = _ref.handleReset,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isDefaultOpen = _ref.isDefaultOpen,
+    isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen;
   var _useWorkspaceTranslat = useWorkspaceTranslation(),
     t = _useWorkspaceTranslat.t;
+  var theme = useTheme();
   var _React$useState = React__default.useState(null),
     anchorEl = _React$useState[0],
     setAnchorEl = _React$useState[1];
-  var maps = useSelector(function (store) {
-    return mapSelectors.getAllMapIds(store);
-  });
-  var viewsById = useSelector(getViewsById);
-  var selectedMapIds = useSelector(function (store) {
-    return genericSelectors.getLinkedMaps(store, panelId);
-  });
-  var viewComponentType = useSelector(function (store) {
-    return getViewComponentType(store, panelId);
-  });
-  var sharedFeature = useSelector(function (store) {
-    return genericSelectors.getSelectedFeature(store.syncGroups, panelId);
-  });
-  var mapPinLocation = useSelector(function (store) {
-    return mapSelectors.getPinLocation(store, selectedMapIds[0] || '');
-  });
-  var handleLinkViews = function handleLinkViews(event) {
-    setAnchorEl(event.currentTarget);
-  };
-  var handleMenuClose = function handleMenuClose() {
-    setAnchorEl(null);
-  };
-  var handleMapSelect = function handleMapSelect(mapId) {
-    var updatedMapIds = selectedMapIds.includes(mapId) ? selectedMapIds.filter(function (id) {
-      return id !== mapId;
-    }) : [].concat(selectedMapIds, [mapId]);
-    dispatch(genericActions.updateLinkedMap({
-      panelId: panelId,
-      mapIds: updatedMapIds
-    }));
-    // Sync pin to newly added map for TimeSeries components
-    if (!selectedMapIds.includes(mapId) && viewComponentType === 'TimeSeries') {
-      // Observation station
-      if (sharedFeature) {
-        dispatch(mapActions.setMapPinLocation({
-          mapId: mapId,
-          mapPinLocation: {
-            lon: sharedFeature.lon,
-            lat: sharedFeature.lat
-          }
-        }));
-        // Grid
-      } else if (mapPinLocation) {
-        dispatch(mapActions.setMapPinLocation({
-          mapId: mapId,
-          mapPinLocation: mapPinLocation
-        }));
-      }
-    }
+  var isOpen = Boolean(anchorEl) || isDefaultOpen;
+  var handleClick = function handleClick(event) {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
   };
-  return jsxs(Fragment, {
-    children: [linkComponentTypesConstants.supportedComponentTypesForLinking.includes(viewComponentType) && jsx(CustomIconButton, {
-      onClick: handleLinkViews,
-      "data-testid": "icon-button",
-      tooltipTitle: "Link " + viewComponentType,
+  var options = [{
+    title: t('workspace-save'),
+    callback: handleSave
+  }, {
+    title: t('workspace-save-as'),
+    callback: handleSaveAs
+  }, {
+    title: t('workspace-edit'),
+    callback: handleEdit
+  }, {
+    title: t('workspace-reset'),
+    callback: handleReset
+  }, {
+    title: t('workspace-delete'),
+    callback: handleDelete
+  }];
+  var renderButton = function renderButton() {
+    return jsxs(CustomIconButton, {
+      onClick: handleClick,
+      "data-testid": id,
+      isSelected: isOpen,
+      "aria-label": "workspace options",
+      variant: "tool",
+      disabled: isDisabled,
       sx: {
-        marginLeft: 0.5,
-        marginRight: 0.5
-      },
-      children: selectedMapIds.length > 0 ? jsx(Link, {
-        "data-testid": "link-icon",
-        style: {
-          fill: anchorEl ? 'white' : undefined,
-          backgroundColor: anchorEl ? '#186DFF' : undefined
-        }
-      }) : jsx(LinkOff, {
-        "data-testid": "link-off-icon",
-        style: {
-          fill: anchorEl ? 'white' : undefined,
-          backgroundColor: anchorEl ? '#186DFF' : undefined
+        '&&': {
+          backgroundColor: !isOpen ? 'transparent' : 'geowebColors.workspace.tabButtonHover',
+          '&:hover': {
+            backgroundColor: 'geowebColors.workspace.tabButtonHover'
+          },
+          '.MuiSvgIcon-root > path': {
+            fill: isOpen ? theme.palette.geowebColors.iconButtons.tool.active.color : undefined
+          }
         }
-      })
-    }), jsxs(Menu, {
-      id: "map-select-menu",
-      "data-testid": "map-select-menu",
-      anchorEl: anchorEl,
-      open: Boolean(anchorEl),
-      onClose: handleMenuClose,
-      keepMounted: true,
-      children: [jsxs(Typography, {
-        variant: "h6",
-        style: {
-          padding: '10px 15px 0',
-          fontWeight: 'bold'
+      },
+      children: [jsx(Options, {}), jsxs(Menu, {
+        BackdropProps: {
+          style: {
+            opacity: 0,
+            transition: 'none'
+          }
+        },
+        open: isOpen && !isDisabled,
+        anchorEl: anchorEl,
+        onClose: function onClose() {
+          return setAnchorEl(null);
         },
-        children: [t('workspace-link'), " - ", t('workspace-link-location-header')]
-      }), jsx(List, {
-        dense: true,
-        children: maps.map(function (mapId) {
-          var _viewsById$mapId;
-          var labelId = "checkbox-link-label-" + mapId;
-          return jsx(ListItem, {
-            onClick: function onClick() {
-              return handleMapSelect(mapId);
+        anchorOrigin: {
+          vertical: 21,
+          horizontal: 6
+        },
+        sx: {
+          '& .MuiMenu-list': {
+            padding: 0
+          },
+          '& .MuiMenuItem-root': {
+            fontSize: 16
+          }
+        },
+        children: [jsx(ListSubheader, {
+          sx: {
+            paddingTop: '8px'
+          },
+          children: jsx(Typography, {
+            sx: {
+              letterSpacing: '0.4px',
+              fontSize: 12
             },
-            disablePadding: true,
-            dense: true,
-            divider: true,
-            children: jsxs(ListItemButton, {
-              role: "checkbox",
-              dense: true,
-              sx: {
-                margin: 0,
-                padding: '0 16px'
-              },
-              children: [jsx(ListItemIcon, {
-                children: jsx(Checkbox, {
-                  edge: "start",
-                  tabIndex: -1,
-                  checked: selectedMapIds.includes(mapId),
-                  disableRipple: true,
-                  inputProps: {
-                    'aria-labelledby': labelId
-                  }
-                })
-              }), jsx(ListItemText, {
-                id: labelId,
-                primary: (_viewsById$mapId = viewsById[mapId]) == null ? void 0 : _viewsById$mapId.title,
-                secondary: mapId
-              })]
-            })
-          }, mapId);
-        })
+            children: t('workspace-options')
+          })
+        }), options.map(function (_ref2) {
+          var title = _ref2.title,
+            callback = _ref2.callback;
+          return jsx(MenuItem, {
+            onClick: callback,
+            disabled: !callback,
+            children: title
+          }, title);
+        })]
       })]
-    })]
+    });
+  };
+  return isDisabled ? renderButton() : jsx(CustomTooltip, {
+    title: !isOpen && t('workspace-options'),
+    TransitionProps: {
+      exit: false
+    },
+    children: renderButton()
   });
 };
 
-var buttonStyle = {
-  marginLeft: 0.5,
-  marginRight: 0.5
-};
-var WorkspaceControls = function WorkspaceControls(_ref) {
+var _excluded$4 = ["title", "scope"];
+var WorkspaceViewTitleConnectNoMemo = function WorkspaceViewTitleConnectNoMemo(_ref) {
   var panelId = _ref.panelId,
-    createNode = _ref.createNode,
-    path = _ref.path,
-    _ref$shouldPreventClo = _ref.shouldPreventCloseView,
-    shouldPreventCloseView = _ref$shouldPreventClo === void 0 ? false : _ref$shouldPreventClo,
-    removeLinkedMap = _ref.removeLinkedMap;
-  var confirmDialog = useConfirmationDialog();
-  var _React$useContext = React.useContext(MosaicContext),
-    actions = _React$useContext.mosaicActions;
+    isViewPresetDialogOpen = _ref.isViewPresetDialogOpen;
+  var dispatch = useDispatch();
+  var store = useStore();
   var _useWorkspaceTranslat = useWorkspaceTranslation(),
     t = _useWorkspaceTranslat.t;
-  var mosaicNode = useSelector(function (store) {
-    return getMosaicNode(store);
-  });
-  var _React$useState = React.useState(),
-    stateAfterExpand = _React$useState[0],
-    setStateAfterExpand = _React$useState[1];
-  var _React$useState2 = React.useState(mosaicNode),
-    stateBeforeExpand = _React$useState2[0],
-    setStateBeforeExpand = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    enableUnexpand = _React$useState3[0],
-    setEnableUnexpand = _React$useState3[1];
-  React.useEffect(function () {
-    if (enableUnexpand) {
-      if (stateAfterExpand === undefined) {
-        setStateAfterExpand(mosaicNode);
-        return;
-      }
-      if (!isEqual(mosaicNode, stateAfterExpand)) {
-        setEnableUnexpand(false);
-        setStateAfterExpand(undefined);
-      }
-    }
-  }, [enableUnexpand, mosaicNode, stateAfterExpand]);
-  var onClose = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!shouldPreventCloseView) {
-              _context.next = 7;
-              break;
-            }
-            _context.next = 3;
-            return confirmDialog({
-              title: t('workspace-control-close-message-title'),
-              description: t('workspace-control-close-message-description'),
-              confirmLabel: t('workspace-control-close')
-            });
-          case 3:
-            actions.remove(path);
-            removeLinkedMap(panelId);
-            _context.next = 9;
-            break;
-          case 7:
-            actions.remove(path);
-            removeLinkedMap(panelId);
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function onClose() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  return jsxs(Fragment, {
-    children: [jsx(LinkMenuConnect, {
-      panelId: panelId
-    }), jsx(CustomIconButton, {
-      "data-testid": "split-horizontal-btn",
-      sx: buttonStyle,
-      onClick: function onClick() {
-        var newNode = createNode();
-        var previousNode = getAndAssertNodeAtPathExists(actions.getRoot(), path);
-        actions.replaceWith(path, {
-          direction: 'column',
-          first: previousNode,
-          second: newNode
-        });
-      },
-      tooltipTitle: t('workspace-control-split-horizontal'),
-      children: jsx(SplitVertical, {})
-    }), jsx(CustomIconButton, {
-      "data-testid": "split-vertical-btn",
-      sx: buttonStyle,
-      onClick: function onClick() {
-        var newNode = createNode();
-        var previousNode = getAndAssertNodeAtPathExists(actions.getRoot(), path);
-        actions.replaceWith(path, {
-          direction: 'row',
-          first: previousNode,
-          second: newNode
-        });
-      },
-      tooltipTitle: t('workspace-control-split-vertical'),
-      children: jsx(SplitHorizontal, {})
-    }), !enableUnexpand || isString(mosaicNode) ? jsx(CustomIconButton, {
-      "data-testid": "expand-btn",
-      sx: buttonStyle,
-      onClick: function onClick() {
-        setStateBeforeExpand(mosaicNode);
-        setEnableUnexpand(true);
-        actions.expand(path, 70);
-      },
-      tooltipTitle: t('workspace-control-expand'),
-      children: jsx(Expand, {})
-    }) : jsx(CustomIconButton, {
-      "data-testid": "unexpand-btn",
-      sx: buttonStyle,
-      onClick: function onClick() {
-        var stateBeforeExpandCopy = isString(stateBeforeExpand) ? stateBeforeExpand : Object.assign({}, stateBeforeExpand);
-        actions.replaceWith([], stateBeforeExpandCopy);
-      },
-      tooltipTitle: t('workspace-control-unexpand'),
-      children: jsx(UnExpand, {})
-    }), jsx(CustomIconButton, {
-      "data-testid": "close-btn",
-      sx: buttonStyle,
-      onClick: onClose,
-      tooltipTitle: t('workspace-control-close'),
-      id: "close-window-button",
-      children: jsx(Close, {})
-    })]
-  });
-};
-
-var WorkspaceTileConnect = /*#__PURE__*/React.memo(function (_ref) {
-  var _ref$mosaicNodeId = _ref.mosaicNodeId,
-    mosaicNodeId = _ref$mosaicNodeId === void 0 ? '' : _ref$mosaicNodeId,
-    path = _ref.path,
-    componentsLookUp = _ref.componentsLookUp;
-  var dispatch = useDispatch();
-  useFetchViewPresets(mosaicNodeId);
-  var view = useSelector(function (store) {
-    return getViewById(store, mosaicNodeId);
-  });
-  var viewIds = useSelector(function (store) {
-    return getViewIds(store);
+  var _useAuthenticationCon = useAuthenticationContext(),
+    currentRole = _useAuthenticationCon.currentRole,
+    isLoggedIn = _useAuthenticationCon.isLoggedIn,
+    auth = _useAuthenticationCon.auth;
+  var isAdmin = (currentRole == null ? void 0 : currentRole.name) === GEOWEB_ROLE_PRESETS_ADMIN.name;
+  var workspaceView = useSelector(function (store) {
+    var _workspaceSelectors$g;
+    var _ref2 = (_workspaceSelectors$g = getViewById(store, panelId)) != null ? _workspaceSelectors$g : {},
+      title = _ref2.title,
+      scope = _ref2.scope,
+      restProps = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
+    return Object.assign({
+      title: title,
+      scope: scope
+    }, restProps);
+  }, shallowEqual);
+  var viewComponentType = useSelector(function (store) {
+    return getViewComponentType(store, panelId);
   });
-  var shouldPreventCloseView = useSelector(function (store) {
-    return getShouldPreventClose(store, mosaicNodeId);
+  var hasViewPresetChanges = useSelector(function (store) {
+    return getViewPresetHasChanges(store, panelId);
   });
-  var isViewPresetDialogOpen = useSelector(function (store) {
-    return getIsViewPresetListDialogOpen(store, mosaicNodeId);
+  var activeViewPresetId = useSelector(function (store) {
+    return getViewPresetActiveId(store, panelId);
   });
-  var isViewPresetsFetching = useSelector(function (store) {
-    return getViewPresetsIsFetching(store, mosaicNodeId);
+  var relatedSyncGroupIds = useSelector(function (store) {
+    return syncGroupsSelectors.getAllTargetGroupsForSource(store, panelId);
   });
-  var errorViewPreset = useSelector(function (store) {
-    return getViewPresetDetailError(store, mosaicNodeId);
+  var currentViewPreset = useSelector(function (store) {
+    return workspaceView.id ? getViewPresetFromList(store, workspaceView.id) : undefined;
   });
-  var addView = React.useCallback(function (view) {
-    dispatch(workspaceActions.setNewWorkspaceView(view));
-  }, [dispatch]);
-  var registerView = React.useCallback(function (_ref2) {
-    var panelId = _ref2.panelId,
-      mapPresetId = _ref2.mapPresetId;
-    dispatch(viewPresetActions.registerViewPreset({
-      panelId: panelId,
-      viewPresetId: mapPresetId
+  var presetAbstract = workspaceView == null ? void 0 : workspaceView["abstract"];
+  var isNewActive = activeViewPresetId === '';
+  var title = workspaceView.title || t('workspace-mappreset-new');
+  var viewScope = workspaceView.scope;
+  var fullTitle = getPresetTitle(title, hasViewPresetChanges, isNewActive, t);
+  var openViewPresetsDialog = React.useCallback(function (viewPresetDialogOptions) {
+    dispatch(viewPresetActions.openViewPresetDialog({
+      viewPresetDialog: viewPresetDialogOptions
     }));
   }, [dispatch]);
-  var unregisterView = React.useCallback(function (_ref3) {
-    var panelId = _ref3.panelId;
-    dispatch(viewPresetActions.unregisterViewPreset({
-      panelId: panelId
+  var currentWarningsPreset = useSelector(function (store) {
+    return publicWarningsSelectors.getWarningsPresetById(store, panelId);
+  });
+  var constructInitialProps = React.useCallback(function () {
+    switch (viewComponentType) {
+      case 'WarningList':
+        return currentWarningsPreset;
+      case 'TimeSeries':
+        return timeSeriesSelectors.getTimeSeriesPreset(store.getState());
+      case 'Map':
+        return {
+          mapPreset: mapSelectors.getMapPreset(store.getState(), panelId),
+          syncGroupsIds: relatedSyncGroupIds
+        };
+      default:
+        return undefined;
+    }
+  }, [currentWarningsPreset, panelId, relatedSyncGroupIds, store, viewComponentType]);
+  var onSave = React.useCallback(function () {
+    dispatch(viewPresetActions.saveViewPreset({
+      panelId: panelId,
+      viewPresetId: activeViewPresetId,
+      viewPreset: Object.assign({}, emptyViewPreset(viewComponentType), {
+        title: title,
+        initialProps: constructInitialProps()
+      })
     }));
-  }, [dispatch]);
-  var removeLinkedMap = React.useCallback(function (panelId) {
-    dispatch(genericActions.removeLinkedMap(panelId));
-  }, [dispatch]);
-  var toggleViewPresetDialog = React.useCallback(function (_ref4) {
-    var panelId = _ref4.panelId,
-      isViewPresetDialogOpen = _ref4.isViewPresetDialogOpen;
+  }, [activeViewPresetId, constructInitialProps, dispatch, panelId, title, viewComponentType]);
+  var onDelete = React.useCallback(function () {
+    openViewPresetsDialog({
+      title: t('workspace-mappreset-dialog-title-delete'),
+      action: PresetAction.DELETE,
+      viewPresetId: activeViewPresetId,
+      panelId: panelId,
+      formValues: {
+        title: title,
+        "abstract": presetAbstract
+      }
+    });
+  }, [activeViewPresetId, openViewPresetsDialog, panelId, title, presetAbstract, t]);
+  var onSaveAs = React.useCallback(function () {
+    var formTitle = activeViewPresetId ? title : '';
+    openViewPresetsDialog({
+      title: t('workspace-mappreset-save-as'),
+      action: PresetAction.SAVE_AS,
+      viewPresetId: activeViewPresetId,
+      panelId: panelId,
+      formValues: {
+        title: formTitle,
+        initialProps: constructInitialProps(),
+        "abstract": presetAbstract
+      }
+    });
+  }, [activeViewPresetId, constructInitialProps, openViewPresetsDialog, panelId, t, title, presetAbstract]);
+  var onEdit = React.useCallback(function () {
+    var formTitle = activeViewPresetId ? title : '';
+    openViewPresetsDialog({
+      title: t('workspace-mappreset-dialog-title-edit'),
+      action: PresetAction.EDIT,
+      panelId: panelId,
+      viewPresetId: activeViewPresetId,
+      formValues: {
+        title: formTitle,
+        initialProps: constructInitialProps(),
+        "abstract": presetAbstract
+      }
+    });
+  }, [activeViewPresetId, constructInitialProps, openViewPresetsDialog, panelId, t, title, presetAbstract]);
+  var onReset = React.useCallback(function () {
+    openViewPresetsDialog({
+      title: t('workspace-reset-title'),
+      action: PresetAction.RESET,
+      viewPresetId: activeViewPresetId,
+      panelId: panelId,
+      formValues: {
+        title: title
+      }
+    });
+  }, [activeViewPresetId, openViewPresetsDialog, panelId, t, title]);
+  var toggleViewPresetDialog = React.useCallback(function (_ref3) {
+    var panelId = _ref3.panelId,
+      isViewPresetDialogOpen = _ref3.isViewPresetDialogOpen;
     dispatch(viewPresetActions.toggleViewPresetListDialog({
       panelId: panelId,
       isViewPresetListDialogOpen: isViewPresetDialogOpen
     }));
   }, [dispatch]);
-  var createNode = React.useCallback(function () {
-    var newId = getUniqueId(viewIds);
-    addView({
-      componentType: 'Map',
-      mosaicNodeId: mosaicNodeId,
-      newId: newId
-    });
-    return newId;
-  }, [addView, mosaicNodeId, viewIds]);
-  var title = (view == null ? void 0 : view.title) || (view == null ? void 0 : view.id) || mosaicNodeId;
-  React.useEffect(function () {
-    var viewPresetId = (view == null ? void 0 : view.id) || '';
-    registerView({
-      panelId: mosaicNodeId,
-      mapPresetId: viewPresetId
-    });
-    return function () {
-      unregisterView({
-        panelId: mosaicNodeId
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [registerView, unregisterView]);
-  // generic componentsLookUp
-  var genericComponentsLookupResult = React.useMemo(function () {
-    return componentsLookUp({
-      title: title,
-      id: mosaicNodeId,
-      componentType: view == null ? void 0 : view.componentType,
-      initialProps: view == null ? void 0 : view.initialProps
-    });
-  }, [componentsLookUp, mosaicNodeId, title, view == null ? void 0 : view.componentType, view == null ? void 0 : view.initialProps]);
-  // default componentsLookUp
-  var defaultComponentsLookupResult = React.useMemo(function () {
-    return defaultComponentsLookUp({
-      viewPresetId: view == null ? void 0 : view.id,
-      componentType: view == null ? void 0 : view.componentType,
-      mosaicNodeId: mosaicNodeId
+  var onClickOpenViewPreset = React.useCallback(function () {
+    toggleViewPresetDialog({
+      panelId: panelId,
+      isViewPresetDialogOpen: !isViewPresetDialogOpen
     });
-  }, [mosaicNodeId, view == null ? void 0 : view.componentType, view == null ? void 0 : view.id]);
-  return jsxs(MosaicWindow, {
-    path: path,
-    createNode: createNode,
-    title: jsx(WorkspaceViewTitleConnect, {
-      panelId: mosaicNodeId,
-      isViewPresetDialogOpen: isViewPresetDialogOpen || false
-    }),
-    toolbarControls: jsx(WorkspaceControls, {
-      panelId: mosaicNodeId,
-      createNode: createNode,
-      path: path,
-      shouldPreventCloseView: shouldPreventCloseView,
-      removeLinkedMap: removeLinkedMap
-    }),
-    children: [isViewPresetsFetching && jsx(LinearProgress, {
-      "data-testid": "loading-bar",
-      color: "secondary",
-      sx: {
-        position: 'absolute',
-        width: '100%',
-        top: 0,
-        zIndex: 1001
-      }
-    }), errorViewPreset && jsx(Box, {
+  }, [isViewPresetDialogOpen, panelId, toggleViewPresetDialog]);
+  renderCounter.count(WorkspaceViewTitleConnectNoMemo.name);
+  var viewpresetCreator = (currentViewPreset == null ? void 0 : currentViewPreset.username) || '';
+  var isUserPresetCreator = (auth == null ? void 0 : auth.username) === viewpresetCreator;
+  var currentViewScope = viewScope || 'system';
+  var isEnabled = (currentViewScope === 'user' && isUserPresetCreator || isAdmin && currentViewScope === 'system') && activeViewPresetId !== '' && isLoggedIn;
+  return (
+    // Zero-length string assignment prevents showing title as an empty object '[object Object]'.
+    // in child components. This is a workaround for a limitation in the Tooltip component.
+    jsxs(Grid, {
+      title: "",
       sx: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        zIndex: 1002
-      },
-      children: jsx(AlertBanner, {
-        title: errorViewPreset,
-        shouldClose: true
-      })
-    }), defaultComponentsLookupResult, genericComponentsLookupResult, jsx(ViewPresetMenu, {
-      panelId: mosaicNodeId,
-      closeMenu: function closeMenu() {
-        toggleViewPresetDialog({
-          panelId: mosaicNodeId,
-          isViewPresetDialogOpen: false
-        });
+        display: 'flex',
+        flexGrow: 3,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between'
       },
-      isOpen: isViewPresetDialogOpen
-    })]
-  });
-}, isEqual);
+      children: [jsxs(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          flexGrow: 1,
+          minWidth: 0,
+          gap: 1
+        },
+        children: [jsx(CustomTooltip, {
+          title: !isViewPresetDialogOpen && jsxs(Fragment, {
+            children: [jsx(Box, {
+              component: "span",
+              sx: {
+                fontWeight: 'bold',
+                display: 'block'
+              },
+              children: t('workspace-viewpreset-menu')
+            }), jsx(Box, {
+              component: "span",
+              children: t('workspace-currently') + ": " + title
+            })]
+          }),
+          TransitionProps: {
+            exit: false
+          },
+          children: jsxs(CustomToggleButton, {
+            variant: "tool",
+            "data-testid": "open-viewpresets",
+            selected: isViewPresetDialogOpen,
+            onClick: onClickOpenViewPreset,
+            disableRipple: true,
+            sx: {
+              flexShrink: 1,
+              minWidth: 0,
+              maxWidth: 220,
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              textAlign: 'left',
+              fontSize: '12px',
+              fontWeight: 500,
+              fontStyle: hasViewPresetChanges || isNewActive ? 'italic' : undefined,
+              height: 20,
+              overflow: 'hidden',
+              '&&': {
+                textTransform: 'none',
+                backgroundColor: !isViewPresetDialogOpen ? 'transparent' : 'geowebColors.workspace.tabButtonHover',
+                '&:hover': {
+                  backgroundColor: 'geowebColors.workspace.tabButtonHover'
+                }
+              }
+            },
+            children: [jsx(Box, {
+              component: "span",
+              sx: {
+                flexGrow: 1,
+                flexShrink: 1,
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                paddingRight: '2px'
+              },
+              children: fullTitle
+            }), panelId && jsx(Box, {
+              component: "span",
+              sx: {
+                flexShrink: 0,
+                ml: 1,
+                fontStyle: 'normal',
+                fontWeight: 400,
+                whiteSpace: 'nowrap',
+                color: isViewPresetDialogOpen ? 'geowebColors.text.inverse' : 'geowebColors.captions.captionStatus.rgba'
+              },
+              children: panelId
+            })]
+          })
+        }), jsx(WorkspaceOptions, {
+          handleSave: isEnabled ? onSave : undefined,
+          handleDelete: isEnabled ? onDelete : undefined,
+          handleSaveAs: isLoggedIn ? onSaveAs : undefined,
+          handleEdit: isEnabled ? onEdit : undefined,
+          handleReset: onReset,
+          id: viewPresetOptionId
+        })]
+      }), jsx(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          pt: 0.72
+        },
+        children: jsx(LoadingIndicatorConnect, {
+          panelId: panelId
+        })
+      })]
+    })
+  );
+};
+var WorkspaceViewTitleConnect = /*#__PURE__*/React.memo(WorkspaceViewTitleConnectNoMemo);
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var getUniqueId = function getUniqueId(existingIds, count) {
+  if (count === void 0) {
+    count = 1;
+  }
+  var newId = count + "_screen";
+  if (existingIds.indexOf(newId) !== -1) {
+    return getUniqueId(existingIds, count + 1);
+  }
+  return newId;
+};
+var createBalancedMosaicNode = function createBalancedMosaicNode(currentNode) {
+  var leaves = getLeaves(currentNode);
+  return createBalancedTreeFromLeaves(leaves);
+};
+var closeDialogsWhenChangingPreset = function closeDialogsWhenChangingPreset(componentTypes, dispatch) {
+  if (!componentTypes || componentTypes.length === 0 || componentTypes.some(function (componentType) {
+    return componentType.toLowerCase().includes('viewloading');
+  })) {
+    return;
+  }
+  // Close all dialogs related to timeseries
+  if (!componentTypes.some(function (componentType) {
+    return componentType.toLowerCase().includes('timeseries');
+  })) {
+    dispatch(uiActions.setToggleOpenDialog({
+      setOpen: false,
+      type: uiTypes.DialogTypes.TimeSeriesManager
+    }));
+    dispatch(uiActions.setToggleOpenDialog({
+      setOpen: false,
+      type: uiTypes.DialogTypes.TimeSeriesSelect
+    }));
+    dispatch(uiActions.setToggleOpenDialog({
+      setOpen: false,
+      type: uiTypes.DialogTypes.TimeSeriesInfo
+    }));
+    dispatch(uiActions.setToggleOpenDialog({
+      setOpen: false,
+      type: uiTypes.DialogTypes.TimeSeriesLocationInfo
+    }));
+  }
+  // Close all dialogs related to soundings
+  if (!componentTypes.some(function (componentType) {
+    return componentType.toLowerCase().includes('soundings');
+  })) {
+    dispatch(uiActions.setToggleOpenDialog({
+      setOpen: false,
+      type: uiTypes.DialogTypes.SoundingsLocations
+    }));
+    dispatch(uiActions.setToggleOpenDialog({
+      setOpen: false,
+      type: uiTypes.DialogTypes.SoundingsSources
+    }));
+  }
+  // Close dialogs related to the warninglist
+  if (!componentTypes.some(function (componentType) {
+    return componentType.toLowerCase().includes('warninglist');
+  }) && !componentTypes.some(function (componentType) {
+    return componentType.toLowerCase().includes('map');
+  })) {
+    dispatch(uiActions.setToggleOpenDialog({
+      setOpen: false,
+      type: uiTypes.DialogTypes.PublicWarnings
+    }));
+  }
+};
 
-var WorkspaceView = function WorkspaceView(_ref) {
-  var screenConfig = _ref.screenConfig,
-    componentsLookUp = _ref.componentsLookUp,
-    updateViews = _ref.updateViews,
-    activeWindowId = _ref.activeWindowId,
-    setActiveWindowId = _ref.setActiveWindowId,
-    _ref$isWorkspaceLoadi = _ref.isWorkspaceLoading,
-    isWorkspaceLoading = _ref$isWorkspaceLoadi === void 0 ? false : _ref$isWorkspaceLoadi;
+var LinkMenuConnect = function LinkMenuConnect(_ref) {
+  var panelId = _ref.panelId;
+  var dispatch = useDispatch();
   var _useWorkspaceTranslat = useWorkspaceTranslation(),
     t = _useWorkspaceTranslat.t;
-  var EmptyView = !isWorkspaceLoading && jsxs(Box, {
-    sx: {
-      backgroundColor: 'geowebColors.background.surface',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%'
-    },
-    children: [jsx(WebAssetOff, {
-      sx: {
-        fontSize: '150px',
-        margin: '20px'
-      }
-    }), jsx(Typography, {
-      sx: {
-        color: 'geowebColors.typographyAndIcons.text'
-      },
-      children: t('geoweb-welcome')
-    })]
+  var _React$useState = React__default.useState(null),
+    anchorEl = _React$useState[0],
+    setAnchorEl = _React$useState[1];
+  var maps = useSelector(function (store) {
+    return mapSelectors.getAllMapIds(store);
   });
-  useControlActiveWindowId(screenConfig, activeWindowId, setActiveWindowId);
-  var getNewViewId = function getNewViewId(element, viewId) {
-    if (element instanceof Element) {
-      // Check if a windows close button was clicked
-      var target = element.closest('#close-window-button');
-      if (target) {
-        var viewIds = screenConfig.views.allIds;
-        var newViewId = viewIds.length === 0 ? undefined : activeWindowId;
-        return newViewId;
-      }
-    }
-    return viewId;
+  var viewsById = useSelector(getViewsById);
+  var selectedMapIds = useSelector(function (store) {
+    return genericSelectors.getLinkedMaps(store, panelId);
+  });
+  var viewComponentType = useSelector(function (store) {
+    return getViewComponentType(store, panelId);
+  });
+  var sharedFeature = useSelector(function (store) {
+    return genericSelectors.getSelectedFeature(store.syncGroups, panelId);
+  });
+  var mapPinLocation = useSelector(function (store) {
+    return mapSelectors.getPinLocation(store, selectedMapIds[0] || '');
+  });
+  var handleLinkViews = function handleLinkViews(event) {
+    setAnchorEl(event.currentTarget);
   };
-  var handleClickOnWindow = function handleClickOnWindow(event, viewId) {
-    var target = event.target;
-    var newViewId = getNewViewId(target, viewId);
-    if (newViewId !== activeWindowId) {
-      setActiveWindowId(newViewId);
+  var handleMenuClose = function handleMenuClose() {
+    setAnchorEl(null);
+  };
+  var handleMapSelect = function handleMapSelect(mapId) {
+    var updatedMapIds = selectedMapIds.includes(mapId) ? selectedMapIds.filter(function (id) {
+      return id !== mapId;
+    }) : [].concat(selectedMapIds, [mapId]);
+    dispatch(genericActions.updateLinkedMap({
+      panelId: panelId,
+      mapIds: updatedMapIds
+    }));
+    // Sync pin to newly added map for TimeSeries components
+    if (!selectedMapIds.includes(mapId) && viewComponentType === 'TimeSeries') {
+      // Observation station
+      if (sharedFeature) {
+        dispatch(mapActions.setMapPinLocation({
+          mapId: mapId,
+          mapPinLocation: {
+            lon: sharedFeature.lon,
+            lat: sharedFeature.lat
+          }
+        }));
+        // Grid
+      } else if (mapPinLocation) {
+        dispatch(mapActions.setMapPinLocation({
+          mapId: mapId,
+          mapPinLocation: mapPinLocation
+        }));
+      }
     }
   };
-  return jsx(Box, {
-    sx: {
-      height: '100%',
-      '.geoweb-mosaic .mosaic-window-title': {
-        fontWeight: 'bold',
-        fontSize: '12px',
-        userSelect: 'none'
+  return jsxs(Fragment, {
+    children: [linkComponentTypesConstants.supportedComponentTypesForLinking.includes(viewComponentType) && jsx(CustomIconButton, {
+      onClick: handleLinkViews,
+      "data-testid": "icon-button",
+      tooltipTitle: "Link " + viewComponentType,
+      sx: {
+        marginLeft: 0.5,
+        marginRight: 0.5
       },
-      '.geoweb-mosaic .mosaic-window-body': {
-        backgroundColor: 'geowebColors.background.surfaceApp'
-      }
-    },
-    children: jsx(Mosaic, {
-      className: "geoweb-mosaic",
-      zeroStateView: EmptyView || undefined,
-      initialValue: screenConfig.mosaicNode,
-      renderTile: function renderTile(viewId, path) {
-        var windowIsActive = viewId === activeWindowId;
-        return jsx(Box, {
-          onClick: function onClick(event) {
-            return handleClickOnWindow(event, viewId);
-          },
-          // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-          sx: function sx(theme) {
-            return {
-              '> *': {
-                height: '100%',
-                width: '100%'
-              },
-              '.mosaic-window .mosaic-window-toolbar': {
-                backgroundColor: windowIsActive ? theme.palette.geowebColors.workspace.activeWindow : theme.palette.geowebColors.workspace.inactiveWindow
-              },
-              '.mosaic-window-toolbar .MuiSvgIcon-root': {
-                fill: windowIsActive ? theme.palette.geowebColors.buttons.flat["default"].color : theme.palette.geowebColors.buttons.flat.disabled.color
-              },
-              '#close-window-button .MuiSvgIcon-root': {
-                fill: theme.palette.geowebColors.buttons.flat.disabled.color
+      children: selectedMapIds.length > 0 ? jsx(Link, {
+        "data-testid": "link-icon",
+        style: {
+          fill: anchorEl ? 'white' : undefined,
+          backgroundColor: anchorEl ? '#186DFF' : undefined
+        }
+      }) : jsx(LinkOff, {
+        "data-testid": "link-off-icon",
+        style: {
+          fill: anchorEl ? 'white' : undefined,
+          backgroundColor: anchorEl ? '#186DFF' : undefined
+        }
+      })
+    }), jsxs(Menu, {
+      id: "map-select-menu",
+      "data-testid": "map-select-menu",
+      anchorEl: anchorEl,
+      open: Boolean(anchorEl),
+      onClose: handleMenuClose,
+      keepMounted: true,
+      children: [jsxs(Typography, {
+        variant: "h6",
+        style: {
+          padding: '10px 15px 0',
+          fontWeight: 'bold'
+        },
+        children: [t('workspace-link'), " - ", t('workspace-link-location-header')]
+      }), jsx(List, {
+        dense: true,
+        children: maps.map(function (mapId) {
+          var _viewsById$mapId;
+          var labelId = "checkbox-link-label-" + mapId;
+          return jsx(ListItem, {
+            onClick: function onClick() {
+              return handleMapSelect(mapId);
+            },
+            disablePadding: true,
+            dense: true,
+            divider: true,
+            children: jsxs(ListItemButton, {
+              role: "checkbox",
+              dense: true,
+              sx: {
+                margin: 0,
+                padding: '0 16px'
               },
-              '.mosaic-window-toolbar .mosaic-window-title': {
-                color: windowIsActive ? theme.palette.geowebColors.typographyAndIcons.text : theme.palette.geowebColors.typographyAndIcons.inactiveText
-              }
-            };
-          },
-          children: jsx(WorkspaceTileConnect, {
-            mosaicNodeId: viewId,
-            path: path,
-            componentsLookUp: componentsLookUp
-          })
-        });
-      },
-      onRelease: function onRelease(node) {
-        return updateViews(node);
-      },
-      resize: {
-        minimumPaneSizePercentage: screenConfig.minimumPaneSizePercentage || 20
-      }
-    })
+              children: [jsx(ListItemIcon, {
+                children: jsx(Checkbox, {
+                  edge: "start",
+                  tabIndex: -1,
+                  checked: selectedMapIds.includes(mapId),
+                  disableRipple: true,
+                  inputProps: {
+                    'aria-labelledby': labelId
+                  }
+                })
+              }), jsx(ListItemText, {
+                id: labelId,
+                primary: (_viewsById$mapId = viewsById[mapId]) == null ? void 0 : _viewsById$mapId.title,
+                secondary: mapId
+              })]
+            })
+          }, mapId);
+        })
+      })]
+    })]
   });
 };
-var useControlActiveWindowId = function useControlActiveWindowId(screenConfig, activeWindowId, setActiveWindowId) {
-  // When screenConfig.id changes it means a new preset was chosen.
-  React.useEffect(function () {
-    if (screenConfig.id !== '' && screenConfig.mosaicNode) {
-      var mosaicNode = screenConfig.mosaicNode;
-      while (!isString(mosaicNode)) {
-        mosaicNode = mosaicNode.first;
-      }
-      setActiveWindowId(mosaicNode);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screenConfig.id]);
-  // If active window is no longer in screenConfig then set active window to first window
-  React.useEffect(function () {
-    var viewIds = screenConfig.views.allIds;
-    if (activeWindowId !== undefined && viewIds && viewIds.length > 0 && !viewIds.includes(activeWindowId)) {
-      setActiveWindowId(viewIds[0]);
-    }
-  }, [activeWindowId, screenConfig.views, screenConfig.views.allIds, setActiveWindowId]);
-};
 
-var WorkspaceViewConnect = function WorkspaceViewConnect(_ref) {
-  var componentsLookUp = _ref.componentsLookUp;
-  var dispatch = useDispatch();
-  var isWorkspaceLoading$1 = useSelector(function (store) {
-    return isWorkspaceLoading(store);
-  });
-  var screenConfig = useSelector(function (store) {
-    return getWorkspaceState(store);
-  });
-  var updateViews = useCallback(function (currentNode) {
-    dispatch(workspaceActions.updateWorkspaceViews({
-      mosaicNode: currentNode
-    }));
-  }, [dispatch]);
-  var setActiveWindowId = useCallback(function (activeWindowId) {
-    dispatch(uiActions.setActiveWindowId({
-      activeWindowId: activeWindowId
-    }));
-  }, [dispatch]);
-  var activeWindowId = useSelector(uiSelectors.getActiveWindowId);
+var buttonStyle = {
+  marginLeft: 0.5,
+  marginRight: 0.5
+};
+var WorkspaceControls = function WorkspaceControls(_ref) {
+  var panelId = _ref.panelId,
+    createNode = _ref.createNode,
+    path = _ref.path,
+    _ref$shouldPreventClo = _ref.shouldPreventCloseView,
+    shouldPreventCloseView = _ref$shouldPreventClo === void 0 ? false : _ref$shouldPreventClo,
+    removeLinkedMap = _ref.removeLinkedMap;
+  var confirmDialog = useConfirmationDialog();
+  var _React$useContext = React.useContext(MosaicContext),
+    actions = _React$useContext.mosaicActions;
+  var _useWorkspaceTranslat = useWorkspaceTranslation(),
+    t = _useWorkspaceTranslat.t;
   var mosaicNode = useSelector(function (store) {
     return getMosaicNode(store);
   });
-  var autoArrange = useCallback(function () {
-    dispatch(workspaceActions.updateWorkspaceViews({
-      mosaicNode: createBalancedMosaicNode(mosaicNode)
+  var _React$useState = React.useState(),
+    stateAfterExpand = _React$useState[0],
+    setStateAfterExpand = _React$useState[1];
+  var _React$useState2 = React.useState(mosaicNode),
+    stateBeforeExpand = _React$useState2[0],
+    setStateBeforeExpand = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    enableUnexpand = _React$useState3[0],
+    setEnableUnexpand = _React$useState3[1];
+  React.useEffect(function () {
+    if (enableUnexpand) {
+      if (stateAfterExpand === undefined) {
+        setStateAfterExpand(mosaicNode);
+        return;
+      }
+      if (!isEqual(mosaicNode, stateAfterExpand)) {
+        setEnableUnexpand(false);
+        setStateAfterExpand(undefined);
+      }
+    }
+  }, [enableUnexpand, mosaicNode, stateAfterExpand]);
+  var onClose = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!shouldPreventCloseView) {
+              _context.next = 7;
+              break;
+            }
+            _context.next = 3;
+            return confirmDialog({
+              title: t('workspace-control-close-message-title'),
+              description: t('workspace-control-close-message-description'),
+              confirmLabel: t('workspace-control-close')
+            });
+          case 3:
+            actions.remove(path);
+            removeLinkedMap(panelId);
+            _context.next = 9;
+            break;
+          case 7:
+            actions.remove(path);
+            removeLinkedMap(panelId);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
     }));
-  }, [dispatch, mosaicNode]);
-  var handleOrientationChange = React__default.useCallback(function () {
-    autoArrange();
-  }, [autoArrange]);
-  var componentTypes = useSelector(function (store) {
-    return getComponentTypesFromActiveViews(store);
-  });
-  React__default.useEffect(function () {
-    closeDialogsWhenChangingPreset(componentTypes, dispatch);
-  }, [componentTypes, dispatch]);
-  React__default.useEffect(function () {
-    window.addEventListener('orientationchange', handleOrientationChange);
-    return function () {
-      return window.removeEventListener('orientationchange', handleOrientationChange);
+    return function onClose() {
+      return _ref2.apply(this, arguments);
     };
-  }, [handleOrientationChange]);
-  return jsx(WorkspaceView, {
-    screenConfig: screenConfig,
-    componentsLookUp: componentsLookUp,
-    updateViews: updateViews,
-    activeWindowId: activeWindowId,
-    setActiveWindowId: setActiveWindowId,
-    isWorkspaceLoading: isWorkspaceLoading$1
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var config = sessionStorageProvider.getConfig();
-var presetBaseUrl = (config == null ? void 0 : config.GW_PRESET_BACKEND_URL) || '';
-var getWorkspace = function getWorkspace(workspaceId, auth) {
-  return fetch(presetBaseUrl + "/workspacepreset/" + workspaceId, {
-    headers: getHeaders(auth)
-  }).then(handleResponse);
-};
-var deleteWorkspace = function deleteWorkspace(workspaceId, auth) {
-  return fetch(presetBaseUrl + "/workspacepreset/" + workspaceId, {
-    headers: getHeaders(auth),
-    method: 'DELETE'
-  }).then(handleResponse);
-};
-var updateWorkspace = function updateWorkspace(workspaceId, data, auth) {
-  return fetch(presetBaseUrl + "/workspacepreset/" + workspaceId, {
-    headers: getHeaders(auth),
-    method: 'PUT',
-    body: JSON.stringify(data)
-  }).then(handleResponse);
-};
-var createWorkspace = function createWorkspace(data, auth) {
-  return fetch(presetBaseUrl + "/workspacepreset", {
-    headers: getHeaders(auth),
-    method: 'POST',
-    body: JSON.stringify(data)
-  }).then(handleResponse);
+  }();
+  return jsxs(Fragment, {
+    children: [jsx(LinkMenuConnect, {
+      panelId: panelId
+    }), jsx(CustomIconButton, {
+      "data-testid": "split-horizontal-btn",
+      sx: buttonStyle,
+      onClick: function onClick() {
+        var newNode = createNode();
+        var previousNode = getAndAssertNodeAtPathExists(actions.getRoot(), path);
+        actions.replaceWith(path, {
+          direction: 'column',
+          first: previousNode,
+          second: newNode
+        });
+      },
+      tooltipTitle: t('workspace-control-split-horizontal'),
+      children: jsx(SplitVertical, {})
+    }), jsx(CustomIconButton, {
+      "data-testid": "split-vertical-btn",
+      sx: buttonStyle,
+      onClick: function onClick() {
+        var newNode = createNode();
+        var previousNode = getAndAssertNodeAtPathExists(actions.getRoot(), path);
+        actions.replaceWith(path, {
+          direction: 'row',
+          first: previousNode,
+          second: newNode
+        });
+      },
+      tooltipTitle: t('workspace-control-split-vertical'),
+      children: jsx(SplitHorizontal, {})
+    }), !enableUnexpand || isString(mosaicNode) ? jsx(CustomIconButton, {
+      "data-testid": "expand-btn",
+      sx: buttonStyle,
+      onClick: function onClick() {
+        setStateBeforeExpand(mosaicNode);
+        setEnableUnexpand(true);
+        actions.expand(path, 70);
+      },
+      tooltipTitle: t('workspace-control-expand'),
+      children: jsx(Expand, {})
+    }) : jsx(CustomIconButton, {
+      "data-testid": "unexpand-btn",
+      sx: buttonStyle,
+      onClick: function onClick() {
+        var stateBeforeExpandCopy = isString(stateBeforeExpand) ? stateBeforeExpand : Object.assign({}, stateBeforeExpand);
+        actions.replaceWith([], stateBeforeExpandCopy);
+      },
+      tooltipTitle: t('workspace-control-unexpand'),
+      children: jsx(UnExpand, {})
+    }), jsx(CustomIconButton, {
+      "data-testid": "close-btn",
+      sx: buttonStyle,
+      onClick: onClose,
+      tooltipTitle: t('workspace-control-close'),
+      id: "close-window-button",
+      children: jsx(Close, {})
+    })]
+  });
 };
 
-var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
-  var _GENERIC$AUTH$error$c;
-  var _useAuthenticationCon = useAuthenticationContext(),
-    currentRole = _useAuthenticationCon.currentRole,
-    isLoggedIn = _useAuthenticationCon.isLoggedIn,
-    auth = _useAuthenticationCon.auth;
-  var username = (auth == null ? void 0 : auth.username) || '';
-  var isAdmin = (currentRole == null ? void 0 : currentRole.name) === GEOWEB_ROLE_PRESETS_ADMIN.name;
-  var scope = !isAdmin ? 'user' : 'system';
-  var workspacePresets = useSelector(function (store) {
-    return getWorkspaceList(store);
+var WorkspaceTileConnect = /*#__PURE__*/React.memo(function (_ref) {
+  var _ref$mosaicNodeId = _ref.mosaicNodeId,
+    mosaicNodeId = _ref$mosaicNodeId === void 0 ? '' : _ref$mosaicNodeId,
+    path = _ref.path,
+    componentsLookUp = _ref.componentsLookUp;
+  var dispatch = useDispatch();
+  useFetchViewPresets(mosaicNodeId);
+  var view = useSelector(function (store) {
+    return getViewById(store, mosaicNodeId);
   });
-  var selectedFilters = useSelector(getWorkspaceListFilters);
-  var filteredPresets = React.useMemo(function () {
-    return filterAndSortPresets(workspacePresets, selectedFilters, username, isAdmin);
-  }, [workspacePresets, selectedFilters, username, isAdmin]);
-  var currentView = useSelector(function (store) {
-    return getWorkspaceState(store);
+  var viewIds = useSelector(function (store) {
+    return getViewIds(store);
   });
-  var workspaceListFilters = useSelector(function (store) {
-    return getWorkspaceListFilters(store, scope, isAdmin);
+  var shouldPreventCloseView = useSelector(function (store) {
+    return getShouldPreventClose(store, mosaicNodeId);
   });
-  var workspaceSearchQuery = useSelector(function (store) {
-    return getWorkspaceListSearchQuery(store);
+  var isViewPresetDialogOpen = useSelector(function (store) {
+    return getIsViewPresetListDialogOpen(store, mosaicNodeId);
   });
-  var isFetching = useSelector(function (store) {
-    return getIsWorkspaceListFetching(store);
+  var isViewPresetsFetching = useSelector(function (store) {
+    return getViewPresetsIsFetching(store, mosaicNodeId);
   });
-  var error = useSelector(function (store) {
-    return getWorkspaceListError(store);
+  var errorViewPreset = useSelector(function (store) {
+    return getViewPresetDetailError(store, mosaicNodeId);
   });
-  var dispatch = useDispatch();
-  var _useWorkspaceTranslat = useWorkspaceTranslation(),
-    t = _useWorkspaceTranslat.t;
-  var fetchWorkspaceList = React.useCallback(function () {
-    var filterParams = constructFilterParams([], workspaceSearchQuery);
-    dispatch(workspaceListActions.fetchWorkspaceList(filterParams));
-  }, [dispatch, workspaceSearchQuery]);
-  var fetchWorkspace = React.useCallback(function (workspaceId) {
-    dispatch(workspaceActions.fetchWorkspace({
-      workspaceId: workspaceId
-    }));
-  }, [dispatch]);
-  var setWorkspaceActionDialogOptions = React.useCallback(function (dialogOptions) {
-    dispatch(workspaceListActions.openWorkspaceActionDialogOptions(dialogOptions));
+  var addView = React.useCallback(function (view) {
+    dispatch(workspaceActions.setNewWorkspaceView(view));
   }, [dispatch]);
-  var toggleSelectFilterChip = React.useCallback(function (id, isSelected) {
-    dispatch(workspaceListActions.toggleSelectFilterChip({
-      id: id,
-      isSelected: isSelected,
-      isAdmin: isAdmin
+  var registerView = React.useCallback(function (_ref2) {
+    var panelId = _ref2.panelId,
+      mapPresetId = _ref2.mapPresetId;
+    dispatch(viewPresetActions.registerViewPreset({
+      panelId: panelId,
+      viewPresetId: mapPresetId
     }));
-  }, [dispatch, isAdmin]);
-  var setSelectAllFilterChip = React.useCallback(function () {
-    dispatch(workspaceListActions.setSelectAllFilterChip());
   }, [dispatch]);
-  var searchFilter = React.useCallback(function (searchQuery) {
-    dispatch(workspaceListActions.searchFilter({
-      searchQuery: searchQuery
+  var unregisterView = React.useCallback(function (_ref3) {
+    var panelId = _ref3.panelId;
+    dispatch(viewPresetActions.unregisterViewPreset({
+      panelId: panelId
     }));
   }, [dispatch]);
-  // If we're loading the `New workspace` preset as defined in the FE, use this instead of retrieving from BE
-  var onClickNewPreset = React.useCallback(function () {
-    dispatch(routerActions.navigateToUrl({
-      url: getWorkspaceRouteUrl()
-    }));
-    dispatch(workspaceListActions.toggleWorkspaceDialog({
-      isWorkspaceListDialogOpen: false
-    }));
-    dispatch(workspaceActions.changeToEmptyMapWorkspace({
-      newMapPresetText: t('workspace-mappreset-new'),
-      newWorkspaceText: t('workspace-new')
+  var removeLinkedMap = React.useCallback(function (panelId) {
+    dispatch(genericActions.removeLinkedMap(panelId));
+  }, [dispatch]);
+  var toggleViewPresetDialog = React.useCallback(function (_ref4) {
+    var panelId = _ref4.panelId,
+      isViewPresetDialogOpen = _ref4.isViewPresetDialogOpen;
+    dispatch(viewPresetActions.toggleViewPresetListDialog({
+      panelId: panelId,
+      isViewPresetListDialogOpen: isViewPresetDialogOpen
     }));
-  }, [dispatch, t]);
-  var onClickWorkspacePreset = function onClickWorkspacePreset(id) {
-    if (id === getEmptyMapWorkspace(t).id) {
-      onClickNewPreset();
-    } else if (!isFetching) {
-      fetchWorkspace(id);
-    }
-  };
-  var onClickFilterChip = function onClickFilterChip(id, shouldSelect) {
-    if (id === 'all') {
-      if (shouldSelect) {
-        setSelectAllFilterChip();
-      }
-    } else {
-      toggleSelectFilterChip(id, shouldSelect);
-    }
-  };
-  var onClickWorkspacePresetOption = function onClickWorkspacePresetOption(presetId, workspaceAction) {
-    // If affectedPreset is the FE defined `New workspace` - use the definition from FE instead of BE
-    var affectedPreset = presetId === getEmptyMapWorkspace(t).id ? getEmptyMapWorkspace(t) : workspacePresets.find(function (preset) {
-      return preset.id === presetId;
+  }, [dispatch]);
+  var createNode = React.useCallback(function () {
+    var newId = getUniqueId(viewIds);
+    addView({
+      componentType: 'Map',
+      mosaicNodeId: mosaicNodeId,
+      newId: newId
     });
-    var presetTitle = affectedPreset == null ? void 0 : affectedPreset.title;
-    switch (workspaceAction) {
-      case WorkspacePresetAction.DUPLICATE:
-      case WorkspacePresetAction.EDIT:
-        {
-          setWorkspaceActionDialogOptions({
-            action: workspaceAction,
-            presetId: presetId,
-            formValues: {
-              title: presetTitle,
-              "abstract": affectedPreset["abstract"],
-              scope: scope
-            }
-          });
-          break;
-        }
-      // case WorkspacePresetAction.SAVE: {
-      // break;
-      // }
-      case WorkspacePresetAction.DELETE:
-        {
-          setWorkspaceActionDialogOptions({
-            action: workspaceAction,
-            presetId: presetId,
-            formValues: {
-              title: presetTitle,
-              scope: scope
-            }
-          });
-          break;
-        }
-      case WorkspacePresetAction.DELETE_SYSTEM_PRESET:
-        {
-          setWorkspaceActionDialogOptions({
-            action: workspaceAction,
-            presetId: presetId,
-            formValues: {
-              title: presetTitle,
-              scope: scope
-            }
-          });
-          break;
-        }
-      case WorkspacePresetAction.SHARE:
-        {
-          void getWorkspace(presetId, auth).then(function (preset) {
-            return updateWorkspace(presetId, Object.assign({}, preset, {
-              is_shared: !preset.is_shared
-            }), auth).then(function () {
-              dispatch(workspaceListActions.onSuccessWorkspacePresetAction({
-                workspaceId: presetId,
-                action: WorkspacePresetAction.SHARE,
-                title: presetTitle,
-                scope: scope,
-                is_shared: preset.is_shared
-              }));
-              fetchWorkspaceList();
-            })["catch"](function (error) {
-              dispatch(workspaceListActions.onErrorWorkspacePresetAction({
-                error: {
-                  message: "" + error,
-                  type: WorkspaceListErrorType.VERBATIM_ERROR,
-                  category: WorkspaceListErrorCategory.GENERIC
-                }
-              }));
-            });
-          });
-          break;
-        }
-      case WorkspacePresetAction.OPEN_TAB:
-        {
-          var url = getWorkspaceRouteUrl(presetId);
-          window.open(url, '_blank');
-          break;
-        }
-    }
-  };
-  var isAllSelected = workspaceListFilters.length > 0 && workspaceListFilters.every(function (filter) {
-    return filter.isSelected;
-  });
-  var shouldHideNewWorkspace = !isAllSelected || workspaceSearchQuery.length > 0;
-  return jsxs(Box, {
-    "data-testid": "workspace-selectlist-connect",
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%'
-    },
-    tabIndex: 0,
-    children: [isFetching && jsx(LinearProgress, {
+    return newId;
+  }, [addView, mosaicNodeId, viewIds]);
+  var title = (view == null ? void 0 : view.title) || (view == null ? void 0 : view.id) || mosaicNodeId;
+  React.useEffect(function () {
+    var viewPresetId = (view == null ? void 0 : view.id) || '';
+    registerView({
+      panelId: mosaicNodeId,
+      mapPresetId: viewPresetId
+    });
+    return function () {
+      unregisterView({
+        panelId: mosaicNodeId
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [registerView, unregisterView]);
+  // generic componentsLookUp
+  var genericComponentsLookupResult = React.useMemo(function () {
+    return componentsLookUp({
+      title: title,
+      id: mosaicNodeId,
+      componentType: view == null ? void 0 : view.componentType,
+      initialProps: view == null ? void 0 : view.initialProps
+    });
+  }, [componentsLookUp, mosaicNodeId, title, view == null ? void 0 : view.componentType, view == null ? void 0 : view.initialProps]);
+  // default componentsLookUp
+  var defaultComponentsLookupResult = React.useMemo(function () {
+    return defaultComponentsLookUp({
+      viewPresetId: view == null ? void 0 : view.id,
+      componentType: view == null ? void 0 : view.componentType,
+      mosaicNodeId: mosaicNodeId
+    });
+  }, [mosaicNodeId, view == null ? void 0 : view.componentType, view == null ? void 0 : view.id]);
+  return jsxs(MosaicWindow, {
+    path: path,
+    createNode: createNode,
+    title: jsx(WorkspaceViewTitleConnect, {
+      panelId: mosaicNodeId,
+      isViewPresetDialogOpen: isViewPresetDialogOpen || false
+    }),
+    toolbarControls: jsx(WorkspaceControls, {
+      panelId: mosaicNodeId,
+      createNode: createNode,
+      path: path,
+      shouldPreventCloseView: shouldPreventCloseView,
+      removeLinkedMap: removeLinkedMap
+    }),
+    children: [isViewPresetsFetching && jsx(LinearProgress, {
       "data-testid": "loading-bar",
       color: "secondary",
       sx: {
         position: 'absolute',
         width: '100%',
         top: 0,
-        left: 0
+        zIndex: 1001
       }
-    }), error && jsx("div", {
-      style: {
-        whiteSpace: 'normal'
+    }), errorViewPreset && jsx(Box, {
+      sx: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        zIndex: 1002
       },
-      children: jsx(AlertBanner, Object.assign({
-        title: (_GENERIC$AUTH$error$c = {
-          GENERIC: '',
-          AUTH: t('workspace-error-auth')
-        }[error.category]) != null ? _GENERIC$AUTH$error$c : t('workspace-error-fetch'),
-        info: error.type === WorkspaceListErrorType.TRANSLATABLE_ERROR ? t(error.key, error.params) : error.message,
+      children: jsx(AlertBanner, {
+        title: errorViewPreset,
         shouldClose: true
-      }, error.category === WorkspaceListErrorCategory.GENERIC && {
-        actionButtonProps: {
-          title: t('workspace-retry'),
-          onClick: function onClick() {
-            return fetchWorkspaceList();
-          }
-        }
-      }))
-    }), jsxs(Box, {
-      sx: {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        padding: 1,
-        overflow: 'hidden'
+      })
+    }), defaultComponentsLookupResult, genericComponentsLookupResult, jsx(ViewPresetMenu, {
+      panelId: mosaicNodeId,
+      closeMenu: function closeMenu() {
+        toggleViewPresetDialog({
+          panelId: mosaicNodeId,
+          isViewPresetDialogOpen: false
+        });
       },
-      children: [!error && jsxs(Box, {
-        sx: {
-          marginBottom: 1
-        },
-        children: [jsx(Box, {
-          sx: {
-            display: 'flex',
-            width: '100%'
-          },
-          children: jsx(Filter, {
-            filters: workspaceListFilters,
-            onClickFilterChip: onClickFilterChip,
-            isAllSelected: isAllSelected,
-            searchQuery: workspaceSearchQuery,
-            onSearch: searchFilter
-          })
-        }), jsx(Box, {
-          sx: {
-            display: 'flex',
-            justifyContent: 'flex-start'
-          },
-          children: jsx(LastUpdateTime, {
-            onPressRefresh: function onPressRefresh() {
-              return fetchWorkspaceList();
-            },
-            hideLabel: true
-          })
-        })]
-      }), jsx(Box, {
-        sx: {
-          flexGrow: 1,
-          minHeight: 0
-        },
-        children: jsx(WorkspaceSelectList, {
-          workspacePresets: filteredPresets,
-          currentSelectedId: currentView.id || '',
-          onClickWorkspacePreset: onClickWorkspacePreset,
-          onClickWorkspacePresetOption: onClickWorkspacePresetOption,
-          hideNewWorkspace: shouldHideNewWorkspace,
-          isEditable: isLoggedIn,
-          isAdmin: isAdmin,
-          searchQuery: workspaceSearchQuery
-        })
-      })]
+      isOpen: isViewPresetDialogOpen
     })]
   });
-};
+}, isEqual);
 
-var WorkspaceMenu = function WorkspaceMenu(_ref) {
-  var _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-    closeMenu = _ref.closeMenu;
+var WorkspaceView = function WorkspaceView(_ref) {
+  var screenConfig = _ref.screenConfig,
+    componentsLookUp = _ref.componentsLookUp,
+    updateViews = _ref.updateViews,
+    activeWindowId = _ref.activeWindowId,
+    setActiveWindowId = _ref.setActiveWindowId,
+    _ref$isWorkspaceLoadi = _ref.isWorkspaceLoading,
+    isWorkspaceLoading = _ref$isWorkspaceLoadi === void 0 ? false : _ref$isWorkspaceLoadi;
   var _useWorkspaceTranslat = useWorkspaceTranslation(),
     t = _useWorkspaceTranslat.t;
-  return jsx(CustomDialog, {
-    open: isOpen,
-    onClose: function onClose() {
-      if (closeMenu) {
-        closeMenu();
-      }
-    },
-    isResizable: true,
-    hasLayout: false,
-    resizableDefaultSize: {
-      width: 380,
-      height: '90%'
+  var EmptyView = !isWorkspaceLoading && jsxs(Box, {
+    sx: {
+      backgroundColor: 'geowebColors.background.surface',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%'
     },
-    slotProps: {
-      backdrop: {
-        style: {
-          top: 40
-        }
-      },
-      root: {
-        style: {
-          top: 40
-        }
+    children: [jsx(WebAssetOff, {
+      sx: {
+        fontSize: '150px',
+        margin: '20px'
       }
-    },
-    "data-testid": "workspace-menu",
-    children: jsx(ToolContainer, {
-      title: t('workspace-menu'),
-      onClose: closeMenu,
-      style: {
-        width: '100%',
-        height: '100%'
-      },
-      onClick: function onClick(event) {
-        event.stopPropagation();
+    }), jsx(Typography, {
+      sx: {
+        color: 'geowebColors.typographyAndIcons.text'
       },
-      children: jsx(WorkspaceSelectListConnect, {})
-    })
+      children: t('geoweb-welcome')
+    })]
   });
-};
-
-var WorkspaceMenuButton = function WorkspaceMenuButton(_ref) {
-  var _ref$showMenu = _ref.showMenu,
-    showMenu = _ref$showMenu === void 0 ? false : _ref$showMenu,
-    _ref$onToggleDialog = _ref.onToggleDialog,
-    onToggleDialog = _ref$onToggleDialog === void 0 ? function () {} : _ref$onToggleDialog;
-  var onCloseMenu = function onCloseMenu() {
-    onToggleDialog(false);
+  useControlActiveWindowId(screenConfig, activeWindowId, setActiveWindowId);
+  var getNewViewId = function getNewViewId(element, viewId) {
+    if (element instanceof Element) {
+      // Check if a windows close button was clicked
+      var target = element.closest('#close-window-button');
+      if (target) {
+        var viewIds = screenConfig.views.allIds;
+        var newViewId = viewIds.length === 0 ? undefined : activeWindowId;
+        return newViewId;
+      }
+    }
+    return viewId;
   };
-  var _useWorkspaceTranslat = useWorkspaceTranslation(),
-    t = _useWorkspaceTranslat.t;
-  var tooltipTitle = t('workspace-menu');
-  return jsxs("div", {
-    children: [jsx(Box, {
-      sx: {
-        padding: '4px 8px',
-        flexGrow: 1
+  var handleClickOnWindow = function handleClickOnWindow(event, viewId) {
+    var target = event.target;
+    var newViewId = getNewViewId(target, viewId);
+    if (newViewId !== activeWindowId) {
+      setActiveWindowId(newViewId);
+    }
+  };
+  return jsx(Box, {
+    sx: {
+      height: '100%',
+      '.geoweb-mosaic .mosaic-window-title': {
+        fontWeight: 'bold',
+        fontSize: '12px',
+        userSelect: 'none'
+      },
+      '.geoweb-mosaic .mosaic-window-body': {
+        backgroundColor: 'geowebColors.background.surfaceApp'
+      }
+    },
+    children: jsx(Mosaic, {
+      className: "geoweb-mosaic",
+      zeroStateView: EmptyView || undefined,
+      initialValue: screenConfig.mosaicNode,
+      renderTile: function renderTile(viewId, path) {
+        var windowIsActive = viewId === activeWindowId;
+        return jsx(Box, {
+          onClick: function onClick(event) {
+            return handleClickOnWindow(event, viewId);
+          },
+          // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+          sx: function sx(theme) {
+            return {
+              '> *': {
+                height: '100%',
+                width: '100%'
+              },
+              '.mosaic-window .mosaic-window-toolbar': {
+                backgroundColor: windowIsActive ? theme.palette.geowebColors.workspace.activeWindow : theme.palette.geowebColors.workspace.inactiveWindow
+              },
+              '.mosaic-window-toolbar .MuiSvgIcon-root': {
+                fill: windowIsActive ? theme.palette.geowebColors.buttons.flat["default"].color : theme.palette.geowebColors.buttons.flat.disabled.color
+              },
+              '#close-window-button .MuiSvgIcon-root': {
+                fill: theme.palette.geowebColors.buttons.flat.disabled.color
+              },
+              '.mosaic-window-toolbar .mosaic-window-title': {
+                color: windowIsActive ? theme.palette.geowebColors.typographyAndIcons.text : theme.palette.geowebColors.typographyAndIcons.inactiveText
+              }
+            };
+          },
+          children: jsx(WorkspaceTileConnect, {
+            mosaicNodeId: viewId,
+            path: path,
+            componentsLookUp: componentsLookUp
+          })
+        });
       },
-      children: jsx(CustomIconButton, {
-        onClick: function onClick() {
-          onToggleDialog(!showMenu);
-        },
-        "data-testid": "workspaceMenuButton",
-        isSelected: showMenu,
-        "aria-label": "workspace menu",
-        variant: "tool",
-        tooltipTitle: tooltipTitle,
-        sx: {
-          '&&': {
-            backgroundColor: !showMenu ? 'transparent' : undefined,
-            '&:hover': {
-              backgroundColor: 'geowebColors.workspace.tabButtonHover'
-            }
-          }
-        },
-        children: jsx(PresetWorkspace, {})
-      })
-    }), jsx(WorkspaceMenu, {
-      isOpen: showMenu,
-      closeMenu: onCloseMenu
-    })]
+      onRelease: function onRelease(node) {
+        return updateViews(node);
+      },
+      resize: {
+        minimumPaneSizePercentage: screenConfig.minimumPaneSizePercentage || 20
+      }
+    })
   });
 };
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2025 - Finnish Meteorological Institute (FMI)
- * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var useFetchWorkspacePresets = function useFetchWorkspacePresets() {
-  var dispatch = useDispatch();
-  var _useAuthenticationCon = useAuthenticationContext(),
-    currentRole = _useAuthenticationCon.currentRole;
-  var isAdmin = (currentRole == null ? void 0 : currentRole.name) === GEOWEB_ROLE_PRESETS_ADMIN.name;
-  var lastAdmin = usePrevious(isAdmin);
-  var workspaceSearchQuery = useSelector(getWorkspaceListSearchQuery);
-  var prevSearch = usePrevious(workspaceSearchQuery);
-  var fetchWorkspacePresets = useCallback(function (params) {
-    dispatch(workspaceListActions.fetchWorkspaceList(params));
-  }, [dispatch]);
-  useEffect(function () {
-    if (workspaceSearchQuery !== prevSearch) {
-      var filterParams = constructFilterParams([], workspaceSearchQuery);
-      fetchWorkspacePresets(filterParams);
+var useControlActiveWindowId = function useControlActiveWindowId(screenConfig, activeWindowId, setActiveWindowId) {
+  // When screenConfig.id changes it means a new preset was chosen.
+  React.useEffect(function () {
+    if (screenConfig.id !== '' && screenConfig.mosaicNode) {
+      var mosaicNode = screenConfig.mosaicNode;
+      while (!isString(mosaicNode)) {
+        mosaicNode = mosaicNode.first;
+      }
+      setActiveWindowId(mosaicNode);
     }
-  }, [fetchWorkspacePresets, prevSearch, workspaceSearchQuery]);
-  useEffect(function () {
-    if (isAdmin !== lastAdmin && lastAdmin !== undefined) {
-      // reset list filter when user changes role
-      var filters = [{
-        id: PresetFilterType.system,
-        isSelected: true
-      }, {
-        id: PresetFilterType.personal,
-        isSelected: !isAdmin
-      }, {
-        id: PresetFilterType.shared,
-        isSelected: true
-      }];
-      dispatch(workspaceListActions.setFilterChips(filters));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenConfig.id]);
+  // If active window is no longer in screenConfig then set active window to first window
+  React.useEffect(function () {
+    var viewIds = screenConfig.views.allIds;
+    if (activeWindowId !== undefined && viewIds && viewIds.length > 0 && !viewIds.includes(activeWindowId)) {
+      setActiveWindowId(viewIds[0]);
     }
-  }, [dispatch, isAdmin, lastAdmin]);
+  }, [activeWindowId, screenConfig.views, screenConfig.views.allIds, setActiveWindowId]);
 };
 
-var WorkspaceMenuButtonConnect = function WorkspaceMenuButtonConnect() {
+var WorkspaceViewConnect = function WorkspaceViewConnect(_ref) {
+  var componentsLookUp = _ref.componentsLookUp;
   var dispatch = useDispatch();
-  var isWorkspaceListDialogOpen = useSelector(function (store) {
-    return getIsWorkspaceListDialogOpen(store);
+  var isWorkspaceLoading$1 = useSelector(function (store) {
+    return isWorkspaceLoading(store);
   });
-  useFetchWorkspacePresets();
-  var setListDialogOpen = React__default.useCallback(function (isListDialogOpen) {
-    dispatch(workspaceListActions.toggleWorkspaceDialog({
-      isWorkspaceListDialogOpen: isListDialogOpen
+  var screenConfig = useSelector(function (store) {
+    return getWorkspaceState(store);
+  });
+  var updateViews = useCallback(function (currentNode) {
+    dispatch(workspaceActions.updateWorkspaceViews({
+      mosaicNode: currentNode
     }));
   }, [dispatch]);
-  return jsx(WorkspaceMenuButton, {
-    showMenu: isWorkspaceListDialogOpen,
-    onToggleDialog: setListDialogOpen
+  var setActiveWindowId = useCallback(function (activeWindowId) {
+    dispatch(uiActions.setActiveWindowId({
+      activeWindowId: activeWindowId
+    }));
+  }, [dispatch]);
+  var activeWindowId = useSelector(uiSelectors.getActiveWindowId);
+  var mosaicNode = useSelector(function (store) {
+    return getMosaicNode(store);
+  });
+  var autoArrange = useCallback(function () {
+    dispatch(workspaceActions.updateWorkspaceViews({
+      mosaicNode: createBalancedMosaicNode(mosaicNode)
+    }));
+  }, [dispatch, mosaicNode]);
+  var handleOrientationChange = React__default.useCallback(function () {
+    autoArrange();
+  }, [autoArrange]);
+  var componentTypes = useSelector(function (store) {
+    return getComponentTypesFromActiveViews(store);
+  });
+  React__default.useEffect(function () {
+    closeDialogsWhenChangingPreset(componentTypes, dispatch);
+  }, [componentTypes, dispatch]);
+  React__default.useEffect(function () {
+    window.addEventListener('orientationchange', handleOrientationChange);
+    return function () {
+      return window.removeEventListener('orientationchange', handleOrientationChange);
+    };
+  }, [handleOrientationChange]);
+  return jsx(WorkspaceView, {
+    screenConfig: screenConfig,
+    componentsLookUp: componentsLookUp,
+    updateViews: updateViews,
+    activeWindowId: activeWindowId,
+    setActiveWindowId: setActiveWindowId,
+    isWorkspaceLoading: isWorkspaceLoading$1
   });
 };
 
 var WorkspaceOptionsConnect = function WorkspaceOptionsConnect(_ref) {
   var title = _ref.title,
-    activeTab = _ref.activeTab,
-    workspaceId = _ref.workspaceId,
-    appTitle = _ref.appTitle;
+    workspaceId = _ref.workspaceId;
   var dispatch = useDispatch();
   var store = useStore();
-  var _useWorkspaceTranslat = useWorkspaceTranslation(),
-    t = _useWorkspaceTranslat.t;
   var _useAuthenticationCon = useAuthenticationContext(),
     currentRole = _useAuthenticationCon.currentRole,
     auth = _useAuthenticationCon.auth;
   var isAdmin = (currentRole == null ? void 0 : currentRole.name) === GEOWEB_ROLE_PRESETS_ADMIN.name;
   var _useAuthenticationCon2 = useAuthenticationContext(),
     isLoggedIn = _useAuthenticationCon2.isLoggedIn;
-  var hasChanges = useSelector(function (store) {
-    return hasWorkspaceChanges(store);
-  });
   var workspaceScope = useSelector(function (store) {
     return getSelectedWorkspaceScope(store);
   });
@@ -8424,19 +8416,15 @@ var WorkspaceOptionsConnect = function WorkspaceOptionsConnect(_ref) {
     return getWorkspaceData(store);
   });
   var currentWorkspacePreset = useSelector(function (store) {
-    return workspaceData.id ? getWorkspacePresetFromList(store, workspaceData.id) : undefined;
+    return workspaceId ? getWorkspacePresetFromList(store, workspaceId) : undefined;
   });
   var workspaceCreator = (currentWorkspacePreset == null ? void 0 : currentWorkspacePreset.username) || '';
   var viewIds = useSelector(function (store) {
     return getViewIds(store);
   });
-  var isNew = workspaceId === undefined || workspaceId === '';
-  var fullTitle = getPresetTitle(title, hasChanges, isNew, t);
+  var isNew = !workspaceId;
   var isUserPreset = workspaceScope === 'user';
   var isUserPresetCreator = (auth == null ? void 0 : auth.username) === workspaceCreator;
-  React.useEffect(function () {
-    setDocumentTitle(fullTitle, appTitle);
-  }, [fullTitle, appTitle]);
   var setWorkspaceActionDialogOptions = React.useCallback(function (dialogOptions) {
     dispatch(workspaceListActions.openWorkspaceActionDialogOptions(dialogOptions));
   }, [dispatch]);
@@ -8541,15 +8529,98 @@ var WorkspaceOptionsConnect = function WorkspaceOptionsConnect(_ref) {
     return isUserPreset && isUserPresetCreator ? onEdit : undefined;
   };
   return jsx(WorkspaceOptions, {
-    hasChanges: hasChanges,
-    title: fullTitle,
-    activeTab: activeTab,
-    handleDelete: getOnDelete(),
-    handleSaveAs: handleSaveAs(),
+    isDisabled: !viewIds.length || !isLoggedIn,
     handleSave: handleSave(),
+    handleSaveAs: handleSaveAs(),
     handleEdit: handleEdit(),
-    handleReset: onReset,
-    isDisabled: !viewIds.length || !isLoggedIn
+    handleDelete: getOnDelete(),
+    handleReset: onReset
+  });
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var useFetchWorkspacePresets = function useFetchWorkspacePresets() {
+  var dispatch = useDispatch();
+  var _useAuthenticationCon = useAuthenticationContext(),
+    currentRole = _useAuthenticationCon.currentRole;
+  var isAdmin = (currentRole == null ? void 0 : currentRole.name) === GEOWEB_ROLE_PRESETS_ADMIN.name;
+  var lastAdmin = usePrevious(isAdmin);
+  var workspaceSearchQuery = useSelector(getWorkspaceListSearchQuery);
+  var prevSearch = usePrevious(workspaceSearchQuery);
+  var fetchWorkspacePresets = useCallback(function (params) {
+    dispatch(workspaceListActions.fetchWorkspaceList(params));
+  }, [dispatch]);
+  useEffect(function () {
+    if (workspaceSearchQuery !== prevSearch) {
+      var filterParams = constructFilterParams([], workspaceSearchQuery);
+      fetchWorkspacePresets(filterParams);
+    }
+  }, [fetchWorkspacePresets, prevSearch, workspaceSearchQuery]);
+  useEffect(function () {
+    if (isAdmin !== lastAdmin && lastAdmin !== undefined) {
+      // reset list filter when user changes role
+      var filters = [{
+        id: PresetFilterType.system,
+        isSelected: true
+      }, {
+        id: PresetFilterType.personal,
+        isSelected: !isAdmin
+      }, {
+        id: PresetFilterType.shared,
+        isSelected: true
+      }];
+      dispatch(workspaceListActions.setFilterChips(filters));
+    }
+  }, [dispatch, isAdmin, lastAdmin]);
+};
+
+var WorkspaceMenuButtonConnect = function WorkspaceMenuButtonConnect(_ref) {
+  var title = _ref.title,
+    workspaceId = _ref.workspaceId,
+    activeTab = _ref.activeTab,
+    appTitle = _ref.appTitle;
+  var dispatch = useDispatch();
+  var _useWorkspaceTranslat = useWorkspaceTranslation(),
+    t = _useWorkspaceTranslat.t;
+  var hasChanges = useSelector(function (store) {
+    return hasWorkspaceChanges(store);
+  });
+  var isWorkspaceListDialogOpen = useSelector(function (store) {
+    return getIsWorkspaceListDialogOpen(store);
+  });
+  var setListDialogOpen = React.useCallback(function (isListDialogOpen) {
+    dispatch(workspaceListActions.toggleWorkspaceDialog({
+      isWorkspaceListDialogOpen: isListDialogOpen
+    }));
+  }, [dispatch]);
+  useFetchWorkspacePresets();
+  var isNew = workspaceId === undefined || workspaceId === '';
+  var fullTitle = getPresetTitle(title, hasChanges, isNew, t);
+  React.useEffect(function () {
+    setDocumentTitle(fullTitle, appTitle);
+  }, [fullTitle, appTitle]);
+  return jsx(WorkspaceMenuButton, {
+    title: fullTitle,
+    activeTab: activeTab,
+    hasChanges: hasChanges,
+    showMenu: isWorkspaceListDialogOpen,
+    onToggleDialog: setListDialogOpen
   });
 };
 
@@ -8565,11 +8636,14 @@ var WorkspaceTab = function WorkspaceTab(_ref) {
       alignItems: 'center'
     },
     "data-testid": "workspaceTab",
-    children: [jsx(WorkspaceMenuButtonConnect, {}), jsx(WorkspaceOptionsConnect, {
+    children: [jsx(WorkspaceMenuButtonConnect, {
       title: title,
-      activeTab: activeTab,
       workspaceId: workspaceId,
+      activeTab: activeTab,
       appTitle: appTitle
+    }), jsx(WorkspaceOptionsConnect, {
+      title: title,
+      workspaceId: workspaceId
     })]
   });
 };