@itwin/map-layers 5.4.3 → 5.5.0

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

@@ -1,13 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "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.
-*--------------------------------------------------------------------------------------------*/
+ * 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
 import "./MapUrlDialog.scss";
 import * as React from "react";
 import { SpecialKey } from "@itwin/appui-abstract";
 import { BeEvent, Guid } from "@itwin/core-bentley";
-import { IModelApp, MapLayerSource, MapLayerSourceStatus, NotifyMessageDetails, OutputMessagePriority, } from "@itwin/core-frontend";
+import { IModelApp, MapLayerSource, MapLayerSourceStatus, NotifyMessageDetails, OutputMessagePriority } from "@itwin/core-frontend";
 import { Dialog, useCrossOriginPopup } from "@itwin/core-react";
 import { SvgStatusWarning, SvgTechnicalPreviewMini } from "@itwin/itwinui-icons-color-react";
 import { Button, Icon, Input, LabeledInput, ProgressLinear } from "@itwin/itwinui-react";
@@ -26,6 +27,10 @@ export const MAP_TYPES = {
     tileUrl: "TileURL",
     arcGisFeature: "ArcGISFeature",
 };
+const URL_SCHEMES = {
+    http: "http://",
+    https: "https://",
+};
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function MapUrlDialog(props) {
     const { onOkResult, mapLayerOptions } = props;
@@ -59,8 +64,9 @@ export function MapUrlDialog(props) {
     const getCustomParamsMapping = React.useCallback((url) => {
         const cpMappingStorage = new 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(MapLayersUI.localization.getLocalizedString(props.signInModeArgs || props.mapLayerSourceToEdit ? "mapLayers:CustomAttach.EditCustomLayer" : "mapLayers:CustomAttach.AttachCustomLayer"));
@@ -101,8 +107,9 @@ export 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
@@ -115,10 +122,10 @@ export function MapUrlDialog(props) {
         };
     }, []);
     const [isSettingsStorageAvailable] = React.useState(MapLayersUI.iTwinConfig && props?.activeViewport?.iModel?.iTwinId);
-    const [hasImodelContext] = React.useState(props?.activeViewport?.iModel?.iTwinId !== undefined
-        && props.activeViewport.iModel.iTwinId !== Guid.empty
-        && props?.activeViewport?.iModel?.iModelId !== undefined
-        && props?.activeViewport.iModel.iModelId !== Guid.empty);
+    const [hasImodelContext] = React.useState(props?.activeViewport?.iModel?.iTwinId !== undefined &&
+        props.activeViewport.iModel.iTwinId !== Guid.empty &&
+        props?.activeViewport?.iModel?.iModelId !== undefined &&
+        props?.activeViewport.iModel.iModelId !== Guid.empty);
     const handleCancel = React.useCallback(() => {
         if (props.onCancelResult) {
             props.onCancelResult();
@@ -127,13 +134,15 @@ export 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);
@@ -144,8 +153,8 @@ export function MapUrlDialog(props) {
     }, [oauthProcessSucceeded]);
     // return true if authorization is needed
     const updateAuthState = React.useCallback(async (source, sourceValidation) => {
-        const sourceRequireAuth = (sourceValidation.status === MapLayerSourceStatus.RequireAuth);
-        let invalidCredentials = (sourceValidation.status === MapLayerSourceStatus.InvalidCredentials);
+        const sourceRequireAuth = sourceValidation.status === MapLayerSourceStatus.RequireAuth;
+        let invalidCredentials = sourceValidation.status === MapLayerSourceStatus.InvalidCredentials;
         if (sourceRequireAuth) {
             let hasTokenEndPoint = false;
             const settings = source.toLayerSettings();
@@ -158,8 +167,7 @@ export 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.
@@ -198,14 +206,10 @@ export function MapUrlDialog(props) {
             }
         }
     }, [getCustomParamsMapping, customParamNamesChangedByUser]);
-    const createSource = React.useCallback(() => {
+    const createSource = React.useCallback((url) => {
         let source;
-        if (mapUrl && mapName) {
-            source = MapLayerSource.fromJSON({
-                url: mapUrl,
-                name: mapName,
-                formatId: mapType,
-            });
+        if (url && mapName) {
+            source = 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,
@@ -216,9 +220,16 @@ export 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) {
@@ -231,7 +242,7 @@ export function MapUrlDialog(props) {
             // Store custom params mapping
             if (customParamNames) {
                 const cpmStorage = new CustomParamsMappingStorage();
-                cpmStorage.save(mapUrl.toLowerCase(), { customParamNames });
+                cpmStorage.save(url.toLowerCase(), { customParamNames });
             }
             // Simply change the source definition in the setting service
             if (props.mapLayerSourceToEdit !== undefined) {
@@ -245,7 +256,9 @@ export function MapUrlDialog(props) {
                             await MapLayerPreferences.replaceSource(props.mapLayerSourceToEdit, source, vp.iModel.iTwinId, vp?.iModel.iModelId);
                         }
                         catch (err) {
-                            const errorMessage = IModelApp.localization.getLocalizedString("mapLayers:Messages.MapLayerEditError", { layerName: props.mapLayerSourceToEdit?.name });
+                            const errorMessage = IModelApp.localization.getLocalizedString("mapLayers:Messages.MapLayerEditError", {
+                                layerName: props.mapLayerSourceToEdit?.name,
+                            });
                             IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, errorMessage));
                             return;
                         }
@@ -265,7 +278,7 @@ export function MapUrlDialog(props) {
                 if (validation.status === 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.storeSource(source, vp.iModel.iTwinId, vp.iModel.iModelId, storeOnIModel))) {
                             const msgError = MapLayersUI.localization.getLocalizedString("mapLayers:Messages.MapLayerPreferencesStoreFailed");
@@ -278,13 +291,12 @@ export function MapUrlDialog(props) {
                     if (customParamNames && customParamNames.length > 0) {
                         // Link the map-layers URL custom params.
                         const cpmStorage = new CustomParamsMappingStorage();
-                        cpmStorage.save(mapUrl.toLowerCase(), { customParamNames });
+                        cpmStorage.save(url.toLowerCase(), { customParamNames });
                         const cpStorage = new 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;
                             }
                         });
                     }
@@ -313,14 +325,27 @@ export 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 = 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);
@@ -353,9 +378,7 @@ export 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;
@@ -367,10 +390,12 @@ export 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) {
@@ -390,19 +415,32 @@ export 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 === SpecialKey.Enter) {
-            if (readyToSave())
+            if (readyToSave()) {
                 handleOk();
+            }
         }
     }, [handleOk, readyToSave]);
     // onOauthProcessEnd events handler
@@ -437,8 +475,9 @@ export 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() {
@@ -462,60 +501,27 @@ export 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(Button, { onClick: handleArcGisLogin }, externalLoginTryAgainLabel));
+            extraNode = (_jsx("div", { children: _jsx(Button, { onClick: handleArcGisLogin, children: externalLoginTryAgainLabel }) }));
         }
         if (warningMessage !== undefined) {
-            return (React.createElement("div", { className: "map-layer-source-warnMessage" },
-                React.createElement(Icon, { size: "small" },
-                    React.createElement(SvgStatusWarning, null)),
-                React.createElement("span", { className: "map-layer-source-warnMessage-label" }, warningMessage),
-                extraNode));
+            return (_jsxs("div", { className: "map-layer-source-warnMessage", children: [_jsx(Icon, { size: "small", children: _jsx(SvgStatusWarning, {}) }), _jsx("span", { className: "map-layer-source-warnMessage-label", children: warningMessage }), extraNode] }));
         }
         else {
-            return (React.createElement("span", { className: "map-layer-source-placeholder" }, "\u00A0"));
+            return _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.
     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(Button, { className: "map-layer-features-footer-button", styleType: 'high-visibility', onClick: handleOk, disabled: !readyToSave() }, props?.mapLayerSourceToEdit ? MapLayersUI.translate("Dialog.Edit") : MapLayersUI.translate("Dialog.Add")),
-                React.createElement(Button, { className: "map-layer-source-footer-button", styleType: 'default', onClick: handleCancel }, MapLayersUI.translate("Dialog.Cancel")))));
+        return (_jsxs("div", { className: "map-layer-source-footer", children: [_jsx("div", { className: "map-layer-source-footer-status" }), _jsxs("div", { children: [_jsx(Button, { className: "map-layer-features-footer-button", styleType: "high-visibility", onClick: handleOk, disabled: !readyToSave(), children: props?.mapLayerSourceToEdit ? MapLayersUI.translate("Dialog.Edit") : MapLayersUI.translate("Dialog.Add") }), _jsx(Button, { className: "map-layer-source-footer-button", styleType: "default", onClick: handleCancel, children: MapLayersUI.translate("Dialog.Cancel") })] })] }));
     }
