From 5b413fd500e2e6360ccc5d1c85489a76f5b924cb Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov Date: Tue, 3 Mar 2020 17:44:07 +0200 Subject: [PATCH 1/3] ui: Preserve sorting and search on Statements page Search query and sorting params are preserved as URL search params. It doesn't break existing routing configuration and allows restore custom state from URL. Release note: None Release justification: bug fixes and low-risk updates to new functionality --- .../src/views/app/components/Search/index.tsx | 3 +- .../src/views/statements/statementsPage.tsx | 31 ++++++++++++++++--- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/pkg/ui/src/views/app/components/Search/index.tsx b/pkg/ui/src/views/app/components/Search/index.tsx index 2d373f50e71d..8a8fb790664f 100644 --- a/pkg/ui/src/views/app/components/Search/index.tsx +++ b/pkg/ui/src/views/app/components/Search/index.tsx @@ -18,6 +18,7 @@ import "./search.styl"; interface ISearchProps { onSubmit: (value: string) => void; onClear?: () => void; + defaultValue?: string; } interface ISearchState { @@ -30,7 +31,7 @@ type TSearchProps = ISearchProps & InputProps; export class Search extends React.Component { state = { - value: "", + value: this.props.defaultValue || "", submitted: false, }; diff --git a/pkg/ui/src/views/statements/statementsPage.tsx b/pkg/ui/src/views/statements/statementsPage.tsx index 095e5068b066..c4337ccc78b4 100644 --- a/pkg/ui/src/views/statements/statementsPage.tsx +++ b/pkg/ui/src/views/statements/statementsPage.tsx @@ -73,24 +73,38 @@ export class StatementsPage extends React.Component) { super(props); + const { history } = props; + const searchParams = new URLSearchParams(history.location.search); + const sortKey = searchParams.get("sortKey"); + const ascending = searchParams.get("ascending"); + const searchQuery = searchParams.get("q"); + this.state = { sortSetting: { - sortKey: 6, // Latency - ascending: false, + sortKey: sortKey || 6, // Latency column is default for sorting + ascending: Boolean(ascending) || false, }, pagination: { pageSize: 20, current: 1, }, - search: "", + search: searchQuery || "", }; this.activateDiagnosticsRef = React.createRef(); } changeSortSetting = (ss: SortSetting) => { + const { history } = this.props; + this.setState({ sortSetting: ss, }); + + const searchParams = new URLSearchParams(history.location.search); + searchParams.set("sortKey", ss.sortKey); + searchParams.set("ascending", Boolean(ss.ascending).toString()); + history.location.search = searchParams.toString(); + history.replace(history.location); } selectApp = (app: DropdownOption) => { @@ -125,7 +139,15 @@ export class StatementsPage extends React.Component this.setState({ pagination: { ...this.state.pagination, current: 1 }, search }); + onSubmitSearchField = (search: string) => { + const { history } = this.props; + this.setState({ pagination: { ...this.state.pagination, current: 1 }, search }); + + const searchParams = new URLSearchParams(history.location.search); + searchParams.set("q", search); + history.location.search = searchParams.toString(); + history.replace(history.location); + } onClearSearchField = () => this.setState({ search: "" }); @@ -201,6 +223,7 @@ export class StatementsPage extends React.Component From 44e332a370c673dd684a9b8c18f2c9143e17a63d Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov Date: Mon, 23 Mar 2020 14:06:53 +0200 Subject: [PATCH 2/3] ui: (fix) Preserve URL search params on App filter change Before, URL search params were removed when App filter changed, and this behavior introduced inconsistent state between defined URL params and actual state. Now, when App filter changes, URL search params updated as well. Release note: None Release justification: bug fixes and low-risk updates to new functionality --- pkg/ui/src/views/statements/statementsPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/pkg/ui/src/views/statements/statementsPage.tsx b/pkg/ui/src/views/statements/statementsPage.tsx index c4337ccc78b4..3dc3525b41b5 100644 --- a/pkg/ui/src/views/statements/statementsPage.tsx +++ b/pkg/ui/src/views/statements/statementsPage.tsx @@ -108,7 +108,9 @@ export class StatementsPage extends React.Component { - this.props.history.push(`/statements/${app.value}`); + const { history } = this.props; + history.location.pathname = `/statements/${app.value}`; + history.replace(history.location); } componentWillMount() { From b6ba8bf791a676dad03a7e9dab7c3cc0f4b4cc8c Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov Date: Mon, 23 Mar 2020 14:10:06 +0200 Subject: [PATCH 3/3] ui: (fix) Clear search query from URL params when filters are cleared Before, on Statements page when user clears search statement, `q` url search param is not cleared Now, URL search param is cleared as well and preserves correct state. Release note: None Release justification: bug fixes and low-risk updates to new functionality --- pkg/ui/src/views/statements/statementsPage.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/pkg/ui/src/views/statements/statementsPage.tsx b/pkg/ui/src/views/statements/statementsPage.tsx index 3dc3525b41b5..1aafc923ca5f 100644 --- a/pkg/ui/src/views/statements/statementsPage.tsx +++ b/pkg/ui/src/views/statements/statementsPage.tsx @@ -151,7 +151,14 @@ export class StatementsPage extends React.Component this.setState({ search: "" }); + onClearSearchField = () => { + const { history } = this.props; + this.setState({ search: "" }); + const searchParams = new URLSearchParams(history.location.search); + searchParams.delete("q"); + history.location.search = searchParams.toString(); + history.replace(history.location); + } filteredStatementsData = () => { const { search } = this.state;