query panel migration revamp

package.json

@@ -81,6 +81,11 @@
             "description": "Enable the new query panel in dbt.",
             "default": true
           },
+          "dbt.enableQueryPanelV2": {
+            "type": "boolean",
+            "description": "Enable the new query panel in dbt.",
+            "default": false
+          },
           "dbt.lineage.showSelectEdges": {
             "type": "boolean",
             "description": "Show select edges in lineage panel.",
@@ -149,6 +154,20 @@
             "default": 500,
             "minimum": 1
           },
+          "dbt.perspectiveTheme": {
+            "type": "string",
+            "description": "Theme for perspective viewer in query results panel",
+            "default": "Vintage",
+            "enum": [
+              "Vintage",
+              "Pro Light",
+              "Pro Dark",
+              "Vaporwave",
+              "Solarized",
+              "Solarized Dark",
+              "Monokai"
+            ]
+          },
           "dbt.conversationsPollingInterval": {
             "type": "integer",
             "description": "Polling interval to fetch latest conversations (in seconds)",

query_panel/index.html

@@ -95,7 +95,7 @@
           "Welcome 🚀" }}
         </vscode-panel-tab>
         <vscode-panel-tab id="tab-4" v-show="hasData" @click="togglePerspective"
-          >{{ isPerspective ? "Show legacy UI" : "Show new UI"
+          >{{ isPerspective ? "Switch to legacy UI" : "Switch to new UI"
           }}</vscode-panel-tab
         >
         <vscode-panel-tab id="tab-5" @click="onFeedback"
@@ -134,6 +134,21 @@
                   >Download as CSV</vscode-button
                 >
               </div>
+              <br />
+              <div class="new-ux-alert">
+                <span
+                  >This legacy query results UI will be deprecated soon. The new
+                  UI includes this functionality plus additional features.
+                  Please contact us via
+                  <a href="https://getdbt.slack.com/archives/C05KPDGRMDW"
+                    >Slack</a
+                  >
+                  if needed.</span
+                >
+                <vscode-button class="btn-new-ux" @click="toggleV2"
+                  >Switch to new UI
+                </vscode-button>
+              </div>
               <div id="query-results" :style="getTableStyles()"></div>
             </div>
           </div>
@@ -199,6 +214,12 @@ <h2>Query Explanation</h2>
           </div>
 
           <div class="help-body">
+            <div class="new-ux-alert">
+              We are launching new and improved query results panel.
+              <vscode-button class="btn-new-ux" @click="toggleV2"
+                >Switch to new UI
+              </vscode-button>
+            </div>
             <h2>Previewing Query</h2>
             <p>
               Press Cmd+Enter (Mac) or Control+Enter (Windows/Linux) to run a

query_panel/main.js

@@ -153,7 +153,12 @@ const app = createApp({
   methods: {
     togglePerspective() {
       this.isPerspective = !this.isPerspective;
-      updateConfig({ enableNewQueryPanel: this.isPerspective });
+      // If user is in legacy view v0, and switches to new ui, take to v2
+      // if user is in v1, switches to legacy v0, take to v0
+      updateConfig({
+        enableNewQueryPanel: this.isPerspective,
+        enableQueryPanelV2: this.isPerspective,
+      });
       this.updateTable(this.data);
       setTimeout(() => {
         document.querySelector("#panel-manager").activeid = "tab-1";
@@ -363,6 +368,9 @@ const app = createApp({
         compiledSql: this.compiledCode,
       });
     },
+    toggleV2() {
+      updateConfig({ enableQueryPanelV2: true });
+    },
     onFeedback() {
       const prevTab = document.querySelector("#panel-manager").activeid;
       executeCommand("openUrl", {
@@ -515,6 +523,7 @@ const app = createApp({
       }
     });
     window.addEventListener("resize", this.handleResize);
+    executeCommand("webview:ready", {});
   },
   unmounted() {
     window.removeEventListener("resize", this.handleResize);

query_panel/style.css

@@ -147,3 +147,19 @@ th {
 regular-table::-webkit-scrollbar-thumb {
   border-width: 2px;
 }
+
+.new-ux-alert {
+  border-radius: 4px;
+  background: rgba(255, 206, 115, 0.1);
+  color: var(--Stroke-Orange, #e38e00);
+  padding: 10px;
+  line-height: 2;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.btn-new-ux {
+  background: #e38e00;
+  vertical-align: middle;
+}

src/dbt_client/dbtCoreIntegration.ts

@@ -368,13 +368,13 @@ export class DBTCoreProjectIntegration
     const queryThread = this.executionInfrastructure.createPythonBridge(
       this.projectRoot.fsPath,
     );
-    await this.createPythonDbtProject(queryThread);
-    await queryThread.ex`project.init_project()`;
     return new QueryExecution(
       async () => {
         queryThread.kill(2);
       },
       async () => {
+        await this.createPythonDbtProject(queryThread);
+        await queryThread.ex`project.init_project()`;
         // compile query
         const compiledQuery = await this.unsafeCompileQuery(limitQuery);
         // execute query

src/inversify.config.ts

@@ -18,7 +18,6 @@ import { DBTProjectLogFactory } from "./manifest/modules/dbtProjectLog";
 import { SourceFileWatchersFactory } from "./manifest/modules/sourceFileWatchers";
 import { TargetWatchersFactory } from "./manifest/modules/targetWatchers";
 import { PythonEnvironment } from "./manifest/pythonEnvironment";
-import { QueryResultPanel } from "./webview_provider/queryResultPanel";
 import { TelemetryService } from "./telemetry";
 import {
   DBTCoreProjectDetection,
@@ -39,6 +38,7 @@ import { CommandProcessExecutionFactory } from "./commandProcessExecution";
 import { AltimateRequest } from "./altimate";
 import { ValidationProvider } from "./validation_provider";
 import { DeferToProdService } from "./services/deferToProdService";
+import { SharedStateService } from "./services/sharedStateService";
 
 export const container = new Container();
 container.load(buildProviderModule());
@@ -159,7 +159,7 @@ container
           container.get(TargetWatchersFactory),
           container.get(DBTCommandFactory),
           container.get(DBTTerminal),
-          container.get(QueryResultPanel),
+          container.get(SharedStateService),
           container.get(TelemetryService),
           container.get("Factory<DBTCoreProjectIntegration>"),
           container.get("Factory<DBTCloudProjectIntegration>"),

src/manifest/dbtProject.ts

@@ -25,7 +25,6 @@ import {
   extendErrorWithSupportLinks,
   setupWatcherHandler,
 } from "../utils";
-import { QueryResultPanel } from "../webview_provider/queryResultPanel";
 import {
   ManifestCacheChangedEvent,
   RebuildManifestStatusChange,
@@ -58,6 +57,7 @@ import { ValidationProvider } from "../validation_provider";
 import { ModelNode } from "../altimate";
 import { ColumnMetaData } from "../domain";
 import { AltimateConfigProps } from "../webview_provider/insightsPanel";
+import { SharedStateService } from "../services/sharedStateService";
 
 interface FileNameTemplateMap {
   [key: string]: string;
@@ -104,7 +104,7 @@ export class DBTProject implements Disposable {
     private targetWatchersFactory: TargetWatchersFactory,
     private dbtCommandFactory: DBTCommandFactory,
     private terminal: DBTTerminal,
-    private queryResultPanel: QueryResultPanel,
+    private eventEmitterService: SharedStateService,
     private telemetry: TelemetryService,
     private dbtCoreIntegrationFactory: (
       path: Uri,
@@ -889,11 +889,14 @@ select * from renamed
       adapter: this.getAdapterType(),
       limit: limit.toString(),
     });
-    // TODO: this should generate an event instead of directly going to the panel
-    this.queryResultPanel.executeQuery(
-      query,
-      this.dbtProjectIntegration.executeSQL(query, limit),
-    );
+
+    this.eventEmitterService.fire({
+      command: "executeQuery",
+      payload: {
+        query,
+        fn: this.dbtProjectIntegration.executeSQL(query, limit),
+      },
+    });
   }
 
   async dispose() {

src/webview_provider/altimateWebviewProvider.ts

@@ -43,7 +43,7 @@ export interface SharedStateEventEmitterProps {
   payload: Record<string, unknown>;
 }
 
-interface SendMessageProps extends Record<string, unknown> {
+export interface SendMessageProps extends Record<string, unknown> {
   command: string;
   syncRequestId?: string;
   error?: string;
@@ -296,6 +296,12 @@ export class AltimateWebviewProvider implements WebviewViewProvider {
             params.properties as { [key: string]: string },
           );
           break;
+        case "setContext":
+          this.dbtProjectContainer.setToGlobalState(
+            params.key as string,
+            params.value,
+          );
+          break;
         case "updateConfig":
           if (!this.isUpdateConfigProps(params)) {
             return;
@@ -426,17 +432,17 @@ export class AltimateWebviewProvider implements WebviewViewProvider {
         ),
       ),
     );
-    // const insightsCss = webview.asWebviewUri(
-    //   Uri.file(
-    //     path.join(
-    //       extensionUri.fsPath,
-    //       "webview_panels",
-    //       "dist",
-    //       "assets",
-    //       "Insights.css",
-    //     ),
-    //   ),
-    // );
+    const SpinnerUrl = webview.asWebviewUri(
+      Uri.file(
+        path.join(
+          extensionUri.fsPath,
+          "webview_panels",
+          "dist",
+          "assets",
+          "spinner.gif",
+        ),
+      ),
+    );
     const codiconsUri = webview.asWebviewUri(
       Uri.joinPath(
         extensionUri,
@@ -460,7 +466,7 @@ export class AltimateWebviewProvider implements WebviewViewProvider {
               and only allow scripts that have a specific nonce.
               Added unsafe-inline for css due to csp issue: https://github.com/JedWatson/react-select/issues/4631
               -->
-            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src 'unsafe-inline' ${webview.cspSource}; img-src ${webview.cspSource} https: data:; script-src 'nonce-${nonce}' https://*.vscode-resource.vscode-cdn.net; connect-src https://*.s3.amazonaws.com">
+            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; worker-src blob:; font-src ${webview.cspSource}; style-src 'unsafe-inline' ${webview.cspSource}; img-src ${webview.cspSource} https: data:; script-src 'unsafe-eval' 'nonce-${nonce}' https://*.vscode-resource.vscode-cdn.net; connect-src https://*.s3.amazonaws.com">
             <title>VSCode DBT Power user extension</title>
             <link rel="stylesheet" type="text/css" href="${indexCss}">
             <link rel="stylesheet" type="text/css" href="${codiconsUri}">
@@ -471,6 +477,7 @@ export class AltimateWebviewProvider implements WebviewViewProvider {
             <div id="sidebar"></div>
             <script nonce="${nonce}" >
               window.viewPath = "${this.viewPath}";
+              var spinnerUrl = "${SpinnerUrl}"
             </script>
 
             <script nonce="${nonce}" type="module" src="${indexJs}"></script>