Added loading to dropdowns (#12214)

* Added loading prop to dropdowns

* Added property for setting loading text message

* removed unnecessary sets

* changed code to match new changes

* Changed the dropdown loader to use select component instead of edit.
Added missing props in dropdown loader

src/sql/azdata.proposed.d.ts

@@ -6,6 +6,7 @@
 // This is the place for API experiments and proposal.
 
 import * as vscode from 'vscode';
+import { LoadingComponentProperties } from 'azdata';
 
 declare module 'azdata' {
 	/**
@@ -256,6 +257,9 @@ declare module 'azdata' {
 		withProps(properties: TPropertyBag): ComponentBuilder<TComponent, TPropertyBag>;
 	}
 
+	export interface DropDownProperties extends LoadingComponentProperties {
+	}
+
 	export interface RadioCard {
 		id: string;
 		descriptions: RadioCardDescription[];

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

@@ -1450,6 +1450,22 @@ class DropDownWrapper extends ComponentWrapper implements azdata.DropDownCompone
 		this.setProperty('fireOnTextChange', v);
 	}
 
+	public get loading(): boolean {
+		return this.properties['loading'];
+	}
+
+	public set loading(v: boolean) {
+		this.setProperty('loading', v);
+	}
+
+	public get loadingText(): string {
+		return this.properties['loadingText'];
+	}
+
+	public set loadingText(v: string) {
+		this.setProperty('loadingText', v);
+	}
+
 	public get onValueChanged(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
 		return emitter && emitter.event;

src/sql/workbench/browser/modelComponents/dropdown.component.ts

@@ -21,12 +21,17 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { find } from 'vs/base/common/arrays';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
+import { localize } from 'vs/nls';
 
 @Component({
 	selector: 'modelview-dropdown',
 	template: `
 
 	<div [style.width]="getWidth()">
+		<div [style.display]="getLoadingDisplay()" style="width: 100%; position: relative">
+			<div class="modelview-loadingComponent-spinner" style="position:absolute; right: 0px; margin-right: 5px; height:15px; z-index:1" #spinnerElement></div>
+			<div [style.display]="getLoadingDisplay()" #loadingBox style="width: 100%;"></div>
+		</div>
 		<div [style.display]="getEditableDisplay()" #editableDropDown style="width: 100%;"></div>
 		<div [style.display]="getNotEditableDisplay()" #dropDown style="width: 100%;"></div>
 	</div>
@@ -38,9 +43,11 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 	private _editableDropdown: Dropdown;
 	private _selectBox: SelectBox;
 	private _isInAccessibilityMode: boolean;
+	private _loadingBox: SelectBox;
 
 	@ViewChild('editableDropDown', { read: ElementRef }) private _editableDropDownContainer: ElementRef;
 	@ViewChild('dropDown', { read: ElementRef }) private _dropDownContainer: ElementRef;
+	@ViewChild('loadingBox', { read: ElementRef }) private _loadingBoxContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
@@ -103,6 +110,12 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 			}));
 			this._validations.push(() => !this.required || this.editable || !!this._selectBox.value);
 		}
+
+		this._loadingBox = new SelectBox([this.getStatusText()], this.getStatusText(), this.contextViewService, this._loadingBoxContainer.nativeElement);
+		this._loadingBox.render(this._loadingBoxContainer.nativeElement);
+		this._register(this._loadingBox);
+		this._register(attachSelectBoxStyler(this._loadingBox, this.themeService));
+		this._loadingBoxContainer.nativeElement.className = ''; // Removing the dropdown arrow icon from the right
 	}
 
 	ngOnDestroy(): void {
@@ -122,6 +135,7 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 		if (this.ariaLabel !== '') {
 			this._selectBox.setAriaLabel(this.ariaLabel);
 			this._editableDropdown.ariaLabel = this.ariaLabel;
+			this._loadingBox.setAriaLabel(this.ariaLabel);
 		}
 
 		if (this.editable && !this._isInAccessibilityMode) {
@@ -141,6 +155,14 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 			}
 		}
 
+		if (this.loading) {
+			this._loadingBox.setOptions([this.getStatusText()]);
+			this._loadingBox.selectWithOptionName(this.getStatusText());
+			this._loadingBox.enable();
+		} else {
+			this._loadingBox.disable();
+		}
+
 		this._selectBox.selectElem.required = this.required;
 		this._editableDropdown.inputElement.required = this.required;
 		this.validate();
@@ -198,11 +220,15 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 	}
 
 	public getEditableDisplay(): string {
-		return this.editable && !this._isInAccessibilityMode ? '' : 'none';
+		return (this.editable && !this._isInAccessibilityMode) && !this.loading ? '' : 'none';
 	}
 
 	public getNotEditableDisplay(): string {
-		return !this.editable || this._isInAccessibilityMode ? '' : 'none';
+		return (!this.editable || this._isInAccessibilityMode) && !this.loading ? '' : 'none';
+	}
+
+	public getLoadingDisplay(): string {
+		return this.loading ? '' : 'none';
 	}
 
 	private set value(newValue: string | azdata.CategoryValue) {
@@ -240,4 +266,24 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 			this._selectBox.focus();
 		}
 	}
+
+	public get showText(): boolean {
+		return this.getPropertyOrDefault<boolean>((props) => props.showText, false);
+	}
+
+	public get loading(): boolean {
+		return this.getPropertyOrDefault<boolean>((props) => props.loading, false);
+	}
+
+	public get loadingText(): string {
+		return this.getPropertyOrDefault<string>((props) => props.loadingText, localize('loadingMessage', "Loading"));
+	}
+
+	public get loadingCompletedText(): string {
+		return this.getPropertyOrDefault<string>((props) => props.loadingCompletedText, localize('loadingCompletedMessage', "Loading completed"));
+	}
+
+	public getStatusText(): string {
+		return this.loading ? this.loadingText : this.loadingCompletedText;
+	}
 }