From 0f84d5b2cf412589b51b07e1746e01384ac46352 Mon Sep 17 00:00:00 2001
From: Boyko <boyskila@users.noreply.github.com>
Date: Sun, 19 Jan 2020 01:40:25 +0300
Subject: [PATCH] React UI: broken graph page browser history (#6659)

* add panel state for the expression input

Signed-off-by: blalov <boiskila@gmail.com>

* remove redundant test

Signed-off-by: blalov <boiskila@gmail.com>
---
 web/ui/react-app/src/pages/graph/Panel.tsx          | 11 ++++++++---
 web/ui/react-app/src/pages/graph/PanelList.test.tsx |  8 --------
 web/ui/react-app/src/pages/graph/PanelList.tsx      |  3 +--
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/web/ui/react-app/src/pages/graph/Panel.tsx b/web/ui/react-app/src/pages/graph/Panel.tsx
index 6f5321f32e..5e19701290 100644
--- a/web/ui/react-app/src/pages/graph/Panel.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.tsx
@@ -28,6 +28,7 @@ interface PanelState {
   loading: boolean;
   error: string | null;
   stats: QueryStats | null;
+  exprInputValue: string;
 }
 
 export interface PanelOptions {
@@ -65,6 +66,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       loading: false,
       error: null,
       stats: null,
+      exprInputValue: props.options.expr,
     };
   }
 
@@ -85,9 +87,12 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
   }
 
   executeQuery = (): void => {
-    const { expr } = this.props.options;
+    const { exprInputValue: expr } = this.state;
     const queryStart = Date.now();
     this.props.onExecuteQuery(expr);
+    if (this.props.options.expr !== expr) {
+      this.setOptions({ expr });
+    }
     if (expr === '') {
       return;
     }
@@ -177,7 +182,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
   }
 
   handleExpressionChange = (expr: string): void => {
-    this.setOptions({ expr: expr });
+    this.setState({ exprInputValue: expr });
   };
 
   handleChangeRange = (range: number): void => {
@@ -215,7 +220,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
         <Row>
           <Col>
             <ExpressionInput
-              value={options.expr}
+              value={this.state.exprInputValue}
               onExpressionChange={this.handleExpressionChange}
               executeQuery={this.executeQuery}
               loading={this.state.loading}
diff --git a/web/ui/react-app/src/pages/graph/PanelList.test.tsx b/web/ui/react-app/src/pages/graph/PanelList.test.tsx
index 9e1196161a..f5a2fad27d 100755
--- a/web/ui/react-app/src/pages/graph/PanelList.test.tsx
+++ b/web/ui/react-app/src/pages/graph/PanelList.test.tsx
@@ -37,12 +37,4 @@ describe('PanelList', () => {
     expect(btn.prop('color')).toEqual('primary');
     expect(btn.children().text()).toEqual('Add Panel');
   });
-
-  it('updates URL when a query is executed', () => {
-    const panelList = mount(<PanelList />);
-    const instance: any = panelList.instance();
-    const updateURLSpy = jest.spyOn(instance, 'updateURL');
-    instance.handleExecuteQuery('new');
-    expect(updateURLSpy).toHaveBeenCalledTimes(1);
-  });
 });
diff --git a/web/ui/react-app/src/pages/graph/PanelList.tsx b/web/ui/react-app/src/pages/graph/PanelList.tsx
index 9af52a4b22..8e2cec6882 100644
--- a/web/ui/react-app/src/pages/graph/PanelList.tsx
+++ b/web/ui/react-app/src/pages/graph/PanelList.tsx
@@ -109,7 +109,6 @@ class PanelList extends Component<RouteComponentProps & PathPrefixProps, PanelLi
     );
     localStorage.setItem('history', JSON.stringify(extendedItems.slice(0, 50)));
     this.updatePastQueries();
-    this.updateURL();
   };
 
   updateURL() {
@@ -119,7 +118,7 @@ class PanelList extends Component<RouteComponentProps & PathPrefixProps, PanelLi
 
   handleOptionsChanged = (id: string, options: PanelOptions) => {
     const updatedPanels = this.state.panels.map(p => (id === p.id ? { ...p, options } : p));
-    this.setState({ panels: updatedPanels });
+    this.setState({ panels: updatedPanels }, this.updateURL);
   };
 
   addPanel = () => {