ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Genericify components (#12158)

Browse Source 
* Genericify components

* Fix compile issue

* Fix feedback

* Genericify azdata components (#12164)

* azdata generics

* Add the withProps method to azdata proposed as there may be mistakes with the interfaces in the generics

* Fix build issues because of other extensions

* Remove extra spaces
This commit is contained in:
Amir Omidi
2020-09-08 16:15:24 -07:00
committed by GitHub
parent e2b5e9bd66
commit 9ed274fb39
37 changed files with 490 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
extensions/dacpac/src/test/testContext.ts
View File

@@ -113,9 +113,16 @@ export function createViewContext(): ViewTestContext {
onDidClick: onClick.event onDidClick: onClick.event
}); });
let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent> = { let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent, azdata.ButtonProperties> = {
component: () => button, component: () => button,
withProperties: (properties) => { withProperties: (properties: any) => {
if ((properties as any).label === '•••') {
button.label = '•••';
button.onDidClick = fileButtonOnClick.event;
}
return buttonBuilder;
},
withProps: (properties) => {
if ((properties as any).label === '•••') { if ((properties as any).label === '•••') {
button.label = '•••'; button.label = '•••';
button.onDidClick = fileButtonOnClick.event; button.onDidClick = fileButtonOnClick.event;
@@ -127,8 +134,9 @@ export function createViewContext(): ViewTestContext {
let radioButtonBuilder = () => { let radioButtonBuilder = () => {
let button = radioButton(); let button = radioButton();
let builder: azdata.ComponentBuilder<azdata.RadioButtonComponent> = { let builder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = {
component: () => button, component: () => button,
withProps: () => undefined,
withProperties: (properties) => { withProperties: (properties) => {
switch ((properties as any).label) { switch ((properties as any).label) {
case loc.newDatabase: case loc.newDatabase:
@@ -163,9 +171,10 @@ export function createViewContext(): ViewTestContext {
return builder; return builder;
}; };
let checkBoxBuilder: azdata.ComponentBuilder<azdata.CheckBoxComponent> = { let checkBoxBuilder: azdata.ComponentBuilder<azdata.CheckBoxComponent, azdata.CheckBoxProperties> = {
component: () => checkbox, component: () => checkbox,
withProperties: () => checkBoxBuilder, withProperties: () => checkBoxBuilder,
withProps: () => checkBoxBuilder,
withValidation: () => checkBoxBuilder withValidation: () => checkBoxBuilder
}; };
let inputBox: () => azdata.InputBoxComponent = () => Object.assign({}, componentBase, { let inputBox: () => azdata.InputBoxComponent = () => Object.assign({}, componentBase, {
@@ -193,17 +202,19 @@ export function createViewContext(): ViewTestContext {
component: undefined! component: undefined!
}); });
let tableBuilder: azdata.ComponentBuilder<azdata.TableComponent> = { let tableBuilder: azdata.ComponentBuilder<azdata.TableComponent, azdata.TableComponentProperties> = {
component: () => table(), component: () => table(),
withProperties: () => tableBuilder, withProperties: () => tableBuilder,
withValidation: () => tableBuilder withValidation: () => tableBuilder,
withProps: () => tableBuilder
}; };
let loadingBuilder: azdata.LoadingComponentBuilder = { let loadingBuilder: azdata.LoadingComponentBuilder = {
component: () => loadingComponent(), component: () => loadingComponent(),
withProperties: () => loadingBuilder, withProperties: () => loadingBuilder,
withValidation: () => loadingBuilder, withValidation: () => loadingBuilder,
withItem: () => loadingBuilder withItem: () => loadingBuilder,
withProps: () => loadingBuilder
}; };
let formBuilder: azdata.FormBuilder = Object.assign({}, { let formBuilder: azdata.FormBuilder = Object.assign({}, {
@@ -216,7 +227,8 @@ export function createViewContext(): ViewTestContext {
withProperties: () => formBuilder, withProperties: () => formBuilder,
withValidation: () => formBuilder, withValidation: () => formBuilder,
withItems: () => formBuilder, withItems: () => formBuilder,
withLayout: () => formBuilder withLayout: () => formBuilder,
withProps: () => formBuilder
}); });
let flexBuilder: azdata.FlexBuilder = Object.assign({}, { let flexBuilder: azdata.FlexBuilder = Object.assign({}, {
@@ -224,32 +236,37 @@ export function createViewContext(): ViewTestContext {
withProperties: () => flexBuilder, withProperties: () => flexBuilder,
withValidation: () => flexBuilder, withValidation: () => flexBuilder,
withItems: () => flexBuilder, withItems: () => flexBuilder,
withLayout: () => flexBuilder withLayout: () => flexBuilder,
withProps: () => flexBuilder
}); });
let divBuilder: azdata.DivBuilder = Object.assign({}, { let divBuilder: azdata.DivBuilder = Object.assign({}, {
component: () => div, component: () => div,
withProperties: () => divBuilder, withProperties: () => divBuilder,
withValidation: () => divBuilder, withValidation: () => divBuilder,
withItems: () => divBuilder, withItems: () => divBuilder,
withLayout: () => divBuilder withLayout: () => divBuilder,
withProps: () => divBuilder
}); });
let inputBoxBuilder: azdata.ComponentBuilder<azdata.InputBoxComponent> = { let inputBoxBuilder: azdata.ComponentBuilder<azdata.InputBoxComponent, azdata.InputBoxProperties> = {
component: () => { component: () => {
let r = inputBox(); let r = inputBox();
return r; return r;
}, },
withProperties: () => inputBoxBuilder, withProperties: () => inputBoxBuilder,
withValidation: () => inputBoxBuilder withValidation: () => inputBoxBuilder,
withProps: () => inputBoxBuilder
}; };
let dropdownBuilder: azdata.ComponentBuilder<azdata.DropDownComponent> = { let dropdownBuilder: azdata.ComponentBuilder<azdata.DropDownComponent, azdata.DropDownProperties> = {
component: () => { component: () => {
let r = dropdown(); let r = dropdown();
return r; return r;
}, },
withProperties: () => dropdownBuilder, withProperties: () => dropdownBuilder,
withValidation: () => dropdownBuilder withValidation: () => dropdownBuilder,
withProps: () => dropdownBuilder
}; };
let view: azdata.ModelView = { let view: azdata.ModelView = {

50
extensions/machine-learning/src/test/views/utils.ts
View File

@@ -62,24 +62,28 @@ export function createViewContext(): ViewTestContext {
onDidClick: onClick.event onDidClick: onClick.event
}); });
let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent> = { let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent, azdata.ButtonProperties> = {
component: () => button, component: () => button,
withProperties: () => buttonBuilder, withProperties: () => buttonBuilder,
withValidation: () => buttonBuilder withValidation: () => buttonBuilder,
withProps: () => buttonBuilder
}; };
let hyperLinkBuilder: azdata.ComponentBuilder<azdata.HyperlinkComponent> = { let hyperLinkBuilder: azdata.ComponentBuilder<azdata.HyperlinkComponent, azdata.HyperlinkComponentProperties> = {
component: () => link, component: () => link,
withProperties: () => hyperLinkBuilder, withProperties: () => hyperLinkBuilder,
withValidation: () => hyperLinkBuilder withValidation: () => hyperLinkBuilder,
withProps: () => hyperLinkBuilder
}; };
let radioButtonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent> = { let radioButtonBuilder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = {
component: () => radioButton, component: () => radioButton,
withProperties: () => radioButtonBuilder, withProperties: () => radioButtonBuilder,
withProps: () => radioButtonBuilder,
withValidation: () => radioButtonBuilder withValidation: () => radioButtonBuilder
}; };
let checkBoxBuilder: azdata.ComponentBuilder<azdata.CheckBoxComponent> = { let checkBoxBuilder: azdata.ComponentBuilder<azdata.CheckBoxComponent, azdata.CheckBoxProperties> = {
component: () => checkbox, component: () => checkbox,
withProperties: () => checkBoxBuilder, withProperties: () => checkBoxBuilder,
withProps: () => checkBoxBuilder,
withValidation: () => checkBoxBuilder withValidation: () => checkBoxBuilder
}; };
let inputBox: () => azdata.InputBoxComponent = () => Object.assign({}, componentBase, { let inputBox: () => azdata.InputBoxComponent = () => Object.assign({}, componentBase, {
@@ -119,17 +123,19 @@ export function createViewContext(): ViewTestContext {
collapsed: false, collapsed: false,
}); });
let declarativeTableBuilder: azdata.ComponentBuilder<azdata.DeclarativeTableComponent> = { let declarativeTableBuilder: azdata.ComponentBuilder<azdata.DeclarativeTableComponent, azdata.DeclarativeTableProperties> = {
component: () => declarativeTable(), component: () => declarativeTable(),
withProperties: () => declarativeTableBuilder, withProperties: () => declarativeTableBuilder,
withValidation: () => declarativeTableBuilder withValidation: () => declarativeTableBuilder,
withProps: () => declarativeTableBuilder
}; };
let loadingBuilder: azdata.LoadingComponentBuilder = { let loadingBuilder: azdata.LoadingComponentBuilder = {
component: () => loadingComponent(), component: () => loadingComponent(),
withProperties: () => loadingBuilder, withProperties: () => loadingBuilder,
withValidation: () => loadingBuilder, withValidation: () => loadingBuilder,
withItem: () => loadingBuilder withItem: () => loadingBuilder,
withProps: () => loadingBuilder
}; };
let formBuilder: azdata.FormBuilder = Object.assign({}, { let formBuilder: azdata.FormBuilder = Object.assign({}, {
@@ -142,7 +148,8 @@ export function createViewContext(): ViewTestContext {
withProperties: () => formBuilder, withProperties: () => formBuilder,
withValidation: () => formBuilder, withValidation: () => formBuilder,
withItems: () => formBuilder, withItems: () => formBuilder,
withLayout: () => formBuilder withLayout: () => formBuilder,
withProps: () => formBuilder
}); });
let flexBuilder: azdata.FlexBuilder = Object.assign({}, { let flexBuilder: azdata.FlexBuilder = Object.assign({}, {
@@ -150,56 +157,63 @@ export function createViewContext(): ViewTestContext {
withProperties: () => flexBuilder, withProperties: () => flexBuilder,
withValidation: () => flexBuilder, withValidation: () => flexBuilder,
withItems: () => flexBuilder, withItems: () => flexBuilder,
withLayout: () => flexBuilder withLayout: () => flexBuilder,
withProps: () => flexBuilder
}); });
let divBuilder: azdata.DivBuilder = Object.assign({}, { let divBuilder: azdata.DivBuilder = Object.assign({}, {
component: () => div, component: () => div,
withProperties: () => divBuilder, withProperties: () => divBuilder,
withValidation: () => divBuilder, withValidation: () => divBuilder,
withItems: () => divBuilder, withItems: () => divBuilder,
withLayout: () => divBuilder withLayout: () => divBuilder,
withProps: () => divBuilder
}); });
let inputBoxBuilder: azdata.ComponentBuilder<azdata.InputBoxComponent> = { let inputBoxBuilder: azdata.ComponentBuilder<azdata.InputBoxComponent, azdata.InputBoxProperties> = {
component: () => { component: () => {
let r = inputBox(); let r = inputBox();
return r; return r;
}, },
withProperties: () => inputBoxBuilder, withProperties: () => inputBoxBuilder,
withValidation: () => inputBoxBuilder withValidation: () => inputBoxBuilder,
withProps: () => inputBoxBuilder
}; };
let cardBuilder: azdata.ComponentBuilder<azdata.CardComponent> = { let cardBuilder: azdata.ComponentBuilder<azdata.CardComponent, azdata.CardProperties> = {
component: () => { component: () => {
let r = card(); let r = card();
return r; return r;
}, },
withProperties: () => cardBuilder, withProperties: () => cardBuilder,
withValidation: () => cardBuilder withValidation: () => cardBuilder,
withProps: () => cardBuilder
}; };
let groupBuilder: azdata.GroupBuilder = { let groupBuilder: azdata.GroupBuilder = {
component: () => { component: () => {
return group(); return group();
}, },
withProperties: () => groupBuilder, withProperties: () => groupBuilder,
withProps: () => groupBuilder,
withValidation: () => groupBuilder, withValidation: () => groupBuilder,
withItems: () => groupBuilder, withItems: () => groupBuilder,
withLayout: () => groupBuilder withLayout: () => groupBuilder
}; };
let imageBuilder: azdata.ComponentBuilder<azdata.ImageComponent> = { let imageBuilder: azdata.ComponentBuilder<azdata.ImageComponent, azdata.ImageComponentProperties> = {
component: () => { component: () => {
let r = image(); let r = image();
return r; return r;
}, },
withProperties: () => imageBuilder, withProperties: () => imageBuilder,
withProps: () => imageBuilder,
withValidation: () => imageBuilder withValidation: () => imageBuilder
}; };
let dropdownBuilder: azdata.ComponentBuilder<azdata.DropDownComponent> = { let dropdownBuilder: azdata.ComponentBuilder<azdata.DropDownComponent, azdata.DropDownProperties> = {
component: () => { component: () => {
let r = dropdown(); let r = dropdown();
return r; return r;
}, },
withProperties: () => dropdownBuilder, withProperties: () => dropdownBuilder,
withProps: () => dropdownBuilder,
withValidation: () => dropdownBuilder withValidation: () => dropdownBuilder
}; };

32
extensions/notebook/src/test/common.ts
View File

@@ -430,22 +430,27 @@ class TestFlexContainer extends TestComponentBase implements azdata.FlexContaine
} }
} }
class TestComponentBuilder<T extends azdata.Component> implements azdata.ComponentBuilder<T> { class TestComponentBuilder<T extends azdata.Component, TPropertyBag> implements azdata.ComponentBuilder<T, TPropertyBag> {
constructor(private _component: T) { constructor(private _component: T) {
} }
component(): T { component(): T {
return this._component; return this._component;
} }
withProperties<U>(properties: U): azdata.ComponentBuilder<T> { withProperties<U>(properties: U): azdata.ComponentBuilder<T, TPropertyBag> {
this._component.updateProperties(properties); this._component.updateProperties(properties);
return this; return this;
} }
withValidation(validation: (component: T) => boolean): azdata.ComponentBuilder<T> { withValidation(validation: (component: T) => boolean): azdata.ComponentBuilder<T, TPropertyBag> {
return this;
}
withProps(properties: TPropertyBag): azdata.ComponentBuilder<T, TPropertyBag> {
this._component.updateProperties(properties);
return this; return this;
} }
} }
class TestLoadingBuilder extends TestComponentBuilder<azdata.LoadingComponent> implements azdata.LoadingComponentBuilder { class TestLoadingBuilder extends TestComponentBuilder<azdata.LoadingComponent, azdata.LoadingComponentProperties> implements azdata.LoadingComponentBuilder {
withItem(component: azdata.Component): azdata.LoadingComponentBuilder { withItem(component: azdata.Component): azdata.LoadingComponentBuilder {
this.component().component = component; this.component().component = component;
return this; return this;
@@ -456,12 +461,12 @@ export function createViewContext(): TestContext {
let onClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>(); let onClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
let form: azdata.FormContainer = new TestFormContainer(); let form: azdata.FormContainer = new TestFormContainer();
let textBuilder: azdata.ComponentBuilder<azdata.TextComponent> = new TestComponentBuilder(new TestTextComponent()); let textBuilder: azdata.ComponentBuilder<azdata.TextComponent, azdata.TextComponentProperties> = new TestComponentBuilder(new TestTextComponent());
let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent> = new TestComponentBuilder(new TestButtonComponent(onClick)); let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent, azdata.ButtonProperties> = new TestComponentBuilder(new TestButtonComponent(onClick));
let radioButtonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent> = new TestComponentBuilder(new TestRadioButtonComponent(onClick)); let radioButtonBuilder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = new TestComponentBuilder(new TestRadioButtonComponent(onClick));
let declarativeTableBuilder: azdata.ComponentBuilder<azdata.DeclarativeTableComponent> = new TestComponentBuilder(new TestDeclarativeTableComponent(onClick)); let declarativeTableBuilder: azdata.ComponentBuilder<azdata.DeclarativeTableComponent, azdata.DeclarativeTableProperties> = new TestComponentBuilder(new TestDeclarativeTableComponent(onClick));
let loadingBuilder: azdata.LoadingComponentBuilder = new TestLoadingBuilder(new TestLoadingComponent()); let loadingBuilder: azdata.LoadingComponentBuilder = new TestLoadingBuilder(new TestLoadingComponent());
let dropdownBuilder: azdata.ComponentBuilder<azdata.DropDownComponent> = new TestComponentBuilder(new TestDropdownComponent(onClick)); let dropdownBuilder: azdata.ComponentBuilder<azdata.DropDownComponent, azdata.DropDownProperties> = new TestComponentBuilder(new TestDropdownComponent(onClick));
let formBuilder: azdata.FormBuilder = Object.assign({}, { let formBuilder: azdata.FormBuilder = Object.assign({}, {
component: () => form, component: () => form,
@@ -473,7 +478,8 @@ export function createViewContext(): TestContext {
withProperties: () => formBuilder, withProperties: () => formBuilder,
withValidation: () => formBuilder, withValidation: () => formBuilder,
withItems: () => formBuilder, withItems: () => formBuilder,
withLayout: () => formBuilder withLayout: () => formBuilder,
withProps: () => formBuilder
}); });
let div: azdata.DivContainer = new TestDivContainer(); let div: azdata.DivContainer = new TestDivContainer();
@@ -487,7 +493,8 @@ export function createViewContext(): TestContext {
withProperties: () => divBuilder, withProperties: () => divBuilder,
withValidation: () => divBuilder, withValidation: () => divBuilder,
withItems: () => divBuilder, withItems: () => divBuilder,
withLayout: () => divBuilder withLayout: () => divBuilder,
withProps: () => divBuilder
}); });
let flex: azdata.FlexContainer = new TestFlexContainer(); let flex: azdata.FlexContainer = new TestFlexContainer();
@@ -501,7 +508,8 @@ export function createViewContext(): TestContext {
withProperties: () => flexBuilder, withProperties: () => flexBuilder,
withValidation: () => flexBuilder, withValidation: () => flexBuilder,
withItems: () => flexBuilder, withItems: () => flexBuilder,
withLayout: () => flexBuilder withLayout: () => flexBuilder,
withProps: () => flexBuilder
}); });
let view: azdata.ModelView = { let view: azdata.ModelView = {

39
extensions/notebook/src/test/managePackages/managePackagesDialog.test.ts
View File

@@ -150,15 +150,17 @@ describe('Manage Package Dialog', () => {
let flex: azdata.FlexContainer = Object.assign({}, componentBase, container, { let flex: azdata.FlexContainer = Object.assign({}, componentBase, container, {
}); });
let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent> = { let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent, azdata.ButtonProperties> = {
component: () => button, component: () => button,
withProperties: () => buttonBuilder, withProperties: () => buttonBuilder,
withValidation: () => buttonBuilder withValidation: () => buttonBuilder,
withProps: () => buttonBuilder
}; };
let radioButtonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent> = { let radioButtonBuilder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = {
component: () => radioButton, component: () => radioButton,
withProperties: () => radioButtonBuilder, withProperties: () => radioButtonBuilder,
withValidation: () => radioButtonBuilder withValidation: () => radioButtonBuilder,
withProps: () => radioButtonBuilder
}; };
let inputBox: () => azdata.InputBoxComponent = () => Object.assign({}, componentBase, { let inputBox: () => azdata.InputBoxComponent = () => Object.assign({}, componentBase, {
onTextChanged: undefined!, onTextChanged: undefined!,
@@ -187,17 +189,19 @@ describe('Manage Package Dialog', () => {
component: undefined! component: undefined!
}); });
let declarativeTableBuilder: azdata.ComponentBuilder<azdata.DeclarativeTableComponent> = { let declarativeTableBuilder: azdata.ComponentBuilder<azdata.DeclarativeTableComponent, azdata.DeclarativeTableProperties> = {
component: () => declarativeTable(), component: () => declarativeTable(),
withProperties: () => declarativeTableBuilder, withProperties: () => declarativeTableBuilder,
withValidation: () => declarativeTableBuilder withValidation: () => declarativeTableBuilder,
withProps: () => declarativeTableBuilder
}; };
let loadingBuilder: azdata.LoadingComponentBuilder = { let loadingBuilder: azdata.LoadingComponentBuilder = {
component: () => loadingComponent(), component: () => loadingComponent(),
withProperties: () => loadingBuilder, withProperties: () => loadingBuilder,
withValidation: () => loadingBuilder, withValidation: () => loadingBuilder,
withItem: () => loadingBuilder withItem: () => loadingBuilder,
withProps: () => loadingBuilder
}; };
let formBuilder: azdata.FormBuilder = Object.assign({}, { let formBuilder: azdata.FormBuilder = Object.assign({}, {
@@ -210,7 +214,8 @@ describe('Manage Package Dialog', () => {
withProperties: () => formBuilder, withProperties: () => formBuilder,
withValidation: () => formBuilder, withValidation: () => formBuilder,
withItems: () => formBuilder, withItems: () => formBuilder,
withLayout: () => formBuilder withLayout: () => formBuilder,
withProps: () => formBuilder
}); });
let flexBuilder: azdata.FlexBuilder = Object.assign({}, { let flexBuilder: azdata.FlexBuilder = Object.assign({}, {
@@ -218,32 +223,36 @@ describe('Manage Package Dialog', () => {
withProperties: () => flexBuilder, withProperties: () => flexBuilder,
withValidation: () => flexBuilder, withValidation: () => flexBuilder,
withItems: () => flexBuilder, withItems: () => flexBuilder,
withLayout: () => flexBuilder withLayout: () => flexBuilder,
withProps: () => flexBuilder
}); });
let inputBoxBuilder: azdata.ComponentBuilder<azdata.InputBoxComponent> = { let inputBoxBuilder: azdata.ComponentBuilder<azdata.InputBoxComponent, azdata.InputBoxProperties> = {
component: () => { component: () => {
let r = inputBox(); let r = inputBox();
return r; return r;
}, },
withProperties: () => inputBoxBuilder, withProperties: () => inputBoxBuilder,
withValidation: () => inputBoxBuilder withValidation: () => inputBoxBuilder,
withProps: () => inputBoxBuilder
}; };
let imageBuilder: azdata.ComponentBuilder<azdata.ImageComponent> = { let imageBuilder: azdata.ComponentBuilder<azdata.ImageComponent, azdata.ImageComponentProperties> = {
component: () => { component: () => {
let r = image(); let r = image();
return r; return r;
}, },
withProperties: () => imageBuilder, withProperties: () => imageBuilder,
withValidation: () => imageBuilder withValidation: () => imageBuilder,
withProps: () => imageBuilder
}; };
let dropdownBuilder: azdata.ComponentBuilder<azdata.DropDownComponent> = { let dropdownBuilder: azdata.ComponentBuilder<azdata.DropDownComponent, azdata.DropDownProperties> = {
component: () => { component: () => {
let r = dropdown(); let r = dropdown();
return r; return r;
}, },
withProperties: () => dropdownBuilder, withProperties: () => dropdownBuilder,
withValidation: () => dropdownBuilder withValidation: () => dropdownBuilder,
withProps: () => dropdownBuilder
}; };
let view: azdata.ModelView = { let view: azdata.ModelView = {

10
extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts
View File

@@ -7,7 +7,7 @@ import * as vscode from 'vscode';
import { OptionsInfo, FieldInfo } from '../interfaces'; import { OptionsInfo, FieldInfo } from '../interfaces';
import { getErrorMessage } from '../utils'; import { getErrorMessage } from '../utils';
export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilder<azdata.LoadingComponent> { export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilder<azdata.LoadingComponent, azdata.LoadingComponentProperties> {
private _optionsDivContainer!: azdata.DivContainer; private _optionsDivContainer!: azdata.DivContainer;
private _optionsLoadingBuilder: azdata.LoadingComponentBuilder; private _optionsLoadingBuilder: azdata.LoadingComponentBuilder;
private _onValueChangedEmitter: vscode.EventEmitter<void> = new vscode.EventEmitter(); private _onValueChangedEmitter: vscode.EventEmitter<void> = new vscode.EventEmitter();
@@ -21,11 +21,15 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde
return this._optionsLoadingBuilder.component(); return this._optionsLoadingBuilder.component();
} }
withProperties<U>(properties: U): azdata.ComponentBuilder<azdata.LoadingComponent> { withProperties<U>(properties: U): azdata.ComponentBuilder<azdata.LoadingComponent, azdata.LoadingComponentProperties> {
return this._optionsLoadingBuilder.withProperties(properties); return this._optionsLoadingBuilder.withProperties(properties);
} }
withValidation(validation: (component: azdata.LoadingComponent) => boolean): azdata.ComponentBuilder<azdata.LoadingComponent> { withProps(properties: azdata.LoadingComponentProperties): azdata.ComponentBuilder<azdata.LoadingComponent, azdata.LoadingComponentProperties> {
return this._optionsLoadingBuilder.withProperties(properties);
}
withValidation(validation: (component: azdata.LoadingComponent) => boolean): azdata.ComponentBuilder<azdata.LoadingComponent, azdata.LoadingComponentProperties> {
return this._optionsLoadingBuilder.withValidation(validation); return this._optionsLoadingBuilder.withValidation(validation);
} }

118
src/sql/azdata.d.ts vendored
View File

@@ -2555,37 +2555,37 @@ declare module 'azdata' {
* Supports defining a model that can be instantiated as a view in the UI * Supports defining a model that can be instantiated as a view in the UI
*/ */
export interface ModelBuilder { export interface ModelBuilder {
navContainer(): ContainerBuilder<NavContainer, any, any>; navContainer(): ContainerBuilder<NavContainer, any, any, ComponentProperties>;
divContainer(): DivBuilder; divContainer(): DivBuilder;
flexContainer(): FlexBuilder; flexContainer(): FlexBuilder;
splitViewContainer(): SplitViewBuilder; splitViewContainer(): SplitViewBuilder;
dom(): ComponentBuilder<DomComponent>; dom(): ComponentBuilder<DomComponent, DomProperties>;
/** /**
* @deprecated please use radioCardGroup component. * @deprecated please use radioCardGroup component.
*/ */
card(): ComponentBuilder<CardComponent>; card(): ComponentBuilder<CardComponent, CardProperties>;
inputBox(): ComponentBuilder<InputBoxComponent>; inputBox(): ComponentBuilder<InputBoxComponent, InputBoxProperties>;
checkBox(): ComponentBuilder<CheckBoxComponent>; checkBox(): ComponentBuilder<CheckBoxComponent, CheckBoxProperties>;
radioButton(): ComponentBuilder<RadioButtonComponent>; radioButton(): ComponentBuilder<RadioButtonComponent, RadioButtonProperties>;
webView(): ComponentBuilder<WebViewComponent>; webView(): ComponentBuilder<WebViewComponent, WebViewProperties>;
editor(): ComponentBuilder<EditorComponent>; editor(): ComponentBuilder<EditorComponent, EditorProperties>;
diffeditor(): ComponentBuilder<DiffEditorComponent>; diffeditor(): ComponentBuilder<DiffEditorComponent, DiffEditorComponent>;
text(): ComponentBuilder<TextComponent>; text(): ComponentBuilder<TextComponent, TextComponentProperties>;
image(): ComponentBuilder<ImageComponent>; image(): ComponentBuilder<ImageComponent, ImageComponentProperties>;
button(): ComponentBuilder<ButtonComponent>; button(): ComponentBuilder<ButtonComponent, ButtonProperties>;
dropDown(): ComponentBuilder<DropDownComponent>; dropDown(): ComponentBuilder<DropDownComponent, DropDownProperties>;
tree<T>(): ComponentBuilder<TreeComponent<T>>; tree<T>(): ComponentBuilder<TreeComponent<T>, TreeProperties>;
listBox(): ComponentBuilder<ListBoxComponent>; listBox(): ComponentBuilder<ListBoxComponent, ListBoxProperties>;
table(): ComponentBuilder<TableComponent>; table(): ComponentBuilder<TableComponent, TableComponentProperties>;
declarativeTable(): ComponentBuilder<DeclarativeTableComponent>; declarativeTable(): ComponentBuilder<DeclarativeTableComponent, DeclarativeTableProperties>;
dashboardWidget(widgetId: string): ComponentBuilder<DashboardWidgetComponent>; dashboardWidget(widgetId: string): ComponentBuilder<DashboardWidgetComponent, ComponentProperties>;
dashboardWebview(webviewId: string): ComponentBuilder<DashboardWebviewComponent>; dashboardWebview(webviewId: string): ComponentBuilder<DashboardWebviewComponent, ComponentProperties>;
formContainer(): FormBuilder; formContainer(): FormBuilder;
groupContainer(): GroupBuilder; groupContainer(): GroupBuilder;
toolbarContainer(): ToolbarBuilder; toolbarContainer(): ToolbarBuilder;
loadingComponent(): LoadingComponentBuilder; loadingComponent(): LoadingComponentBuilder;
fileBrowserTree(): ComponentBuilder<FileBrowserTreeComponent>; fileBrowserTree(): ComponentBuilder<FileBrowserTreeComponent, FileBrowserTreeProperties>;
hyperlink(): ComponentBuilder<HyperlinkComponent>; hyperlink(): ComponentBuilder<HyperlinkComponent, HyperlinkComponentProperties>;
} }
export interface TreeComponentDataProvider<T> extends vscode.TreeDataProvider<T> { export interface TreeComponentDataProvider<T> extends vscode.TreeDataProvider<T> {
@@ -2607,31 +2607,31 @@ declare module 'azdata' {
enabled?: boolean; enabled?: boolean;
} }
export interface ComponentBuilder<T extends Component> { export interface ComponentBuilder<TComponent extends Component, TPropertyBag extends ComponentProperties> {
component(): T; component(): TComponent;
withProperties<U>(properties: U): ComponentBuilder<T>; withProperties<U>(properties: U): ComponentBuilder<TComponent, TPropertyBag>;
withValidation(validation: (component: T) => boolean): ComponentBuilder<T>; withValidation(validation: (component: TComponent) => boolean): ComponentBuilder<TComponent, TPropertyBag>;
} }
export interface ContainerBuilder<T extends Component, TLayout, TItemLayout> extends ComponentBuilder<T> { export interface ContainerBuilder<TComponent extends Component, TLayout, TItemLayout, TPropertyBag extends ComponentProperties> extends ComponentBuilder<TComponent, TPropertyBag> {
withLayout(layout: TLayout): ContainerBuilder<T, TLayout, TItemLayout>; withLayout(layout: TLayout): ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag>;
withItems(components: Array<Component>, itemLayout?: TItemLayout): ContainerBuilder<T, TLayout, TItemLayout>; withItems(components: Array<Component>, itemLayout?: TItemLayout): ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag>;
} }
export interface FlexBuilder extends ContainerBuilder<FlexContainer, FlexLayout, FlexItemLayout> { export interface FlexBuilder extends ContainerBuilder<FlexContainer, FlexLayout, FlexItemLayout, ComponentProperties> {
} }
// Building on top of flex item // Building on top of flex item
export interface SplitViewBuilder extends ContainerBuilder<SplitViewContainer, SplitViewLayout, FlexItemLayout> { export interface SplitViewBuilder extends ContainerBuilder<SplitViewContainer, SplitViewLayout, FlexItemLayout, SplitViewContainer> {
} }
export interface DivBuilder extends ContainerBuilder<DivContainer, DivLayout, DivItemLayout> { export interface DivBuilder extends ContainerBuilder<DivContainer, DivLayout, DivItemLayout, DivContainerProperties> {
} }
export interface GroupBuilder extends ContainerBuilder<GroupContainer, GroupLayout, GroupItemLayout> { export interface GroupBuilder extends ContainerBuilder<GroupContainer, GroupLayout, GroupItemLayout, GroupContainerProperties> {
} }
export interface ToolbarBuilder extends ContainerBuilder<ToolbarContainer, ToolbarLayout, any> { export interface ToolbarBuilder extends ContainerBuilder<ToolbarContainer, ToolbarLayout, any, ComponentProperties> {
withToolbarItems(components: ToolbarComponent[]): ContainerBuilder<ToolbarContainer, ToolbarLayout, any>; withToolbarItems(components: ToolbarComponent[]): ContainerBuilder<ToolbarContainer, ToolbarLayout, any, ComponentProperties>;
/** /**
* Creates a collection of child components and adds them all to this container * Creates a collection of child components and adds them all to this container
@@ -2648,7 +2648,7 @@ declare module 'azdata' {
addToolbarItem(toolbarComponent: ToolbarComponent): void; addToolbarItem(toolbarComponent: ToolbarComponent): void;
} }
export interface LoadingComponentBuilder extends ComponentBuilder<LoadingComponent> { export interface LoadingComponentBuilder extends ComponentBuilder<LoadingComponent, LoadingComponentProperties> {
/** /**
* Set the component wrapped by the LoadingComponent * Set the component wrapped by the LoadingComponent
* @param component The component to wrap * @param component The component to wrap
@@ -2656,7 +2656,7 @@ declare module 'azdata' {
withItem(component: Component): LoadingComponentBuilder; withItem(component: Component): LoadingComponentBuilder;
} }
export interface FormBuilder extends ContainerBuilder<FormContainer, FormLayout, FormItemLayout> { export interface FormBuilder extends ContainerBuilder<FormContainer, FormLayout, FormItemLayout, ComponentProperties> {
withFormItems(components: (FormComponent | FormComponentGroup)[], itemLayout?: FormItemLayout): FormBuilder; withFormItems(components: (FormComponent | FormComponentGroup)[], itemLayout?: FormItemLayout): FormBuilder;
/** /**
@@ -3275,7 +3275,7 @@ declare module 'azdata' {
export interface ImageComponentProperties extends ComponentProperties, ComponentWithIcon { export interface ImageComponentProperties extends ComponentProperties, ComponentWithIcon {
} }
export interface GroupContainerProperties { export interface GroupContainerProperties extends ComponentProperties {
collapsed: boolean; collapsed: boolean;
} }
@@ -3310,7 +3310,7 @@ declare module 'azdata' {
columns: DeclarativeTableColumn[]; columns: DeclarativeTableColumn[];
} }
export interface ListBoxProperties { export interface ListBoxProperties extends ComponentProperties {
selectedRow?: number; selectedRow?: number;
values?: string[]; values?: string[];
} }
@@ -3353,6 +3353,18 @@ declare module 'azdata' {
* Minimum height for editor component * Minimum height for editor component
*/ */
minimumHeight?: number; minimumHeight?: number;
/**
* The editor Uri which will be used as a reference for VSCode Language Service.
* Currently this is auto-generated by the framework but can be queried after
* view initialization is completed
*/
readonly editorUri: string
/**
* Toggle for whether the editor should be automatically resized or not
*/
isAutoResizable: boolean;
} }
export interface ButtonProperties extends ComponentProperties, ComponentWithIcon { export interface ButtonProperties extends ComponentProperties, ComponentWithIcon {
@@ -3376,7 +3388,7 @@ declare module 'azdata' {
title?: string; title?: string;
} }
export interface LoadingComponentProperties { export interface LoadingComponentProperties extends ComponentProperties {
loading?: boolean; loading?: boolean;
showText?: boolean; showText?: boolean;
loadingText?: string; loadingText?: string;
@@ -3401,7 +3413,7 @@ declare module 'azdata' {
clickable?: boolean; clickable?: boolean;
} }
export interface TitledComponentProperties { export interface TitledComponentProperties extends ComponentProperties {
/** /**
* The title for the component. This title will show when hovered over * The title for the component. This title will show when hovered over
*/ */
@@ -3495,21 +3507,7 @@ declare module 'azdata' {
/** /**
* Editor component for displaying the text code editor * Editor component for displaying the text code editor
*/ */
export interface EditorComponent extends Component { export interface EditorComponent extends Component, EditorProperties {
/**
* The content inside the text editor
*/
content: string;
/**
* The languge mode for this text editor. The language mode is SQL by default.
*/
languageMode: string;
/**
* The editor Uri which will be used as a reference for VSCode Language Service.
* Currently this is auto-generated by the framework but can be queried after
* view initialization is completed
*/
readonly editorUri: string;
/** /**
* An event called when the editor content is updated * An event called when the editor content is updated
*/ */
@@ -3519,16 +3517,6 @@ declare module 'azdata' {
* An event called when the editor is created * An event called when the editor is created
*/ */
readonly onEditorCreated: vscode.Event<any>; readonly onEditorCreated: vscode.Event<any>;
/**
* Toggle for whether the editor should be automatically resized or not
*/
isAutoResizable: boolean;
/**
* Minimum height for editor component
*/
minimumHeight: number;
} }
export interface DiffEditorComponent extends Component { export interface DiffEditorComponent extends Component {

28
src/sql/azdata.proposed.d.ts vendored
View File

@@ -231,10 +231,14 @@ declare module 'azdata' {
} }
export interface ModelBuilder { export interface ModelBuilder {
radioCardGroup(): ComponentBuilder<RadioCardGroupComponent>; radioCardGroup(): ComponentBuilder<RadioCardGroupComponent, RadioCardGroupComponentProperties>;
tabbedPanel(): TabbedPanelComponentBuilder; tabbedPanel(): TabbedPanelComponentBuilder;
separator(): ComponentBuilder<SeparatorComponent>; separator(): ComponentBuilder<SeparatorComponent, SeparatorComponentProperties>;
propertiesContainer(): ComponentBuilder<PropertiesContainerComponent>; propertiesContainer(): ComponentBuilder<PropertiesContainerComponent, PropertiesContainerComponentProperties>;
}
export interface ComponentBuilder<TComponent extends Component, TPropertyBag extends ComponentProperties> {
withProps(properties: TPropertyBag): ComponentBuilder<TComponent, TPropertyBag>;
} }
export interface RadioCard { export interface RadioCard {
@@ -278,6 +282,9 @@ declare module 'azdata' {
} }
export interface SeparatorComponent extends Component { export interface SeparatorComponent extends Component {
}
export interface SeparatorComponentProperties extends ComponentProperties {
} }
export interface DeclarativeTableProperties extends ComponentProperties { export interface DeclarativeTableProperties extends ComponentProperties {
@@ -287,7 +294,7 @@ declare module 'azdata' {
ariaHidden?: boolean; ariaHidden?: boolean;
} }
export interface ComponentWithIconProperties { export interface ComponentWithIconProperties extends ComponentProperties {
/** /**
* The path for the icon with optional dark-theme away alternative * The path for the icon with optional dark-theme away alternative
*/ */
@@ -409,12 +416,12 @@ declare module 'azdata' {
/** /**
* Builder for TabbedPannelComponent * Builder for TabbedPannelComponent
*/ */
export interface TabbedPanelComponentBuilder extends ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any> { export interface TabbedPanelComponentBuilder extends ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any, ComponentProperties> {
/** /**
* Add the tabs to the component * Add the tabs to the component
* @param tabs tabs/tab groups to be added * @param tabs tabs/tab groups to be added
*/ */
withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any>; withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any, ComponentProperties>;
} }
export interface InputBoxProperties extends ComponentProperties { export interface InputBoxProperties extends ComponentProperties {
@@ -450,7 +457,7 @@ declare module 'azdata' {
/** /**
* Properties for configuring a PropertiesContainerComponent * Properties for configuring a PropertiesContainerComponent
*/ */
export interface PropertiesContainerComponentProperties { export interface PropertiesContainerComponentProperties extends ComponentProperties {
/** /**
* The properties to display * The properties to display
*/ */
@@ -463,7 +470,6 @@ declare module 'azdata' {
*/ */
export const onDidChangeActiveNotebookEditor: vscode.Event<NotebookEditor>; export const onDidChangeActiveNotebookEditor: vscode.Event<NotebookEditor>;
} }
export namespace window { export namespace window {
export interface ModelViewDashboard { export interface ModelViewDashboard {
registerTabs(handler: (view: ModelView) => Thenable<(DashboardTab | DashboardTabGroup)[]>): void; registerTabs(handler: (view: ModelView) => Thenable<(DashboardTab | DashboardTabGroup)[]>): void;
@@ -629,4 +635,10 @@ declare module 'azdata' {
*/ */
delete?: boolean; delete?: boolean;
} }
export interface DiffEditorComponent {
/**
* Title of editor
*/
title: string;
}
} }

149
src/sql/workbench/api/common/extHostModelView.ts
View File

@@ -23,7 +23,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
class ModelBuilderImpl implements azdata.ModelBuilder { class ModelBuilderImpl implements azdata.ModelBuilder {
private nextComponentId: number; private nextComponentId: number;
private readonly _componentBuilders = new Map<string, ComponentBuilderImpl<any>>(); private readonly _componentBuilders = new Map<string, ComponentBuilderImpl<any, azdata.ComponentProperties>>();
constructor( constructor(
private readonly _proxy: MainThreadModelViewShape, private readonly _proxy: MainThreadModelViewShape,
@@ -35,9 +35,9 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
this.nextComponentId = 0; this.nextComponentId = 0;
} }
navContainer(): azdata.ContainerBuilder<azdata.NavContainer, any, any> { navContainer(): azdata.ContainerBuilder<azdata.NavContainer, any, any, azdata.ComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let container: GenericContainerBuilder<azdata.NavContainer, any, any> = new GenericContainerBuilder(this._proxy, this._handle, ModelComponentTypes.NavContainer, id); let container: GenericContainerBuilder<azdata.NavContainer, any, any, azdata.ComponentProperties> = new GenericContainerBuilder(this._proxy, this._handle, ModelComponentTypes.NavContainer, id);
this._componentBuilders.set(id, container); this._componentBuilders.set(id, container);
return container; return container;
} }
@@ -51,14 +51,14 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
flexContainer(): azdata.FlexBuilder { flexContainer(): azdata.FlexBuilder {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let container: GenericContainerBuilder<azdata.FlexContainer, any, any> = new GenericContainerBuilder<azdata.FlexContainer, azdata.FlexLayout, azdata.FlexItemLayout>(this._proxy, this._handle, ModelComponentTypes.FlexContainer, id); let container: GenericContainerBuilder<azdata.FlexContainer, any, any, azdata.ComponentProperties> = new GenericContainerBuilder<azdata.FlexContainer, azdata.FlexLayout, azdata.FlexItemLayout, azdata.ComponentProperties>(this._proxy, this._handle, ModelComponentTypes.FlexContainer, id);
this._componentBuilders.set(id, container); this._componentBuilders.set(id, container);
return container; return container;
} }
splitViewContainer(): azdata.SplitViewBuilder { splitViewContainer(): azdata.SplitViewBuilder {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let container: GenericContainerBuilder<azdata.SplitViewContainer, any, any> = new GenericContainerBuilder<azdata.SplitViewContainer, azdata.SplitViewLayout, azdata.FlexItemLayout>(this._proxy, this._handle, ModelComponentTypes.SplitViewContainer, id); let container: GenericContainerBuilder<azdata.SplitViewContainer, any, any, azdata.SplitViewContainer> = new GenericContainerBuilder<azdata.SplitViewContainer, azdata.SplitViewLayout, azdata.FlexItemLayout, azdata.SplitViewContainer>(this._proxy, this._handle, ModelComponentTypes.SplitViewContainer, id);
this._componentBuilders.set(id, container); this._componentBuilders.set(id, container);
return container; return container;
} }
@@ -85,132 +85,132 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
} }
private cardDeprecationMessagePrinted = false; private cardDeprecationMessagePrinted = false;
card(): azdata.ComponentBuilder<azdata.CardComponent> { card(): azdata.ComponentBuilder<azdata.CardComponent, azdata.CardProperties> {
if (!this.cardDeprecationMessagePrinted) { if (!this.cardDeprecationMessagePrinted) {
this.logService.warn(`Extension '${this._extension.identifier.value}' is using card component which has been replaced by radioCardGroup. the card component will be removed in a future release.`); this.logService.warn(`Extension '${this._extension.identifier.value}' is using card component which has been replaced by radioCardGroup. the card component will be removed in a future release.`);
this.cardDeprecationMessagePrinted = true; this.cardDeprecationMessagePrinted = true;
} }
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.CardComponent> = this.getComponentBuilder(new CardWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.CardComponent, azdata.CardProperties> = this.getComponentBuilder(new CardWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
tree<T>(): azdata.ComponentBuilder<azdata.TreeComponent<T>> { tree<T>(): azdata.ComponentBuilder<azdata.TreeComponent<T>, azdata.TreeProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.TreeComponent<T>> = this.getComponentBuilder(new TreeComponentWrapper(this._extHostModelViewTree, this._proxy, this._handle, id, this._extension), id); let builder: ComponentBuilderImpl<azdata.TreeComponent<T>, azdata.TreeProperties> = this.getComponentBuilder(new TreeComponentWrapper(this._extHostModelViewTree, this._proxy, this._handle, id, this._extension), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
inputBox(): azdata.ComponentBuilder<azdata.InputBoxComponent> { inputBox(): azdata.ComponentBuilder<azdata.InputBoxComponent, azdata.InputBoxProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.InputBoxComponent> = this.getComponentBuilder(new InputBoxWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.InputBoxComponent, azdata.InputBoxProperties> = this.getComponentBuilder(new InputBoxWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
text(): azdata.ComponentBuilder<azdata.TextComponent> { text(): azdata.ComponentBuilder<azdata.TextComponent, azdata.TextComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.TextComponent> = this.getComponentBuilder(new TextComponentWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.TextComponent, azdata.TextComponentProperties> = this.getComponentBuilder(new TextComponentWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
image(): azdata.ComponentBuilder<azdata.ImageComponent> { image(): azdata.ComponentBuilder<azdata.ImageComponent, azdata.ImageComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.ImageComponent> = this.getComponentBuilder(new ImageComponentWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.ImageComponent, azdata.ImageComponentProperties> = this.getComponentBuilder(new ImageComponentWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
radioButton(): azdata.ComponentBuilder<azdata.RadioButtonComponent> { radioButton(): azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.RadioButtonComponent> = this.getComponentBuilder(new RadioButtonWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = this.getComponentBuilder(new RadioButtonWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
checkBox(): azdata.ComponentBuilder<azdata.CheckBoxComponent> { checkBox(): azdata.ComponentBuilder<azdata.CheckBoxComponent, azdata.CheckBoxProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.CheckBoxComponent> = this.getComponentBuilder(new CheckBoxWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.CheckBoxComponent, azdata.CheckBoxProperties> = this.getComponentBuilder(new CheckBoxWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
webView(): azdata.ComponentBuilder<azdata.WebViewComponent> { webView(): azdata.ComponentBuilder<azdata.WebViewComponent, azdata.WebViewProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.WebViewComponent> = this.getComponentBuilder(new WebViewWrapper(this._proxy, this._handle, id, this._extension.extensionLocation), id); let builder: ComponentBuilderImpl<azdata.WebViewComponent, azdata.WebViewProperties> = this.getComponentBuilder(new WebViewWrapper(this._proxy, this._handle, id, this._extension.extensionLocation), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
editor(): azdata.ComponentBuilder<azdata.EditorComponent> { editor(): azdata.ComponentBuilder<azdata.EditorComponent, azdata.EditorProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.EditorComponent> = this.getComponentBuilder(new EditorWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.EditorComponent, azdata.EditorProperties> = this.getComponentBuilder(new EditorWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
diffeditor(): azdata.ComponentBuilder<azdata.DiffEditorComponent> { diffeditor(): azdata.ComponentBuilder<azdata.DiffEditorComponent, azdata.DiffEditorComponent> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.DiffEditorComponent> = this.getComponentBuilder(new DiffEditorWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.DiffEditorComponent, azdata.DiffEditorComponent> = this.getComponentBuilder(new DiffEditorWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
button(): azdata.ComponentBuilder<azdata.ButtonComponent> { button(): azdata.ComponentBuilder<azdata.ButtonComponent, azdata.ButtonProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.ButtonComponent> = this.getComponentBuilder(new ButtonWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.ButtonComponent, azdata.ButtonProperties> = this.getComponentBuilder(new ButtonWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
separator(): azdata.ComponentBuilder<azdata.SeparatorComponent> { separator(): azdata.ComponentBuilder<azdata.SeparatorComponent, azdata.SeparatorComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.SeparatorComponent> = this.getComponentBuilder(new SeparatorWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.SeparatorComponent, azdata.SeparatorComponentProperties> = this.getComponentBuilder(new SeparatorWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
dropDown(): azdata.ComponentBuilder<azdata.DropDownComponent> { dropDown(): azdata.ComponentBuilder<azdata.DropDownComponent, azdata.DropDownProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.DropDownComponent> = this.getComponentBuilder(new DropDownWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.DropDownComponent, azdata.DropDownProperties> = this.getComponentBuilder(new DropDownWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
listBox(): azdata.ComponentBuilder<azdata.ListBoxComponent> { listBox(): azdata.ComponentBuilder<azdata.ListBoxComponent, azdata.ListBoxProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.ListBoxComponent> = this.getComponentBuilder(new ListBoxWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.ListBoxComponent, azdata.ListBoxProperties> = this.getComponentBuilder(new ListBoxWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
table(): azdata.ComponentBuilder<azdata.TableComponent> { table(): azdata.ComponentBuilder<azdata.TableComponent, azdata.TableComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.TableComponent> = this.getComponentBuilder(new TableComponentWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.TableComponent, azdata.TableComponentProperties> = this.getComponentBuilder(new TableComponentWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
declarativeTable(): azdata.ComponentBuilder<azdata.DeclarativeTableComponent> { declarativeTable(): azdata.ComponentBuilder<azdata.DeclarativeTableComponent, azdata.DeclarativeTableProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.DeclarativeTableComponent> = this.getComponentBuilder(new DeclarativeTableWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.DeclarativeTableComponent, azdata.DeclarativeTableProperties> = this.getComponentBuilder(new DeclarativeTableWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
dashboardWidget(widgetId: string): azdata.ComponentBuilder<azdata.DashboardWidgetComponent> { dashboardWidget(widgetId: string): azdata.ComponentBuilder<azdata.DashboardWidgetComponent, azdata.ComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder = this.getComponentBuilder<azdata.DashboardWidgetComponent>(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWidget, id), id); let builder = this.getComponentBuilder<azdata.DashboardWidgetComponent, azdata.ComponentProperties>(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWidget, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
dashboardWebview(webviewId: string): azdata.ComponentBuilder<azdata.DashboardWebviewComponent> { dashboardWebview(webviewId: string): azdata.ComponentBuilder<azdata.DashboardWebviewComponent, azdata.ComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.DashboardWebviewComponent> = this.getComponentBuilder(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWebview, id), id); let builder: ComponentBuilderImpl<azdata.DashboardWebviewComponent, azdata.ComponentProperties> = this.getComponentBuilder(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWebview, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
@@ -222,30 +222,30 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
return builder; return builder;
} }
fileBrowserTree(): azdata.ComponentBuilder<azdata.FileBrowserTreeComponent> { fileBrowserTree(): azdata.ComponentBuilder<azdata.FileBrowserTreeComponent, azdata.FileBrowserTreeProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.FileBrowserTreeComponent> = this.getComponentBuilder(new FileBrowserTreeComponentWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.FileBrowserTreeComponent, azdata.FileBrowserTreeProperties> = this.getComponentBuilder(new FileBrowserTreeComponentWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
dom(): azdata.ComponentBuilder<azdata.DomComponent> { dom(): azdata.ComponentBuilder<azdata.DomComponent, azdata.DomProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.DomComponent> = this.getComponentBuilder(new DomComponentWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.DomComponent, azdata.DomProperties> = this.getComponentBuilder(new DomComponentWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
hyperlink(): azdata.ComponentBuilder<azdata.HyperlinkComponent> { hyperlink(): azdata.ComponentBuilder<azdata.HyperlinkComponent, azdata.HyperlinkComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.HyperlinkComponent> = this.getComponentBuilder(new HyperlinkComponentWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.HyperlinkComponent, azdata.HyperlinkComponentProperties> = this.getComponentBuilder(new HyperlinkComponentWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
radioCardGroup(): azdata.ComponentBuilder<azdata.RadioCardGroupComponent> { radioCardGroup(): azdata.ComponentBuilder<azdata.RadioCardGroupComponent, azdata.RadioCardGroupComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.RadioCardGroupComponent> = this.getComponentBuilder(new RadioCardGroupComponentWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.RadioCardGroupComponent, azdata.RadioCardGroupComponentProperties> = this.getComponentBuilder(new RadioCardGroupComponentWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
@@ -257,16 +257,16 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
return builder; return builder;
} }
propertiesContainer(): azdata.ComponentBuilder<azdata.PropertiesContainerComponent> { propertiesContainer(): azdata.ComponentBuilder<azdata.PropertiesContainerComponent, azdata.PropertiesContainerComponentProperties> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.PropertiesContainerComponent> = this.getComponentBuilder(new PropertiesContainerComponentWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<azdata.PropertiesContainerComponent, azdata.PropertiesContainerComponentProperties> = this.getComponentBuilder(new PropertiesContainerComponentWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
getComponentBuilder<T extends azdata.Component>(component: ComponentWrapper, id: string): ComponentBuilderImpl<T> { getComponentBuilder<T extends azdata.Component, TPropertyBag extends azdata.ComponentProperties>(component: ComponentWrapper, id: string): ComponentBuilderImpl<T, TPropertyBag> {
let componentBuilder: ComponentBuilderImpl<T> = new ComponentBuilderImpl<T>(component); let componentBuilder: ComponentBuilderImpl<T, TPropertyBag> = new ComponentBuilderImpl<T, TPropertyBag>(component);
this._componentBuilders.set(id, componentBuilder); this._componentBuilders.set(id, componentBuilder);
return componentBuilder; return componentBuilder;
} }
@@ -292,7 +292,7 @@ interface IWithEventHandler {
handleEvent(eventArgs: IComponentEventArgs): void; handleEvent(eventArgs: IComponentEventArgs): void;
} }
class ComponentBuilderImpl<T extends azdata.Component> implements azdata.ComponentBuilder<T>, IWithEventHandler { class ComponentBuilderImpl<T extends azdata.Component, TPropertyBag extends azdata.ComponentProperties> implements azdata.ComponentBuilder<T, TPropertyBag>, IWithEventHandler {
constructor(protected _component: ComponentWrapper) { constructor(protected _component: ComponentWrapper) {
_component.registerEvent(); _component.registerEvent();
@@ -306,13 +306,18 @@ class ComponentBuilderImpl<T extends azdata.Component> implements azdata.Compone
return this._component; return this._component;
} }
withProperties<U>(properties: U): azdata.ComponentBuilder<T> { withProperties<U>(properties: U): azdata.ComponentBuilder<T, TPropertyBag> {
// Keep any properties that may have been set during initial object construction // Keep any properties that may have been set during initial object construction
this._component.properties = assign({}, this._component.properties, properties); this._component.properties = assign({}, this._component.properties, properties);
return this; return this;
} }
withValidation(validation: (component: T) => boolean): azdata.ComponentBuilder<T> { withProps(properties: TPropertyBag): azdata.ComponentBuilder<T, TPropertyBag> {
this._component.properties = assign({}, this._component.properties, properties);
return this;
}
withValidation(validation: (component: T) => boolean): azdata.ComponentBuilder<T, TPropertyBag> {
this._component.customValidations.push(validation); this._component.customValidations.push(validation);
return this; return this;
} }
@@ -322,17 +327,17 @@ class ComponentBuilderImpl<T extends azdata.Component> implements azdata.Compone
} }
} }
class ContainerBuilderImpl<T extends azdata.Component, TLayout, TItemLayout> extends ComponentBuilderImpl<T> implements azdata.ContainerBuilder<T, TLayout, TItemLayout> { class ContainerBuilderImpl<TComponent extends azdata.Component, TLayout, TItemLayout, TPropertyBag extends azdata.ComponentProperties> extends ComponentBuilderImpl<TComponent, TPropertyBag> implements azdata.ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag> {
constructor(componentWrapper: ComponentWrapper) { constructor(componentWrapper: ComponentWrapper) {
super(componentWrapper); super(componentWrapper);
} }
withLayout(layout: TLayout): azdata.ContainerBuilder<T, TLayout, TItemLayout> { withLayout(layout: TLayout): azdata.ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag> {
this._component.layout = layout; this._component.layout = layout;
return this; return this;
} }
withItems(components: azdata.Component[], itemLayout?: TItemLayout): azdata.ContainerBuilder<T, TLayout, TItemLayout> { withItems(components: azdata.Component[], itemLayout?: TItemLayout): azdata.ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag> {
this._component.itemConfigs = components.map(item => { this._component.itemConfigs = components.map(item => {
let componentWrapper = item as ComponentWrapper; let componentWrapper = item as ComponentWrapper;
return new InternalItemConfig(componentWrapper, itemLayout); return new InternalItemConfig(componentWrapper, itemLayout);
@@ -341,19 +346,19 @@ class ContainerBuilderImpl<T extends azdata.Component, TLayout, TItemLayout> ext
} }
} }
class GenericContainerBuilder<T extends azdata.Component, TLayout, TItemLayout> extends ContainerBuilderImpl<T, TLayout, TItemLayout> { class GenericContainerBuilder<T extends azdata.Component, TLayout, TItemLayout, TPropertyBag extends azdata.ComponentProperties> extends ContainerBuilderImpl<T, TLayout, TItemLayout, TPropertyBag> {
constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) { constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
super(new ComponentWrapper(proxy, handle, type, id)); super(new ComponentWrapper(proxy, handle, type, id));
} }
} }
class DivContainerBuilder extends ContainerBuilderImpl<azdata.DivContainer, azdata.DivLayout, azdata.DivItemLayout> { class DivContainerBuilder extends ContainerBuilderImpl<azdata.DivContainer, azdata.DivLayout, azdata.DivItemLayout, azdata.DivContainerProperties> {
constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) { constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
super(new DivContainerWrapper(proxy, handle, type, id)); super(new DivContainerWrapper(proxy, handle, type, id));
} }
} }
class FormContainerBuilder extends GenericContainerBuilder<azdata.FormContainer, azdata.FormLayout, azdata.FormItemLayout> implements azdata.FormBuilder { class FormContainerBuilder extends GenericContainerBuilder<azdata.FormContainer, azdata.FormLayout, azdata.FormItemLayout, azdata.ComponentProperties> implements azdata.FormBuilder {
constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string, private _builder: ModelBuilderImpl) { constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string, private _builder: ModelBuilderImpl) {
super(proxy, handle, type, id); super(proxy, handle, type, id);
} }
@@ -471,14 +476,14 @@ class FormContainerBuilder extends GenericContainerBuilder<azdata.FormContainer,
} }
} }
class GroupContainerBuilder extends ContainerBuilderImpl<azdata.GroupContainer, azdata.GroupLayout, azdata.GroupItemLayout> { class GroupContainerBuilder extends ContainerBuilderImpl<azdata.GroupContainer, azdata.GroupLayout, azdata.GroupItemLayout, azdata.GroupContainerProperties> {
constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) { constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
super(new GroupContainerComponentWrapper(proxy, handle, type, id)); super(new GroupContainerComponentWrapper(proxy, handle, type, id));
} }
} }
class ToolbarContainerBuilder extends GenericContainerBuilder<azdata.ToolbarContainer, azdata.ToolbarLayout, any> implements azdata.ToolbarBuilder { class ToolbarContainerBuilder extends GenericContainerBuilder<azdata.ToolbarContainer, azdata.ToolbarLayout, any, azdata.ComponentProperties> implements azdata.ToolbarBuilder {
withToolbarItems(components: azdata.ToolbarComponent[]): azdata.ContainerBuilder<azdata.ToolbarContainer, any, any> { withToolbarItems(components: azdata.ToolbarComponent[]): azdata.ContainerBuilder<azdata.ToolbarContainer, any, any, azdata.ComponentProperties> {
this._component.itemConfigs = components.map(item => { this._component.itemConfigs = components.map(item => {
return this.convertToItemConfig(item); return this.convertToItemConfig(item);
}); });
@@ -506,8 +511,8 @@ class ToolbarContainerBuilder extends GenericContainerBuilder<azdata.ToolbarCont
} }
} }
class TabbedPanelComponentBuilder extends ContainerBuilderImpl<azdata.TabbedPanelComponent, azdata.TabbedPanelLayout, any> implements azdata.TabbedPanelComponentBuilder { class TabbedPanelComponentBuilder extends ContainerBuilderImpl<azdata.TabbedPanelComponent, azdata.TabbedPanelLayout, any, azdata.ComponentProperties> implements azdata.TabbedPanelComponentBuilder {
withTabs(items: (azdata.Tab | azdata.TabGroup)[]): azdata.ContainerBuilder<azdata.TabbedPanelComponent, azdata.TabbedPanelLayout, any> { withTabs(items: (azdata.Tab | azdata.TabGroup)[]): azdata.ContainerBuilder<azdata.TabbedPanelComponent, azdata.TabbedPanelLayout, any, azdata.ComponentProperties> {
this._component.itemConfigs = createFromTabs(items); this._component.itemConfigs = createFromTabs(items);
return this; return this;
} }
@@ -537,7 +542,7 @@ function toTabItemConfig(content: azdata.Component, title: string, id?: string,
}); });
} }
class LoadingComponentBuilder extends ComponentBuilderImpl<azdata.LoadingComponent> implements azdata.LoadingComponentBuilder { class LoadingComponentBuilder extends ComponentBuilderImpl<azdata.LoadingComponent, azdata.LoadingComponentProperties> implements azdata.LoadingComponentBuilder {
withItem(component: azdata.Component) { withItem(component: azdata.Component) {
this.component().component = component; this.component().component = component;
return this; return this;
@@ -1230,6 +1235,14 @@ class DiffEditorWrapper extends ComponentWrapper implements azdata.DiffEditorCom
public set editorUriRight(v: string) { public set editorUriRight(v: string) {
this.setProperty('editorUriRight', v); this.setProperty('editorUriRight', v);
} }
public get title(): string {
return this.properties['title'];
}
public set title(v: string) {
this.setProperty('title', v);
}
} }
class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonComponent { class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonComponent {

14
src/sql/workbench/browser/modelComponents/button.component.ts
View File

@@ -33,7 +33,7 @@ import { convertSize } from 'sql/base/browser/dom';
</div> </div>
` `
}) })
export default class ButtonComponent extends ComponentWithIconBase implements IComponent, OnDestroy, AfterViewInit { export default class ButtonComponent extends ComponentWithIconBase<azdata.ButtonProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _button: Button; private _button: Button;
@@ -151,27 +151,27 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
// CSS-bound properties // CSS-bound properties
private get label(): string { private get label(): string {
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((props) => props.label, ''); return this.getPropertyOrDefault<string>((props) => props.label, '');
} }
private set label(newValue: string) { private set label(newValue: string) {
this.setPropertyFromUI<azdata.ButtonProperties, string>(this.setValueProperties, newValue); this.setPropertyFromUI<string>(this.setValueProperties, newValue);
} }
public get isFile(): boolean { public get isFile(): boolean {
return this.getPropertyOrDefault<azdata.ButtonProperties, boolean>((props) => props.isFile, false); return this.getPropertyOrDefault<boolean>((props) => props.isFile, false);
} }
public set isFile(newValue: boolean) { public set isFile(newValue: boolean) {
this.setPropertyFromUI<azdata.ButtonProperties, boolean>(this.setFileProperties, newValue); this.setPropertyFromUI<boolean>(this.setFileProperties, newValue);
} }
private get fileContent(): string { private get fileContent(): string {
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((props) => props.fileContent, ''); return this.getPropertyOrDefault<string>((props) => props.fileContent, '');
} }
private set fileContent(newValue: string) { private set fileContent(newValue: string) {
this.setPropertyFromUI<azdata.ButtonProperties, string>(this.setFileContentProperties, newValue); this.setPropertyFromUI<string>(this.setFileContentProperties, newValue);
} }
private setFileContentProperties(properties: azdata.ButtonProperties, fileContent: string): void { private setFileContentProperties(properties: azdata.ButtonProperties, fileContent: string): void {

20
src/sql/workbench/browser/modelComponents/card.component.ts
View File

@@ -57,7 +57,7 @@ export enum CardType {
@Component({ @Component({
templateUrl: decodeURI(require.toUrl('./card.component.html')) templateUrl: decodeURI(require.toUrl('./card.component.html'))
}) })
export default class CardComponent extends ComponentWithIconBase implements IComponent, OnDestroy { export default class CardComponent extends ComponentWithIconBase<azdata.CardProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
@@ -156,23 +156,23 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
// CSS-bound properties // CSS-bound properties
public get label(): string { public get label(): string {
return this.getPropertyOrDefault<CardProperties, string>((props) => props.label, ''); return this.getPropertyOrDefault<string>((props) => props.label, '');
} }
public get value(): string { public get value(): string {
return this.getPropertyOrDefault<CardProperties, string>((props) => props.value, ''); return this.getPropertyOrDefault<string>((props) => props.value, '');
} }
public get cardType(): string { public get cardType(): string {
return this.getPropertyOrDefault<CardProperties, string>((props) => props.cardType, 'Details'); return this.getPropertyOrDefault<string>((props) => props.cardType, 'Details');
} }
public get selected(): boolean { public get selected(): boolean {
return this.getPropertyOrDefault<azdata.CardProperties, boolean>((props) => props.selected, false); return this.getPropertyOrDefault<boolean>((props) => props.selected, false);
} }
public set selected(newValue: boolean) { public set selected(newValue: boolean) {
this.setPropertyFromUI<azdata.CardProperties, boolean>((props, value) => props.selected = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.selected = value, newValue);
} }
public get isDetailsCard(): boolean { public get isDetailsCard(): boolean {
@@ -196,20 +196,20 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
} }
public get descriptions(): CardDescriptionItem[] { public get descriptions(): CardDescriptionItem[] {
return this.getPropertyOrDefault<CardProperties, CardDescriptionItem[]>((props) => props.descriptions, []); return this.getPropertyOrDefault<CardDescriptionItem[]>((props) => props.descriptions, []);
} }
public get actions(): ActionDescriptor[] { public get actions(): ActionDescriptor[] {
return this.getPropertyOrDefault<CardProperties, ActionDescriptor[]>((props) => props.actions, []); return this.getPropertyOrDefault<ActionDescriptor[]>((props) => props.actions, []);
} }
public hasStatus(): boolean { public hasStatus(): boolean {
let status = this.getPropertyOrDefault<CardProperties, StatusIndicator>((props) => props.status, StatusIndicator.None); let status = this.getPropertyOrDefault<StatusIndicator>((props) => props.status, StatusIndicator.None);
return status !== StatusIndicator.None; return status !== StatusIndicator.None;
} }
public get statusColor(): string { public get statusColor(): string {
let status = this.getPropertyOrDefault<CardProperties, StatusIndicator>((props) => props.status, StatusIndicator.None); let status = this.getPropertyOrDefault<StatusIndicator>((props) => props.status, StatusIndicator.None);
switch (status) { switch (status) {
case StatusIndicator.Ok: case StatusIndicator.Ok:
return 'green'; return 'green';

14
src/sql/workbench/browser/modelComponents/checkbox.component.ts
View File

@@ -24,7 +24,7 @@ import { convertSize } from 'sql/base/browser/dom';
<div #input width="100%" [style.display]="display"></div> <div #input width="100%" [style.display]="display"></div>
` `
}) })
export default class CheckBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class CheckBoxComponent extends ComponentBase<azdata.CheckBoxProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _input: Checkbox; private _input: Checkbox;
@@ -102,27 +102,27 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
// CSS-bound properties // CSS-bound properties
public get checked(): boolean { public get checked(): boolean {
return this.getPropertyOrDefault<azdata.CheckBoxProperties, boolean>((props) => props.checked, false); return this.getPropertyOrDefault<boolean>((props) => props.checked, false);
} }
public set checked(newValue: boolean) { public set checked(newValue: boolean) {
this.setPropertyFromUI<azdata.CheckBoxProperties, boolean>((properties, value) => { properties.checked = value; }, newValue); this.setPropertyFromUI<boolean>((properties, value) => { properties.checked = value; }, newValue);
} }
private get label(): string { private get label(): string {
return this.getPropertyOrDefault<azdata.CheckBoxProperties, string>((props) => props.label, ''); return this.getPropertyOrDefault<string>((props) => props.label, '');
} }
private set label(newValue: string) { private set label(newValue: string) {
this.setPropertyFromUI<azdata.CheckBoxProperties, string>((properties, label) => { properties.label = label; }, newValue); this.setPropertyFromUI<string>((properties, label) => { properties.label = label; }, newValue);
} }
public get required(): boolean { public get required(): boolean {
return this.getPropertyOrDefault<azdata.CheckBoxProperties, boolean>((props) => props.required, false); return this.getPropertyOrDefault<boolean>((props) => props.required, false);
} }
public set required(newValue: boolean) { public set required(newValue: boolean) {
this.setPropertyFromUI<azdata.CheckBoxProperties, boolean>((props, value) => props.required = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.required = value, newValue);
} }
public focus(): void { public focus(): void {

50
src/sql/workbench/browser/modelComponents/componentBase.ts
View File

@@ -28,7 +28,7 @@ export class ItemDescriptor<T> {
constructor(public descriptor: IComponentDescriptor, public config: T) { } constructor(public descriptor: IComponentDescriptor, public config: T) { }
} }
export abstract class ComponentBase extends Disposable implements IComponent, OnDestroy, OnInit { export abstract class ComponentBase<TPropertyBag extends azdata.ComponentProperties> extends Disposable implements IComponent, OnDestroy, OnInit {
protected properties: { [key: string]: any; } = {}; protected properties: { [key: string]: any; } = {};
private _valid: boolean = true; private _valid: boolean = true;
protected _validations: (() => boolean | Thenable<boolean>)[] = []; protected _validations: (() => boolean | Thenable<boolean>)[] = [];
@@ -109,17 +109,17 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
} }
} }
protected getProperties<TPropertyBag>(): TPropertyBag { protected getProperties(): TPropertyBag {
return this.properties as TPropertyBag; return this.properties as TPropertyBag;
} }
protected getPropertyOrDefault<TPropertyBag, TValue>(propertyGetter: (TPropertyBag) => TValue, defaultVal: TValue) { protected getPropertyOrDefault<TValue>(propertyGetter: (property: TPropertyBag) => TValue, defaultVal: TValue) {
let property = propertyGetter(this.getProperties<TPropertyBag>()); let property = propertyGetter(this.getProperties());
return types.isUndefinedOrNull(property) ? defaultVal : property; return types.isUndefinedOrNull(property) ? defaultVal : property;
} }
protected setPropertyFromUI<TPropertyBag, TValue>(propertySetter: (TPropertyBag, TValue) => void, value: TValue) { protected setPropertyFromUI<TValue>(propertySetter: (TPropertyBag, TValue) => void, value: TValue) {
propertySetter(this.getProperties<TPropertyBag>(), value); propertySetter(this.getProperties(), value);
this.fireEvent({ this.fireEvent({
eventType: ComponentEventType.PropertiesChanged, eventType: ComponentEventType.PropertiesChanged,
args: this.getProperties() args: this.getProperties()
@@ -144,75 +144,75 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
} }
public get height(): number | string { public get height(): number | string {
return this.getPropertyOrDefault<azdata.ComponentProperties, number | string>((props) => props.height, undefined); return this.getPropertyOrDefault<number | string>((props) => props.height, undefined);
} }
public set height(newValue: number | string) { public set height(newValue: number | string) {
this.setPropertyFromUI<azdata.ComponentProperties, number | string>((props, value) => props.height = value, newValue); this.setPropertyFromUI<number | string>((props, value) => props.height = value, newValue);
} }
public get width(): number | string { public get width(): number | string {
return this.getPropertyOrDefault<azdata.ComponentProperties, number | string>((props) => props.width, undefined); return this.getPropertyOrDefault<number | string>((props) => props.width, undefined);
} }
public set width(newValue: number | string) { public set width(newValue: number | string) {
this.setPropertyFromUI<azdata.ComponentProperties, number | string>((props, value) => props.width = value, newValue); this.setPropertyFromUI<number | string>((props, value) => props.width = value, newValue);
} }
public get position(): string { public get position(): string {
return this.getPropertyOrDefault<azdata.ComponentProperties, string>((props) => props.position, ''); return this.getPropertyOrDefault<string>((props) => props.position, '');
} }
public set position(newValue: string) { public set position(newValue: string) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((properties, position) => { properties.position = position; }, newValue); this.setPropertyFromUI<string>((properties, position) => { properties.position = position; }, newValue);
} }
public get display(): azdata.DisplayType { public get display(): azdata.DisplayType {
return this.getPropertyOrDefault<azdata.ComponentProperties, azdata.DisplayType>((props) => props.display, undefined); return this.getPropertyOrDefault<azdata.DisplayType>((props) => props.display, undefined);
} }
public set display(newValue: azdata.DisplayType) { public set display(newValue: azdata.DisplayType) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((properties, display) => { properties.display = display; }, newValue); this.setPropertyFromUI<string>((properties, display) => { properties.display = display; }, newValue);
} }
public get ariaLabel(): string { public get ariaLabel(): string {
return this.getPropertyOrDefault<azdata.ComponentProperties, string>((props) => props.ariaLabel, ''); return this.getPropertyOrDefault<string>((props) => props.ariaLabel, '');
} }
public set ariaLabel(newValue: string) { public set ariaLabel(newValue: string) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((props, value) => props.ariaLabel = value, newValue); this.setPropertyFromUI<string>((props, value) => props.ariaLabel = value, newValue);
} }
public get ariaRole(): string { public get ariaRole(): string {
return this.getPropertyOrDefault<azdata.ComponentProperties, string>((props) => props.ariaRole, ''); return this.getPropertyOrDefault<string>((props) => props.ariaRole, '');
} }
public set ariaRole(newValue: string) { public set ariaRole(newValue: string) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((props, value) => props.ariaRole = value, newValue); this.setPropertyFromUI<string>((props, value) => props.ariaRole = value, newValue);
} }
public get ariaSelected(): boolean { public get ariaSelected(): boolean {
return this.getPropertyOrDefault<azdata.ComponentProperties, boolean>((props) => props.ariaSelected, false); return this.getPropertyOrDefault<boolean>((props) => props.ariaSelected, false);
} }
public set ariaSelected(newValue: boolean) { public set ariaSelected(newValue: boolean) {
this.setPropertyFromUI<azdata.ComponentProperties, boolean>((props, value) => props.ariaSelected = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.ariaSelected = value, newValue);
} }
public get ariaHidden(): boolean { public get ariaHidden(): boolean {
return this.getPropertyOrDefault<azdata.ComponentProperties, boolean>((props) => props.ariaHidden, false); return this.getPropertyOrDefault<boolean>((props) => props.ariaHidden, false);
} }
public set ariaHidden(newValue: boolean) { public set ariaHidden(newValue: boolean) {
this.setPropertyFromUI<azdata.ComponentProperties, boolean>((props, value) => props.ariaHidden = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.ariaHidden = value, newValue);
} }
public get CSSStyles(): { [key: string]: string } { public get CSSStyles(): { [key: string]: string } {
return this.getPropertyOrDefault<azdata.ComponentProperties, { [key: string]: string }>((props) => props.CSSStyles, {}); return this.getPropertyOrDefault<{ [key: string]: string }>((props) => props.CSSStyles, {});
} }
public set CSSStyles(newValue: { [key: string]: string }) { public set CSSStyles(newValue: { [key: string]: string }) {
this.setPropertyFromUI<azdata.ComponentProperties, { [key: string]: string }>((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue); this.setPropertyFromUI<{ [key: string]: string }>((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue);
} }
protected getWidth(): string { protected getWidth(): string {
@@ -275,7 +275,7 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
} }
} }
export abstract class ContainerBase<T> extends ComponentBase { export abstract class ContainerBase<T, TPropertyBag extends azdata.ComponentProperties = azdata.ComponentProperties> extends ComponentBase<TPropertyBag> {
protected items: ItemDescriptor<T>[]; protected items: ItemDescriptor<T>[];
@ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList<ModelComponentWrapper>; @ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList<ModelComponentWrapper>;

12
src/sql/workbench/browser/modelComponents/componentWithIconBase.ts
View File

@@ -16,7 +16,7 @@ export class ItemDescriptor<T> {
constructor(public descriptor: IComponentDescriptor, public config: T) { } constructor(public descriptor: IComponentDescriptor, public config: T) { }
} }
export abstract class ComponentWithIconBase extends ComponentBase { export abstract class ComponentWithIconBase<T extends azdata.ComponentWithIconProperties> extends ComponentBase<T> {
protected _iconClass: string; protected _iconClass: string;
protected _iconPath: IUserFriendlyIcon; protected _iconPath: IUserFriendlyIcon;
@@ -49,23 +49,23 @@ export abstract class ComponentWithIconBase extends ComponentBase {
} }
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } { public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, IUserFriendlyIcon>((props) => props.iconPath, undefined); return this.getPropertyOrDefault<IUserFriendlyIcon>((props) => props.iconPath, undefined);
} }
public get iconHeight(): number | string { public get iconHeight(): number | string {
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, number | string>((props) => props.iconHeight, '50px'); return this.getPropertyOrDefault<number | string>((props) => props.iconHeight, '50px');
} }
public get iconWidth(): number | string { public get iconWidth(): number | string {
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, number | string>((props) => props.iconWidth, '50px'); return this.getPropertyOrDefault<number | string>((props) => props.iconWidth, '50px');
} }
public get title(): string { public get title(): string {
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, string>((props) => props.title, ''); return this.getPropertyOrDefault<string>((props) => props.title, '');
} }
public set title(newTitle: string) { public set title(newTitle: string) {
this.setPropertyFromUI<azdata.ComponentWithIconProperties, string>((properties, title) => { properties.title = title; }, newTitle); this.setPropertyFromUI<string>((properties, title) => { properties.title = title; }, newTitle);
} }
ngOnDestroy(): void { ngOnDestroy(): void {

2
src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
View File

@@ -132,7 +132,7 @@ export default class DeclarativeTableComponent extends ContainerBase<any> implem
private onCellDataChanged(newValue: any, rowIdx: number, colIdx: number): void { private onCellDataChanged(newValue: any, rowIdx: number, colIdx: number): void {
this.data[rowIdx][colIdx] = newValue; this.data[rowIdx][colIdx] = newValue;
this.setPropertyFromUI<azdata.DeclarativeTableProperties, any[][]>((props, value) => props.data = value, this.data); this.setPropertyFromUI<any[][]>((props, value) => props.data = value, this.data);
let newCellData: azdata.TableCell = { let newCellData: azdata.TableCell = {
row: rowIdx, row: rowIdx,
column: colIdx, column: colIdx,

34
src/sql/workbench/browser/modelComponents/diffeditor.component.ts
View File

@@ -37,7 +37,7 @@ import { convertSizeToNumber } from 'sql/base/browser/dom';
</div>`, </div>`,
selector: 'modelview-diff-editor-component' selector: 'modelview-diff-editor-component'
}) })
export default class DiffEditorComponent extends ComponentBase implements IComponent, OnDestroy { export default class DiffEditorComponent extends ComponentBase<azdata.DiffEditorComponent> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _editor: TextDiffEditor; private _editor: TextDiffEditor;
@@ -176,66 +176,66 @@ export default class DiffEditorComponent extends ComponentBase implements ICompo
// CSS-bound properties // CSS-bound properties
public get contentLeft(): string { public get contentLeft(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.contentLeft, undefined); return this.getPropertyOrDefault<string>((props) => props.contentLeft, undefined);
} }
public set contentLeft(newValue: string) { public set contentLeft(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, contentLeft) => { properties.contentLeft = contentLeft; }, newValue); this.setPropertyFromUI<string>((properties, contentLeft) => { properties.contentLeft = contentLeft; }, newValue);
} }
public get contentRight(): string { public get contentRight(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.contentRight, undefined); return this.getPropertyOrDefault<string>((props) => props.contentRight, undefined);
} }
public set contentRight(newValue: string) { public set contentRight(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, contentRight) => { properties.contentRight = contentRight; }, newValue); this.setPropertyFromUI<string>((properties, contentRight) => { properties.contentRight = contentRight; }, newValue);
} }
public get languageMode(): string { public get languageMode(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.languageMode, undefined); return this.getPropertyOrDefault<string>((props) => props.languageMode, undefined);
} }
public set languageMode(newValue: string) { public set languageMode(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue); this.setPropertyFromUI<string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
} }
public get isAutoResizable(): boolean { public get isAutoResizable(): boolean {
return this.getPropertyOrDefault<azdata.EditorProperties, boolean>((props) => props.isAutoResizable, false); return this.getPropertyOrDefault<boolean>((props) => props.isAutoResizable, false);
} }
public set isAutoResizable(newValue: boolean) { public set isAutoResizable(newValue: boolean) {
this.setPropertyFromUI<azdata.EditorProperties, boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue); this.setPropertyFromUI<boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue);
} }
public get minimumHeight(): number { public get minimumHeight(): number {
return this.getPropertyOrDefault<azdata.EditorProperties, number>((props) => props.minimumHeight, this._editor.minimumHeight); return this.getPropertyOrDefault<number>((props) => props.minimumHeight, this._editor.minimumHeight);
} }
public set minimumHeight(newValue: number) { public set minimumHeight(newValue: number) {
this.setPropertyFromUI<azdata.EditorProperties, number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue); this.setPropertyFromUI<number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue);
} }
public get editorUriLeft(): string { public get editorUriLeft(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.editorUriLeft, ''); return this.getPropertyOrDefault<string>((props) => props.editorUriLeft, '');
} }
public set editorUriLeft(newValue: string) { public set editorUriLeft(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, editorUriLeft) => { properties.editorUriLeft = editorUriLeft; }, newValue); this.setPropertyFromUI<string>((properties, editorUriLeft) => { properties.editorUriLeft = editorUriLeft; }, newValue);
} }
public get editorUriRight(): string { public get editorUriRight(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.editorUriRight, ''); return this.getPropertyOrDefault<string>((props) => props.editorUriRight, '');
} }
public set editorUriRight(newValue: string) { public set editorUriRight(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, editorUriRight) => { properties.editorUriRight = editorUriRight; }, newValue); this.setPropertyFromUI<string>((properties, editorUriRight) => { properties.editorUriRight = editorUriRight; }, newValue);
} }
public get title(): string { public get title(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.title, undefined); return this.getPropertyOrDefault<string>((props) => props.title, undefined);
} }
public set title(newValue: string) { public set title(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, title) => { properties.title = title; }, newValue); this.setPropertyFromUI<string>((properties, title) => { properties.title = title; }, newValue);
} }
} }

12
src/sql/workbench/browser/modelComponents/divContainer.component.ts
View File

@@ -32,7 +32,7 @@ class DivItem {
</div> </div>
` `
}) })
export default class DivContainer extends ContainerBase<azdata.DivItemLayout> implements IComponent, OnDestroy, AfterViewInit { export default class DivContainer extends ContainerBase<azdata.DivItemLayout, azdata.DivContainerProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
@ViewChild('divContainer', { read: ElementRef }) divContainer; @ViewChild('divContainer', { read: ElementRef }) divContainer;
@@ -126,21 +126,21 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
// CSS-bound properties // CSS-bound properties
public get overflowY(): string { public get overflowY(): string {
return this.getPropertyOrDefault<azdata.DivContainerProperties, any>((props) => props.overflowY, ''); return this.getPropertyOrDefault<any>((props) => props.overflowY, '');
} }
public set overflowY(newValue: string) { public set overflowY(newValue: string) {
this.setPropertyFromUI<azdata.DivContainerProperties, any>((properties, newValue) => { properties.overflowY = newValue; }, newValue); this.setPropertyFromUI<any>((properties, newValue) => { properties.overflowY = newValue; }, newValue);
} }
public get yOffsetChange(): number { public get yOffsetChange(): number {
return this.getPropertyOrDefault<azdata.DivContainerProperties, any>((props) => props.yOffsetChange, 0); return this.getPropertyOrDefault<any>((props) => props.yOffsetChange, 0);
} }
public set yOffsetChange(newValue: number) { public set yOffsetChange(newValue: number) {
this.setPropertyFromUI<azdata.DivContainerProperties, any>((properties, newValue) => { properties.yOffsetChange = newValue; }, newValue); this.setPropertyFromUI<any>((properties, newValue) => { properties.yOffsetChange = newValue; }, newValue);
} }
public get clickable(): boolean { public get clickable(): boolean {
return this.getPropertyOrDefault<azdata.DivContainerProperties, boolean>((props) => props.clickable, false); return this.getPropertyOrDefault<boolean>((props) => props.clickable, false);
} }
public onKey(e: KeyboardEvent) { public onKey(e: KeyboardEvent) {

6
src/sql/workbench/browser/modelComponents/dom.component.ts
View File

@@ -20,7 +20,7 @@ import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dash
template: '', template: '',
selector: 'modelview-dom-component' selector: 'modelview-dom-component'
}) })
export default class DomComponent extends ComponentBase implements IComponent, OnDestroy { export default class DomComponent extends ComponentBase<azdata.DomProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _renderedHtml: string; private _renderedHtml: string;
@@ -82,10 +82,10 @@ export default class DomComponent extends ComponentBase implements IComponent, O
// CSS-bound properties // CSS-bound properties
public get html(): string { public get html(): string {
return this.getPropertyOrDefault<azdata.DomProperties, string>((props) => props.html, ''); return this.getPropertyOrDefault<string>((props) => props.html, '');
} }
public set html(newValue: string) { public set html(newValue: string) {
this.setPropertyFromUI<azdata.DomProperties, string>((properties, html) => { properties.html = html; }, newValue); this.setPropertyFromUI<string>((properties, html) => { properties.html = html; }, newValue);
} }
} }

18
src/sql/workbench/browser/modelComponents/dropdown.component.ts
View File

@@ -32,7 +32,7 @@ import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } fro
</div> </div>
` `
}) })
export default class DropDownComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class DropDownComponent extends ComponentBase<azdata.DropDownProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _editableDropdown: Dropdown; private _editableDropdown: Dropdown;
@@ -186,15 +186,15 @@ export default class DropDownComponent extends ComponentBase implements ICompone
// CSS-bound properties // CSS-bound properties
private get value(): string | azdata.CategoryValue { private get value(): string | azdata.CategoryValue {
return this.getPropertyOrDefault<azdata.DropDownProperties, string | azdata.CategoryValue>((props) => props.value, ''); return this.getPropertyOrDefault<string | azdata.CategoryValue>((props) => props.value, '');
} }
private get editable(): boolean { private get editable(): boolean {
return this.getPropertyOrDefault<azdata.DropDownProperties, boolean>((props) => props.editable, false); return this.getPropertyOrDefault<boolean>((props) => props.editable, false);
} }
private get fireOnTextChange(): boolean { private get fireOnTextChange(): boolean {
return this.getPropertyOrDefault<azdata.DropDownProperties, boolean>((props) => props.fireOnTextChange, false); return this.getPropertyOrDefault<boolean>((props) => props.fireOnTextChange, false);
} }
public getEditableDisplay(): string { public getEditableDisplay(): string {
@@ -206,15 +206,15 @@ export default class DropDownComponent extends ComponentBase implements ICompone
} }
private set value(newValue: string | azdata.CategoryValue) { private set value(newValue: string | azdata.CategoryValue) {
this.setPropertyFromUI<azdata.DropDownProperties, string | azdata.CategoryValue>(this.setValueProperties, newValue); this.setPropertyFromUI<string | azdata.CategoryValue>(this.setValueProperties, newValue);
} }
private get values(): string[] | azdata.CategoryValue[] { private get values(): string[] | azdata.CategoryValue[] {
return this.getPropertyOrDefault<azdata.DropDownProperties, string[] | azdata.CategoryValue[]>((props) => props.values, []); return this.getPropertyOrDefault<string[] | azdata.CategoryValue[]>((props) => props.values, []);
} }
private set values(newValue: string[] | azdata.CategoryValue[]) { private set values(newValue: string[] | azdata.CategoryValue[]) {
this.setPropertyFromUI<azdata.DropDownProperties, string[] | azdata.CategoryValue[]>(this.setValuesProperties, newValue); this.setPropertyFromUI<string[] | azdata.CategoryValue[]>(this.setValuesProperties, newValue);
} }
private setValueProperties(properties: azdata.DropDownProperties, value: string | azdata.CategoryValue): void { private setValueProperties(properties: azdata.DropDownProperties, value: string | azdata.CategoryValue): void {
@@ -226,11 +226,11 @@ export default class DropDownComponent extends ComponentBase implements ICompone
} }
public get required(): boolean { public get required(): boolean {
return this.getPropertyOrDefault<azdata.DropDownProperties, boolean>((props) => props.required, false); return this.getPropertyOrDefault<boolean>((props) => props.required, false);
} }
public set required(newValue: boolean) { public set required(newValue: boolean) {
this.setPropertyFromUI<azdata.DropDownProperties, boolean>((props, value) => props.required = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.required = value, newValue);
} }
public focus(): void { public focus(): void {

22
src/sql/workbench/browser/modelComponents/editor.component.ts
View File

@@ -31,7 +31,7 @@ import { convertSizeToNumber } from 'sql/base/browser/dom';
template: '', template: '',
selector: 'modelview-editor-component' selector: 'modelview-editor-component'
}) })
export default class EditorComponent extends ComponentBase implements IComponent, OnDestroy { export default class EditorComponent extends ComponentBase<azdata.EditorProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _editor: QueryTextEditor; private _editor: QueryTextEditor;
@@ -164,42 +164,42 @@ export default class EditorComponent extends ComponentBase implements IComponent
// CSS-bound properties // CSS-bound properties
public get content(): string { public get content(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.content, undefined); return this.getPropertyOrDefault<string>((props) => props.content, undefined);
} }
public set content(newValue: string) { public set content(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, content) => { properties.content = content; }, newValue); this.setPropertyFromUI<string>((properties, content) => { properties.content = content; }, newValue);
} }
public get languageMode(): string { public get languageMode(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.languageMode, undefined); return this.getPropertyOrDefault<string>((props) => props.languageMode, undefined);
} }
public set languageMode(newValue: string) { public set languageMode(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue); this.setPropertyFromUI<string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
} }
public get isAutoResizable(): boolean { public get isAutoResizable(): boolean {
return this.getPropertyOrDefault<azdata.EditorProperties, boolean>((props) => props.isAutoResizable, false); return this.getPropertyOrDefault<boolean>((props) => props.isAutoResizable, false);
} }
public set isAutoResizable(newValue: boolean) { public set isAutoResizable(newValue: boolean) {
this.setPropertyFromUI<azdata.EditorProperties, boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue); this.setPropertyFromUI<boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue);
} }
public get minimumHeight(): number { public get minimumHeight(): number {
return this.getPropertyOrDefault<azdata.EditorProperties, number>((props) => props.minimumHeight, this._editor.minimumHeight); return this.getPropertyOrDefault<number>((props) => props.minimumHeight, this._editor.minimumHeight);
} }
public set minimumHeight(newValue: number) { public set minimumHeight(newValue: number) {
this.setPropertyFromUI<azdata.EditorProperties, number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue); this.setPropertyFromUI<number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue);
} }
public get editorUri(): string { public get editorUri(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.editorUri, ''); return this.getPropertyOrDefault<string>((props) => props.editorUri, '');
} }
public set editorUri(newValue: string) { public set editorUri(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, editorUri) => { properties.editorUri = editorUri; }, newValue); this.setPropertyFromUI<string>((properties, editorUri) => { properties.editorUri = editorUri; }, newValue);
} }
} }

6
src/sql/workbench/browser/modelComponents/fileBrowserTree.component.ts
View File

@@ -22,7 +22,7 @@ import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } fro
<div #fileBrowserTree [style.width]="getWidth()" [style.height]="getHeight()"></div> <div #fileBrowserTree [style.width]="getWidth()" [style.height]="getHeight()"></div>
` `
}) })
export default class FileBrowserTreeComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class FileBrowserTreeComponent extends ComponentBase<azdata.FileBrowserTreeProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _treeView: FileBrowserTreeView; private _treeView: FileBrowserTreeView;
@@ -124,10 +124,10 @@ export default class FileBrowserTreeComponent extends ComponentBase implements I
// CSS-bound properties // CSS-bound properties
public get ownerUri(): string { public get ownerUri(): string {
return this.getPropertyOrDefault<azdata.FileBrowserTreeProperties, string>((props) => props.ownerUri, ''); return this.getPropertyOrDefault<string>((props) => props.ownerUri, '');
} }
public set ownerUri(newValue: string) { public set ownerUri(newValue: string) {
this.setPropertyFromUI<azdata.FileBrowserTreeProperties, string>((props, value) => props.ownerUri = value, newValue); this.setPropertyFromUI<string>((props, value) => props.ownerUri = value, newValue);
} }
} }

6
src/sql/workbench/browser/modelComponents/groupContainer.component.ts
View File

@@ -36,7 +36,7 @@ import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dash
</div> </div>
` `
}) })
export default class GroupContainer extends ContainerBase<GroupLayout> implements IComponent, OnDestroy, AfterViewInit { export default class GroupContainer extends ContainerBase<GroupLayout, GroupContainerProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
@@ -88,11 +88,11 @@ export default class GroupContainer extends ContainerBase<GroupLayout> implement
} }
public set collapsed(newValue: boolean) { public set collapsed(newValue: boolean) {
this.setPropertyFromUI<GroupContainerProperties, boolean>((properties, value) => { properties.collapsed = value; }, newValue); this.setPropertyFromUI<boolean>((properties, value) => { properties.collapsed = value; }, newValue);
} }
public get collapsed(): boolean { public get collapsed(): boolean {
return this.getPropertyOrDefault<GroupContainerProperties, boolean>((props) => props.collapsed, false); return this.getPropertyOrDefault<boolean>((props) => props.collapsed, false);
} }
private hasHeader(): boolean { private hasHeader(): boolean {

10
src/sql/workbench/browser/modelComponents/hyperlink.component.ts
View File

@@ -21,7 +21,7 @@ import * as DOM from 'vs/base/browser/dom';
selector: 'modelview-hyperlink', selector: 'modelview-hyperlink',
template: `<a [href]="url" [title]="title" [attr.aria-label]="ariaLabel" target="blank">{{label}}</a>` template: `<a [href]="url" [title]="title" [attr.aria-label]="ariaLabel" target="blank">{{label}}</a>`
}) })
export default class HyperlinkComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit { export default class HyperlinkComponent extends TitledComponent<azdata.HyperlinkComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
@@ -50,19 +50,19 @@ export default class HyperlinkComponent extends TitledComponent implements IComp
} }
public set label(newValue: string) { public set label(newValue: string) {
this.setPropertyFromUI<azdata.HyperlinkComponentProperties, string>((properties, value) => { properties.label = value; }, newValue); this.setPropertyFromUI<string>((properties, value) => { properties.label = value; }, newValue);
} }
public get label(): string { public get label(): string {
return this.getPropertyOrDefault<azdata.HyperlinkComponentProperties, string>((props) => props.label, ''); return this.getPropertyOrDefault<string>((props) => props.label, '');
} }
public set url(newValue: string) { public set url(newValue: string) {
this.setPropertyFromUI<azdata.HyperlinkComponentProperties, string>((properties, value) => { properties.url = value; }, newValue); this.setPropertyFromUI<string>((properties, value) => { properties.url = value; }, newValue);
} }
public get url(): string { public get url(): string {
return this.getPropertyOrDefault<azdata.HyperlinkComponentProperties, string>((props) => props.url, ''); return this.getPropertyOrDefault<string>((props) => props.url, '');
} }
public onClick(e: MouseEvent): void { public onClick(e: MouseEvent): void {

3
src/sql/workbench/browser/modelComponents/image.component.ts
View File

@@ -9,6 +9,7 @@ import {
} from '@angular/core'; } from '@angular/core';
import * as DOM from 'vs/base/browser/dom'; import * as DOM from 'vs/base/browser/dom';
import * as azdata from 'azdata';
import { ITitledComponent } from 'sql/workbench/browser/modelComponents/interfaces'; import { ITitledComponent } from 'sql/workbench/browser/modelComponents/interfaces';
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase'; import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces'; import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
@@ -18,7 +19,7 @@ import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dash
template: ` template: `
<div #imageContainer [title]="title" [style.width]="getWidth()" [style.height]="getHeight()" [style.background-size]="getImageSize()">` <div #imageContainer [title]="title" [style.width]="getWidth()" [style.height]="getHeight()" [style.background-size]="getImageSize()">`
}) })
export default class ImageComponent extends ComponentWithIconBase implements ITitledComponent, IComponent, OnDestroy, AfterViewInit { export default class ImageComponent extends ComponentWithIconBase<azdata.ImageComponentProperties> implements ITitledComponent, IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
@ViewChild('imageContainer', { read: ElementRef }) imageContainer: ElementRef; @ViewChild('imageContainer', { read: ElementRef }) imageContainer: ElementRef;

52
src/sql/workbench/browser/modelComponents/inputbox.component.ts
View File

@@ -34,7 +34,7 @@ import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
<div [style.display]="getTextAreaDisplay()" #textarea style="width: 100%"></div> <div [style.display]="getTextAreaDisplay()" #textarea style="width: 100%"></div>
` `
}) })
export default class InputBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _input: InputBox; private _input: InputBox;
@@ -250,95 +250,95 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
// CSS-bound properties // CSS-bound properties
public get value(): string { public get value(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.value, ''); return this.getPropertyOrDefault<string>((props) => props.value, '');
} }
public set value(newValue: string) { public set value(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.value = value, newValue); this.setPropertyFromUI<string>((props, value) => props.value = value, newValue);
} }
public get ariaLive() { public get ariaLive() {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.ariaLive, ''); return this.getPropertyOrDefault<string>((props) => props.ariaLive, '');
} }
public get placeHolder(): string { public get placeHolder(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.placeHolder, ''); return this.getPropertyOrDefault<string>((props) => props.placeHolder, '');
} }
public set placeHolder(newValue: string) { public set placeHolder(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.placeHolder = value, newValue); this.setPropertyFromUI<string>((props, value) => props.placeHolder = value, newValue);
} }
public set columns(newValue: number) { public set columns(newValue: number) {
this.setPropertyFromUI<azdata.InputBoxProperties, number>((props, value) => props.columns = value, newValue); this.setPropertyFromUI<number>((props, value) => props.columns = value, newValue);
} }
public get rows(): number { public get rows(): number {
return this.getPropertyOrDefault<azdata.InputBoxProperties, number>((props) => props.rows, undefined); return this.getPropertyOrDefault<number>((props) => props.rows, undefined);
} }
public get columns(): number { public get columns(): number {
return this.getPropertyOrDefault<azdata.InputBoxProperties, number>((props) => props.columns, undefined); return this.getPropertyOrDefault<number>((props) => props.columns, undefined);
} }
public set rows(newValue: number) { public set rows(newValue: number) {
this.setPropertyFromUI<azdata.InputBoxProperties, number>((props, value) => props.rows = value, newValue); this.setPropertyFromUI<number>((props, value) => props.rows = value, newValue);
} }
public get min(): number { public get min(): number {
return this.getPropertyOrDefault<azdata.InputBoxProperties, number>((props) => props.min, undefined); return this.getPropertyOrDefault<number>((props) => props.min, undefined);
} }
public set min(newValue: number) { public set min(newValue: number) {
this.setPropertyFromUI<azdata.InputBoxProperties, number>((props, value) => props.min = value, newValue); this.setPropertyFromUI<number>((props, value) => props.min = value, newValue);
} }
public get max(): number { public get max(): number {
return this.getPropertyOrDefault<azdata.InputBoxProperties, number>((props) => props.max, undefined); return this.getPropertyOrDefault<number>((props) => props.max, undefined);
} }
public set max(newValue: number) { public set max(newValue: number) {
this.setPropertyFromUI<azdata.InputBoxProperties, number>((props, value) => props.max = value, newValue); this.setPropertyFromUI<number>((props, value) => props.max = value, newValue);
} }
public get inputType(): string { public get inputType(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.inputType, 'text'); return this.getPropertyOrDefault<string>((props) => props.inputType, 'text');
} }
public set inputType(newValue: string) { public set inputType(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.inputType = value, newValue); this.setPropertyFromUI<string>((props, value) => props.inputType = value, newValue);
} }
public get multiline(): boolean { public get multiline(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.multiline, false); return this.getPropertyOrDefault<boolean>((props) => props.multiline, false);
} }
public set multiline(newValue: boolean) { public set multiline(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.multiline = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.multiline = value, newValue);
} }
public get readOnly(): boolean { public get readOnly(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.readOnly, false); return this.getPropertyOrDefault<boolean>((props) => props.readOnly, false);
} }
public set readOnly(newValue: boolean) { public set readOnly(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.readOnly = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.readOnly = value, newValue);
} }
public get required(): boolean { public get required(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.required, false); return this.getPropertyOrDefault<boolean>((props) => props.required, false);
} }
public set required(newValue: boolean) { public set required(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.required = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.required = value, newValue);
} }
public get stopEnterPropagation(): boolean { public get stopEnterPropagation(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.stopEnterPropagation, false); return this.getPropertyOrDefault<boolean>((props) => props.stopEnterPropagation, false);
} }
public set stopEnterPropagation(newValue: boolean) { public set stopEnterPropagation(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.stopEnterPropagation = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.stopEnterPropagation = value, newValue);
} }
public focus(): void { public focus(): void {
@@ -346,10 +346,10 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
} }
public get validationErrorMessage(): string { public get validationErrorMessage(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.validationErrorMessage, ''); return this.getPropertyOrDefault<string>((props) => props.validationErrorMessage, '');
} }
public set validationErrorMessage(newValue: string) { public set validationErrorMessage(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.validationErrorMessage = value, newValue); this.setPropertyFromUI<string>((props, value) => props.validationErrorMessage = value, newValue);
} }
} }

10
src/sql/workbench/browser/modelComponents/listbox.component.ts
View File

@@ -26,7 +26,7 @@ import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } fro
<div #input style="width: 100%"></div> <div #input style="width: 100%"></div>
` `
}) })
export default class ListBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _input: ListBox; private _input: ListBox;
@@ -108,18 +108,18 @@ export default class ListBoxComponent extends ComponentBase implements IComponen
// CSS-bound properties // CSS-bound properties
private get values(): string[] { private get values(): string[] {
return this.getPropertyOrDefault<azdata.ListBoxProperties, string[]>((props) => props.values, undefined); return this.getPropertyOrDefault<string[]>((props) => props.values, undefined);
} }
private set values(newValue: string[]) { private set values(newValue: string[]) {
this.setPropertyFromUI<azdata.ListBoxProperties, string[]>((props, value) => props.values = value, newValue); this.setPropertyFromUI<string[]>((props, value) => props.values = value, newValue);
} }
private get selectedRow(): number { private get selectedRow(): number {
return this.getPropertyOrDefault<azdata.ListBoxProperties, number>((props) => props.selectedRow, undefined); return this.getPropertyOrDefault<number>((props) => props.selectedRow, undefined);
} }
private set selectedRow(newValue: number) { private set selectedRow(newValue: number) {
this.setPropertyFromUI<azdata.ListBoxProperties, number>((props, value) => props.selectedRow = value, newValue); this.setPropertyFromUI<number>((props, value) => props.selectedRow = value, newValue);
} }
} }

12
src/sql/workbench/browser/modelComponents/loadingComponent.component.ts
View File

@@ -26,7 +26,7 @@ import { status } from 'vs/base/browser/ui/aria/aria';
</model-component-wrapper> </model-component-wrapper>
` `
}) })
export default class LoadingComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class LoadingComponent extends ComponentBase<azdata.LoadingComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
private _component: IComponentDescriptor; private _component: IComponentDescriptor;
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@@ -72,24 +72,24 @@ export default class LoadingComponent extends ComponentBase implements IComponen
} }
public get loading(): boolean { public get loading(): boolean {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, boolean>((props) => props.loading, false); return this.getPropertyOrDefault<boolean>((props) => props.loading, false);
} }
public set loading(newValue: boolean) { public set loading(newValue: boolean) {
this.setPropertyFromUI<azdata.LoadingComponentProperties, boolean>((properties, value) => { properties.loading = value; }, newValue); this.setPropertyFromUI<boolean>((properties, value) => { properties.loading = value; }, newValue);
this.layout(); this.layout();
} }
public get showText(): boolean { public get showText(): boolean {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, boolean>((props) => props.showText, false); return this.getPropertyOrDefault<boolean>((props) => props.showText, false);
} }
public get loadingText(): string { public get loadingText(): string {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, string>((props) => props.loadingText, localize('loadingMessage', "Loading")); return this.getPropertyOrDefault<string>((props) => props.loadingText, localize('loadingMessage', "Loading"));
} }
public get loadingCompletedText(): string { public get loadingCompletedText(): string {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, string>((props) => props.loadingCompletedText, localize('loadingCompletedMessage', "Loading completed")); return this.getPropertyOrDefault<string>((props) => props.loadingCompletedText, localize('loadingCompletedMessage', "Loading completed"));
} }
public addToContainer(componentDescriptor: IComponentDescriptor): void { public addToContainer(componentDescriptor: IComponentDescriptor): void {

6
src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts
View File

@@ -22,7 +22,7 @@ import { PROPERTIES_CONTAINER_PROPERTY_NAME, PROPERTIES_CONTAINER_PROPERTY_VALUE
<properties-container> </properties-container> <properties-container> </properties-container>
` `
}) })
export default class PropertiesContainerComponent extends ComponentBase implements IComponent, OnDestroy { export default class PropertiesContainerComponent extends ComponentBase<azdata.PropertiesContainerComponentProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
@@ -48,11 +48,11 @@ export default class PropertiesContainerComponent extends ComponentBase implemen
} }
public get propertyItems(): PropertyItem[] { public get propertyItems(): PropertyItem[] {
return this.getPropertyOrDefault<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props) => props.propertyItems, []); return this.getPropertyOrDefault<azdata.PropertiesContainerItem[]>((props) => props.propertyItems, []);
} }
public set propertyItems(newValue: azdata.PropertiesContainerItem[]) { public set propertyItems(newValue: azdata.PropertiesContainerItem[]) {
this.setPropertyFromUI<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props, value) => props.propertyItems = value, newValue); this.setPropertyFromUI<azdata.PropertiesContainerItem[]>((props, value) => props.propertyItems = value, newValue);
this._propertiesContainer.propertyItems = newValue; this._propertiesContainer.propertyItems = newValue;
} }
} }

