@itwin/map-layers 5.4.3 → 5.5.0

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import "./MapUrlDialog.scss";
-import { ImageMapLayerSettings } from "@itwin/core-common";
-import { MapLayerSource, MapLayerSourceValidation, ScreenViewport } from "@itwin/core-frontend";
-import { MapLayerOptions } from "../Interfaces";
+import { MapLayerSource } from "@itwin/core-frontend";
+import type { ImageMapLayerSettings } from "@itwin/core-common";
+import type { MapLayerSourceValidation, ScreenViewport } from "@itwin/core-frontend";
+import type { MapLayerOptions } from "../Interfaces";
 export declare const MAP_TYPES: {
     wms: string;
     arcGis: string;

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":";AAMA,OAAO,qBAAqB,CAAC;AAI7B,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAC4B,cAAc,EAAwB,wBAAwB,EAC/F,cAAc,EACf,MAAM,sBAAsB,CAAC;AAS9B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKhD,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,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,qBAAqB,CAAC;QAC7B,UAAU,CAAC,EAAE,wBAAwB,CAAC;QACtC,MAAM,CAAC,EAAE,cAAc,CAAC;KACzB,CAAC;IAEF,oBAAoB,CAAC,EAAE,cAAc,CAAC;CACvC;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,cAAc,CAAC;IACvB,UAAU,EAAE,wBAAwB,CAAC;IACrC,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC3C,qBAAqB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACnD;AAGD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAmnBpD"}
+{"version":3,"file":"MapUrlDialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapUrlDialog.tsx"],"names":[],"mappings":";AAMA,OAAO,qBAAqB,CAAC;AAI7B,OAAO,EAAa,cAAc,EAAqE,MAAM,sBAAsB,CAAC;AAapI,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAAK,EAAwB,wBAAwB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AAMF,oBAAY,iBAAiB,GAAG,QAAQ,GAAG,UAAU,CAAC;AACtD,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,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,qBAAqB,CAAC;QAC7B,UAAU,CAAC,EAAE,wBAAwB,CAAC;QACtC,MAAM,CAAC,EAAE,cAAc,CAAC;KACzB,CAAC;IAEF,oBAAoB,CAAC,EAAE,cAAc,CAAC;CACvC;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,cAAc,CAAC;IACvB,UAAU,EAAE,wBAAwB,CAAC;IACrC,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC3C,qBAAqB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACnD;AAGD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eA4rBpD"}

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

@@ -1,13 +1,37 @@
 "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
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapUrlDialog = exports.MAP_TYPES = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+ * 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
 require("./MapUrlDialog.scss");
-const React = require("react");
+const React = __importStar(require("react"));
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_bentley_1 = require("@itwin/core-bentley");
 const core_frontend_1 = require("@itwin/core-frontend");
@@ -29,6 +53,10 @@ exports.MAP_TYPES = {
     tileUrl: "TileURL",
     arcGisFeature: "ArcGISFeature",
 };
+const URL_SCHEMES = {
+    http: "http://",
+    https: "https://",
+};
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function MapUrlDialog(props) {
     const { onOkResult, mapLayerOptions } = props;
@@ -62,8 +90,9 @@ function MapUrlDialog(props) {
     const getCustomParamsMapping = React.useCallback((url) => {
         const cpMappingStorage = new CustomParamsMappingStorage_1.CustomParamsMappingStorage();
         const cpMapping = cpMappingStorage.get(url.toLowerCase());
-        if (cpMapping && cpMapping.length > 0)
-            return cpMapping[0].customParamNames;
+        if (cpMapping && !Array.isArray(cpMapping)) {
+            return cpMapping.customParamNames;
+        }
         return [];
     }, []);
     const [dialogTitle] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString(props.signInModeArgs || props.mapLayerSourceToEdit ? "mapLayers:CustomAttach.EditCustomLayer" : "mapLayers:CustomAttach.AttachCustomLayer"));
@@ -104,8 +133,9 @@ function MapUrlDialog(props) {
     const [mapType, setMapType] = React.useState(getFormatFromProps() ?? "ArcGIS");
     const [customParamNamesChangedByUser, SetCustomParamNamesChangedByUser] = React.useState(false);
     const [customParamNames, setCustomParamNames] = React.useState(() => {
-        if (mapUrl)
+        if (mapUrl) {
             return getCustomParamsMapping(mapUrl);
+        }
         return undefined;
     });
     // 'isMounted' is used to prevent any async operation once the hook has been
@@ -118,10 +148,10 @@ function MapUrlDialog(props) {
         };
     }, []);
     const [isSettingsStorageAvailable] = React.useState(mapLayers_1.MapLayersUI.iTwinConfig && props?.activeViewport?.iModel?.iTwinId);
