Adding wizard and dialog footer loading spinner (#21230)

* Adding wizard and dialog loading

* Moving apis to proposed

* fixing namespace

* Only firing event when the value changes

* Only firing when value is changed

* Adding loading complete message to dialog and wizard

* Registering listeners and making a new base interface for loading components

* Fixing api comment

* Renaming prop to loadingCompleted

* old loading icon

src/sql/workbench/api/browser/mainThreadModelViewDialog.ts

@@ -144,6 +144,9 @@ export class MainThreadModelViewDialog extends Disposable implements MainThreadM
 			dialog.customButtons = details.customButtons.map(buttonHandle => this.getButton(buttonHandle));
 		}
 		dialog.message = details.message;
+		dialog.loading = details.loading;
+		dialog.loadingText = dialog.loadingText;
+		dialog.loadingCompletedText = dialog.loadingCompletedText;
 
 		return Promise.resolve();
 	}
@@ -223,7 +226,9 @@ export class MainThreadModelViewDialog extends Disposable implements MainThreadM
 			wizard.customButtons = details.customButtons.map(buttonHandle => this.getButton(buttonHandle));
 		}
 		wizard.message = details.message;
-
+		wizard.loading = details.loading;
+		wizard.loadingText = details.loadingText;
+		wizard.loadingCompletedText = details.loadingCompletedText;
 		return Promise.resolve();
 	}
 

src/sql/workbench/api/common/extHostModelViewDialog.ts

@@ -133,6 +133,9 @@ class DialogImpl extends ModelViewPanelImpl implements azdata.window.Dialog {
 	private _renderHeader: boolean;
 	private _renderFooter: boolean;
 	private _dialogProperties: IDialogProperties;
+	private _loading: boolean;
+	private _loadingText: string;
+	private _loadingCompletedText: string;
 
 	private _onClosed = new Emitter<azdata.window.CloseReason>();
 	public onClosed = this._onClosed.event;
@@ -216,6 +219,33 @@ class DialogImpl extends ModelViewPanelImpl implements azdata.window.Dialog {
 		this._extHostModelViewDialog.updateDialogContent(this);
 	}
 
+	public get loading(): boolean {
+		return this._loading;
+	}
+
+	public set loading(value: boolean) {
+		this._loading = value;
+		this._extHostModelViewDialog.updateDialogContent(this);
+	}
+
+	public get loadingText(): string {
+		return this._loadingText;
+	}
+
+	public set loadingText(value: string) {
+		this._loadingText = value;
+		this._extHostModelViewDialog.updateDialogContent(this);
+	}
+
+	public get loadingCompletedText(): string {
+		return this._loadingCompletedText;
+	}
+
+	public set loadingCompletedText(value: string) {
+		this._loadingCompletedText = value;
+		this._extHostModelViewDialog.updateDialogContent(this);
+	}
+
 	public get dialogName(): string {
 		return this._dialogName;
 	}
@@ -443,6 +473,9 @@ class WizardImpl implements azdata.window.Wizard {
 	public readonly onPageChanged = this._pageChangedEmitter.event;
 	private _navigationValidator: (info: azdata.window.WizardPageChangeInfo) => boolean | Thenable<boolean>;
 	private _message: azdata.window.DialogMessage;
+	private _loading: boolean;
+	private _loadingText: string;
+	private _loadingCompletedText: string;
 	private _displayPageTitles: boolean = true;
 	private _operationHandler: BackgroundOperationHandler;
 	private _width: DialogWidth;
@@ -487,6 +520,33 @@ class WizardImpl implements azdata.window.Wizard {
 		this._extHostModelViewDialog.updateWizard(this);
 	}
 
+	public get loading(): boolean {
+		return this._loading;
+	}
+
+	public set loading(value: boolean) {
+		this._loading = value;
+		this._extHostModelViewDialog.updateWizard(this);
+	}
+
+	public get loadingText(): string {
+		return this._loadingText
+	}
+
+	public set loadingText(value: string) {
+		this._loadingText = value;
+		this._extHostModelViewDialog.updateWizard(this);
+	}
+
+	public get loadingCompletedText(): string {
+		return this._loadingCompletedText;
+	}
+
+	public set loadingCompletedText(value: string) {
+		this._loadingCompletedText = value;
+		this._extHostModelViewDialog.updateWizard(this);
+	}
+
 	public get displayPageTitles(): boolean {
 		return this._displayPageTitles;
 	}
@@ -797,7 +857,10 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 			cancelButton: this.getHandle(dialog.cancelButton),
 			content: dialog.content && typeof dialog.content !== 'string' ? dialog.content.map(tab => this.getHandle(tab)) : dialog.content as string,
 			customButtons: dialog.customButtons ? dialog.customButtons.map(button => this.getHandle(button)) : undefined,
-			message: dialog.message
+			message: dialog.message,
+			loading: dialog.loading,
+			loadingText: dialog.loadingText,
+			loadingCompletedText: dialog.loadingCompletedText
 		});
 	}
 
@@ -944,7 +1007,10 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 			nextButton: this.getHandle(wizard.nextButton),
 			customButtons: wizard.customButtons ? wizard.customButtons.map(button => this.getHandle(button)) : undefined,
 			message: wizard.message,
-			displayPageTitles: wizard.displayPageTitles
+			displayPageTitles: wizard.displayPageTitles,
+			loading: wizard.loading,
+			loadingText: wizard.loadingText,
+			loadingCompletedText: wizard.loadingCompletedText,
 		});
 	}
 

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -268,6 +268,9 @@ export interface IModelViewDialogDetails {
 	renderHeader: boolean;
 	renderFooter: boolean;
 	dialogProperties: IDialogProperties;
+	loading: boolean;
+	loadingText: string;
+	loadingCompletedText: string;
 }
 
 export interface IModelViewTabDetails {
@@ -307,6 +310,9 @@ export interface IModelViewWizardDetails {
 	message: DialogMessage;
 	displayPageTitles: boolean;
 	width: DialogWidth;
+	loading: boolean;
+	loadingText: string;
+	loadingCompletedText: string;
 }
 
 export type DialogWidth = 'narrow' | 'medium' | 'wide' | number | string;