@opengeoweb/workspace 4.20.0 → 4.21.0

package/index.umd.js

@@ -213,6 +213,7 @@
       error: undefined,
       isWorkspaceListDialogOpen: false
     }, workspaceListAdapter.getInitialState()), {
+      searchQuery: '',
       workspaceListFilters: workspaceListFilterOptions
     });
     var slice$3 = toolkit.createSlice({
@@ -252,14 +253,32 @@
           var _a = action.payload,
               id = _a.id,
               isSelected = _a.isSelected;
+          var isAllSelected = draft.workspaceListFilters.every(function (filter) {
+            return filter.isSelected;
+          });
           var index = draft.workspaceListFilters.findIndex(function (filter) {
             return filter.id === id;
           });
 
           if (index !== -1) {
-            draft.workspaceListFilters[index] = __assign(__assign({}, draft.workspaceListFilters[index]), {
-              isSelected: isSelected
-            });
+            if (isAllSelected) {
+              draft.workspaceListFilters.forEach(function (filter, index) {
+                draft.workspaceListFilters[index].isSelected = filter.id === id ? isSelected : false;
+              });
+            } else {
+              draft.workspaceListFilters[index] = __assign(__assign({}, draft.workspaceListFilters[index]), {
+                isSelected: isSelected
+              });
+              var isAllUnSelected = draft.workspaceListFilters.every(function (filter) {
+                return !filter.isSelected;
+              });
+
+              if (isAllUnSelected) {
+                draft.workspaceListFilters.forEach(function (_, index) {
+                  draft.workspaceListFilters[index].isSelected = true;
+                });
+              }
+            }
           }
         },
         setSelectAllFilterChip: function setSelectAllFilterChip(draft) {
@@ -268,36 +287,41 @@
               isSelected: true
             });
           });
+        },
+        searchFilter: function searchFilter(draft, action) {
+          var searchQuery = action.payload.searchQuery;
+          draft.searchQuery = searchQuery;
         }
       }
     });
     var reducer$3 = slice$3.reducer;
     var workspaceListActions = slice$3.actions;
 
+    /* *
+     * 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)
+     * */
     var API_NAME = 'workspacepresets';
     var getIdFromUrl = function getIdFromUrl(url) {
       return url && url.match(/[^/]+$/)[0];
     };
