@itwin/map-layers 3.0.0-dev.180 → 3.0.0-dev.184

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

@@ -4,11 +4,11 @@
 *--------------------------------------------------------------------------------------------*/
 // cSpell:ignore Modeless WMTS
 import * as React from "react";
-import { Input, LabeledInput, ProgressLinear, Radio, Select } from "@itwin/itwinui-react";
-import { Dialog, Icon, InputStatus } from "@itwin/core-react";
+import { Dialog, Icon } from "@itwin/core-react";
 import { ModalDialogManager } from "@itwin/appui-react";
+import { Input, LabeledInput, ProgressLinear, Radio, Select } from "@itwin/itwinui-react";
 import { MapLayersUiItemsProvider } from "../MapLayersUiItemsProvider";
-import { IModelApp, MapLayerImageryProviderStatus, MapLayerSource, MapLayerSourceStatus, NotifyMessageDetails, OutputMessagePriority, } from "@itwin/core-frontend";
+import { IModelApp, MapLayerAuthType, MapLayerImageryProviderStatus, MapLayerSource, MapLayerSourceStatus, NotifyMessageDetails, OutputMessagePriority, } from "@itwin/core-frontend";
 import "./MapUrlDialog.scss";
 import { DialogButtonType, SpecialKey } from "@itwin/appui-abstract";
 import { MapLayerPreferences } from "../../MapLayerPreferences";
