feat(native-filters): enable filter indicator and make datasource optional

superset-frontend/spec/fixtures/mockNativeFilters.ts

@@ -16,15 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FilterType } from 'src/dashboard/components/nativeFilters/types';
 import { NativeFiltersState } from 'src/dashboard/reducers/types';
 
 export const nativeFilters: NativeFiltersState = {
   filters: {
     'NATIVE_FILTER-e7Q8zKixx': {
       id: 'NATIVE_FILTER-e7Q8zKixx',
       name: 'region',
-      filterType: FilterType.filter_select,
+      filterType: 'filter_select',
       targets: [
         {
           datasetId: 2,
@@ -49,7 +48,7 @@ export const nativeFilters: NativeFiltersState = {
     'NATIVE_FILTER-x9QPw0so1': {
       id: 'NATIVE_FILTER-x9QPw0so1',
       name: 'country_code',
-      filterType: FilterType.filter_select,
+      filterType: 'filter_select',
       targets: [
         {
           datasetId: 2,

superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts

@@ -22,6 +22,8 @@ import {
   NativeFiltersState,
   NativeFilterState,
 } from 'src/dashboard/reducers/types';
+import { getTreeCheckedItems } from '../nativeFilters/FilterConfigModal/utils';
+import { Layout } from '../../types';
 
 export enum IndicatorStatus {
   Unset = 'UNSET',
@@ -130,7 +132,7 @@ const getRejectedColumns = (chart: any): Set<string> =>
   );
 
 export type Indicator = {
-  column: string;
+  column?: string;
   name: string;
   value: string[];
   status: IndicatorStatus;
@@ -172,6 +174,7 @@ export const selectIndicatorsForChart = (
   return indicators;
 };
 
+// TODO: refactor to take data from currentState
 const selectNativeIndicatorValue = (
   filterState: NativeFilterState,
 ): string[] => {
@@ -193,29 +196,45 @@ export const selectNativeIndicatorsForChart = (
   nativeFilters: NativeFiltersState,
   chartId: number,
   charts: any,
+  dashboardLayout: Layout,
 ): Indicator[] => {
   const chart = charts[chartId];
 
   const appliedColumns = getAppliedColumns(chart);
   const rejectedColumns = getRejectedColumns(chart);
 
-  const getStatus = (column: string, value: string[]): IndicatorStatus => {
-    if (rejectedColumns.has(column)) return IndicatorStatus.Incompatible;
-    if (appliedColumns.has(column) && value.length > 0) {
+  const getStatus = (
+    value: string[],
+    isAffectedByScope: boolean,
+    column?: string,
+  ): IndicatorStatus => {
+    if (!column && isAffectedByScope) {
+      // Filter without datasource
+      return IndicatorStatus.Applied;
+    }
+    if (column && rejectedColumns.has(column))
+      return IndicatorStatus.Incompatible;
+    if (column && appliedColumns.has(column) && value.length > 0) {
       return IndicatorStatus.Applied;
     }
     return IndicatorStatus.Unset;
   };
 
   const indicators = Object.values(nativeFilters.filters).map(nativeFilter => {
-    const column = nativeFilter.targets[0].column.name;
+    const isAffectedByScope = getTreeCheckedItems(
+      nativeFilter.scope,
+      dashboardLayout,
+    ).some(
+      layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
+    );
+    const column = nativeFilter.targets[0]?.column?.name;
     const filterState = nativeFilters.filtersState[nativeFilter.id];
     const value = selectNativeIndicatorValue(filterState);
     return {
       column,
       name: nativeFilter.name,
       path: [nativeFilter.id],
-      status: getStatus(column, value),
+      status: getStatus(value, isAffectedByScope, column),
       value,
     };
   });

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

@@ -51,15 +51,19 @@ const FilterValue: React.FC<FilterProps> = ({
   const { id, targets, filterType } = filter;
   const cascadingFilters = useCascadingFilters(id);
   const filterState = useFilterState(id);
-  const [loading, setLoading] = useState<boolean>(true);
   const [state, setState] = useState([]);
   const [error, setError] = useState<boolean>(false);
   const [formData, setFormData] = useState<Partial<QueryFormData>>({});
   const inputRef = useRef<HTMLInputElement>(null);
   const [target] = targets;
-  const { datasetId = 18, column } = target;
+  const {
+    datasetId = 18,
+    column = {},
+  }: Partial<{ datasetId: number; column: { name?: string } }> = target;
   const { name: groupby } = column;
   const currentValue = filterState.currentState?.value;
+  const hasDataSource = !!(datasetId && groupby);
+  const [loading, setLoading] = useState<boolean>(hasDataSource);
   useEffect(() => {
     const newFormData = getFormData({
       datasetId,
@@ -71,6 +75,9 @@ const FilterValue: React.FC<FilterProps> = ({
     });
     if (!areObjectsEqual(formData || {}, newFormData)) {
       setFormData(newFormData);
+      if (!hasDataSource) {
+        return;
+      }
       getChartDataRequest({
         formData: newFormData,
         force: false,
@@ -131,7 +138,8 @@ const FilterValue: React.FC<FilterProps> = ({
         height={20}
         width={220}
         formData={formData}
-        queriesData={state}
+        // For charts that don't have datasource we need workaround for empty placeholder
+        queriesData={hasDataSource ? state : [{ data: [null] }]}
         chartType={filterType}
         // @ts-ignore (update superset-ui)
         hooks={{ setExtraFormData }}

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

@@ -21,6 +21,8 @@ import {
   SuperChart,
   t,
   getChartControlPanelRegistry,
+  getChartMetadataRegistry,
+  Behavior,
 } from '@superset-ui/core';
 import { FormInstance } from 'antd/lib/form';
 import React, { useCallback } from 'react';
@@ -39,15 +41,10 @@ import { CustomControlItem } from '@superset-ui/chart-controls';
 import { ColumnSelect } from './ColumnSelect';
 import { NativeFiltersForm } from './types';
 import FilterScope from './FilterScope';
-import {
-  FilterTypeNames,
-  getControlItems,
-  setFilterFieldValues,
-  useForceUpdate,
-} from './utils';
+import { getControlItems, setFilterFieldValues, useForceUpdate } from './utils';
 import { useBackendFormUpdate } from './state';
 import { getFormData } from '../utils';
-import { Filter, FilterType } from '../types';
+import { Filter } from '../types';
 
 type DatasetSelectValue = {
   value: number;
@@ -121,9 +118,25 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
   const controlItems = getControlItems(
     controlPanelRegistry.get(formFilter?.filterType),
   );
-  useBackendFormUpdate(form, filterId, filterToEdit);
 
-  const initDatasetId = filterToEdit?.targets[0].datasetId;
+  const nativeFilterItems = getChartMetadataRegistry().items;
+  const nativeFilterVizTypes = Object.entries(nativeFilterItems)
+    // @ts-ignore
+    .filter(([, { value }]) =>
+      value.behaviors?.includes(Behavior.NATIVE_FILTER),
+    )
+    .map(([key]) => key);
+
+  // @ts-ignore
+  const hasDatasource = !!nativeFilterItems[formFilter?.filterType]?.value
+    ?.datasourceCount;
+
+  const hasFilledDatasource =
+    (formFilter?.dataset && formFilter?.column) || !hasDatasource;
+
+  useBackendFormUpdate(form, filterId, filterToEdit, hasDatasource);
+
+  const initDatasetId = filterToEdit?.targets[0]?.datasetId;
   const initColumn = filterToEdit?.targets[0]?.column?.name;
   const newFormData = getFormData({
     datasetId: formFilter?.dataset?.value,
@@ -179,69 +192,76 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
           <Input />
         </StyledFormItem>
         <StyledFormItem
-          name={['filters', filterId, 'dataset']}
-          initialValue={{ value: initDatasetId }}
-          label={<StyledLabel>{t('Datasource')}</StyledLabel>}
-          rules={[{ required: !removed, message: t('Datasource is required') }]}
-          data-test="datasource-input"
+          name={['filters', filterId, 'filterType']}
+          rules={[{ required: !removed, message: t('Name is required') }]}
+          initialValue={filterToEdit?.filterType || 'filter_select'}
+          label={<StyledLabel>{t('Filter Type')}</StyledLabel>}
         >
-          <SupersetResourceSelect
-            initialId={initDatasetId}
-            resource="dataset"
-            searchColumn="table_name"
-            transformItem={datasetToSelectOption}
-            isMulti={false}
-            onError={onDatasetSelectError}
-            onChange={e => {
-              // We need reset column when dataset changed
-              const datasetId = formFilter?.dataset?.value;
-              if (datasetId && e?.value !== datasetId) {
-                setFilterFieldValues(form, filterId, {
-                  column: null,
-                });
-              }
+          <Select
+            options={nativeFilterVizTypes.map(filterType => ({
+              value: filterType,
+              // @ts-ignore
+              label: nativeFilterItems[filterType]?.value.name,
+            }))}
+            onChange={({ value }: { value: string }) => {
+              setFilterFieldValues(form, filterId, {
+                filterType: value,
+                defaultValue: null,
+              });
               forceUpdate();
             }}
           />
         </StyledFormItem>
       </StyledContainer>
-      <StyledFormItem
-        // don't show the column select unless we have a dataset
-        // style={{ display: datasetId == null ? undefined : 'none' }}
-        name={['filters', filterId, 'column']}
-        initialValue={initColumn}
-        label={<StyledLabel>{t('Field')}</StyledLabel>}
-        rules={[{ required: !removed, message: t('Field is required') }]}
-        data-test="field-input"
-      >
-        <ColumnSelect
-          form={form}
-          filterId={filterId}
-          datasetId={formFilter?.dataset?.value}
-          onChange={forceUpdate}
-        />
-      </StyledFormItem>
-      <StyledFormItem
-        name={['filters', filterId, 'filterType']}
-        rules={[{ required: !removed, message: t('Name is required') }]}
-        initialValue={filterToEdit?.filterType || FilterType.filter_select}
-        label={<StyledLabel>{t('Filter Type')}</StyledLabel>}
-      >
-        <Select
-          options={Object.values(FilterType).map(filterType => ({
-            value: filterType,
-            label: FilterTypeNames[filterType],
-          }))}
-          onChange={({ value }: { value: FilterType }) => {
-            setFilterFieldValues(form, filterId, {
-              filterType: value,
-              defaultValue: null,
-            });
-            forceUpdate();
-          }}
-        />
-      </StyledFormItem>
-      {formFilter?.dataset && formFilter?.column && (
+      {hasDatasource && (
+        <>
+          <StyledFormItem
+            name={['filters', filterId, 'dataset']}
+            initialValue={{ value: initDatasetId }}
+            label={<StyledLabel>{t('Datasource')}</StyledLabel>}
+            rules={[
+              { required: !removed, message: t('Datasource is required') },
+            ]}
+            data-test="datasource-input"
+          >
+            <SupersetResourceSelect
+              initialId={initDatasetId}
+              resource="dataset"
+              searchColumn="table_name"
+              transformItem={datasetToSelectOption}
+              isMulti={false}
+              onError={onDatasetSelectError}
+              onChange={e => {
+                // We need reset column when dataset changed
+                const datasetId = formFilter?.dataset?.value;
+                if (datasetId && e?.value !== datasetId) {
+                  setFilterFieldValues(form, filterId, {
+                    column: null,
+                  });
+                }
+                forceUpdate();
+              }}
+            />
+          </StyledFormItem>
+          <StyledFormItem
+            // don't show the column select unless we have a dataset
+            // style={{ display: datasetId == null ? undefined : 'none' }}
+            name={['filters', filterId, 'column']}
+            initialValue={initColumn}
+            label={<StyledLabel>{t('Field')}</StyledLabel>}
+            rules={[{ required: !removed, message: t('Field is required') }]}
+            data-test="field-input"
+          >
+            <ColumnSelect
+              form={form}
+              filterId={filterId}
+              datasetId={formFilter?.dataset?.value}
+              onChange={forceUpdate}
+            />
+          </StyledFormItem>
+        </>
+      )}
+      {hasFilledDatasource && (
         <CleanFormItem
           name={['filters', filterId, 'defaultValueFormData']}
           hidden
@@ -259,25 +279,29 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
         data-test="default-input"
         label={<StyledLabel>{t('Default Value')}</StyledLabel>}
       >
-        {formFilter?.dataset &&
-          formFilter?.column &&
-          formFilter?.defaultValueQueriesData && (
-            <SuperChart
-              height={25}
-              width={250}
-              formData={newFormData}
-              queriesData={formFilter?.defaultValueQueriesData}
-              chartType={formFilter?.filterType}
-              hooks={{
-                setExtraFormData: ({ currentState }) => {
-                  setFilterFieldValues(form, filterId, {
-                    defaultValue: currentState?.value,
-                  });
-                  forceUpdate();
-                },
-              }}
-            />
-          )}
+        {((hasFilledDatasource && formFilter?.defaultValueQueriesData) ||
+          !hasDatasource) && (
+          <SuperChart
+            height={25}
+            width={250}
+            formData={newFormData}
+            // For charts that don't have datasource we need workaround for empty placeholder
+            queriesData={
+              hasDatasource
+                ? formFilter?.defaultValueQueriesData
+                : [{ data: [null] }]
+            }
+            chartType={formFilter?.filterType}
+            hooks={{
+              setExtraFormData: ({ currentState }) => {
+                setFilterFieldValues(form, filterId, {
+                  defaultValue: currentState?.value,
+                });
+                forceUpdate();
+              },
+            }}
+          />
+        )}
       </StyledFormItem>
       <StyledFormItem
         name={['filters', filterId, 'parentFilter']}