Skip to content

Commit b290625

Browse files
chariskcharisk
authored
Remove use of Primer's box component (#1389)
1 parent 18097e4 commit b290625

File tree

4 files changed

+75
-73
lines changed

4 files changed

+75
-73
lines changed

‎extensions/ql-vscode/src/remote-queries/view/CodePaths.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { TriangleDownIcon, XCircleIcon } from '@primer/octicons-react';
2-
import { ActionList, ActionMenu, Box, Button, Label, Overlay } from '@primer/react';
2+
import { ActionList, ActionMenu, Button, Label, Overlay } from '@primer/react';
33
import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
44
import * as React from 'react';
55
import { useRef, useState } from 'react';
@@ -54,21 +54,21 @@ const CodePath = ({
5454
<div key={`thread-flow-${index}`} style={{ maxWidth: '55em' }}>
5555
{index !== 0 && <VerticalSpace size={3} />}
5656

57-
<Box display="flex" justifyContent="center" alignItems="center">
58-
<Box flexGrow={1} p={0} border="none">
57+
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
58+
<div style={{ flexGrow: 1, padding: 0, border: 'none' }}>
5959
<SectionTitle>Step {index + 1}</SectionTitle>
60-
</Box>
60+
</div>
6161
{index === 0 &&
62-
<Box p={0} border="none">
62+
<div style={{ padding: 0, border: 'none' }}>
6363
<Label>Source</Label>
64-
</Box>
64+
</div>
6565
}
6666
{index === codeFlow.threadFlows.length - 1 &&
67-
<Box p={0} border="none">
67+
<div style={{ padding: 0, border: 'none' }}>
6868
<Label>Sink</Label>
69-
</Box>
69+
</div>
7070
}
71-
</Box>
71+
</div>
7272

7373
<VerticalSpace size={2} />
7474
<FileCodeSnippet
@@ -135,7 +135,7 @@ const CodePaths = ({
135135
const closeOverlay = () => setIsOpen(false);
136136

137137
return (
138-
<Box ref={anchorRef}>
138+
<div ref={anchorRef}>
139139
<VSCodeLink
140140
onClick={() => setIsOpen(true)}
141141
ref={linkRef}
@@ -154,14 +154,14 @@ const CodePaths = ({
154154
<SectionTitle>{ruleDescription}</SectionTitle>
155155
<VerticalSpace size={2} />
156156

157-
<Box display="flex" justifyContent="center" alignItems="center">
158-
<Box p={0} border="none">
157+
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
158+
<div style={{ padding: 0, border: 0 }}>
159159
{codeFlows.length} paths available: {selectedCodeFlow.threadFlows.length} steps in
160-
</Box>
161-
<Box flexGrow={1} p={0} paddingLeft="0.2em" border="none">
160+
</div>
161+
<div style={{ flexGrow: 1, padding: 0, paddingLeft: '0.2em', border: 'none' }}>
162162
<Menu codeFlows={codeFlows} setSelectedCodeFlow={setSelectedCodeFlow} />
163-
</Box>
164-
</Box>
163+
</div>
164+
</div>
165165

166166
<VerticalSpace size={2} />
167167
<CodePath
@@ -174,7 +174,7 @@ const CodePaths = ({
174174
</OverlayContainer>
175175
</Overlay>
176176
)}
177-
</Box>
177+
</div>
178178
);
179179
};
180180

‎extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.tsx‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import styled from 'styled-components';
33
import { CodeSnippet, FileLink, HighlightedRegion, AnalysisMessage, ResultSeverity } from '../shared/analysis-result';
4-
import { Box } from '@primer/react';
54
import VerticalSpace from './VerticalSpace';
65
import { createRemoteFileRef } from '../../pure/location-link-utils';
76
import { parseHighlightedLine, shouldHighlightLine } from '../../pure/sarif-utils';
@@ -68,28 +67,29 @@ const Message = ({
6867
message,
6968
currentLineNumber,
7069
highlightedRegion,
71-
borderColor,
70+
borderLeftColor,
7271
children
7372
}: {
7473
message: AnalysisMessage,
7574
currentLineNumber: number,
7675
highlightedRegion?: HighlightedRegion,
77-
borderColor: string,
76+
borderLeftColor: string,
7877
children: React.ReactNode
7978
}) => {
8079
if (!highlightedRegion || highlightedRegion.endLine !== currentLineNumber) {
8180
return <></>;
8281
}
8382

8483
return <MessageContainer>
85-
<Box
86-
borderColor="border.default"
87-
borderWidth={1}
88-
borderStyle="solid"
89-
borderLeftColor={borderColor}
90-
borderLeftWidth={3}
91-
paddingTop="1em"
92-
paddingBottom="1em">
84+
<div style={{
85+
borderColor: borderColor,
86+
borderWidth: '0.1em',
87+
borderStyle: 'solid',
88+
borderLeftColor: borderLeftColor,
89+
borderLeftWidth: '0.3em',
90+
paddingTop: '1em',
91+
paddingBottom: '1em'
92+
}}>
9393
<MessageText>
9494
{message.tokens.map((token, index) => {
9595
switch (token.t) {
@@ -115,8 +115,7 @@ const Message = ({
115115
</>
116116
}
117117
</MessageText>
118-
</Box>
119-
118+
</div>
120119
</MessageContainer>;
121120
};
122121

@@ -188,36 +187,36 @@ const FileCodeSnippet = ({
188187
<CodeContainer>
189188
{code.map((line, index) => (
190189
<div key={index}>
191-
<Box display="flex">
192-
<Box
193-
p={2}
194-
borderStyle="none"
195-
paddingTop="0.01em"
196-
paddingLeft="0.5em"
197-
paddingRight="0.5em"
198-
paddingBottom="0.2em">
190+
<div style={{ display: 'flex' }} >
191+
<div style={{
192+
borderStyle: 'none',
193+
paddingTop: '0.01em',
194+
paddingLeft: '0.5em',
195+
paddingRight: '0.5em',
196+
paddingBottom: '0.2em'
197+
}}>
199198
{startingLine + index}
200-
</Box>
201-
<Box
202-
flexGrow={1}
203-
p={2}
204-
borderStyle="none"
205-
paddingTop="0.01em"
206-
paddingLeft="1.5em"
207-
paddingRight="0.5em"
208-
paddingBottom="0.2em"
209-
sx={{ wordBreak: 'break-word' }}>
199+
</div>
200+
<div style={{
201+
flexGrow: 1,
202+
borderStyle: 'none',
203+
paddingTop: '0.01em',
204+
paddingLeft: '1.5em',
205+
paddingRight: '0.5em',
206+
paddingBottom: '0.2em',
207+
wordBreak: 'break-word'
208+
}}>
210209
<CodeLine
211210
line={line}
212211
lineNumber={startingLine + index}
213212
highlightedRegion={highlightedRegion} />
214-
</Box>
215-
</Box>
213+
</div>
214+
</div>
216215
{message && severity && <Message
217216
message={message}
218217
currentLineNumber={startingLine + index}
219218
highlightedRegion={highlightedRegion}
220-
borderColor={getSeverityColor(severity)}>
219+
borderLeftColor={getSeverityColor(severity)}>
221220
{messageChildren}
222221
</Message>}
223222
</div>

‎extensions/ql-vscode/src/remote-queries/view/RawResultsTable.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import * as React from 'react';
2-
import { Box } from '@primer/react';
32
import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
43
import { CellValue, RawResultSet, ResultSetSchema } from '../../pure/bqrs-cli-types';
54
import { tryGetRemoteLocation } from '../../pure/bqrs-utils';
65
import { useState } from 'react';
76
import TextButton from './TextButton';
87
import { convertNonPrintableChars } from '../../text-utils';
98

9+
const borderColor = 'var(--vscode-editor-snippetFinalTabstopHighlightBorder)';
10+
1011
const numOfResultsInContractedMode = 5;
1112

1213
const Row = ({
@@ -20,15 +21,16 @@ const Row = ({
2021
}) => (
2122
<>
2223
{row.map((cell, cellIndex) => (
23-
<Box key={cellIndex}
24-
borderColor="border.default"
25-
borderStyle="solid"
26-
justifyContent="center"
27-
alignItems="center"
28-
p={2}
29-
sx={{ wordBreak: 'break-word' }}>
24+
<div key={cellIndex} style={{
25+
borderColor: borderColor,
26+
borderStyle: 'solid',
27+
justifyContent: 'center',
28+
alignItems: 'center',
29+
padding: '0.4rem',
30+
wordBreak: 'break-word'
31+
}}>
3032
<Cell value={cell} fileLinkPrefix={fileLinkPrefix} sourceLocationPrefix={sourceLocationPrefix} />
31-
</Box>
33+
</div>
3234
))}
3335
</>
3436
);
@@ -81,15 +83,16 @@ const RawResultsTable = ({
8183

8284
return (
8385
<>
84-
<Box
85-
display="grid"
86-
gridTemplateColumns={gridTemplateColumns}
87-
maxWidth="45rem"
88-
p={2}>
86+
<div style={{
87+
display: 'grid',
88+
gridTemplateColumns: gridTemplateColumns,
89+
maxWidth: '45rem',
90+
padding: '0.4rem'
91+
}}>
8992
{results.rows.slice(0, numOfResultsToShow).map((row, rowIndex) => (
9093
<Row key={rowIndex} row={row} fileLinkPrefix={fileLinkPrefix} sourceLocationPrefix={sourceLocationPrefix} />
9194
))}
92-
</Box>
95+
</div>
9396
{
9497
showButton &&
9598
<TextButton size='x-small' onClick={() => setTableExpanded(!tableExpanded)}>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { useEffect, useState } from 'react';
33
import * as Rdom from 'react-dom';
4-
import { Box, Flash, ThemeProvider } from '@primer/react';
4+
import { Flash, ThemeProvider } from '@primer/react';
55
import { ToRemoteQueriesMessage } from '../../pure/interface-types';
66
import { AnalysisSummary, RemoteQueryResult } from '../shared/remote-query-result';
77
import { MAX_RAW_RESULTS } from '../shared/result-limits';
@@ -350,16 +350,16 @@ const AnalysesResults = ({
350350
return (
351351
<>
352352
<VerticalSpace size={2} />
353-
<Box display="flex">
354-
<Box flexGrow={1}>
353+
<div style={{ display: 'flex' }}>
354+
<div style={{ flexGrow: 1 }}>
355355
<AnalysesResultsTitle
356356
totalAnalysesResults={totalAnalysesResults}
357357
totalResults={totalResults} />
358-
</Box>
359-
<Box>
358+
</div>
359+
<div>
360360
<VSCodeButton onClick={exportResults}>Export all</VSCodeButton>
361-
</Box>
362-
</Box>
361+
</div>
362+
</div>
363363
<AnalysesResultsDescription
364364
queryResult={queryResult}
365365
analysesResults={analysesResults} />

0 commit comments

Comments
 (0)