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;