From 65f58b1f98290adfbc72b7f393677cb8507671ab Mon Sep 17 00:00:00 2001 From: Andrew Eisenberg Date: Mon, 28 Mar 2022 16:19:49 -0700 Subject: [PATCH 1/3] Add repositories search box A simple, webview-only search box for filtering repositories from the remote queries results view. --- .../src/remote-queries/view/RemoteQueries.tsx | 18 ++++++++--- .../view/RepositoriesSearch.tsx | 30 +++++++++++++++++++ .../src/remote-queries/view/remoteQueries.css | 4 +++ 3 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx diff --git a/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx b/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx index 8a20a76e0..7c8752dbb 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,19 @@ 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 => +
  • + +
    • )}
); 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..4fed6fbaa --- /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..e74df1275 100644 --- a/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css +++ b/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css @@ -40,6 +40,10 @@ color: var(--vscode-editor-foreground); } +.vscode-codeql__repositories-search { + margin: 1em 0 0 0; +} + .vscode-codeql__flat-list { list-style-type: none; margin: 0; From f52f595d563a12ae35bc705eb03111cc30f8801f Mon Sep 17 00:00:00 2001 From: Andrew Eisenberg Date: Tue, 29 Mar 2022 10:59:53 -0700 Subject: [PATCH 2/3] Add max-width for remote queries results page --- .../remote-queries/view/FileCodeSnippet.tsx | 1 - .../src/remote-queries/view/RemoteQueries.tsx | 27 ++++++++++--------- .../view/RepositoriesSearch.tsx | 3 ++- .../src/remote-queries/view/remoteQueries.css | 5 +++- 4 files changed, 21 insertions(+), 15 deletions(-) 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 7c8752dbb..a28ff358b 100644 --- a/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx +++ b/extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx @@ -325,6 +325,7 @@ const AnalysesResults = ({ queryResult={queryResult} analysesResults={analysesResults} /> + @@ -368,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 index 4fed6fbaa..2a909b690 100644 --- a/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx +++ b/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx @@ -14,7 +14,8 @@ const RepositoriesSearch = ({ filterValue, setFilterValue }: RepositoriesSearchP block sx={{ backgroundColor: 'var(--vscode-editor-background);', - color: 'var(--vscode-editor-foreground);' + color: 'var(--vscode-editor-foreground);', + width: 'calc(100% - 14px)', }} className="vscode-codeql__repositories-search" leadingVisual={SearchIcon} diff --git a/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css b/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css index e74df1275..b4721542a 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; @@ -41,7 +45,6 @@ } .vscode-codeql__repositories-search { - margin: 1em 0 0 0; } .vscode-codeql__flat-list { From 43f2539b42a568b9f6f7ed3cce0591280d5e668b Mon Sep 17 00:00:00 2001 From: Andrew Eisenberg Date: Wed, 30 Mar 2022 10:54:14 -0700 Subject: [PATCH 3/3] Remove unused css class --- .../ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx | 1 - extensions/ql-vscode/src/remote-queries/view/remoteQueries.css | 3 --- 2 files changed, 4 deletions(-) diff --git a/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx b/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx index 2a909b690..e4929e7ea 100644 --- a/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx +++ b/extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx @@ -17,7 +17,6 @@ const RepositoriesSearch = ({ filterValue, setFilterValue }: RepositoriesSearchP color: 'var(--vscode-editor-foreground);', width: 'calc(100% - 14px)', }} - className="vscode-codeql__repositories-search" leadingVisual={SearchIcon} aria-label="Repository search" name="repository-search" diff --git a/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css b/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css index b4721542a..c9ab81d7f 100644 --- a/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css +++ b/extensions/ql-vscode/src/remote-queries/view/remoteQueries.css @@ -44,9 +44,6 @@ color: var(--vscode-editor-foreground); } -.vscode-codeql__repositories-search { -} - .vscode-codeql__flat-list { list-style-type: none; margin: 0;