feat(native-filters): Hide time filters if loaded datasets don't have temporal columns

[kgabryje]

SUMMARY

If none of the datasets used by charts on current dashboard have any temporal columns, there's no point in applying Time range, Time column or Time grain filters to them. This PR implements disables selecting those filter types on dashboards without datasets with temporal columns.
Also, there's no point in pre-filtering by time range datasets without temporal columns. This PR implements hiding time range picker pre-filter if current dataset doesn't have temporal columns.
I also removed "px" suffix from "0px" css values to remove linter warnings.

Second part of the related issue (#15068) was excluding charts that use dataset without temporal columns from scope when creating a time filter. We've decided to handle this as a separate issue (#14977). CC @junlincc

Rejected alternatives: hiding time filters instead of disabling options in select button. We decided that it might be confusing for the users if some filter types just "disappeared".

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: see #15068

After:
Case 1: only datasets without temporal columns - time filters disabled, time range pre-filter hidden
https://user-images.githubusercontent.com/15073128/122394612-7589fc80-cf76-11eb-9af4-f3662b71d432.mov

Case 2: only some datasets have temporal columns - time filters enabled, time range pre-filter hidden if a dataset without temporal columns is selected ("threads" dataset has temporal columns, "members_channels_2" doesn't)
https://user-images.githubusercontent.com/15073128/122388521-3eb0e800-cf70-11eb-96b6-ad5f2651bf69.mov

TESTING INSTRUCTIONS

0. Enable DASHBOARD_NATIVE_FILTERS feature flag
1. Create a dashboard using datasets without temporal columns (e.g. covid_vaccines from test data)
2. Open native filters modal, verify that only Value and Numerical Range filter types are enabled.
3. Create a dashboard using multiple datasets, some of which have temporal columns, and some don't
4. Open native filters modal, verify that all 5 filter types are available
5. Select a dataset with temporal columns and check Pre-filter available values. Verify that time range filter shows up
6. Select a dataset without temporal columns and go to pre-filtering section. Verify that time range filter doesn't show up.

ADDITIONAL INFORMATION

• Has associated issue: fixes [native-filters]hide time related filters when there's no temporal column in datasets #15068
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[villebro]

LGTM - code looks good and works as expected in testing 👍

[michael-s-molina]

@kgabryje I don't need to remove the px from the zeros 😆. The CSS minifiers will do that anyway.

[kgabryje]

@kgabryje I don't need to remove the px from the zeros 😆. The CSS minifiers will do that anyway.

I know, but Webstorm was displaying lots of warnings 😄

[michael-s-molina]

LGTM. Nice idea!

[michael-s-molina]

@kgabryje I don't need to remove the px from the zeros 😆. The CSS minifiers will do that anyway.

I know, but Webstorm was displaying lots of warnings 😄

Oh, gotcha! I hate warnings too 🤣

[codecov]

Codecov Report

Merging #15225 (a826630) into master (e5187a4) will increase coverage by 0.09%.
The diff coverage is 84.37%.

@@            Coverage Diff             @@
##           master   #15225      +/-   ##
==========================================
+ Coverage   77.08%   77.18%   +0.09%     
==========================================
  Files         971      971              
  Lines       50242    50308      +66     
  Branches     6498     6140     -358     
==========================================
+ Hits        38731    38828      +97     
+ Misses      11306    11276      -30     
+ Partials      205      204       -1     

Flag	Coverage Δ
javascript	71.80% <84.37%> (+0.20%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...omponents/nativeFilters/FilterBar/Header/index.tsx	91.89% <0.00%> (ø)
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	69.15% <85.18%> (+0.94%)	⬆️
...ters/FiltersConfigModal/FiltersConfigForm/utils.ts	93.75% <100.00%> (+0.41%)	⬆️
superset-frontend/src/dataMask/reducer.ts	71.42% <100.00%> (+6.84%)	⬆️
...nfigModal/FiltersConfigForm/CollapsibleControl.tsx	91.30% <0.00%> (-8.70%)	⬇️
...ters/FiltersConfigModal/FiltersConfigForm/state.ts	96.66% <0.00%> (-3.34%)	⬇️
superset-frontend/src/views/CRUD/hooks.ts	53.02% <0.00%> (ø)
...end/src/SqlLab/components/RunQueryActionButton.tsx	64.28% <0.00%> (ø)
...hboard/components/nativeFilters/FilterBar/utils.ts	75.00% <0.00%> (ø)
... and 11 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fe5381d...a826630. Read the comment docs.

[graceguo-supercat]

@kgabryje i am scanning dashboards with current master branch.
this PR cause many of our dashboards can not add time filter. I am pretty sure those dataset has temporal column.

I am not sure what is logic you decide a dataset has "temporal" column, many of our users can check Is Temporal from dataset editor:

Could you investigate and test it?

[villebro]

@graceguo-supercat This PR relies on backend functionality added in this PR: #15188 . I can investigate this.

[villebro]

I am unable to reproduce this problem. I created a datasource with the following columns:

When I check the available datatypes in for the datasource in the Dashboard view in Redux, they show up correctly (check column_types, where 0 == GenericDataType.NUMERIC, 1 == GenericDataType.STRING, 2 == GenericDataType.TEMPORAL, 3 == GenericDataType.BOOLEAN):

When I attempt to add a temporal filter, it works as expected:

When I uncheck "is temporal", the temporal datatype is removed from Redux, and consequently the temporal filter types are also removed from the filter config modal as expected:

[kgabryje]

@graceguo-supercat I tested on a few dashboards and I can't reproduce the issue.
Case 1: a dashboard with multiple datasets, some of them have temporal columns and some don't (Slack Dashboard from test data) - time filters are available.

Case 2: a dashboard with 1 dataset with temporal columns (World Bank's Data), time filters are available

Case 3: a dashboard with a dataset which doesn't have temporal columns (Covid Vaccine Dashboard), time filters are unavailable.

Case 4: Covid Vaccine Dashboard with manually added temporal column through Edit Dataset modal, time filters are available.