feat(native-filters): Time native filter

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

@@ -248,6 +248,7 @@ const FilterValue: React.FC<FilterProps> = ({
       defaultValue,
       currentValue,
       inverseSelection,
+      inputRef,
     });
     if (!areObjectsEqual(formData || {}, newFormData)) {
       setFormData(newFormData);
@@ -308,7 +309,7 @@ const FilterValue: React.FC<FilterProps> = ({
   return (
     <FilterItem>
       <SuperChart
-        height={20}
+        height={25}
         width={220}
         formData={formData}
         queriesData={state}

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

@@ -247,8 +247,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.tsx

@@ -495,6 +495,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/types.ts

@@ -77,6 +77,7 @@ export interface Target {
 export enum FilterType {
   filter_select = 'filter_select',
   filter_range = 'filter_range',
+  filter_time = 'filter_time',
 }
 
 /**

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

@@ -247,6 +247,7 @@ export function buildCascadeFiltersTree(filters: Filter[]): CascadeFilter[] {
 export const FilterTypeNames = {
   [FilterType.filter_select]: t('Select'),
   [FilterType.filter_range]: t('Range'),
+  [FilterType.filter_time]: t('Time'),
 };
 
 export const setFilterFieldValues = (

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

@@ -76,12 +76,12 @@ const fetchTimeRange = async (
   const endpoint = `/api/v1/time_range/?q=${query}`;
   try {
     const response = await SupersetClient.get({ endpoint });
-    const timeRangeString = buildTimeRangeString(
-      response?.json?.result?.since || '',
-      response?.json?.result?.until || '',
-    );
+    const { since = '', until = '' } = response?.json?.result || {};
+    const timeRangeString = buildTimeRangeString(since, until);
+
     return {
       value: formatTimeRange(timeRangeString, endpoints),
+      timeRangeString,
     };
   } catch (response) {
     const clientError = await getClientErrorObject(response);
@@ -168,13 +168,20 @@ const IconWrapper = styled.span`
 interface DateFilterLabelProps {
   name: string;
   onChange: (timeRange: string) => void;
+  onTimeRangeChange?: (textValue?: string, timeRange?: string) => void;
   value?: string;
   endpoints?: TimeRangeEndpoints;
   datasource?: string;
 }
 
 export default function DateFilterControl(props: DateFilterLabelProps) {
-  const { value = 'Last week', endpoints, onChange, datasource } = props;
+  const {
+    value = 'Last week',
+    endpoints,
+    datasource,
+    onChange,
+    onTimeRangeChange = () => {},
+  } = props;
   const [actualTimeRange, setActualTimeRange] = useState<string>(value);
 
   const [show, setShow] = useState<boolean>(false);
@@ -187,13 +194,14 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
 
   useEffect(() => {
     if (!isMounted) setIsMounted(true);
-    fetchTimeRange(value, endpoints).then(({ value: actualRange, error }) => {
-      if (error) {
-        setEvalResponse(error || '');
-        setValidTimeRange(false);
-        setTooltipTitle(value || '');
-      } else {
-        /*
+    fetchTimeRange(value, endpoints).then(
+      ({ value: actualRange, timeRangeString, error }) => {
+        if (error) {
+          setEvalResponse(error || '');
+          setValidTimeRange(false);
+          setTooltipTitle(value || '');
+        } else {
+          /*
           HRT == human readable text
           ADR == actual datetime range
           +--------------+------+----------+--------+----------+-----------+
@@ -204,20 +212,24 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
           | tooltip      | ADR  | ADR      | HRT    | HRT      |   ADR     |
           +--------------+------+----------+--------+----------+-----------+
         */
-        if (
-          frame === 'Common' ||
-          frame === 'Calendar' ||
-          frame === 'No filter'
-        ) {
-          setActualTimeRange(value);
-          setTooltipTitle(actualRange || '');
-        } else {
-          setActualTimeRange(actualRange || '');
-          setTooltipTitle(value || '');
+          const currentFrame = guessFrame(value);
+          if (
+            currentFrame === 'Common' ||
+            currentFrame === 'Calendar' ||
+            currentFrame === 'No filter'
+          ) {
+            setActualTimeRange(value);
+            setTooltipTitle(actualRange || '');
+            onTimeRangeChange(value, timeRangeString);
+          } else {
+            setActualTimeRange(actualRange || '');
+            setTooltipTitle(value || '');
+            onTimeRangeChange(value, timeRangeString);
+          }
+          setValidTimeRange(true);
         }
-        setValidTimeRange(true);
-      }
-    });
+      },
+    );
   }, [value]);
 
   useEffect(() => {
@@ -245,6 +257,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 +373,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,69 @@
+/**
+ * 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, height } = props;
+  const { defaultValue, currentValue } = formData;
+
+  const [value, setValue] = useState<string>(defaultValue ?? DEFAULT_VALUE);
+
+  const handleTimeRangeChange = (textValue: string, timeRange: string) => {
+    setExtraFormData({
+      // @ts-ignore
+      extraFormData: {
+        override_form_data: {
+          time_range: timeRange,
+        },
+      },
+      currentState: { value: textValue },
+    });
+  };
+
+  useEffect(() => {
+    setValue(currentValue ?? DEFAULT_VALUE);
+  }, [currentValue]);
+
+  useEffect(() => {
+    setValue(defaultValue ?? DEFAULT_VALUE);
+  }, [defaultValue]);
+
+  return (
+    <Styles width={width} height={height}>
+      <DateFilterControl
+        value={value}
+        name=""
+        onChange={setValue}
+        onTimeRangeChange={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 { t, ChartMetadata, ChartPlugin } 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',
+      isNativeFilter: true,
+      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';