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

@@ -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}

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);
-  });
 });

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 = () => {