-    const [hasImodelContext] = React.useState(props?.activeViewport?.iModel?.iTwinId !== undefined
-        && props.activeViewport.iModel.iTwinId !== core_bentley_1.Guid.empty
-        && props?.activeViewport?.iModel?.iModelId !== undefined
-        && props?.activeViewport.iModel.iModelId !== core_bentley_1.Guid.empty);
+    const [hasImodelContext] = React.useState(props?.activeViewport?.iModel?.iTwinId !== undefined &&
+        props.activeViewport.iModel.iTwinId !== core_bentley_1.Guid.empty &&
+        props?.activeViewport?.iModel?.iModelId !== undefined &&
+        props?.activeViewport.iModel.iModelId !== core_bentley_1.Guid.empty);
     const handleCancel = React.useCallback(() => {
         if (props.onCancelResult) {
             props.onCancelResult();
@@ -130,13 +160,15 @@ function MapUrlDialog(props) {
     }, [props]);
     const onUsernameChange = React.useCallback((event) => {
         setUserName(event.target.value);
-        if (invalidCredentialsProvided)
+        if (invalidCredentialsProvided) {
             setInvalidCredentialsProvided(false);
+        }
     }, [setUserName, invalidCredentialsProvided, setInvalidCredentialsProvided]);
     const onPasswordChange = React.useCallback((event) => {
         setPassword(event.target.value);
-        if (invalidCredentialsProvided)
+        if (invalidCredentialsProvided) {
             setInvalidCredentialsProvided(false);
+        }
     }, [setPassword, invalidCredentialsProvided, setInvalidCredentialsProvided]);
     const handleArcGisLogin = React.useCallback(() => {
         setLayerAuthPending(true);
@@ -147,8 +179,8 @@ function MapUrlDialog(props) {
     }, [oauthProcessSucceeded]);
     // return true if authorization is needed
     const updateAuthState = React.useCallback(async (source, sourceValidation) => {
-        const sourceRequireAuth = (sourceValidation.status === core_frontend_1.MapLayerSourceStatus.RequireAuth);
-        let invalidCredentials = (sourceValidation.status === core_frontend_1.MapLayerSourceStatus.InvalidCredentials);
+        const sourceRequireAuth = sourceValidation.status === core_frontend_1.MapLayerSourceStatus.RequireAuth;
+        let invalidCredentials = sourceValidation.status === core_frontend_1.MapLayerSourceStatus.InvalidCredentials;
         if (sourceRequireAuth) {
             let hasTokenEndPoint = false;
             const settings = source.toLayerSettings();
@@ -161,8 +193,7 @@ function MapUrlDialog(props) {
                         hasTokenEndPoint = true;
                     }
                 }
-                catch (_error) {
-                }
+                catch (_error) { }
             }
             else if (userName.length > 0 || password.length > 0) {
                 // This is a patch until @itwin\core-frontend return the expected 'InvalidCredentials' status.
@@ -201,14 +232,10 @@ function MapUrlDialog(props) {
             }
         }
     }, [getCustomParamsMapping, customParamNamesChangedByUser]);
-    const createSource = React.useCallback(() => {
+    const createSource = React.useCallback((url) => {
         let source;
-        if (mapUrl && mapName) {
-            source = core_frontend_1.MapLayerSource.fromJSON({
-                url: mapUrl,
-                name: mapName,
-                formatId: mapType,
-            });
+        if (url && mapName) {
+            source = core_frontend_1.MapLayerSource.fromJSON({ url, name: mapName, formatId: mapType });
             // Set credentials separately since they are not part of JSON
             if (source) {
                 source.userName = userName || undefined; // When there is no value, empty string is always returned, in this case force it to undefined,
@@ -219,9 +246,16 @@ function MapUrlDialog(props) {
             }
         }
         return source;
-    }, [customParamNames, mapName, mapType, mapUrl, password, userName]);
+    }, [customParamNames, mapName, mapType, password, userName]);
     const handleOk = React.useCallback(() => {
-        const source = createSource();
+        const mapUrlLow = mapUrl.toLowerCase();
+        // Append 'https://' if url is missing scheme
+        let url = mapUrl;
+        if (!mapUrlLow.startsWith(URL_SCHEMES.http) && !mapUrlLow.startsWith(URL_SCHEMES.https)) {
+            url = `${URL_SCHEMES.https}${mapUrl}`;
+            setMapUrl(url);
+        }
+        const source = createSource(url);
         if (source === undefined || props.mapLayerSourceToEdit) {
             onOkResult();
             if (source === undefined) {
@@ -234,7 +268,7 @@ function MapUrlDialog(props) {
             // Store custom params mapping
             if (customParamNames) {
                 const cpmStorage = new CustomParamsMappingStorage_1.CustomParamsMappingStorage();
-                cpmStorage.save(mapUrl.toLowerCase(), { customParamNames });
+                cpmStorage.save(url.toLowerCase(), { customParamNames });
             }
             // Simply change the source definition in the setting service
             if (props.mapLayerSourceToEdit !== undefined) {
@@ -248,7 +282,9 @@ function MapUrlDialog(props) {
                             await MapLayerPreferences_1.MapLayerPreferences.replaceSource(props.mapLayerSourceToEdit, source, vp.iModel.iTwinId, vp?.iModel.iModelId);
                         }
                         catch (err) {
-                            const errorMessage = core_frontend_1.IModelApp.localization.getLocalizedString("mapLayers:Messages.MapLayerEditError", { layerName: props.mapLayerSourceToEdit?.name });
+                            const errorMessage = core_frontend_1.IModelApp.localization.getLocalizedString("mapLayers:Messages.MapLayerEditError", {
+                                layerName: props.mapLayerSourceToEdit?.name,
+                            });
                             core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, errorMessage));
                             return;
                         }
@@ -268,7 +304,7 @@ function MapUrlDialog(props) {
                 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.signInModeArgs) {
-                        const storeOnIModel = (hasImodelContext ? "Model" === settingsStorage : undefined);
+                        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");
@@ -281,13 +317,12 @@ function MapUrlDialog(props) {
                     if (customParamNames && customParamNames.length > 0) {
                         // Link the map-layers URL custom params.
                         const cpmStorage = new CustomParamsMappingStorage_1.CustomParamsMappingStorage();
-                        cpmStorage.save(mapUrl.toLowerCase(), { customParamNames });
+                        cpmStorage.save(url.toLowerCase(), { customParamNames });
                         const cpStorage = new CustomParamsStorage_1.CustomParamsStorage();
                         customParamNames.forEach((customParamName) => {
                             const items = cpStorage.get(customParamName);
-                            if (items && items.length > 0) {
-                                const item = items[0];
-                                (item.secret ? privateCustomParamIdx : customParamIdx)[item.key] = item.value;
+                            if (items && !Array.isArray(items)) {
+                                (items.secret ? privateCustomParamIdx : customParamIdx)[items.key] = items.value;
                             }
                         });
                     }
@@ -316,14 +351,27 @@ function MapUrlDialog(props) {
                 onOkResult();
             }
         })();
-    }, [createSource, props.mapLayerSourceToEdit, props.activeViewport, props.signInModeArgs, onOkResult, customParamNames, mapName, mapUrl, isSettingsStorageAvailable, hasImodelContext, settingsStorage, updateAuthState]);
+    }, [
+        mapUrl,
+        createSource,
+        props.mapLayerSourceToEdit,
+        props.activeViewport,
+        props.signInModeArgs,
+        onOkResult,
+        customParamNames,
+        mapName,
+        isSettingsStorageAvailable,
+        hasImodelContext,
+        settingsStorage,
+        updateAuthState,
+    ]);
     React.useEffect(() => {
         const handleOAuthProcessEnd = (success, _state) => {
             onOauthProcessEnd.raiseEvent(success, _state);
         };
         const ac = core_frontend_1.IModelApp.mapLayerFormatRegistry.getAccessClient(mapType);
         if (ac?.onOAuthProcessEnd) {
-            setAccessClient(ac); // cache it, so we dont need to make another lookup;
+            setAccessClient(ac); // cache it, so we don't need to make another lookup;
             ac.onOAuthProcessEnd.addListener(handleOAuthProcessEnd);
         }
         setAccessClientInitialized(true);
@@ -356,9 +404,7 @@ function MapUrlDialog(props) {
     React.useEffect(() => {
         // Attach source asynchronously.
         void (async () => {
-            if (isAccessClientInitialized
-                && shouldAutoAttachSource
-                && props.signInModeArgs !== undefined) {
+            if (isAccessClientInitialized && shouldAutoAttachSource && props.signInModeArgs !== undefined) {
                 try {
                     let source = props.signInModeArgs.source;
                     let validation = props.signInModeArgs.validation;
@@ -370,10 +416,12 @@ function MapUrlDialog(props) {
                             formatId: props.signInModeArgs.layer.formatId,
                         });
                         if (source !== undefined) {
-                            if (props.signInModeArgs.layer.savedQueryParams)
+                            if (props.signInModeArgs.layer.savedQueryParams) {
                                 source.savedQueryParams = { ...props.signInModeArgs.layer.savedQueryParams };
-                            if (props.signInModeArgs.layer.unsavedQueryParams)
+                            }
+                            if (props.signInModeArgs.layer.unsavedQueryParams) {
                                 source.unsavedQueryParams = { ...props.signInModeArgs.layer.unsavedQueryParams };
+                            }
                             setLayerAttachPending(true);
                             validation = await source.validateSource(true);
                             if (isMounted.current) {
@@ -393,19 +441,32 @@ function MapUrlDialog(props) {
     const dialogContainer = React.useRef(null);
     const readyToSave = React.useCallback(() => {
         const credentialsSet = !!userName && !!password;
-        const ready = (!!mapUrl && !!mapName)
-            && !layerAttachPending
-            && (!serverRequireCredentials || credentialsSet)
-            && !invalidCredentialsProvided
-            && !incompatibleFormat
-            && (externalLoginUrl === undefined || (externalLoginUrl !== undefined && oauthProcessSucceeded));
+        const ready = !!mapUrl &&
+            !!mapName &&
+            !layerAttachPending &&
+            (!serverRequireCredentials || credentialsSet) &&
+            !invalidCredentialsProvided &&
+            !incompatibleFormat &&
+            (externalLoginUrl === undefined || (externalLoginUrl !== undefined && oauthProcessSucceeded));
         return ready;
-    }, [userName, password, mapUrl, mapName, layerAttachPending, serverRequireCredentials, invalidCredentialsProvided, incompatibleFormat, externalLoginUrl, oauthProcessSucceeded]);
+    }, [
+        userName,
+        password,
+        mapUrl,
+        mapName,
+        layerAttachPending,
+        serverRequireCredentials,
+        invalidCredentialsProvided,
+        incompatibleFormat,
+        externalLoginUrl,
+        oauthProcessSucceeded,
+    ]);
     const handleOnKeyDown = React.useCallback((event) => {
         // eslint-disable-next-line deprecation/deprecation
         if (event.key === appui_abstract_1.SpecialKey.Enter) {
-            if (readyToSave())
+            if (readyToSave()) {
                 handleOk();
+            }
         }
     }, [handleOk, readyToSave]);
     // onOauthProcessEnd events handler
@@ -440,8 +501,9 @@ function MapUrlDialog(props) {
     const handleOAuthPopupClose = React.useCallback(() => {
         setShowOauthPopup(false);
         setLayerAuthPending(false);
-        if (oauthProcessSucceeded === undefined)
-            setOAuthProcessSucceeded(false); // indicates there was a failed attempt
+        if (oauthProcessSucceeded === undefined) {
+            setOAuthProcessSucceeded(false);
+        } // indicates there was a failed attempt
     }, [oauthProcessSucceeded]);
     // Utility function to get warning message section
     function renderWarningMessage() {
@@ -465,61 +527,28 @@ function MapUrlDialog(props) {
         // Sometimes we want to add an extra node, such as a button
         let extraNode;
         if (oauthProcessSucceeded === false) {
-            extraNode = React.createElement("div", null,
-                React.createElement(itwinui_react_1.Button, { onClick: handleArcGisLogin }, externalLoginTryAgainLabel));
+            extraNode = ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { onClick: handleArcGisLogin, children: externalLoginTryAgainLabel }) }));
         }
         if (warningMessage !== undefined) {
-            return (React.createElement("div", { className: "map-layer-source-warnMessage" },
-                React.createElement(itwinui_react_1.Icon, { size: "small" },
-                    React.createElement(itwinui_icons_color_react_1.SvgStatusWarning, null)),
-                React.createElement("span", { className: "map-layer-source-warnMessage-label" }, warningMessage),
-                extraNode));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "map-layer-source-warnMessage", children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.Icon, { size: "small", children: (0, jsx_runtime_1.jsx)(itwinui_icons_color_react_1.SvgStatusWarning, {}) }), (0, jsx_runtime_1.jsx)("span", { className: "map-layer-source-warnMessage-label", children: warningMessage }), extraNode] }));
         }
         else {
-            return (React.createElement("span", { className: "map-layer-source-placeholder" }, "\u00A0"));
+            return (0, jsx_runtime_1.jsx)("span", { className: "map-layer-source-placeholder", children: "\u00A0" });
         }
     }
     // Use a hook to display the popup.
     // The display of the popup is controlled by the 'showOauthPopup' state variable.
     (0, core_react_1.useCrossOriginPopup)(showOauthPopup, externalLoginUrl, externalLoginTitle, 450, 450, handleOAuthPopupClose);
     function getFooter() {
-        return (React.createElement("div", { className: "map-layer-source-footer" },
-            React.createElement("div", { className: "map-layer-source-footer-status" }),
-            React.createElement("div", null,
-                React.createElement(itwinui_react_1.Button, { className: "map-layer-features-footer-button", styleType: 'high-visibility', onClick: handleOk, disabled: !readyToSave() }, props?.mapLayerSourceToEdit ? mapLayers_1.MapLayersUI.translate("Dialog.Edit") : mapLayers_1.MapLayersUI.translate("Dialog.Add")),
-                React.createElement(itwinui_react_1.Button, { className: "map-layer-source-footer-button", styleType: 'default', onClick: handleCancel }, mapLayers_1.MapLayersUI.translate("Dialog.Cancel")))));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "map-layer-source-footer", children: [(0, jsx_runtime_1.jsx)("div", { className: "map-layer-source-footer-status" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { className: "map-layer-features-footer-button", styleType: "high-visibility", onClick: handleOk, disabled: !readyToSave(), children: props?.mapLayerSourceToEdit ? mapLayers_1.MapLayersUI.translate("Dialog.Edit") : mapLayers_1.MapLayersUI.translate("Dialog.Add") }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { className: "map-layer-source-footer-button", styleType: "default", onClick: handleCancel, children: mapLayers_1.MapLayersUI.translate("Dialog.Cancel") })] })] }));
     }
-    return (React.createElement("div", { ref: dialogContainer },
-        React.createElement(core_react_1.Dialog, { className: "map-layer-url-dialog", title: dialogTitle, opened: true, resizable: true, movable: true, modal: true, footer: getFooter(), onClose: handleCancel, onEscape: handleCancel, minHeight: 120, maxWidth: 600, titleStyle: { paddingLeft: "10px" }, footerStyle: { paddingBottom: "10px", paddingRight: "10px" }, trapFocus: false },
-            React.createElement("div", { className: "map-layer-url-dialog-content" },
-                React.createElement("div", { className: "map-layer-source-url" },
-                    React.createElement("span", { className: "map-layer-source-label" }, typeLabel),
-                    React.createElement(SelectMapFormat_1.SelectMapFormat, { value: mapType, disabled: props.signInModeArgs !== undefined || props.mapLayerSourceToEdit !== undefined || layerAttachPending || layerAuthPending, onChange: setMapType, mapTypesOptions: mapLayerOptions?.mapTypeOptions, status: incompatibleFormat ? "warning" : undefined, message: incompatibleFormat ? mapLayers_1.MapLayersUI.translate("CustomAttach.InvalidType") : undefined }),
-                    React.createElement("span", { className: "map-layer-source-label" }, nameLabel),
-                    React.createElement(itwinui_react_1.Input, { className: "map-layer-source-input", placeholder: nameInputPlaceHolder, onChange: onNameChange, value: mapName, disabled: !!props.signInModeArgs || layerAttachPending || layerAuthPending }),
-                    React.createElement("span", { className: "map-layer-source-label" }, urlLabel),
-                    React.createElement(itwinui_react_1.Input, { className: "map-layer-source-input", placeholder: urlInputPlaceHolder, onKeyPress: handleOnKeyDown, onChange: onUrlChange, disabled: !!props.signInModeArgs || props.mapLayerSourceToEdit !== undefined || layerAttachPending || layerAuthPending, value: mapUrl }),
-                    React.createElement("span", { className: "map-layer-source-label" },
-                        mapLayers_1.MapLayersUI.translate("CustomAttach.CustomParamsLabel"),
-                        React.createElement("div", { title: mapLayers_1.MapLayersUI.translate("Labels.TechPreviewBadgeTooltip"), className: "map-layer-source-previewBadge-icon" },
-                            React.createElement(itwinui_react_1.Icon, { size: "small" },
-                                React.createElement(itwinui_icons_color_react_1.SvgTechnicalPreviewMini, null)))),
-                    React.createElement(SelectCustomParam_1.SelectCustomParam, { value: customParamNames, disabled: layerAttachPending || layerAuthPending, onChange: (paramNames) => { setCustomParamNames(paramNames); SetCustomParamNamesChangedByUser(true); resetSignInState(); } }),
-                    serverRequireCredentials
-                        && externalLoginUrl === undefined // external login is handled in popup
-                        && props.mapLayerSourceToEdit === undefined &&
-                        React.createElement(React.Fragment, null,
-                            React.createElement("span", { className: "map-layer-source-label" }, userNameLabel),
-                            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" })),
-                    !props.signInModeArgs
-                        && !props.mapLayerSourceToEdit
-                        && React.createElement("div", { title: !isSettingsStorageAvailable ? noSaveSettingsWarning : "" }, hasImodelContext && mapLayerOptions?.showUserPreferencesStorageOptions && (React.createElement(UserPreferencesStorageOptions_1.UserPreferencesStorageOptions, { disabled: !isSettingsStorageAvailable, itwinChecked: settingsStorage === "iTwin", modelChecked: settingsStorage === "Model", onChange: onRadioChange }))))),
-            renderWarningMessage(),
-            (layerAttachPending || layerAuthPending) &&
-                React.createElement("div", { className: "map-layer-source-progressBar" },
-                    React.createElement(itwinui_react_1.ProgressLinear, { indeterminate: true })))));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: dialogContainer, children: (0, jsx_runtime_1.jsxs)(core_react_1.Dialog, { className: "map-layer-url-dialog", title: dialogTitle, opened: true, resizable: true, movable: true, modal: true, footer: getFooter(), onClose: handleCancel, onEscape: handleCancel, minHeight: 120, maxWidth: 600, titleStyle: { paddingLeft: "10px" }, footerStyle: { paddingBottom: "10px", paddingRight: "10px" }, trapFocus: false, children: [(0, jsx_runtime_1.jsx)("div", { className: "map-layer-url-dialog-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "map-layer-source-url", children: [(0, jsx_runtime_1.jsx)("span", { className: "map-layer-source-label", children: typeLabel }), (0, jsx_runtime_1.jsx)(SelectMapFormat_1.SelectMapFormat, { value: mapType, disabled: props.signInModeArgs !== undefined || props.mapLayerSourceToEdit !== undefined || layerAttachPending || layerAuthPending, onChange: setMapType, mapTypesOptions: mapLayerOptions?.mapTypeOptions, status: incompatibleFormat ? "warning" : undefined, message: incompatibleFormat ? mapLayers_1.MapLayersUI.translate("CustomAttach.InvalidType") : undefined }), (0, jsx_runtime_1.jsx)("span", { className: "map-layer-source-label", children: nameLabel }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Input, { className: "map-layer-source-input", placeholder: nameInputPlaceHolder, onChange: onNameChange, value: mapName, disabled: !!props.signInModeArgs || layerAttachPending || layerAuthPending }), (0, jsx_runtime_1.jsx)("span", { className: "map-layer-source-label", children: urlLabel }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Input, { className: "map-layer-source-input", placeholder: urlInputPlaceHolder, onKeyPress: handleOnKeyDown, onChange: onUrlChange, disabled: !!props.signInModeArgs || props.mapLayerSourceToEdit !== undefined || layerAttachPending || layerAuthPending, value: mapUrl }), (0, jsx_runtime_1.jsxs)("span", { className: "map-layer-source-label", children: [mapLayers_1.MapLayersUI.translate("CustomAttach.CustomParamsLabel"), (0, jsx_runtime_1.jsx)("div", { title: mapLayers_1.MapLayersUI.translate("Labels.TechPreviewBadgeTooltip"), className: "map-layer-source-previewBadge-icon", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Icon, { size: "small", children: (0, jsx_runtime_1.jsx)(itwinui_icons_color_react_1.SvgTechnicalPreviewMini, {}) }) })] }), (0, jsx_runtime_1.jsx)(SelectCustomParam_1.SelectCustomParam, { value: customParamNames, disabled: layerAttachPending || layerAuthPending, onChange: (paramNames) => {
+                                    setCustomParamNames(paramNames);
+                                    SetCustomParamNamesChangedByUser(true);
+                                    resetSignInState();
+                                } }), serverRequireCredentials &&
+                                externalLoginUrl === undefined && // external login is handled in popup
+                                props.mapLayerSourceToEdit === undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "map-layer-source-label", children: userNameLabel }), (0, jsx_runtime_1.jsx)(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" }), (0, jsx_runtime_1.jsx)("span", { className: "map-layer-source-label", children: passwordLabel }), (0, jsx_runtime_1.jsx)(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" })] })), !props.signInModeArgs && !props.mapLayerSourceToEdit && ((0, jsx_runtime_1.jsx)("div", { title: !isSettingsStorageAvailable ? noSaveSettingsWarning : "", children: hasImodelContext && mapLayerOptions?.showUserPreferencesStorageOptions && ((0, jsx_runtime_1.jsx)(UserPreferencesStorageOptions_1.UserPreferencesStorageOptions, { disabled: !isSettingsStorageAvailable, itwinChecked: settingsStorage === "iTwin", modelChecked: settingsStorage === "Model", onChange: onRadioChange })) }))] }) }), renderWarningMessage(), (layerAttachPending || layerAuthPending) && ((0, jsx_runtime_1.jsx)("div", { className: "map-layer-source-progressBar", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.ProgressLinear, { indeterminate: true }) }))] }) }));
 }
 exports.MapUrlDialog = MapUrlDialog;
 //# sourceMappingURL=MapUrlDialog.js.map