fix(dashboard): Race condition when setting activeTabs with nested tabs

[kgabryje]

SUMMARY

Fixes #16972
Active tabs were calculated in mount/update lifecycle events in Tabs components by taking current active tabs state and appending active tab key to it. That approach resulted in race condition when there are multiple Tabs components added to a dashboard - they were all operating on the same array and when 1 component finished its job, the rest were still operating on the now outdated array of active tabs. The result was overwriting the results calculated by other Tabs components.
In order to avoid that, I moved that logic into the Redux reducer, which is guaranteed to be synchronous. Now the Tabs only send current active key and previous active key as strings to Redux and the reducer handles calculating active tabs synchronously.
The described issue was the direct reason of the linked bug - the filters were out of scope, because activeTabs was not calculated correctly.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: see linked issue

After:
https://user-images.githubusercontent.com/15073128/136361545-77fa09ff-dffe-4832-b405-53af47d98727.mov

TESTING INSTRUCTIONS

1. Create a dashboard with multiple separate Tabs components, including nested Tabs
2. Verify that dashboardState.activeTabs in Redux has correct value
3. Add some native filters with scopes set to different Tabs
4. Verify that in scope/out of scope feature works as expected

ADDITIONAL INFORMATION

• Has associated issue: fixes [native filters] Filters displayed as out of scope for dashboard with nested tabs  #16972
• 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 @junlincc @graceguo-supercat

[codecov]

Codecov Report

Merging #17007 (8db4e56) into master (387ac2b) will decrease coverage by 0.06%.
The diff coverage is 22.22%.

@@            Coverage Diff             @@
##           master   #17007      +/-   ##
==========================================
- Coverage   76.98%   76.91%   -0.07%     
==========================================
  Files        1028     1030       +2     
  Lines       55074    55032      -42     
  Branches     7486     7469      -17     
==========================================
- Hits        42398    42330      -68     
- Misses      12428    12451      +23     
- Partials      248      251       +3     

Flag	Coverage Δ
javascript	70.89% <22.22%> (-0.15%)	⬇️

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

Impacted Files	Coverage Δ
...t-frontend/src/dashboard/actions/dashboardState.js	27.86% <0.00%> (ø)
...-frontend/src/dashboard/reducers/dashboardState.js	61.97% <0.00%> (-4.70%)	⬇️
...d/src/dashboard/components/gridComponents/Tabs.jsx	87.38% <100.00%> (+0.78%)	⬆️
...rontend/src/components/Select/DeprecatedSelect.tsx	64.70% <0.00%> (-15.69%)	⬇️
superset-frontend/src/components/Select/styles.tsx	70.83% <0.00%> (-13.89%)	⬇️
...ontend/src/dashboard/components/menu/HoverMenu.tsx	90.00% <0.00%> (-10.00%)	⬇️
.../src/explore/components/controls/SelectControl.jsx	80.00% <0.00%> (-9.39%)	⬇️
.../explore/components/controls/TextControl/index.tsx	82.92% <0.00%> (-4.88%)	⬇️
...d/src/filters/components/Time/TimeFilterPlugin.tsx	83.33% <0.00%> (-3.34%)	⬇️
...nd/src/dashboard/util/activeAllDashboardFilters.ts	89.28% <0.00%> (-3.31%)	⬇️
... and 92 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 387ac2b...8db4e56. Read the comment docs.

[geido]

/testenv up

[github-actions]

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

[villebro]

Code changes LGTM - it can be tricky to create a test that consistently reproduces this using the full layout, but I'd be fine with a test that asserts that redux state looks correct when called in a similar fashion to when the bug was still there.

[villebro]

We discussed testing approaches here at length with @kgabryje , and concluded that in the absence of a proper native filters RTL test suite (a big task that warrants a PR of it's own) and the relative simplicity of the reducer in question, I feel we can merge this as-is as long as we start working on integration tests as a follow-up task.

[kgabryje]

After discussion with @villebro:
Proper testing of this fix requires preparing a large and complex test environment - one that would be able to render the whole dashboard with native filters. Such environment is going to be necessary not only to test this PR, but also to improve the test coverage of the whole native filters feature in general. Let's tackle that as a separate task/PR
CC @junlincc

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[sadpandajoe]

🏷️ 2021.40