feat(native-filters): Time native filter (apache#12992)

* Add Time Filter component

* Improve Time Filter component

* Fix import errors

* Display Time Filter

* Remove console logs

* Change Control Panel

* Remove unnecessary files

* Use time range override

* test: fix tests

* feat: re run pipeline

* fix: fix some case for Time filter

* fix: merge with master

* use original time range

* fix height

* add cross filter behavior

* apply filters on initialization

* add applied filter to overrides

* add unit tests for merge_extra_form_data

Co-authored-by: Agata Stawarz-Pastewska <[email protected]>
Co-authored-by: Ville Brofeldt <[email protected]>

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.tsx

@@ -184,17 +184,23 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     extraFormData: ExtraFormData,
     currentState: CurrentFilterState,
   ) => {
-    setFilterData(prevFilterData => ({
-      ...prevFilterData,
-      [filter.id]: {
-        extraFormData,
-        currentState,
-      },
-    }));
+    let isInitialized = false;
+    setFilterData(prevFilterData => {
+      if (filter.id in prevFilterData) {
+        isInitialized = true;
+      }
+      return {
+        ...prevFilterData,
+        [filter.id]: {
+          extraFormData,
+          currentState,
+        },
+      };
+    });
 
     const children = cascadeChildren[filter.id] || [];
-    // force instant updating for parent filters
-    if (filter.isInstant || children.length > 0) {
+    // force instant updating on initialization or for parent filters
+    if (!isInitialized || filter.isInstant || children.length > 0) {
       setExtraFormData(filter.id, extraFormData, currentState);
     }
   };

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterValue.tsx

@@ -76,6 +76,7 @@ const FilterValue: React.FC<FilterProps> = ({
       defaultValue,
       currentValue,
       inverseSelection,
+      inputRef,
     });
     if (!areObjectsEqual(formData || {}, newFormData)) {
       setFormData(newFormData);

superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal/FilterConfigForm.tsx

@@ -249,8 +249,8 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
           formFilter?.column &&
           formFilter?.defaultValueQueriesData && (
             <SuperChart
-              height={20}
-              width={220}
+              height={25}
+              width={250}
               formData={newFormData}
               queriesData={formFilter?.defaultValueQueriesData}
               chartType={formFilter?.filterType}

superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal/FilterConfigModal.tsx

@@ -506,6 +506,7 @@ export function FilterConfigModal({
   return (
     <StyledModal
       visible={isOpen}
+      maskClosable={false}
       title={t('Filter configuration and scoping')}
       width="55%"
       destroyOnClose

superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal/utils.ts

@@ -156,6 +156,7 @@ export const findFilterScope = (
 export const FilterTypeNames = {
   [FilterType.filter_select]: t('Select'),
   [FilterType.filter_range]: t('Range'),
+  [FilterType.filter_time]: t('Time'),
 };
 
 export const setFilterFieldValues = (
@@ -177,18 +178,3 @@ export const setFilterFieldValues = (
 
 export const isScopingAll = (scope: Scope) =>
   !scope || (scope.rootPath[0] === DASHBOARD_ROOT_ID && !scope.excluded.length);
-
-type AppendFormData = {
-  filters: {
-    val?: number | string | null;
-  }[];
-};
-
-export const extractDefaultValue = {
-  [FilterType.filter_select]: (appendFormData: AppendFormData) =>
-    appendFormData.filters?.[0]?.val,
-  [FilterType.filter_range]: (appendFormData: AppendFormData) => ({
-    min: appendFormData.filters?.[0].val,
-    max: appendFormData.filters?.[1].val,
-  }),
-};

superset-frontend/src/dashboard/components/nativeFilters/types.ts

@@ -30,6 +30,7 @@ export interface Scope {
 export enum FilterType {
   filter_select = 'filter_select',
   filter_range = 'filter_range',
+  filter_time = 'filter_time',
 }
 
 /** The target of a filter is the datasource/column being filtered */

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx

@@ -245,6 +245,12 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
     setShow(false);
   }
 
+  function onOpen() {
+    setTimeRangeValue(value);
+    setFrame(guessFrame(value));
+    setShow(true);
+  }
+
   function onHide() {
     setTimeRangeValue(value);
     setFrame(guessFrame(value));
@@ -355,7 +361,7 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
           <Label
             className="pointer"
             data-test="time-range-trigger"
-            onClick={() => setShow(true)}
+            onClick={onOpen}
           >
             {actualTimeRange}
           </Label>

superset-frontend/src/filters/components/Time/AntdTimeFilter.tsx

@@ -0,0 +1,70 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { styled } from '@superset-ui/core';
+import React, { useState, useEffect } from 'react';
+import DateFilterControl from 'src/explore/components/controls/DateFilterControl/DateFilterControl';
+import { AntdPluginFilterStylesProps } from '../types';
+import { AntdPluginFilterTimeProps } from './types';
+
+const DEFAULT_VALUE = 'Last week';
+
+const Styles = styled.div<AntdPluginFilterStylesProps>`
+  height: ${({ height }) => height}px;
+  width: ${({ width }) => width}px;
+  overflow-x: scroll;
+`;
+
+export default function AntdTimeFilter(props: AntdPluginFilterTimeProps) {
+  const { formData, setExtraFormData, width } = props;
+  const { defaultValue, currentValue } = formData;
+
+  const [value, setValue] = useState<string>(defaultValue ?? DEFAULT_VALUE);
+
+  const handleTimeRangeChange = (timeRange: string): void => {
+    setExtraFormData({
+      // @ts-ignore
+      extraFormData: {
+        override_form_data: {
+          time_range: timeRange,
+        },
+      },
+      currentState: { value: timeRange },
+    });
+    setValue(timeRange);
+  };
+
+  useEffect(() => {
+    handleTimeRangeChange(currentValue ?? DEFAULT_VALUE);
+  }, [currentValue]);
+
+  useEffect(() => {
+    handleTimeRangeChange(defaultValue ?? DEFAULT_VALUE);
+  }, [defaultValue]);
+
+  return (
+    // @ts-ignore
+    <Styles width={width}>
+      <DateFilterControl
+        value={value}
+        name="time_range"
+        onChange={handleTimeRangeChange}
+      />
+    </Styles>
+  );
+}

superset-frontend/src/filters/components/Time/controlPanel.ts

@@ -0,0 +1,26 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ControlPanelConfig } from '@superset-ui/chart-controls';
+
+const config: ControlPanelConfig = {
+  // For control input types, see: superset-frontend/src/explore/components/controls/index.js
+  controlPanelSections: [],
+};
+
+export default config;

superset-frontend/src/filters/components/Time/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import controlPanel from './controlPanel';
+import transformProps from './transformProps';
+import thumbnail from './images/thumbnail.png';
+
+export default class TimeFilterPlugin extends ChartPlugin {
+  constructor() {
+    const metadata = new ChartMetadata({
+      name: t('Time range filter plugin'),
+      description: 'Custom time filter plugin',
+      behaviors: [Behavior.CROSS_FILTER, Behavior.NATIVE_FILTER],
+      thumbnail,
+    });
+
+    super({
+      controlPanel,
+      loadChart: () => import('./AntdTimeFilter'),
+      metadata,
+      transformProps,
+    });
+  }
+}

superset-frontend/src/filters/components/Time/transformProps.ts

@@ -0,0 +1,37 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ChartProps } from '@superset-ui/core';
+import { DEFAULT_FORM_DATA } from './types';
+
+export default function transformProps(chartProps: ChartProps) {
+  const { formData, height, hooks, queriesData, width } = chartProps;
+  const { setExtraFormData } = hooks;
+  const { data } = queriesData[0];
+
+  return {
+    data,
+    formData: {
+      ...DEFAULT_FORM_DATA,
+      ...formData,
+    },
+    height,
+    setExtraFormData,
+    width,
+  };
+}

superset-frontend/src/filters/components/Time/types.ts

@@ -0,0 +1,44 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+  QueryFormData,
+  DataRecord,
+  SetExtraFormDataHook,
+} from '@superset-ui/core';
+import { AntdPluginFilterStylesProps } from '../types';
+
+interface PluginFilterTimeCustomizeProps {
+  defaultValue?: string | null;
+  currentValue?: string | null;
+}
+
+export type AntdPluginFilterSelectQueryFormData = QueryFormData &
+  AntdPluginFilterStylesProps &
+  PluginFilterTimeCustomizeProps;
+
+export type AntdPluginFilterTimeProps = AntdPluginFilterStylesProps & {
+  data: DataRecord[];
+  setExtraFormData: SetExtraFormDataHook;
+  formData: AntdPluginFilterSelectQueryFormData;
+};
+
+export const DEFAULT_FORM_DATA: PluginFilterTimeCustomizeProps = {
+  defaultValue: null,
+  currentValue: null,
+};

superset-frontend/src/filters/components/index.ts

@@ -18,3 +18,4 @@
  */
 export { default as AntdSelectFilterPlugin } from './Select';
 export { default as AntdRangeFilterPlugin } from './Range';
+export { default as TimeFilterPlugin } from './Time';

superset-frontend/src/visualizations/presets/MainPreset.js

@@ -62,6 +62,7 @@ import {
 import {
   AntdSelectFilterPlugin,
   AntdRangeFilterPlugin,
+  TimeFilterPlugin,
 } from 'src/filters/components/';
 import FilterBoxChartPlugin from '../FilterBox/FilterBoxChartPlugin';
 import TimeTableChartPlugin from '../TimeTable/TimeTableChartPlugin';
@@ -113,6 +114,7 @@ export default class MainPreset extends Preset {
         }),
         new AntdSelectFilterPlugin().configure({ key: 'filter_select' }),
         new AntdRangeFilterPlugin().configure({ key: 'filter_range' }),
+        new TimeFilterPlugin().configure({ key: 'filter_time' }),
       ],
     });
   }