@opengeoweb/workspace 4.20.0 → 4.21.0

package/index.esm.js

@@ -1,18 +1,18 @@
 import { createEntityAdapter, createSlice, createSelector } from '@reduxjs/toolkit';
-import { chunk, cloneDeep, isEqual, isString } from 'lodash';
+import { chunk, cloneDeep, isEmpty, isEqual, isString } from 'lodash';
 import { SyncGroups, syncGroupActions, layerActions, mapActions, uiActions, mapTypes, genericSelectors, routerActions, snackbarActions, mapSelectors, uiTypes, SnackbarWrapperConnect, coreModuleConfig, uiSelectors, syncGroupsSelectors } from '@opengeoweb/core';
-import { createApiInstance, getApi, createFakeApiInstance, ApiProvider, useApiContext } from '@opengeoweb/api';
+import { createApiInstance, createNonAuthApiInstance, getApi, createFakeApiInstance, ApiProvider, useApiContext } from '@opengeoweb/api';
 import { getLeaves, MosaicContext, getAndAssertNodeAtPathExists, createBalancedTreeFromLeaves, MosaicWindow, MosaicWithoutDragDropContext } from 'react-mosaic-component';
 import { debounce, takeEvery, takeLatest, all, put, delay, call, select, takeLeading } from 'redux-saga/effects';
 import * as React from 'react';
 import React__default, { createContext, memo, useEffect, isValidElement, cloneElement, createRef, Component, useLayoutEffect, useMemo, useContext, useState, useCallback } from 'react';
-import { ThemeWrapper, lightTheme, SplitVertical, SplitHorizontal, Expand, UnExpand, Close, WebAssetOff, Delete, Preset, PresetWorkspace, PresetTiles, Menu } from '@opengeoweb/theme';
+import { ThemeWrapper, lightTheme, SplitVertical, SplitHorizontal, Expand, UnExpand, Close, WebAssetOff, Delete, Preset, PresetWorkspace, PresetTiles, Clear, Search, Menu } from '@opengeoweb/theme';
 import { Provider, useDispatch, useSelector } from 'react-redux';
