feat(dashboard): Add description to the native filter

[m-ajay]

SUMMARY

Add a description column to the native filter. Show the description on hover.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

1. Turn native filters feature flags ON
2. Open a dashbboard, and click edit native filters
3. Add help text to the description column
4. Save
5. Hover over the "i" icon to see the description

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags: DASHBOARD_NATIVE_FILTERS, DASHBOARD_NATIVE_FILTERS_SET
• 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

[graceguo-supercat]

@m-ajay and @rusackas Please add design comments.

[codecov]

Codecov Report

Merging #17025 (7594453) into master (4316fe6) will increase coverage by 0.00%.
The diff coverage is 95.45%.

@@           Coverage Diff           @@
##           master   #17025   +/-   ##
=======================================
  Coverage   76.96%   76.96%           
=======================================
  Files        1037     1037           
  Lines       55608    55625   +17     
  Branches     7588     7594    +6     
=======================================
+ Hits        42800    42814   +14     
- Misses      12558    12561    +3     
  Partials      250      250           

Flag	Coverage Δ
javascript	71.02% <95.45%> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
...nd/src/dashboard/components/nativeFilters/types.ts	100.00% <ø> (ø)
...Filters/FilterBar/FilterControls/FilterControl.tsx	94.87% <88.88%> (-5.13%)	⬇️
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	69.32% <100.00%> (+0.07%)	⬆️
...mponents/nativeFilters/FiltersConfigModal/utils.ts	65.90% <100.00%> (+0.26%)	⬆️
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	87.13% <0.00%> (-0.59%)	⬇️

---

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 4316fe6...7594453. Read the comment docs.

[geido]

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DASHBOARD_NATIVE_FILTERS_SET=true FEATURE_DASHBOARD_FILTERS_EXPERIMENTAL=true

[github-actions]

@geido Ephemeral environment spinning up at http://54.218.236.238:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[geido]

@m-ajay Thanks for the functionality! I noticed a small issue. If you enter an empty char in the description, the tooltip will show up anyway

[michael-s-molina]

We should handle long texts in the description:

Screen.Recording.2021-10-08.at.7.30.37.AM.mov

You can style the tooltip content with the following to fix it:

display: -webkit-box;
-webkit-line-clamp: 20;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

[michael-s-molina]

The asterisk should come before the description icon for required filters.

[michael-s-molina]

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DASHBOARD_NATIVE_FILTERS_SET=true FEATURE_DASHBOARD_FILTERS_EXPERIMENTAL=true

[github-actions]

@michael-s-molina Ephemeral environment spinning up at http://34.222.229.189:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[michael-s-molina]

@m-ajay Requested some changes, especially about the use of the theme variable.

[michael-s-molina]

LGTM. Thanks for the contribution @m-ajay!

[etr2460]

yes, thanks for all the hard work and iteration!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.