-    return (React.createElement("div", { ref: dialogContainer },
-        React.createElement(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, { value: mapType, disabled: props.signInModeArgs !== undefined || props.mapLayerSourceToEdit !== undefined || layerAttachPending || layerAuthPending, onChange: setMapType, mapTypesOptions: mapLayerOptions?.mapTypeOptions, status: incompatibleFormat ? "warning" : undefined, message: incompatibleFormat ? MapLayersUI.translate("CustomAttach.InvalidType") : undefined }),
-                    React.createElement("span", { className: "map-layer-source-label" }, nameLabel),
-                    React.createElement(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(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" },
-                        MapLayersUI.translate("CustomAttach.CustomParamsLabel"),
-                        React.createElement("div", { title: MapLayersUI.translate("Labels.TechPreviewBadgeTooltip"), className: "map-layer-source-previewBadge-icon" },
-                            React.createElement(Icon, { size: "small" },
-                                React.createElement(SvgTechnicalPreviewMini, null)))),
-                    React.createElement(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(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(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, { disabled: !isSettingsStorageAvailable, itwinChecked: settingsStorage === "iTwin", modelChecked: settingsStorage === "Model", onChange: onRadioChange }))))),
-            renderWarningMessage(),
-            (layerAttachPending || layerAuthPending) &&
-                React.createElement("div", { className: "map-layer-source-progressBar" },
-                    React.createElement(ProgressLinear, { indeterminate: true })))));
+    return (_jsx("div", { ref: dialogContainer, children: _jsxs(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: [_jsx("div", { className: "map-layer-url-dialog-content", children: _jsxs("div", { className: "map-layer-source-url", children: [_jsx("span", { className: "map-layer-source-label", children: typeLabel }), _jsx(SelectMapFormat, { value: mapType, disabled: props.signInModeArgs !== undefined || props.mapLayerSourceToEdit !== undefined || layerAttachPending || layerAuthPending, onChange: setMapType, mapTypesOptions: mapLayerOptions?.mapTypeOptions, status: incompatibleFormat ? "warning" : undefined, message: incompatibleFormat ? MapLayersUI.translate("CustomAttach.InvalidType") : undefined }), _jsx("span", { className: "map-layer-source-label", children: nameLabel }), _jsx(Input, { className: "map-layer-source-input", placeholder: nameInputPlaceHolder, onChange: onNameChange, value: mapName, disabled: !!props.signInModeArgs || layerAttachPending || layerAuthPending }), _jsx("span", { className: "map-layer-source-label", children: urlLabel }), _jsx(Input, { className: "map-layer-source-input", placeholder: urlInputPlaceHolder, onKeyPress: handleOnKeyDown, onChange: onUrlChange, disabled: !!props.signInModeArgs || props.mapLayerSourceToEdit !== undefined || layerAttachPending || layerAuthPending, value: mapUrl }), _jsxs("span", { className: "map-layer-source-label", children: [MapLayersUI.translate("CustomAttach.CustomParamsLabel"), _jsx("div", { title: MapLayersUI.translate("Labels.TechPreviewBadgeTooltip"), className: "map-layer-source-previewBadge-icon", children: _jsx(Icon, { size: "small", children: _jsx(SvgTechnicalPreviewMini, {}) }) })] }), _jsx(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 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "map-layer-source-label", children: userNameLabel }), _jsx(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" }), _jsx("span", { className: "map-layer-source-label", children: passwordLabel }), _jsx(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 && (_jsx("div", { title: !isSettingsStorageAvailable ? noSaveSettingsWarning : "", children: hasImodelContext && mapLayerOptions?.showUserPreferencesStorageOptions && (_jsx(UserPreferencesStorageOptions, { disabled: !isSettingsStorageAvailable, itwinChecked: settingsStorage === "iTwin", modelChecked: settingsStorage === "Model", onChange: onRadioChange })) }))] }) }), renderWarningMessage(), (layerAttachPending || layerAuthPending) && (_jsx("div", { className: "map-layer-source-progressBar", children: _jsx(ProgressLinear, { indeterminate: true }) }))] }) }));
 }
 //# sourceMappingURL=MapUrlDialog.js.map