Fixing the checked variable in radio buttons (#13909)

* Fixing the checked variable in radio buttons

* Emitting the checked state of radio button.

* Adding onChanged event to radioButtons (exposing it)
Deprecating onClick event for radioButtons
Fixing radio button stubs

* Made some type fixes

* Firing event in checked event setter

* updating azdata-test to 1.1 in arc extension

* Some logic fixes in checked setter

* added proper typings and updated package version for azdata-data

* Renamed the event to onDidChangeCheckedState

* Fixed deprecation message

* Fixed broken Schema compare stubs

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",

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:
+azdata-test@^1.1.1:
-  version "1.0.0"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.0.0.tgz#b8821a5a313e6919dac8b8ef56f22dc8592cad2c"
+  resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.1.1.tgz#0feb13ec01397841f7bbce0ad25a41e4a3afb5b5"
-  integrity sha512-/QZkHeVKc0HbJtx45nFXNQLTe3lY8la37Re+YfBIzybMIul3FmBszwIyq9/MPHMhrjkvf5xDkEF+CuSlI4KeIA==
+  integrity sha512-+jZ5/4Orqt5Q2MLPqmV+iQjGYxG5FK4pC3UqTOPdSzlbs0JQhOXckC8Hmw8ZOS0N6Cn7mNDCpfaqEU9coTyVsw==
   dependencies:
     http-proxy-agent "^2.1.0"
     https-proxy-agent "^2.2.4"

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;
 	};

extensions/machine-learning/src/test/views/utils.ts

@@ -16,6 +16,7 @@ export interface ViewTestContext {
 
 export function createViewContext(): ViewTestContext {
 	let onClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
+	let onChange: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
 
 	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,

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<any>) {
+	constructor(private onClick: vscode.EventEmitter<any>, private onChange: vscode.EventEmitter<boolean>) {
 		super();
 	}
 	onDidClick: vscode.Event<any> = this.onClick.event;
+	onDidChangeCheckedState: vscode.Event<boolean> = this.onChange.event;
 }
 
 class TestTextComponent extends TestComponentBase implements azdata.TextComponent {
@@ -460,11 +461,12 @@ class TestLoadingBuilder extends TestComponentBuilder<azdata.LoadingComponent, a
 
 export function createViewContext(): TestContext {
 	let onClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
+	let onChange: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
 
 	let form: azdata.FormContainer = new TestFormContainer();
 	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 radioButtonBuilder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = new TestComponentBuilder(new TestRadioButtonComponent(onClick, onChange));
 	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, azdata.DropDownProperties> = new TestComponentBuilder(new TestDropdownComponent(onClick));

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<any> = new vscode.EventEmitter<any>();
+		let onChange: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
 
 		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: () => { },

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",

extensions/resource-deployment/yarn.lock

@@ -285,10 +285,10 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-azdata-test@^1.0.0:
+azdata-test@^1.1.1:
-  version "1.0.0"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.0.0.tgz#b8821a5a313e6919dac8b8ef56f22dc8592cad2c"
+  resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.1.1.tgz#0feb13ec01397841f7bbce0ad25a41e4a3afb5b5"
-  integrity sha512-/QZkHeVKc0HbJtx45nFXNQLTe3lY8la37Re+YfBIzybMIul3FmBszwIyq9/MPHMhrjkvf5xDkEF+CuSlI4KeIA==
+  integrity sha512-+jZ5/4Orqt5Q2MLPqmV+iQjGYxG5FK4pC3UqTOPdSzlbs0JQhOXckC8Hmw8ZOS0N6Cn7mNDCpfaqEU9coTyVsw==
   dependencies:
     http-proxy-agent "^2.1.0"
     https-proxy-agent "^2.2.4"

extensions/schema-compare/src/test/testContext.ts

@@ -66,6 +66,7 @@ export function createViewContext(): ViewTestContext {
 	let switchDirectionButtonOnClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
 	let cancelCompareButtonOnClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
 	let generateScriptButtonOnClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
+	let onChangeCheckedState: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
 
 	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<azdata.ButtonComponent, azdata.ButtonProperties> = {
+	let radioButtonBuilder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = {
 		component: () => radioButton,
 		withProperties: () => radioButtonBuilder,
 		withProps: () => radioButtonBuilder,

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<any>;

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<boolean>;
+	}
+
 	export interface DeclarativeTableColumn {
 		headerCssStyles?: CssStyles;
 		rowCssStyles?: CssStyles;

src/sql/base/browser/ui/radioButton/radioButton.ts

@@ -18,7 +18,10 @@ export class RadioButton extends Widget {
 	private inputElement: HTMLInputElement;
 	private _onClicked = new Emitter<void>();
 	public readonly onClicked: Event<void> = this._onClicked.event;
+	private _onChangedCheckedState = new Emitter<boolean>();
+	public readonly onDidChangeCheckedState: Event<boolean> = 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 {

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<any>());
+		this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<boolean>());
 	}
 
 	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<boolean> {
+		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
+		return emitter && emitter.event;
+	}
 }
 
 class TextComponentWrapper extends ComponentWrapper implements azdata.TextComponentProperties {

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

@@ -51,6 +51,14 @@ export default class RadioButtonComponent extends ComponentBase<azdata.RadioButt
 					args: e
 				});
 			}));
+
+			this._register(this._input.onDidChangeCheckedState(e => {
+				this.checked = e;
+				this.fireEvent({
+					eventType: ComponentEventType.onDidChange,
+					args: e
+				});
+			}));
 		}
 		this.baseInit();
 	}