Replace "repository search" filter box with VS Code UI Toolkit (#1424)

shati-patel · web-flow · commit f38eb4895d44 · 2022-07-13T15:13:31.000+01:00
diff --git a/extensions/ql-vscode/package-lock.json b/extensions/ql-vscode/package-lock.json
diff --git a/extensions/ql-vscode/package.json b/extensions/ql-vscode/package.json
@@ -1147,6 +1147,7 @@
     "@octokit/plugin-retry": "^3.0.9",
     "@primer/octicons-react": "^16.3.0",
     "@primer/react": "^35.0.0",
+    "@vscode/codicons": "^0.0.31",
     "@vscode/webview-ui-toolkit": "^1.0.0",
     "child-process-promise": "^2.2.1",
     "classnames": "~2.2.6",
@@ -1162,8 +1163,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "semver": "~7.3.2",
-    "source-map-support": "^0.5.21",
     "source-map": "^0.7.4",
+    "source-map-support": "^0.5.21",
     "stream": "^0.0.2",
     "stream-chain": "~2.2.4",
     "stream-json": "~1.7.3",
diff --git a/extensions/ql-vscode/src/interface-utils.ts b/extensions/ql-vscode/src/interface-utils.ts
@@ -137,6 +137,8 @@ export function getHtmlForWebview(
     ? `${webview.cspSource} vscode-file: 'unsafe-inline'`
     : `'nonce-${nonce}'`;
 
+  const fontSrc = webview.cspSource;
+
   /*
    * Content security policy:
    * default-src: allow nothing by default.
@@ -149,7 +151,7 @@ export function getHtmlForWebview(
 <html>
   <head>
     <meta http-equiv="Content-Security-Policy"
-          content="default-src 'none'; script-src 'nonce-${nonce}'; style-src ${styleSrc}; connect-src ${webview.cspSource};">
+          content="default-src 'none'; script-src 'nonce-${nonce}'; font-src ${fontSrc}; style-src ${styleSrc}; connect-src ${webview.cspSource};">
         ${stylesheetsHtmlLines.join(`    ${os.EOL}`)}
   </head>
   <body>
diff --git a/extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts b/extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts
@@ -111,6 +111,7 @@ export class RemoteQueriesInterfaceManager {
           localResourceRoots: [
             Uri.file(this.analysesResultsManager.storagePath),
             Uri.file(path.join(this.ctx.extensionPath, 'out')),
+            Uri.file(path.join(this.ctx.extensionPath, 'node_modules/@vscode/codicons/dist')),
           ],
         }
       ));
@@ -135,10 +136,16 @@ export class RemoteQueriesInterfaceManager {
         ctx.asAbsolutePath('out/remote-queries/view/remoteQueries.css')
       );
 
+      // Allows use of the VS Code "codicons" icon set.
+      // See https://github.com/microsoft/vscode-codicons
+      const codiconsPathOnDisk = Uri.file(
+        ctx.asAbsolutePath('node_modules/@vscode/codicons/dist/codicon.css')
+      );
+
       panel.webview.html = getHtmlForWebview(
         panel.webview,
         scriptPathOnDisk,
-        [baseStylesheetUriOnDisk, stylesheetPathOnDisk],
+        [baseStylesheetUriOnDisk, stylesheetPathOnDisk, codiconsPathOnDisk],
         true
       );
       ctx.subscriptions.push(
diff --git a/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx b/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { ChangeEvent } from 'react';
-import { TextInput } from '@primer/react';
-import { SearchIcon } from '@primer/octicons-react';
+import { VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
 
 interface RepositoriesSearchProps {
   filterValue: string;
@@ -10,20 +8,16 @@ interface RepositoriesSearchProps {
 
 const RepositoriesSearch = ({ filterValue, setFilterValue }: RepositoriesSearchProps) => {
   return <>
-    <TextInput
-      block
-      sx={{
-        backgroundColor: 'var(--vscode-editor-background);',
-        color: 'var(--vscode-editor-foreground);',
-        width: 'calc(100% - 14px)',
-      }}
-      leadingVisual={SearchIcon}
-      aria-label="Repository search"
+    <VSCodeTextField
+      style={{ width: '100%' }}
+      placeholder='Filter by repository owner/name'
+      ariaLabel="Repository search"
       name="repository-search"
-      placeholder="Filter by repository owner/name"
       value={filterValue}
-      onChange={(e: ChangeEvent) => setFilterValue((e.target as HTMLInputElement).value)}
-    />
+      onInput={(e: InputEvent) => setFilterValue((e.target as HTMLInputElement).value)}
+    >
+      <span slot="start" className="codicon codicon-search"></span>
+    </VSCodeTextField>
   </>;
 };
 
