Don't strip options from filter when updating relative date values (#10404)

* don't strip options from filter when updating relative date values

* appease flow

* Fix flow type and don't add null options

frontend/src/metabase/meta/types/Query.js

@@ -194,7 +194,7 @@ export type TimeIntervalFilter =
       ConcreteField,
       RelativeDatetimePeriod,
       RelativeDatetimeUnit,
-      FilterOptions,
+      TimeIntervalFilterOptions,
     ];
 
 export type TimeIntervalFilterOptions = {

frontend/src/metabase/query_builder/components/filters/pickers/RelativeDatePicker.jsx

@@ -5,6 +5,8 @@ import React, { Component } from "react";
 import NumericInput from "metabase/components/NumericInput.jsx";
 import DateUnitSelector from "../DateUnitSelector";
 
+import { assoc } from "icepick";
+
 import type {
   TimeIntervalFilter,
   RelativeDatetimeUnit,
@@ -45,11 +47,9 @@ export default class RelativeDatePicker extends Component {
   };
 
   render() {
-    const {
-      filter: [op, field, intervals, unit],
-      onFilterChange,
-      formatter,
-    } = this.props;
+    const { filter, onFilterChange, formatter } = this.props;
+    const intervals = filter[2];
+    const unit = filter[3];
     return (
       <div className="flex-full mb2 flex align-center">
         <NumericInput
@@ -65,9 +65,7 @@ export default class RelativeDatePicker extends Component {
           value={
             typeof intervals === "number" ? Math.abs(intervals) : intervals
           }
-          onChange={value =>
-            onFilterChange([op, field, formatter(value), unit])
-          }
+          onChange={value => onFilterChange(assoc(filter, 2, formatter(value)))}
           placeholder="30"
         />
         <div className="flex-full mr2">
@@ -75,7 +73,7 @@ export default class RelativeDatePicker extends Component {
             open={this.state.showUnits}
             value={unit}
             onChange={value => {
-              onFilterChange([op, field, intervals, value]);
+              onFilterChange(assoc(filter, 3, value));
               this.setState({ showUnits: false });
             }}
             togglePicker={() =>

frontend/test/metabase/query_builder/components/filters/pickers/DatePicker.unit.spec.js

 import React from "react";
 import { mount } from "enzyme";
 
+import { setInputValue } from "__support__/enzyme_utils";
+
 import DatePicker from "metabase/query_builder/components/filters/pickers/DatePicker";
 import DateOperatorSelector from "metabase/query_builder/components/filters/DateOperatorSelector";
 import DateUnitSelector from "metabase/query_builder/components/filters/DateUnitSelector";
@@ -60,4 +62,31 @@ describe("DatePicker", () => {
       "February 2020",
     ]);
   });
+  it("should call onFilterChange with updated filter", () => {
+    const onFilterChange = jest.fn();
+    const picker = mount(
+      <DatePicker
+        filter={[
+          "time-interval",
+          ["field-id", 1],
+          -30,
+          "day",
+          { "include-current": true },
+        ]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+
+    setInputValue(picker.find("input"), "-20");
+
+    const { calls } = onFilterChange.mock;
+    const lastCall = calls[calls.length - 1];
+    expect(lastCall[0]).toEqual([
+      "time-interval",
+      ["field-id", 1],
+      -20,
+      "day",
+      { "include-current": true },
+    ]);
+  });
 });