mrva/vscode-codeql
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Extract base react components (#1078)

Browse Source
This commit is contained in:
Charis Kyriakou
2022-01-17 19:41:33 +00:00
committed by GitHub
parent 0e6d85374f
commit e8e50c4381
12 changed files with 160 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/ql-vscode/src/compare/compare-interface.ts
View File

@@ -141,7 +141,7 @@ export class CompareInterfaceManager extends DisposableObject {
panel.webview.html = getHtmlForWebview(
panel.webview,
scriptPathOnDisk,
stylesheetPathOnDisk
[stylesheetPathOnDisk]
);
panel.webview.onDidReceiveMessage(
async (e) => this.handleMsgFromView(e),

13
extensions/ql-vscode/src/interface-utils.ts
View File

@@ -1,4 +1,5 @@
import * as crypto from 'crypto';
import * as os from 'os';
import {
Uri,
Location,
@@ -117,13 +118,19 @@ export function tryResolveLocation(
export function getHtmlForWebview(
webview: Webview,
scriptUriOnDisk: Uri,
stylesheetUriOnDisk: Uri
stylesheetUrisOnDisk: Uri[],
): string {
// Convert the on-disk URIs into webview URIs.
const scriptWebviewUri = webview.asWebviewUri(scriptUriOnDisk);
const stylesheetWebviewUri = webview.asWebviewUri(stylesheetUriOnDisk);
const stylesheetWebviewUris = stylesheetUrisOnDisk.map(stylesheetUriOnDisk =>
webview.asWebviewUri(stylesheetUriOnDisk));
// Use a nonce in the content security policy to uniquely identify the above resources.
const nonce = getNonce();
const stylesheetsHtmlLines = stylesheetWebviewUris.map(stylesheetWebviewUri =>
`<link nonce="${nonce}" rel="stylesheet" href="${stylesheetWebviewUri}">`);
/*
* Content security policy:
* default-src: allow nothing by default.
@@ -137,7 +144,7 @@ export function getHtmlForWebview(
<head>
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'nonce-${nonce}'; style-src 'nonce-${nonce}'; connect-src ${webview.cspSource};">
<link nonce="${nonce}" rel="stylesheet" href="${stylesheetWebviewUri}">
${stylesheetsHtmlLines.join(` ${os.EOL}`)}
</head>
<body>
<div id=root>

2
extensions/ql-vscode/src/interface.ts
View File

@@ -193,7 +193,7 @@ export class InterfaceManager extends DisposableObject {
panel.webview.html = getHtmlForWebview(
panel.webview,
scriptPathOnDisk,
stylesheetPathOnDisk
[stylesheetPathOnDisk]
);
panel.webview.onDidReceiveMessage(
async (e) => this.handleMsgFromView(e),

6
extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts
View File

@@ -112,6 +112,10 @@ export class RemoteQueriesInterfaceManager {
ctx.asAbsolutePath('out/remoteQueriesView.js')
);
const baseStylesheetUriOnDisk = Uri.file(
ctx.asAbsolutePath('out/remote-queries/view/baseStyles.css')
);
const stylesheetPathOnDisk = Uri.file(
ctx.asAbsolutePath('out/remote-queries/view/remoteQueries.css')
);
@@ -119,7 +123,7 @@ export class RemoteQueriesInterfaceManager {
panel.webview.html = getHtmlForWebview(
panel.webview,
scriptPathOnDisk,
stylesheetPathOnDisk
[baseStylesheetUriOnDisk, stylesheetPathOnDisk]
);
panel.webview.onDidReceiveMessage(
async (e) => this.handleMsgFromView(e),

9
extensions/ql-vscode/src/remote-queries/view/Badge.tsx Normal file
View File

@@ -0,0 +1,9 @@
import * as React from 'react';
const Badge = ({ text }: { text: string }) => (
<span className="vscode-codeql__badge-container">
<span className="vscode-codeql__badge">{text}</span>
</span>
);
export default Badge;

11
extensions/ql-vscode/src/remote-queries/view/DownloadButton.tsx Normal file
View File

@@ -0,0 +1,11 @@
import * as React from 'react';
import * as octicons from '../../view/octicons';
const DownloadButton = ({ text, onClick }: { text: string, onClick: () => void }) => (
<a className="vscode-codeql__download-button"
onClick={onClick}>
{octicons.download}{text}
</a>
);
export default DownloadButton;

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

@@ -8,6 +8,12 @@ import * as octicons from '../../view/octicons';
import { vscode } from '../../view/vscode-api';
import { DownloadLink } from '../download-link';
import SectionTitle from './SectionTitle';
import VerticalSpace from './VerticalSpace';
import Badge from './Badge';
import ViewTitle from './ViewTitle';
import DownloadButton from './DownloadButton';
const numOfReposInContractedMode = 10;
const emptyQueryResult: RemoteQueryResult = {
@@ -38,32 +44,23 @@ const AnalysisSummaryItem = (props: AnalysisSummary) => (
<span>
<span className="vscode-codeql__analysis-item">{octicons.repo}</span>
<span className="vscode-codeql__analysis-item">{props.nwo}</span>
<span className="vscode-codeql__analysis-item vscode-codeql__badge-container">
<span className="vscode-codeql__badge">{props.resultCount}</span>
</span>
<span className="vscode-codeql__analysis-item"><Badge text={props.resultCount.toString()} /></span>
<span className="vscode-codeql__analysis-item">
<a
className="vscode-codeql__download-link"
onClick={() => download(props.downloadLink)}>
{octicons.download}{props.fileSize}
</a>
<DownloadButton text={props.fileSize} onClick={() => download(props.downloadLink)} />
</span>
</span>
);
const SummaryWithResults = (queryResult: RemoteQueryResult) => (
<div className="vscode-codeql__query-summary-container">
<h2 className="vscode-codeql__query-summary-title">Repositories with results ({queryResult.affectedRepositoryCount}):</h2>
<a className="vscode-codeql__summary-download-link vscode-codeql__download-link"
onClick={() => download(queryResult.downloadLink)}>
{octicons.download}Download all
</a>
<SectionTitle text={`Repositories with results (${queryResult.affectedRepositoryCount}):`} />
<DownloadButton text="Download all" onClick={() => download(queryResult.downloadLink)} />
</div>
);
const SummaryNoResults = () => (
<div className="vscode-codeql__query-summary-container">
<h2 className="vscode-codeql__query-summary-title">No results found</h2>
<SectionTitle text="No results found" />
</div>
);
@@ -107,25 +104,23 @@ export function RemoteQueries(): JSX.Element {
};
try {
return <div className="vscode-codeql__remote-queries-view">
<h1 className="vscode-codeql__query-title">{queryResult.queryTitle}</h1>
return <div>
<ViewTitle title={queryResult.queryTitle} />
<p className="vscode-codeql__paragraph">
{queryResult.totalResultCount} results in {queryResult.totalRepositoryCount} repositories
({queryResult.executionDuration}), {queryResult.executionTimestamp}
</p>
<p className="vscode-codeql__paragraph">
<span className="vscode-codeql__query-file">{octicons.file}
<a className="vscode-codeql__query-file-link" href="#" onClick={openQueryFile}>
{queryResult.queryFileName}
</a>
</span>
<span>{octicons.codeSquare}
<a className="vscode-codeql__query-file-link" href="#" onClick={openQueryTextVirtualFile}>
query
</a>
</span>
</p>
<VerticalSpace />
{queryResult.totalResultCount} results in {queryResult.totalRepositoryCount} repositories
({queryResult.executionDuration}), {queryResult.executionTimestamp}
<VerticalSpace />
<span className="vscode-codeql__query-file">{octicons.file}
<a className="vscode-codeql__query-file-link" href="#" onClick={openQueryFile}>
{queryResult.queryFileName}
</a>
</span>
<span>{octicons.codeSquare}
<a className="vscode-codeql__query-file-link" href="#" onClick={openQueryTextVirtualFile}>
query
</a>
</span>
{
queryResult.affectedRepositoryCount === 0

7
extensions/ql-vscode/src/remote-queries/view/SectionTitle.tsx Normal file
View File

@@ -0,0 +1,7 @@
import * as React from 'react';
const SectionTitle = ({ text }: { text: string }) => (
<h2 className="vscode-codeql__section-title">{text}</h2>
);
export default SectionTitle;

7
extensions/ql-vscode/src/remote-queries/view/VerticalSpace.tsx Normal file
View File

@@ -0,0 +1,7 @@
import * as React from 'react';
const VerticalSpace = () => (
<div className="vscode-codeql__vertical-space" />
);
export default VerticalSpace;

7
extensions/ql-vscode/src/remote-queries/view/ViewTitle.tsx Normal file
View File

@@ -0,0 +1,7 @@
import * as React from 'react';
const ViewTitle = ({ title }: { title: string }) => (
<h1 className="vscode-codeql__view-title">{title}</h1>
);
export default ViewTitle;

75
extensions/ql-vscode/src/remote-queries/view/baseStyles.css Normal file
View File

@@ -0,0 +1,75 @@
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
/* -------------------------------------------------------------------------- */
/* SectionTitle component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__section-title {
font-size: medium;
font-weight: 500;
padding: 0 0.5em 0 0;
margin: 0;
display: inline-block;
vertical-align: middle;
}
/* -------------------------------------------------------------------------- */
/* ViewTitle component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__view-title {
font-size: large;
margin-bottom: 0.5em;
font-weight: 500;
}
/* -------------------------------------------------------------------------- */
/* VerticalSpace component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__vertical-space {
flex: 0 0 auto;
height: 0.5rem;
}
/* -------------------------------------------------------------------------- */
/* Badge component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__badge-container {
justify-content: center;
align-items: center;
min-height: 100vh;
padding-left: 0.2em;
}
.vscode-codeql__badge {
display: inline-block;
min-width: 1.5em;
padding: 0.3em;
border-radius: 35%;
font-size: x-small;
text-align: center;
background: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
border-color: var(--vscode-badge-background);
}
/* -------------------------------------------------------------------------- */
/* DownloadButton component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__download-button {
display: inline-block;
font-size: x-small;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
}
.vscode-codeql__download-button svg {
fill: var(--vscode-textLink-foreground);
}

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

@@ -1,29 +1,3 @@
.vscode-codeql__remote-queries-view {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
.vscode-codeql__paragraph {
margin: 0.5em 0 0.5em 0;
}
.vscode-codeql__download-link {
display: inline-block;
font-size: x-small;
text-decoration: none;
cursor: pointer;
}
.vscode-codeql__download-link svg {
fill: var(--vscode-textLink-foreground);
}
.vscode-codeql__query-title {
font-size: large;
margin-bottom: 0.5em;
font-weight: 500;
}
.octicon {
fill: var(--vscode-editor-foreground);
height: 1.2em;
@@ -54,19 +28,6 @@
padding-top: 1.5em;
}
.vscode-codeql__query-summary-title {
font-size: medium;
font-weight: 500;
padding: 0 0.5em 0 0;
margin: 0;
display: inline-block;
vertical-align: middle;
}
.vscode-codeql__summary-download-link {
vertical-align: middle;
}
.vscode-codeql__analysis-summaries-list {
list-style-type: none;
margin: 0;
@@ -81,25 +42,6 @@
padding-right: 0.1em;
}
.vscode-codeql__badge-container {
justify-content: center;
align-items: center;
min-height: 100vh;
padding-left: 0.2em;
}
.vscode-codeql__badge {
display: inline-block;
min-width: 1.5em;
padding: 0.3em;
border-radius: 35%;
font-size: x-small;
text-align: center;
background: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
border-color: var(--vscode-badge-background);
}
.vscode-codeql__expand-button {
background: none;
color: var(--vscode-textLink-foreground);