18
src/sql/workbench/browser/modelComponents/radioButton.component.ts
View File

@@ -23,7 +23,7 @@ import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } fro
</div> </div>
` `
}) })
export default class RadioButtonComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class RadioButtonComponent extends ComponentBase<azdata.RadioButtonProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _input: RadioButton; private _input: RadioButton;
@@ -80,19 +80,19 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
// CSS-bound properties // CSS-bound properties
public get checked(): boolean { public get checked(): boolean {
return this.getPropertyOrDefault<azdata.RadioButtonProperties, boolean>((props) => props.checked, false); return this.getPropertyOrDefault<boolean>((props) => props.checked, false);
} }
public set checked(newValue: boolean) { public set checked(newValue: boolean) {
this.setPropertyFromUI<azdata.RadioButtonProperties, boolean>((properties, value) => { properties.checked = value; }, newValue); this.setPropertyFromUI<boolean>((properties, value) => { properties.checked = value; }, newValue);
} }
public set value(newValue: string) { public set value(newValue: string) {
this.setPropertyFromUI<azdata.RadioButtonProperties, string>((properties, value) => { properties.value = value; }, newValue); this.setPropertyFromUI<string>((properties, value) => { properties.value = value; }, newValue);
} }
public get value(): string { public get value(): string {
return this.getPropertyOrDefault<azdata.RadioButtonProperties, string>((props) => props.value, ''); return this.getPropertyOrDefault<string>((props) => props.value, '');
} }
public getLabel(): string { public getLabel(): string {
@@ -100,19 +100,19 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
} }
public get label(): string { public get label(): string {
return this.getPropertyOrDefault<azdata.RadioButtonProperties, string>((props) => props.label, ''); return this.getPropertyOrDefault<string>((props) => props.label, '');
} }
public set label(newValue: string) { public set label(newValue: string) {
this.setPropertyFromUI<azdata.RadioButtonProperties, string>((properties, label) => { properties.label = label; }, newValue); this.setPropertyFromUI<string>((properties, label) => { properties.label = label; }, newValue);
} }
public get name(): string { public get name(): string {
return this.getPropertyOrDefault<azdata.RadioButtonProperties, string>((props) => props.name, ''); return this.getPropertyOrDefault<string>((props) => props.name, '');
} }
public set name(newValue: string) { public set name(newValue: string) {
this.setPropertyFromUI<azdata.RadioButtonProperties, string>((properties, label) => { properties.name = label; }, newValue); this.setPropertyFromUI<string>((properties, label) => { properties.name = label; }, newValue);
} }
public focus(): void { public focus(): void {

22
src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts
View File

@@ -19,7 +19,7 @@ import { deepClone } from 'vs/base/common/objects';
@Component({ @Component({
templateUrl: decodeURI(require.toUrl('./radioCardGroup.component.html')) templateUrl: decodeURI(require.toUrl('./radioCardGroup.component.html'))
}) })
export default class RadioCardGroup extends ComponentBase implements IComponent, OnDestroy { export default class RadioCardGroup extends ComponentBase<azdata.RadioCardGroupComponentProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
@ViewChildren('cardDiv') cardElements: QueryList<ElementRef>; @ViewChildren('cardDiv') cardElements: QueryList<ElementRef>;
@@ -96,38 +96,34 @@ export default class RadioCardGroup extends ComponentBase implements IComponent,
} }
public get cards(): azdata.RadioCard[] { public get cards(): azdata.RadioCard[] {
return this.getSpecficProperties().cards ?? []; return this.getProperties().cards ?? [];
} }
public get cardWidth(): string | undefined { public get cardWidth(): string | undefined {
return this.getSpecficProperties().cardWidth ?? undefined; return this.getProperties().cardWidth ?? undefined;
} }
public get cardHeight(): string | undefined { public get cardHeight(): string | undefined {
return this.getSpecficProperties().cardHeight ?? undefined; return this.getProperties().cardHeight ?? undefined;
} }
public get iconWidth(): string | undefined { public get iconWidth(): string | undefined {
return this.getSpecficProperties().iconWidth ?? undefined; return this.getProperties().iconWidth ?? undefined;
} }
public get iconHeight(): string | undefined { public get iconHeight(): string | undefined {
return this.getSpecficProperties().iconHeight ?? undefined; return this.getProperties().iconHeight ?? undefined;
} }
public get selectedCardId(): string | undefined { public get selectedCardId(): string | undefined {
return this.getSpecficProperties().selectedCardId ?? undefined; return this.getProperties().selectedCardId ?? undefined;
} }
public get orientation(): string { public get orientation(): string {
const x = this.getSpecficProperties().orientation ?? 'horizontal'; const x = this.getProperties().orientation ?? 'horizontal';
return x; return x;
} }
private getSpecficProperties(): azdata.RadioCardGroupComponentProperties {
return this.getProperties<azdata.RadioCardGroupComponentProperties>();
}
public getIconClass(cardId: string): string { public getIconClass(cardId: string): string {
if (!this.iconClasses[cardId]) { if (!this.iconClasses[cardId]) {
this.iconClasses[cardId] = `cardIcon icon ${createIconCssClass(this.getCardById(cardId).icon)}`; this.iconClasses[cardId] = `cardIcon icon ${createIconCssClass(this.getCardById(cardId).icon)}`;
@@ -149,7 +145,7 @@ export default class RadioCardGroup extends ComponentBase implements IComponent,
} }
const cardElement = this.getCardElement(cardId); const cardElement = this.getCardElement(cardId);
cardElement.nativeElement.focus(); cardElement.nativeElement.focus();
this.setPropertyFromUI<azdata.RadioCardGroupComponentProperties, string | undefined>((props, value) => props.selectedCardId = value, cardId); this.setPropertyFromUI<string | undefined>((props, value) => props.selectedCardId = value, cardId);
this._changeRef.detectChanges(); this._changeRef.detectChanges();
this.fireEvent({ this.fireEvent({
eventType: ComponentEventType.onDidChange, eventType: ComponentEventType.onDidChange,

3
src/sql/workbench/browser/modelComponents/separator.component.ts
View File

@@ -7,6 +7,7 @@ import {
Component, Input, Inject, ChangeDetectorRef, forwardRef, Component, Input, Inject, ChangeDetectorRef, forwardRef,
ViewChild, ElementRef, OnDestroy, AfterViewInit ViewChild, ElementRef, OnDestroy, AfterViewInit
} from '@angular/core'; } from '@angular/core';
import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
@@ -19,7 +20,7 @@ import { Separator } from 'sql/base/browser/ui/separator/separator';
<div #separator> </div> <div #separator> </div>
` `
}) })
export default class SeparatorComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class SeparatorComponent extends ComponentBase<azdata.SeparatorComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
private _separator: Separator; private _separator: Separator;
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;

9
src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts
View File

@@ -3,10 +3,9 @@
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/flexContainer'; import 'vs/css!./media/flexContainer';
import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy } from '@angular/core'; import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy } from '@angular/core';
import { FlexItemLayout, SplitViewLayout } from 'azdata'; import { FlexItemLayout, SplitViewLayout, SplitViewContainer } from 'azdata';
import { FlexItem } from './flexContainer.component'; import { FlexItem } from './flexContainer.component';
import { ContainerBase, ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; import { ContainerBase, ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { Event } from 'vs/base/common/event'; import { Event } from 'vs/base/common/event';
@@ -22,7 +21,7 @@ class SplitPane implements IView {
maximumSize: number; maximumSize: number;
onDidChange: Event<number> = Event.None; onDidChange: Event<number> = Event.None;
size: number; size: number;
component: ComponentBase; component: ComponentBase<SplitViewContainer>;
layout(size: number): void { layout(size: number): void {
this.size = size; this.size = size;
try { try {
@@ -48,7 +47,7 @@ class SplitPane implements IView {
` `
}) })
export default class SplitViewContainer extends ContainerBase<FlexItemLayout> implements IComponent, OnDestroy { export default class SplitViewContainerImpl extends ContainerBase<FlexItemLayout> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _flexFlow: string; private _flexFlow: string;
@@ -87,7 +86,7 @@ export default class SplitViewContainer extends ContainerBase<FlexItemLayout> im
} }
private GetCorrespondingView(component: IComponent, orientation: Orientation): IView { private GetCorrespondingView(component: IComponent, orientation: Orientation): IView {
let c = component as ComponentBase; let c = component as ComponentBase<SplitViewContainer>;
let basicView: SplitPane = new SplitPane(); let basicView: SplitPane = new SplitPane();
basicView.orientation = orientation; basicView.orientation = orientation;
basicView.element = c.getHtml(); basicView.element = c.getHtml();

32
src/sql/workbench/browser/modelComponents/table.component.ts
View File

@@ -42,7 +42,7 @@ export enum ColumnSizingMode {
<div #table style="height:100%;" [style.font-size]="fontSize" [style.width]="width"></div> <div #table style="height:100%;" [style.font-size]="fontSize" [style.width]="width"></div>
` `
}) })
export default class TableComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class TableComponent extends ComponentBase<azdata.TableComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _table: Table<Slick.SlickData>; private _table: Table<Slick.SlickData>;
@@ -368,62 +368,62 @@ export default class TableComponent extends ComponentBase implements IComponent,
// CSS-bound properties // CSS-bound properties
public get data(): any[][] { public get data(): any[][] {
return this.getPropertyOrDefault<azdata.TableComponentProperties, any[]>((props) => props.data, []); return this.getPropertyOrDefault<any[]>((props) => props.data, []);
} }
public set data(newValue: any[][]) { public set data(newValue: any[][]) {
this.setPropertyFromUI<azdata.TableComponentProperties, any[][]>((props, value) => props.data = value, newValue); this.setPropertyFromUI<any[][]>((props, value) => props.data = value, newValue);
} }
public get columns(): string[] | azdata.TableColumn[] { public get columns(): string[] | azdata.TableColumn[] {
return this.getPropertyOrDefault<azdata.TableComponentProperties, string[]>((props) => props.columns, []); return this.getPropertyOrDefault<string[] | azdata.TableColumn[]>((props) => props.columns, []);
} }
public get fontSize(): number | string { public get fontSize(): number | string {
return this.getPropertyOrDefault<azdata.TableComponentProperties, number | string>((props) => props.fontSize, ''); return this.getPropertyOrDefault<number | string>((props) => props.fontSize, '');
} }
public set columns(newValue: string[] | azdata.TableColumn[]) { public set columns(newValue: string[] | azdata.TableColumn[]) {
this.setPropertyFromUI<azdata.TableComponentProperties, string[] | azdata.TableColumn[]>((props, value) => props.columns = value, newValue); this.setPropertyFromUI<string[] | azdata.TableColumn[]>((props, value) => props.columns = value, newValue);
} }
public get selectedRows(): number[] { public get selectedRows(): number[] {
return this.getPropertyOrDefault<azdata.TableComponentProperties, number[]>((props) => props.selectedRows, []); return this.getPropertyOrDefault<number[]>((props) => props.selectedRows, []);
} }
public set selectedRows(newValue: number[]) { public set selectedRows(newValue: number[]) {
this.setPropertyFromUI<azdata.TableComponentProperties, number[]>((props, value) => props.selectedRows = value, newValue); this.setPropertyFromUI<number[]>((props, value) => props.selectedRows = value, newValue);
} }
public get forceFitColumns() { public get forceFitColumns() {
return this.getPropertyOrDefault<azdata.TableComponentProperties, ColumnSizingMode>((props) => props.forceFitColumns, ColumnSizingMode.ForceFit); return this.getPropertyOrDefault<ColumnSizingMode>((props) => props.forceFitColumns, ColumnSizingMode.ForceFit);
} }
public get title() { public get title() {
return this.getPropertyOrDefault<azdata.TableComponentProperties, string>((props) => props.title, ''); return this.getPropertyOrDefault<string>((props) => props.title, '');
} }
public get ariaRowCount(): number { public get ariaRowCount(): number {
return this.getPropertyOrDefault<azdata.TableComponentProperties, number>((props) => props.ariaRowCount, -1); return this.getPropertyOrDefault<number>((props) => props.ariaRowCount, -1);
} }
public get ariaColumnCount(): number { public get ariaColumnCount(): number {
return this.getPropertyOrDefault<azdata.TableComponentProperties, number>((props) => props.ariaColumnCount, -1); return this.getPropertyOrDefault<number>((props) => props.ariaColumnCount, -1);
} }
public set moveFocusOutWithTab(newValue: boolean) { public set moveFocusOutWithTab(newValue: boolean) {
this.setPropertyFromUI<azdata.TableComponentProperties, boolean>((props, value) => props.moveFocusOutWithTab = value, newValue); this.setPropertyFromUI<boolean>((props, value) => props.moveFocusOutWithTab = value, newValue);
} }
public get moveFocusOutWithTab(): boolean { public get moveFocusOutWithTab(): boolean {
return this.getPropertyOrDefault<azdata.TableComponentProperties, boolean>((props) => props.moveFocusOutWithTab, false); return this.getPropertyOrDefault<boolean>((props) => props.moveFocusOutWithTab, false);
} }
public get updateCells(): azdata.TableCell[] { public get updateCells(): azdata.TableCell[] {
return this.getPropertyOrDefault<azdata.TableComponentProperties, azdata.TableCell[]>((props) => props.updateCells, undefined); return this.getPropertyOrDefault<azdata.TableCell[]>((props) => props.updateCells, undefined);
} }
public set updateCells(newValue: azdata.TableCell[]) { public set updateCells(newValue: azdata.TableCell[]) {
this.setPropertyFromUI<azdata.TableComponentProperties, azdata.TableCell[]>((properties, value) => { properties.updateCells = value; }, newValue); this.setPropertyFromUI<azdata.TableCell[]>((properties, value) => { properties.updateCells = value; }, newValue);
} }
} }