@@ -21,9 +21,8 @@ export const MAP_TYPES = {
 };
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function MapUrlDialog(props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const { isOverlay, onOkResult, mapTypesOptions } = props;
-    const supportWmsAuthentication = ((mapTypesOptions === null || mapTypesOptions === void 0 ? void 0 : mapTypesOptions.supportWmsAuthentication) ? true : false);
     const getMapUrlFromProps = React.useCallback(() => {
         var _a;
         if (props.mapLayerSourceToEdit) {
@@ -64,10 +63,9 @@ export function MapUrlDialog(props) {
     const [modelSettingsLabel] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:CustomAttach.StoreOnModelSettings"));
     const [missingCredentialsLabel] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:CustomAttach.MissingCredentials"));
     const [invalidCredentialsLabel] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:CustomAttach.InvalidCredentials"));
-    const [serverRequireCredentials, setServerRequireCredentials] = React.useState((_a = props.layerRequiringCredentials) !== null && _a !== void 0 ? _a : false);
+    const [serverRequireCredentials, setServerRequireCredentials] = React.useState(false);
     const [invalidCredentialsProvided, setInvalidCredentialsProvided] = React.useState(false);
     const [layerAttachPending, setLayerAttachPending] = React.useState(false);
-    const [warningMessage, setWarningMessage] = React.useState(props.layerRequiringCredentials ? missingCredentialsLabel : undefined);
     const [mapUrl, setMapUrl] = React.useState(getMapUrlFromProps());
     const [mapName, setMapName] = React.useState(getMapNameFromProps());
     const [userName, setUserName] = React.useState("");
@@ -78,7 +76,8 @@ export function MapUrlDialog(props) {
     const [userNameLabel] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:AuthenticationInputs.Username"));
     const [userNameRequiredLabel] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:AuthenticationInputs.UsernameRequired"));
     const [settingsStorage, setSettingsStorageRadio] = React.useState("iTwin");
-    const [mapType, setMapType] = React.useState((_b = getFormatFromProps()) !== null && _b !== void 0 ? _b : MAP_TYPES.arcGis);
+    const [layerAuthMethod, setLayerAuthMethod] = React.useState(MapLayerAuthType.None);
+    const [mapType, setMapType] = React.useState((_a = getFormatFromProps()) !== null && _a !== void 0 ? _a : MAP_TYPES.arcGis);
     // 'isMounted' is used to prevent any async operation once the hook has been
     // unloaded.  Otherwise we get a 'Can't perform a React state update on an unmounted component.' warning in the console.
     const isMounted = React.useRef(false);
@@ -98,15 +97,10 @@ export function MapUrlDialog(props) {
             types.push({ value: MAP_TYPES.tileUrl, label: MAP_TYPES.tileUrl });
         return types;
     });
-    const [isSettingsStorageAvailable] = React.useState(MapLayersUI.iTwinConfig && ((_d = (_c = props === null || props === void 0 ? void 0 : props.activeViewport) === null || _c === void 0 ? void 0 : _c.iModel) === null || _d === void 0 ? void 0 : _d.iTwinId) && ((_f = (_e = props === null || props === void 0 ? void 0 : props.activeViewport) === null || _e === void 0 ? void 0 : _e.iModel) === null || _f === void 0 ? void 0 : _f.iModelId));
+    const [isSettingsStorageAvailable] = React.useState(MapLayersUI.iTwinConfig && ((_c = (_b = props === null || props === void 0 ? void 0 : props.activeViewport) === null || _b === void 0 ? void 0 : _b.iModel) === null || _c === void 0 ? void 0 : _c.iTwinId) && ((_e = (_d = props === null || props === void 0 ? void 0 : props.activeViewport) === null || _d === void 0 ? void 0 : _d.iModel) === null || _e === void 0 ? void 0 : _e.iModelId));
     // 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 isAuthSupported = React.useCallback(() => {
-        return ((mapType === MAP_TYPES.wms || mapType === MAP_TYPES.wms) && supportWmsAuthentication)
-            || mapType === MAP_TYPES.arcGis;
-    }, [mapType, supportWmsAuthentication]);
-    // const [layerIdxToEdit] = React.useState((): number | undefined => {
     const [layerRequiringCredentialsIdx] = React.useState(() => {
         var _a;
         if (props.layerRequiringCredentials === undefined || !props.layerRequiringCredentials.name || !props.layerRequiringCredentials.url) {
@@ -121,20 +115,15 @@ export function MapUrlDialog(props) {
         }
     });
     // Update warning message based on the dialog state and server response
-    React.useEffect(() => {
-        if (invalidCredentialsProvided) {
-            setWarningMessage(invalidCredentialsLabel);
-        }
-        else if (serverRequireCredentials && (!userName || !password)) {
-            setWarningMessage(missingCredentialsLabel);
-        }
-        else {
-            setWarningMessage(undefined);
-        }
-    }, [invalidCredentialsProvided, invalidCredentialsLabel, missingCredentialsLabel, serverRequireCredentials, userName, password, setWarningMessage]);
     const handleMapTypeSelection = React.useCallback((newValue) => {
         setMapType(newValue);
-    }, [setMapType]);
+        // Reset few states
+        if (invalidCredentialsProvided)
+            setInvalidCredentialsProvided(false);
+        if (layerAuthMethod !== MapLayerAuthType.None) {
+            setLayerAuthMethod(MapLayerAuthType.None);
+        }
+    }, [invalidCredentialsProvided, layerAuthMethod]);
     const handleCancel = React.useCallback(() => {
         if (props.onCancelResult) {
             props.onCancelResult();
@@ -152,88 +141,109 @@ export function MapUrlDialog(props) {
         if (invalidCredentialsProvided)
             setInvalidCredentialsProvided(false);
     }, [setPassword, invalidCredentialsProvided, setInvalidCredentialsProvided]);
-    const doAttach = React.useCallback(async (source) => {
-        // Returns a promise, When true, the dialog should closed
-        return new Promise((resolve, _reject) => {
-            const vp = props === null || props === void 0 ? void 0 : props.activeViewport;
-            if (vp === undefined || source === undefined) {
-                resolve(true);
-                return;
-            }
+    // return true if authorization is needed
+    const updateAuthState = React.useCallback((sourceValidation) => {
+        var _a, _b;
+        const sourceRequireAuth = (sourceValidation.status === MapLayerSourceStatus.RequireAuth);
+        const invalidCredentials = (sourceValidation.status === MapLayerSourceStatus.InvalidCredentials);
+        if (sourceRequireAuth && ((_a = sourceValidation.authInfo) === null || _a === void 0 ? void 0 : _a.authMethod) !== undefined) {
+            setLayerAuthMethod((_b = sourceValidation.authInfo) === null || _b === void 0 ? void 0 : _b.authMethod);
+        }
+        if (invalidCredentials) {
+            setInvalidCredentialsProvided(true);
+        }
+        else if (invalidCredentialsProvided) {
+            setInvalidCredentialsProvided(false); // flag reset
+        }
+        return sourceRequireAuth || invalidCredentials;
+    }, [invalidCredentialsProvided]);
+    const updateAttachedLayer = React.useCallback(async (source, validation) => {
+        const vp = props === null || props === void 0 ? void 0 : props.activeViewport;
+        if (vp === undefined || source === undefined || layerRequiringCredentialsIdx === undefined) {
+            const error = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachMissingViewOrSource");
+            const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error, sourceUrl: source.url });
+            IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));
+            return true;
+        }
+        // Layer is already attached,
+        vp.displayStyle.changeMapLayerProps({
+            subLayers: validation.subLayers,
+        }, layerRequiringCredentialsIdx, isOverlay);
+        vp.displayStyle.changeMapLayerCredentials(layerRequiringCredentialsIdx, isOverlay, source.userName, source.password);
+        // Reset the provider's status
+        const provider = vp.getMapLayerImageryProvider(layerRequiringCredentialsIdx, isOverlay);
+        if (provider && provider.status !== MapLayerImageryProviderStatus.Valid) {
+            provider.status = MapLayerImageryProviderStatus.Valid;
+        }
+        vp.invalidateRenderPlan();
+        // 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 === null || props === void 0 ? void 0 : props.activeViewport;
+        if (vp === undefined || source === undefined) {
+            const error = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachMissingViewOrSource");
+            const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error, sourceUrl: source.url });
+            IModelApp.notifications.outputMessage(new NotifyMessageDetails(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 = "Model" === settingsStorage;
-            source.validateSource(true).then(async (validation) => {
-                if (validation.status === MapLayerSourceStatus.Valid
-                    || validation.status === MapLayerSourceStatus.RequireAuth
-                    || validation.status === MapLayerSourceStatus.InvalidCredentials) {
-                    const sourceRequireAuth = (validation.status === MapLayerSourceStatus.RequireAuth);
-                    const invalidCredentials = (validation.status === MapLayerSourceStatus.InvalidCredentials);
-                    const closeDialog = !sourceRequireAuth && !invalidCredentials;
-                    resolve(closeDialog);
-                    if (sourceRequireAuth && !serverRequireCredentials) {
-                        setServerRequireCredentials(true);
-                    }
-                    if (invalidCredentials) {
-                        setInvalidCredentialsProvided(true);
-                        return;
-                    }
-                    else if (invalidCredentialsProvided) {
-                        setInvalidCredentialsProvided(false); // flag reset
-                    }
-                    if (validation.status === MapLayerSourceStatus.Valid) {
-                        // Attach layer and update settings service (only if editing)
-                        if (layerRequiringCredentialsIdx !== undefined) {
-                            // Update username / password
-                            vp.displayStyle.changeMapLayerProps({
-                                subLayers: validation.subLayers,
-                            }, layerRequiringCredentialsIdx, isOverlay);
-                            vp.displayStyle.changeMapLayerCredentials(layerRequiringCredentialsIdx, isOverlay, source.userName, source.password);
-                            // Reset the provider's status
-                            const provider = vp.getMapLayerImageryProvider(layerRequiringCredentialsIdx, isOverlay);
-                            if (provider && provider.status !== MapLayerImageryProviderStatus.Valid) {
-                                provider.status = MapLayerImageryProviderStatus.Valid;
-                            }
-                        }
-                        else {
-                            // Update service settings if storage is available and we are not prompting user for credentials
-                            if (!settingsStorageDisabled && !props.layerRequiringCredentials) {
-                                if (!(await MapLayerPreferences.storeSource(source, storeOnIModel, vp.iModel.iTwinId, vp.iModel.iModelId))) {
-                                    const msgError = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerPreferencesStoreFailed");
-                                    IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msgError));
-                                }
-                            }
-                            const layerSettings = source.toLayerSettings(validation.subLayers);
-                            if (layerSettings) {
-                                vp.displayStyle.attachMapLayerSettings(layerSettings, isOverlay, undefined);
-                                const msg = IModelApp.localization.getLocalizedString("mapLayers:Messages.MapLayerAttached", { sourceName: source.name, sourceUrl: source.url });
-                                IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, msg));
-                            }
-                            else {
-                                const msgError = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerLayerSettingsConversionError");
-                                const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:CustomAttach.MapLayerAttachError", { error: msgError, sourceUrl: source.url });
-                                IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));
-                            }
-                        }
-                        vp.invalidateRenderPlan();
-                    }
-                    if (closeDialog) {
-                        // 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();
-                    }
+            if (!(await MapLayerPreferences.storeSource(source, storeOnIModel, vp.iModel.iTwinId, vp.iModel.iModelId))) {
+                const msgError = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerPreferencesStoreFailed");
+                IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msgError));
+            }
+        }
+        const layerSettings = source.toLayerSettings(validation.subLayers);
+        if (layerSettings) {
+            vp.displayStyle.attachMapLayerSettings(layerSettings, isOverlay, undefined);
+            const msg = IModelApp.localization.getLocalizedString("mapLayers:Messages.MapLayerAttached", { sourceName: source.name, sourceUrl: source.url });
+            IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, msg));
+        }
+        else {
+            const msgError = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerLayerSettingsConversionError");
+            const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:CustomAttach.MapLayerAttachError", { error: msgError, sourceUrl: source.url });
+            IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));
+        }
+        vp.invalidateRenderPlan();
+        // 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, onOkResult, props === null || props === void 0 ? void 0 : 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 === MapLayerSourceStatus.Valid) {
+                if (layerRequiringCredentialsIdx === undefined) {
+                    return await doAttach(source, validation);
                 }
                 else {
-                    const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:CustomAttach.ValidationError");
-                    IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, `${msg} ${source.url}`));
-                    resolve(true);
+                    return await updateAttachedLayer(source, validation);
                 }
