Remove use of Primer's box component (#1389)

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

@@ -1,5 +1,5 @@
 import { TriangleDownIcon, XCircleIcon } from '@primer/octicons-react';
-import { ActionList, ActionMenu, Box, Button, Label, Overlay } from '@primer/react';
+import { ActionList, ActionMenu, Button, Label, Overlay } from '@primer/react';
 import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
 import { useRef, useState } from 'react';
@@ -54,21 +54,21 @@ const CodePath = ({
       <div key={`thread-flow-${index}`} style={{ maxWidth: '55em' }}>
         {index !== 0 && <VerticalSpace size={3} />}
 
-        <Box display="flex" justifyContent="center" alignItems="center">
-          <Box flexGrow={1} p={0} border="none">
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <div style={{ flexGrow: 1, padding: 0, border: 'none' }}>
             <SectionTitle>Step {index + 1}</SectionTitle>
-          </Box>
+          </div>
           {index === 0 &&
-            <Box p={0} border="none">
+            <div style={{ padding: 0, border: 'none' }}>
               <Label>Source</Label>
-            </Box>
+            </div>
           }
           {index === codeFlow.threadFlows.length - 1 &&
-            <Box p={0} border="none">
+            <div style={{ padding: 0, border: 'none' }}>
               <Label>Sink</Label>
-            </Box>
+            </div>
           }
-        </Box>
+        </div>
 
         <VerticalSpace size={2} />
         <FileCodeSnippet
@@ -135,7 +135,7 @@ const CodePaths = ({
   const closeOverlay = () => setIsOpen(false);
 
   return (
-    <Box ref={anchorRef}>
+    <div ref={anchorRef}>
       <VSCodeLink
         onClick={() => setIsOpen(true)}
         ref={linkRef}
@@ -154,14 +154,14 @@ const CodePaths = ({
             <SectionTitle>{ruleDescription}</SectionTitle>
             <VerticalSpace size={2} />
 
-            <Box display="flex" justifyContent="center" alignItems="center">
-              <Box p={0} border="none">
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+              <div style={{ padding: 0, border: 0 }}>
                 {codeFlows.length} paths available: {selectedCodeFlow.threadFlows.length} steps in
-              </Box>
-              <Box flexGrow={1} p={0} paddingLeft="0.2em" border="none">
+              </div>
+              <div style={{ flexGrow: 1, padding: 0, paddingLeft: '0.2em', border: 'none' }}>
                 <Menu codeFlows={codeFlows} setSelectedCodeFlow={setSelectedCodeFlow} />
-              </Box>
-            </Box>
+              </div>
+            </div>
 
             <VerticalSpace size={2} />
             <CodePath
@@ -174,7 +174,7 @@ const CodePaths = ({
           </OverlayContainer>
         </Overlay>
       )}
-    </Box>
+    </div>
   );
 };
 

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { CodeSnippet, FileLink, HighlightedRegion, AnalysisMessage, ResultSeverity } from '../shared/analysis-result';
-import { Box } from '@primer/react';
 import VerticalSpace from './VerticalSpace';
 import { createRemoteFileRef } from '../../pure/location-link-utils';
 import { parseHighlightedLine, shouldHighlightLine } from '../../pure/sarif-utils';
@@ -68,13 +67,13 @@ const Message = ({
   message,
   currentLineNumber,
   highlightedRegion,
-  borderColor,
+  borderLeftColor,
   children
 }: {
   message: AnalysisMessage,
   currentLineNumber: number,
   highlightedRegion?: HighlightedRegion,
-  borderColor: string,
+  borderLeftColor: string,
   children: React.ReactNode
 }) => {
   if (!highlightedRegion || highlightedRegion.endLine !== currentLineNumber) {
@@ -82,14 +81,15 @@ const Message = ({
   }
 
   return <MessageContainer>
-    <Box
-      borderColor="border.default"
-      borderWidth={1}
-      borderStyle="solid"
-      borderLeftColor={borderColor}
-      borderLeftWidth={3}
-      paddingTop="1em"
-      paddingBottom="1em">
+    <div style={{
+      borderColor: borderColor,
+      borderWidth: '0.1em',
+      borderStyle: 'solid',
+      borderLeftColor: borderLeftColor,
+      borderLeftWidth: '0.3em',
+      paddingTop: '1em',
+      paddingBottom: '1em'
+    }}>
       <MessageText>
         {message.tokens.map((token, index) => {
           switch (token.t) {
@@ -115,8 +115,7 @@ const Message = ({
         </>
         }
       </MessageText>
-    </Box>
-
+    </div>
   </MessageContainer>;
 };
 
@@ -188,36 +187,36 @@ const FileCodeSnippet = ({
       <CodeContainer>
         {code.map((line, index) => (
           <div key={index}>
-            <Box display="flex">
-              <Box
-                p={2}
-                borderStyle="none"
-                paddingTop="0.01em"
-                paddingLeft="0.5em"
-                paddingRight="0.5em"
-                paddingBottom="0.2em">
+            <div style={{ display: 'flex' }} >
+              <div style={{
+                borderStyle: 'none',
+                paddingTop: '0.01em',
+                paddingLeft: '0.5em',
+                paddingRight: '0.5em',
+                paddingBottom: '0.2em'
+              }}>
                 {startingLine + index}
-              </Box>
-              <Box
-                flexGrow={1}
-                p={2}
-                borderStyle="none"
-                paddingTop="0.01em"
-                paddingLeft="1.5em"
-                paddingRight="0.5em"
-                paddingBottom="0.2em"
-                sx={{ wordBreak: 'break-word' }}>
+              </div>
+              <div style={{
+                flexGrow: 1,
+                borderStyle: 'none',
+                paddingTop: '0.01em',
+                paddingLeft: '1.5em',
+                paddingRight: '0.5em',
+                paddingBottom: '0.2em',
+                wordBreak: 'break-word'
+              }}>
                 <CodeLine
                   line={line}
                   lineNumber={startingLine + index}
                   highlightedRegion={highlightedRegion} />
-              </Box>
-            </Box>
+              </div>
+            </div>
             {message && severity && <Message
               message={message}
               currentLineNumber={startingLine + index}
               highlightedRegion={highlightedRegion}
-              borderColor={getSeverityColor(severity)}>
+              borderLeftColor={getSeverityColor(severity)}>
               {messageChildren}
             </Message>}
           </div>

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from '@primer/react';
 import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
 import { CellValue, RawResultSet, ResultSetSchema } from '../../pure/bqrs-cli-types';
 import { tryGetRemoteLocation } from '../../pure/bqrs-utils';
@@ -7,6 +6,8 @@ import { useState } from 'react';
 import TextButton from './TextButton';
 import { convertNonPrintableChars } from '../../text-utils';
 
+const borderColor = 'var(--vscode-editor-snippetFinalTabstopHighlightBorder)';
+
 const numOfResultsInContractedMode = 5;
 
 const Row = ({
@@ -20,15 +21,16 @@ const Row = ({
 }) => (
   <>
     {row.map((cell, cellIndex) => (
-      <Box key={cellIndex}
-        borderColor="border.default"
-        borderStyle="solid"
-        justifyContent="center"
-        alignItems="center"
-        p={2}
-        sx={{ wordBreak: 'break-word' }}>
+      <div key={cellIndex} style={{
+        borderColor: borderColor,
+        borderStyle: 'solid',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '0.4rem',
+        wordBreak: 'break-word'
+      }}>
         <Cell value={cell} fileLinkPrefix={fileLinkPrefix} sourceLocationPrefix={sourceLocationPrefix} />
-      </Box>
+      </div>
     ))}
   </>
 );
@@ -81,15 +83,16 @@ const RawResultsTable = ({
 
   return (
     <>
-      <Box
-        display="grid"
-        gridTemplateColumns={gridTemplateColumns}
-        maxWidth="45rem"
-        p={2}>
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: gridTemplateColumns,
+        maxWidth: '45rem',
+        padding: '0.4rem'
+      }}>
         {results.rows.slice(0, numOfResultsToShow).map((row, rowIndex) => (
           <Row key={rowIndex} row={row} fileLinkPrefix={fileLinkPrefix} sourceLocationPrefix={sourceLocationPrefix} />
         ))}
-      </Box>
+      </div>
       {
         showButton &&
         <TextButton size='x-small' onClick={() => setTableExpanded(!tableExpanded)}>

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import * as Rdom from 'react-dom';
-import { Box, Flash, ThemeProvider } from '@primer/react';
+import { Flash, ThemeProvider } from '@primer/react';
 import { ToRemoteQueriesMessage } from '../../pure/interface-types';
 import { AnalysisSummary, RemoteQueryResult } from '../shared/remote-query-result';
 import { MAX_RAW_RESULTS } from '../shared/result-limits';
@@ -350,16 +350,16 @@ const AnalysesResults = ({
   return (
     <>
       <VerticalSpace size={2} />
-      <Box display="flex">
-        <Box flexGrow={1}>
+      <div style={{ display: 'flex' }}>
+        <div style={{ flexGrow: 1 }}>
           <AnalysesResultsTitle
             totalAnalysesResults={totalAnalysesResults}
             totalResults={totalResults} />
-        </Box>
-        <Box>
+        </div>
+        <div>
           <VSCodeButton onClick={exportResults}>Export all</VSCodeButton>
-        </Box>
-      </Box>
+        </div>
+      </div>
       <AnalysesResultsDescription
         queryResult={queryResult}
         analysesResults={analysesResults} />