diff --git a/extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.tsx b/extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.tsx
index d68de0721..1b4459a0f 100644
--- a/extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.tsx
+++ b/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`
diff --git a/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx b/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx
index 8a20a76e0..a28ff358b 100644
--- a/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx
+++ b/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 = ({
+
+
+
+
- {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 =>
+ -
+
+
)}
>
);
@@ -358,18 +369,20 @@ export function RemoteQueries(): JSX.Element {
}
try {
- return
-
- {queryResult.queryTitle}
-
-
-
-
-
-
;
+ return (
+
+
+ {queryResult.queryTitle}
+
+
+
+
+
+
+ );
} catch (err) {
console.error(err);
return There was an error displaying the view.
;
diff --git a/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx b/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx
new file mode 100644
index 000000000..e4929e7ea
--- /dev/null
+++ b/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 <>
+ setFilterValue((e.target as HTMLInputElement).value)}
+ />
+ >;
+};
+
+export default RepositoriesSearch;
diff --git a/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css b/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css
index a157642b9..c9ab81d7f 100644
--- a/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css
+++ b/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;