update panels on back button pressed (#6300)

Signed-off-by: Boyko Lalov <boyskila@gmail.com>

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

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">

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