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

2022-06-16 09:24:42 +01:00
parent 01e1f134be
commit efcade84c6
8 changed files with 142 additions and 71 deletions
--- a/extensions/ql-vscode/package-lock.json
+++ b/extensions/ql-vscode/package-lock.json
@@ -12,6 +12,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",
@@ -147,7 +148,7 @@
    "node_modules/@babel/generator/node_modules/source-map": {
      "version": "0.5.7",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
      "engines": {
        "node": ">=0.10.0"
      }
@@ -551,6 +552,30 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "node_modules/@microsoft/fast-element": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.10.2.tgz",
+      "integrity": "sha512-Nh80AEx/caDe4jhFYNT75sTG4k6MWy1N6XfgyhmejAX0ylivYy0M78WI2JgQOqi2ZRozCiNcpAPLVhYyAVN9sA=="
+    },
+    "node_modules/@microsoft/fast-foundation": {
+      "version": "2.46.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.46.9.tgz",
+      "integrity": "sha512-jgkVT7bAWIV844eDj3V9cmYFsRIcJ8vMuB4h2SlkJ9EmFbCfimvh6RyAhsHv+bC6QZSS0N0bpZHm5A5QsWgi3Q==",
+      "dependencies": {
+        "@microsoft/fast-element": "^1.10.2",
+        "@microsoft/fast-web-utilities": "^5.4.1",
+        "tabbable": "^5.2.0",
+        "tslib": "^1.13.0"
+      }
+    },
+    "node_modules/@microsoft/fast-web-utilities": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz",
+      "integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
+      "dependencies": {
+        "exenv-es6": "^1.1.1"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2126,6 +2151,31 @@
      "integrity": "sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==",
      "dev": true
    },
+    "node_modules/@vscode/webview-ui-toolkit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-1.0.0.tgz",
+      "integrity": "sha512-/qaHYZXqvIKkao54b7bLzyNH8BC+X4rBmTUx1MvcIiCjqRMxml0BCpqJhnDpfrCb0IOxXRO8cAy1eB5ayzQfBA==",
+      "dependencies": {
+        "@microsoft/fast-element": "^1.6.2",
+        "@microsoft/fast-foundation": "^2.38.0",
+        "@microsoft/fast-react-wrapper": "^0.1.18"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0"
+      }
+    },
+    "node_modules/@vscode/webview-ui-toolkit/node_modules/@microsoft/fast-react-wrapper": {
+      "version": "0.1.48",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.48.tgz",
+      "integrity": "sha512-9NvEjru9Kn5ZKjomAMX6v+eF0DR+eDkxKDwDfi+Wb73kTbrNzcnmlwd4diN15ygH97kldgj2+lpvI4CKLQQWLg==",
+      "dependencies": {
+        "@microsoft/fast-element": "^1.9.0",
+        "@microsoft/fast-foundation": "^2.41.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0"
+      }
+    },
    "node_modules/@webassemblyjs/ast": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -5646,6 +5696,11 @@
        "node": ">= 8"
      }
    },
+    "node_modules/exenv-es6": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz",
+      "integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ=="
+    },
    "node_modules/expand-brackets": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -11636,7 +11691,7 @@
    "node_modules/snapdragon/node_modules/source-map": {
      "version": "0.5.7",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
      "dev": true,
      "engines": {
        "node": ">=0.10.0"
@@ -12079,6 +12134,11 @@
        "es6-symbol": "^3.1.1"
      }
    },
+    "node_modules/tabbable": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+    },
    "node_modules/table": {
      "version": "5.4.6",
      "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -14220,7 +14280,7 @@
        "source-map": {
          "version": "0.5.7",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
        }
      }
    },
@@ -14537,6 +14597,30 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "@microsoft/fast-element": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.10.2.tgz",
+      "integrity": "sha512-Nh80AEx/caDe4jhFYNT75sTG4k6MWy1N6XfgyhmejAX0ylivYy0M78WI2JgQOqi2ZRozCiNcpAPLVhYyAVN9sA=="
+    },
+    "@microsoft/fast-foundation": {
+      "version": "2.46.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.46.9.tgz",
+      "integrity": "sha512-jgkVT7bAWIV844eDj3V9cmYFsRIcJ8vMuB4h2SlkJ9EmFbCfimvh6RyAhsHv+bC6QZSS0N0bpZHm5A5QsWgi3Q==",
+      "requires": {
+        "@microsoft/fast-element": "^1.10.2",
+        "@microsoft/fast-web-utilities": "^5.4.1",
+        "tabbable": "^5.2.0",
+        "tslib": "^1.13.0"
+      }
+    },
+    "@microsoft/fast-web-utilities": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz",
+      "integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
+      "requires": {
+        "exenv-es6": "^1.1.1"
+      }
+    },
    "@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -15932,6 +16016,27 @@
      "integrity": "sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==",
      "dev": true
    },
+    "@vscode/webview-ui-toolkit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-1.0.0.tgz",
+      "integrity": "sha512-/qaHYZXqvIKkao54b7bLzyNH8BC+X4rBmTUx1MvcIiCjqRMxml0BCpqJhnDpfrCb0IOxXRO8cAy1eB5ayzQfBA==",
+      "requires": {
+        "@microsoft/fast-element": "^1.6.2",
+        "@microsoft/fast-foundation": "^2.38.0",
+        "@microsoft/fast-react-wrapper": "^0.1.18"
+      },
+      "dependencies": {
+        "@microsoft/fast-react-wrapper": {
+          "version": "0.1.48",
+          "resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.48.tgz",
+          "integrity": "sha512-9NvEjru9Kn5ZKjomAMX6v+eF0DR+eDkxKDwDfi+Wb73kTbrNzcnmlwd4diN15ygH97kldgj2+lpvI4CKLQQWLg==",
+          "requires": {
+            "@microsoft/fast-element": "^1.9.0",
+            "@microsoft/fast-foundation": "^2.41.1"
+          }
+        }
+      }
+    },
    "@webassemblyjs/ast": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -18883,6 +18988,11 @@
        }
      }
    },
