feat(native-filters): Implement filter cards

[kgabryje]

SUMMARY

This PR implements the Filter Card component. Please note that as of now this component is not used anywhere - usages will be added in upcoming PRs.

Filter card is a component that displays native filter's metadata in user-friendly, readable way.
Information displayed:

• filter's name
• filter's type
• filter's scope
• filter's dependencies

Filter scope values:

• "All charts" if every chart in the dashboard is in scope
• "Tab name 1, Tab name 2" if "Tab name 1" and "Tab name 2" are filter scope's rootpath and every chart in those tabs is in scope
• "Tab name 1, Chart1" if every chart in top level tab "Tab name 1" is in scope + "Chart1" from another tab is in scope
• "Chart1, Chart2" if only those 2 charts are in scope and previous conditions are not fulfilled

Filter dependencies:

• list of native filters that current native filter is dependent on
• clicking a name of dependency highlights the filter

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

TODO: add unit tests
Manual tests will be performed when filter cards are added to filters

ADDITIONAL INFORMATION

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

CC @kasiazjc

https://app.shortcut.com/preset/story/36388/filter-cards

[michael-s-molina]

LGTM. As we discussed, we will work on the unit tests in a follow-up PR and manually test the changes made here in #18793.

Thanks for the work @kgabryje!

[codecov]

Codecov Report

Merging #18874 (5b9791f) into master (700829b) will decrease coverage by 0.15%.
The diff coverage is 0.65%.

@@            Coverage Diff             @@
##           master   #18874      +/-   ##
==========================================
- Coverage   66.36%   66.21%   -0.16%     
==========================================
  Files        1621     1633      +12     
  Lines       63057    63210     +153     
  Branches     6382     6409      +27     
==========================================
+ Hits        41850    41852       +2     
- Misses      19547    19698     +151     
  Partials     1660     1660              

Flag	Coverage Δ
javascript	51.02% <0.65%> (-0.24%)	⬇️

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

Impacted Files	Coverage Δ
...ilters/FilterBar/FilterControls/FilterControls.tsx	77.77% <ø> (ø)
...nents/nativeFilters/FilterCard/DependenciesRow.tsx	0.00% <0.00%> (ø)
...nts/nativeFilters/FilterCard/FilterCardContent.tsx	0.00% <0.00%> (ø)
...rd/components/nativeFilters/FilterCard/NameRow.tsx	0.00% <0.00%> (ø)
...d/components/nativeFilters/FilterCard/ScopeRow.tsx	0.00% <0.00%> (ø)
...oard/components/nativeFilters/FilterCard/Styles.ts	0.00% <0.00%> (ø)
...nativeFilters/FilterCard/TooltipWithTruncation.tsx	0.00% <0.00%> (ø)
...rd/components/nativeFilters/FilterCard/TypeRow.tsx	0.00% <0.00%> (ø)
...oard/components/nativeFilters/FilterCard/index.tsx	0.00% <0.00%> (ø)
.../nativeFilters/FilterCard/useFilterDependencies.ts	0.00% <0.00%> (ø)
... and 5 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 700829b...5b9791f. Read the comment docs.