Add kube config and kube cluster to arc data controller screens (#13551)

extensions/arc/src/ui/components/filePicker.ts

@@ -0,0 +1,91 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import * as azdata from 'azdata';
+import * as path from 'path';
+import * as vscode from 'vscode';
+import * as loc from '../../localizedConstants';
+import { IReadOnly } from '../dialogs/connectControllerDialog';
+
+export interface RadioOptionsInfo {
+	values?: string[],
+	defaultValue: string
+}
+
+export class FilePicker implements IReadOnly {
+	private _flexContainer: azdata.FlexContainer;
+	private _filePathInputBox: azdata.InputBoxComponent;
+	private _filePickerButton: azdata.ButtonComponent;
+	constructor(
+		modelBuilder: azdata.ModelBuilder,
+		initialPath: string, onNewDisposableCreated: (disposable: vscode.Disposable) => void
+	) {
+		const buttonWidth = 80;
+		this._filePathInputBox = modelBuilder.inputBox()
+			.withProperties<azdata.InputBoxProperties>({
+				value: initialPath,
+				width: 350
+			}).component();
+
+		this._filePickerButton = modelBuilder.button()
+			.withProperties<azdata.ButtonProperties>({
+				label: loc.browse,
+				width: buttonWidth
+			}).component();
+		onNewDisposableCreated(this._filePickerButton.onDidClick(async () => {
+			const fileUris = await vscode.window.showOpenDialog({
+				canSelectFiles: true,
+				canSelectFolders: false,
+				canSelectMany: false,
+				defaultUri: this._filePathInputBox.value ? vscode.Uri.file(path.dirname(this._filePathInputBox.value)) : undefined,
+				openLabel: loc.select,
+				filters: undefined /* file type filters */
+			});
+
+			if (!fileUris || fileUris.length === 0) {
+				return; // This can happen when a user cancels out.  we don't throw and the user just won't be able to move on until they select something.
+			}
+			const fileUri = fileUris[0]; //we allow the user to select only one file in the dialog
+			this._filePathInputBox.value = fileUri.fsPath;
+		}));
+		this._flexContainer = createFlexContainer(modelBuilder, [this._filePathInputBox, this._filePickerButton]);
+	}
+
+	component(): azdata.Component {
+		return this._flexContainer;
+	}
+
+	get onTextChanged() {
+		return this._filePathInputBox.onTextChanged;
+	}
+
+	get value(): string | undefined {
+		return this._filePathInputBox?.value;
+	}
+
+	get readOnly(): boolean {
+		return this.enabled;
+	}
+
+	set readOnly(value: boolean) {
+		this.enabled = value;
+	}
+
+	get enabled(): boolean {
+		return !!this._flexContainer.enabled && this._flexContainer.items.every(r => r.enabled);
+	}
+
+	set enabled(value: boolean) {
+		this._flexContainer.items.forEach(r => r.enabled = value);
+		this._flexContainer.enabled = value;
+	}
+}
+
+function createFlexContainer(modelBuilder: azdata.ModelBuilder, items: azdata.Component[], rowLayout: boolean = true, width?: string | number, height?: string | number, alignItems?: azdata.AlignItemsType, cssStyles?: { [key: string]: string }): azdata.FlexContainer {
+	const flexFlow = rowLayout ? 'row' : 'column';
+	alignItems = alignItems || (rowLayout ? 'center' : undefined);
+	const itemsStyle = rowLayout ? { CSSStyles: { 'margin-right': '5px', } } : {};
+	const flexLayout: azdata.FlexLayout = { flexFlow: flexFlow, height: height, width: width, alignItems: alignItems };
+	return modelBuilder.flexContainer().withItems(items, itemsStyle).withLayout(flexLayout).withProperties<azdata.ComponentProperties>({ CSSStyles: cssStyles || {} }).component();
+}

extensions/arc/src/ui/components/radioOptionsGroup.ts

@@ -5,24 +5,22 @@
 import * as azdata from 'azdata';
 import * as vscode from 'vscode';
 import { getErrorMessage } from '../../common/utils';
+import { IReadOnly } from '../dialogs/connectControllerDialog';
 
 export interface RadioOptionsInfo {
 	values?: string[],
 	defaultValue: string
 }
 
-export class RadioOptionsGroup {
+export class RadioOptionsGroup implements IReadOnly {
 	static id: number = 1;
 	private _divContainer!: azdata.DivContainer;
 	private _loadingBuilder: azdata.LoadingComponentBuilder;
 	private _currentRadioOption!: azdata.RadioButtonComponent;
 
-	constructor(private _view: azdata.ModelView, private _onNewDisposableCreated: (disposable: vscode.Disposable) => void, private _groupName: string = `RadioOptionsGroup${RadioOptionsGroup.id++}`) {
-		const divBuilder = this._view.modelBuilder.divContainer();
-		const divBuilderWithProperties = divBuilder.withProperties<azdata.DivContainerProperties>({ clickable: false });
-		this._divContainer = divBuilderWithProperties.component();
-		const loadingComponentBuilder = this._view.modelBuilder.loadingComponent();
-		this._loadingBuilder = loadingComponentBuilder.withItem(this._divContainer);
+	constructor(private _modelBuilder: azdata.ModelBuilder, private _onNewDisposableCreated: (disposable: vscode.Disposable) => void, private _groupName: string = `RadioOptionsGroup${RadioOptionsGroup.id++}`) {
+		this._divContainer = this._modelBuilder.divContainer().withProperties<azdata.DivContainerProperties>({ clickable: false }).component();
+		this._loadingBuilder = this._modelBuilder.loadingComponent().withItem(this._divContainer);
 	}
 
 	public component(): azdata.LoadingComponent {
@@ -37,7 +35,7 @@ export class RadioOptionsGroup {
 			const options = optionsInfo.values!;
 			let defaultValue: string = optionsInfo.defaultValue!;
 			options.forEach((option: string) => {
-				const radioOption = this._view!.modelBuilder.radioButton().withProperties<azdata.RadioButtonProperties>({
+				const radioOption = this._modelBuilder.radioButton().withProperties<azdata.RadioButtonProperties>({
 					label: option,
 					checked: option === defaultValue,
 					name: this._groupName,
@@ -60,7 +58,7 @@ export class RadioOptionsGroup {
 			});
 		}
 		catch (e) {
-			const errorLabel = this._view!.modelBuilder.text().withProperties({ value: getErrorMessage(e), CSSStyles: { 'color': 'Red' } }).component();
+			const errorLabel = this._modelBuilder.text().withProperties({ value: getErrorMessage(e), CSSStyles: { 'color': 'Red' } }).component();
 			this._divContainer.addItem(errorLabel);
 		}
 		this.component().loading = false;
@@ -69,4 +67,21 @@ export class RadioOptionsGroup {
 	get value(): string | undefined {
 		return this._currentRadioOption?.value;
 	}
+
+	get readOnly(): boolean {
+		return this.enabled;
+	}
+
+	set readOnly(value: boolean) {
+		this.enabled = value;
+	}
+
+	get enabled(): boolean {
+		return !!this._divContainer.enabled && this._divContainer.items.every(r => r.enabled);
+	}
+
+	set enabled(value: boolean) {
+		this._divContainer.items.forEach(r => r.enabled = value);
+		this._divContainer.enabled = value;
+	}
 }