-                resolve(false);
-            }).catch((error) => {
-                const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:CustomAttach.MapLayerAttachError", { error, sourceUrl: source.url });
-                IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));
-                resolve(true);
-            });
-        });
-    }, [props.activeViewport, props.layerRequiringCredentials, settingsStorage, serverRequireCredentials, invalidCredentialsProvided, onOkResult, layerRequiringCredentialsIdx, isOverlay, settingsStorageDisabled]);
+            }
+            else if (updateAuthState(validation)) {
+                return false;
+            }
+            else {
+                const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:CustomAttach.ValidationError");
+                IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, `${msg} ${source.url}`));
+                return true;
+            }
+            return false;
+        }
+        catch (error) {
+            const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error, sourceUrl: source.url });
+            IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));
+            return true;
+        }
+    }, [updateAuthState, doAttach, layerRequiringCredentialsIdx, updateAttachedLayer]);
     const onNameChange = React.useCallback((event) => {
         setMapName(event.target.value);
     }, [setMapName]);
@@ -243,73 +253,101 @@ export function MapUrlDialog(props) {
     const onUrlChange = React.useCallback((event) => {
         setMapUrl(event.target.value);
     }, [setMapUrl]);
-    const handleOk = React.useCallback(() => {
+    const createSource = React.useCallback(() => {
         let source;
         if (mapUrl && mapName) {
             source = MapLayerSource.fromJSON({
                 url: mapUrl,
                 name: mapName,
                 formatId: mapType,
-                userName,
-                password,
+                userName: userName || undefined,
+                password: password || undefined
             });
-            if (source === undefined || props.mapLayerSourceToEdit) {
-                ModalDialogManager.closeDialog();
-                if (source === undefined) {
-                    // Close the dialog and inform end user something went wrong.
-                    const msgError = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerLayerSourceCreationFailed");
-                    const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:CustomAttach.MapLayerAttachError", { error: msgError, sourceUrl: mapUrl });
-                    IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));
-                    return;
-                }
-                // Simply change the source definition in the setting service
-                if (props.mapLayerSourceToEdit !== undefined) {
-                    const vp = props.activeViewport;
-                    void (async () => {
-                        var _a;
-                        if (isSettingsStorageAvailable && vp) {
-                            try {
-                                await MapLayerPreferences.replaceSource(props.mapLayerSourceToEdit, source, vp.iModel.iTwinId, vp.iModel.iModelId);
-                            }
-                            catch (err) {
-                                const errorMessage = IModelApp.localization.getLocalizedString("mapLayers:Messages.MapLayerEditError", { layerName: (_a = props.mapLayerSourceToEdit) === null || _a === void 0 ? void 0 : _a.name });
-                                IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, errorMessage));
-                                return;
-                            }
+        }
+        return source;
+    }, [mapName, mapType, mapUrl, password, userName]);
+    const handleOk = React.useCallback(() => {
+        const source = createSource();
+        if (source === undefined || props.mapLayerSourceToEdit) {
+            ModalDialogManager.closeDialog();
+            if (source === undefined) {
+                // Close the dialog and inform end user something went wrong.
+                const msgError = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerLayerSourceCreationFailed");
+                const msg = MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Messages.MapLayerAttachError", { error: msgError, sourceUrl: mapUrl });
+                IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));
+                return;
+            }
+            // Simply change the source definition in the setting service
+            if (props.mapLayerSourceToEdit !== undefined) {
+                const vp = props.activeViewport;
+                void (async () => {
+                    var _a;
+                    if (isSettingsStorageAvailable && vp) {
+                        try {
+                            await MapLayerPreferences.replaceSource(props.mapLayerSourceToEdit, source, vp.iModel.iTwinId, vp.iModel.iModelId);
+                        }
+                        catch (err) {
+                            const errorMessage = IModelApp.localization.getLocalizedString("mapLayers:Messages.MapLayerEditError", { layerName: (_a = props.mapLayerSourceToEdit) === null || _a === void 0 ? void 0 : _a.name });
+                            IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, errorMessage));
+                            return;
                         }
-                    })();
-                    return;
+                    }
+                })();
+                return;
+            }
+        }
+        setLayerAttachPending(true);
+        // Attach source asynchronously.
+        void (async () => {
+            try {
+                const closeDialog = await attemptAttachSource(source);
+                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) {
+                    ModalDialogManager.closeDialog();
                 }
             }
-            setLayerAttachPending(true);
-            void (async () => {
-                // Code below is executed in the an async manner but
-                // I don't necessarily  want to mark the handler as async
-                // so Im wrapping it un in a void wrapper.
+            catch (_error) {
+                ModalDialogManager.closeDialog();
+            }
+        })();
+    }, [createSource, props.mapLayerSourceToEdit, props.activeViewport, mapUrl, isSettingsStorageAvailable, attemptAttachSource]);
+    // The first time the dialog is loaded and we already know the layer requires auth. (i.e ImageryProvider already made an attempt)
+    // makes a request to discover the authentification types and adjust UI accordingly (i.e. username/password fields, Oauth popup)
+    // Without this effect, user would have to manually click the 'OK' button in order to trigger the layer connection.
+    React.useEffect(() => {
+        // Attach source asynchronously.
+        void (async () => {
+            var _a, _b;
+            if (((_a = props.layerRequiringCredentials) === null || _a === void 0 ? void 0 : _a.url) !== undefined && ((_b = props.layerRequiringCredentials) === null || _b === void 0 ? void 0 : _b.name) !== undefined) {
                 try {
-                    const closeDialog = await doAttach(source);
-                    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) {
-                        ModalDialogManager.closeDialog();
+                    const source = MapLayerSource.fromJSON({ url: props.layerRequiringCredentials.url, name: props.layerRequiringCredentials.name, formatId: props.layerRequiringCredentials.formatId });
+                    if (source !== undefined) {
+                        setLayerAttachPending(true);
+                        const validation = await source.validateSource(true);
+                        if (isMounted.current) {
+                            setLayerAttachPending(false);
+                        }
+                        updateAuthState(validation);
                     }
                 }
-                catch (_error) {
-                    ModalDialogManager.closeDialog();
-                }
-            })();
-        }
-    }, [mapUrl, mapName, mapType, userName, password, props.mapLayerSourceToEdit, props.activeViewport, isSettingsStorageAvailable, doAttach]);
+                catch (_error) { }
+            }
+        })();
+        // Only run this effect when the dialog is initialized, otherwise it will it creates undesirable side-effects when 'OK' button is clicked.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const dialogContainer = React.useRef(null);
     const readyToSave = React.useCallback(() => {
         const credentialsSet = !!userName && !!password;
         return (!!mapUrl && !!mapName)
-            && (!serverRequireCredentials || (serverRequireCredentials && credentialsSet) && !layerAttachPending)
+            && !layerAttachPending
+            && (!serverRequireCredentials || credentialsSet)
             && !invalidCredentialsProvided;
-    }, [mapUrl, mapName, userName, password, layerAttachPending, invalidCredentialsProvided, serverRequireCredentials]);
+    }, [userName, password, mapUrl, mapName, serverRequireCredentials, layerAttachPending, invalidCredentialsProvided]);
     const buttonCluster = React.useMemo(() => [
         { type: DialogButtonType.OK, onClick: handleOk, disabled: !readyToSave() },
         { type: DialogButtonType.Cancel, onClick: handleCancel },
@@ -320,33 +358,58 @@ export function MapUrlDialog(props) {
                 handleOk();
         }
     }, [handleOk, readyToSave]);
