MRVA: Add webview button to export results

Author: shati-patel

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

@@ -394,7 +394,8 @@ export type FromRemoteQueriesMessage =
   | OpenFileMsg
   | OpenVirtualFileMsg
   | RemoteQueryDownloadAnalysisResultsMessage
-  | RemoteQueryDownloadAllAnalysesResultsMessage;
+  | RemoteQueryDownloadAllAnalysesResultsMessage
+  | RemoteQueryExportResultsMessage;
 
 export type ToRemoteQueriesMessage =
   | SetRemoteQueryResultMessage
@@ -429,3 +430,6 @@ export interface RemoteQueryDownloadAllAnalysesResultsMessage {
   analysisSummaries: AnalysisSummary[];
 }
 
+export interface RemoteQueryExportResultsMessage {
+  t: 'remoteQueryExportResults';
+}

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

@@ -4,7 +4,8 @@ import {
   window as Window,
   ViewColumn,
   Uri,
-  workspace
+  workspace,
+  commands
 } from 'vscode';
 import * as path from 'path';
 
@@ -210,6 +211,9 @@ export class RemoteQueriesInterfaceManager {
       case 'remoteQueryDownloadAllAnalysesResults':
         await this.downloadAllAnalysesResults(msg);
         break;
+      case 'remoteQueryExportResults':
+        await await commands.executeCommand('codeQL.exportVariantAnalysisResults');
+        break;
       default:
         assertNever(msg);
     }

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const Button = styled.a`
+  color: var(--vscode-button-foreground);
+  background-color: var(--vscode-button-background);
+  &:hover {
+    color: var(--vscode-button-foreground);
+    text-decoration: none;
+    background-color: var(--vscode-button-hoverBackground);
+  }
+  cursor: pointer;
+  padding: 5px 10px;
+`;
+
+const ExportButton = ({ text, onClick }: { text: string, onClick: () => void }) => (
+  <Button className="monaco-button monaco-text-button" onClick={onClick}>
+    {text}
+  </Button>
+);
+
+export default ExportButton;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import * as Rdom from 'react-dom';
-import { Flash, ThemeProvider } from '@primer/react';
+import { Box, Flash, ThemeProvider } from '@primer/react';
 import { ToRemoteQueriesMessage } from '../../pure/interface-types';
 import { AnalysisSummary, RemoteQueryResult } from '../shared/remote-query-result';
 import { MAX_RAW_RESULTS } from '../shared/result-limits';
@@ -20,6 +20,7 @@ import { AlertIcon, CodeSquareIcon, FileCodeIcon, RepoIcon, TerminalIcon } from
 import AnalysisAlertResult from './AnalysisAlertResult';
 import RawResultsTable from './RawResultsTable';
 import RepositoriesSearch from './RepositoriesSearch';
+import ExportButton from './ExportButton';
 
 const numOfReposInContractedMode = 10;
 
@@ -238,6 +239,12 @@ const AnalysesResultsTitle = ({ totalAnalysesResults, totalResults }: { totalAna
   return <SectionTitle>{totalAnalysesResults}/{totalResults} results</SectionTitle>;
 };
 
+const exportResults = () => {
+  vscode.postMessage({
+    t: 'remoteQueryExportResults',
+  });
+};
+
 const AnalysesResultsDescription = ({
   queryResult,
   analysesResults,
@@ -313,9 +320,16 @@ const AnalysesResults = ({
   return (
     <>
       <VerticalSpace size={2} />
-      <AnalysesResultsTitle
-        totalAnalysesResults={totalAnalysesResults}
-        totalResults={totalResults} />
+      <Box display="flex">
+        <Box flexGrow={1}>
+          <AnalysesResultsTitle
+            totalAnalysesResults={totalAnalysesResults}
+            totalResults={totalResults} />
+        </Box>
+        <Box>
+          <ExportButton text="Export all" onClick={() => exportResults()}></ExportButton>
+        </Box>
+      </Box>
       <AnalysesResultsDescription
         queryResult={queryResult}
         analysesResults={analysesResults} />