-import { withEggs, useConfirmationDialog, CustomIconButton, AlertBanner, ConfirmationServiceProvider, CustomTooltip, ToggleMenu, ToolContainer, CustomToggleButton, ConfirmationDialog, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
+import { withEggs, useConfirmationDialog, CustomIconButton, AlertBanner, ConfirmationServiceProvider, CustomTooltip, SearchHighlight, ToggleMenu, ToolContainer, CustomToggleButton, ConfirmationDialog, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
 import { timeSeriesModuleConfig } from '@opengeoweb/timeseries';
 import { jsx } from 'react/jsx-runtime';
 import require$$1$2 from 'react-dom';
-import { LinearProgress, Typography, Box, ListItem, ListItemButton, ListItemIcon, ListItemText, Grid, List, Backdrop, Menu as Menu$1, ListSubheader, MenuItem, Tabs } from '@mui/material';
+import { LinearProgress, Typography, Box, ListItem, ListItemButton, ListItemIcon, ListItemText, Grid, List, useTheme, Chip, Stack, debounce as debounce$1, TextField, InputAdornment, Backdrop, Menu as Menu$1, ListSubheader, MenuItem, Tabs } from '@mui/material';
 import 'react-mosaic-component/react-mosaic-component.css';
 import { Box as Box$1 } from '@mui/system';
 import { ReactHookFormTextField, ReactHookFormHiddenInput, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
@@ -88,6 +88,7 @@ var initialState$5 = Object.assign(Object.assign({
   error: undefined,
   isWorkspaceListDialogOpen: false
 }, workspaceListAdapter.getInitialState()), {
+  searchQuery: '',
   workspaceListFilters: workspaceListFilterOptions
 });
 var slice$3 = createSlice({
@@ -127,14 +128,32 @@ var slice$3 = createSlice({
       var _action$payload = action.payload,
           id = _action$payload.id,
           isSelected = _action$payload.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] = Object.assign(Object.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] = Object.assign(Object.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) {
@@ -143,6 +162,10 @@ var slice$3 = createSlice({
           isSelected: true
         });
       });
+    },
+    searchFilter: function searchFilter(draft, action) {
+      var searchQuery = action.payload.searchQuery;
+      draft.searchQuery = searchQuery;
     }
   }
 });
@@ -329,23 +352,11 @@ 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 Object.assign({}, scopeFilter);
-};
 
 var getApiRoutes$1 = function getApiRoutes(axiosInstance) {
   return {
     // workspace presets
-    getWorkspacePresets: function getWorkspacePresets() {
-      var filters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-        scope: []
-      };
-      var params = constructFilterParams(filters);
+    getWorkspacePresets: function getWorkspacePresets(params) {
       return axiosInstance.get('/workspacepreset', {
         params: params
       });
@@ -388,8 +399,9 @@ var getApiRoutes$1 = function getApiRoutes(axiosInstance) {
 };
 
 var createApi$1 = function createApi(props) {
-  var instance = createApiInstance(props);
-  return getApiRoutes$1(instance);
+  var authInstance = createApiInstance(props);
+  var nonAuthInstance = createNonAuthApiInstance(props);
+  return getApiRoutes$1(props.auth ? authInstance : nonAuthInstance);
 };
 
 var getWorkspaceApi = function getWorkspaceApi() {
@@ -676,6 +688,14 @@ var slice$2 = createSlice({
     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) {
@@ -745,7 +765,7 @@ var initialState$3 = {
   error: undefined,
   hasChanges: false
 };
-var workspacePresetChangeActions = [viewPresetActions.selectViewPreset, syncGroupActions.syncGroupRemoveGroup, syncGroupActions.syncGroupAddGroup];
+var workspacePresetChangeActions = [viewPresetActions.selectViewPreset, viewPresetActions.setActiveViewPresetId, syncGroupActions.syncGroupRemoveGroup, syncGroupActions.syncGroupAddGroup];
 var slice$1 = createSlice({
   initialState: initialState$3,
   name: 'workspace',
@@ -974,6 +994,9 @@ var getViewPresetActiveId = function getViewPresetActiveId(store, panelId) {
 
   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");
@@ -3116,6 +3139,97 @@ var viewPresetsList = [
 	}
 ];
 
+/* *
+ * 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 = "\"".concat(title.trim(), "\"");
+
+  switch (action) {
+    case WorkspacePresetAction.DELETE:
+      return "Workspace ".concat(trimmedTitle, " successfully deleted");
+
+    case WorkspacePresetAction.DUPLICATE:
+      return "Workspace ".concat(trimmedTitle, " successfully saved");
+
+    default:
+      return "Workspace ".concat(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 _filters$reduce = filters.reduce(function (filterList, filter) {
+    if (filter.isSelected && filter.type === 'scope') {
+      return Object.assign(Object.assign({}, filter), {
+        scope: filterList.scope.concat(filter.id)
+      });
+    }
+
+    return filterList;
+  }, {
+    scope: []
+  }),
+      scope = _filters$reduce.scope; // get search
+
+
+  var search = getCleanSearchQuery(searchQuery);
+  return Object.assign(Object.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.
@@ -3143,24 +3257,37 @@ var extractViewPresetFromJSON = function extractViewPresetFromJSON(viewPresetId)
     return element.id === viewPresetId;
   });
 };
-var filterWorkspacePresetList = function filterWorkspacePresetList() {
-  var scope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['system', 'user'];
-  return workspacePresetsList.filter(function (item) {
-    return scope.includes(item.scope);
-  });
+var filterWorkspacePresetList = function filterWorkspacePresetList(params) {
+  if (isEmpty(params)) {
+    return workspacePresetsList;
+  }
+
+  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() {
-      var filters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-        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
         };
@@ -3729,90 +3856,90 @@ var WorkspaceListErrorType;
  * 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 = "\"".concat(title.trim(), "\"");
+var getWorkspaceListStore = function getWorkspaceListStore(store) {
+  if (store && store.workspaceList) {
+    return store.workspaceList;
+  }
 
-  switch (action) {
-    case WorkspacePresetAction.DELETE:
-      return "Workspace ".concat(trimmedTitle, " successfully deleted");
+  return null;
+};
+var getIsWorkspaceListFetching = function getIsWorkspaceListFetching(store) {
+  var _a;
 
-    case WorkspacePresetAction.DUPLICATE:
-      return "Workspace ".concat(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 ".concat(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 _workspaceListAdapter = workspaceListAdapter.getSelectors(function (state) {
+  var _a;
+
+  return (_a = state === null || state === void 0 ? void 0 : state.workspaceList) !== null && _a !== void 0 ? _a : {
+    entities: {},
+    ids: []
+  };
+}),
+    getWorkspaceList = _workspaceListAdapter.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) || '';
 };
 
 var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(fetchWorkspaceListSaga),
     _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(onSuccessWorkspacePresetsActionSaga),
     _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
-function fetchWorkspaceListSaga() {
-  var workspaceApi, _yield$call, data;
+function fetchWorkspaceListSaga(_ref) {
+  var workspaceFilterParams, workspaceApi, _yield$call, data;
 
   return regeneratorRuntime.wrap(function fetchWorkspaceListSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
-          _context.prev = 0;
-          _context.next = 3;
+          workspaceFilterParams = _ref.payload;
+          _context.prev = 1;
+          _context.next = 4;
           return call(getWorkspaceApi);
 
-        case 3:
+        case 4:
           workspaceApi = _context.sent;
-          _context.next = 6;
-          return call(workspaceApi.getWorkspacePresets);
+          _context.next = 7;
+          return call(workspaceApi.getWorkspacePresets, workspaceFilterParams);
 
-        case 6:
+        case 7:
           _yield$call = _context.sent;
           data = _yield$call.data;
-          _context.next = 10;
+          _context.next = 11;
           return put(workspaceListActions.fetchedWorkspaceList({
             workspaceList: data
           }));
 
-        case 10:
-          _context.next = 16;
+        case 11:
+          _context.next = 17;
           break;
 
-        case 12:
-          _context.prev = 12;
-          _context.t0 = _context["catch"](0);
-          _context.next = 16;
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](1);
+          _context.next = 17;
           return put(workspaceListActions.errorWorkspaceList({
             error: {
               message: 'Error fetching workspace preset list',
@@ -3820,20 +3947,20 @@ function fetchWorkspaceListSaga() {
             }
           }));
 
-        case 16:
+        case 17:
         case "end":
           return _context.stop();
       }
     }
-  }, _marked$1, null, [[0, 12]]);
+  }, _marked$1, null, [[1, 13]]);
 }
-function onSuccessWorkspacePresetsActionSaga(_ref) {
-  var payload, action, workspaceId, title, selectedWorkspace;
+function onSuccessWorkspacePresetsActionSaga(_ref2) {
+  var payload, action, workspaceId, title, selectedWorkspace, workspaceFilters, searchQuery;
   return regeneratorRuntime.wrap(function onSuccessWorkspacePresetsActionSaga$(_context2) {
     while (1) {
       switch (_context2.prev = _context2.next) {
         case 0:
-          payload = _ref.payload;
+          payload = _ref2.payload;
           action = payload.action, workspaceId = payload.workspaceId, title = payload.title;
           _context2.next = 4;
           return put(snackbarActions.openSnackbar({
@@ -3876,9 +4003,19 @@ function onSuccessWorkspacePresetsActionSaga(_ref) {
 
         case 15:
           _context2.next = 17;
-          return call(fetchWorkspaceListSaga);
+          return select(getWorkspaceListFilters);
 
         case 17:
+          workspaceFilters = _context2.sent;
+          _context2.next = 20;
+          return select(getWorkspaceListSearchQuery);
+
+        case 20:
+          searchQuery = _context2.sent;
+          _context2.next = 23;
+          return call(fetchWorkspaceListSaga, workspaceListActions.fetchWorkspaceList(constructFilterParams(workspaceFilters, searchQuery)));
+
+        case 23:
         case "end":
           return _context2.stop();
       }
@@ -4459,7 +4596,7 @@ function rootSaga() {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var screenManagerModuleModuleConfig = {
+var workspaceModuleConfig = {
   id: 'workspace-module',
   reducersMap: {
     workspace: reducer$1,
@@ -13595,7 +13732,7 @@ var WorkspaceDndProvider = function WorkspaceDndProvider(_ref) {
   }, children);
 };
 
-var ScreenManagerThemeProvider = function ScreenManagerThemeProvider(_ref) {
+var WorkspaceThemeProvider = function WorkspaceThemeProvider(_ref) {
   var children = _ref.children,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? lightTheme : _ref$theme;
@@ -13603,14 +13740,14 @@ var ScreenManagerThemeProvider = function ScreenManagerThemeProvider(_ref) {
     theme: theme
   }, /*#__PURE__*/React__default.createElement(WorkspaceDndProvider, null, children));
 };
-var ScreenManagerWrapperProvider = withEggs([].concat(_toConsumableArray$3(coreModuleConfig), [timeSeriesModuleConfig, screenManagerModuleModuleConfig]))(function (_ref2) {
+var WorkspaceWrapperProvider = withEggs([].concat(_toConsumableArray$3(coreModuleConfig), [timeSeriesModuleConfig, workspaceModuleConfig]))(function (_ref2) {
   var theme = _ref2.theme,
       children = _ref2.children;
-  return /*#__PURE__*/React__default.createElement(ScreenManagerThemeProvider, {
+  return /*#__PURE__*/React__default.createElement(WorkspaceThemeProvider, {
     theme: theme
   }, children);
 });
-var ScreenManagerWrapperProviderWithStore = function ScreenManagerWrapperProviderWithStore(_ref3) {
+var WorkspaceWrapperProviderWithStore = function WorkspaceWrapperProviderWithStore(_ref3) {
   var children = _ref3.children,
       store = _ref3.store,
       _ref3$createApi = _ref3.createApi,
@@ -13621,7 +13758,7 @@ var ScreenManagerWrapperProviderWithStore = function ScreenManagerWrapperProvide
     name: API_NAME
   }, /*#__PURE__*/React__default.createElement(Provider, {
     store: store
-  }, /*#__PURE__*/React__default.createElement(ScreenManagerWrapperProvider, {
+  }, /*#__PURE__*/React__default.createElement(WorkspaceWrapperProvider, {
     theme: theme
   }, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children))));
 };
@@ -13653,7 +13790,7 @@ var WorkspaceModuleProvider = function WorkspaceModuleProvider(_ref) {
     createApi: config.baseURL ? createApi$1 : createApiWithoutSave,
     config: config,
     name: API_NAME
-  }, /*#__PURE__*/React.createElement(ScreenManagerWrapperProvider, null, children));
+  }, /*#__PURE__*/React.createElement(WorkspaceDndProvider, null, children));
 };
 
 /*! *****************************************************************************
@@ -13717,7 +13854,7 @@ var buttonStyle = {
   marginRight: 0.5
 };
 
-var ScreenManagerControls = function ScreenManagerControls(_ref) {
+var WorkspaceControls = function WorkspaceControls(_ref) {
   var createNode = _ref.createNode,
       path = _ref.path,
       _ref$shouldPreventClo = _ref.shouldPreventCloseView,
@@ -13968,7 +14105,7 @@ var createBalancedMosaicNode = function createBalancedMosaicNode(currentNode) {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
-var ScreenManagerTileConnect = function ScreenManagerTileConnect(_ref) {
+var WorkspaceTileConnect = function WorkspaceTileConnect(_ref) {
   var _ref$mosaicNodeId = _ref.mosaicNodeId,
       mosaicNodeId = _ref$mosaicNodeId === void 0 ? '' : _ref$mosaicNodeId,
       path = _ref.path,
@@ -14044,7 +14181,7 @@ var ScreenManagerTileConnect = function ScreenManagerTileConnect(_ref) {
     path: path,
     createNode: createNode,
     title: title,
-    toolbarControls: /*#__PURE__*/React.createElement(ScreenManagerControls, {
+    toolbarControls: /*#__PURE__*/React.createElement(WorkspaceControls, {
       createNode: createNode,
       path: path,
       shouldPreventCloseView: shouldPreventCloseView
@@ -14078,7 +14215,7 @@ var ScreenManagerTileConnect = function ScreenManagerTileConnect(_ref) {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
-var ScreenManagerView = function ScreenManagerView(_ref) {
+var WorkspaceView = function WorkspaceView(_ref) {
   var screenConfig = _ref.screenConfig,
       componentsLookUp = _ref.componentsLookUp,
       updateViews = _ref.updateViews,
@@ -14161,7 +14298,7 @@ var ScreenManagerView = function ScreenManagerView(_ref) {
               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
@@ -14174,7 +14311,7 @@ var ScreenManagerView = function ScreenManagerView(_ref) {
             }
           };
         }
-      }, /*#__PURE__*/React.createElement(ScreenManagerTileConnect, {
+      }, /*#__PURE__*/React.createElement(WorkspaceTileConnect, {
         mosaicNodeId: viewId,
         path: path,
         componentsLookUp: componentsLookUp
@@ -14229,7 +14366,7 @@ var useControlActiveWindowId = function useControlActiveWindowId(screenConfig, a
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var ScreenManagerViewConnect = function ScreenManagerViewConnect(_ref) {
+var WorkspaceViewConnect = function WorkspaceViewConnect(_ref) {
   var componentsLookUp = _ref.componentsLookUp;
   var dispatch = useDispatch();
   var isWorkspaceLoading$1 = useSelector(function (store) {
@@ -14266,7 +14403,7 @@ var ScreenManagerViewConnect = function ScreenManagerViewConnect(_ref) {
       return window.removeEventListener('orientationchange', handleOrientationChange);
     };
   }, [handleOrientationChange]);
-  return /*#__PURE__*/React__default.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React__default.createElement(ScreenManagerView, {
+  return /*#__PURE__*/React__default.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React__default.createElement(WorkspaceView, {
     screenConfig: screenConfig,
     componentsLookUp: componentsLookUp,
     updateViews: updateViews,
@@ -14292,96 +14429,44 @@ var ScreenManagerViewConnect = function ScreenManagerViewConnect(_ref) {
  * 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;
-  }
+var getPresetIcon = function getPresetIcon(preset) {
+  switch (preset.viewType) {
+    case 'tiledWindow':
+      return /*#__PURE__*/React__default.createElement(PresetTiles, {
+        "data-testid": "tiledWindowIcon"
+      });
 
-  return null;
-};
-var getIsWorkspaceListFetching = function getIsWorkspaceListFetching(store) {
-  var _a;
+    case 'multiWindow':
+      return /*#__PURE__*/React__default.createElement(PresetWorkspace, {
+        "data-testid": "multiWindowIcon"
+      });
 
-  return ((_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.isFetching) || false;
+    case 'singleWindow':
+    default:
+      return /*#__PURE__*/React__default.createElement(Preset, {
+        "data-testid": "singleWindowIcon"
+      });
+  }
 };
-var getWorkspaceListError = function getWorkspaceListError(store) {
-  var _a;
 
-  return (_a = getWorkspaceListStore(store)) === null || _a === void 0 ? void 0 : _a.error;
-};
+var WorkspaceSelectListRow = function WorkspaceSelectListRow(_ref) {
+  var workspacePreset = _ref.workspacePreset,
+      currentSelectedId = _ref.currentSelectedId,
+      onClickPreset = _ref.onClickPreset,
+      onClickWorkspacePresetOption = _ref.onClickWorkspacePresetOption,
+      _ref$isOptionsMenuOpe = _ref.isOptionsMenuOpen,
+      isOptionsMenuOpen = _ref$isOptionsMenuOpe === void 0 ? false : _ref$isOptionsMenuOpe,
+      _ref$searchQuery = _ref.searchQuery,
+      searchQuery = _ref$searchQuery === void 0 ? '' : _ref$searchQuery;
 
-var _workspaceListAdapter = workspaceListAdapter.getSelectors(function (state) {
-  var _a;
-
-  return (_a = state === null || state === void 0 ? void 0 : state.workspaceList) !== null && _a !== void 0 ? _a : {
-    entities: {},
-    ids: []
-  };
-}),
-    getWorkspaceList = _workspaceListAdapter.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.createElement(PresetTiles, {
-        "data-testid": "tiledWindowIcon"
-      });
-
-    case 'multiWindow':
-      return /*#__PURE__*/React__default.createElement(PresetWorkspace, {
-        "data-testid": "multiWindowIcon"
-      });
-
-    case 'singleWindow':
-    default:
-      return /*#__PURE__*/React__default.createElement(Preset, {
-        "data-testid": "singleWindowIcon"
-      });
-  }
-};
-
-var WorkspaceSelectListRow = function WorkspaceSelectListRow(_ref) {
-  var workspacePreset = _ref.workspacePreset,
-      currentSelectedId = _ref.currentSelectedId,
-      onClickPreset = _ref.onClickPreset,
-      onClickWorkspacePresetOption = _ref.onClickWorkspacePresetOption,
-      _ref$isOptionsMenuOpe = _ref.isOptionsMenuOpen,
-      isOptionsMenuOpen = _ref$isOptionsMenuOpe === void 0 ? false : _ref$isOptionsMenuOpe;
-
-  var onDuplicate = function onDuplicate() {
-    onClickWorkspacePresetOption(workspacePreset.id, WorkspacePresetAction.DUPLICATE);
-  }; // const onEdit = (): void => {
-  //   onClickWorkspacePresetOption(
-  //     workspacePreset.id,
-  //     WorkspacePresetAction.EDIT,
-  //   );
-  // };
+  var onDuplicate = function onDuplicate() {
+    onClickWorkspacePresetOption(workspacePreset.id, WorkspacePresetAction.DUPLICATE);
+  }; // const onEdit = (): void => {
+  //   onClickWorkspacePresetOption(
+  //     workspacePreset.id,
+  //     WorkspacePresetAction.EDIT,
+  //   );
+  // };
 
 
   return /*#__PURE__*/React__default.createElement(ListItem, {
@@ -14417,8 +14502,14 @@ var WorkspaceSelectListRow = function WorkspaceSelectListRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(ListItemIcon, null, getPresetIcon(workspacePreset)), /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: workspacePreset.title
   }, /*#__PURE__*/React__default.createElement(ListItemText, {
-    primary: workspacePreset.title,
-    secondary: workspacePreset["abstract"],
+    primary: /*#__PURE__*/React__default.createElement(SearchHighlight, {
+      text: workspacePreset === null || workspacePreset === void 0 ? void 0 : workspacePreset.title,
+      search: searchQuery
+    }),
+    secondary: /*#__PURE__*/React__default.createElement(SearchHighlight, {
+      text: workspacePreset === null || workspacePreset === void 0 ? void 0 : workspacePreset["abstract"],
+      search: searchQuery
+    }),
     sx: {
       margin: 0
     }
@@ -14484,7 +14575,9 @@ var WorkspaceSelectList = function WorkspaceSelectList(_ref) {
   var workspacePresets = _ref.workspacePresets,
       currentSelectedId = _ref.currentSelectedId,
       onClickPreset = _ref.onClickPreset,
-      onClickWorkspacePresetOption = _ref.onClickWorkspacePresetOption;
+      onClickWorkspacePresetOption = _ref.onClickWorkspacePresetOption,
+      hideNewWorkspace = _ref.hideNewWorkspace,
+      searchQuery = _ref.searchQuery;
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "workspaceSelectList"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -14492,23 +14585,221 @@ var WorkspaceSelectList = function WorkspaceSelectList(_ref) {
       marginBottom: '4px',
       fontSize: '12px'
     }
-  }, workspacePresets.length, " results"), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(WorkspaceSelectListRow, {
+  }, workspacePresets.length, " results"), /*#__PURE__*/React.createElement(List, null, !hideNewWorkspace && /*#__PURE__*/React.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.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(_ref) {
+  var label = _ref.label,
+      id = _ref.id,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$handleClick = _ref.handleClick,
+      handleClick = _ref$handleClick === void 0 ? function () {} : _ref$handleClick;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(Chip, {
+    size: "small",
+    id: id,
+    label: label,
+    disabled: isDisabled,
+    variant: isSelected ? 'filled' : 'outlined',
+    color: isSelected ? 'secondary' : 'default',
+    sx: {
+      borderColor: "".concat(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(_ref) {
+  var _ref$filters = _ref.filters,
+      filters = _ref$filters === void 0 ? workspaceListFilterOptions : _ref$filters,
+      _ref$onChipClick = _ref.onChipClick,
+      onChipClick = _ref$onChipClick === void 0 ? function () {} : _ref$onChipClick,
+      _ref$isAllSelected = _ref.isAllSelected,
+      isAllSelected = _ref$isAllSelected === void 0 ? false : _ref$isAllSelected;
+  return /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    spacing: 1,
+    "data-testid": "filterList"
+  }, /*#__PURE__*/React.createElement(FilterChip, {
+    id: "all",
+    label: allLabel,
+    isSelected: isAllSelected,
+    handleClick: function handleClick(key) {
+      return onChipClick(key, !isAllSelected);
+    }
+  }), filters.map(function (filter) {
+    return /*#__PURE__*/React.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);
+      }
+    });
+  }));
+};
+
+var DEBOUNCE_TIMEOUT = 300;
+
+var SearchField = function SearchField(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Search' : _ref$label,
+      valueChanged = _ref.valueChanged,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value;
+
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray$9(_React$useState, 2),
+      localValue = _React$useState2[0],
+      setLocalValue = _React$useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  var handleValueChangeDebounced = React.useCallback(debounce$1(valueChanged, DEBOUNCE_TIMEOUT), []);
+
+  var ClearButton = function ClearButton() {
+    return /*#__PURE__*/React.createElement(CustomIconButton, {
+      tooltipTitle: "Clear",
+      edge: "end",
+      onClick: function onClick() {
+        setLocalValue('');
+        valueChanged('');
+      },
+      size: "large"
+    }, /*#__PURE__*/React.createElement(Clear, null));
+  };
+
+  var SearchButton = function SearchButton() {
+    return /*#__PURE__*/React.createElement(CustomIconButton, {
+      tooltipTitle: label,
+      edge: "end",
+      size: "large"
+    }, /*#__PURE__*/React.createElement(Search, null));
+  };
+
+  return /*#__PURE__*/React.createElement(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.createElement(InputAdornment, {
+        position: "end"
+      }, localValue ? /*#__PURE__*/React.createElement(ClearButton, null) : /*#__PURE__*/React.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(_ref) {
+  var filters = _ref.filters,
+      _ref$onClickFilterChi = _ref.onClickFilterChip,
+      onClickFilterChip = _ref$onClickFilterChi === void 0 ? function () {} : _ref$onClickFilterChi,
+      _ref$onSearch = _ref.onSearch,
+      onSearch = _ref$onSearch === void 0 ? function () {} : _ref$onSearch,
+      isAllSelected = _ref.isAllSelected,
+      searchQuery = _ref.searchQuery;
+  return /*#__PURE__*/React.createElement(Stack, {
+    spacing: 1,
+    sx: {
+      marginBottom: '8px'
+    }
+  }, /*#__PURE__*/React.createElement(SearchField, {
+    value: searchQuery,
+    valueChanged: onSearch
+  }), /*#__PURE__*/React.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.
@@ -14532,6 +14823,12 @@ var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
   var workspacePresets = useSelector(function (store) {
     return getWorkspaceList(store);
   });
+  var workspaceListFilters = useSelector(function (store) {
+    return getWorkspaceListFilters(store);
+  });
+  var workspaceSearchQuery = useSelector(function (store) {
+    return getWorkspaceListSearchQuery(store);
+  });
   var isFetching = useSelector(function (store) {
     return getIsWorkspaceListFetching(store);
   });
@@ -14540,8 +14837,9 @@ var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
   });
   var dispatch = useDispatch();
   var fetchWorkspaceList = React.useCallback(function () {
-    dispatch(workspaceListActions.fetchWorkspaceList());
-  }, [dispatch]);
+    var filterParams = constructFilterParams(workspaceListFilters, workspaceSearchQuery);
+    dispatch(workspaceListActions.fetchWorkspaceList(filterParams));
+  }, [dispatch, workspaceListFilters, workspaceSearchQuery]);
   var fetchWorkspace = React.useCallback(function (workspaceId) {
     dispatch(workspaceActions.fetchWorkspace({
       workspaceId: workspaceId
@@ -14550,9 +14848,23 @@ var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
   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
+    }));
+  }, [dispatch]);
+  var setSelectAllFilterChip = React.useCallback(function () {
+    dispatch(workspaceListActions.setSelectAllFilterChip());
+  }, [dispatch]);
+  var searchFilter = React.useCallback(function (searchQuery) {
+    dispatch(workspaceListActions.searchFilter({
+      searchQuery: searchQuery
+    }));
+  }, [dispatch]);
   React.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.useCallback(function () {
     dispatch(routerActions.navigateToUrl({
@@ -14574,6 +14886,16 @@ var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
     }
   };
 
+  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) {
@@ -14616,6 +14938,10 @@ var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
     }
   };
 
+  var isAllSelected = workspaceListFilters.every(function (filter) {
+    return filter.isSelected;
+  });
+  var shouldHideNewWorkspace = !isAllSelected || workspaceSearchQuery.length > 0;
   return /*#__PURE__*/React.createElement("div", null, isFetching && /*#__PURE__*/React.createElement(LinearProgress, {
     "data-testid": "loading-bar",
     color: "secondary",
@@ -14640,11 +14966,19 @@ var WorkspaceSelectListConnect = function WorkspaceSelectListConnect() {
         return fetchWorkspaceList();
       }
     }
-  }))), /*#__PURE__*/React.createElement(WorkspaceSelectList, {
+  }))), !error && /*#__PURE__*/React.createElement(WorkspaceFilter, {
+    filters: workspaceListFilters,
+    onClickFilterChip: onClickFilterChip,
+    isAllSelected: isAllSelected,
+    searchQuery: workspaceSearchQuery,
+    onSearch: searchFilter
+  }), /*#__PURE__*/React.createElement(WorkspaceSelectList, {
     workspacePresets: workspacePresets,
     currentSelectedId: currentView.id || '',
     onClickPreset: onClickWorkspace,
-    onClickWorkspacePresetOption: onClickWorkspacePresetOption
+    onClickWorkspacePresetOption: onClickWorkspacePresetOption,
+    hideNewWorkspace: shouldHideNewWorkspace,
+    searchQuery: workspaceSearchQuery
   }));
 };
 
@@ -14745,7 +15079,7 @@ var WorkspaceMenuButton = function WorkspaceMenuButton(_ref) {
       '&&': {
         backgroundColor: !showMenu && 'transparent',
         '&:hover': {
-          backgroundColor: 'geowebColors.screenManager.workspace.tabButtonHover'
+          backgroundColor: 'geowebColors.workspace.tabButtonHover'
         }
       }
     }
@@ -14843,7 +15177,7 @@ var WorkspaceOptions = function WorkspaceOptions(_ref) {
           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',
@@ -14933,6 +15267,16 @@ var WorkspaceOptions = function WorkspaceOptions(_ref) {
  * 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 "".concat(title, " (").concat(suffix, ")");
+};
 var WorkspaceOptionsConnect = function WorkspaceOptionsConnect(_ref) {
   var title = _ref.title,
       activeTab = _ref.activeTab,
@@ -14979,9 +15323,10 @@ var WorkspaceOptionsConnect = function WorkspaceOptionsConnect(_ref) {
       workspace: workspaceData
     }));
   }, [dispatch, workspaceData]);
+  var fullTitle = getTitle(title, hasChanges, workspaceId);
   return /*#__PURE__*/React.createElement(WorkspaceOptions, {
     hasChanges: hasChanges,
-    title: title,
+    title: fullTitle,
     activeTab: activeTab,
     handleDelete: workspaceScope === 'user' ? onDelete : undefined,
     handleSaveAs: onSaveAs,
@@ -15421,127 +15766,6 @@ var WorkspaceTopBar = function WorkspaceTopBar(_ref) {
   }));
 };
 
-/* *
- * 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(_ref) {
-  var workspaceId = _ref.workspaceId,
-      children = _ref.children,
-      componentsLookUp = _ref.componentsLookUp,
-      _ref$isSnapshot = _ref.isSnapshot,
-      isSnapshot = _ref$isSnapshot === void 0 ? false : _ref$isSnapshot;
-  var dispatch = useDispatch();
-  var error = useSelector(function (store) {
-    return getWorkspaceError(store);
-  });
-  var isLoading = useSelector(function (store) {
-    return isWorkspaceLoading(store);
-  });
-  var workspaceData = useSelector(function (store) {
-    return getWorkspaceData(store);
-  });
-  var fetchWorkspace = React.useCallback(function (newWorkspaceId) {
-    dispatch(workspaceActions.fetchWorkspace({
-      workspaceId: newWorkspaceId
-    }));
-  }, [dispatch]);
-  var onSave = React.useCallback(function () {
-    dispatch(workspaceActions.saveWorkspacePreset({
-      workspace: workspaceData
-    }));
-  }, [dispatch, workspaceData]);
-  var setScreenPreset = React.useCallback(function (newScreenPreset) {
-    dispatch(workspaceActions.changePreset({
-      workspacePreset: newScreenPreset
-    }));
-  }, [dispatch]);
-  var navigateToUrl = React.useCallback(function (url) {
-    dispatch(routerActions.navigateToUrl({
-      url: url
-    }));
-  }, [dispatch]);
-
-  var setEmptyWorkSpace = function setEmptyWorkSpace() {
-    setScreenPreset(emptyMapWorkspace);
-    navigateToUrl(routes.root);
-  };
-
-  React.useEffect(function () {
-    if (!workspaceId) {
-      setEmptyWorkSpace();
-    } else {
-      fetchWorkspace(workspaceId);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-  return /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "workspace",
-    sx: {
-      width: '100%',
-      height: '100%'
-    }
-  }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
-    "data-testid": "loading-bar",
-    color: "secondary",
-    sx: {
-      position: 'absolute',
-      width: '100%',
-      top: 0,
-      zIndex: 100
-    }
-  }), error && error.type !== WorkspaceErrorType.SAVE && /*#__PURE__*/React.createElement(AlertBanner, Object.assign({
-    title: "Failed to fetch workspace ".concat(workspaceId),
-    info: error.message,
-    shouldClose: true
-  }, error.type === WorkspaceErrorType.GENERIC && {
-    actionButtonProps: {
-      title: 'Try again',
-      onClick: function onClick() {
-        return fetchWorkspace(workspaceId);
-      }
-    }
-  })), children, !isSnapshot && /*#__PURE__*/React.createElement(React.Fragment, null, error && error.type === WorkspaceErrorType.SAVE && /*#__PURE__*/React.createElement(AlertBanner, {
-    title: "Failed to save workspace \"".concat(workspaceData.title, "\""),
-    info: error.message,
-    shouldClose: true,
-    actionButtonProps: {
-      title: 'Try again',
-      onClick: function onClick() {
-        return onSave();
-      }
-    }
-  }), (!error || error.type === WorkspaceErrorType.SAVE) && /*#__PURE__*/React.createElement(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.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.
@@ -15649,7 +15873,7 @@ var getConfirmLabel = function getConfirmLabel(action) {
 var MapPresetsFormDialog = function MapPresetsFormDialog(_ref) {
   var isOpen = _ref.isOpen,
       action = _ref.action,
-      presetId = _ref.presetId,
+      viewPresetId = _ref.viewPresetId,
       formValues = _ref.formValues,
       onSuccess = _ref.onSuccess,
       onClose = _ref.onClose,
@@ -15709,12 +15933,12 @@ var MapPresetsFormDialog = function MapPresetsFormDialog(_ref) {
 
             case 13:
               _context.next = 15;
-              return api.deleteViewPreset(presetId);
+              return api.deleteViewPreset(viewPresetId);
 
             case 15:
               setIsLoading(false);
               onClose();
-              onSuccess(action, presetId, newFormValues.title);
+              onSuccess(action, viewPresetId, newFormValues.title);
               return _context.abrupt("break", 20);
 
             case 19:
@@ -15780,6 +16004,181 @@ var MapPresetsFormDialogWrapper = function MapPresetsFormDialogWrapper(_a) {
   }, /*#__PURE__*/React__default.createElement(MapPresetsFormDialog, Object.assign({}, props)));
 };
 
+/* *
+ * 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 MapPresetsFormDialogConnect = function MapPresetsFormDialogConnect() {
+  var dispatch = useDispatch();
+  var dialogOptions = useSelector(function (store) {
+    return getDialogOptions(store);
+  });
+  var closeDialog = React__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.createElement(MapPresetsFormDialogWrapper, Object.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(_ref) {
+  var workspaceId = _ref.workspaceId,
+      children = _ref.children,
+      componentsLookUp = _ref.componentsLookUp,
+      _ref$isSnapshot = _ref.isSnapshot,
+      isSnapshot = _ref$isSnapshot === void 0 ? false : _ref$isSnapshot;
+  var dispatch = useDispatch();
+  var error = useSelector(function (store) {
+    return getWorkspaceError(store);
+  });
+  var isLoading = useSelector(function (store) {
+    return isWorkspaceLoading(store);
+  });
+  var workspaceData = useSelector(function (store) {
+    return getWorkspaceData(store);
+  });
+  var fetchWorkspace = React.useCallback(function (newWorkspaceId) {
+    dispatch(workspaceActions.fetchWorkspace({
+      workspaceId: newWorkspaceId
+    }));
+  }, [dispatch]);
+  var onSave = React.useCallback(function () {
+    dispatch(workspaceActions.saveWorkspacePreset({
+      workspace: workspaceData
+    }));
+  }, [dispatch, workspaceData]);
+  var setScreenPreset = React.useCallback(function (newScreenPreset) {
+    dispatch(workspaceActions.changePreset({
+      workspacePreset: newScreenPreset
+    }));
+  }, [dispatch]);
+  var navigateToUrl = React.useCallback(function (url) {
+    dispatch(routerActions.navigateToUrl({
+      url: url
+    }));
+  }, [dispatch]);
+
+  var setEmptyWorkSpace = function setEmptyWorkSpace() {
+    setScreenPreset(emptyMapWorkspace);
+    navigateToUrl(routes.root);
+  };
+
+  React.useEffect(function () {
+    if (!workspaceId) {
+      setEmptyWorkSpace();
+    } else {
+      fetchWorkspace(workspaceId);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  return /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "workspace",
+    sx: {
+      width: '100%',
+      height: '100%'
+    }
+  }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
+    "data-testid": "loading-bar",
+    color: "secondary",
+    sx: {
+      position: 'absolute',
+      width: '100%',
+      top: 0,
+      zIndex: 100
+    }
+  }), error && error.type !== WorkspaceErrorType.SAVE && /*#__PURE__*/React.createElement(AlertBanner, Object.assign({
+    title: "Failed to fetch workspace ".concat(workspaceId),
+    info: error.message,
+    shouldClose: true
+  }, error.type === WorkspaceErrorType.GENERIC && {
+    actionButtonProps: {
+      title: 'Try again',
+      onClick: function onClick() {
+        return fetchWorkspace(workspaceId);
+      }
+    }
+  })), children, !isSnapshot && /*#__PURE__*/React.createElement(React.Fragment, null, error && error.type === WorkspaceErrorType.SAVE && /*#__PURE__*/React.createElement(AlertBanner, {
+    title: "Failed to save workspace \"".concat(workspaceData.title, "\""),
+    info: error.message,
+    shouldClose: true,
+    actionButtonProps: {
+      title: 'Try again',
+      onClick: function onClick() {
+        return onSave();
+      }
+    }
+  }), (!error || error.type === WorkspaceErrorType.SAVE) && /*#__PURE__*/React.createElement(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.createElement(WorkspaceViewConnect, {
+    componentsLookUp: componentsLookUp
+  }))), /*#__PURE__*/React.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.
@@ -15825,7 +16224,7 @@ var MapPresetsMenuItem = function MapPresetsMenuItem(_ref) {
   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)
@@ -15882,6 +16281,8 @@ var MapPresetsMenuItem = function MapPresetsMenuItem(_ref) {
 };
 
 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 _toConsumableArray$3(mapPresets).sort(function (left, right) {
@@ -15904,8 +16305,6 @@ var MapPresetsDialog = function MapPresetsDialog(_ref) {
       isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? 'mappresets-menubutton' : _ref$id,
-      _ref$onSuccess = _ref.onSuccess,
-      onSuccess = _ref$onSuccess === void 0 ? function () {} : _ref$onSuccess,
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
       _ref$hasError = _ref.hasError,
@@ -15919,19 +16318,17 @@ var MapPresetsDialog = function MapPresetsDialog(_ref) {
       _ref$onSavePreset = _ref.onSavePreset,
       onSavePreset = _ref$onSavePreset === void 0 ? function () {} : _ref$onSavePreset,
       _ref$fetchNewPresetLi = _ref.fetchNewPresetList,
-      fetchNewPresetList = _ref$fetchNewPresetLi === void 0 ? function () {} : _ref$fetchNewPresetLi;
+      fetchNewPresetList = _ref$fetchNewPresetLi === void 0 ? function () {} : _ref$fetchNewPresetLi,
+      panelId = _ref.panelId,
+      _ref$openViewPresetsD = _ref.openViewPresetsDialog,
+      openViewPresetsDialog = _ref$openViewPresetsD === void 0 ? function () {} : _ref$openViewPresetsD;
 
   var _a;
 
   var _React$useState = React__default.useState(null),
       _React$useState2 = _slicedToArray$9(_React$useState, 2),
-      dialogOptions = _React$useState2[0],
-      setDialogOptions = _React$useState2[1];
-
-  var _React$useState3 = React__default.useState(null),
-      _React$useState4 = _slicedToArray$9(_React$useState3, 2),
-      anchorEl = _React$useState4[0],
-      setAnchorEl = _React$useState4[1];
+      anchorEl = _React$useState2[0],
+      setAnchorEl = _React$useState2[1];
 
   var isOpen = Boolean(anchorEl);
 
@@ -15948,12 +16345,7 @@ var MapPresetsDialog = function MapPresetsDialog(_ref) {
     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:
         {
@@ -15980,10 +16372,11 @@ var MapPresetsDialog = function MapPresetsDialog(_ref) {
 
       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: {
@@ -15998,10 +16391,11 @@ var MapPresetsDialog = function MapPresetsDialog(_ref) {
 
       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
             }
@@ -16011,10 +16405,6 @@ var MapPresetsDialog = function MapPresetsDialog(_ref) {
     }
   };
 
-  var onClose = function onClose() {
-    setDialogOptions(null);
-  };
-
   var activePresetTitle = activeMapPresetId ? (_a = mapPresets.find(function (preset) {
     return preset.id === activeMapPresetId;
   })) === null || _a === void 0 ? void 0 : _a.title : MAPPRESET_ACTIVE_TITLE;
@@ -16089,7 +16479,9 @@ var MapPresetsDialog = function MapPresetsDialog(_ref) {
   }, "Map presets")), /*#__PURE__*/React__default.createElement(MapPresetsMenuItem, {
     id: "",
     title: MAPPRESET_ACTIVE_TITLE,
-    onClickPreset: onClickPresetItem,
+    onClickPreset: function onClickPreset(presetId, action) {
+      onClickPresetItem(presetId, action, '');
+    },
     isActive: isNewActive,
     scope: "user",
     isNew: true,
@@ -16134,11 +16526,7 @@ var MapPresetsDialog = function MapPresetsDialog(_ref) {
     severity: "info",
     dataTestId: "info-banner",
     title: "You haven't saved any presets yet"
-  }))), /*#__PURE__*/React__default.createElement(MapPresetsFormDialogWrapper, Object.assign({
-    isOpen: Boolean(dialogOptions),
-    onClose: onClose,
-    onSuccess: onSuccess
-  }, dialogOptions)));
+  }))));
 };
 
 /* *
@@ -16233,14 +16621,11 @@ var MapPresetsDialogConnect = function MapPresetsDialogConnect(_ref) {
       viewPreset: viewPreset
     }));
   }, [dispatch, mapId]);
-  var onSuccesMapPresetAction = React__default.useCallback(function (action, viewPresetId, title) {
-    dispatch(viewPresetActions.onSuccessViewPresetAction({
-      panelId: mapId,
-      viewPresetId: viewPresetId,
-      action: action,
-      title: title
+  var openViewPresetsDialog = React__default.useCallback(function (viewPresetDialogOptions) {
+    dispatch(viewPresetActions.openViewPresetDialog({
+      viewPresetDialog: viewPresetDialogOptions
     }));
-  }, [dispatch, mapId]);
+  }, [dispatch]);
   React__default.useEffect(function () {
     if (!mapPresets.length) {
       fetchInitialPresets();
@@ -16251,7 +16636,6 @@ var MapPresetsDialogConnect = function MapPresetsDialogConnect(_ref) {
     activeMapPresetId: activeMapPresetId,
     mapPresets: mapPresets,
     onClickPreset: selectMapPreset,
-    onSuccess: onSuccesMapPresetAction,
     isLoading: isMapPresetsListFetching,
     hasError: !!errorMapPresetsList,
     hasMapPresetChanges: hasMapPresetChanges,
@@ -16259,8 +16643,10 @@ var MapPresetsDialogConnect = function MapPresetsDialogConnect(_ref) {
     relatedSyncGroupIds: relatedSyncGroupIds,
     onSavePreset: saveMapPreset,
     fetchNewPresetList: fetchMapPresetsList,
-    id: id
+    id: id,
+    panelId: mapId,
+    openViewPresetsDialog: openViewPresetsDialog
   });
 };
 
-export { ComponentsLookUpWrapper, MapPresetsDialog, MapPresetsDialogConnect, ScreenManagerThemeProvider, ScreenManagerViewConnect, ScreenManagerWrapperProvider, ScreenManagerWrapperProviderWithStore, WorkspaceDetail, WorkspaceDndProvider, WorkspaceErrorType, WorkspaceModuleProvider, WorkspacePresetAction, WorkspaceTopBar, workspaceActions as actions, createBalancedMosaicNode, emptyMapWorkspace, getWorkspaceRouteUrl, screenManagerModuleModuleConfig, selectors, viewPresetActions, workspaceListActions, routes as workspaceRoutes };
+export { ComponentsLookUpWrapper, MapPresetsDialog, MapPresetsDialogConnect, WorkspaceDetail, WorkspaceDndProvider, WorkspaceErrorType, WorkspaceModuleProvider, WorkspacePresetAction, WorkspaceThemeProvider, WorkspaceTopBar, WorkspaceViewConnect, WorkspaceWrapperProvider, WorkspaceWrapperProviderWithStore, workspaceActions as actions, createBalancedMosaicNode, emptyMapWorkspace, getWorkspaceRouteUrl, selectors, viewPresetActions, workspaceListActions, workspaceModuleConfig, routes as workspaceRoutes };