-    var constructFilterParams = function constructFilterParams(filters) {
-      var _a;
-
-      var scopeFilter = ((_a = filters === null || filters === void 0 ? void 0 : filters.scope) === null || _a === void 0 ? void 0 : _a.length) ? {
-        scope: filters.scope.toString()
-      } : {};
-      return __assign({}, scopeFilter);
-    };
 
     var getApiRoutes$1 = function getApiRoutes(axiosInstance) {
       return {
         // workspace presets
-        getWorkspacePresets: function getWorkspacePresets(filters) {
-          if (filters === void 0) {
-            filters = {
-              scope: []
-            };
-          }
-
-          var params = constructFilterParams(filters);
+        getWorkspacePresets: function getWorkspacePresets(params) {
           return axiosInstance.get('/workspacepreset', {
             params: params
           });
@@ -340,8 +364,9 @@
     };
 
     var createApi$1 = function createApi(props) {
-      var instance = api.createApiInstance(props);
-      return getApiRoutes$1(instance);
+      var authInstance = api.createApiInstance(props);
+      var nonAuthInstance = api.createNonAuthApiInstance(props);
+      return getApiRoutes$1(props.auth ? authInstance : nonAuthInstance);
     };
 
     /* *
@@ -651,6 +676,14 @@
         unregisterViewPreset: function unregisterViewPreset(draft, action) {
           var panelId = action.payload.panelId;
           viewPresetsAdapter.removeOne(draft, panelId);
+        },
+        // dialog actions
+        openViewPresetDialog: function openViewPresetDialog(draft, action) {
+          var viewPresetDialog = action.payload.viewPresetDialog;
+          draft.viewPresetDialog = viewPresetDialog;
+        },
+        closeViewPresetDialog: function closeViewPresetDialog(draft) {
+          delete draft.viewPresetDialog;
         }
       },
       extraReducers: function extraReducers(builder) {
@@ -704,7 +737,7 @@
       error: undefined,
       hasChanges: false
     };
-    var workspacePresetChangeActions = [viewPresetActions.selectViewPreset, core.syncGroupActions.syncGroupRemoveGroup, core.syncGroupActions.syncGroupAddGroup];
+    var workspacePresetChangeActions = [viewPresetActions.selectViewPreset, viewPresetActions.setActiveViewPresetId, core.syncGroupActions.syncGroupRemoveGroup, core.syncGroupActions.syncGroupAddGroup];
     var slice$1 = toolkit.createSlice({
       initialState: initialState$3,
       name: 'workspace',
@@ -933,6 +966,9 @@
 
       return (_a = getViewPresetById(store, panelId)) === null || _a === void 0 ? void 0 : _a.activeViewPresetId;
     };
+    var getDialogOptions = function getDialogOptions(store) {
+      return getViewPresetsStore(store).viewPresetDialog || undefined;
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3075,6 +3111,95 @@
     	}
     ];
 
+    /* *
+     * 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)
+     * */
+    var getSnackbarMessage$1 = function getSnackbarMessage(action, title) {
+      // Trim and add quotes
+      var trimmedTitle = "\"" + title.trim() + "\"";
+
+      switch (action) {
+        case exports.WorkspacePresetAction.DELETE:
+          return "Workspace " + trimmedTitle + " successfully deleted";
+
+        case exports.WorkspacePresetAction.DUPLICATE:
+          return "Workspace " + trimmedTitle + " successfully saved";
+
+        default:
+          return "Workspace " + trimmedTitle + " successfully saved";
+      }
+    };
+    var emptyMapWorkspace = {
+      title: 'New workspace',
+      id: 'FEnewWorkspace',
+      "abstract": '',
+      views: {
+        allIds: ['emptyMapView'],
+        byId: {
+          emptyMapView: {
+            title: 'Empty Map',
+            componentType: 'Map',
+            initialProps: {
+              mapPreset: {
+                layers: [],
+                proj: {
+                  bbox: {
+                    left: 58703.6377,
+                    bottom: 6408480.4514,
+                    right: 3967387.5161,
+                    top: 11520588.9031
+                  },
+                  srs: 'EPSG:3857'
+                },
+                shouldShowLayerManager: true,
+                dockedLayerManagerSize: 'sizeSmall'
+              },
+              syncGroupsIds: []
+            }
+          }
+        }
+      },
+      mosaicNode: 'emptyMapView',
+      viewType: 'singleWindow'
+    };
+    var getCleanSearchQuery = function getCleanSearchQuery(searchQuery) {
+      return searchQuery.trim().split(/\s+/).join();
+    };
+    var constructFilterParams = function constructFilterParams(filters, searchQuery) {
+      // get filters
+      var scope = filters.reduce(function (filterList, filter) {
+        if (filter.isSelected && filter.type === 'scope') {
+          return __assign(__assign({}, filter), {
+            scope: filterList.scope.concat(filter.id)
+          });
+        }
+
+        return filterList;
+      }, {
+        scope: []
+      }).scope; // get search
+
+      var search = getCleanSearchQuery(searchQuery);
+      return __assign(__assign({}, scope.length && {
+        scope: scope.toString()
+      }), search.length && {
+        search: search
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -3102,30 +3227,37 @@
         return element.id === viewPresetId;
       });
     };
-    var filterWorkspacePresetList = function filterWorkspacePresetList(scope) {
-      if (scope === void 0) {
-        scope = ['system', 'user'];
+    var filterWorkspacePresetList = function filterWorkspacePresetList(params) {
+      if (lodash.isEmpty(params)) {
+        return workspacePresetsList;
       }
 
-      return workspacePresetsList.filter(function (item) {
-        return scope.includes(item.scope);
-      });
+      return workspacePresetsList.reduce(function (list, workspacePreset) {
+        var _a;
+
+        if ((_a = params === null || params === void 0 ? void 0 : params.scope) === null || _a === void 0 ? void 0 : _a.includes(workspacePreset.scope)) {
+          if (params.search) {
+            var searchQuery = getCleanSearchQuery(params.search);
+            var hasResult = searchQuery.split(',').every(function (query) {
+              return workspacePreset.title.toLowerCase().includes(query.toLowerCase()) || workspacePreset["abstract"].toLowerCase().includes(query.toLowerCase());
+            });
+            return hasResult ? list.concat(workspacePreset) : list;
+          }
+
+          return list.concat(workspacePreset);
+        }
+
+        return list;
+      }, []);
     };
 
     var getApiRoutes = function getApiRoutes(axiosInstance) {
       return {
-        getWorkspacePresets: function getWorkspacePresets(filters) {
-          if (filters === void 0) {
-            filters = {
-              scope: []
-            };
-          }
-
-          var params = constructFilterParams(filters);
+        getWorkspacePresets: function getWorkspacePresets(params) {
           return axiosInstance.get('/workspacepreset', {
             params: params
           }).then(function () {
-            var data = filters.scope.length ? filterWorkspacePresetList(filters.scope) : workspacePresetsList;
+            var data = filterWorkspacePresetList(params);
             return {
               data: data
             };
@@ -3828,53 +3960,50 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var getSnackbarMessage$1 = function getSnackbarMessage(action, title) {
-      // Trim and add quotes
-      var trimmedTitle = "\"" + title.trim() + "\"";
+    var getWorkspaceListStore = function getWorkspaceListStore(store) {
+      if (store && store.workspaceList) {
+        return store.workspaceList;
+      }
 
-      switch (action) {
-        case exports.WorkspacePresetAction.DELETE:
-          return "Workspace " + trimmedTitle + " successfully deleted";
+      return null;
+    };
+    var getIsWorkspaceListFetching = function getIsWorkspaceListFetching(store) {
+      var _a;
 
-        case exports.WorkspacePresetAction.DUPLICATE:
-          return "Workspace " + trimmedTitle + " successfully saved";
+      return ((_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.isFetching) || false;
+    };
+    var getWorkspaceListError = function getWorkspaceListError(store) {
+      var _a;
 
-        default:
-          return "Workspace " + trimmedTitle + " successfully saved";
-      }
+      return (_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.error;
     };
-    var emptyMapWorkspace = {
-      title: 'New workspace',
-      id: 'FEnewWorkspace',
-      "abstract": '',
-      views: {
-        allIds: ['emptyMapView'],
-        byId: {
-          emptyMapView: {
-            title: 'Empty Map',
-            componentType: 'Map',
-            initialProps: {
-              mapPreset: {
-                layers: [],
-                proj: {
-                  bbox: {
-                    left: 58703.6377,
-                    bottom: 6408480.4514,
-                    right: 3967387.5161,
-                    top: 11520588.9031
-                  },
-                  srs: 'EPSG:3857'
-                },
-                shouldShowLayerManager: true,
-                dockedLayerManagerSize: 'sizeSmall'
-              },
-              syncGroupsIds: []
-            }
-          }
-        }
-      },
-      mosaicNode: 'emptyMapView',
-      viewType: 'singleWindow'
+    var getWorkspaceList = workspaceListAdapter.getSelectors(function (state) {
+      var _a;
+
+      return (_a = state === null || state === void 0 ? void 0 : state.workspaceList) !== null && _a !== void 0 ? _a : {
+        entities: {},
+        ids: []
+      };
+    }).selectAll;
+    var getWorkspaceActionDialogDetails = function getWorkspaceActionDialogDetails(store) {
+      var _a;
+
+      return ((_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.workspaceActionDialog) || false;
+    };
+    var getIsWorkspaceListDialogOpen = function getIsWorkspaceListDialogOpen(store) {
+      var _a;
+
+      return ((_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.isWorkspaceListDialogOpen) || false;
+    };
+    var getWorkspaceListFilters = function getWorkspaceListFilters(store) {
+      var _a;
+
+      return ((_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.workspaceListFilters) || [];
+    };
+    var getWorkspaceListSearchQuery = function getWorkspaceListSearchQuery(store) {
+      var _a;
+
+      return ((_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.searchQuery) || '';
     };
 
     /* *
@@ -3893,25 +4022,26 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    function fetchWorkspaceListSaga() {
+    function fetchWorkspaceListSaga(_a) {
       var workspaceApi, data;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
+      var workspaceFilterParams = _a.payload;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
           case 0:
-            _a.trys.push([0, 4,, 6]);
+            _b.trys.push([0, 4,, 6]);
 
             return [4
             /*yield*/
             , effects.call(getWorkspaceApi)];
 
           case 1:
-            workspaceApi = _a.sent();
+            workspaceApi = _b.sent();
             return [4
             /*yield*/
-            , effects.call(workspaceApi.getWorkspacePresets)];
+            , effects.call(workspaceApi.getWorkspacePresets, workspaceFilterParams)];
 
           case 2:
-            data = _a.sent().data;
+            data = _b.sent().data;
             return [4
             /*yield*/
             , effects.put(workspaceListActions.fetchedWorkspaceList({
@@ -3919,14 +4049,14 @@
             }))];
 
           case 3:
-            _a.sent();
+            _b.sent();
 
             return [3
             /*break*/
             , 6];
 
           case 4:
-            _a.sent();
+            _b.sent();
             return [4
             /*yield*/
             , effects.put(workspaceListActions.errorWorkspaceList({
@@ -3937,7 +4067,7 @@
             }))];
 
           case 5:
-            _a.sent();
+            _b.sent();
 
             return [3
             /*break*/
@@ -3951,7 +4081,7 @@
       });
     }
     function onSuccessWorkspacePresetsActionSaga(_a) {
-      var action, workspaceId, title, selectedWorkspace;
+      var action, workspaceId, title, selectedWorkspace, workspaceFilters, searchQuery;
       var payload = _a.payload;
       return __generator(this, function (_b) {
         switch (_b.label) {
@@ -4011,13 +4141,23 @@
             _b.label = 7;
 
           case 7:
-            // Retrieve new list
             return [4
             /*yield*/
-            , effects.call(fetchWorkspaceListSaga)];
+            , effects.select(getWorkspaceListFilters)];
 
           case 8:
-            // Retrieve new list
+            workspaceFilters = _b.sent();
+            return [4
+            /*yield*/
+            , effects.select(getWorkspaceListSearchQuery)];
+
+          case 9:
+            searchQuery = _b.sent();
+            return [4
+            /*yield*/
+            , effects.call(fetchWorkspaceListSaga, workspaceListActions.fetchWorkspaceList(constructFilterParams(workspaceFilters, searchQuery)))];
+
+          case 10:
             _b.sent();
 
             return [2
@@ -4795,7 +4935,7 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var screenManagerModuleModuleConfig = {
+    var workspaceModuleConfig = {
       id: 'workspace-module',
       reducersMap: {
         workspace: reducer$1,
@@ -13947,7 +14087,7 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var ScreenManagerThemeProvider = function ScreenManagerThemeProvider(_a) {
+    var WorkspaceThemeProvider = function WorkspaceThemeProvider(_a) {
       var children = _a.children,
           _b = _a.theme,
           theme$1 = _b === void 0 ? theme.lightTheme : _b;
@@ -13955,14 +14095,14 @@
         theme: theme$1
       }, /*#__PURE__*/React__default["default"].createElement(WorkspaceDndProvider, null, children));
     };
-    var ScreenManagerWrapperProvider = shared.withEggs(__spreadArray(__spreadArray([], __read(core.coreModuleConfig)), [timeseries.timeSeriesModuleConfig, screenManagerModuleModuleConfig]))(function (_a) {
+    var WorkspaceWrapperProvider = shared.withEggs(__spreadArray(__spreadArray([], __read(core.coreModuleConfig)), [timeseries.timeSeriesModuleConfig, workspaceModuleConfig]))(function (_a) {
       var theme = _a.theme,
           children = _a.children;
-      return /*#__PURE__*/React__default["default"].createElement(ScreenManagerThemeProvider, {
+      return /*#__PURE__*/React__default["default"].createElement(WorkspaceThemeProvider, {
         theme: theme
       }, children);
     });
-    var ScreenManagerWrapperProviderWithStore = function ScreenManagerWrapperProviderWithStore(_a) {
+    var WorkspaceWrapperProviderWithStore = function WorkspaceWrapperProviderWithStore(_a) {
       var children = _a.children,
           store = _a.store,
           _b = _a.createApi,
@@ -13973,7 +14113,7 @@
         name: API_NAME
       }, /*#__PURE__*/React__default["default"].createElement(reactRedux.Provider, {
         store: store
-      }, /*#__PURE__*/React__default["default"].createElement(ScreenManagerWrapperProvider, {
+      }, /*#__PURE__*/React__default["default"].createElement(WorkspaceWrapperProvider, {
         theme: theme
       }, /*#__PURE__*/React__default["default"].createElement(core.SnackbarWrapperConnect, null, children))));
     };
@@ -14005,7 +14145,7 @@
         createApi: config.baseURL ? createApi$1 : createApiWithoutSave,
         config: config,
         name: API_NAME
-      }, /*#__PURE__*/React__namespace.createElement(ScreenManagerWrapperProvider, null, children));
+      }, /*#__PURE__*/React__namespace.createElement(WorkspaceDndProvider, null, children));
     };
 
     var ComponentsLookUpWrapper = function ComponentsLookUpWrapper(_a) {
@@ -14048,7 +14188,7 @@
       marginRight: 0.5
     };
 
-    var ScreenManagerControls = function ScreenManagerControls(_a) {
+    var WorkspaceControls = function WorkspaceControls(_a) {
       var createNode = _a.createNode,
           path = _a.path,
           _b = _a.shouldPreventCloseView,
@@ -14298,7 +14438,7 @@
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
-    var ScreenManagerTileConnect = function ScreenManagerTileConnect(_a) {
+    var WorkspaceTileConnect = function WorkspaceTileConnect(_a) {
       var _b = _a.mosaicNodeId,
           mosaicNodeId = _b === void 0 ? '' : _b,
           path = _a.path,
@@ -14374,7 +14514,7 @@
         path: path,
         createNode: createNode,
         title: title,
-        toolbarControls: /*#__PURE__*/React__namespace.createElement(ScreenManagerControls, {
+        toolbarControls: /*#__PURE__*/React__namespace.createElement(WorkspaceControls, {
           createNode: createNode,
           path: path,
           shouldPreventCloseView: shouldPreventCloseView
@@ -14408,7 +14548,7 @@
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
-    var ScreenManagerView = function ScreenManagerView(_a) {
+    var WorkspaceView = function WorkspaceView(_a) {
       var screenConfig = _a.screenConfig,
           componentsLookUp = _a.componentsLookUp,
           updateViews = _a.updateViews,
@@ -14491,7 +14631,7 @@
                   width: '100%'
                 },
                 '.mosaic-window .mosaic-window-toolbar': {
-                  backgroundColor: windowIsActive ? theme.palette.geowebColors.screenManager.activeWindow : theme.palette.geowebColors.screenManager.inactiveWindow
+                  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
@@ -14504,7 +14644,7 @@
                 }
               };
             }
-          }, /*#__PURE__*/React__namespace.createElement(ScreenManagerTileConnect, {
+          }, /*#__PURE__*/React__namespace.createElement(WorkspaceTileConnect, {
             mosaicNodeId: viewId,
             path: path,
             componentsLookUp: componentsLookUp
@@ -14559,7 +14699,7 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
-    var ScreenManagerViewConnect = function ScreenManagerViewConnect(_a) {
+    var WorkspaceViewConnect = function WorkspaceViewConnect(_a) {
       var componentsLookUp = _a.componentsLookUp;
       var dispatch = reactRedux.useDispatch();
       var isWorkspaceLoading$1 = reactRedux.useSelector(function (store) {
@@ -14596,7 +14736,7 @@
           return window.removeEventListener('orientationchange', handleOrientationChange);
         };
       }, [handleOrientationChange]);
-      return /*#__PURE__*/React__default["default"].createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__default["default"].createElement(ScreenManagerView, {
+      return /*#__PURE__*/React__default["default"].createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__default["default"].createElement(WorkspaceView, {
         screenConfig: screenConfig,
         componentsLookUp: componentsLookUp,
         updateViews: updateViews,
@@ -14638,76 +14778,24 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var getWorkspaceListStore = function getWorkspaceListStore(store) {
-      if (store && store.workspaceList) {
-        return store.workspaceList;
-      }
-
-      return null;
-    };
-    var getIsWorkspaceListFetching = function getIsWorkspaceListFetching(store) {
-      var _a;
+    var getPresetIcon = function getPresetIcon(preset) {
+      switch (preset.viewType) {
+        case 'tiledWindow':
+          return /*#__PURE__*/React__default["default"].createElement(theme.PresetTiles, {
+            "data-testid": "tiledWindowIcon"
+          });
 
-      return ((_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.isFetching) || false;
-    };
-    var getWorkspaceListError = function getWorkspaceListError(store) {
-      var _a;
+        case 'multiWindow':
+          return /*#__PURE__*/React__default["default"].createElement(theme.PresetWorkspace, {
+            "data-testid": "multiWindowIcon"
+          });
 
-      return (_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.error;
-    };
-    var getWorkspaceList = workspaceListAdapter.getSelectors(function (state) {
-      var _a;
-
-      return (_a = state === null || state === void 0 ? void 0 : state.workspaceList) !== null && _a !== void 0 ? _a : {
-        entities: {},
-        ids: []
-      };
-    }).selectAll;
-    var getWorkspaceActionDialogDetails = function getWorkspaceActionDialogDetails(store) {
-      var _a;
-
-      return ((_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.workspaceActionDialog) || false;
-    };
-    var getIsWorkspaceListDialogOpen = function getIsWorkspaceListDialogOpen(store) {
-      var _a;
-
-      return ((_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.isWorkspaceListDialogOpen) || false;
-    };
-
-    /* *
-     * 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)
-     * */
-    var getPresetIcon = function getPresetIcon(preset) {
-      switch (preset.viewType) {
-        case 'tiledWindow':
-          return /*#__PURE__*/React__default["default"].createElement(theme.PresetTiles, {
-            "data-testid": "tiledWindowIcon"
-          });
-
-        case 'multiWindow':
-          return /*#__PURE__*/React__default["default"].createElement(theme.PresetWorkspace, {
-            "data-testid": "multiWindowIcon"
-          });
-
-        case 'singleWindow':
-        default:
-          return /*#__PURE__*/React__default["default"].createElement(theme.Preset, {
-            "data-testid": "singleWindowIcon"
-          });
-      }
+        case 'singleWindow':
+        default:
+          return /*#__PURE__*/React__default["default"].createElement(theme.Preset, {
+            "data-testid": "singleWindowIcon"
+          });
+      }
     };
 
     var WorkspaceSelectListRow = function WorkspaceSelectListRow(_a) {
@@ -14716,7 +14804,9 @@
           onClickPreset = _a.onClickPreset,
           onClickWorkspacePresetOption = _a.onClickWorkspacePresetOption,
           _b = _a.isOptionsMenuOpen,
-          isOptionsMenuOpen = _b === void 0 ? false : _b;
+          isOptionsMenuOpen = _b === void 0 ? false : _b,
+          _c = _a.searchQuery,
+          searchQuery = _c === void 0 ? '' : _c;
 
       var onDuplicate = function onDuplicate() {
         onClickWorkspacePresetOption(workspacePreset.id, exports.WorkspacePresetAction.DUPLICATE);
@@ -14761,8 +14851,14 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.ListItemIcon, null, getPresetIcon(workspacePreset)), /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: workspacePreset.title
       }, /*#__PURE__*/React__default["default"].createElement(material.ListItemText, {
-        primary: workspacePreset.title,
-        secondary: workspacePreset["abstract"],
+        primary: /*#__PURE__*/React__default["default"].createElement(shared.SearchHighlight, {
+          text: workspacePreset === null || workspacePreset === void 0 ? void 0 : workspacePreset.title,
+          search: searchQuery
+        }),
+        secondary: /*#__PURE__*/React__default["default"].createElement(shared.SearchHighlight, {
+          text: workspacePreset === null || workspacePreset === void 0 ? void 0 : workspacePreset["abstract"],
+          search: searchQuery
+        }),
         sx: {
           margin: 0
         }
@@ -14828,7 +14924,9 @@
       var workspacePresets = _a.workspacePresets,
           currentSelectedId = _a.currentSelectedId,
           onClickPreset = _a.onClickPreset,
-          onClickWorkspacePresetOption = _a.onClickWorkspacePresetOption;
+          onClickWorkspacePresetOption = _a.onClickWorkspacePresetOption,
+          hideNewWorkspace = _a.hideNewWorkspace,
+          searchQuery = _a.searchQuery;
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "workspaceSelectList"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -14836,23 +14934,236 @@
           marginBottom: '4px',
           fontSize: '12px'
         }
-      }, workspacePresets.length, " results"), /*#__PURE__*/React__namespace.createElement(material.List, null, /*#__PURE__*/React__namespace.createElement(WorkspaceSelectListRow, {
+      }, workspacePresets.length, " results"), /*#__PURE__*/React__namespace.createElement(material.List, null, !hideNewWorkspace && /*#__PURE__*/React__namespace.createElement(WorkspaceSelectListRow, {
+        key: emptyMapWorkspace.id,
         workspacePreset: emptyWorkspaceListItem,
         currentSelectedId: currentSelectedId,
         onClickPreset: onClickPreset,
-        onClickWorkspacePresetOption: onClickWorkspacePresetOption,
-        key: emptyMapWorkspace.id
+        onClickWorkspacePresetOption: onClickWorkspacePresetOption
       }), workspacePresets.map(function (preset) {
         return /*#__PURE__*/React__namespace.createElement(WorkspaceSelectListRow, {
+          key: preset.id,
           workspacePreset: preset,
           currentSelectedId: currentSelectedId,
           onClickPreset: onClickPreset,
           onClickWorkspacePresetOption: onClickWorkspacePresetOption,
-          key: preset.id
+          searchQuery: searchQuery
         });
       })));
     };
 
+    /* *
+     * 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)
+     * */
+
+    var FilterChip = function FilterChip(_a) {
+      var label = _a.label,
+          id = _a.id,
+          _b = _a.isSelected,
+          isSelected = _b === void 0 ? false : _b,
+          _c = _a.isDisabled,
+          isDisabled = _c === void 0 ? false : _c,
+          _d = _a.handleClick,
+          handleClick = _d === void 0 ? function () {} : _d;
+      var theme = material.useTheme();
+      return /*#__PURE__*/React__namespace.createElement(material.Chip, {
+        size: "small",
+        id: id,
+        label: label,
+        disabled: isDisabled,
+        variant: isSelected ? 'filled' : 'outlined',
+        color: isSelected ? 'secondary' : 'default',
+        sx: {
+          borderColor: "" + theme.palette.geowebColors.buttons.tertiary["default"].borderColor,
+          padding: '0px 4px'
+        },
+        onClick: function onClick() {
+          return handleClick(id);
+        }
+      });
+    };
+
+    /* *
+     * 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)
+     * */
+    var allLabel = 'All';
+
+    var FilterList = function FilterList(_a) {
+      var _b = _a.filters,
+          filters = _b === void 0 ? workspaceListFilterOptions : _b,
+          _c = _a.onChipClick,
+          onChipClick = _c === void 0 ? function () {} : _c,
+          _d = _a.isAllSelected,
+          isAllSelected = _d === void 0 ? false : _d;
+      return /*#__PURE__*/React__namespace.createElement(material.Stack, {
+        direction: "row",
+        spacing: 1,
+        "data-testid": "filterList"
+      }, /*#__PURE__*/React__namespace.createElement(FilterChip, {
+        id: "all",
+        label: allLabel,
+        isSelected: isAllSelected,
+        handleClick: function handleClick(key) {
+          return onChipClick(key, !isAllSelected);
+        }
+      }), filters.map(function (filter) {
+        return /*#__PURE__*/React__namespace.createElement(FilterChip, {
+          key: filter.id,
+          id: filter.id,
+          label: filter.label,
+          isSelected: isAllSelected ? false : filter.isSelected,
+          isDisabled: filter.isDisabled,
+          handleClick: function handleClick(key) {
+            // If they are all isSelected ensure that if one is clicked that one will be the only one set to selected
+            var selected = isAllSelected ? true : !filter.isSelected;
+            onChipClick(key, selected);
+          }
+        });
+      }));
+    };
+
+    /* *
+     * 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)
+     * */
+    var DEBOUNCE_TIMEOUT = 300;
+
+    var SearchField = function SearchField(_a) {
+      var _b = _a.label,
+          label = _b === void 0 ? 'Search' : _b,
+          valueChanged = _a.valueChanged,
+          _c = _a.value,
+          value = _c === void 0 ? '' : _c;
+
+      var _d = __read(React__namespace.useState(value), 2),
+          localValue = _d[0],
+          setLocalValue = _d[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+      var handleValueChangeDebounced = React__namespace.useCallback(material.debounce(valueChanged, DEBOUNCE_TIMEOUT), []);
+
+      var ClearButton = function ClearButton() {
+        return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+          tooltipTitle: "Clear",
+          edge: "end",
+          onClick: function onClick() {
+            setLocalValue('');
+            valueChanged('');
+          },
+          size: "large"
+        }, /*#__PURE__*/React__namespace.createElement(theme.Clear, null));
+      };
+
+      var SearchButton = function SearchButton() {
+        return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+          tooltipTitle: label,
+          edge: "end",
+          size: "large"
+        }, /*#__PURE__*/React__namespace.createElement(theme.Search, null));
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(material.TextField, {
+        variant: "filled",
+        size: "small",
+        sx: {
+          '& input': {
+            paddingTop: '18px'
+          }
+        },
+        label: label,
+        value: localValue,
+        autoFocus: true,
+        fullWidth: true,
+        onChange: function onChange(e) {
+          handleValueChangeDebounced(e.target.value);
+          setLocalValue(e.target.value);
+        },
+        InputProps: {
+          endAdornment: /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
+            position: "end"
+          }, localValue ? /*#__PURE__*/React__namespace.createElement(ClearButton, null) : /*#__PURE__*/React__namespace.createElement(SearchButton, null))
+        }
+      });
+    };
+
+    /* *
+     * 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)
+     * */
+
+    var WorkspaceFilter = function WorkspaceFilter(_a) {
+      var filters = _a.filters,
+          _b = _a.onClickFilterChip,
+          onClickFilterChip = _b === void 0 ? function () {} : _b,
+          _c = _a.onSearch,
+          onSearch = _c === void 0 ? function () {} : _c,
+          isAllSelected = _a.isAllSelected,
+          searchQuery = _a.searchQuery;
+      return /*#__PURE__*/React__namespace.createElement(material.Stack, {
+        spacing: 1,
+        sx: {
+          marginBottom: '8px'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(SearchField, {
+        value: searchQuery,
+        valueChanged: onSearch
+      }), /*#__PURE__*/React__namespace.createElement(FilterList, {
+        filters: filters,
+        onChipClick: onClickFilterChip,
+        isAllSelected: isAllSelected
+      }));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -14876,6 +15187,12 @@
       var workspacePresets = reactRedux.useSelector(function (store) {
         return getWorkspaceList(store);
       });
+      var workspaceListFilters = reactRedux.useSelector(function (store) {
+        return getWorkspaceListFilters(store);
+      });
+      var workspaceSearchQuery = reactRedux.useSelector(function (store) {
+        return getWorkspaceListSearchQuery(store);
+      });
       var isFetching = reactRedux.useSelector(function (store) {
         return getIsWorkspaceListFetching(store);
       });
@@ -14884,8 +15201,9 @@
       });
       var dispatch = reactRedux.useDispatch();
       var fetchWorkspaceList = React__namespace.useCallback(function () {
-        dispatch(workspaceListActions.fetchWorkspaceList());
-      }, [dispatch]);
+        var filterParams = constructFilterParams(workspaceListFilters, workspaceSearchQuery);
+        dispatch(workspaceListActions.fetchWorkspaceList(filterParams));
+      }, [dispatch, workspaceListFilters, workspaceSearchQuery]);
       var fetchWorkspace = React__namespace.useCallback(function (workspaceId) {
         dispatch(workspaceActions.fetchWorkspace({
           workspaceId: workspaceId
@@ -14894,9 +15212,23 @@
       var setWorkspaceActionDialogOptions = React__namespace.useCallback(function (dialogOptions) {
         dispatch(workspaceListActions.openWorkspaceActionDialogOptions(dialogOptions));
       }, [dispatch]);
+      var toggleSelectFilterChip = React__namespace.useCallback(function (id, isSelected) {
+        dispatch(workspaceListActions.toggleSelectFilterChip({
+          id: id,
+          isSelected: isSelected
+        }));
+      }, [dispatch]);
+      var setSelectAllFilterChip = React__namespace.useCallback(function () {
+        dispatch(workspaceListActions.setSelectAllFilterChip());
+      }, [dispatch]);
+      var searchFilter = React__namespace.useCallback(function (searchQuery) {
+        dispatch(workspaceListActions.searchFilter({
+          searchQuery: searchQuery
+        }));
+      }, [dispatch]);
       React__namespace.useEffect(function () {
         fetchWorkspaceList(); // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []); // If we're loading the `New workspace` preset as defined in the FE, use this instead of retrieving from BE
+      }, [workspaceListFilters, workspaceSearchQuery]); // If we're loading the `New workspace` preset as defined in the FE, use this instead of retrieving from BE
 
       var onClickNewPreset = React__namespace.useCallback(function () {
         dispatch(core.routerActions.navigateToUrl({
@@ -14918,6 +15250,16 @@
         }
       };
 
+      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 === emptyMapWorkspace.id ? emptyMapWorkspace : workspacePresets.find(function (preset) {
@@ -14960,6 +15302,10 @@
         }
       };
 
+      var isAllSelected = workspaceListFilters.every(function (filter) {
+        return filter.isSelected;
+      });
+      var shouldHideNewWorkspace = !isAllSelected || workspaceSearchQuery.length > 0;
       return /*#__PURE__*/React__namespace.createElement("div", null, isFetching && /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
         "data-testid": "loading-bar",
         color: "secondary",
@@ -14984,11 +15330,19 @@
             return fetchWorkspaceList();
           }
         }
-      }))), /*#__PURE__*/React__namespace.createElement(WorkspaceSelectList, {
+      }))), !error && /*#__PURE__*/React__namespace.createElement(WorkspaceFilter, {
+        filters: workspaceListFilters,
+        onClickFilterChip: onClickFilterChip,
+        isAllSelected: isAllSelected,
+        searchQuery: workspaceSearchQuery,
+        onSearch: searchFilter
+      }), /*#__PURE__*/React__namespace.createElement(WorkspaceSelectList, {
         workspacePresets: workspacePresets,
         currentSelectedId: currentView.id || '',
         onClickPreset: onClickWorkspace,
-        onClickWorkspacePresetOption: onClickWorkspacePresetOption
+        onClickWorkspacePresetOption: onClickWorkspacePresetOption,
+        hideNewWorkspace: shouldHideNewWorkspace,
+        searchQuery: workspaceSearchQuery
       }));
     };
 
@@ -15090,7 +15444,7 @@
           '&&': {
             backgroundColor: !showMenu && 'transparent',
             '&:hover': {
-              backgroundColor: 'geowebColors.screenManager.workspace.tabButtonHover'
+              backgroundColor: 'geowebColors.workspace.tabButtonHover'
             }
           }
         }
@@ -15203,7 +15557,7 @@
               backgroundColor: !isOpen && 'transparent',
               '&:hover': {
                 color: activeTab ? 'geowebColors.buttons.icon.active.color' : 'inherit',
-                backgroundColor: 'geowebColors.screenManager.workspace.tabButtonHover'
+                backgroundColor: 'geowebColors.workspace.tabButtonHover'
               },
               paddingRight: '4px !important',
               display: 'block',
@@ -15293,6 +15647,16 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
+    var TITLE_SUFFIX_NEW_WORKSPACE = 'modified';
+    var TITLE_SUFFIX_EXISTING_WORKSPACE = 'not saved';
+    var getTitle = function getTitle(title, hasChanges, workspaceId) {
+      if (!hasChanges) {
+        return title;
+      }
+
+      var suffix = workspaceId ? TITLE_SUFFIX_NEW_WORKSPACE : TITLE_SUFFIX_EXISTING_WORKSPACE;
+      return title + " (" + suffix + ")";
+    };
     var WorkspaceOptionsConnect = function WorkspaceOptionsConnect(_a) {
       var title = _a.title,
           activeTab = _a.activeTab,
@@ -15339,9 +15703,10 @@
           workspace: workspaceData
         }));
       }, [dispatch, workspaceData]);
+      var fullTitle = getTitle(title, hasChanges, workspaceId);
       return /*#__PURE__*/React__namespace.createElement(WorkspaceOptions, {
         hasChanges: hasChanges,
-        title: title,
+        title: fullTitle,
         activeTab: activeTab,
         handleDelete: workspaceScope === 'user' ? onDelete : undefined,
         handleSaveAs: onSaveAs,
@@ -15832,127 +16197,6 @@
       }));
     };
 
-    /* *
-     * 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)
-     * */
-    var WorkspaceDetail = function WorkspaceDetail(_a) {
-      var workspaceId = _a.workspaceId,
-          children = _a.children,
-          componentsLookUp = _a.componentsLookUp,
-          _b = _a.isSnapshot,
-          isSnapshot = _b === void 0 ? false : _b;
-      var dispatch = reactRedux.useDispatch();
-      var error = reactRedux.useSelector(function (store) {
-        return getWorkspaceError(store);
-      });
-      var isLoading = reactRedux.useSelector(function (store) {
-        return isWorkspaceLoading(store);
-      });
-      var workspaceData = reactRedux.useSelector(function (store) {
-        return getWorkspaceData(store);
-      });
-      var fetchWorkspace = React__namespace.useCallback(function (newWorkspaceId) {
-        dispatch(workspaceActions.fetchWorkspace({
-          workspaceId: newWorkspaceId
-        }));
-      }, [dispatch]);
-      var onSave = React__namespace.useCallback(function () {
-        dispatch(workspaceActions.saveWorkspacePreset({
-          workspace: workspaceData
-        }));
-      }, [dispatch, workspaceData]);
-      var setScreenPreset = React__namespace.useCallback(function (newScreenPreset) {
-        dispatch(workspaceActions.changePreset({
-          workspacePreset: newScreenPreset
-        }));
-      }, [dispatch]);
-      var navigateToUrl = React__namespace.useCallback(function (url) {
-        dispatch(core.routerActions.navigateToUrl({
-          url: url
-        }));
-      }, [dispatch]);
-
-      var setEmptyWorkSpace = function setEmptyWorkSpace() {
-        setScreenPreset(emptyMapWorkspace);
-        navigateToUrl(routes.root);
-      };
-
-      React__namespace.useEffect(function () {
-        if (!workspaceId) {
-          setEmptyWorkSpace();
-        } else {
-          fetchWorkspace(workspaceId);
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-      }, []);
-      return /*#__PURE__*/React__namespace.createElement(material.Box, {
-        "data-testid": "workspace",
-        sx: {
-          width: '100%',
-          height: '100%'
-        }
-      }, isLoading && /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
-        "data-testid": "loading-bar",
-        color: "secondary",
-        sx: {
-          position: 'absolute',
-          width: '100%',
-          top: 0,
-          zIndex: 100
-        }
-      }), error && error.type !== exports.WorkspaceErrorType.SAVE && /*#__PURE__*/React__namespace.createElement(shared.AlertBanner, __assign({
-        title: "Failed to fetch workspace " + workspaceId,
-        info: error.message,
-        shouldClose: true
-      }, error.type === exports.WorkspaceErrorType.GENERIC && {
-        actionButtonProps: {
-          title: 'Try again',
-          onClick: function onClick() {
-            return fetchWorkspace(workspaceId);
-          }
-        }
-      })), children, !isSnapshot && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, error && error.type === exports.WorkspaceErrorType.SAVE && /*#__PURE__*/React__namespace.createElement(shared.AlertBanner, {
-        title: "Failed to save workspace \"" + workspaceData.title + "\"",
-        info: error.message,
-        shouldClose: true,
-        actionButtonProps: {
-          title: 'Try again',
-          onClick: function onClick() {
-            return onSave();
-          }
-        }
-      }), (!error || error.type === exports.WorkspaceErrorType.SAVE) && /*#__PURE__*/React__namespace.createElement(material.Box, {
-        component: "div",
-        sx: {
-          gridArea: 'content',
-          position: 'absolute',
-          margin: 0,
-          padding: 0,
-          display: 'block',
-          height: '100%',
-          width: '100%',
-          overflowY: 'auto',
-          zIndex: 3
-        },
-        "data-testid": "ScreenManagerPage"
-      }, /*#__PURE__*/React__namespace.createElement(ScreenManagerViewConnect, {
-        componentsLookUp: componentsLookUp
-      }))));
-    };
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -16077,7 +16321,7 @@
     var MapPresetsFormDialog = function MapPresetsFormDialog(_a) {
       var isOpen = _a.isOpen,
           action = _a.action,
-          presetId = _a.presetId,
+          viewPresetId = _a.viewPresetId,
           formValues = _a.formValues,
           onSuccess = _a.onSuccess,
           onClose = _a.onClose,
@@ -16153,14 +16397,14 @@
               case 3:
                 return [4
                 /*yield*/
-                , api$1.deleteViewPreset(presetId)];
+                , api$1.deleteViewPreset(viewPresetId)];
 
               case 4:
                 _b.sent();
 
                 setIsLoading(false);
                 onClose();
-                onSuccess(action, presetId, newFormValues.title);
+                onSuccess(action, viewPresetId, newFormValues.title);
                 return [3
                 /*break*/
                 , 6];
@@ -16237,6 +16481,164 @@
       }, /*#__PURE__*/React__default["default"].createElement(MapPresetsFormDialog, __assign({}, props)));
     };
 
+    var MapPresetsFormDialogConnect = function MapPresetsFormDialogConnect() {
+      var dispatch = reactRedux.useDispatch();
+      var dialogOptions = reactRedux.useSelector(function (store) {
+        return getDialogOptions(store);
+      });
+      var closeDialog = React__default["default"].useCallback(function () {
+        dispatch(viewPresetActions.closeViewPresetDialog());
+      }, [dispatch]);
+
+      var onClose = function onClose() {
+        closeDialog();
+      };
+
+      var onSuccess = function onSuccess(action, newViewPresetId, title) {
+        dispatch(viewPresetActions.onSuccessViewPresetAction({
+          panelId: dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.panelId,
+          viewPresetId: newViewPresetId,
+          action: action,
+          title: title
+        }));
+      };
+
+      var isOpen = dialogOptions !== undefined;
+
+      if (!isOpen) {
+        return null;
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(MapPresetsFormDialogWrapper, __assign({
+        isOpen: isOpen,
+        onClose: onClose,
+        onSuccess: onSuccess
+      }, dialogOptions, {
+        formValues: dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.formValues
+      }));
+    };
+
+    /* *
+     * 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)
+     * */
+    var WorkspaceDetail = function WorkspaceDetail(_a) {
+      var workspaceId = _a.workspaceId,
+          children = _a.children,
+          componentsLookUp = _a.componentsLookUp,
+          _b = _a.isSnapshot,
+          isSnapshot = _b === void 0 ? false : _b;
+      var dispatch = reactRedux.useDispatch();
+      var error = reactRedux.useSelector(function (store) {
+        return getWorkspaceError(store);
+      });
+      var isLoading = reactRedux.useSelector(function (store) {
+        return isWorkspaceLoading(store);
+      });
+      var workspaceData = reactRedux.useSelector(function (store) {
+        return getWorkspaceData(store);
+      });
+      var fetchWorkspace = React__namespace.useCallback(function (newWorkspaceId) {
+        dispatch(workspaceActions.fetchWorkspace({
+          workspaceId: newWorkspaceId
+        }));
+      }, [dispatch]);
+      var onSave = React__namespace.useCallback(function () {
+        dispatch(workspaceActions.saveWorkspacePreset({
+          workspace: workspaceData
+        }));
+      }, [dispatch, workspaceData]);
+      var setScreenPreset = React__namespace.useCallback(function (newScreenPreset) {
+        dispatch(workspaceActions.changePreset({
+          workspacePreset: newScreenPreset
+        }));
+      }, [dispatch]);
+      var navigateToUrl = React__namespace.useCallback(function (url) {
+        dispatch(core.routerActions.navigateToUrl({
+          url: url
+        }));
+      }, [dispatch]);
+
+      var setEmptyWorkSpace = function setEmptyWorkSpace() {
+        setScreenPreset(emptyMapWorkspace);
+        navigateToUrl(routes.root);
+      };
+
+      React__namespace.useEffect(function () {
+        if (!workspaceId) {
+          setEmptyWorkSpace();
+        } else {
+          fetchWorkspace(workspaceId);
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, []);
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        "data-testid": "workspace",
+        sx: {
+          width: '100%',
+          height: '100%'
+        }
+      }, isLoading && /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
+        "data-testid": "loading-bar",
+        color: "secondary",
+        sx: {
+          position: 'absolute',
+          width: '100%',
+          top: 0,
+          zIndex: 100
+        }
+      }), error && error.type !== exports.WorkspaceErrorType.SAVE && /*#__PURE__*/React__namespace.createElement(shared.AlertBanner, __assign({
+        title: "Failed to fetch workspace " + workspaceId,
+        info: error.message,
+        shouldClose: true
+      }, error.type === exports.WorkspaceErrorType.GENERIC && {
+        actionButtonProps: {
+          title: 'Try again',
+          onClick: function onClick() {
+            return fetchWorkspace(workspaceId);
+          }
+        }
+      })), children, !isSnapshot && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, error && error.type === exports.WorkspaceErrorType.SAVE && /*#__PURE__*/React__namespace.createElement(shared.AlertBanner, {
+        title: "Failed to save workspace \"" + workspaceData.title + "\"",
+        info: error.message,
+        shouldClose: true,
+        actionButtonProps: {
+          title: 'Try again',
+          onClick: function onClick() {
+            return onSave();
+          }
+        }
+      }), (!error || error.type === exports.WorkspaceErrorType.SAVE) && /*#__PURE__*/React__namespace.createElement(material.Box, {
+        component: "div",
+        sx: {
+          gridArea: 'content',
+          position: 'absolute',
+          margin: 0,
+          padding: 0,
+          display: 'block',
+          height: '100%',
+          width: '100%',
+          overflowY: 'auto',
+          zIndex: 3
+        },
+        "data-testid": "WorkspacePage"
+      }, /*#__PURE__*/React__namespace.createElement(WorkspaceViewConnect, {
+        componentsLookUp: componentsLookUp
+      }))), /*#__PURE__*/React__namespace.createElement(MapPresetsFormDialogConnect, null));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -16282,7 +16684,7 @@
       var presetTitle = getPresetTitle(title, hasChanges, isActive, isNew);
 
       var onClickMenuItem = function onClickMenuItem(action) {
-        onClickPreset(id, action);
+        onClickPreset(id, action, title);
       };
 
       var items = isUserPreset ? [// TODO: enable again (in same order)
@@ -16355,6 +16757,8 @@
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var MAPPRESET_ACTIVE_TITLE = 'New map preset';
+    var MAPPRESET_DIALOG_TITLE_SAVE_AS = 'Save map preset as';
+    var MAPPRESET_DIALOG_TITLE_DELETE = 'Delete map preset';
     var sortMapPresets = function sortMapPresets(mapPresets) {
       var presetOrder = ['system', 'user'];
       return __spreadArray([], __read(mapPresets)).sort(function (left, right) {
@@ -16379,30 +16783,27 @@
           isDefaultOpen = _f === void 0 ? false : _f,
           _g = _a.id,
           id = _g === void 0 ? 'mappresets-menubutton' : _g,
-          _h = _a.onSuccess,
-          onSuccess = _h === void 0 ? function () {} : _h,
-          _j = _a.isLoading,
-          isLoading = _j === void 0 ? false : _j,
-          _k = _a.hasError,
-          hasError = _k === void 0 ? false : _k,
-          _l = _a.hasMapPresetChanges,
-          hasMapPresetChanges = _l === void 0 ? false : _l,
-          _m = _a.currentMapPreset,
-          currentMapPreset = _m === void 0 ? null : _m,
-          _o = _a.relatedSyncGroupIds,
-          relatedSyncGroupIds = _o === void 0 ? [] : _o,
-          _p = _a.onSavePreset,
-          onSavePreset = _p === void 0 ? function () {} : _p,
-          _q = _a.fetchNewPresetList,
-          fetchNewPresetList = _q === void 0 ? function () {} : _q;
+          _h = _a.isLoading,
+          isLoading = _h === void 0 ? false : _h,
+          _j = _a.hasError,
+          hasError = _j === void 0 ? false : _j,
+          _k = _a.hasMapPresetChanges,
+          hasMapPresetChanges = _k === void 0 ? false : _k,
+          _l = _a.currentMapPreset,
+          currentMapPreset = _l === void 0 ? null : _l,
+          _m = _a.relatedSyncGroupIds,
+          relatedSyncGroupIds = _m === void 0 ? [] : _m,
+          _o = _a.onSavePreset,
+          onSavePreset = _o === void 0 ? function () {} : _o,
+          _p = _a.fetchNewPresetList,
+          fetchNewPresetList = _p === void 0 ? function () {} : _p,
+          panelId = _a.panelId,
+          _q = _a.openViewPresetsDialog,
+          openViewPresetsDialog = _q === void 0 ? function () {} : _q;
 
       var _r = __read(React__default["default"].useState(null), 2),
-          dialogOptions = _r[0],
-          setDialogOptions = _r[1];
-
-      var _s = __read(React__default["default"].useState(null), 2),
-          anchorEl = _s[0],
-          setAnchorEl = _s[1];
+          anchorEl = _r[0],
+          setAnchorEl = _r[1];
 
       var isOpen = Boolean(anchorEl);
 
@@ -16419,12 +16820,7 @@
         setAnchorEl(null);
       };
 
-      var onClickPresetItem = function onClickPresetItem(presetId, presetAction) {
-        var clickedPreset = mapPresets.find(function (preset) {
-          return preset.id === presetId;
-        });
-        var presetTitle = clickedPreset === null || clickedPreset === void 0 ? void 0 : clickedPreset.title;
-
+      var onClickPresetItem = function onClickPresetItem(presetId, presetAction, presetTitle) {
         switch (presetAction) {
           case PresetAction.OPEN:
             {
@@ -16451,10 +16847,11 @@
 
           case PresetAction.SAVE_AS:
             {
-              setDialogOptions({
-                title: 'Save map preset as',
+              openViewPresetsDialog({
+                title: MAPPRESET_DIALOG_TITLE_SAVE_AS,
                 action: presetAction,
-                presetId: presetId,
+                viewPresetId: presetId,
+                panelId: panelId,
                 formValues: {
                   title: presetTitle,
                   initialProps: {
@@ -16469,10 +16866,11 @@
 
           case PresetAction.DELETE:
             {
-              setDialogOptions({
-                title: 'Delete map preset',
+              openViewPresetsDialog({
+                title: MAPPRESET_DIALOG_TITLE_DELETE,
                 action: presetAction,
-                presetId: presetId,
+                viewPresetId: presetId,
+                panelId: panelId,
                 formValues: {
                   title: presetTitle
                 }
@@ -16482,10 +16880,6 @@
         }
       };
 
-      var onClose = function onClose() {
-        setDialogOptions(null);
-      };
-
       var activePresetTitle = activeMapPresetId ? (_b = mapPresets.find(function (preset) {
         return preset.id === activeMapPresetId;
       })) === null || _b === void 0 ? void 0 : _b.title : MAPPRESET_ACTIVE_TITLE;
@@ -16560,7 +16954,9 @@
       }, "Map presets")), /*#__PURE__*/React__default["default"].createElement(MapPresetsMenuItem, {
         id: "",
         title: MAPPRESET_ACTIVE_TITLE,
-        onClickPreset: onClickPresetItem,
+        onClickPreset: function onClickPreset(presetId, action) {
+          onClickPresetItem(presetId, action, '');
+        },
         isActive: isNewActive,
         scope: "user",
         isNew: true,
@@ -16605,11 +17001,7 @@
         severity: "info",
         dataTestId: "info-banner",
         title: "You haven't saved any presets yet"
-      }))), /*#__PURE__*/React__default["default"].createElement(MapPresetsFormDialogWrapper, __assign({
-        isOpen: Boolean(dialogOptions),
-        onClose: onClose,
-        onSuccess: onSuccess
-      }, dialogOptions)));
+      }))));
     };
 
     /* *
@@ -16702,14 +17094,11 @@
           viewPreset: viewPreset
         }));
       }, [dispatch, mapId]);
-      var onSuccesMapPresetAction = React__default["default"].useCallback(function (action, viewPresetId, title) {
-        dispatch(viewPresetActions.onSuccessViewPresetAction({
-          panelId: mapId,
-          viewPresetId: viewPresetId,
-          action: action,
-          title: title
+      var openViewPresetsDialog = React__default["default"].useCallback(function (viewPresetDialogOptions) {
+        dispatch(viewPresetActions.openViewPresetDialog({
+          viewPresetDialog: viewPresetDialogOptions
         }));
-      }, [dispatch, mapId]);
+      }, [dispatch]);
       React__default["default"].useEffect(function () {
         if (!mapPresets.length) {
           fetchInitialPresets();
@@ -16720,7 +17109,6 @@
         activeMapPresetId: activeMapPresetId,
         mapPresets: mapPresets,
         onClickPreset: selectMapPreset,
-        onSuccess: onSuccesMapPresetAction,
         isLoading: isMapPresetsListFetching,
         hasError: !!errorMapPresetsList,
         hasMapPresetChanges: hasMapPresetChanges,
@@ -16728,29 +17116,31 @@
         relatedSyncGroupIds: relatedSyncGroupIds,
         onSavePreset: saveMapPreset,
         fetchNewPresetList: fetchMapPresetsList,
-        id: id
+        id: id,
+        panelId: mapId,
+        openViewPresetsDialog: openViewPresetsDialog
       });
     };
 
     exports.ComponentsLookUpWrapper = ComponentsLookUpWrapper;
     exports.MapPresetsDialog = MapPresetsDialog;
     exports.MapPresetsDialogConnect = MapPresetsDialogConnect;
-    exports.ScreenManagerThemeProvider = ScreenManagerThemeProvider;
-    exports.ScreenManagerViewConnect = ScreenManagerViewConnect;
-    exports.ScreenManagerWrapperProvider = ScreenManagerWrapperProvider;
-    exports.ScreenManagerWrapperProviderWithStore = ScreenManagerWrapperProviderWithStore;
     exports.WorkspaceDetail = WorkspaceDetail;
     exports.WorkspaceDndProvider = WorkspaceDndProvider;
     exports.WorkspaceModuleProvider = WorkspaceModuleProvider;
+    exports.WorkspaceThemeProvider = WorkspaceThemeProvider;
     exports.WorkspaceTopBar = WorkspaceTopBar;
+    exports.WorkspaceViewConnect = WorkspaceViewConnect;
+    exports.WorkspaceWrapperProvider = WorkspaceWrapperProvider;
+    exports.WorkspaceWrapperProviderWithStore = WorkspaceWrapperProviderWithStore;
     exports.actions = workspaceActions;
     exports.createBalancedMosaicNode = createBalancedMosaicNode;
     exports.emptyMapWorkspace = emptyMapWorkspace;
     exports.getWorkspaceRouteUrl = getWorkspaceRouteUrl;
-    exports.screenManagerModuleModuleConfig = screenManagerModuleModuleConfig;
     exports.selectors = selectors;
     exports.viewPresetActions = viewPresetActions;
     exports.workspaceListActions = workspaceListActions;
+    exports.workspaceModuleConfig = workspaceModuleConfig;
     exports.workspaceRoutes = routes;
 
     Object.defineProperty(exports, '__esModule', { value: true });