+    //
+    // Monitors authentication method changes
+    React.useEffect(() => {
+        setServerRequireCredentials(layerAuthMethod === MapLayerAuthType.Basic || layerAuthMethod === MapLayerAuthType.EsriToken);
+    }, [layerAuthMethod]);
+    // Utility function to get warning message section
+    function renderWarningMessage() {
+        let node;
+        let warningMessage;
+        // Get the proper warning message
+        if (invalidCredentialsProvided) {
+            warningMessage = invalidCredentialsLabel;
+        }
+        else if (serverRequireCredentials && (!userName || !password)) {
+            warningMessage = missingCredentialsLabel;
+        }
+        // Sometimes we want to add an extra node, such as a button
+        let extraNode;
+        if (warningMessage !== undefined) {
+            return (React.createElement("div", { className: "map-layer-source-warnMessage" },
+                React.createElement(Icon, { className: "map-layer-source-warnMessage-icon", iconSpec: "icon-status-warning" }),
+                React.createElement("span", { className: "map-layer-source-warnMessage-label" }, warningMessage),
+                extraNode));
+        }
+        else {
+            return (React.createElement("span", { className: "map-layer-source-placeholder" }, "\u00A0"));
+        }
+        return node;
+    }
     return (React.createElement("div", { ref: dialogContainer },
         React.createElement(Dialog, { className: "map-layer-url-dialog", title: dialogTitle, opened: true, resizable: true, movable: true, modal: true, buttonCluster: buttonCluster, 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(Select, { className: "map-layer-source-select", options: mapTypes, value: mapType, disabled: props.layerRequiringCredentials !== undefined || props.mapLayerSourceToEdit !== undefined, onChange: handleMapTypeSelection, size: "small" }),
+                    React.createElement(Select, { className: "map-layer-source-select", options: mapTypes, value: mapType, disabled: props.layerRequiringCredentials !== undefined || props.mapLayerSourceToEdit !== undefined || layerAttachPending, onChange: handleMapTypeSelection, size: "small" }),
                     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.layerRequiringCredentials !== undefined, size: "small" }),
+                    React.createElement(Input, { className: "map-layer-source-input", placeholder: nameInputPlaceHolder, onChange: onNameChange, value: mapName, disabled: props.layerRequiringCredentials !== undefined || layerAttachPending }),
                     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.mapLayerSourceToEdit !== undefined, value: mapUrl, size: "small" }),
