First pass at using VS Code UI toolkit (#1382)

Author: charisk

extensions/ql-vscode/package-lock.json

@@ -1133,6 +1133,7 @@
     "@octokit/rest": "^18.5.6",
     "@primer/octicons-react": "^16.3.0",
     "@primer/react": "^35.0.0",
+    "@vscode/webview-ui-toolkit": "^1.0.0",
     "child-process-promise": "^2.2.1",
     "classnames": "~2.2.6",
     "d3": "^6.3.1",

extensions/ql-vscode/package.json

@@ -1,5 +1,6 @@
 import { TriangleDownIcon, XCircleIcon } from '@primer/octicons-react';
-import { ActionList, ActionMenu, Box, Button, Label, Link, Overlay } from '@primer/react';
+import { ActionList, ActionMenu, Box, Button, Label, Overlay } from '@primer/react';
+import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -135,12 +136,12 @@ const CodePaths = ({
 
   return (
     <Box ref={anchorRef}>
-      <Link
+      <VSCodeLink
         onClick={() => setIsOpen(true)}
         ref={linkRef}
         sx={{ cursor: 'pointer' }}>
         Show paths
-      </Link>
+      </VSCodeLink>
       {isOpen && (
         <Overlay
           returnFocusRef={linkRef}

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { CodeSnippet, FileLink, HighlightedRegion, AnalysisMessage, ResultSeverity } from '../shared/analysis-result';
-import { Box, Link } from '@primer/react';
+import { Box } from '@primer/react';
 import VerticalSpace from './VerticalSpace';
 import { createRemoteFileRef } from '../../pure/location-link-utils';
 import { parseHighlightedLine, shouldHighlightLine } from '../../pure/sarif-utils';
+import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
 
 const borderColor = 'var(--vscode-editor-snippetFinalTabstopHighlightBorder)';
 const warningColor = '#966C23';
@@ -95,14 +96,15 @@ const Message = ({
             case 'text':
               return <span key={`token-${index}`}>{token.text}</span>;
             case 'location':
-              return <Link
+              return <VSCodeLink
+                style={{ fontFamily: 'var(--vscode-editor-font-family)' }}
                 key={`token-${index}`}
                 href={createRemoteFileRef(
                   token.location.fileLink,
                   token.location.highlightedRegion?.startLine,
                   token.location.highlightedRegion?.endLine)}>
                 {token.text}
-              </Link>;
+              </VSCodeLink>;
             default:
               return <></>;
           }
@@ -170,7 +172,7 @@ const FileCodeSnippet = ({
     return (
       <Container>
         <TitleContainer>
-          <Link href={titleFileUri}>{fileLink.filePath}</Link>
+          <VSCodeLink href={titleFileUri}>{fileLink.filePath}</VSCodeLink>
         </TitleContainer>
       </Container>
     );
@@ -181,7 +183,7 @@ const FileCodeSnippet = ({
   return (
     <Container>
       <TitleContainer>
-        <Link href={titleFileUri}>{fileLink.filePath}</Link>
+        <VSCodeLink href={titleFileUri}>{fileLink.filePath}</VSCodeLink>
       </TitleContainer>
       <CodeContainer>
         {code.map((line, index) => (

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Box, Link } from '@primer/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';
 import { useState } from 'react';
@@ -50,7 +51,7 @@ const Cell = ({
       const url = tryGetRemoteLocation(value.url, fileLinkPrefix, sourceLocationPrefix);
       const safeLabel = convertNonPrintableChars(value.label);
       if (url) {
-        return <Link href={url}>{safeLabel}</Link>;
+        return <VSCodeLink href={url}>{safeLabel}</VSCodeLink>;
       } else {
         return <span>{safeLabel}</span>;
       }