diff --git a/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx b/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx
index 701527c00..d027b5e0b 100644
--- a/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx
+++ b/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx
@@ -7,6 +7,8 @@ import * as octicons from '../../view/octicons';
import { vscode } from '../../view/vscode-api';
+const numOfReposInContractedMode = 10;
+
const emptyQueryResult: RemoteQueryResult = {
queryTitle: '',
queryFile: '',
@@ -58,6 +60,9 @@ export function RemoteQueries(): JSX.Element {
return
Waiting for results to load.
;
}
+ const [repoListExpanded, setRepoListExpanded] = useState(false);
+ const numOfReposToShow = repoListExpanded ? queryResult.results.length : numOfReposInContractedMode;
+
try {
return
{queryResult.queryTitle}
@@ -79,12 +84,18 @@ export function RemoteQueries(): JSX.Element {
- {queryResult.results.map(result =>
+ {queryResult.results.slice(0, numOfReposToShow).map((result, i) =>
-
)}
+ {
+ queryResult.results.length > numOfReposInContractedMode &&
+
+ }
;
} catch (err) {
console.error(err);
diff --git a/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css b/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css
index ad98da5a8..2de5e9f33 100644
--- a/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css
+++ b/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css
@@ -88,3 +88,12 @@
color: var(--vscode-badge-foreground);
border-color: var(--vscode-badge-background);
}
+
+.vscode-codeql__expand-button {
+ background: none;
+ color: var(--vscode-textLink-foreground);
+ border: none;
+ cursor: pointer;
+ padding-top: 1em;
+ font-size: x-small;
+}