@itwin/saved-views-react 0.2.1 → 0.3.0

package/lib/api/utilities/translation/viewExtractorSavedViewToLegacySavedView.js

@@ -1,30 +1,73 @@
 import { SheetViewState } from "@itwin/core-frontend";
 import { extractClipVectors } from "./clipVectorsExtractor.js";
 import { extractDisplayStyle, extractDisplayStyle3d } from "./displayStyleExtractor.js";
-import { convertAllLegacyUrlsToUrls, urlToLegacyUrl } from "./urlConverter.js";
-const UNGROUPED_ID = "-1";
-/**
- * Extracts id from href
- * @param href
- */
-export const extractIdFromHref = (href) => {
-    return href.split("/").pop();
-};
-/**
- * Extract all the tags
- * @param creator href for the creator
- * @param tags the list of tags in the saved view
- * @returns
- */
-const extractTags = (creator, tags) => {
-    return tags?.map((tag) => {
-        const legacyTag = {
-            name: tag.displayName,
-            createdByUserId: extractIdFromHref(creator) ?? "",
-        };
-        return legacyTag;
-    });
-};
+export function savedViewITwin3dToLegacy3dSavedView(savedViewRsp, seedSpatialViewState) {
+    const modelSelector = seedSpatialViewState.modelSelector;
+    const itwin3dView = savedViewRsp.savedViewData.itwin3dView;
+    const legacyView = {
+        id: savedViewRsp.id,
+        is2d: false,
+        groupId: savedViewRsp._links.group ? extractIdFromHref(savedViewRsp._links.group.href) : undefined,
+        tags: extractTags(savedViewRsp._links.creator?.href ?? "", savedViewRsp.tags),
+        name: savedViewRsp.displayName,
+        userId: extractIdFromHref(savedViewRsp._links.creator?.href ?? "") ?? "",
+        shared: savedViewRsp.shared,
+        thumbnailId: savedViewRsp.id ?? "",
+        viewDefinitionProps: {
+            origin: itwin3dView.origin,
+            extents: itwin3dView.extents,
+            angles: itwin3dView.angles ?? {},
+            camera: itwin3dView.camera,
+            jsonProperties: {
+                viewDetails: extractClipVectors(itwin3dView) ?? {},
+            },
+            classFullName: seedSpatialViewState.classFullName,
+            code: seedSpatialViewState.code,
+            model: seedSpatialViewState.model,
+            categorySelectorId: seedSpatialViewState.categorySelector.id,
+            displayStyleId: seedSpatialViewState.displayStyle.id,
+            cameraOn: itwin3dView.camera !== undefined,
+            modelSelectorId: seedSpatialViewState.modelSelector.id,
+        },
+        modelSelectorProps: {
+            classFullName: modelSelector.classFullName,
+            code: {
+                spec: modelSelector.code.spec,
+                scope: modelSelector.code.scope,
+                value: modelSelector.code.value,
+            },
+            model: modelSelector.model,
+            models: itwin3dView.models?.enabled ?? [],
+        },
+        categorySelectorProps: {
+            classFullName: seedSpatialViewState.categorySelector.classFullName,
+            categories: itwin3dView.categories?.enabled ?? [],
+            code: {
+                scope: seedSpatialViewState.categorySelector.code.scope,
+                spec: seedSpatialViewState.categorySelector.code.spec,
+                value: seedSpatialViewState.categorySelector.code.value,
+            },
+            model: seedSpatialViewState.categorySelector.model,
+        },
+        displayStyleProps: {
+            id: seedSpatialViewState.displayStyle.id,
+            classFullName: seedSpatialViewState.displayStyle.classFullName,
+            code: seedSpatialViewState.displayStyle.code,
+            model: seedSpatialViewState.displayStyle.model,
+            jsonProperties: {
+                styles: extractDisplayStyle3d(savedViewRsp.savedViewData.itwin3dView),
+            },
+        },
+    };
+    appendHiddenCategoriesToLegacyView(itwin3dView, legacyView);
+    appendHiddenModelsTo3dLegacySavedView(itwin3dView, legacyView);
+    return legacyView;
+}
+function appendHiddenModelsTo3dLegacySavedView(view, legacyView) {
+    if (view.models?.disabled) {
+        legacyView.hiddenModels = view.models?.disabled;
+    }
+}
 /**
  * Transform a ViewDataITwinDrawing into a legacy SavedView if possible
  * @param savedViewRsp
@@ -32,15 +75,12 @@ const extractTags = (creator, tags) => {
  * @returns SavedView2d
  */
 export function savedViewItwinDrawingToLegacyDrawingView(savedViewRsp, seedDrawingViewState) {
-    convertAllLegacyUrlsToUrls(savedViewRsp.savedViewData, urlToLegacyUrl);
     const iTwinDrawingView = savedViewRsp.savedViewData.itwinDrawingView;
     seedDrawingViewState.displayStyle;
     const legacyView = {
         id: savedViewRsp.id,
         is2d: true,
-        groupId: savedViewRsp._links.group
-            ? extractIdFromHref(savedViewRsp._links.group.href)
-            : UNGROUPED_ID ?? "",
+        groupId: savedViewRsp._links.group ? extractIdFromHref(savedViewRsp._links.group.href) : undefined,
         tags: extractTags(savedViewRsp._links.creator?.href ?? "", savedViewRsp.tags),
         name: savedViewRsp.displayName,
         userId: extractIdFromHref(savedViewRsp._links.creator?.href ?? "") ?? "",
@@ -48,7 +88,7 @@ export function savedViewItwinDrawingToLegacyDrawingView(savedViewRsp, seedDrawi
         thumbnailId: savedViewRsp.id ?? "",
         categorySelectorProps: {
             classFullName: seedDrawingViewState.categorySelector.classFullName,
-            categories: (iTwinDrawingView.categories?.enabled ?? []),
+            categories: iTwinDrawingView.categories?.enabled ?? [],
             code: {
                 scope: seedDrawingViewState.categorySelector.code.scope,
                 spec: seedDrawingViewState.categorySelector.code.spec,
@@ -63,7 +103,7 @@ export function savedViewItwinDrawingToLegacyDrawingView(savedViewRsp, seedDrawi
             id: seedDrawingViewState.id,
             jsonProperties: {
                 viewDetails: {
-                    gridOrient: seedDrawingViewState.getGridOrientation() ?? undefined,
+                    gridOrient: seedDrawingViewState.getGridOrientation(),
                 },
             },
             code: {
@@ -107,14 +147,11 @@ export function savedViewItwinDrawingToLegacyDrawingView(savedViewRsp, seedDrawi
  * @returns SavedView2d
  */
 export function savedViewItwinSheetToLegacySheetSavedView(savedViewRsp, seedSheetViewState) {
-    convertAllLegacyUrlsToUrls(savedViewRsp.savedViewData, urlToLegacyUrl);
     const itwinSheetView = savedViewRsp.savedViewData.itwinSheetView;
     const legacyView = {
         id: savedViewRsp.id,
         is2d: true,
-        groupId: savedViewRsp._links.group
-            ? extractIdFromHref(savedViewRsp._links.group.href)
-            : UNGROUPED_ID,
+        groupId: savedViewRsp._links.group ? extractIdFromHref(savedViewRsp._links.group.href) : undefined,
         tags: extractTags(savedViewRsp._links.creator?.href ?? "", savedViewRsp.tags),
         name: savedViewRsp.displayName,
         userId: extractIdFromHref(savedViewRsp._links.creator?.href ?? "") ?? "",
@@ -122,7 +159,7 @@ export function savedViewItwinSheetToLegacySheetSavedView(savedViewRsp, seedShee
         thumbnailId: savedViewRsp.id ?? "",
         categorySelectorProps: {
             classFullName: seedSheetViewState.categorySelector.classFullName,
-            categories: (itwinSheetView.categories?.enabled ?? []),
+            categories: itwinSheetView.categories?.enabled ?? [],
             code: {
                 scope: seedSheetViewState.categorySelector.code.scope,
                 spec: seedSheetViewState.categorySelector.code.spec,
@@ -187,107 +224,19 @@ export function savedViewItwinSheetToLegacySheetSavedView(savedViewRsp, seedShee
     return legacyView;
 }
 /**
- * Transform a ViewDataItwin3d into a legacy SavedView if possible
- * @param savedViewRsp
- * @param seedSpatialViewState
- * @returns SavedView
+ * Extract all the tags.
+ * @param creator href for the creator
+ * @param tags the list of tags in the saved view
  */
-export function savedViewITwin3dToLegacy3dSavedView(savedViewRsp, seedSpatialViewState) {
-    convertAllLegacyUrlsToUrls(savedViewRsp.savedViewData, urlToLegacyUrl);
-    const modelSelector = seedSpatialViewState.modelSelector;
-    const itwin3dView = savedViewRsp.savedViewData.itwin3dView;
-    const legacyView = {
-        id: savedViewRsp.id,
-        is2d: false,
-        groupId: savedViewRsp._links.group
-            ? extractIdFromHref(savedViewRsp._links.group.href)
-            : UNGROUPED_ID,
-        tags: extractTags(savedViewRsp._links.creator?.href ?? "", savedViewRsp.tags),
-        name: savedViewRsp.displayName,
-        userId: extractIdFromHref(savedViewRsp._links.creator?.href ?? "") ?? "",
-        shared: savedViewRsp.shared,
-        thumbnailId: savedViewRsp.id ?? "",
-        viewDefinitionProps: {
-            origin: itwin3dView.origin,
-            extents: itwin3dView.extents,
-            angles: itwin3dView.angles ?? {},
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            camera: itwin3dView.camera,
-            jsonProperties: {
-                viewDetails: extractClipVectors(itwin3dView) ?? {},
-            },
-            classFullName: seedSpatialViewState.classFullName,
-            code: seedSpatialViewState.code,
-            model: seedSpatialViewState.model,
-            categorySelectorId: seedSpatialViewState.categorySelector.id,
-            displayStyleId: seedSpatialViewState.displayStyle.id,
-            cameraOn: itwin3dView.camera !== undefined,
-            modelSelectorId: seedSpatialViewState.modelSelector.id,
-        },
-        modelSelectorProps: {
-            classFullName: modelSelector.classFullName,
-            code: {
-                spec: modelSelector.code.spec,
-                scope: modelSelector.code.scope,
-                value: modelSelector.code.value,
-            },
-            model: modelSelector.model,
-            models: (itwin3dView.models?.enabled ?? []),
-        },
-        categorySelectorProps: {
-            classFullName: seedSpatialViewState.categorySelector.classFullName,
-            categories: (itwin3dView.categories?.enabled ?? []),
-            code: {
-                scope: seedSpatialViewState.categorySelector.code.scope,
-                spec: seedSpatialViewState.categorySelector.code.spec,
-                value: seedSpatialViewState.categorySelector.code.value,
-            },
-            model: seedSpatialViewState.categorySelector.model,
-        },
-        displayStyleProps: {
-            id: seedSpatialViewState.displayStyle.id,
-            classFullName: seedSpatialViewState.displayStyle.classFullName,
-            code: seedSpatialViewState.displayStyle.code,
-            model: seedSpatialViewState.displayStyle.model,
-            jsonProperties: {
-                styles: extractDisplayStyle3d(savedViewRsp.savedViewData.itwin3dView),
-            },
-        },
-    };
-    appendHiddenCategoriesToLegacyView(itwin3dView, legacyView);
-    appendHiddenModelsTo3dLegacySavedView(itwin3dView, legacyView);
-    return legacyView;
+function extractTags(creator, tags) {
+    const createdByUserId = extractIdFromHref(creator) ?? "";
+    return tags?.map((tag) => ({ name: tag.displayName, createdByUserId }));
+}
+function extractIdFromHref(href) {
+    return href.split("/").pop();
 }
-/** Append Hidden Categories Or Models To Legacy Saved View. */
 function appendHiddenCategoriesToLegacyView(iTwinView, legacyView) {
-    if (iTwinView.categories && iTwinView.categories.disabled) {
+    if (iTwinView.categories?.disabled) {
         legacyView.hiddenCategories = iTwinView.categories.disabled;
     }
 }
-/**
- * append Hidden Categories Or Models To Legacy Saved View
- * @param view new schema
- * @param legacyView
- * @returns iModelViewData
- */
-function appendHiddenModelsTo3dLegacySavedView(view, legacyView) {
-    if (view.models && view.models.disabled) {
-        legacyView.hiddenModels = view.models?.disabled;
-    }
-}
-/**
- * removes null and undefined from legacy view model selectors props models
- * @param savedView
- * @returns SavedViewWithData
- */
-export const cleanLegacyViewModelSelectorPropsModels = (savedView) => {
-    if (savedView.savedViewData.legacyView?.modelSelectorProps) {
-        const savedViewCopy = structuredClone(savedView);
-        const legacyView = savedViewCopy.savedViewData.legacyView;
-        legacyView.modelSelectorProps.models =
-            legacyView.modelSelectorProps.models.filter((model) => !!model);
-        savedViewCopy.savedViewData.legacyView = legacyView;
-        return savedViewCopy;
-    }
-    return savedView;
-};

package/lib/captureSavedViewData.d.ts

@@ -1,4 +1,5 @@
-import { type Viewport } from "@itwin/core-frontend";
+import { Id64Array } from "@itwin/core-bentley";
+import { type IModelConnection, type Viewport } from "@itwin/core-frontend";
 import { type ViewData } from "@itwin/saved-views-client";
 interface CaptureSavedViewDataArgs {
     /** Viewport to capture the view from. */
@@ -10,4 +11,6 @@ interface CaptureSavedViewDataArgs {
     captureHiddenModelsAndCategories?: boolean | undefined;
 }
 export declare function captureSavedViewData(args: CaptureSavedViewDataArgs): Promise<ViewData>;
+export declare function getMissingModels(iModel: IModelConnection, knownModels: Set<string>): Promise<string[]>;
+export declare function getMissingCategories(iModel: IModelConnection, knownCategories: Set<string>): Promise<Id64Array>;
 export {};

package/lib/captureSavedViewData.js

@@ -3,11 +3,15 @@ import { extractClipVectorsFromLegacy } from "./api/utilities/translation/clipVe
 import { extractDisplayStyle2dFromLegacy, extractDisplayStyle3dFromLegacy, } from "./api/utilities/translation/displayStyleExtractor.js";
 export async function captureSavedViewData(args) {
     const { captureHiddenModelsAndCategories = true } = args;
-    const hiddenCategoriesPromise = captureHiddenModelsAndCategories ? getHiddenCategories(args.viewport) : undefined;
+    const hiddenCategoriesPromise = captureHiddenModelsAndCategories
+        ? getMissingCategories(args.viewport.iModel, new Set(args.viewport.view.categorySelector.toJSON().categories))
+        : undefined;
     if (args.viewport.view.isSpatialView()) {
         const [hiddenCategories, hiddenModels] = await Promise.all([
             hiddenCategoriesPromise,
-            captureHiddenModelsAndCategories ? getHiddenModels(args.viewport) : undefined,
+            captureHiddenModelsAndCategories
+                ? getMissingModels(args.viewport.iModel, new Set(args.viewport.view.modelSelector.toJSON().models))
+                : undefined,
         ]);
         return createSpatialSavedViewObject(args.viewport, hiddenCategories, hiddenModels);
     }
@@ -120,10 +124,9 @@ function toDegrees(angle) {
     }
     return undefined;
 }
-async function getHiddenModels(vp) {
-    const allModels = await getAllModels(vp.iModel);
-    const visibleModels = new Set(vp.view.modelSelector.toJSON().models);
-    return allModels.map(({ id }) => id).filter((model) => !visibleModels.has(model));
+export async function getMissingModels(iModel, knownModels) {
+    const allModels = await getAllModels(iModel);
+    return allModels.map(({ id }) => id).filter((model) => !knownModels.has(model));
 }
 async function getAllModels(iModel) {
     // Note: IsNotSpatiallyLocated was introduced in a later version of the BisCore ECSchema. If the iModel has an earlier
@@ -136,10 +139,9 @@ async function getAllModels(iModel) {
         return executeQuery(iModel, "SELECT ECInstanceId FROM Bis.GeometricModel3D WHERE IsPrivate = false AND IsTemplate = false");
     }
 }
-async function getHiddenCategories(vp) {
-    const visibleCategories = new Set(vp.view.categorySelector.toJSON().categories);
-    const allCategories = await getAllCategories(vp.iModel);
-    return allCategories.map(({ id }) => id).filter((category) => !visibleCategories.has(category));
+export async function getMissingCategories(iModel, knownCategories) {
+    const allCategories = await getAllCategories(iModel);
+    return allCategories.map(({ id }) => id).filter((category) => !knownCategories.has(category));
 }
 async function getAllCategories(iModel) {
     return executeQuery(iModel, "SELECT DISTINCT Category.Id AS id FROM BisCore.GeometricElement3d WHERE Category.Id IN (SELECT ECInstanceId FROM BisCore.SpatialCategory)");

package/lib/experimental.d.ts

@@ -1,4 +1,6 @@
 export { createSavedViewOptions, type CreateSavedViewOptionsParams } from "./SavedViewTile/SavedViewOptions.js";
 export { SavedViewsExpandableBlockWidget } from "./SavedViewsWidget/SavedViewsExpandableBlockWidget.js";
 export { SavedViewsFolderWidget } from "./SavedViewsWidget/SavedViewsFolderWidget.js";
-export { applyExtensionsToViewport, translateLegacySavedViewToITwinJsViewState, translateSavedViewResponseToLegacySavedViewResponse, } from "./api/utilities/translation/SavedViewTranslation.js";
+export type { LegacySavedViewBase } from "./api/utilities/SavedViewTypes.js";
+export { applyExtensionsToViewport, augmentWithScheduleScript, translateLegacySavedViewToITwinJsViewState, translateSavedViewToLegacySavedView, } from "./api/utilities/translation/SavedViewTranslation.js";
+export { ModelCategoryOverrideProvider } from "./ui/viewlist/ModelCategoryOverrideProvider.js";

package/lib/experimental.js

@@ -5,4 +5,5 @@
 export { createSavedViewOptions } from "./SavedViewTile/SavedViewOptions.js";
 export { SavedViewsExpandableBlockWidget } from "./SavedViewsWidget/SavedViewsExpandableBlockWidget.js";
 export { SavedViewsFolderWidget } from "./SavedViewsWidget/SavedViewsFolderWidget.js";
-export { applyExtensionsToViewport, translateLegacySavedViewToITwinJsViewState, translateSavedViewResponseToLegacySavedViewResponse, } from "./api/utilities/translation/SavedViewTranslation.js";
+export { applyExtensionsToViewport, augmentWithScheduleScript, translateLegacySavedViewToITwinJsViewState, translateSavedViewToLegacySavedView, } from "./api/utilities/translation/SavedViewTranslation.js";
+export { ModelCategoryOverrideProvider } from "./ui/viewlist/ModelCategoryOverrideProvider.js";

package/lib/useSavedViews.d.ts

@@ -25,8 +25,8 @@ interface UseSavedViewsResult {
     actions: SavedViewActions;
 }
 export interface SavedViewActions {
-    createSavedView: (savedViewName: string, savedViewData: ViewData) => Promise<string>;
-    renameSavedView: (savedViewId: string, newName: string) => void;
+    submitSavedView: (savedView: string | Partial<SavedView> & Pick<SavedView, "displayName">, savedViewData: ViewData) => Promise<string>;
+    renameSavedView: (savedViewId: string, newName: string | undefined) => void;
     shareSavedView: (savedViewId: string, share: boolean) => void;
     deleteSavedView: (savedViewId: string) => void;
     createGroup: (groupName: string) => void;

package/lib/useSavedViews.js

@@ -75,12 +75,14 @@ export function useSavedViews(args) {
                     return;
                 }
                 setState({
-                    savedViews: new Map(result.savedViews.map((savedView) => {
-                        if (savedView.thumbnail === undefined) {
-                            savedView.thumbnail = _jsx(ThumbnailPlaceholder, { savedViewId: savedView.id, observer: observer });
-                        }
-                        return [savedView.id, savedView];
-                    })),
+                    savedViews: new Map(result.savedViews.map((savedView) => [
+                        savedView.id,
+                        {
+                            ...savedView,
+                            thumbnail: savedView.thumbnail
+                                ?? _jsx(ThumbnailPlaceholder, { savedViewId: savedView.id, observer: observer }),
+                        },
+                    ])),
                     groups: new Map(result.groups.map((group) => [group.id, group])),
                     tags: new Map(result.tags.map((tag) => [tag.id, tag])),
                     thumbnails: new Map(),
@@ -88,7 +90,7 @@ export function useSavedViews(args) {
                 setProvider(createSavedViewActions(args.iTwinId, args.iModelId, args.client, setState, providerRef, onUpdateInProgress, onUpdateComplete, onUpdateError));
             }
             catch (error) {
-                if (error.name !== "AbortError") {
+                if (!isAbortError(error)) {
                     throw error;
                 }
             }
@@ -119,31 +121,51 @@ function useEvent(handleEvent) {
 function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpdateInProgress, onUpdateComplete, onUpdateError) {
     const signal = ref.current.abortController.signal;
     return {
-        createSavedView: actionWrapper(async (savedViewName, savedViewData) => {
-            const savedView = await client.createSavedView({
-                iTwinId: iTwinId,
-                iModelId: iModelId,
-                savedView: {
-                    displayName: savedViewName,
-                },
-                savedViewData,
-                signal,
+        submitSavedView: actionWrapper(async (savedView, savedViewData) => {
+            let newSavedView;
+            if (typeof savedView !== "string" && savedView.id) {
+                newSavedView = await client.updateSavedView({
+                    // TypeScript cannot tell that `savedView` object contains `id` string without a little help
+                    savedView: { id: savedView.id, ...savedView },
+                    savedViewData,
+                    signal,
+                });
+            }
+            else {
+                newSavedView = await client.createSavedView({
+                    iTwinId: iTwinId,
+                    iModelId: iModelId,
+                    savedView: typeof savedView === "string" ? { displayName: savedView } : savedView,
+                    savedViewData,
+                    signal,
+                });
+            }
+            updateSavedViews((savedViews) => {
+                const entries = Array.from(savedViews.values());
+                entries.push(newSavedView);
+                entries.sort((a, b) => a.displayName.localeCompare(b.displayName));
+                return new Map(entries.map((savedView) => [savedView.id, savedView]));
             });
-            updateSavedViews((savedViews) => savedViews.set(savedView.id, savedView));
-            return savedView.id;
+            return newSavedView.id;
         }),
         renameSavedView: actionWrapper(async (savedViewId, newName) => {
+            if (!newName) {
+                return;
+            }
+            const savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
+            if (!savedView || newName === savedView.displayName) {
+                return;
+            }
             let prevName;
             updateSavedView(savedViewId, (savedView) => {
                 prevName = savedView.displayName;
                 savedView.displayName = newName;
             });
             try {
-                const savedView = await client.updateSavedView({
+                await client.updateSavedView({
                     savedView: { id: savedViewId, displayName: newName },
                     signal,
                 });
-                updateSavedView(savedViewId, () => savedView);
             }
             catch (error) {
                 if (prevName !== undefined) {
@@ -164,8 +186,7 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
                 savedView.shared = share;
             });
             try {
-                const savedView = await client.updateSavedView({ savedView: { id: savedViewId, shared: share }, signal });
-                updateSavedView(savedView.id, () => savedView);
+                await client.updateSavedView({ savedView: { id: savedViewId, shared: share }, signal });
             }
             catch (error) {
                 updateSavedView(savedViewId, (savedView) => {
@@ -175,22 +196,19 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
             }
         }),
         deleteSavedView: actionWrapper(async (savedViewId) => {
-            let prevSavedView;
+            let prevSavedViews;
             updateSavedViews((savedViews) => {
-                prevSavedView = savedViews.get(savedViewId);
+                prevSavedViews = new Map(savedViews);
                 savedViews.delete(savedViewId);
             });
             try {
                 await client.deleteSavedView({ savedViewId, signal });
             }
-            catch {
-                if (prevSavedView !== undefined) {
-                    const restoredSavedView = prevSavedView;
-                    updateSavedViews((savedViews) => {
-                        // The deleted view will return at the last position in the enumeration
-                        savedViews.set(savedViewId, restoredSavedView);
-                    });
+            catch (error) {
+                if (prevSavedViews !== undefined) {
+                    updateSavedViews(() => prevSavedViews);
                 }
+                throw error;
             }
         }),
         createGroup: actionWrapper(async (groupName) => {
@@ -200,7 +218,12 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
                 group: { displayName: groupName },
                 signal,
             });
-            updateGroups((groups) => groups.set(group.id, group));
+            updateGroups((groups) => {
+                const entries = Array.from(groups.values());
+                entries.push(group);
+                entries.sort((a, b) => a.displayName.localeCompare(b.displayName));
+                return new Map(entries.map((group) => [group.id, group]));
+            });
         }),
         renameGroup: actionWrapper(async (groupId, newName) => {
             let prevName;
@@ -248,8 +271,7 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
                 savedView.groupId = groupId;
             });
             try {
-                const savedView = await client.updateSavedView({ savedView: { id: savedViewId, groupId }, signal });
-                updateSavedView(savedView.id, () => savedView);
+                await client.updateSavedView({ savedView: { id: savedViewId, groupId }, signal });
             }
             catch (error) {
                 const restoredGroupId = prevGroupId;
@@ -276,8 +298,7 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
                 savedView.groupId = group.id;
             });
             try {
-                const savedView = await client.updateSavedView({ savedView: { id: savedViewId, groupId: group.id }, signal });
-                updateSavedView(savedView.id, () => savedView);
+                await client.updateSavedView({ savedView: { id: savedViewId, groupId: group.id }, signal });
             }
             catch (error) {
                 updateSavedView(savedViewId, (savedView) => {
@@ -287,27 +308,23 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
             }
         }),
         deleteGroup: actionWrapper(async (groupId) => {
-            let prevGroup;
+            let prevGroups;
             updateGroups((groups) => {
-                prevGroup = groups.get(groupId);
+                prevGroups = new Map(groups);
                 groups.delete(groupId);
             });
             try {
                 await client.deleteGroup({ groupId, signal });
             }
             catch (error) {
-                if (prevGroup) {
-                    const restoredGroup = prevGroup;
-                    updateGroups((groups) => {
-                        // The deleted group will return at the last position in the enumeration
-                        groups.set(groupId, restoredGroup);
-                    });
+                if (prevGroups) {
+                    updateGroups(() => prevGroups);
                 }
                 throw error;
             }
         }),
         addTag: actionWrapper(async (savedViewId, tagId) => {
-            let savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
+            const savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
             if (!savedView) {
                 return;
             }
@@ -324,8 +341,7 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
                 savedView.tagIds = tagIds;
             });
             try {
-                savedView = await client.updateSavedView({ savedView: { id: savedViewId, tagIds }, signal });
-                updateSavedView(savedView.id, () => savedView);
+                await client.updateSavedView({ savedView: { id: savedViewId, tagIds }, signal });
             }
             catch (error) {
                 updateSavedView(savedViewId, (savedView) => {
@@ -335,7 +351,7 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
             }
         }),
         addNewTag: actionWrapper(async (savedViewId, tagName) => {
-            let savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
+            const savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
             if (!savedView) {
                 return;
             }
@@ -361,8 +377,7 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
                 savedView.tagIds = tagIds;
             });
             try {
-                savedView = await client.updateSavedView({ savedView: { id: savedViewId, tagIds }, signal });
-                updateSavedView(savedView.id, () => savedView);
+                await client.updateSavedView({ savedView: { id: savedViewId, tagIds }, signal });
             }
             catch (error) {
                 updateSavedView(savedViewId, (savedView) => {
@@ -372,7 +387,7 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
             }
         }),
         removeTag: actionWrapper(async (savedViewId, tagId) => {
-            let savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
+            const savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
             if (!savedView) {
                 return;
             }
@@ -386,8 +401,7 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
                 savedView.tagIds = tagIds;
             });
             try {
-                savedView = await client.updateSavedView({ savedView: { id: savedViewId, tagIds }, signal });
-                updateSavedView(savedView.id, () => savedView);
+                await client.updateSavedView({ savedView: { id: savedViewId, tagIds }, signal });
             }
             catch (error) {
                 updateSavedView(savedViewId, (savedView) => {
@@ -407,9 +421,8 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
             }
             catch (error) {
                 if (prevThumnbnail !== undefined) {
-                    const restoredDisplayName = prevThumnbnail;
                     updateSavedView(savedViewId, (savedView) => {
-                        savedView.thumbnail = restoredDisplayName;
+                        savedView.thumbnail = prevThumnbnail;
                     });
                 }
                 throw error;
@@ -434,7 +447,7 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
                     }
                     catch (error) {
                         reject(error);
-                        if (error && typeof error === "object" && "name" in error && error.name === "AbortError") {
+                        if (isAbortError(error)) {
                             // It's a cancellation error, no need to report it
                         }
                         else {
@@ -464,8 +477,8 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
         }
         setState((prev) => {
             const store = { ...prev };
-            store.savedViews = new Map(prev.savedViews);
-            callback(store.savedViews);
+            const savedViews = new Map(prev.savedViews);
+            store.savedViews = callback(savedViews) ?? savedViews;
             return store;
         });
     }
@@ -491,8 +504,8 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
         }
         setState((prev) => {
             const store = { ...prev };
-            store.groups = new Map(prev.groups);
-            callback(store.groups);
+            const groups = new Map(prev.groups);
+            store.groups = callback(groups) ?? groups;
             return store;
         });
     }
@@ -524,6 +537,9 @@ function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpda
         });
     }
 }
+function isAbortError(error) {
+    return error instanceof DOMException && error.name === "AbortError";
+}
 function ThumbnailPlaceholder(props) {
     const divRef = useRef(null);
     useEffect(() => {