Merge remote queries webview outline into main (#1027)

Author: shati-patel

extensions/ql-vscode/gulpfile.ts/typescript.ts

@@ -37,6 +37,6 @@ export function watchTypeScript() {
 
 /** Copy CSS files for the results view into the output directory. */
 export function copyViewCss() {
-  return gulp.src('src/view/*.css')
+  return gulp.src('src/**/view/*.css')
     .pipe(gulp.dest('out'));
 }

extensions/ql-vscode/gulpfile.ts/webpack.config.ts

@@ -6,6 +6,7 @@ export const config: webpack.Configuration = {
   entry: {
     resultsView: './src/view/results.tsx',
     compareView: './src/compare/view/Compare.tsx',
+    remoteQueriesView: './src/remote-queries/view/RemoteQueries.tsx',
   },
   output: {
     path: path.resolve(__dirname, '..', 'out'),

extensions/ql-vscode/package.json

@@ -284,6 +284,10 @@
         "command": "codeQL.runRemoteQuery",
         "title": "CodeQL: Run Remote Query"
       },
+      {
+        "command": "codeQL.openRemoteQueriesView",
+        "title": "CodeQL: Open Remote Queries View"
+      },
       {
         "command": "codeQL.runQueries",
         "title": "CodeQL: Run Queries in Selected Files"
@@ -746,6 +750,10 @@
           "command": "codeQL.runRemoteQuery",
           "when": "config.codeQL.canary && editorLangId == ql && resourceExtname == .ql"
         },
+        {
+          "command": "codeQL.openRemoteQueriesView",
+          "when": "config.codeQL.canary"
+        },
         {
           "command": "codeQL.runQueries",
           "when": "false"

extensions/ql-vscode/src/extension.ts

@@ -74,7 +74,8 @@ import {
 import { CodeQlStatusBarHandler } from './status-bar';
 
 import { Credentials } from './authentication';
-import { runRemoteQuery } from './run-remote-query';
+import { runRemoteQuery } from './remote-queries/run-remote-query';
+import { RemoteQueriesInterfaceManager } from './remote-queries/remote-queries-interface';
 
 /**
  * extension.ts
@@ -501,23 +502,23 @@ async function activateWithInstalledDistribution(
     selectedQuery: Uri
   ): Promise<void> {
     // selectedQuery is unpopulated when executing through the command palette
-    const pathToQhelp =  selectedQuery ? selectedQuery.fsPath : window.activeTextEditor?.document.uri.fsPath;
-    if(pathToQhelp) {
+    const pathToQhelp = selectedQuery ? selectedQuery.fsPath : window.activeTextEditor?.document.uri.fsPath;
+    if (pathToQhelp) {
       // Create temporary directory
       const relativePathToMd = path.basename(pathToQhelp, '.qhelp') + '.md';
       const absolutePathToMd = path.join(qhelpTmpDir.name, relativePathToMd);
       const uri = Uri.file(absolutePathToMd);
       try {
-        await cliServer.generateQueryHelp(pathToQhelp , absolutePathToMd);
+        await cliServer.generateQueryHelp(pathToQhelp, absolutePathToMd);
         await commands.executeCommand('markdown.showPreviewToSide', uri);
       } catch (err) {
-        const errorMessage =  err.message.includes('Generating qhelp in markdown') ? (
+        const errorMessage = err.message.includes('Generating qhelp in markdown') ? (
           `Could not generate markdown from ${pathToQhelp}: Bad formatting in .qhelp file.`
         ) : `Could not open a preview of the generated file (${absolutePathToMd}).`;
         void helpers.showAndLogErrorMessage(errorMessage, { fullMessage: `${errorMessage}\n${err}` });
       }
     }
-    
+
   }
 
   async function openReferencedFile(
@@ -743,6 +744,14 @@ async function activateWithInstalledDistribution(
       }
     )
   );
+
+  void logger.log('Initializing remote queries panel interface.');
+  const rmpm = new RemoteQueriesInterfaceManager(
+    ctx,
+    logger
+  );
+  ctx.subscriptions.push(rmpm);
+
   // The "runRemoteQuery" command is internal-only.
   ctx.subscriptions.push(
     commandRunnerWithProgress('codeQL.runRemoteQuery', async (

extensions/ql-vscode/src/pure/interface-types.ts

@@ -364,3 +364,23 @@ export interface ParsedResultSets {
   resultSetNames: string[];
   resultSet: ResultSet;
 }
+
+export type FromRemoteQueriesMessage =
+  | RemoteQueryLoadedMessage
+  | RemoteQueryErrorMessage;
+
+export type ToRemoteQueriesMessage =
+  | OpenRemoteQueriesViewMessage;
+
+export interface RemoteQueryLoadedMessage {
+  t: 'remoteQueryLoaded';
+}
+
+export interface OpenRemoteQueriesViewMessage {
+  t: 'openRemoteQueriesView';
+}
+
+export interface RemoteQueryErrorMessage {
+  t: 'remoteQueryError';
+  error: string;
+}

extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts

@@ -0,0 +1,134 @@
+import { DisposableObject } from '../pure/disposable-object';
+import {
+  WebviewPanel,
+  ExtensionContext,
+  window as Window,
+  ViewColumn,
+  Uri,
+} from 'vscode';
+import * as path from 'path';
+
+import { tmpDir } from '../run-queries';
+import {
+  ToRemoteQueriesMessage,
+  FromRemoteQueriesMessage,
+} from '../pure/interface-types';
+import { Logger } from '../logging';
+import { getHtmlForWebview } from '../interface-utils';
+import { assertNever } from '../pure/helpers-pure';
+import { commandRunner } from '../commandRunner';
+
+
+export class RemoteQueriesInterfaceManager extends DisposableObject {
+  private panel: WebviewPanel | undefined;
+  private panelLoaded = false;
+  private panelLoadedCallBacks: (() => void)[] = [];
+
+  constructor(
+    private ctx: ExtensionContext,
+    private logger: Logger,
+  ) {
+    super();
+    commandRunner('codeQL.openRemoteQueriesView', () => this.handleOpenRemoteQueriesView());
+    this.panelLoadedCallBacks.push(() => {
+      void logger.log('Remote queries view loaded');
+    });
+  }
+
+  async showResults() {
+    this.getPanel().reveal(undefined, true);
+
+    await this.waitForPanelLoaded();
+    await this.postMessage({
+      t: 'openRemoteQueriesView',
+    });
+  }
+
+  getPanel(): WebviewPanel {
+    if (this.panel == undefined) {
+      const { ctx } = this;
+      const panel = (this.panel = Window.createWebviewPanel(
+        'remoteQueriesView',
+        'Remote Query Results',
+        { viewColumn: ViewColumn.Active, preserveFocus: true },
+        {
+          enableScripts: true,
+          enableFindWidget: true,
+          retainContextWhenHidden: true,
+          localResourceRoots: [
+            Uri.file(tmpDir.name),
+            Uri.file(path.join(this.ctx.extensionPath, 'out')),
+          ],
+        }
+      ));
+      this.panel.onDidDispose(
+        () => {
+          this.panel = undefined;
+        },
+        null,
+        ctx.subscriptions
+      );
+
+      const scriptPathOnDisk = Uri.file(
+        ctx.asAbsolutePath('out/remoteQueriesView.js')
+      );
+
+      const stylesheetPathOnDisk = Uri.file(
+        ctx.asAbsolutePath('out/remote-queries/view/remoteQueries.css')
+      );
+
+      panel.webview.html = getHtmlForWebview(
+        panel.webview,
+        scriptPathOnDisk,
+        stylesheetPathOnDisk
+      );
+      panel.webview.onDidReceiveMessage(
+        async (e) => this.handleMsgFromView(e),
+        undefined,
+        ctx.subscriptions
+      );
+    }
+    return this.panel;
+  }
+
+  private waitForPanelLoaded(): Promise<void> {
+    return new Promise((resolve) => {
+      if (this.panelLoaded) {
+        resolve();
+      } else {
+        this.panelLoadedCallBacks.push(resolve);
+      }
+    });
+  }
+
+  private async handleMsgFromView(
+    msg: FromRemoteQueriesMessage
+  ): Promise<void> {
+    switch (msg.t) {
+      case 'remoteQueryLoaded':
+        this.panelLoaded = true;
+        this.panelLoadedCallBacks.forEach((cb) => cb());
+        this.panelLoadedCallBacks = [];
+        break;
+      case 'remoteQueryError':
+        void this.logger.log(
+          `Remote query error: ${msg.error}`
+        );
+        break;
+      default:
+        assertNever(msg);
+    }
+  }
+
+  private postMessage(msg: ToRemoteQueriesMessage): Thenable<boolean> {
+    return this.getPanel().webview.postMessage(msg);
+  }
+
+  async handleOpenRemoteQueriesView() {
+    this.getPanel().reveal(undefined, true);
+
+    await this.waitForPanelLoaded();
+  }
+
+}
+