@itwin/map-layers 5.0.0-dev.3 → 5.1.0

package/lib/cjs/ui/widget/MapLayerManager.scss

@@ -259,13 +259,8 @@ $default-font-size: --iui-font-size-1;
   .map-layer-source-item-warnMessage-icon {
     background-color: transparent;
     border: none;
-    color: $buic-foreground-warning;
+    color: var(--iui-color-icon-warning);
     background-color: transparent;
-
-    &:hover {
-      color: $hovered-icon-color;
-    }
-
     &:focus {
       outline: none;
       box-shadow: rgba(var(--iui-color-border-accent), var(--iui-opacity-4)) 0px 0px 0px 2px;
@@ -279,8 +274,7 @@ $default-font-size: --iui-font-size-1;
 }
 
 .map-manager-sublayer-panel {
-  width: 400px;
-  height: 400px;
+  width: 400px;     // Ideally I would let the popup's content drives the width, unfortunately without an explicit width, the popup location is not consistent.
   color: $buic-foreground-body;
   font-size: $default-font-size;
   padding: 4px;

package/lib/cjs/ui/widget/MapSelectFeaturesDialog.d.ts

@@ -0,0 +1,11 @@
+import "./MapSelectFeaturesDialog.scss";
+import { MapLayerSource } from "@itwin/core-frontend";
+import { MapSubLayerProps } from "@itwin/core-common";
+export interface MapSelectFeaturesProps {
+    source: MapLayerSource;
+    subLayers: MapSubLayerProps[];
+    handleOk: (subLayers: MapSubLayerProps[]) => void;
+    handleCancel: () => void;
+}
+export declare function MapSelectFeaturesDialog(props: MapSelectFeaturesProps): JSX.Element;
+//# sourceMappingURL=MapSelectFeaturesDialog.d.ts.map

package/lib/cjs/ui/widget/MapSelectFeaturesDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapSelectFeaturesDialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapSelectFeaturesDialog.tsx"],"names":[],"mappings":"AAQA,OAAO,gCAAgC,CAAC;AAIxC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAKD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,sBAAsB,eAqEpE"}

package/lib/cjs/ui/widget/MapSelectFeaturesDialog.js

@@ -0,0 +1,58 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+// cSpell:ignore Modeless WMTS
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapSelectFeaturesDialog = void 0;
+const core_react_1 = require("@itwin/core-react");
+const React = require("react");
+require("./MapSelectFeaturesDialog.scss");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const mapLayers_1 = require("../../mapLayers");
+const SubLayersTree_1 = require("./SubLayersTree");
+const minHeight = 250;
+const maxSubLayers = 30;
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function MapSelectFeaturesDialog(props) {
+    const [subLayers, setSubLayers] = React.useState(props.subLayers);
+    const [NoLayersSelectedMsg] = React.useState(() => mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:CustomAttach.NoLayersSelected"));
+    const [dialogTitle] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:CustomAttach.SelectLayersToCreate"));
+    const dialogContainer = React.useRef(null);
+    const handleOk = React.useCallback(() => {
+        props.handleOk(subLayers);
+    }, [props, subLayers]);
+    const handleCancel = React.useCallback(() => {
+        props.handleCancel();
+    }, [props]);
+    const hasVisibleLayers = () => subLayers.some((entry) => entry.visible);
+    const hasTooManyVisibleLayers = () => subLayers.filter((entry) => entry.visible).length > maxSubLayers;
+    const readyToSave = () => hasVisibleLayers();
+    const buttonCluster = [
+        { type: appui_abstract_1.DialogButtonType.OK, onClick: handleOk, disabled: !readyToSave() },
+        { type: appui_abstract_1.DialogButtonType.Cancel, onClick: handleCancel },
+    ];
+    function renderWarningMessage() {
+        let warningMessage;
+        // Get the proper warning message
+        if (!hasVisibleLayers()) {
+            warningMessage = NoLayersSelectedMsg;
+        }
+        else if (hasTooManyVisibleLayers()) {
+            warningMessage = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:CustomAttach.TooManyLayersSelected", { layerCount: subLayers.filter((entry) => entry.visible).length });
+        }
+        if (warningMessage !== undefined) {
+            return (React.createElement("div", { className: "map-layer-source-warnMessage" },
+                React.createElement(core_react_1.Icon, { className: "map-layer-source-warnMessage-icon", iconSpec: "icon-status-warning" }),
+                React.createElement("span", { className: "map-layer-source-warnMessage-label" }, warningMessage)));
+        }
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement("div", { ref: dialogContainer },
+        React.createElement(core_react_1.Dialog, { className: "map-layer-select-features-dialog", title: dialogTitle, opened: true, resizable: true, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, minHeight: minHeight, maxWidth: 600, titleStyle: { paddingLeft: "10px" }, footerStyle: { paddingBottom: "10px", paddingRight: "10px" }, trapFocus: false },
+            React.createElement(SubLayersTree_1.SubLayersTree, { expandMode: "full", checkboxStyle: "standard", subLayers: subLayers, onSubLayerStateChange: () => setSubLayers([...subLayers]) }),
+            renderWarningMessage())));
+}
+exports.MapSelectFeaturesDialog = MapSelectFeaturesDialog;
+//# sourceMappingURL=MapSelectFeaturesDialog.js.map

package/lib/cjs/ui/widget/MapSelectFeaturesDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapSelectFeaturesDialog.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapSelectFeaturesDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n// cSpell:ignore Modeless WMTS\n\nimport { Dialog, Icon } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport \"./MapSelectFeaturesDialog.scss\";\n\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { MapLayerSource } from \"@itwin/core-frontend\";\nimport { MapSubLayerProps } from \"@itwin/core-common\";\nimport { SubLayersTree } from \"./SubLayersTree\";\n\nexport interface MapSelectFeaturesProps {\n  source: MapLayerSource;\n  subLayers: MapSubLayerProps[];\n  handleOk: (subLayers: MapSubLayerProps[]) => void;\n  handleCancel: () => void;\n}\nconst minHeight = 250;\nconst maxSubLayers = 30;\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapSelectFeaturesDialog(props: MapSelectFeaturesProps) {\n  const [subLayers, setSubLayers] = React.useState(props.subLayers);\n  const [NoLayersSelectedMsg] = React.useState(()=>MapLayersUI.localization.getLocalizedString(\"mapLayers:CustomAttach.NoLayersSelected\"));\n  const [dialogTitle] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:CustomAttach.SelectLayersToCreate\"));\n\n  const dialogContainer = React.useRef<HTMLDivElement>(null);\n\n  const handleOk = React.useCallback(() => {\n    props.handleOk(subLayers);\n  }, [props, subLayers]);\n\n  const handleCancel = React.useCallback(() => {\n    props.handleCancel();\n  }, [props]);\n\n  const hasVisibleLayers = () => subLayers.some((entry)=>entry.visible);\n  const hasTooManyVisibleLayers = () => subLayers.filter((entry)=>entry.visible).length > maxSubLayers;\n  const readyToSave = () => hasVisibleLayers();\n  const buttonCluster = [\n    { type: DialogButtonType.OK, onClick: handleOk, disabled: !readyToSave() },\n    { type: DialogButtonType.Cancel, onClick: handleCancel },\n  ];\n\n  function renderWarningMessage(): React.ReactNode {\n    let warningMessage: string | undefined;\n\n    // Get the proper warning message\n    if (!hasVisibleLayers()) {\n      warningMessage = NoLayersSelectedMsg;\n    } else if (hasTooManyVisibleLayers()) {\n      warningMessage = MapLayersUI.localization.getLocalizedString(\"mapLayers:CustomAttach.TooManyLayersSelected\", { layerCount: subLayers.filter((entry)=>entry.visible).length});\n    }\n\n    if (warningMessage !== undefined) {\n      return (\n        <div className=\"map-layer-source-warnMessage\">\n          <Icon className=\"map-layer-source-warnMessage-icon\" iconSpec=\"icon-status-warning\" />\n          <span className=\"map-layer-source-warnMessage-label\">{warningMessage}</span >\n        </div>);\n    }\n    return <></>;\n  }\n\n  return (\n    <div ref={dialogContainer}>\n      <Dialog\n        className=\"map-layer-select-features-dialog\"\n        title={dialogTitle}\n        opened={true}\n        resizable={true}\n        movable={true}\n        modal={true}\n        buttonCluster={buttonCluster}\n        onClose={handleCancel}\n        onEscape={handleCancel}\n        minHeight={minHeight}\n        maxWidth={600}\n        titleStyle={{ paddingLeft: \"10px\" }}\n        footerStyle={{ paddingBottom: \"10px\", paddingRight: \"10px\" }}\n        trapFocus={false}\n      >\n        {/* 'onSubLayerStateChange' is used to trigger hook state change only, no need to update subLayer objects */}\n        <SubLayersTree expandMode=\"full\" checkboxStyle=\"standard\" subLayers={subLayers} onSubLayerStateChange={() => setSubLayers([...subLayers])}/>\n\n        {/* Warning message */}\n        {renderWarningMessage()}\n      </Dialog>\n    </div >\n  );\n}\n"]}

package/lib/cjs/ui/widget/MapSelectFeaturesDialog.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.map-layer-select-features-dialog {
+  z-Index: 21000;
+
+}
+
+.map-layer-select-features-dialog.core-dialog .core-dialog-container .core-dialog-area > .core-dialog-content {
+  overflow: hidden;
+}
+.map-layer-select-features-dialog .map-manager-sublayer-tree-content {
+  min-height: 200px;
+}
+

package/lib/cjs/ui/widget/MapUrlDialog.d.ts

@@ -1,5 +1,5 @@
 import { ImageMapLayerProps } from "@itwin/core-common";
-import { MapLayerSource, ScreenViewport } from "@itwin/core-frontend";
+import { MapLayerSource, MapLayerSourceValidation, ScreenViewport } from "@itwin/core-frontend";
 import { MapTypesOptions } from "../Interfaces";
 import "./MapUrlDialog.scss";
 export declare const MAP_TYPES: {
@@ -9,15 +9,20 @@ export declare const MAP_TYPES: {
     tileUrl: string;
     arcGisFeature: string;
 };
+export declare type LayerCreationMode = "single" | "multiple";
 interface MapUrlDialogProps {
     activeViewport?: ScreenViewport;
     isOverlay: boolean;
-    onOkResult: () => void;
+    onOkResult: (result?: SourceState) => void;
     onCancelResult?: () => void;
     mapTypesOptions?: MapTypesOptions;
     layerRequiringCredentials?: ImageMapLayerProps;
     mapLayerSourceToEdit?: MapLayerSource;
 }
+export interface SourceState {
+    source: MapLayerSource;
+    validation: MapLayerSourceValidation;
+}
 export declare function MapUrlDialog(props: MapUrlDialogProps): JSX.Element;
 export {};
 //# sourceMappingURL=MapUrlDialog.d.ts.map

package/lib/cjs/ui/widget/MapUrlDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapUrlDialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapUrlDialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAC4B,cAAc,EAC8C,cAAc,EAC5G,MAAM,sBAAsB,CAAC;AAK9B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,qBAAqB,CAAC;AAI7B,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AAEF,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,eAAe,CAAC;IAGlC,yBAAyB,CAAC,EAAE,kBAAkB,CAAC;IAE/C,oBAAoB,CAAC,EAAE,cAAc,CAAC;CACvC;AAGD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eA0mBpD"}
+{"version":3,"file":"MapUrlDialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapUrlDialog.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAC4B,cAAc,EACzB,wBAAwB,EAA+C,cAAc,EAC5G,MAAM,sBAAsB,CAAC;AAK9B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,qBAAqB,CAAC;AAE7B,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,QAAQ,GAAC,UAAU,CAAC;AACpD,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,eAAe,CAAC;IAGlC,yBAAyB,CAAC,EAAE,kBAAkB,CAAC;IAE/C,oBAAoB,CAAC,EAAE,cAAc,CAAC;CACvC;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,cAAc,CAAC;IACvB,UAAU,EAAE,wBAAwB,CAAC;CACtC;AAGD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eA+fpD"}

package/lib/cjs/ui/widget/MapUrlDialog.js

@@ -7,16 +7,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapUrlDialog = exports.MAP_TYPES = void 0;
 const appui_abstract_1 = require("@itwin/appui-abstract");
-const appui_react_1 = require("@itwin/appui-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const core_frontend_1 = require("@itwin/core-frontend");
 const core_react_1 = require("@itwin/core-react");
 const React = require("react");
 const MapLayerPreferences_1 = require("../../MapLayerPreferences");
 const mapLayers_1 = require("../../mapLayers");
-require("./MapUrlDialog.scss");
 const core_bentley_1 = require("@itwin/core-bentley");
 const SelectMapFormat_1 = require("./SelectMapFormat");
+require("./MapUrlDialog.scss");
 exports.MAP_TYPES = {
     wms: "WMS",
     arcGis: "ArcGIS",
@@ -26,7 +25,7 @@ exports.MAP_TYPES = {
 };
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function MapUrlDialog(props) {
-    const { isOverlay, onOkResult, mapTypesOptions } = props;
+    const { onOkResult, mapTypesOptions } = props;
     const getMapUrlFromProps = React.useCallback(() => {
         if (props.mapLayerSourceToEdit) {
             return props.mapLayerSourceToEdit.url;
@@ -104,27 +103,11 @@ function MapUrlDialog(props) {
         && props.activeViewport.iModel.iTwinId !== core_bentley_1.Guid.empty
         && props?.activeViewport?.iModel?.iModelId !== undefined
         && props?.activeViewport.iModel.iModelId !== core_bentley_1.Guid.empty);
-    // Even though the settings storage is available,
-    // we don't always want to enable it in the UI.
-    const [settingsStorageDisabled] = React.useState(!isSettingsStorageAvailable || props.mapLayerSourceToEdit !== undefined || props.layerRequiringCredentials !== undefined);
-    const [layerRequiringCredentialsIdx] = React.useState(() => {
-        if (props.layerRequiringCredentials === undefined || !props.layerRequiringCredentials.name || !props.layerRequiringCredentials.url) {
-            return undefined;
-        }
-        const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(props.layerRequiringCredentials.name, props.layerRequiringCredentials.url, isOverlay);
-        if (indexInDisplayStyle === undefined || indexInDisplayStyle < 0) {
-            return undefined;
-        }
-        else {
-            return indexInDisplayStyle;
-        }
-    });
     const handleCancel = React.useCallback(() => {
         if (props.onCancelResult) {
             props.onCancelResult();
             return;
         }
-        appui_react_1.UiFramework.dialogs.modal.close();
     }, [props]);
     const onUsernameChange = React.useCallback((event) => {
         setUserName(event.target.value);
@@ -170,105 +153,6 @@ function MapUrlDialog(props) {
         }
         return sourceRequireAuth || invalidCredentials;
     }, [accessClient, invalidCredentialsProvided]);
-    const updateAttachedLayer = React.useCallback(async (source, validation) => {
-        const vp = props?.activeViewport;
-        if (vp === undefined || source === undefined || layerRequiringCredentialsIdx === undefined) {
-            const error = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachMissingViewOrSource");
-            const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error, sourceUrl: source.url });
-            core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msg));
-            return true;
-        }
-        // Layer is already attached,
-        // This calls invalidateRenderPlan()
-        vp.displayStyle.changeMapLayerProps({
-            subLayers: validation.subLayers,
-        }, { index: layerRequiringCredentialsIdx, isOverlay });
-        vp.displayStyle.changeMapLayerCredentials({ index: layerRequiringCredentialsIdx, isOverlay }, source.userName, source.password);
-        // Either initial attach/initialize failed or the layer failed to load at least one tile
-        // because of an invalid token; in both cases tile tree needs to be fully reset
-        const provider = vp.getMapLayerImageryProvider({ index: layerRequiringCredentialsIdx, isOverlay });
-        provider?.resetStatus();
-        vp.resetMapLayer({ index: layerRequiringCredentialsIdx, isOverlay });
-        // This handler will close the layer source handler, and therefore the MapUrl dialog.
-        // don't call it if the dialog needs to remains open.
-        onOkResult();
-        return true;
-    }, [isOverlay, layerRequiringCredentialsIdx, onOkResult, props.activeViewport]);
-    // Returns true if no further input is needed from end-user.
-    const doAttach = React.useCallback(async (source, validation) => {
-        const vp = props?.activeViewport;
-        if (vp === undefined || source === undefined) {
-            const error = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachMissingViewOrSource");
-            const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error, sourceUrl: source.url });
-            core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msg));
-            return true;
-        }
-        // Update service settings if storage is available and we are not prompting user for credentials
-        if (!settingsStorageDisabled && !props.layerRequiringCredentials) {
-            const storeOnIModel = (hasImodelContext ? "Model" === settingsStorage : undefined);
-            if (vp.iModel.iTwinId && !(await MapLayerPreferences_1.MapLayerPreferences.storeSource(source, vp.iModel.iTwinId, vp.iModel.iModelId, storeOnIModel))) {
-                const msgError = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerPreferencesStoreFailed");
-                core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msgError));
-            }
-        }
-        // Some sources have a single non-visible sub-layer (i.e. ArcGIS World Topo Map); to avoid having a layer with no content (and no way to change the sub-layer visibility)
-        // we force the sub-layer visibility to ON.
-        let subLayers = validation.subLayers;
-        if (validation.subLayers && validation.subLayers.length === 1 && validation.subLayers[0].visible === false) {
-            subLayers = [{ ...validation.subLayers[0], visible: true }];
-        }
-        const settings = source.toLayerSettings(subLayers);
-        if (settings) {
-            vp.displayStyle.attachMapLayer({ settings, mapLayerIndex: { index: -1, isOverlay } });
-            const msg = core_frontend_1.IModelApp.localization.getLocalizedString("mapLayers:Messages.MapLayerAttached", { sourceName: source.name, sourceUrl: source.url });
-            core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Info, msg));
-        }
-        else {
-            const msgError = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerLayerSettingsConversionError");
-            const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:CustomAttach.MapLayerAttachError", { error: msgError, sourceUrl: source.url });
-            core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msg));
-        }
-        // This handler will close the layer source handler, and therefore the MapUrl dialog.
-        // don't call it if the dialog needs to remains open.
-        onOkResult();
-        return true;
-    }, [hasImodelContext, isOverlay, onOkResult, props?.activeViewport, props.layerRequiringCredentials, settingsStorage, settingsStorageDisabled]);
-    // Validate the layer source and attempt to attach (or update) the layer.
-    // Returns true if no further input is needed from end-user (i.e. close the dialog)
-    const attemptAttachSource = React.useCallback(async (source) => {
-        try {
-            const validation = await source.validateSource(true);
-            if (validation.status === core_frontend_1.MapLayerSourceStatus.Valid) {
-                if (layerRequiringCredentialsIdx === undefined) {
-                    return await doAttach(source, validation);
-                }
-                else {
-                    return await updateAttachedLayer(source, validation);
-                }
-            }
-            else if (validation.status === core_frontend_1.MapLayerSourceStatus.InvalidCoordinateSystem) {
-                const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:CustomAttach.InvalidCoordinateSystem");
-                core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msg));
-                return true;
-            }
-            else {
-                const authNeeded = await updateAuthState(source, validation);
-                if (authNeeded) {
-                    return false;
-                }
-                else {
-                    const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:CustomAttach.ValidationError");
-                    core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, `${msg} ${source.url}`));
-                    return true;
-                }
-            }
-        }
-        catch (error) {
-            const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error, sourceUrl: source.url });
-            core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msg));
-            return true;
-        }
-    }, [updateAuthState, doAttach, layerRequiringCredentialsIdx, updateAttachedLayer]);
     const onNameChange = React.useCallback((event) => {
         setMapName(event.target.value);
     }, [setMapName]);
