Import Wizard (#2130)

Flat File Importer

extensions/import/src/wizard/api/importPage.ts

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { ImportDataModel } from './models';
+import * as sqlops from 'sqlops';
+import { FlatFileProvider } from '../../services/contracts';
+import { FlatFileWizard } from '../flatFileWizard';
+
+export abstract class ImportPage {
+	protected readonly instance: FlatFileWizard;
+	protected readonly model: ImportDataModel;
+	protected readonly view: sqlops.ModelView;
+	protected readonly provider: FlatFileProvider;
+
+	protected constructor(instance: FlatFileWizard, model: ImportDataModel, view: sqlops.ModelView, provider: FlatFileProvider) {
+		this.instance = instance;
+		this.model = model;
+		this.view = view;
+		this.provider = provider;
+	}
+
+	/**
+	 * This method constructs all the elements of the page.
+	 * @returns {Promise<boolean>}
+	 */
+	public async abstract start(): Promise<boolean>;
+
+	/**
+	 * This method is called when the user is entering the page.
+	 * @returns {Promise<boolean>}
+	 */
+	public async abstract onPageEnter(): Promise<boolean>;
+
+	/**
+	 * This method is called when the user is leaving the page.
+	 * @returns {Promise<boolean>}
+	 */
+	public async abstract onPageLeave(): Promise<boolean>;
+
+	/**
+	 * Override this method to cleanup what you don't need cached in the page.
+	 * @returns {Promise<boolean>}
+	 */
+	public async cleanup(): Promise<boolean> {
+		return true;
+	}
+}

extensions/import/src/wizard/api/models.ts

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import * as sqlops from 'sqlops';
+
+/**
+ * The main data model that communicates between the pages.
+ */
+export interface ImportDataModel {
+	ownerUri: string;
+	proseColumns: ColumnMetadata[];
+	proseDataPreview: string[][];
+	server: sqlops.connection.Connection;
+	database: string;
+	table: string;
+	schema: string;
+	filePath: string;
+	fileType: string;
+}
+
+/**
+ * Metadata of a column
+ */
+export interface ColumnMetadata {
+	columnName: string;
+	dataType: string;
+	primaryKey: boolean;
+	nullable: boolean;
+}

extensions/import/src/wizard/flatFileWizard.ts

@@ -0,0 +1,130 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import * as vscode from 'vscode';
+import * as nls from 'vscode-nls';
+import * as sqlops from 'sqlops';
+import { FlatFileProvider } from '../services/contracts';
+import { ImportDataModel } from './api/models';
+import { ImportPage } from './api/importPage';
+// pages
+import { FileConfigPage } from './pages/fileConfigPage';
+import { ProsePreviewPage } from './pages/prosePreviewPage';
+import { ModifyColumnsPage } from './pages/modifyColumnsPage';
+import { SummaryPage } from './pages/summaryPage';
+
+const localize = nls.loadMessageBundle();
+
+export class FlatFileWizard {
+	private readonly provider: FlatFileProvider;
+	private wizard: sqlops.window.modelviewdialog.Wizard;
+
+	private importAnotherFileButton: sqlops.window.modelviewdialog.Button;
+
+	constructor(provider: FlatFileProvider) {
+		this.provider = provider;
+	}
+
+	public async start() {
+		let model = <ImportDataModel>{};
+		let pages: Map<number, ImportPage> = new Map<number, ImportPage>();
+
+
+		// TODO localize this
+		let connections = await sqlops.connection.getActiveConnections();
+		if (!connections || connections.length === 0) {
+			vscode.window.showErrorMessage('Please connect to a server before using this wizard.');
+			return;
+		}
+
+		this.wizard = sqlops.window.modelviewdialog.createWizard(localize('flatFileImport.wizardName', 'Import flat file wizard'));
+		let page1 = sqlops.window.modelviewdialog.createWizardPage(localize('flatFileImport.page1Name', 'New Table Details'));
+		let page2 = sqlops.window.modelviewdialog.createWizardPage(localize('flatFileImport.page2Name', 'Preview Data'));
+		let page3 = sqlops.window.modelviewdialog.createWizardPage(localize('flatFileImport.page3Name', 'Modify Columns'));
+		let page4 = sqlops.window.modelviewdialog.createWizardPage(localize('flatFileImport.page4Name', 'Summary'));
+
+		let fileConfigPage: FileConfigPage;
+		page1.registerContent(async (view) => {
+			fileConfigPage = new FileConfigPage(this, model, view, this.provider);
+			pages.set(0, fileConfigPage);
+			await fileConfigPage.start();
+			fileConfigPage.onPageEnter();
+		});
+
+		let prosePreviewPage: ProsePreviewPage;
+		page2.registerContent(async (view) => {
+			prosePreviewPage = new ProsePreviewPage(this, model, view, this.provider);
+			pages.set(1, prosePreviewPage);
+			await prosePreviewPage.start();
+		});
+
+		let modifyColumnsPage: ModifyColumnsPage;
+		page3.registerContent(async (view) => {
+			modifyColumnsPage = new ModifyColumnsPage(this, model, view, this.provider);
+			pages.set(2, modifyColumnsPage);
+			await modifyColumnsPage.start();
+		});
+
+		let summaryPage: SummaryPage;
+
+		page4.registerContent(async (view) => {
+			summaryPage = new SummaryPage(this, model, view, this.provider);
+			pages.set(3, summaryPage);
+			await summaryPage.start();
+		});
+
+
+		this.importAnotherFileButton = sqlops.window.modelviewdialog.createButton(localize('flatFileImport.importNewFile', 'Import new file'));
+		this.importAnotherFileButton.onClick(() => {
+			//TODO replace this with proper cleanup for all the pages
+			this.wizard.close();
+			pages.forEach((page) => page.cleanup());
+			this.wizard.open();
+		});
+
+		this.importAnotherFileButton.hidden = true;
+		this.wizard.customButtons = [this.importAnotherFileButton];
+
+		this.wizard.onPageChanged(async (event) => {
+			let idx = event.newPage;
+
+			let page = pages.get(idx);
+
+			if (page) {
+				page.onPageEnter();
+			}
+		});
+
+		this.wizard.onPageChanged(async (event) => {
+			let idx = event.lastPage;
+
+			let page = pages.get(idx);
+			if (page) {
+				page.onPageLeave();
+			}
+		});
+
+		//not needed for this wizard
+		this.wizard.generateScriptButton.hidden = true;
+
+		this.wizard.pages = [page1, page2, page3, page4];
+
+		this.wizard.open();
+	}
+
+	public setImportAnotherFileVisibility(visibility: boolean) {
+		this.importAnotherFileButton.hidden = !visibility;
+	}
+
+	public registerNavigationValidator(validator: (pageChangeInfo: sqlops.window.modelviewdialog.WizardPageChangeInfo) => boolean) {
+		this.wizard.registerNavigationValidator(validator);
+	}
+
+
+}
+
+
+

extensions/import/src/wizard/pages/fileConfigPage.ts

@@ -0,0 +1,393 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+import * as sqlops from 'sqlops';
+import * as vscode from 'vscode';
+import * as nls from 'vscode-nls';
+import { ImportDataModel } from '../api/models';
+import { ImportPage } from '../api/importPage';
+import { FlatFileProvider } from '../../services/contracts';
+import { FlatFileWizard } from '../flatFileWizard';
+
+const localize = nls.loadMessageBundle();
+
+export class FileConfigPage extends ImportPage {
+
+	private serverDropdown: sqlops.DropDownComponent;
+	private databaseDropdown: sqlops.DropDownComponent;
+	private fileTextBox: sqlops.InputBoxComponent;
+	private fileButton: sqlops.ButtonComponent;
+	private tableNameTextBox: sqlops.InputBoxComponent;
+	private schemaDropdown: sqlops.DropDownComponent;
+	private form: sqlops.FormContainer;
+
+	private databaseLoader: sqlops.LoadingComponent;
+	private schemaLoader: sqlops.LoadingComponent;
+
+	private tableNames: string[] = [];
+
+	public constructor(instance: FlatFileWizard, model: ImportDataModel, view: sqlops.ModelView, provider: FlatFileProvider) {
+		super(instance, model, view, provider);
+	}
+
+	async start(): Promise<boolean> {
+		let schemaComponent = await this.createSchemaDropdown();
+		let tableNameComponent = await this.createTableNameBox();
+		let fileBrowserComponent = await this.createFileBrowser();
+		let databaseComponent = await this.createDatabaseDropdown();
+		let serverComponent = await this.createServerDropdown();
+		this.setupNavigationValidator();
+
+		this.form = this.view.modelBuilder.formContainer()
+			.withFormItems(
+				[
+					serverComponent,
+					databaseComponent,
+					fileBrowserComponent,
+					tableNameComponent,
+					schemaComponent
+				]).component();
+
+		await this.view.initializeModel(this.form);
+		return true;
+	}
+
+	async onPageEnter(): Promise<boolean> {
+		await this.populateServerDropdown();
+		await this.populateDatabaseDropdown();
+		await this.populateSchemaDropdown();
+		return true;
+	}
+
+	async onPageLeave(): Promise<boolean> {
+		return true;
+	}
+
+	public async cleanup(): Promise<boolean> {
+		delete this.model.filePath;
+		delete this.model.table;
+
+		return true;
+	}
+
+	private setupNavigationValidator() {
+		this.instance.registerNavigationValidator((info) => {
+			if (this.schemaLoader.loading || this.databaseLoader.loading) {
+				return false;
+			}
+			return true;
+		});
+	}
+
+	private async createServerDropdown(): Promise<sqlops.FormComponent> {
+		this.serverDropdown = this.view.modelBuilder.dropDown().component();
+
+		// Handle server changes
+		this.serverDropdown.onValueChanged(async (params) => {
+			this.model.server = (this.serverDropdown.value as ConnectionDropdownValue).connection;
+
+			await this.populateDatabaseDropdown();
+			await this.populateSchemaDropdown();
+		});
+
+		return {
+			component: this.serverDropdown,
+			title: localize('flatFileImport.serverDropdownTitle', 'Server the database is in')
+		};
+	}
+
+	private async populateServerDropdown(): Promise<boolean> {
+		let cons = await sqlops.connection.getActiveConnections();
+		// This user has no active connections ABORT MISSION
+		if (!cons || cons.length === 0) {
+			return true;
+		}
+
+
+		let count = -1;
+		let idx = -1;
+
+		let values = cons.map(c => {
+			// Handle the code to remember what the user's choice was from before
+			count++;
+			if (this.model.server && c.connectionId === this.model.server.connectionId) {
+				idx = count;
+			}
+
+			let db = c.options.databaseDisplayName;
+			let usr = c.options.user;
+			let srv = c.options.server;
+
+			if (!db) {
+				db = '<default>';
+			}
+
+			if (!usr) {
+				usr = 'default';
+			}
+
+			let finalName = `${srv}, ${db} (${usr})`;
+			return {
+				connection: c,
+				displayName: finalName,
+				name: c.connectionId
+			};
+		});
+
+		if (idx > 0) {
+			let tmp = values[0];
+			values[0] = values[idx];
+			values[idx] = tmp;
+		} else {
+			delete this.model.server;
+			delete this.model.database;
+			delete this.model.schema;
+		}
+
+		this.model.server = values[0].connection;
+
+
+		this.serverDropdown.updateProperties({
+			values: values
+		});
+		return true;
+	}
+
+	private async createDatabaseDropdown(): Promise<sqlops.FormComponent> {
+		this.databaseDropdown = this.view.modelBuilder.dropDown().component();
+
+		// Handle database changes
+		this.databaseDropdown.onValueChanged(async (db) => {
+			this.model.database = (<sqlops.CategoryValue>this.databaseDropdown.value).name;
+			//this.populateTableNames();
+			this.populateSchemaDropdown();
+		});
+
+		this.databaseLoader = this.view.modelBuilder.loadingComponent().withItem(this.databaseDropdown).component();
+
+		return {
+			component: this.databaseLoader,
+			title: localize('flatFileImport.databaseDropdownTitle', 'Database the table is created in')
+		};
+	}
+
+	private async populateDatabaseDropdown(): Promise<boolean> {
+		this.databaseLoader.loading = true;
+		this.databaseDropdown.updateProperties({ values: [] });
+		this.schemaDropdown.updateProperties({ values: [] });
+
+		if (!this.model.server) {
+			//TODO handle error case
+			this.databaseLoader.loading = false;
+			return false;
+		}
+
+
+		let idx = -1;
+		let count = -1;
+		let values = (await sqlops.connection.listDatabases(this.model.server.connectionId)).map(db => {
+			count++;
+			if (this.model.database && db === this.model.database) {
+				idx = count;
+			}
+			return {
+				displayName: db,
+				name: db
+			};
+		});
+
+		if (idx > 0) {
+			let tmp = values[0];
+			values[0] = values[idx];
+			values[idx] = tmp;
+		} else {
+			delete this.model.database;
+			delete this.model.schema;
+		}
+
+		this.model.database = values[0].name;
+
+		this.databaseDropdown.updateProperties({
+			values: values
+		});
+		this.databaseLoader.loading = false;
+
+		return true;
+	}
+
+	private async createFileBrowser(): Promise<sqlops.FormComponent> {
+		this.fileTextBox = this.view.modelBuilder.inputBox().component();
+		this.fileButton = this.view.modelBuilder.button().withProperties({
+			label: localize('flatFileImport.browseFiles', 'Browse'),
+		}).component();
+
+		this.fileButton.onDidClick(async (click) => {
+			let fileUris = await vscode.window.showOpenDialog(
+				{
+					canSelectFiles: true,
+					canSelectFolders: false,
+					canSelectMany: false,
+					openLabel: localize('flatFileImport.openFile', 'Open'),
+					filters: {
+						'Files': ['csv', 'txt']
+					}
+				}
+			);
+
+			if (!fileUris || fileUris.length === 0) {
+				return;
+			}
+
+			let fileUri = fileUris[0];
+			this.fileTextBox.value = fileUri.fsPath;
+
+			// Get the name of the file.
+			let nameStart = fileUri.path.lastIndexOf('/');
+			let nameEnd = fileUri.path.lastIndexOf('.');
+
+			// Handle files without extensions
+			if (nameEnd === 0) {
+				nameEnd = fileUri.path.length;
+			}
+			this.model.fileType = 'TXT';
+			let extension = fileUri.path.substring(nameEnd + 1, fileUri.path.length);
+
+			if (extension.toLowerCase() === 'json') {
+				this.model.fileType = 'JSON';
+			}
+
+			this.tableNameTextBox.value = fileUri.path.substring(nameStart + 1, nameEnd);
+			this.model.table = this.tableNameTextBox.value;
+			this.tableNameTextBox.validate();
+
+			// Let then model know about the file path
+			this.model.filePath = fileUri.fsPath;
+		});
+
+		return {
+			component: this.fileTextBox,
+			title: localize('flatFileImport.fileTextboxTitle', 'Location of the file to be imported'),
+			actions: [this.fileButton]
+		};
+	}
+
+	private async createTableNameBox(): Promise<sqlops.FormComponent> {
+		this.tableNameTextBox = this.view.modelBuilder.inputBox().withValidation((name) => {
+			let tableName = name.value;
+
+			if (!tableName || tableName.length === 0) {
+				return false;
+			}
+
+			// This won't actually do anything until table names are brought back in.
+			if (this.tableNames.indexOf(tableName) !== -1) {
+				return false;
+			}
+
+			return true;
+		}).component();
+
+		this.tableNameTextBox.onTextChanged((tableName) => {
+			this.model.table = tableName;
+		});
+
+		return {
+			component: this.tableNameTextBox,
+			title: localize('flatFileImport.tableTextboxTitle', 'New table name'),
+		};
+	}
+
+
+	private async createSchemaDropdown(): Promise<sqlops.FormComponent> {
+		this.schemaDropdown = this.view.modelBuilder.dropDown().component();
+		this.schemaLoader = this.view.modelBuilder.loadingComponent().withItem(this.schemaDropdown).component();
+
+		this.schemaDropdown.onValueChanged(() => {
+			this.model.schema = (<sqlops.CategoryValue>this.schemaDropdown.value).name;
+		});
+
+
+		return {
+			component: this.schemaLoader,
+			title: localize('flatFileImport.schemaTextboxTitle', 'Table schema'),
+		};
+
+	}
+
+	private async populateSchemaDropdown(): Promise<Boolean> {
+		this.schemaLoader.loading = true;
+		let connectionUri = await sqlops.connection.getUriForConnection(this.model.server.connectionId);
+		let queryProvider = sqlops.dataprotocol.getProvider<sqlops.QueryProvider>(this.model.server.providerName, sqlops.DataProviderType.QueryProvider);
+
+		let query = `SELECT name FROM sys.schemas`;
+
+		let results = await queryProvider.runQueryAndReturn(connectionUri, query);
+
+		let idx = -1;
+		let count = -1;
+
+		let values = results.rows.map(row => {
+			let schemaName = row[0].displayValue;
+			count++;
+			if (this.model.schema && schemaName === this.model.schema) {
+				idx = count;
+			}
+			let val = row[0].displayValue;
+
+			return {
+				name: val,
+				displayName: val
+			};
+		});
+
+		if (idx > 0) {
+			let tmp = values[0];
+			values[0] = values[idx];
+			values[idx] = tmp;
+		}
+
+		this.model.schema = values[0].name;
+
+		this.schemaDropdown.updateProperties({
+			values: values
+		});
+
+		this.schemaLoader.loading = false;
+		return true;
+	}
+
+	// private async populateTableNames(): Promise<boolean> {
+	// 	this.tableNames = [];
+	// 	let databaseName = (<sqlops.CategoryValue>this.databaseDropdown.value).name;
+	//
+	// 	if (!databaseName || databaseName.length === 0) {
+	// 		this.tableNames = [];
+	// 		return false;
+	// 	}
+	//
+	// 	let connectionUri = await sqlops.connection.getUriForConnection(this.model.server.connectionId);
+	// 	let queryProvider = sqlops.dataprotocol.getProvider<sqlops.QueryProvider>(this.model.server.providerName, sqlops.DataProviderType.QueryProvider);
+	// 	let results: sqlops.SimpleExecuteResult;
+	//
+	// 	try {
+	// 		//let query = sqlstring.format('USE ?; SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = \'BASE TABLE\'', [databaseName]);
+	// 		//results = await queryProvider.runQueryAndReturn(connectionUri, query);
+	// 	} catch (e) {
+	// 		return false;
+	// 	}
+	//
+	// 	this.tableNames = results.rows.map(row => {
+	// 		return row[0].displayValue;
+	// 	});
+	//
+	// 	return true;
+	// }
+}
+
+
+interface ConnectionDropdownValue extends sqlops.CategoryValue {
+	connection: sqlops.connection.Connection;
+}

extensions/import/src/wizard/pages/modifyColumnsPage.ts

@@ -0,0 +1,161 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import * as sqlops from 'sqlops';
+import * as nls from 'vscode-nls';
+import { ColumnMetadata, ImportDataModel } from '../api/models';
+import { ImportPage } from '../api/importPage';
+import { FlatFileProvider } from '../../services/contracts';
+import { FlatFileWizard } from '../flatFileWizard';
+
+const localize = nls.loadMessageBundle();
+
+export class ModifyColumnsPage extends ImportPage {
+	private readonly categoryValues = [
+		{ name: 'bigint', displayName: 'bigint' },
+		{ name: 'binary(50)', displayName: 'binary(50)' },
+		{ name: 'bit', displayName: 'bit' },
+		{ name: 'char(10)', displayName: 'char(10)' },
+		{ name: 'date', displayName: 'date' },
+		{ name: 'datetime', displayName: 'datetime' },
+		{ name: 'datetime2(7)', displayName: 'datetime2(7)' },
+		{ name: 'datetimeoffset(7)', displayName: 'datetimeoffset(7)' },
+		{ name: 'decimal(18, 10)', displayName: 'decimal(18, 10)' },
+		{ name: 'float', displayName: 'float' },
+		{ name: 'geography', displayName: 'geography' },
+		{ name: 'geometry', displayName: 'geometry' },
+		{ name: 'hierarchyid', displayName: 'hierarchyid' },
+		{ name: 'int', displayName: 'int' },
+		{ name: 'money', displayName: 'money' },
+		{ name: 'nchar(10)', displayName: 'nchar(10)' },
+		{ name: 'ntext', displayName: 'ntext' },
+		{ name: 'numeric(18, 0)', displayName: 'numeric(18, 0)' },
+		{ name: 'nvarchar(50)', displayName: 'nvarchar(50)' },
+		{ name: 'nvarchar(MAX)', displayName: 'nvarchar(MAX)' },
+		{ name: 'real', displayName: 'real' },
+		{ name: 'smalldatetime', displayName: 'smalldatetime' },
+		{ name: 'smallint', displayName: 'smallint' },
+		{ name: 'smallmoney', displayName: 'smallmoney' },
+		{ name: 'sql_variant', displayName: 'sql_variant' },
+		{ name: 'text', displayName: 'text' },
+		{ name: 'time(7)', displayName: 'time(7)' },
+		{ name: 'timestamp', displayName: 'timestamp' },
+		{ name: 'tinyint', displayName: 'tinyint' },
+		{ name: 'uniqueidentifier', displayName: 'uniqueidentifier' },
+		{ name: 'varbinary(50)', displayName: 'varbinary(50)' },
+		{ name: 'varbinary(MAX)', displayName: 'varbinary(MAX)' },
+		{ name: 'varchar(50)', displayName: 'varchar(50)' },
+		{ name: 'varchar(MAX)', displayName: 'varchar(MAX)' }
+	];
+	private table: sqlops.DeclarativeTableComponent;
+	private loading: sqlops.LoadingComponent;
+	private text: sqlops.TextComponent;
+	private form: sqlops.FormContainer;
+
+	public constructor(instance: FlatFileWizard, model: ImportDataModel, view: sqlops.ModelView, provider: FlatFileProvider) {
+		super(instance, model, view, provider);
+	}
+
+	private static convertMetadata(column: ColumnMetadata): any[] {
+		return [column.columnName, column.dataType, false, column.nullable];
+	}
+
+	async start(): Promise<boolean> {
+		this.loading = this.view.modelBuilder.loadingComponent().component();
+		this.table = this.view.modelBuilder.declarativeTable().component();
+		this.text = this.view.modelBuilder.text().component();
+
+		this.table.onDataChanged((e) => {
+			this.model.proseColumns = [];
+			this.table.data.forEach((row) => {
+				this.model.proseColumns.push({
+					columnName: row[0],
+					dataType: row[1],
+					primaryKey: row[2],
+					nullable: row[3]
+				});
+			});
+		});
+
+
+		this.form = this.view.modelBuilder.formContainer()
+			.withFormItems(
+				[
+					{
+						component: this.text,
+						title: ''
+					},
+					{
+						component: this.table,
+						title: ''
+					}
+				], {
+					horizontal: false,
+					componentWidth: '100%'
+				}).component();
+
+		this.loading.component = this.form;
+		await this.view.initializeModel(this.form);
+		return true;
+	}
+
+	async onPageEnter(): Promise<boolean> {
+		this.loading.loading = true;
+		await this.populateTable();
+		this.loading.loading = false;
+
+		return true;
+	}
+
+	async onPageLeave(): Promise<boolean> {
+		return undefined;
+	}
+
+	async cleanup(): Promise<boolean> {
+		delete this.model.proseColumns;
+
+		return true;
+	}
+
+	private async populateTable() {
+		let data: any[][] = [];
+
+		this.model.proseColumns.forEach((column) => {
+			data.push(ModifyColumnsPage.convertMetadata(column));
+		});
+
+		this.table.updateProperties({
+			height: 400,
+			columns: [{
+				displayName: localize('flatFileImport.columnName', 'Column Name'),
+				valueType: sqlops.DeclarativeDataType.string,
+				width: '150px',
+				isReadOnly: false
+			}, {
+				displayName: localize('flatFileImport.dataType', 'Data type'),
+				valueType: sqlops.DeclarativeDataType.editableCategory,
+				width: '150px',
+				isReadOnly: false,
+				categoryValues: this.categoryValues
+			}, {
+				displayName: localize('flatFileImport.primaryKey', 'Primary key'),
+				valueType: sqlops.DeclarativeDataType.boolean,
+				width: '100px',
+				isReadOnly: false
+			}, {
+				displayName: localize('flatFileImport.allowNull', 'Allow null'),
+				valueType: sqlops.DeclarativeDataType.boolean,
+				isReadOnly: false,
+				width: '100px'
+			}],
+			data: data
+		});
+
+
+	}
+
+}

extensions/import/src/wizard/pages/prosePreviewPage.ts

@@ -0,0 +1,128 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import * as sqlops from 'sqlops';
+import * as nls from 'vscode-nls';
+import { ImportDataModel } from '../api/models';
+import { ImportPage } from '../api/importPage';
+import { FlatFileProvider } from '../../services/contracts';
+import { FlatFileWizard } from '../flatFileWizard';
+
+const localize = nls.loadMessageBundle();
+
+export class ProsePreviewPage extends ImportPage {
+	private table: sqlops.TableComponent;
+	private loading: sqlops.LoadingComponent;
+	private form: sqlops.FormContainer;
+	private refresh: sqlops.ButtonComponent;
+
+
+	public constructor(instance: FlatFileWizard, model: ImportDataModel, view: sqlops.ModelView, provider: FlatFileProvider) {
+		super(instance, model, view, provider);
+	}
+
+	async start(): Promise<boolean> {
+		this.table = this.view.modelBuilder.table().component();
+		this.refresh = this.view.modelBuilder.button().withProperties({
+			label: localize('flatFileImport.refresh', 'Refresh'),
+			isFile: false
+		}).component();
+
+		this.refresh.onDidClick(async () => {
+			this.onPageEnter();
+		});
+
+		this.loading = this.view.modelBuilder.loadingComponent().component();
+		this.setupNavigationValidator();
+
+		this.form = this.view.modelBuilder.formContainer().withFormItems([
+			{
+				component: this.table,
+				title: localize('flatFileImport.prosePreviewMessage', 'This operation analyzed the input file structure to generate the preview below'),
+				actions: [this.refresh]
+			}
+		]).component();
+
+		this.loading.component = this.form;
+
+		await this.view.initializeModel(this.loading);
+
+		return true;
+	}
+
+	async onPageEnter(): Promise<boolean> {
+		this.loading.loading = true;
+		await this.handleProse();
+		await this.populateTable(this.model.proseDataPreview, this.model.proseColumns.map(c => c.columnName));
+		this.loading.loading = false;
+
+		return true;
+	}
+
+	async onPageLeave(): Promise<boolean> {
+		await this.emptyTable();
+		return true;
+	}
+
+	async cleanup(): Promise<boolean> {
+		delete this.model.proseDataPreview;
+		return true;
+	}
+
+	private setupNavigationValidator() {
+		this.instance.registerNavigationValidator((info) => {
+			if (this.loading.loading) {
+				return false;
+			}
+			return true;
+		});
+	}
+
+	private async handleProse() {
+		await this.provider.sendPROSEDiscoveryRequest({
+			filePath: this.model.filePath,
+			tableName: this.model.table,
+			schemaName: this.model.schema,
+			fileType: this.model.fileType
+		}).then((result) => {
+			this.model.proseDataPreview = result.dataPreview;
+			this.model.proseColumns = [];
+			result.columnInfo.forEach((column) => {
+				this.model.proseColumns.push({
+					columnName: column.name,
+					dataType: column.sqlType,
+					primaryKey: false,
+					nullable: column.isNullable
+				});
+			});
+		});
+	}
+
+	private async populateTable(tableData: string[][], columnHeaders: string[]) {
+		let rows;
+		let rowsLength = tableData.length;
+
+		if (rowsLength > 50) {
+			rows = tableData;
+		}
+		else {
+			rows = tableData.slice(0, rowsLength);
+		}
+
+		this.table.updateProperties({
+			data: rows,
+			columns: columnHeaders,
+			height: 400,
+			width: '700',
+		});
+	}
+
+	private async emptyTable() {
+		this.table.updateProperties([]);
+	}
+
+}

extensions/import/src/wizard/pages/summaryPage.ts

@@ -0,0 +1,168 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import * as sqlops from 'sqlops';
+import * as nls from 'vscode-nls';
+
+import { ImportDataModel } from '../api/models';
+import { ImportPage } from '../api/importPage';
+import { FlatFileProvider, InsertDataResponse } from '../../services/contracts';
+import { FlatFileWizard } from '../flatFileWizard';
+
+const localize = nls.loadMessageBundle();
+
+
+export class SummaryPage extends ImportPage {
+	private table: sqlops.TableComponent;
+	private statusText: sqlops.TextComponent;
+	private loading: sqlops.LoadingComponent;
+	private form: sqlops.FormContainer;
+
+	public constructor(instance: FlatFileWizard, model: ImportDataModel, view: sqlops.ModelView, provider: FlatFileProvider) {
+		super(instance, model, view, provider);
+	}
+
+	async start(): Promise<boolean> {
+		this.table = this.view.modelBuilder.table().component();
+		this.statusText = this.view.modelBuilder.text().component();
+		this.loading = this.view.modelBuilder.loadingComponent().withItem(this.statusText).component();
+
+		this.form = this.view.modelBuilder.formContainer().withFormItems(
+			[
+				{
+					component: this.table,
+					title: localize('flatFileImport.importInformation', 'Import information')
+				},
+				{
+					component: this.loading,
+					title: localize('flatFileImport.importStatus', 'Import status')
+				}
+			]
+		).component();
+
+		await this.view.initializeModel(this.form);
+		return true;
+	}
+
+	async onPageEnter(): Promise<boolean> {
+		this.loading.loading = true;
+		this.populateTable();
+		await this.handleImport();
+		this.loading.loading = false;
+		this.instance.setImportAnotherFileVisibility(true);
+
+		return true;
+	}
+
+	async onPageLeave(): Promise<boolean> {
+		this.instance.setImportAnotherFileVisibility(false);
+
+		return true;
+	}
+
+	private populateTable() {
+		this.table.updateProperties({
+			data: [
+				['Server name', this.model.server.providerName],
+				['Database name', this.model.database],
+				['Table name', this.model.table],
+				['Table schema', this.model.schema],
+				['File to be imported', this.model.filePath]],
+			columns: ['Object type', 'Name'],
+			width: 600,
+			height: 200
+		});
+	}
+
+	private async handleImport(): Promise<boolean> {
+		let changeColumnResults = [];
+		this.model.proseColumns.forEach((val, i, arr) => {
+			let columnChangeParams = {
+				index: i,
+				newName: val.columnName,
+				newDataType: val.dataType,
+				newNullable: val.nullable,
+				newInPrimaryKey: val.primaryKey
+			};
+			changeColumnResults.push(this.provider.sendChangeColumnSettingsRequest(columnChangeParams));
+		});
+
+		let result: InsertDataResponse;
+		let err;
+		try {
+			result = await this.provider.sendInsertDataRequest({
+				connectionString: await this.getConnectionString(),
+				//TODO check what SSMS uses as batch size
+				batchSize: 500
+			});
+		} catch (e) {
+			err = e.toString();
+		}
+
+		let updateText: string;
+		if (!result || !result.result.success) {
+			updateText = '✗ ';
+			if (!result) {
+				updateText += err;
+			} else {
+				updateText += result.result.errorMessage;
+			}
+		} else {
+			// TODO: When sql statements are in, implement this.
+			//let rows = await this.getCountRowsInserted();
+			//if (rows < 0) {
+			updateText = localize('flatFileImport.success.norows', '✔ Awesome! You have successfully inserted the data into a table.');
+			//} else {
+			//updateText = localize('flatFileImport.success.rows', '✔ Awesome! You have successfully inserted {0} rows.', rows);
+			//}
+		}
+		this.statusText.updateProperties({
+			value: updateText
+		});
+		return true;
+	}
+
+	/**
+	 * Gets the connection string to send to the middleware
+	 * @returns {Promise<string>}
+	 */
+	private async getConnectionString(): Promise<string> {
+		let options = this.model.server.options;
+		let connectionString: string;
+
+		if (options.authenticationType === 'Integrated') {
+			connectionString = `Data Source=${options.server + (options.port ? `,${options.port}` : '')};Initial Catalog=${this.model.database};Integrated Security=True`;
+		} else {
+			let credentials = await sqlops.connection.getCredentials(this.model.server.connectionId);
+			connectionString = `Data Source=${options.server + (options.port ? `,${options.port}` : '')};Initial Catalog=${this.model.database};Integrated Security=False;User Id=${options.user};Password=${credentials.password}`;
+		}
+
+		// TODO: Fix this, it's returning undefined string.
+		//await sqlops.connection.getConnectionString(this.model.server.connectionId, true);
+		return connectionString;
+	}
+
+	// private async getCountRowsInserted(): Promise<Number> {
+	// 	let connectionUri = await sqlops.connection.getUriForConnection(this.model.server.connectionId);
+	// 	let queryProvider = sqlops.dataprotocol.getProvider<sqlops.QueryProvider>(this.model.server.providerName, sqlops.DataProviderType.QueryProvider);
+	// 	try {
+	// 		let query = sqlstring.format('USE ?; SELECT COUNT(*) FROM ?', [this.model.database, this.model.table]);
+	// 		let results = await queryProvider.runQueryAndReturn(connectionUri, query);
+	// 		let cell = results.rows[0][0];
+	// 		if (!cell || cell.isNull) {
+	// 			return -1;
+	// 		}
+	// 		let numericCell = Number(cell.displayValue);
+	// 		if (isNaN(numericCell)) {
+	// 			return -1;
+	// 		}
+	// 		return numericCell;
+	// 	} catch (e) {
+	// 		return -1;
+	// 	}
+	// }
+}