From 3f19d0026e83ff8216c94f169f21900b87d7c99e Mon Sep 17 00:00:00 2001 From: Cheena Malhotra <13396919+cheenamalhotra@users.noreply.github.com> Date: Fri, 7 Jul 2023 22:28:50 -0700 Subject: [PATCH] Change dialog style for Device code flow dialog (#23417) --- .../platform/accounts/common/interfaces.ts | 2 +- .../common/testAccountManagementService.ts | 4 ++-- .../browser/accountManagementService.ts | 5 ++--- .../browser/autoOAuthDialog.ts | 19 ++++++++++++------- .../browser/autoOAuthDialogController.ts | 7 ++++++- 5 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/sql/platform/accounts/common/interfaces.ts b/src/sql/platform/accounts/common/interfaces.ts index cd946e7a51..0d69e03b5b 100644 --- a/src/sql/platform/accounts/common/interfaces.ts +++ b/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; endAutoOAuthDeviceCode(): void; cancelAutoOAuthDeviceCode(providerId: string): void; - copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise; + copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise; // SERVICE MANAGEMENT METHODS ///////////////////////////////////////// registerProvider(providerMetadata: azdata.AccountProviderMetadata, provider: azdata.AccountProvider): void; diff --git a/src/sql/platform/accounts/test/common/testAccountManagementService.ts b/src/sql/platform/accounts/test/common/testAccountManagementService.ts index 2710323d50..ed7a7c9fcc 100644 --- a/src/sql/platform/accounts/test/common/testAccountManagementService.ts +++ b/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 { - return; + async copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise { + return true; } getAccountProviderMetadata(): Promise { diff --git a/src/sql/workbench/services/accountManagement/browser/accountManagementService.ts b/src/sql/workbench/services/accountManagement/browser/accountManagementService.ts index 52811a50c9..988c36bdf8 100644 --- a/src/sql/workbench/services/accountManagement/browser/accountManagementService.ts +++ b/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 { + public async copyUserCodeAndOpenBrowser(userCode: string, uri: string): Promise { 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 { diff --git a/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts b/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts index 5b0211d542..8dd205a113 100644 --- a/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts +++ b/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(); @@ -38,6 +39,13 @@ export class AutoOAuthDialog extends Modal { private _onCancel = new Emitter(); public get onCancel(): Event { 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(); public get onCloseEvent(): Event { 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', - hasBackButton: true, + dialogStyle: 'normal', + 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 { diff --git a/src/sql/workbench/services/accountManagement/browser/autoOAuthDialogController.ts b/src/sql/workbench/services/accountManagement/browser/autoOAuthDialogController.ts index 4d7974e1ee..7975b582d9 100644 --- a/src/sql/workbench/services/accountManagement/browser/autoOAuthDialogController.ts +++ b/src/sql/workbench/services/accountManagement/browser/autoOAuthDialogController.ts @@ -74,7 +74,12 @@ export class AutoOAuthDialogController { private async handleOnAddAccount(): Promise { 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'); }