From 1d6028779595d16eaa24e05f96e775ccabeba4bf Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Fri, 5 Mar 2021 15:01:29 -0800
Subject: [PATCH] give more flexibility to the dialog width setting (#14570)

* give more flexibility to the dialog width setting

* one more place
---
 .../dialog/assessmentResults/assessmentResultsDialog.ts   | 2 +-
 extensions/sql-migration/src/wizard/wizardController.ts   | 2 +-
 src/sql/azdata.proposed.d.ts                              | 2 +-
 src/sql/workbench/api/common/sqlExtHostTypes.ts           | 2 +-
 src/sql/workbench/browser/modal/modal.ts                  | 8 ++++++--
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/extensions/sql-migration/src/dialog/assessmentResults/assessmentResultsDialog.ts b/extensions/sql-migration/src/dialog/assessmentResults/assessmentResultsDialog.ts
index 642e8b5f55..bcd2384adc 100644
--- a/extensions/sql-migration/src/dialog/assessmentResults/assessmentResultsDialog.ts
+++ b/extensions/sql-migration/src/dialog/assessmentResults/assessmentResultsDialog.ts
@@ -68,7 +68,7 @@ export class AssessmentResultsDialog {
 	public async openDialog(dialogName?: string) {
 		if (!this._isOpen) {
 			this._isOpen = true;
-			this.dialog = azdata.window.createModelViewDialog(this.title, this.title, true);
+			this.dialog = azdata.window.createModelViewDialog(this.title, this.title, '90%');
 
 			this.dialog.okButton.label = AssessmentResultsDialog.OkButtonText;
 			this.dialog.okButton.onClick(async () => await this.execute());
diff --git a/extensions/sql-migration/src/wizard/wizardController.ts b/extensions/sql-migration/src/wizard/wizardController.ts
index 03d0939db0..4358818c36 100644
--- a/extensions/sql-migration/src/wizard/wizardController.ts
+++ b/extensions/sql-migration/src/wizard/wizardController.ts
@@ -31,7 +31,7 @@ export class WizardController {
 	}
 
 	private async createWizard(stateModel: MigrationStateModel): Promise<void> {
-		const wizard = azdata.window.createWizard(loc.WIZARD_TITLE, 'wide');
+		const wizard = azdata.window.createWizard(loc.WIZARD_TITLE, 'MigrationWizard', 'wide');
 		wizard.generateScriptButton.enabled = false;
 		wizard.generateScriptButton.hidden = true;
 		const skuRecommendationPage = new SKURecommendationPage(wizard, stateModel);
diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts
index 851f5adafc..cdea363425 100644
--- a/src/sql/azdata.proposed.d.ts
+++ b/src/sql/azdata.proposed.d.ts
@@ -718,7 +718,7 @@ declare module 'azdata' {
 			pageName?: string;
 		}
 
-		export type DialogWidth = 'narrow' | 'medium' | 'wide' | number;
+		export type DialogWidth = 'narrow' | 'medium' | 'wide' | number | string;
 
 		/**
 		 * These dialog styles affect how the dialog dispalys in the application.
diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts
index 711c14d603..b476ab023a 100644
--- a/src/sql/workbench/api/common/sqlExtHostTypes.ts
+++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts
@@ -304,7 +304,7 @@ export interface IModelViewWizardDetails {
 	width: DialogWidth;
 }
 
-export type DialogWidth = 'narrow' | 'medium' | 'wide' | number;
+export type DialogWidth = 'narrow' | 'medium' | 'wide' | number | string;
 
 export type DialogStyle = 'normal' | 'flyout' | 'callout';
 
diff --git a/src/sql/workbench/browser/modal/modal.ts b/src/sql/workbench/browser/modal/modal.ts
index 9718e98b19..f96e3b8c60 100644
--- a/src/sql/workbench/browser/modal/modal.ts
+++ b/src/sql/workbench/browser/modal/modal.ts
@@ -58,7 +58,7 @@ export interface IModalDialogStyles {
 	footerBorderTopColor?: Color;
 }
 
-export type DialogWidth = 'narrow' | 'medium' | 'wide' | number;
+export type DialogWidth = 'narrow' | 'medium' | 'wide' | number | string;
 export type DialogStyle = 'normal' | 'flyout' | 'callout';
 export type DialogPosition = 'left' | 'below';
 
@@ -223,8 +223,12 @@ export abstract class Modal extends Disposable implements IThemable {
 
 		if (typeof this._modalOptions.width === 'number') {
 			this._modalDialog.style.width = `${this._modalOptions.width}px`;
-		} else {
+		} else if (this._modalOptions.width === 'narrow'
+			|| this._modalOptions.width === 'medium'
+			|| this._modalOptions.width === 'wide') {
 			this._modalDialog.classList.add(`${this._modalOptions.width}-dialog`);
+		} else {
+			this._modalDialog.style.width = this._modalOptions.width;
 		}
 
 		if (this._modalOptions.dialogStyle === 'callout') {