Show collapsible analyses results (#1116)

This commit is contained in:
Charis Kyriakou
2022-02-04 08:02:21 +00:00
committed by GitHub
parent e46c0e25e8
commit 9c2585116a
5 changed files with 102 additions and 6 deletions

View File

@@ -10,6 +10,7 @@
"license": "MIT",
"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",
@@ -645,9 +646,9 @@
"integrity": "sha512-zh1FKvAXLjKs0rr9Ik9E5M3Q9/npa9hmpuHKmYZn7u9QnSl+X13jFPme3AmtokOlfduFYeHfQyzSIJEhSEVl3w=="
},
"node_modules/@primer/octicons-react": {
"version": "16.1.1",
"resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
"integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
"version": "16.3.0",
"resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.3.0.tgz",
"integrity": "sha512-nxB6L5IYeR2hPY6q7DAyQGW42MO0kA4PqMBNysN4WaZAHjiKgtTDr9rI+759PqGK7BTTuT43HTuu2cMsg7pH0Q==",
"engines": {
"node": ">=8"
},
@@ -689,6 +690,17 @@
"styled-components": "4.x || 5.x"
}
},
"node_modules/@primer/react/node_modules/@primer/octicons-react": {
"version": "16.1.1",
"resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
"integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
"engines": {
"node": ">=8"
},
"peerDependencies": {
"react": ">=15"
}
},
"node_modules/@primer/react/node_modules/classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
@@ -13554,9 +13566,9 @@
"integrity": "sha512-zh1FKvAXLjKs0rr9Ik9E5M3Q9/npa9hmpuHKmYZn7u9QnSl+X13jFPme3AmtokOlfduFYeHfQyzSIJEhSEVl3w=="
},
"@primer/octicons-react": {
"version": "16.1.1",
"resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
"integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
"version": "16.3.0",
"resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.3.0.tgz",
"integrity": "sha512-nxB6L5IYeR2hPY6q7DAyQGW42MO0kA4PqMBNysN4WaZAHjiKgtTDr9rI+759PqGK7BTTuT43HTuu2cMsg7pH0Q==",
"requires": {}
},
"@primer/primitives": {
@@ -13588,6 +13600,12 @@
"styled-system": "5.1.5"
},
"dependencies": {
"@primer/octicons-react": {
"version": "16.1.1",
"resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
"integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
"requires": {}
},
"classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",

View File

@@ -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",

View File

@@ -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;

View File

@@ -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>
</>
);
};

View File

@@ -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;
}