Merge pull request #1246 from github/aeisenberg/repo-filter

Add repositories search box

Author: aeisenberg

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

@@ -37,7 +37,6 @@ const shouldHighlightLine = (lineNumber: number, highlightedRegion: HighlightedR
 const Container = styled.div`
   font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   font-size: x-small;
-  width: 55em;
 `;
 
 const TitleContainer = styled.div`

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,20 @@ const AnalysesResults = ({
       <AnalysesResultsDescription
         queryResult={queryResult}
         analysesResults={analysesResults} />
+
+      <VerticalSpace size={2} />
+      <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>
     </>
   );
@@ -358,18 +369,20 @@ export function RemoteQueries(): JSX.Element {
   }
 
   try {
-    return <div>
-      <ThemeProvider colorMode="auto">
-        <ViewTitle>{queryResult.queryTitle}</ViewTitle>
-        <QueryInfo {...queryResult} />
-        <Failures {...queryResult} />
-        <Summary queryResult={queryResult} analysesResults={analysesResults} />
-        <AnalysesResults
-          queryResult={queryResult}
-          analysesResults={analysesResults}
-          totalResults={queryResult.totalResultCount} />
-      </ThemeProvider>
-    </div>;
+    return (
+      <div className="vscode-codeql__remote-queries">
+        <ThemeProvider colorMode="auto">
+          <ViewTitle>{queryResult.queryTitle}</ViewTitle>
+          <QueryInfo {...queryResult} />
+          <Failures {...queryResult} />
+          <Summary queryResult={queryResult} analysesResults={analysesResults} />
+          <AnalysesResults
+            queryResult={queryResult}
+            analysesResults={analysesResults}
+            totalResults={queryResult.totalResultCount} />
+        </ThemeProvider>
+      </div>
+    );
   } catch (err) {
     console.error(err);
     return <div>There was an error displaying the view.</div>;

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);',
+        width: 'calc(100% - 14px)',
+      }}
+      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

@@ -1,3 +1,7 @@
+.vscode-codeql__remote-queries {
+  max-width: 55em;
+}
+
 .vscode-codeql__query-info-link {
   text-decoration: none;
   padding-right: 1em;