Add repositories search box

A simple, webview-only search box for filtering repositories from
the remote queries results view.

Author: aeisenberg

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

@@ -19,6 +19,7 @@ import CollapsibleItem from './CollapsibleItem';
 import { AlertIcon, CodeSquareIcon, FileCodeIcon, RepoIcon, TerminalIcon } from '@primer/octicons-react';
 import AnalysisAlertResult from './AnalysisAlertResult';
 import RawResultsTable from './RawResultsTable';
+import RepositoriesSearch from './RepositoriesSearch';
 
 const numOfReposInContractedMode = 10;
 
@@ -308,6 +309,7 @@ const AnalysesResults = ({
   totalResults: number
 }) => {
   const totalAnalysesResults = sumAnalysesResults(analysesResults);
+  const [filterValue, setFilterValue] = React.useState('');
 
   if (totalResults === 0) {
     return <></>;
@@ -322,11 +324,19 @@ const AnalysesResults = ({
       <AnalysesResultsDescription
         queryResult={queryResult}
         analysesResults={analysesResults} />
+
+      <RepositoriesSearch
+        filterValue={filterValue}
+        setFilterValue={setFilterValue} />
+
       <ul className="vscode-codeql__flat-list">
-        {analysesResults.filter(a => a.interpretedResults.length > 0 || a.rawResults).map(r =>
-          <li key={r.nwo} className="vscode-codeql__analyses-results-list-item">
-            <RepoAnalysisResults {...r} />
-          </li>)}
+        {analysesResults
+          .filter(a => a.interpretedResults.length > 0 || a.rawResults)
+          .filter(a => a.nwo.toLowerCase().includes(filterValue.toLowerCase()))
+          .map(r =>
+            <li key={r.nwo} className="vscode-codeql__analyses-results-list-item">
+              <RepoAnalysisResults {...r} />
+            </li>)}
       </ul>
     </>
   );

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ChangeEvent } from 'react';
+import { TextInput } from '@primer/react';
+import { SearchIcon } from '@primer/octicons-react';
+
+interface RepositoriesSearchProps {
+  filterValue: string;
+  setFilterValue: (value: string) => void;
+}
+
+const RepositoriesSearch = ({ filterValue, setFilterValue }: RepositoriesSearchProps) => {
+  return <>
+    <TextInput
+      block
+      sx={{
+        backgroundColor: 'var(--vscode-editor-background);',
+        color: 'var(--vscode-editor-foreground);'
+      }}
+      className="vscode-codeql__repositories-search"
+      leadingVisual={SearchIcon}
+      aria-label="Repository search"
+      name="repository-search"
+      placeholder="Filter by repository owner/name"
+      value={filterValue}
+      onChange={(e: ChangeEvent) => setFilterValue((e.target as HTMLInputElement).value)}
+    />
+  </>;
+};
+
+export default RepositoriesSearch;

extensions/ql-vscode/src/remote-queries/view/remoteQueries.css

@@ -40,6 +40,10 @@
   color: var(--vscode-editor-foreground);
 }
 
+.vscode-codeql__repositories-search {
+  margin: 1em 0 0 0;
+}
+
 .vscode-codeql__flat-list {
   list-style-type: none;
   margin: 0;