16
src/sql/workbench/browser/modelComponents/text.component.ts
View File

@@ -37,7 +37,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
</p> </p>
</ng-template>` </ng-template>`
}) })
export default class TextComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit { export default class TextComponent extends TitledComponent<azdata.TextComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
@ViewChild('textContainer', { read: ElementRef }) textContainer: ElementRef; @ViewChild('textContainer', { read: ElementRef }) textContainer: ElementRef;
@@ -71,27 +71,27 @@ export default class TextComponent extends TitledComponent implements IComponent
} }
public set value(newValue: string) { public set value(newValue: string) {
this.setPropertyFromUI<azdata.TextComponentProperties, string>((properties, value) => { properties.value = value; }, newValue); this.setPropertyFromUI<string>((properties, value) => { properties.value = value; }, newValue);
} }
public get value(): string { public get value(): string {
return this.getPropertyOrDefault<azdata.TextComponentProperties, string>((props) => props.value, ''); return this.getPropertyOrDefault<string>((props) => props.value, '');
} }
public set description(newValue: string) { public set description(newValue: string) {
this.setPropertyFromUI<azdata.TextComponentProperties, string>((properties, value) => { properties.description = value; }, newValue); this.setPropertyFromUI<string>((properties, value) => { properties.description = value; }, newValue);
} }
public get description(): string { public get description(): string {
return this.getPropertyOrDefault<azdata.TextComponentProperties, string>((props) => props.description, ''); return this.getPropertyOrDefault<string>((props) => props.description, '');
} }
public set requiredIndicator(newValue: boolean) { public set requiredIndicator(newValue: boolean) {
this.setPropertyFromUI<azdata.TextComponentProperties, boolean>((properties, value) => { properties.requiredIndicator = value; }, newValue); this.setPropertyFromUI<boolean>((properties, value) => { properties.requiredIndicator = value; }, newValue);
} }
public get requiredIndicator(): boolean { public get requiredIndicator(): boolean {
return this.getPropertyOrDefault<azdata.TextComponentProperties, boolean>((props) => props.requiredIndicator, false); return this.getPropertyOrDefault<boolean>((props) => props.requiredIndicator, false);
} }
public setProperties(properties: { [key: string]: any; }): void { public setProperties(properties: { [key: string]: any; }): void {
@@ -102,7 +102,7 @@ export default class TextComponent extends TitledComponent implements IComponent
public updateText(): void { public updateText(): void {
DOM.clearNode((<HTMLElement>this.textContainer.nativeElement)); DOM.clearNode((<HTMLElement>this.textContainer.nativeElement));
const links = this.getPropertyOrDefault<azdata.TextComponentProperties, azdata.LinkArea[]>((props) => props.links, []); const links = this.getPropertyOrDefault<azdata.LinkArea[]>((props) => props.links, []);
// The text may contain link placeholders so go through and create those and insert them as needed now // The text may contain link placeholders so go through and create those and insert them as needed now
let text = this.value; let text = this.value;
for (let i: number = 0; i < links.length; i++) { for (let i: number = 0; i < links.length; i++) {

6
src/sql/workbench/browser/modelComponents/titledComponent.ts
View File

@@ -11,7 +11,7 @@ import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
export abstract class TitledComponent extends ComponentBase implements ITitledComponent { export abstract class TitledComponent<T extends azdata.TitledComponentProperties> extends ComponentBase<T> implements ITitledComponent {
constructor( constructor(
protected _changeRef: ChangeDetectorRef, protected _changeRef: ChangeDetectorRef,
@@ -20,10 +20,10 @@ export abstract class TitledComponent extends ComponentBase implements ITitledCo
} }
public get title(): string { public get title(): string {
return this.getPropertyOrDefault<azdata.TitledComponentProperties, string>((props) => props.title, ''); return this.getPropertyOrDefault<string>((props) => props.title, '');
} }
public set title(newTitle: string) { public set title(newTitle: string) {
this.setPropertyFromUI<azdata.TitledComponentProperties, string>((properties, title) => { properties.title = title; }, newTitle); this.setPropertyFromUI<string>((properties, title) => { properties.title = title; }, newTitle);
} }
} }

6
src/sql/workbench/browser/modelComponents/tree.component.ts
View File

@@ -45,7 +45,7 @@ class Root implements ITreeComponentItem {
<div #input style="width: 100%;height:100%"></div> <div #input style="width: 100%;height:100%"></div>
` `
}) })
export default class TreeComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { export default class TreeComponent extends ComponentBase<azdata.TreeProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
private _tree: Tree; private _tree: Tree;
@@ -163,10 +163,10 @@ export default class TreeComponent extends ComponentBase implements IComponent,
} }
public get withCheckbox(): boolean { public get withCheckbox(): boolean {
return this.getPropertyOrDefault<azdata.TreeProperties, boolean>((props) => props.withCheckbox, false); return this.getPropertyOrDefault<boolean>((props) => props.withCheckbox, false);
} }
public set withCheckbox(newValue: boolean) { public set withCheckbox(newValue: boolean) {
this.setPropertyFromUI<azdata.TreeProperties, boolean>((properties, value) => { properties.withCheckbox = value; }, newValue); this.setPropertyFromUI<boolean>((properties, value) => { properties.withCheckbox = value; }, newValue);
} }
} }

