Da#3240couchbase iq support react built (#328)

Couchbase-Ecosystem · Nov 6, 2023 · 8ca1536 · 8ca1536
1 parent 36778c0
commit 8ca1536
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 91 deletions.
diff --git a/src/iq/couchbaseIqWebviewProvider.ts b/src/iq/couchbaseIqWebviewProvider.ts
@@ -16,7 +16,7 @@
 
 import * as vscode from 'vscode';
 import * as path from 'path';
-import { couchbaseIqWebview } from '../webViews/iq/couchbaseIq.webview';
+import { getIQWebviewContent } from '../webViews/iq/couchbaseIq.webview';
 
 export class CouchbaseIqWebviewProvider implements vscode.WebviewViewProvider {
     public _view?: vscode.WebviewView;
@@ -34,6 +34,12 @@ export class CouchbaseIqWebviewProvider implements vscode.WebviewViewProvider {
                 vscode.Uri.file(path.join(this._context.extensionPath, "dist"))
             ]
         };
-        this._view.webview.html = couchbaseIqWebview();
+
+        const reactAppPathOnDisk = vscode.Uri.file(
+            path.join(this._context.extensionPath, "dist", "iq", "reactBuild.js")
+        );
+
+        const reactAppUri = this._view.webview.asWebviewUri(reactAppPathOnDisk);
+        this._view.webview.html = getIQWebviewContent(reactAppUri, this._context);
     }
 }
diff --git a/src/reactViews/app/tsconfig.json b/src/reactViews/app/tsconfig.json
@@ -7,7 +7,7 @@
         "components/*": ["components/*"]
       },
       "target": "es6",
-      "outDir": "dist",
+      "outDir": "dist/workbench",
       "lib": [
         "es6",
         "DOM",

diff --git a/src/reactViews/iq/bootstrap.tsx b/src/reactViews/iq/bootstrap.tsx
@@ -0,0 +1,17 @@
+// @ts-nocheck
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import "./index.scss";
+
+const container = document.getElementById("vscodeRootIQ");
+const newRoot = createRoot(container);
+
+export const App: React.FC = () => {
+  return (
+    <div>
+      <p>Hello Couchbase IQ</p>
+    </div>
+  );
+};
+
+newRoot.render(<App />);
diff --git a/src/reactViews/iq/index.scss b/src/reactViews/iq/index.scss
@@ -0,0 +1,4 @@
+body {
+    background-color: var(--vscode-editor-background);
+    margin-top: 20px;
+}
diff --git a/src/reactViews/iq/index.tsx b/src/reactViews/iq/index.tsx
@@ -0,0 +1,2 @@
+// @ts-nocheck
+import ('./bootstrap');
diff --git a/src/reactViews/iq/tsconfig.json b/src/reactViews/iq/tsconfig.json
@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+      "module": "esnext",
+      "moduleResolution": "node",
+      "baseUrl": "./",
+      "paths": {
+        "components/*": ["components/*"]
+      },
+      "target": "es6",
+      "outDir": "dist/iq",
+      "lib": [
+        "es6",
+        "DOM",
+        "DOM.Iterable",
+        "es2019"
+      ],
+      "jsx": "react-jsx",
+      "sourceMap": true,
+      "rootDir": "..",
+      "noUnusedLocals": true,
+      "noImplicitReturns": true,
+      "noFallthroughCasesInSwitch": true,
+      "experimentalDecorators": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "resolveJsonModule": true
+    },
+    "exclude": [
+      "node_modules"
+    ]
+  }
+
diff --git a/src/webViews/iq/couchbaseIq.webview.ts b/src/webViews/iq/couchbaseIq.webview.ts
@@ -1,86 +1,40 @@
-
+import * as vscode from 'vscode';
+import * as path from 'path';
 import { getNonce } from "../../util/common";
 
