Show collapsible analyses results (#1116)

Author: charisk

extensions/ql-vscode/package-lock.json

@@ -1013,6 +1013,7 @@
   },
   "dependencies": {
     "@octokit/rest": "^18.5.6",
+    "@primer/octicons-react": "^16.3.0",
     "@primer/react": "^34.3.0",
     "child-process-promise": "^2.2.1",
     "classnames": "~2.2.6",

extensions/ql-vscode/package.json

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { ChevronDownIcon, ChevronRightIcon } from '@primer/octicons-react';
+import { useState } from 'react';
+
+const Container = styled.div`
+  display: block;
+  vertical-align: middle;
+`;
+
+const TitleContainer = styled.span`
+  display: inline-block;
+`;
+
+const Button = styled.button`
+  display: inline-block;
+  background-color: transparent;
+  border: none;
+  padding-left: 0;
+  padding-right: 0.1em;
+`;
+
+const CollapsibleItem = ({
+  title,
+  children
+}: {
+  title: React.ReactNode;
+  children: React.ReactNode
+}) => {
+  const [isExpanded, setExpanded] = useState(false);
+  return (
+    <>
+      <Container>
+        <Button onClick={() => setExpanded(!isExpanded)}>
+          {isExpanded
+            ? <ChevronDownIcon size={16} />
+            : <ChevronRightIcon size={16} />
+          }
+        </Button>
+        <TitleContainer>{title}</TitleContainer>
+      </Container>
+      {isExpanded && children}
+    </>
+  );
+};
+
+export default CollapsibleItem;

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

@@ -16,6 +16,7 @@ import ViewTitle from './ViewTitle';
 import DownloadButton from './DownloadButton';
 import { AnalysisResults } from '../shared/analysis-result';
 import DownloadSpinner from './DownloadSpinner';
+import CollapsibleItem from './CollapsibleItem';
 
 const numOfReposInContractedMode = 10;
 
@@ -214,6 +215,19 @@ const AnalysesResultsDescription = ({ totalAnalysesResults, totalResults }: { to
   return <></>;
 };
 
+const RepoAnalysisResults = (analysisResults: AnalysisResults) => {
+  const title = <>
+    {analysisResults.nwo}
+    <Badge text={analysisResults.results.length.toString()} />
+  </>;
+
+  return (
+    <CollapsibleItem title={title}>
+      {analysisResults.results.map((r, i) => (<p key={i} >{r.message}</p>))}
+    </CollapsibleItem>
+  );
+};
+
 const AnalysesResults = ({ analysesResults, totalResults }: { analysesResults: AnalysisResults[], totalResults: number }) => {
   const totalAnalysesResults = sumAnalysesResults(analysesResults);
 
@@ -230,6 +244,12 @@ const AnalysesResults = ({ analysesResults, totalResults }: { analysesResults: A
       <AnalysesResultsDescription
         totalAnalysesResults={totalAnalysesResults}
         totalResults={totalResults} />
+      <ul className="vscode-codeql__analyses-results-list">
+        {analysesResults.filter(a => a.results.length > 0).map(r =>
+          <li key={r.nwo} className="vscode-codeql__analyses-results-list-item">
+            <RepoAnalysisResults {...r} />
+          </li>)}
+      </ul>
     </>
   );
 };

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

@@ -38,6 +38,16 @@
   margin-top: 0.5em;
 }
 
+.vscode-codeql__analyses-results-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0.5em 0 0 0;
+}
+
+.vscode-codeql__analyses-results-list-item {
+  padding-top: 0.5em;
+}
+
 .vscode-codeql__analysis-item {
   padding-right: 0.1em;
 }