From 65a31de166ae5ac3a3b34e84ac669d41b296f0fc Mon Sep 17 00:00:00 2001
From: Brian Bergeron <brian.e.bergeron@gmail.com>
Date: Wed, 3 Jun 2020 14:59:54 -0700
Subject: [PATCH] Add readOnly property to InputBoxComponent (#10687)

---
 extensions/arc/src/ui/components/keyValueContainer.ts    | 2 +-
 src/sql/azdata.proposed.d.ts                             | 1 +
 .../browser/modelComponents/inputbox.component.ts        | 9 +++++++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/extensions/arc/src/ui/components/keyValueContainer.ts b/extensions/arc/src/ui/components/keyValueContainer.ts
index 33142c5ae0..82aacd3659 100644
--- a/extensions/arc/src/ui/components/keyValueContainer.ts
+++ b/extensions/arc/src/ui/components/keyValueContainer.ts
@@ -62,7 +62,7 @@ export class InputKeyValue extends KeyValue {
 	getValueComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
 		const container = modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component();
 		container.addItem(modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
-			value: this.value // TODO: Add a readOnly property to input boxes
+			value: this.value, readOnly: true
 		}).component());
 
 		const copy = modelBuilder.button().withProperties<azdata.ButtonProperties>({
diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts
index 04d2c93eda..48760b3adf 100644
--- a/src/sql/azdata.proposed.d.ts
+++ b/src/sql/azdata.proposed.d.ts
@@ -309,6 +309,7 @@ declare module 'azdata' {
 
 	export interface InputBoxProperties extends ComponentProperties {
 		validationErrorMessage?: string;
+		readOnly?: boolean;
 	}
 
 	export interface CheckBoxProperties {
diff --git a/src/sql/workbench/browser/modelComponents/inputbox.component.ts b/src/sql/workbench/browser/modelComponents/inputbox.component.ts
index fe109c828f..f5a5e351fc 100644
--- a/src/sql/workbench/browser/modelComponents/inputbox.component.ts
+++ b/src/sql/workbench/browser/modelComponents/inputbox.component.ts
@@ -244,6 +244,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 		}
 
 		input.inputElement.required = this.required;
+		input.inputElement.readOnly = this.readOnly;
 	}
 
 	// CSS-bound properties
@@ -316,6 +317,14 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 		this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.multiline = value, newValue);
 	}
 
+	public get readOnly(): boolean {
+		return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.readOnly, false);
+	}
+
+	public set readOnly(newValue: boolean) {
+		this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.readOnly = value, newValue);
+	}
+
 	public get required(): boolean {
 		return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.required, false);
 	}