Adding react and table designer to the extension (#17914)

* Update dependencies and add new files

* fix builds

* chore: Add gulp task to compile mssql-react-app

* Adding react web view controller

* chore: Update dependencies and remove unused packages

* chore: Update dependencies and remove unused packages

* Update dependencies and fix build

* Add table designer service and contracts

* Initializing service on startup

* Refactor table designer service and contracts

* Refactor table designer service and contracts

* Adding table errors

* Code cleanup and finishing callouts

* Fixing divider visibility in results

* adding drag and drop to table

* Fixing gulp watch and compilation errors

* Fixing yarn install script

* chore: Add 'ext:compile-mssql-react-app' task to 'ext:build' gulp task

* Hacky fix for showing table designer on right node

* Adding ability to edit tables

* Removing table designer from command pallette.

* adding copyright

* more copyright

* fixing eslint

* Adding preview flag

* chore: Remove commented out code in vite.config.ts

Author: aasimkhan30

.vscode/launch.json

@@ -2,6 +2,9 @@
 {
 	"version": "0.1.0",
 	"configurations": [
+
+
+
 		{
 			"type": "node",
 			"request": "launch",
@@ -30,7 +33,8 @@
 			],
 			"sourceMaps": true,
 			"outFiles": [
-				"${workspaceRoot}/out/src/**/*.js"
+				"${workspaceRoot}/out/src/**/*.js",
+				"${workspaceRoot}/myssql-react-app/dist/**/*.js"
 			],
 			"preLaunchTask": "build",
 			"env": {

gulpfile.js

@@ -12,6 +12,7 @@ var nls = require('vscode-nls-dev');
 var argv = require('yargs').argv;
 var min = (argv.min === undefined) ? false : true;
 var vscodeTest = require('@vscode/test-electron');
+var { exec } = require('child_process');
 const gulpESLintNew = require('gulp-eslint-new');
 
 require('./tasks/packagetasks');
@@ -23,7 +24,9 @@ gulp.task('ext:lint', () => {
 		'!' + config.paths.project.root + '/src/views/htmlcontent/**/*',
 		config.paths.project.root + '/test/unit/**/*.ts'
 	])
-		.pipe(gulpESLintNew())
+		.pipe(gulpESLintNew({
+			quiet: true
+		}))
 		.pipe(gulpESLintNew.format())           // Output lint results to the console.
 		.pipe(gulpESLintNew.failAfterError());
 });
@@ -78,6 +81,18 @@ gulp.task('ext:compile-view', (done) => {
 		.pipe(gulp.dest('out/src/views/htmlcontent'));
 });
 
+// Compile react views
+gulp.task('ext:compile-mssql-react-app', (done) => {
+	return exec('cd mssql-react-app && yarn build --emptyOutDir', {
+		continueOnError: true
+	}, (err, stdout, stderr) => {
+		console.log(stdout);
+		console.error(stderr);
+		done();
+	});
+})
+
+
 // Copy systemjs config file
 gulp.task('ext:copy-systemjs-config', (done) => {
 	return gulp.src([
@@ -227,7 +242,7 @@ gulp.task('ext:copy', gulp.series('ext:copy-tests', 'ext:copy-js', 'ext:copy-con
 
 gulp.task('ext:localization', gulp.series('ext:localization:generate-eng-package.nls', 'ext:localization:xliff-to-ts', 'ext:localization:xliff-to-json', 'ext:localization:xliff-to-package.nls'));
 
-gulp.task('ext:build', gulp.series('ext:localization', 'ext:copy', 'ext:clean-library-ts-files', 'ext:compile', 'ext:compile-view')); // removed lint before copy
+gulp.task('ext:build', gulp.series('ext:localization', 'ext:copy', 'ext:clean-library-ts-files', 'ext:compile', 'ext:compile-view', 'ext:compile-mssql-react-app')); // removed lint before copy
 
 gulp.task('ext:test', async () => {
 	let workspace = process.env['WORKSPACE'];
@@ -264,8 +279,12 @@ gulp.task('watch-tests', function () {
 	return gulp.watch('./test/unit/**/*.ts', gulp.series('ext:compile-tests'))
 });
 
+gulp.task('watch-mssql-react-app', function () {
+	return gulp.watch('./mssql-react-app/src/**/*', gulp.series('ext:compile-mssql-react-app'))
+});
+
 // Do a full build first so we have the latest compiled files before we start watching for more changes
-gulp.task('watch', gulp.series('build', gulp.parallel('watch-src', 'watch-tests')));
+gulp.task('watch', gulp.series('build', gulp.parallel('watch-src', 'watch-tests', 'watch-mssql-react-app')));
 
 gulp.task('lint', gulp.series('ext:lint'));
 

media/newTable.svg

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

media/newTable_inverse.svg

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

mssql-react-app/.eslintrc.cjs

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

mssql-react-app/.gitignore

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

mssql-react-app/README.md

@@ -0,0 +1,36 @@
+{
+  "name": "mssql-react-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite build --watch --emptyOutDir",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fluentui/react-components": "^9.51.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@types/vscode-webview": "^1.57.5",
+    "@vscode/webview-ui-toolkit": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "react-resizable": "^3.0.5",
+    "react-router-dom": "^6.23.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-resizable": "^3.0.7",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}

mssql-react-app/index.html

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { WebviewApi } from "vscode-webview";
+
+export class WebviewRpc {
+	private _rpcRequestId = 0;
+	private _rpcHandlers: { [id: number]: { resolve: (result: unknown) => void, reject: (error: unknown) => void } } = {};
+	private _methodSubscriptions: { [method: string]: ((params: unknown) => void)[] } = {};
+
+	constructor(private _vscodeApi: WebviewApi<unknown>) {
+		window.addEventListener('message', (event) => {
+			const message = event.data;
+            if (message.type === 'response') {
+                const { id, result, error } = message;
+                if (this._rpcHandlers[id]) {
+                    if (error) {
+                        this._rpcHandlers[id].reject(error);
+                    } else {
+                        this._rpcHandlers[id].resolve(result);
+                    }
+                    delete this._rpcHandlers[id];
+                }
+            }
+			if (message.type === 'notification') {
+				const { method, params } = message;
+				if (this._methodSubscriptions[method]) {
+					this._methodSubscriptions[method].forEach(callback => callback(params));
+				}
+			}
+		});
+
+	}
+
+	public call(method: string, params?: unknown): Promise<unknown> {
+		const id = this._rpcRequestId++;
+		this._vscodeApi.postMessage({ type: 'request', id, method, params });
+		return new Promise((resolve, reject) => {
+			this._rpcHandlers[id] = { resolve, reject };
+		});
+	}
+
+	public action(type: string, payload?: unknown) {
+		this.call('action', { type, payload });
+	}
+
+	public subscribe(method: string, callback: (params: unknown) => void) {
+		if (!this._methodSubscriptions[method]) {
+			this._methodSubscriptions[method] = [];
+		}
+		this._methodSubscriptions[method].push(callback);
+	}
+}

mssql-react-app/package.json

@@ -0,0 +1,73 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { FluentProvider, Theme, teamsHighContrastTheme, webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import { createContext, useState } from "react";
+import { WebviewApi } from "vscode-webview";
+import { WebviewRpc } from "./rpc";
+
+interface VscodeWebviewContext {
+	vscodeApi: WebviewApi<unknown>;
+	extensionRpc: WebviewRpc;
+	state: unknown;
+	theme: Theme;
+}
+
+const vscodeApiInstance = acquireVsCodeApi<unknown>();
+
+const VscodeWebviewContext = createContext<VscodeWebviewContext | undefined>(undefined);
+
+interface VscodeWebViewProviderProps {
+	children: React.ReactNode;
+}
+
+const VscodeWebViewProvider: React.FC<VscodeWebViewProviderProps> = ({ children }) => {
+	const vscodeApi = vscodeApiInstance;
+	const extensionRpc = new WebviewRpc(vscodeApi);
+	const [theme, setTheme] = useState(webLightTheme);
+	const [state, setState] = useState<unknown>();
+
+	extensionRpc.subscribe('onDidChangeTheme', (params) => {
+		const kind = params as ColorThemeKind;
+		switch (kind) {
+			case ColorThemeKind.Dark:
+				setTheme(webDarkTheme);
+				break;
+			case ColorThemeKind.HighContrast:
+				setTheme(teamsHighContrastTheme);
+				break;
+			default:
+				setTheme(webLightTheme);
+				break;
+		}
+	});
+
+	extensionRpc.subscribe('updateState', (params) => {
+		setState(params);
+	});
+
+	return <VscodeWebviewContext.Provider value={{
+		vscodeApi: vscodeApi,
+		extensionRpc: extensionRpc,
+		state: state,
+		theme: theme
+	}}>
+		<FluentProvider style={{
+			height: '100%',
+			width: '100%',
+			color: 'var(--vscode-foreground)',
+		}} theme={theme}>
+			{children}
+		</FluentProvider>
+	</VscodeWebviewContext.Provider>;
+}
+
+export { VscodeWebviewContext, VscodeWebViewProvider };
+export enum ColorThemeKind {
+	Light = 1,
+	Dark = 2,
+	HighContrast = 3,
+	HighContrastLight = 4
+}

mssql-react-app/public/vite.svg

@@ -0,0 +1,8 @@
+#root {
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: 'var(--vscode-foreground)',
+}