From fc309a35bb6357e25efde1fd3e1132e7f8cd09be Mon Sep 17 00:00:00 2001
From: Boyko <boyskila@users.noreply.github.com>
Date: Tue, 12 Nov 2019 11:21:23 +0200
Subject: [PATCH] update panels on back button pressed (#6300)

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
---
 web/ui/react-app/src/ExpressionInput.test.tsx |  4 ++--
 web/ui/react-app/src/ExpressionInput.tsx      | 19 ++++++++++---------
 web/ui/react-app/src/Panel.tsx                |  3 ++-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/web/ui/react-app/src/ExpressionInput.test.tsx b/web/ui/react-app/src/ExpressionInput.test.tsx
index 66b16f24d..44b992676 100644
--- a/web/ui/react-app/src/ExpressionInput.test.tsx
+++ b/web/ui/react-app/src/ExpressionInput.test.tsx
@@ -96,11 +96,11 @@ describe('ExpressionInput', () => {
     });
   });
 
-  describe('handleDropdownSelection', () => {
+  describe('onSelect', () => {
     it('should call setState with selected value', () => {
       const instance: any = expressionInput.instance();
       const stateSpy = jest.spyOn(instance, 'setState');
-      instance.handleDropdownSelection('foo');
+      instance.setValue('foo');
       expect(stateSpy).toHaveBeenCalledWith({ value: 'foo', height: 'auto' }, expect.anything());
     });
   });
diff --git a/web/ui/react-app/src/ExpressionInput.tsx b/web/ui/react-app/src/ExpressionInput.tsx
index d36020b63..b6fbe39a4 100644
--- a/web/ui/react-app/src/ExpressionInput.tsx
+++ b/web/ui/react-app/src/ExpressionInput.tsx
@@ -42,19 +42,20 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
   };
 
   handleInput = () => {
-    this.setState(
-      {
-        height: 'auto',
-        value: this.exprInputRef.current!.value,
-      },
-      this.setHeight
-    );
+    this.setValue(this.exprInputRef.current!.value);
   };
 
-  handleDropdownSelection = (value: string) => {
+  setValue = (value: string) => {
     this.setState({ value, height: 'auto' }, this.setHeight);
   };
 
+  componentDidUpdate(prevProps: ExpressionInputProps) {
+    const { value } = this.props;
+    if (value !== prevProps.value) {
+      this.setValue(value);
+    }
+  }
+
   handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !event.shiftKey) {
       this.executeQuery();
@@ -126,7 +127,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
   render() {
     const { value, height } = this.state;
     return (
-      <Downshift onSelect={this.handleDropdownSelection}>
+      <Downshift onSelect={this.setValue}>
         {downshift => (
           <div>
             <InputGroup className="expression-input">
diff --git a/web/ui/react-app/src/Panel.tsx b/web/ui/react-app/src/Panel.tsx
index 78d651c31..2c6299ff6 100644
--- a/web/ui/react-app/src/Panel.tsx
+++ b/web/ui/react-app/src/Panel.tsx
@@ -79,7 +79,8 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       prevOpts.type !== opts.type ||
       prevOpts.range !== opts.range ||
       prevOpts.endTime !== opts.endTime ||
-      prevOpts.resolution !== opts.resolution
+      prevOpts.resolution !== opts.resolution ||
+      prevOpts.expr !== opts.expr
     ) {
       if (prevOpts.type !== opts.type) {
         // If the other options change, we still want to show the old data until the new