-                    isAuthSupported() && props.mapLayerSourceToEdit === undefined &&
+                    React.createElement(Input, { className: "map-layer-source-input", placeholder: urlInputPlaceHolder, onKeyPress: handleOnKeyDown, onChange: onUrlChange, disabled: props.mapLayerSourceToEdit !== undefined || layerAttachPending, value: mapUrl }),
+                    serverRequireCredentials
+                        && (layerAuthMethod === MapLayerAuthType.Basic || layerAuthMethod === MapLayerAuthType.EsriToken)
+                        && 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 ? InputStatus.Warning : undefined, onChange: onUsernameChange, size: "small" }),
+                            React.createElement(LabeledInput, { className: "map-layer-source-input", displayStyle: "inline", placeholder: serverRequireCredentials ? userNameRequiredLabel : userNameLabel, status: !userName && serverRequireCredentials ? "warning" : undefined, disabled: layerAttachPending, onChange: onUsernameChange, 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 ? InputStatus.Warning : undefined, onChange: onPasswordChange, onKeyPress: handleOnKeyDown, size: "small" })),
+                            React.createElement(LabeledInput, { className: "map-layer-source-input", displayStyle: "inline", type: "password", placeholder: serverRequireCredentials ? passwordRequiredLabel : passwordLabel, status: !password && serverRequireCredentials ? "warning" : undefined, disabled: layerAttachPending, onChange: onPasswordChange, onKeyPress: handleOnKeyDown, size: "small" })),
                     isSettingsStorageAvailable && React.createElement("div", { title: settingsStorageDisabled ? noSaveSettingsWarning : "" },
                         React.createElement(Radio, { disabled: settingsStorageDisabled, name: "settingsStorage", value: "iTwin", label: iTwinSettingsLabel, checked: settingsStorage === "iTwin", onChange: onRadioChange }),
                         React.createElement(Radio, { disabled: settingsStorageDisabled, name: "settingsStorage", value: "Model", label: modelSettingsLabel, checked: settingsStorage === "Model", onChange: onRadioChange })))),
-            React.createElement("div", { className: "map-layer-source-warnMessage" }, warningMessage ?
-                React.createElement(React.Fragment, null,
-                    React.createElement(Icon, { className: "map-layer-source-warnMessage-icon", iconSpec: "icon-status-warning" }),
-                    React.createElement("span", { className: "map-layer-source-warnMessage-label" }, warningMessage))
-                :
-                    // Place holder to avoid dialog resize
-                    React.createElement("span", { className: "map-layer-source-placeholder" }, "\u00A0")),
-            layerAttachPending &&
+            renderWarningMessage(),
+            (layerAttachPending) &&
                 React.createElement("div", { className: "map-layer-source-progressBar" },
                     React.createElement(ProgressLinear, { indeterminate: true })))));
 }