Add new component for displaying analysis failures

extensions/ql-vscode/src/remote-queries/sample-data.ts

@@ -88,7 +88,11 @@ export const sampleRemoteQueryResult: RemoteQueryResult = {
     {
       nwo: 'big-corp/repo5',
       error: 'Error message'
-    }
+    },
+    {
+      nwo: 'big-corp/repo6',
+      error: 'Error message'
+    },
   ]
 };
 

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 { ThemeProvider } from '@primer/react';
+import { Flash, ThemeProvider } from '@primer/react';
 import { ToRemoteQueriesMessage } from '../../pure/interface-types';
 import { AnalysisSummary, RemoteQueryResult } from '../shared/remote-query-result';
 
@@ -16,7 +16,7 @@ import DownloadButton from './DownloadButton';
 import { AnalysisResults } from '../shared/analysis-result';
 import DownloadSpinner from './DownloadSpinner';
 import CollapsibleItem from './CollapsibleItem';
-import { CodeSquareIcon, FileCodeIcon, FileSymlinkFileIcon, RepoIcon } from '@primer/octicons-react';
+import { AlertIcon, CodeSquareIcon, FileCodeIcon, FileSymlinkFileIcon, RepoIcon } from '@primer/octicons-react';
 
 const numOfReposInContractedMode = 10;
 
@@ -30,7 +30,8 @@ const emptyQueryResult: RemoteQueryResult = {
   totalResultCount: 0,
   executionTimestamp: '',
   executionDuration: '',
-  analysisSummaries: []
+  analysisSummaries: [],
+  analysisFailures: [],
 };
 
 const downloadAnalysisResults = (analysisSummary: AnalysisSummary) => {
@@ -92,6 +93,39 @@ const QueryInfo = (queryResult: RemoteQueryResult) => (
   </>
 );
 
+const Failures = (queryResult: RemoteQueryResult) => {
+  if (queryResult.analysisFailures.length === 0) {
+    return <></>;
+  }
+  return (
+    <>
+      <VerticalSpace size={3} />
+      <Flash
+        variant="danger"
+        // Currently only works for dark mode (potential bug with Flash component)
+        // https://primer.style/react/Flash
+        sx={{
+          backgroundColor: '#3B2229',
+          color: '#ADBAC7',
+        }}
+      >
+        {queryResult.analysisFailures.map((f, i) => (
+          <>
+            <p className="vscode-codeql__analysis-failure" key={i}>
+              <AlertIcon size={16} />
+              <b>{f.nwo}: </b>
+              {f.error}
+            </p>
+            {
+              i === queryResult.analysisFailures.length - 1 ? <></> : <VerticalSpace size={1} />
+            }
+          </>
+        ))}
+      </Flash>
+    </>
+  );
+};
+
 const SummaryTitleWithResults = ({
   queryResult,
   analysesResults
@@ -297,6 +331,7 @@ export function RemoteQueries(): JSX.Element {
       <ThemeProvider>
         <ViewTitle>{queryResult.queryTitle}</ViewTitle>
         <QueryInfo {...queryResult} />
+        <Failures {...queryResult} />
         <Summary queryResult={queryResult} analysesResults={analysesResults} />
         {showAnalysesResults && <AnalysesResults analysesResults={analysesResults} totalResults={queryResult.totalResultCount} />}
       </ThemeProvider>

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

@@ -52,3 +52,9 @@
 .vscode-codeql__analysis-result-file-link {
   vertical-align: middle;
 }
+
+.vscode-codeql__analysis-failure {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+}