Genericify components (#12158)

* 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

View File

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

View File

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

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) {
}
component(): T {
return this._component;
}
withProperties<U>(properties: U): azdata.ComponentBuilder<T> {
withProperties<U>(properties: U): azdata.ComponentBuilder<T, TPropertyBag> {
this._component.updateProperties(properties);
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;
}
}
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 {
this.component().component = component;
return this;
@@ -456,12 +461,12 @@ export function createViewContext(): TestContext {
let onClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
let form: azdata.FormContainer = new TestFormContainer();
let textBuilder: azdata.ComponentBuilder<azdata.TextComponent> = new TestComponentBuilder(new TestTextComponent());
let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent> = new TestComponentBuilder(new TestButtonComponent(onClick));
let radioButtonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent> = new TestComponentBuilder(new TestRadioButtonComponent(onClick));
let declarativeTableBuilder: azdata.ComponentBuilder<azdata.DeclarativeTableComponent> = new TestComponentBuilder(new TestDeclarativeTableComponent(onClick));
let textBuilder: azdata.ComponentBuilder<azdata.TextComponent, azdata.TextComponentProperties> = new TestComponentBuilder(new TestTextComponent());
let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent, azdata.ButtonProperties> = new TestComponentBuilder(new TestButtonComponent(onClick));
let radioButtonBuilder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = new TestComponentBuilder(new TestRadioButtonComponent(onClick));
let declarativeTableBuilder: azdata.ComponentBuilder<azdata.DeclarativeTableComponent, azdata.DeclarativeTableProperties> = new TestComponentBuilder(new TestDeclarativeTableComponent(onClick));
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({}, {
component: () => form,
@@ -473,7 +478,8 @@ export function createViewContext(): TestContext {
withProperties: () => formBuilder,
withValidation: () => formBuilder,
withItems: () => formBuilder,
withLayout: () => formBuilder
withLayout: () => formBuilder,
withProps: () => formBuilder
});
let div: azdata.DivContainer = new TestDivContainer();
@@ -487,7 +493,8 @@ export function createViewContext(): TestContext {
withProperties: () => divBuilder,
withValidation: () => divBuilder,
withItems: () => divBuilder,
withLayout: () => divBuilder
withLayout: () => divBuilder,
withProps: () => divBuilder
});
let flex: azdata.FlexContainer = new TestFlexContainer();
@@ -501,7 +508,8 @@ export function createViewContext(): TestContext {
withProperties: () => flexBuilder,
withValidation: () => flexBuilder,
withItems: () => flexBuilder,
withLayout: () => flexBuilder
withLayout: () => flexBuilder,
withProps: () => flexBuilder
});
let view: azdata.ModelView = {

View File

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

View File

@@ -7,7 +7,7 @@ import * as vscode from 'vscode';
import { OptionsInfo, FieldInfo } from '../interfaces';
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 _optionsLoadingBuilder: azdata.LoadingComponentBuilder;
private _onValueChangedEmitter: vscode.EventEmitter<void> = new vscode.EventEmitter();
@@ -21,11 +21,15 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde
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);
}
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);
}