+    "exenv-es6": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz",
+      "integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ=="
+    },
    "expand-brackets": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -23537,7 +23647,7 @@
        "source-map": {
          "version": "0.5.7",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
          "dev": true
        }
      }
@@ -23979,6 +24089,11 @@
        "es6-symbol": "^3.1.1"
      }
    },
+    "tabbable": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+    },
    "table": {
      "version": "5.4.6",
      "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
--- a/extensions/ql-vscode/package.json
+++ b/extensions/ql-vscode/package.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",
--- a/extensions/ql-vscode/src/remote-queries/view/ActionButton.tsx
+++ b/extensions/ql-vscode/src/remote-queries/view/ActionButton.tsx
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-const Button = styled.button`
-  color: var(--vscode-button-foreground);
-  background-color: var(--vscode-button-background);
-  &:hover {
-    text-decoration: none;
-    background-color: var(--vscode-button-hoverBackground);
-  }
-  cursor: pointer;
-  padding: 8px;
-  border: 0;
-`;
-
-const ActionButton = ({ text, onClick }: { text: string, onClick: () => void }) => (
-  <Button onClick={onClick}>
-    {text}
-  </Button>
-);
-
-export default ActionButton;
--- a/extensions/ql-vscode/src/remote-queries/view/Badge.tsx
+++ b/extensions/ql-vscode/src/remote-queries/view/Badge.tsx
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-const BadgeContainer = styled.span`
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  padding-left: 0.2em;
-`;
-
-const BadgeText = styled.span`
-  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);
-`;
-
-const Badge = ({ text }: { text: string }) => (
-  <BadgeContainer>
-    <BadgeText>{text}</BadgeText>
-  </BadgeContainer>
-);
-
-export default Badge;
--- a/extensions/ql-vscode/src/remote-queries/view/CodePaths.tsx
+++ b/extensions/ql-vscode/src/remote-queries/view/CodePaths.tsx
@@ -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}
--- a/extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.tsx
+++ b/extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.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) => (
--- a/extensions/ql-vscode/src/remote-queries/view/RawResultsTable.tsx
+++ b/extensions/ql-vscode/src/remote-queries/view/RawResultsTable.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>;
      }
--- a/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx
+++ b/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx
@@ -6,11 +6,10 @@ import { ToRemoteQueriesMessage } from '../../pure/interface-types';
 import { AnalysisSummary, RemoteQueryResult } from '../shared/remote-query-result';
 import { MAX_RAW_RESULTS } from '../shared/result-limits';
 import { vscode } from '../../view/vscode-api';
-
+import { VSCodeBadge, VSCodeButton } from '@vscode/webview-ui-toolkit/react';
 import SectionTitle from './SectionTitle';
 import VerticalSpace from './VerticalSpace';
 import HorizontalSpace from './HorizontalSpace';
-import Badge from './Badge';
 import ViewTitle from './ViewTitle';
 import DownloadButton from './DownloadButton';
 import { AnalysisResults, getAnalysisResultCount } from '../shared/analysis-result';
@@ -20,7 +19,6 @@ import { AlertIcon, CodeSquareIcon, FileCodeIcon, RepoIcon, TerminalIcon } from
 import AnalysisAlertResult from './AnalysisAlertResult';
 import RawResultsTable from './RawResultsTable';
 import RepositoriesSearch from './RepositoriesSearch';
-import ActionButton from './ActionButton';
 import StarCount from './StarCount';
 import SortRepoFilter, { Sort, sorter } from './SortRepoFilter';
 import LastUpdated from './LastUpdated';
@@ -198,7 +196,10 @@ const SummaryItem = ({
  <>
    <span className="vscode-codeql__analysis-item"><RepoIcon size={16} /></span>
    <span className="vscode-codeql__analysis-item">{analysisSummary.nwo}</span>
-    <span className="vscode-codeql__analysis-item"><Badge text={analysisSummary.resultCount.toString()} /></span>
+    <HorizontalSpace size={1} />
+    <span className="vscode-codeql__analysis-item">
+      <VSCodeBadge>{analysisSummary.resultCount.toString()}</VSCodeBadge>
+    </span>
    <span className="vscode-codeql__analysis-item">
      <SummaryItemDownload
        analysisSummary={analysisSummary}
@@ -304,7 +305,8 @@ const RepoAnalysisResults = (analysisResults: AnalysisResults) => {
  const numOfResults = getAnalysisResultCount(analysisResults);
  const title = <>
    {analysisResults.nwo}
-    <Badge text={numOfResults.toString()} />
+    <HorizontalSpace size={1} />
+    <VSCodeBadge>{numOfResults.toString()}</VSCodeBadge>
  </>;

  return (
@@ -355,7 +357,7 @@ const AnalysesResults = ({
            totalResults={totalResults} />
        </Box>
        <Box>
-          <ActionButton text="Export all" onClick={exportResults}></ActionButton>
+          <VSCodeButton onClick={exportResults}>Export all</VSCodeButton>
        </Box>
      </Box>
      <AnalysesResultsDescription