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/tasks/buildtasks.js

@@ -0,0 +1,124 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+"use strict";
+
+let del = require('del');
+let gulp = require('gulp');
+let srcmap = require('gulp-sourcemaps');
+let tslint = require('gulp-tslint');
+let ts = require('gulp-typescript');
+let cproc = require('child_process');
+let os = require('os');
+
+let config = require('./config');
+let tsProject = ts.createProject('tsconfig.json');
+
+
+// GULP TASKS //////////////////////////////////////////////////////////////
+gulp.task('clean', function(done) {
+    return del('out', done);
+});
+
+gulp.task('lint', () => {
+    return gulp.src([
+        config.paths.project.root + '/src/**/*.ts',
+        config.paths.project.root + '/test/**/*.ts'
+    ])
+    .pipe((tslint({
+        formatter: "verbose"
+    })))
+    .pipe(tslint.report());
+});
+
+gulp.task('compile:src', function(done) {
+    gulp.src([
+        config.paths.project.root + '/src/**/*.sql',
+        config.paths.project.root + '/src/**/*.svg',
+        config.paths.project.root + '/src/**/*.html'
+    ]).pipe(gulp.dest('out/src/'));
+
+    let srcFiles = [
+        config.paths.project.root + '/src/**/*.ts',
+        config.paths.project.root + '/src/**/*.js',
+        config.paths.project.root + '/typings/**/*.ts'
+    ];
+
+    return gulp.src(srcFiles)
+        .pipe(srcmap.init())
+        .pipe(tsProject())
+        .on('error', function() {
+            if (process.env.BUILDMACHINE) {
+                done('Extension Tests failed to build. See Above.');
+                process.exit(1);
+            }
+        })
+        .pipe(srcmap.write('.', {
+            sourceRoot: function(file) { 
+                return file.cwd + '/src';
+            }
+        }))
+        .pipe(gulp.dest('out/src/'));
+});
+
+gulp.task('compile:test', function(done) {
+    let srcFiles = [
+        config.paths.project.root + '/test/**/*.ts',
+        config.paths.project.root + '/typings/**/*.ts'
+    ];
+
+    return gulp.src(srcFiles)
+        .pipe(srcmap.init())
+        .pipe(tsProject())
+        .on('error', function() {
+            if(process.env.BUILDMACHINE) {
+                done('Failed to compile test source, see above.');
+                process.exit(1);
+            }
+        })
+        .pipe(srcmap.write('.', {sourceRoot: function(file) { return file.cwd + '/test'; }}))
+        .pipe(gulp.dest('out/test/'));
+});
+
+// COMPOSED GULP TASKS /////////////////////////////////////////////////////
+gulp.task("compile", gulp.series("compile:src", "compile:test"));
+
+gulp.task("build", gulp.series("clean", "lint", "compile"));
+
+gulp.task("watch", function() {
+    gulp.watch([config.paths.project.root + '/src/**/*',
+                config.paths.project.root + '/test/**/*.ts'],
+        gulp.series('build'));
+});
+
+gulp.task('test', (done) => {
+    let workspace = process.env['WORKSPACE'];
+    if (!workspace) {
+        workspace = process.cwd();
+    }
+    process.env.JUNIT_REPORT_PATH = workspace + '/test-reports/ext_xunit.xml';
+
+    let sqlopsPath = 'sqlops';
+    if (process.env['SQLOPS_DEV']) {
+        let suffix = os.platform === 'win32' ? 'bat' : 'sh';
+        sqlopsPath = `${process.env['SQLOPS_DEV']}/scripts/sql-cli.${suffix}`;
+    }
+    console.log(`Using SQLOPS Path of ${sqlopsPath}`);
+
+    cproc.exec(`${sqlopsPath} --extensionDevelopmentPath="${workspace}" --extensionTestsPath="${workspace}/out/test" --verbose`, (error, stdout, stderr) => {
+        if (error) {
+            console.error(`exec error: ${error}`);
+            process.exit(1);
+        }
+        console.log(`stdout: ${stdout}`);
+        console.log(`stderr: ${stderr}`);
+        done();
+    });
+});
+
+gulp.task('copytypings', function() {
+    return gulp.src(config.paths.project.root + '/../../src/sql/sqlops.proposed.d.ts')
+    .pipe(gulp.dest('typings/'));
+});

samples/sqlservices/tasks/config.js

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+var path = require('path');
+
+var projectRoot = path.resolve(path.dirname(__dirname));
+var srcRoot = path.resolve(projectRoot, 'src');
+var localization = path.resolve(projectRoot, 'localization');
+
+var config = {
+    paths: {
+        project: {
+            root: projectRoot,
+            localization: localization
+        },
+        extension: {
+            root: srcRoot
+        }
+    }
+};
+
+module.exports = config;

samples/sqlservices/tasks/packagetasks.js

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+let gulp = require('gulp');
+let exec = require('child-process-promise').exec;
+let color = require('gulp-color');
+
+// CONSTANTS ///////////////////////////////////////////////////////////////
+let packageVals = require('../package');
+
+// HELPER FUNCTIONS ////////////////////////////////////////////////////////
+
+let buildPackage = function(packageName) {
+    // Make sure there are
+    if (!packageVals.repository) {
+        return Promise.reject("Repository field is not defined in package.json");
+    }
+
+    // Initialize the package command with program and command
+    let vsceArgs = [];
+    vsceArgs.push('./node_modules/vsce/out/vsce');
+    vsceArgs.push('package'); // package command
+
+    // Add the package name
+    vsceArgs.push('-o');
+    vsceArgs.push(packageName);
+
+    // Put it all together and execute the command
+    let command = vsceArgs.join(' ');
+    console.log(command);
+    return exec(command);
+};