@@ -297,12 +181,11 @@ function MapUrlDialog(props) {
     const handleOk = React.useCallback(() => {
         const source = createSource();
         if (source === undefined || props.mapLayerSourceToEdit) {
-            appui_react_1.UiFramework.dialogs.modal.close();
             onOkResult();
             if (source === undefined) {
                 // Close the dialog and inform end user something went wrong.
                 const msgError = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerLayerSourceCreationFailed");
-                const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error: msgError, sourceUrl: mapUrl });
+                const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error: msgError, sourceName: mapName });
                 core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msg));
                 return;
             }
@@ -324,27 +207,47 @@ function MapUrlDialog(props) {
                 return;
             }
         }
-        setLayerAttachPending(true);
         // Attach source asynchronously.
         void (async () => {
             try {
-                const closeDialog = await attemptAttachSource(source);
+                setLayerAttachPending(true);
+                const validation = await source.validateSource(true);
                 if (isMounted.current) {
                     setLayerAttachPending(false);
                 }
-                // In theory the modal dialog should always get closed by the parent
-                // AttachLayerPanel's 'onOkResult' handler.  We close it here just in case.
-                if (closeDialog) {
-                    appui_react_1.UiFramework.dialogs.modal.close();
-                    onOkResult();
+                if (validation.status === core_frontend_1.MapLayerSourceStatus.Valid) {
+                    // Update service settings if storage is available and we are not prompting user for credentials
+                    if (isSettingsStorageAvailable && !props.layerRequiringCredentials) {
+                        const storeOnIModel = (hasImodelContext ? "Model" === settingsStorage : undefined);
+                        const vp = props.activeViewport;
+                        if (vp?.iModel.iTwinId && !(await MapLayerPreferences_1.MapLayerPreferences.storeSource(source, vp.iModel.iTwinId, vp.iModel.iModelId, storeOnIModel))) {
+                            const msgError = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerPreferencesStoreFailed");
+                            core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msgError));
+                        }
+                    }
+                    onOkResult({ source, validation });
+                }
+                else if (validation.status === core_frontend_1.MapLayerSourceStatus.InvalidCoordinateSystem) {
+                    const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:CustomAttach.InvalidCoordinateSystem");
+                    core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msg));
+                    onOkResult({ source, validation });
+                }
+                else {
+                    const authNeeded = await updateAuthState(source, validation);
+                    if (!authNeeded) {
+                        const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:CustomAttach.ValidationError");
+                        core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, `${msg} ${source.url}`));
+                        onOkResult({ source, validation });
+                    }
                 }
             }
