diff --git a/extensions/arc/package.json b/extensions/arc/package.json index dbb9c76031..ef33a9b14a 100644 --- a/extensions/arc/package.json +++ b/extensions/arc/package.json @@ -1076,7 +1076,7 @@ "@types/sinon": "^9.0.4", "@types/uuid": "^8.3.0", "@types/yamljs": "^0.2.31", - "azdata-test": "^1.0.0", + "azdata-test": "^1.1.1", "mocha": "^5.2.0", "mocha-junit-reporter": "^1.17.0", "mocha-multi-reporters": "^1.1.7", diff --git a/extensions/arc/yarn.lock b/extensions/arc/yarn.lock index f087d7ab37..c8efb37cb4 100644 --- a/extensions/arc/yarn.lock +++ b/extensions/arc/yarn.lock @@ -345,10 +345,10 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e" integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug== -azdata-test@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.0.0.tgz#b8821a5a313e6919dac8b8ef56f22dc8592cad2c" - integrity sha512-/QZkHeVKc0HbJtx45nFXNQLTe3lY8la37Re+YfBIzybMIul3FmBszwIyq9/MPHMhrjkvf5xDkEF+CuSlI4KeIA== +azdata-test@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.1.1.tgz#0feb13ec01397841f7bbce0ad25a41e4a3afb5b5" + integrity sha512-+jZ5/4Orqt5Q2MLPqmV+iQjGYxG5FK4pC3UqTOPdSzlbs0JQhOXckC8Hmw8ZOS0N6Cn7mNDCpfaqEU9coTyVsw== dependencies: http-proxy-agent "^2.1.0" https-proxy-agent "^2.2.4" diff --git a/extensions/dacpac/src/test/testContext.ts b/extensions/dacpac/src/test/testContext.ts index 66505af22a..c9216c80de 100644 --- a/extensions/dacpac/src/test/testContext.ts +++ b/extensions/dacpac/src/test/testContext.ts @@ -88,6 +88,7 @@ export function createViewContext(): ViewTestContext { label: '', checked: false, onDidClick: onClick.event, + onDidChangeCheckedState: onValueChanged.event }); return button; }; diff --git a/extensions/machine-learning/src/test/views/utils.ts b/extensions/machine-learning/src/test/views/utils.ts index 4656d9c68a..b804cda025 100644 --- a/extensions/machine-learning/src/test/views/utils.ts +++ b/extensions/machine-learning/src/test/views/utils.ts @@ -16,6 +16,7 @@ export interface ViewTestContext { export function createViewContext(): ViewTestContext { let onClick: vscode.EventEmitter = new vscode.EventEmitter(); + let onChange: vscode.EventEmitter = new vscode.EventEmitter(); let apiWrapper = TypeMoq.Mock.ofType(ApiWrapper); let componentBase: azdata.Component = { @@ -38,7 +39,8 @@ export function createViewContext(): ViewTestContext { }); let radioButton: azdata.RadioButtonComponent = Object.assign({}, componentBase, { checked: true, - onDidClick: onClick.event + onDidClick: onClick.event, + onDidChangeCheckedState: onChange.event, }); let checkbox: azdata.CheckBoxComponent = Object.assign({}, componentBase, { checked: true, diff --git a/extensions/notebook/src/test/common.ts b/extensions/notebook/src/test/common.ts index 9f48dfaea9..c5cf8b9a0e 100644 --- a/extensions/notebook/src/test/common.ts +++ b/extensions/notebook/src/test/common.ts @@ -359,10 +359,11 @@ class TestButtonComponent extends TestComponentBase implements azdata.ButtonComp } class TestRadioButtonComponent extends TestComponentBase implements azdata.RadioButtonComponent { - constructor(private onClick: vscode.EventEmitter) { + constructor(private onClick: vscode.EventEmitter, private onChange: vscode.EventEmitter) { super(); } onDidClick: vscode.Event = this.onClick.event; + onDidChangeCheckedState: vscode.Event = this.onChange.event; } class TestTextComponent extends TestComponentBase implements azdata.TextComponent { @@ -460,11 +461,12 @@ class TestLoadingBuilder extends TestComponentBuilder = new vscode.EventEmitter(); + let onChange: vscode.EventEmitter = new vscode.EventEmitter(); let form: azdata.FormContainer = new TestFormContainer(); let textBuilder: azdata.ComponentBuilder = new TestComponentBuilder(new TestTextComponent()); let buttonBuilder: azdata.ComponentBuilder = new TestComponentBuilder(new TestButtonComponent(onClick)); - let radioButtonBuilder: azdata.ComponentBuilder = new TestComponentBuilder(new TestRadioButtonComponent(onClick)); + let radioButtonBuilder: azdata.ComponentBuilder = new TestComponentBuilder(new TestRadioButtonComponent(onClick, onChange)); let declarativeTableBuilder: azdata.ComponentBuilder = new TestComponentBuilder(new TestDeclarativeTableComponent(onClick)); let loadingBuilder: azdata.LoadingComponentBuilder = new TestLoadingBuilder(new TestLoadingComponent()); let dropdownBuilder: azdata.ComponentBuilder = new TestComponentBuilder(new TestDropdownComponent(onClick)); diff --git a/extensions/notebook/src/test/managePackages/managePackagesDialog.test.ts b/extensions/notebook/src/test/managePackages/managePackagesDialog.test.ts index e4d5973dc8..f05ec43fa5 100644 --- a/extensions/notebook/src/test/managePackages/managePackagesDialog.test.ts +++ b/extensions/notebook/src/test/managePackages/managePackagesDialog.test.ts @@ -117,6 +117,7 @@ describe('Manage Package Dialog', () => { dialog.setup(x => x.model).returns(() => model.object); let onClick: vscode.EventEmitter = new vscode.EventEmitter(); + let onChange: vscode.EventEmitter = new vscode.EventEmitter(); let componentBase: azdata.Component = { id: '', @@ -132,8 +133,10 @@ describe('Manage Package Dialog', () => { onDidClick: onClick.event }); let radioButton: azdata.RadioButtonComponent = Object.assign({}, componentBase, { - onDidClick: onClick.event + onDidClick: onClick.event, + onDidChangeCheckedState: onChange.event }); + const components: azdata.Component[] = []; let container = { clearItems: () => { }, diff --git a/extensions/resource-deployment/package.json b/extensions/resource-deployment/package.json index ce4515e82c..c617105a5f 100644 --- a/extensions/resource-deployment/package.json +++ b/extensions/resource-deployment/package.json @@ -524,7 +524,7 @@ "@types/semver": "^7.3.1", "@types/sinon": "^9.0.8", "@types/yamljs": "0.2.30", - "azdata-test": "^1.0.0", + "azdata-test": "^1.1.1", "mocha": "^5.2.0", "mocha-junit-reporter": "^1.17.0", "mocha-multi-reporters": "^1.1.7", diff --git a/extensions/resource-deployment/yarn.lock b/extensions/resource-deployment/yarn.lock index 879502a620..b2825df821 100644 --- a/extensions/resource-deployment/yarn.lock +++ b/extensions/resource-deployment/yarn.lock @@ -285,10 +285,10 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" -azdata-test@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.0.0.tgz#b8821a5a313e6919dac8b8ef56f22dc8592cad2c" - integrity sha512-/QZkHeVKc0HbJtx45nFXNQLTe3lY8la37Re+YfBIzybMIul3FmBszwIyq9/MPHMhrjkvf5xDkEF+CuSlI4KeIA== +azdata-test@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.1.1.tgz#0feb13ec01397841f7bbce0ad25a41e4a3afb5b5" + integrity sha512-+jZ5/4Orqt5Q2MLPqmV+iQjGYxG5FK4pC3UqTOPdSzlbs0JQhOXckC8Hmw8ZOS0N6Cn7mNDCpfaqEU9coTyVsw== dependencies: http-proxy-agent "^2.1.0" https-proxy-agent "^2.2.4" diff --git a/extensions/schema-compare/src/test/testContext.ts b/extensions/schema-compare/src/test/testContext.ts index 35e939541f..12e1090e93 100644 --- a/extensions/schema-compare/src/test/testContext.ts +++ b/extensions/schema-compare/src/test/testContext.ts @@ -66,6 +66,7 @@ export function createViewContext(): ViewTestContext { let switchDirectionButtonOnClick: vscode.EventEmitter = new vscode.EventEmitter(); let cancelCompareButtonOnClick: vscode.EventEmitter = new vscode.EventEmitter(); let generateScriptButtonOnClick: vscode.EventEmitter = new vscode.EventEmitter(); + let onChangeCheckedState: vscode.EventEmitter = new vscode.EventEmitter(); let componentBase: azdata.Component = { id: '', @@ -147,8 +148,9 @@ export function createViewContext(): ViewTestContext { let radioButton: azdata.RadioButtonComponent = Object.assign({}, componentBase, { checked: false, onDidClick: onClick.event, + onDidChangeCheckedState: onChangeCheckedState.event }); - let radioButtonBuilder: azdata.ComponentBuilder = { + let radioButtonBuilder: azdata.ComponentBuilder = { component: () => radioButton, withProperties: () => radioButtonBuilder, withProps: () => radioButtonBuilder, diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts index 14ae93111d..3f67fb74b6 100644 --- a/src/sql/azdata.d.ts +++ b/src/sql/azdata.d.ts @@ -3495,6 +3495,7 @@ declare module 'azdata' { export interface RadioButtonComponent extends Component, RadioButtonProperties { /** + * @deprecated use onDidChangeCheckedState event instead * An event called when the radio button is clicked */ onDidClick: vscode.Event; diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index 7de6bf8e2c..cd5511ca16 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -274,6 +274,13 @@ declare module 'azdata' { showLinkIcon?: boolean; } + export interface RadioButtonComponent { + /** + * An event called when the value of radio button changes + */ + onDidChangeCheckedState: vscode.Event; + } + export interface DeclarativeTableColumn { headerCssStyles?: CssStyles; rowCssStyles?: CssStyles; diff --git a/src/sql/base/browser/ui/radioButton/radioButton.ts b/src/sql/base/browser/ui/radioButton/radioButton.ts index 7c4ef75980..35f82bdcf4 100644 --- a/src/sql/base/browser/ui/radioButton/radioButton.ts +++ b/src/sql/base/browser/ui/radioButton/radioButton.ts @@ -18,7 +18,10 @@ export class RadioButton extends Widget { private inputElement: HTMLInputElement; private _onClicked = new Emitter(); public readonly onClicked: Event = this._onClicked.event; + private _onChangedCheckedState = new Emitter(); + public readonly onDidChangeCheckedState: Event = this._onChangedCheckedState.event; private _label: HTMLSpanElement; + private _internalCheckedStateTracker: boolean = false; constructor(container: HTMLElement, opts: IRadioButtonOptions) { super(); @@ -33,7 +36,18 @@ export class RadioButton extends Widget { this.label = opts.label; this.enabled = opts.enabled || true; this.checked = opts.checked || false; - this.onclick(this.inputElement, () => this._onClicked.fire()); + this.onclick(this.inputElement, () => { + this._onClicked.fire(); + if (this.name) { + const buttonGroup = document.getElementsByName(this.name); + buttonGroup.forEach((button) => { + const event = document.createEvent('HTMLEvents'); + event.initEvent('change', true, true); + button.dispatchEvent(event); + }); + } + }); + this.inputElement.addEventListener('change', () => this.checked = this.inputElement.checked); container.appendChild(this.inputElement); container.appendChild(this._label); @@ -60,7 +74,11 @@ export class RadioButton extends Widget { } public set checked(val: boolean) { - this.inputElement.checked = val; + if (this.inputElement.checked !== this._internalCheckedStateTracker) { + this.inputElement.checked = val; + this._internalCheckedStateTracker = val; + this._onChangedCheckedState.fire(this.checked); + } } public get checked(): boolean { diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index 11b8f66ed6..bed6869198 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/src/sql/workbench/api/common/extHostModelView.ts @@ -1271,6 +1271,7 @@ class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonC super(proxy, handle, ModelComponentTypes.RadioButton, id); this.properties = {}; this._emitterMap.set(ComponentEventType.onDidClick, new Emitter()); + this._emitterMap.set(ComponentEventType.onDidChange, new Emitter()); } public get name(): string { @@ -1304,6 +1305,11 @@ class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonC let emitter = this._emitterMap.get(ComponentEventType.onDidClick); return emitter && emitter.event; } + + public get onDidChangeCheckedState(): vscode.Event { + let emitter = this._emitterMap.get(ComponentEventType.onDidChange); + return emitter && emitter.event; + } } class TextComponentWrapper extends ComponentWrapper implements azdata.TextComponentProperties { diff --git a/src/sql/workbench/browser/modelComponents/radioButton.component.ts b/src/sql/workbench/browser/modelComponents/radioButton.component.ts index 179c1e4d7e..19a7d4ff07 100644 --- a/src/sql/workbench/browser/modelComponents/radioButton.component.ts +++ b/src/sql/workbench/browser/modelComponents/radioButton.component.ts @@ -51,6 +51,14 @@ export default class RadioButtonComponent extends ComponentBase { + this.checked = e; + this.fireEvent({ + eventType: ComponentEventType.onDidChange, + args: e + }); + })); } this.baseInit(); }