Remote queries: Open query file/text from webview

Author: shati-patel

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

@@ -368,7 +368,8 @@ export interface ParsedResultSets {
 
 export type FromRemoteQueriesMessage =
   | RemoteQueryLoadedMessage
-  | RemoteQueryErrorMessage;
+  | RemoteQueryErrorMessage
+  | OpenFileMsg;
 
 export type ToRemoteQueriesMessage =
   | SetRemoteQueryResultMessage;

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

@@ -4,6 +4,7 @@ import {
   window as Window,
   ViewColumn,
   Uri,
+  workspace,
 } from 'vscode';
 import * as path from 'path';
 
@@ -62,6 +63,8 @@ export class RemoteQueriesInterfaceManager {
     return {
       queryTitle: query.queryName,
       queryFile: queryFile,
+      queryPath: query.queryFilePath,
+      queryTextTmpFile: query.queryTextTmpFile,
       totalRepositoryCount: query.repositories.length,
       affectedRepositoryCount: affectedRepositories.length,
       totalResultCount: totalResultCount,
@@ -129,6 +132,11 @@ export class RemoteQueriesInterfaceManager {
     });
   }
 
+  public async openFile(filePath: string) {
+    const textDocument = await workspace.openTextDocument(filePath);
+    await Window.showTextDocument(textDocument, ViewColumn.One);
+  }
+
   private async handleMsgFromView(
     msg: FromRemoteQueriesMessage
   ): Promise<void> {
@@ -143,6 +151,9 @@ export class RemoteQueriesInterfaceManager {
           `Remote query error: ${msg.error}`
         );
         break;
+      case 'openFile':
+        await this.openFile(msg.filePath);
+        break;
       default:
         assertNever(msg);
     }

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

@@ -3,6 +3,7 @@ import { Repository } from './repository';
 export interface RemoteQuery {
   queryName: string;
   queryFilePath: string;
+  queryTextTmpFile: string;
   controllerRepository: Repository;
   repositories: Repository[];
   executionStartTime: Date;

extensions/ql-vscode/src/remote-queries/run-remote-query.ts

@@ -467,9 +467,13 @@ function buildRemoteQueryEntity(
     return { owner: owner, name: repo };
   });
 
+  // TODO: Get query text from query file and save it in a temporary .ql file. 
+  const queryTextTmpFile = '';
+
   return {
     queryName,
     queryFilePath,
+    queryTextTmpFile,
     controllerRepository: {
       owner: controllerRepoOwner,
       name: controllerRepoName,

extensions/ql-vscode/src/remote-queries/shared/remote-query-result.ts

@@ -1,6 +1,8 @@
 export interface RemoteQueryResult {
   queryTitle: string;
   queryFile: string;
+  queryPath: string;
+  queryTextTmpFile: string;
   totalRepositoryCount: number;
   affectedRepositoryCount: number;
   totalResultCount: number;

extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx

@@ -12,6 +12,8 @@ const numOfReposInContractedMode = 10;
 const emptyQueryResult: RemoteQueryResult = {
   queryTitle: '',
   queryFile: '',
+  queryPath: '',
+  queryTextTmpFile: '',
   totalRepositoryCount: 0,
   affectedRepositoryCount: 0,
   totalResultCount: 0,
@@ -38,6 +40,13 @@ const AnalysisResultItem = (props: AnalysisResult) => (
   </span>
 );
 
+function openFile(filePath: string): void {
+  vscode.postMessage({
+    t: 'openFile',
+    filePath
+  });
+}
+
 export function RemoteQueries(): JSX.Element {
   const [queryResult, setQueryResult] = useState<RemoteQueryResult>(emptyQueryResult);
 
@@ -64,6 +73,14 @@ export function RemoteQueries(): JSX.Element {
   const numOfReposToShow = repoListExpanded ? queryResult.results.length : numOfReposInContractedMode;
 
   try {
+    const openQueryFile = () => {
+      openFile(queryResult.queryPath);
+    };
+
+    const openQueryTextTmpFile = () => {
+      openFile(queryResult.queryTextTmpFile);
+    };
+
     return <div className="vscode-codeql__remote-queries-view">
       <h1 className="vscode-codeql__query-title">{queryResult.queryTitle}</h1>
 
@@ -72,8 +89,16 @@ export function RemoteQueries(): JSX.Element {
         ({queryResult.executionDuration}), {queryResult.executionTimestamp}
       </p>
       <p className="vscode-codeql__paragraph">
-        <span className="vscode-codeql__query-file">{octicons.file} <span>{queryResult.queryFile}</span></span>
-        <span>{octicons.codeSquare} <span>query</span></span>
+        <span className="vscode-codeql__query-file">{octicons.file}
+          <a className="vscode-codeql__query-file-link" href="#" onClick={openQueryFile}>
+            {queryResult.queryFile}
+          </a>
+        </span>
+        <span>{octicons.codeSquare}
+          <a className="vscode-codeql__query-file-link" href="#" onClick={openQueryTextTmpFile}>
+            query
+          </a>
+        </span>
       </p>
 
       <div className="vscode-codeql__query-summary-container">

extensions/ql-vscode/src/remote-queries/view/remoteQueries.css

@@ -39,6 +39,11 @@
   padding-right: 1em;
 }
 
+.vscode-codeql__query-file-link {
+  text-decoration: none;
+  padding-left: 0.3em;
+}
+
 .vscode-codeql__query-summary-container {
   padding-top: 1.5em;
 }