Simplify button logic and enable button updates for custom dialogs (#1283)

src/sql/platform/dialog/customDialogService.ts

@@ -15,11 +15,21 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 const defaultOptions: IModalOptions = { hasBackButton: true, isWide: false };
 
 export class CustomDialogService {
+	private _dialogModals = new Map<Dialog, DialogModal>();
+
 	constructor( @IInstantiationService private _instantiationService: IInstantiationService) { }
 
 	public showDialog(dialog: Dialog, options?: IModalOptions): void {
-		let optionsDialog = this._instantiationService.createInstance(DialogModal, dialog, 'CustomDialog', options || defaultOptions);
-		optionsDialog.render();
-		optionsDialog.open();
+		let dialogModal = this._instantiationService.createInstance(DialogModal, dialog, 'CustomDialog', options || defaultOptions);
+		this._dialogModals.set(dialog, dialogModal);
+		dialogModal.render();
+		dialogModal.open();
+	}
+
+	public closeDialog(dialog: Dialog): void {
+		let dialogModal = this._dialogModals.get(dialog);
+		if (dialogModal) {
+			dialogModal.cancel();
+		}
 	}
 }

src/sql/platform/dialog/dialogModal.ts

@@ -61,25 +61,33 @@ export class DialogModal extends Modal {
 		if (this._dialog.customButtons) {
 			this._dialog.customButtons.forEach(button => {
 				let buttonElement = this.addDialogButton(button);
-				buttonElement.enabled = button.enabled;
-				attachButtonStyler(buttonElement, this._themeService);
+				this.updateButtonElement(buttonElement, button);
 			});
 		}
 
 		this._cancelButton = this.addDialogButton(this._dialog.cancelButton, () => this.cancel());
-		this._cancelButton.enabled = this._dialog.cancelButton.enabled;
+		this.updateButtonElement(this._cancelButton, this._dialog.cancelButton);
 		this._doneButton = this.addDialogButton(this._dialog.okButton, () => this.done());
-		this._doneButton.enabled = this._dialog.okButton.enabled;
-		attachButtonStyler(this._cancelButton, this._themeService);
-		attachButtonStyler(this._doneButton, this._themeService);
+		this.updateButtonElement(this._doneButton, this._dialog.okButton);
 	}
 
 	private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined): Button {
 		let buttonElement = this.addFooterButton(button.label, onSelect);
+		buttonElement.enabled = button.enabled;
 		button.registerClickEvent(buttonElement.onDidClick);
+		button.onUpdate(() => {
+			this.updateButtonElement(buttonElement, button);
+		});
+		attachButtonStyler(buttonElement, this._themeService);
 		return buttonElement;
 	}
 
+	private updateButtonElement(buttonElement: Button, dialogButton: DialogButton) {
+		buttonElement.label = dialogButton.label;
+		buttonElement.enabled = dialogButton.enabled;
+		dialogButton.hidden ? buttonElement.element.classList.add('dialogModal-hidden') : buttonElement.element.classList.remove('dialogModal-hidden');
+	}
+
 	protected renderBody(container: HTMLElement): void {
 		new Builder(container).div({ class: 'dialogModal-body' }, (bodyBuilder) => {
 			this._body = bodyBuilder.getHTMLElement();

src/sql/platform/dialog/dialogPane.ts

@@ -92,4 +92,9 @@ export class DialogPane extends Disposable implements IThemable {
 		this._body.style.backgroundColor = styles.dialogBodyBackground ? styles.dialogBodyBackground.toString() : undefined;
 		this._body.style.color = styles.dialogForeground ? styles.dialogForeground.toString() : undefined;
 	}
+
+	public dispose() {
+		super.dispose();
+		this._moduleRef.destroy();
+	}
 }

src/sql/platform/dialog/dialogTypes.ts

@@ -17,8 +17,6 @@ export class DialogTab implements sqlops.window.modelviewdialog.DialogTab {
 			this.content = content;
 		}
 	}
-
-	public updateContent(): void { }
 }
 
 export class Dialog implements sqlops.window.modelviewdialog.Dialog {
@@ -35,21 +33,48 @@ export class Dialog implements sqlops.window.modelviewdialog.Dialog {
 			this.content = content;
 		}
 	}
-
-	public open(): void { }
-	public close(): void { }
-	public updateContent(): void { }
 }
 
 export class DialogButton implements sqlops.window.modelviewdialog.Button {
-	public label: string;
-	public enabled: boolean;
+	private _label: string;
+	private _enabled: boolean;
+	private _hidden: boolean;
 	private _onClick: Emitter<void> = new Emitter<void>();
 	public readonly onClick: Event<void> = this._onClick.event;
+	private _onUpdate: Emitter<void> = new Emitter<void>();
+	public readonly onUpdate: Event<void> = this._onUpdate.event;
 
 	constructor(label: string, enabled: boolean) {
-		this.label = label;
-		this.enabled = enabled;
+		this._label = label;
+		this._enabled = enabled;
+		this._hidden = false;
+	}
+
+	public get label(): string {
+		return this._label;
+	}
+
+	public set label(label: string) {
+		this._label = label;
+		this._onUpdate.fire();
+	}
+
+	public get enabled(): boolean {
+		return this._enabled;
+	}
+
+	public set enabled(enabled: boolean) {
+		this._enabled = enabled;
+		this._onUpdate.fire();
+	}
+
+	public get hidden(): boolean {
+		return this._hidden;
+	}
+
+	public set hidden(hidden: boolean) {
+		this._hidden = hidden;
+		this._onUpdate.fire();
 	}
 
 	/**

src/sql/platform/dialog/media/dialogModal.css

@@ -23,6 +23,6 @@
 	height: 100%;
 }
 
-.dialogModal-pane.dialogModal-hidden {
+.dialogModal-hidden {
 	display: none;
 }