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

Add repositories search box

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,8 +324,17 @@ 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 =>
+        {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>)}
@@ -358,7 +369,8 @@ export function RemoteQueries(): JSX.Element {
   }
 
   try {
-    return <div>
+    return (
+      <div className="vscode-codeql__remote-queries">
         <ThemeProvider colorMode="auto">
           <ViewTitle>{queryResult.queryTitle}</ViewTitle>
           <QueryInfo {...queryResult} />
@@ -369,7 +381,8 @@ export function RemoteQueries(): JSX.Element {
             analysesResults={analysesResults}
             totalResults={queryResult.totalResultCount} />
         </ThemeProvider>
-    </div>;
+      </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;