18
src/sql/workbench/contrib/modelView/browser/webview.component.ts
View File

@@ -28,11 +28,15 @@ function reviveWebviewOptions(options: vscode.WebviewOptions): vscode.WebviewOpt
}; };
} }
interface WebViewProperties extends azdata.WebViewProperties {
extensionLocation: UriComponents
}
@Component({ @Component({
template: '', template: '',
selector: 'modelview-webview-component' selector: 'modelview-webview-component'
}) })
export default class WebViewComponent extends ComponentBase implements IComponent, OnDestroy { export default class WebViewComponent extends ComponentBase<WebViewProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor; @Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore; @Input() modelStore: IModelStore;
@@ -172,27 +176,27 @@ export default class WebViewComponent extends ComponentBase implements IComponen
// CSS-bound properties // CSS-bound properties
public get message(): any { public get message(): any {
return this.getPropertyOrDefault<azdata.WebViewProperties, any>((props) => props.message, undefined); return this.getPropertyOrDefault<any>((props) => props.message, undefined);
} }
public set message(newValue: any) { public set message(newValue: any) {
this.setPropertyFromUI<azdata.WebViewProperties, any>((properties, message) => { properties.message = message; }, newValue); this.setPropertyFromUI<any>((properties, message) => { properties.message = message; }, newValue);
} }
public get html(): string { public get html(): string {
return this.getPropertyOrDefault<azdata.WebViewProperties, string>((props) => props.html, undefined); return this.getPropertyOrDefault<string>((props) => props.html, undefined);
} }
public set html(newValue: string) { public set html(newValue: string) {
this.setPropertyFromUI<azdata.WebViewProperties, string>((properties, html) => { properties.html = html; }, newValue); this.setPropertyFromUI<string>((properties, html) => { properties.html = html; }, newValue);
} }
public get options(): vscode.WebviewOptions { public get options(): vscode.WebviewOptions {
return this.getPropertyOrDefault<azdata.WebViewProperties, vscode.WebviewOptions>((props) => props.options, undefined); return this.getPropertyOrDefault<vscode.WebviewOptions>((props) => props.options, undefined);
} }
public get extensionLocation(): UriComponents { public get extensionLocation(): UriComponents {
return this.getPropertyOrDefault<azdata.WebViewProperties, UriComponents>((props) => props.extensionLocation, undefined); return this.getPropertyOrDefault<UriComponents>((props) => props.extensionLocation, undefined);
} }
private get extensionLocationUri(): URI { private get extensionLocationUri(): URI {

3
src/sql/workbench/test/electron-browser/modalComponents/componentBase.test.ts
View File

@@ -3,6 +3,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
import * as azdata from 'azdata';
import * as assert from 'assert'; import * as assert from 'assert';
import { ComponentBase, ContainerBase, ItemDescriptor } from 'sql/workbench/browser/modelComponents/componentBase'; import { ComponentBase, ContainerBase, ItemDescriptor } from 'sql/workbench/browser/modelComponents/componentBase';
import { ModelStore } from 'sql/workbench/browser/modelComponents/modelStore'; import { ModelStore } from 'sql/workbench/browser/modelComponents/modelStore';
@@ -10,7 +11,7 @@ import { ChangeDetectorRef } from '@angular/core';
import { IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces'; import { IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
class TestComponent extends ComponentBase { class TestComponent extends ComponentBase<azdata.ComponentProperties> {
public descriptor: IComponentDescriptor; public descriptor: IComponentDescriptor;
constructor(public modelStore: IModelStore, id: string) { constructor(public modelStore: IModelStore, id: string) {