-export const couchbaseIqWebview = ():string => {
-    const nonce = getNonce();
-
-    return `<!DOCTYPE html>
-			<html lang="en">
-			<head>
-				<meta charset="UTF-8">
-				<meta name="viewport" content="width=device-width, initial-scale=1.0" data-license="isc-gnc">
-
-			</head>
-			<body class="overflow-hidden">
-				<div class="flex flex-col h-screen">
-					<div id="introduction" class="flex flex-col justify-between h-full justify-center px-6 w-full relative login-screen overflow-auto">
-						<div data-license="isc-gnc-hi-there" class="flex items-start text-center features-block my-5">
-							<div class="flex flex-col gap-3.5 flex-1">
-								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6 h-6 m-auto">
-									<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path>
-								</svg>
-								<h2>Features</h2>
-								<ul class="flex flex-col gap-3.5 text-xs">
-									<li class="features-li w-full border border-zinc-700 p-3 rounded-md">Access to your ChatGPT conversation history</li>
-									<li class="features-li w-full border border-zinc-700 p-3 rounded-md">Improve your code, add tests & find bugs</li>
-									<li class="features-li w-full border border-zinc-700 p-3 rounded-md">Copy or create new files automatically</li>
-									<li class="features-li w-full border border-zinc-700 p-3 rounded-md">Syntax highlighting with auto language detection</li>
-								</ul>
-							</div>
-						</div>
-						<div class="flex flex-col gap-4 h-full items-center justify-end text-center">
-							<button id="login-button" class="mb-4 btn btn-primary flex gap-2 justify-center p-3 rounded-md">Log in</button>
-							<button id="list-conversations-link" class="hidden mb-4 btn btn-primary flex gap-2 justify-center p-3 rounded-md" title="You can access this feature via the kebab menu below. NOTE: Only available with Browser Auto-login method">
-								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /></svg>&nbsp;Show conversations
-							</button>
-							<p class="max-w-sm text-center text-xs text-slate-500">
-								<a title="" id="settings-button" href="#">Update settings</a>&nbsp; | &nbsp;<a title="" id="settings-prompt-button" href="#">Update prompts</a>
-							</p>
-						</div>
-					</div>
-
-					<div class="flex-1 overflow-y-auto" id="qa-list" data-license="isc-gnc"></div>
-
-					<div class="flex-1 overflow-y-auto hidden" id="conversation-list" data-license="isc-gnc"></div>
-
-					<div id="in-progress" class="pl-4 pt-2 flex items-center hidden" data-license="isc-gnc">
-						<div class="typing">Thinking</div>
-						<div class="spinner">
-							<div class="bounce1"></div>
-							<div class="bounce2"></div>
-							<div class="bounce3"></div>
-						</div>
-
-						<button id="stop-button" class="btn btn-primary flex items-end p-1 pr-2 rounded-md ml-5">
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Stop responding</button>
-					</div>
-
-					<div class="p-4 flex items-center pt-2" data-license="isc-gnc">
-						<div class="flex-1 textarea-wrapper">
-							<textarea
-								type="text"
-								rows="1" data-license="isc-gnc"
-								id="question-input"
-								placeholder="Ask a question..."
-								onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
-						</div>
-						<div id="chat-button-wrapper" class="absolute bottom-14 items-center more-menu right-8 border border-gray-200 shadow-xl hidden text-xs" data-license="isc-gnc">
-							<button class="flex gap-2 items-center justify-start p-2 w-full" id="clear-button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>&nbsp;New chat</button>	
-							<button class="flex gap-2 items-center justify-start p-2 w-full" id="settings-button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>&nbsp;Update settings</button>
-							<button class="flex gap-2 items-center justify-start p-2 w-full" id="export-button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>&nbsp;Export to markdown</button>
-						</div>
-						<div id="question-input-buttons" class="right-6 absolute p-0.5 ml-5 flex items-center gap-2">
-							<button id="more-button" title="More actions" class="rounded-lg p-0.5" data-license="isc-gnc">
-								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
-							</button>
-
-							<button id="ask-button" title="Submit prompt" class="ask-button rounded-lg p-0.5">
-								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
-							</button>
-						</div>
-					</div>
-				</div>
-
-			</body>
-			</html>`;
-}
+export const getIQWebviewContent = (
+	reactAppUri: vscode.Uri,
+	context: vscode.ExtensionContext
+): string => {
+	// Local path to main script run in the webview
+	const reactAppPathOnDisk = vscode.Uri.file(
+		path.join(context.extensionPath, "dist", "iq", "reactBuild.js")
+	);
+	const webviewGenericCspSource = "https://*.vscode-cdn.net";
+
+	const nonce = getNonce();
+	return `<!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Config View</title>
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: vscode-resource:; img-src vscode-resource: https:; script-src 'self' 'nonce-${nonce}'
+             'unsafe-eval' 'unsafe-inline' ${webviewGenericCspSource}; style-src vscode-resource: 'unsafe-inline' http: https: data:; connect-src ${webviewGenericCspSource};">
+
+        <base href="${vscode.Uri.file(
+		path.join(context.extensionPath, "dist")
+	).with({
+		scheme: "vscode-resource",
+	})}/">
+    </head>
+    <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="vscodeRootIQ"><h1>Loading...</h1></div>
+    <script nonce="${nonce}">
+    const tsvscode = acquireVsCodeApi();
+    </script>
+        <script nonce="${nonce}" src="${reactAppUri}"></script>
+    </body>
+    </html>`;
+};
diff --git a/src/webViews/workbench.webview.ts b/src/webViews/workbench.webview.ts
@@ -24,7 +24,7 @@ export const getWebviewContent = (
 ): string => {
     // Local path to main script run in the webview
     const reactAppPathOnDisk = vscode.Uri.file(
-        path.join(context.extensionPath, "dist", "reactBuild.js")
+        path.join(context.extensionPath, "dist", "workbench", "reactBuild.js")
     );
     const webviewGenericCspSource = "https://*.vscode-cdn.net";
 

diff --git a/src/workbench/workbenchWebviewProvider.ts b/src/workbench/workbenchWebviewProvider.ts
@@ -40,7 +40,7 @@ export class WorkbenchWebviewProvider implements vscode.WebviewViewProvider {
         };
 
         const reactAppPathOnDisk = vscode.Uri.file(
-            path.join(this._context.extensionPath, "dist", "reactBuild.js")
+            path.join(this._context.extensionPath, "dist", "workbench", "reactBuild.js")
         );
 
         const reactAppUri = this._view.webview.asWebviewUri(reactAppPathOnDisk);

diff --git a/webpack.config.js b/webpack.config.js
@@ -73,7 +73,7 @@ const reactConfig = {
     reactBuild: "./src/reactViews/app/index",
   },
   output: {
-    path: path.resolve(__dirname, "dist"),
+    path: path.resolve(__dirname, "dist/workbench"),
     filename: "[name].js",
   },
   devtool: "source-map",
@@ -135,4 +135,64 @@ const reactConfig = {
   plugins: [],
 };
 
-module.exports = [extensionConfig, reactConfig];
+/**@type {import('webpack').Configuration}*/
+const iqReactConfig = {
+  target: "web",
+  entry: {
+    reactBuild: "./src/reactViews/iq/index",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist/iq"),
+    filename: "[name].js",
+  },
+  devtool: "source-map",
+  resolve: {
+    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
+    extensions: [".ts", ".tsx", ".js"],
+    alias: {
+    },
+    fallback: {
+      "path": false,
+      "fs": false
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              configFile: "src/reactViews/iq/tsconfig.json",
+            },
+
+          },
+        ],
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: "file-loader", // You can also use "url-loader" if you prefer
+            options: {
+              name: "[name].[ext]", // Output file name and extension
+            },
+          },
+        ],
+      }, 
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.scss$/, // Regular SCSS files (without CSS modules)
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+  plugins: [],
+};
+
+module.exports = [extensionConfig, reactConfig, iqReactConfig];