Change dialog style for Device code flow dialog (#23417)

src/sql/platform/accounts/common/interfaces.ts

@@ -35,7 +35,7 @@ export interface IAccountManagementService {
 	beginAutoOAuthDeviceCode(providerId: string, title: string, message: string, userCode: string, uri: string): Promise<void>;
 	endAutoOAuthDeviceCode(): void;
 	cancelAutoOAuthDeviceCode(providerId: string): void;
-	copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise<void>;
+	copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise<boolean>;
 
 	// SERVICE MANAGEMENT METHODS /////////////////////////////////////////
 	registerProvider(providerMetadata: azdata.AccountProviderMetadata, provider: azdata.AccountProvider): void;

src/sql/platform/accounts/test/common/testAccountManagementService.ts

@@ -35,8 +35,8 @@ export class TestAccountManagementService implements IAccountManagementService {
 		return undefined;
 	}
 
-	async copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise<void> {
+	async copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise<boolean> {
-		return;
+		return true;
 	}
 
 	getAccountProviderMetadata(): Promise<azdata.AccountProviderMetadata[]> {

src/sql/workbench/services/accountManagement/browser/accountManagementService.ts

@@ -477,10 +477,9 @@ export class AccountManagementService implements IAccountManagementService {
 	/**
 	 * Copy the user code to the clipboard and open a browser to the verification URI
 	 */
-	public async copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise<void> {
+	public async copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise<boolean> {
 		await this._clipboardService.writeText(userCode);
-		await this._openerService.open(URI.parse(uri));
+		return await this._openerService.open(URI.parse(uri));
-
 	}
 
 	private async _registerProvider(providerMetadata: azdata.AccountProviderMetadata, provider: azdata.AccountProvider): Promise<void> {

src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts

@@ -30,6 +30,7 @@ export class AutoOAuthDialog extends Modal {
 	private _userCodeInputBox?: InputBox;
 	private _websiteInputBox?: InputBox;
 	private _descriptionElement?: HTMLElement;
+	private _selfHelpElement?: HTMLElement;
 
 	// EVENTING ////////////////////////////////////////////////////////////
 	private _onHandleAddAccount = new Emitter<void>();
@@ -38,6 +39,13 @@ export class AutoOAuthDialog extends Modal {
 	private _onCancel = new Emitter<void>();
 	public get onCancel(): Event<void> { return this._onCancel.event; }
 
+	public hideCopyButton(): void {
+		this._copyAndOpenButton.element.hidden = true;
+	}
+
+	public updateSelfHelpMessage(message: string): void {
+		this._selfHelpElement.innerText = message;
+	}
 
 	private _onCloseEvent = new Emitter<void>();
 	public get onCloseEvent(): Event<void> { return this._onCloseEvent.event; }
@@ -53,7 +61,7 @@ export class AutoOAuthDialog extends Modal {
 		@ITextResourcePropertiesService textResourcePropertiesService: ITextResourcePropertiesService
 	) {
 		super(
-			'',
+			localize('deviceCodeAuthDialogTitle', 'Azure Auth: Device Code'),
 			TelemetryKeys.ModalDialogName.AutoOAuth,
 			telemetryService,
 			layoutService,
@@ -63,8 +71,8 @@ export class AutoOAuthDialog extends Modal {
 			textResourcePropertiesService,
 			contextKeyService,
 			{
-				dialogStyle: 'flyout',
+				dialogStyle: 'normal',
-				hasBackButton: true,
+				height: 340,
 				hasSpinner: true
 			}
 		);
@@ -73,9 +81,6 @@ export class AutoOAuthDialog extends Modal {
 	public override render() {
 		super.render();
 		attachModalDialogStyler(this, this._themeService);
-		this.backButton!.onDidClick(() => this.cancel());
-		this._register(this.backButton);
-
 		this._copyAndOpenButton = this.addFooterButton(localize('copyAndOpen', "Copy & Open"), () => this.addAccount());
 		this._closeButton = this.addFooterButton(localize('oauthDialog.cancel', "Cancel"), () => this.cancel(), 'right', true);
 		this.registerListeners();
@@ -90,10 +95,10 @@ export class AutoOAuthDialog extends Modal {
 	protected renderBody(container: HTMLElement) {
 		const body = append(container, $('.auto-oauth-dialog'));
 		this._descriptionElement = append(body, $('.auto-oauth-description-section.new-section'));
-
 		const addAccountSection = append(body, $('.auto-oauth-info-section.new-section'));
 		this._userCodeInputBox = this.createInputBoxHelper(addAccountSection, localize('userCode', "User code"));
 		this._websiteInputBox = this.createInputBoxHelper(addAccountSection, localize('website', "Website"));
+		this._selfHelpElement = append(body, $('.auto-oauth-selfhelp-section.new-section'));
 	}
 
 	private createInputBoxHelper(container: HTMLElement, label: string): InputBox {

src/sql/workbench/services/accountManagement/browser/autoOAuthDialogController.ts

@@ -74,7 +74,12 @@ export class AutoOAuthDialogController {
 
 	private async handleOnAddAccount(): Promise<void> {
 		if (this._userCode && this._uri) {
-			return this._accountManagementService.copyUserCodeAndOpenBrowser(this._userCode, this._uri);
+			if (!this._accountManagementService.copyUserCodeAndOpenBrowser(this._userCode, this._uri)) {
+				const selfHelpMessage = localize('selfHelpMessage', "A web browser cannot be launched in this environment, please launch a browser, navigate to the URL above and enter code manually.");
+				// URI could not be opened, prompt user to open themselves
+				this._autoOAuthDialog.hideCopyButton();
+				this._autoOAuthDialog.updateSelfHelpMessage(selfHelpMessage);
+			}
 		} else {
 			throw new Error('Missing user code and uri');
 		}