-            catch (_error) {
+            catch (error) {
+                const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error, sourceName: source.name });
+                core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, msg));
                 onOkResult();
-                appui_react_1.UiFramework.dialogs.modal.close();
             }
         })();
-    }, [createSource, props.mapLayerSourceToEdit, props.activeViewport, onOkResult, mapUrl, isSettingsStorageAvailable, attemptAttachSource]);
+    }, [createSource, mapName, props.mapLayerSourceToEdit, props.activeViewport, onOkResult, isSettingsStorageAvailable, updateAuthState, hasImodelContext, props.layerRequiringCredentials, settingsStorage]);
     React.useEffect(() => {
         const handleOAuthProcessEnd = (success, _state) => {
             onOauthProcessEnd.raiseEvent(success, _state);
@@ -515,11 +418,12 @@ function MapUrlDialog(props) {
                             React.createElement(itwinui_react_1.LabeledInput, { className: "map-layer-source-input", displayStyle: "inline", placeholder: serverRequireCredentials ? userNameRequiredLabel : userNameLabel, status: (!userName && serverRequireCredentials) || invalidCredentialsProvided ? "warning" : undefined, disabled: layerAttachPending || layerAuthPending, onChange: onUsernameChange, value: userName, size: "small" }),
                             React.createElement("span", { className: "map-layer-source-label" }, passwordLabel),
                             React.createElement(itwinui_react_1.LabeledInput, { className: "map-layer-source-input", displayStyle: "inline", type: "password", placeholder: serverRequireCredentials ? passwordRequiredLabel : passwordLabel, status: (!password && serverRequireCredentials) || invalidCredentialsProvided ? "warning" : undefined, disabled: layerAttachPending || layerAuthPending, onChange: onPasswordChange, onKeyPress: handleOnKeyDown, value: password, size: "small" })),
-                    isSettingsStorageAvailable &&
-                        React.createElement("div", { title: settingsStorageDisabled ? noSaveSettingsWarning : "" }, hasImodelContext &&
+                    !props.layerRequiringCredentials
+                        && !props.mapLayerSourceToEdit
+                        && React.createElement("div", { title: !isSettingsStorageAvailable ? noSaveSettingsWarning : "" }, hasImodelContext &&
                             React.createElement("div", null,
-                                React.createElement(itwinui_react_1.Radio, { disabled: settingsStorageDisabled, name: "settingsStorage", value: "iTwin", label: iTwinSettingsLabel, checked: settingsStorage === "iTwin", onChange: onRadioChange }),
-                                React.createElement(itwinui_react_1.Radio, { disabled: settingsStorageDisabled, name: "settingsStorage", value: "Model", label: modelSettingsLabel, checked: settingsStorage === "Model", onChange: onRadioChange }))))),
+                                React.createElement(itwinui_react_1.Radio, { disabled: !isSettingsStorageAvailable, name: "settingsStorage", value: "iTwin", label: iTwinSettingsLabel, checked: settingsStorage === "iTwin", onChange: onRadioChange }),
+                                React.createElement(itwinui_react_1.Radio, { disabled: !isSettingsStorageAvailable, name: "settingsStorage", value: "Model", label: modelSettingsLabel, checked: settingsStorage === "Model", onChange: onRadioChange }))))),
             renderWarningMessage(),
             (layerAttachPending || layerAuthPending) &&
                 React.createElement("div", { className: "map-layer-source-progressBar" },