Feat/model backed ui (#1145)

This is an initial PR for a new model-driven UI where extensions can provide definitions of the components & how they're laid out using Containers.
#1140, #1141, #1142, #1143 and #1144 are all tracking additional work needed to improve the initial implementation and fix some issues with the implementation.

Features:
- Supports defining a FlexContainer that maps to a flexbox-based layout.
- Supports creating a card component, which is a key-value pair based control that will lay out simple information to a user. Eventually this will have an optional set of actions associated with it.
- Has a sample project which shows how to use the API and was used for verification

samples/sqlservices/src/constants.ts

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+// CONFIG VALUES ///////////////////////////////////////////////////////////
+export const extensionConfigSectionName = 'sqlservices';
+export const configLogDebugInfo = 'logDebugInfo';

samples/sqlservices/src/controllers/mainController.ts

@@ -0,0 +1,104 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 Utils from '../utils';
+import * as vscode from 'vscode';
+import SplitPropertiesPanel from './splitPropertiesPanel';
+
+/**
+ * The main controller class that initializes the extension
+ */
+export default class MainController implements vscode.Disposable {
+
+	constructor(protected context: vscode.ExtensionContext) {
+
+	}
+
+	// PUBLIC METHODS //////////////////////////////////////////////////////
+
+	public dispose(): void {
+		this.deactivate();
+	}
+
+	/**
+	 * Deactivates the extension
+	 */
+	public deactivate(): void {
+		Utils.logDebug('Main controller deactivated');
+	}
+
+	public activate(): Promise<boolean> {
+		this.registerSqlServicesModelView();
+		this.registerSplitPanelModelView();
+
+		sqlops.tasks.registerTask('sqlservices.clickTask', (profile) => {
+			vscode.window.showInformationMessage(`Clicked from profile ${profile.serverName}.${profile.databaseName}`);
+		});
+
+		return Promise.resolve(true);
+	}
+
+	private registerSqlServicesModelView(): void {
+		sqlops.dashboard.registerModelViewProvider('sqlservices', async (view) => {
+			let flexModel = view.modelBuilder.flexContainer()
+				.withLayout({
+					flexFlow: 'row'
+				}).withItems([
+					// 1st child panel with N cards
+					view.modelBuilder.flexContainer()
+						.withLayout({ flexFlow: 'column' })
+						.withItems([
+							view.modelBuilder.card()
+								.withProperties<sqlops.CardProperties>({
+									label: 'label1',
+									value: 'value1',
+									actions: [{ label: 'action', taskId: 'sqlservices.clickTask' }]
+								})
+								.component()
+						]).component(),
+					// 2nd child panel with N cards
+					view.modelBuilder.flexContainer()
+						.withLayout({ flexFlow: 'column' })
+						.withItems([
+							view.modelBuilder.card()
+								.withProperties<sqlops.CardProperties>({
+									label: 'label2',
+									value: 'value2',
+									actions: [{ label: 'action', taskId: 'sqlservices.clickTask' }]
+								})
+								.component()
+						]).component()
+				], { flex: '0 1 50%' })
+				.component();
+			await view.initializeModel(flexModel);
+		});
+	}
+
+	private registerSplitPanelModelView(): void {
+		sqlops.dashboard.registerModelViewProvider('splitPanel', async (view) => {
+			let numPanels = 3;
+			let splitPanel = new SplitPropertiesPanel(view, numPanels);
+			await view.initializeModel(splitPanel.modelBase);
+
+			// Add a bunch of cards after an initial timeout
+			setTimeout(async () => {
+
+				for (let i = 0; i < 10; i++) {
+					let panel = i % numPanels;
+					let card = view.modelBuilder.card().component();
+					card.label = `label${i.toString()}`;
+
+					splitPanel.addItem(card, panel);
+				}
+
+			}, 0);
+
+		});
+	}
+}
+

samples/sqlservices/src/controllers/splitPropertiesPanel.ts

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 controller class that initializes the extension
+ */
+export default class SplitPropertiesPanel {
+	private panels: sqlops.FlexContainer[];
+	private _modelBase: sqlops.FlexContainer;
+	constructor(view: sqlops.ModelView, numPanels: number) {
+		this.panels = [];
+		let ratio = Math.round(100 / numPanels);
+		for (let i = 0; i < numPanels; i++) {
+			this.panels.push(view.modelBuilder.flexContainer()
+				.withLayout({ flexFlow: 'column' }).component());
+		}
+		this._modelBase = view.modelBuilder.flexContainer()
+			.withLayout({
+				flexFlow: 'row'
+			}).withItems(this.panels, {
+				flex: `0 1 ${ratio}%`
+			})
+			.component();
+	}
+
+	public get modelBase(): sqlops.Component {
+		return this._modelBase;
+	}
+
+	public addItem(item: sqlops.Component, panel: number): void {
+		if (panel >= this.panels.length) {
+			throw new Error(`Cannot add to panel ${panel} as only ${this.panels.length - 1} panels defined`);
+		}
+		this.panels[panel].addItem(item, undefined);
+	}
+}
+

samples/sqlservices/src/extension.ts

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 MainController from './controllers/mainController';
+
+let mainController: MainController;
+
+export function activate(context: vscode.ExtensionContext): Promise<boolean> {
+	let activations: Promise<boolean>[] = [];
+
+	// Start the main controller
+	mainController = new MainController(context);
+	context.subscriptions.push(mainController);
+	activations.push(mainController.activate());
+
+	return Promise.all(activations)
+		.then((results: boolean[]) => {
+			for (let result of results) {
+				if (!result) {
+					return false;
+				}
+			}
+			return true;
+		});
+}
+
+export function deactivate(): void {
+	if (mainController) {
+		mainController.deactivate();
+	}
+}

samples/sqlservices/src/media/insights.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#212121;}</style></defs><title>insights</title><path class="cls-1" d="M15,4V8H14V5.71L9.49,10.2l-2-2L2,13.71V14H15v1H1V1H2V12.29L7.49,6.8l2,2L13.28,5H11V4Z"/></svg>

samples/sqlservices/src/media/insights_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>insights_inverse</title><path class="cls-1" d="M15,4V8H14V5.71L9.49,10.2l-2-2L2,13.71V14H15v1H1V1H2V12.29L7.49,6.8l2,2L13.28,5H11V4Z"/></svg>

samples/sqlservices/src/utils.ts

@@ -0,0 +1,52 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 fs from 'fs-extra';
+import * as handlebars from 'handlebars';
+import * as path from 'path';
+import * as vscode from 'vscode';
+
+import * as Constants from './constants';
+import * as nls from 'vscode-nls';
+
+const localize = nls.loadMessageBundle();
+
+/**
+ * Helper to log messages to the developer console if enabled
+ * @param msg Message to log to the console
+ */
+export function logDebug(msg: any): void {
+	let config = vscode.workspace.getConfiguration(Constants.extensionConfigSectionName);
+	let logDebugInfo = config[Constants.configLogDebugInfo];
+	if (logDebugInfo === true) {
+		let currentTime = new Date().toLocaleTimeString();
+		let outputMsg = '[' + currentTime + ']: ' + msg ? msg.toString() : '';
+		console.log(outputMsg);
+	}
+}
+
+export function renderTemplateHtml(extensionPath: string, templateName: string, templateValues: object): Thenable<string> {
+	let templatePath = path.join(extensionPath, 'resources', templateName);
+
+	// 1) Read the template from the disk
+	// 2) Compile it as a handlebars template and render the HTML
+	// 3) On failure, return a simple string as an error
+	return fs.readFile(templatePath, 'utf-8')
+		.then(templateText => {
+			let template = handlebars.compile(templateText);
+			return template(templateValues);
+		})
+		.then(
+			undefined,
+			error => {
+				logDebug(error);
+				return localize('errorLoadingTab', 'An error occurred while loading the tab');
+			}
+		);
+}
+
+