Show collapsible analyses results (#1116)
This commit is contained in:
30
extensions/ql-vscode/package-lock.json
generated
30
extensions/ql-vscode/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user