enabled button to import queries from sql files (#2042)

extensions/agent/src/dialogs/jobStepDialog.ts

@@ -143,13 +143,16 @@ export class JobStepDialog {
 				width: '80px',
 				isFile: true
 			}).component();
-		this.openButton.enabled = false;
 		this.parseButton = view.modelBuilder.button()
 			.withProperties({
 				label: this.ParseCommandText,
 				width: '80px',
 				isFile: false
 			}).component();
+		this.openButton.onDidClick(e => {
+			let queryContent = e;
+			this.commandTextBox.value = queryContent;
+		});
 		this.parseButton.onDidClick(e => {
 			if (this.commandTextBox.value) {
 				queryProvider.parseSyntax(this.ownerUri, this.commandTextBox.value).then(result => {

src/sql/parts/modelComponents/button.component.ts

@@ -27,7 +27,7 @@ import { Color } from 'vs/base/common/color';
 	<div>
 		<label for={{this.label}}>
 			<div #input style="width: 100%">
-				<input *ngIf="this.isFile === true" id={{this.label}} type="file" style="display: none">
+				<input #fileInput *ngIf="this.isFile === true" id={{this.label}} type="file" accept=".sql" style="display: none">
 			</div>
 		</label>
 	</div>
@@ -39,17 +39,16 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
 	private _button: Button;
 
 	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
+	@ViewChild('fileInput', { read: ElementRef }) private _fileInputContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
 	) {
 		super(changeRef);
-
 	}
 
 	ngOnInit(): void {
 		this.baseInit();
-
 	}
 
 	ngAfterViewInit(): void {
@@ -61,10 +60,27 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
 				buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND, buttonForeground: SIDE_BAR_TITLE_FOREGROUND
 			}));
 			this._register(this._button.onDidClick(e => {
-				this._onEventEmitter.fire({
+				if (this._fileInputContainer) {
-					eventType: ComponentEventType.onDidClick,
+					const self = this;
-					args: e
+					this._fileInputContainer.nativeElement.onchange = () => {
-				});
+						let file  = self._fileInputContainer.nativeElement.files[0];
+						let reader = new FileReader();
+						reader.onload = (e) => {
+							let text = (<FileReader>e.target).result;
+							self.fileContent = text;
+							self._onEventEmitter.fire({
+								eventType: ComponentEventType.onDidClick,
+								args: self.fileContent
+							});
+						};
+						reader.readAsText(file);
+					};
+				} else {
+					this._onEventEmitter.fire({
+						eventType: ComponentEventType.onDidClick,
+						args: e
+					});
+				}
 			}));
 		}
 	}
@@ -133,6 +149,18 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
 		this.setPropertyFromUI<sqlops.ButtonProperties, boolean>(this.setFileProperties, newValue);
 	}
 
+	private get fileContent(): string {
+		return this.getPropertyOrDefault<sqlops.ButtonProperties, string>((props) => props.fileContent, '');
+	}
+
+	private set fileContent(newValue: string) {
+		this.setPropertyFromUI<sqlops.ButtonProperties, string>(this.setFileContentProperties, newValue);
+	}
+
+	private setFileContentProperties(properties: sqlops.ButtonProperties, fileContent: string) : void {
+		properties.fileContent = fileContent;
+	}
+
 	private setValueProperties(properties: sqlops.ButtonProperties, label: string): void {
 		properties.label = label;
 	}

src/sql/sqlops.proposed.d.ts

@@ -454,6 +454,7 @@ declare module 'sqlops' {
 	export interface ButtonProperties extends ComponentProperties, ComponentWithIcon {
 		label?: string;
 		isFile?: boolean;
+		fileContent?: string;
 	}
 
 	export interface LoadingComponentProperties {
@@ -533,7 +534,7 @@ declare module 'sqlops' {
 		languageMode: string;
 	}
 
-	export interface ButtonComponent extends Component {
+	export interface ButtonComponent extends Component, ButtonProperties  {
 		label: string;
 		iconPath: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri };
 		onDidClick: vscode.Event<any>;