feat: Cross Filters in FilterBar

[geido]

SUMMARY

This PR adds the ability to see applied cross filters in the FilterBar in both horizontal and vertical mode

AFTER

untitled.dashboard.mp4

TESTING INSTRUCTIONS

1. Enable cross filtering in the Dashboard
2. Add one or more cross filters from the available charts
3. Remove a cross filter
4. Change filter bar orientation and verify that filters are appearing correctly
5. Reduce size of the screen and make sure the cross filters are appearing in the "More filters" dropdown correctly

KNOWN ISSUES

Highlighting a chart by clicking on the search icon does not work properly right now. It will be fixed in a separate PR as this issue affects master already

ADDITIONAL INFORMATION

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

[codecov]

Codecov Report

Merging #23138 (28e7de0) into master (64ad70c) will decrease coverage by 0.01%.
The diff coverage is 57.83%.

❗ Current head 28e7de0 differs from pull request most recent head b3ee5de. Consider uploading reports for the commit b3ee5de to get more accurate results

@@            Coverage Diff             @@
##           master   #23138      +/-   ##
==========================================
- Coverage   66.81%   66.80%   -0.01%     
==========================================
  Files        1900     1907       +7     
  Lines       73318    73444     +126     
  Branches     7935     7957      +22     
==========================================
+ Hits        48986    49067      +81     
- Misses      22299    22337      +38     
- Partials     2033     2040       +7     

Flag	Coverage Δ
javascript	53.73% <57.83%> (+0.03%)	⬆️

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

Impacted Files	Coverage Δ
...ard/components/FiltersBadge/DetailsPanel/index.tsx	82.22% <ø> (ø)
.../components/FiltersBadge/FilterIndicator/index.tsx	87.50% <ø> (ø)
...nd/src/dashboard/components/FiltersBadge/index.tsx	86.11% <ø> (ø)
...Filters/FilterBar/FiltersDropdownContent/index.tsx	20.00% <0.00%> (-5.00%)	⬇️
...s/FilterBar/FiltersOutOfScopeCollapsible/index.tsx	16.66% <0.00%> (-3.34%)	⬇️
.../nativeFilters/FilterBar/CrossFilters/selectors.ts	9.09% <9.09%> (ø)
.../nativeFilters/FilterBar/CrossFilters/Vertical.tsx	11.11% <11.11%> (ø)
...rc/dashboard/components/nativeFilters/selectors.ts	61.60% <23.25%> (ø)
...tiveFilters/FilterBar/CrossFilters/CrossFilter.tsx	56.25% <56.25%> (ø)
...rd/components/nativeFilters/FilterBar/Vertical.tsx	81.48% <60.00%> (+6.97%)	⬆️
... and 7 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[kgabryje]

1 more comment (we can handle it in a separate PR) - currently we display the filter bar only if the native filters FF is enabled. I think now that we use the filter bar to also show the cross filters, we should display the filter bar when either of the feature flags is enabled

[geido]

@kgabryje thanks for the feedback! All above issues should be sorted now. I have also included unit tests and separated the code a little bit more.

[kgabryje]

/testenv up FEATURE_DASHBOARD_CROSS_FILTERS=true

[github-actions]

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

[kgabryje]

/testenv up FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_HORIZONTAL_FILTER_BAR=true

[github-actions]

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

[geido]

@kasiazjc about the "No filters" empty state, that is referring to the native filters and it is mentioning the button to add new filters. Should we change the copy a bit to make sure it is referring to the native filters and not cross filters?

[kgabryje]

/testenv up FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_HORIZONTAL_FILTER_BAR=true

[github-actions]

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

[kgabryje]

Tested again, works great!

[villebro]

This is incredible stuff, love it! ❤️

[kasiazjc]

@kasiazjc about the "No filters" empty state that @kgabryje mentioned above, that is referring to the native filters and it is mentioning the button to add new filters. Should we change the copy a bit to make sure it is referring to the native filters and not cross filters?

So this is what I'm thinking:

No global filters are currently added
Click on “+Add/Edit Filters” button to create new dashboard filters.

In the next version of the dashboard filters we wanted to actually use term "global filters" which made sense to our users and they could easy understand what does it mean. So let's start there

thanks for all the work @geido and @kgabryje ❤️

[jinghua-qa]

I found an issue that when i try to locate the chart for emitting cross filter, all charts under a mask and the emitting chart is not highlight, i have to refresh page to show the charts again

Screen.Recording.2023-02-24.at.10.35.58.AM.mov

[geido]

I found an issue that when i try to locate the chart for emitting cross filter, all charts under a mask and the emitting chart is not highlight, i have to refresh page to show the charts again

@jinghua-qa it is a known issue mentioned in the PR description that @kgabryje has fixed and we are ready to merge.

[jinghua-qa]

LGTM, locate chart issue will fix in a separate PR

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.