fix(dashboard): dashboard actions fail when bad component id exists in children array

[eric-briscoe]

SUMMARY

There are edge cases where a bad / orphan component id can end up on a dashboard layout element's children array. When this happens it causes critical errors blocking critical dashboard behaviors. There is still some mystery around the workflow in the code that causes a bad id to get into the children array, but once it does it causes major issues. This PR makes the updateComponentParentsList runtime safe. Additional fixes may be required to resolve underlying cause of bad ids ending up in the dashboard data but that is out of scope for this PR.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

New unit tests added verify the code handles edge cases that were previously causing unhandled exceptions to be thrown.

The existing unit tests were untouched to ensure the already tested behavior did not change.

The affected code in this PR is run every time a dashboard is opened, edited, saved. Testing requires verification that general dashboard behaviors work as expected. The steps below are not exhaustive or prescriptive but represent some paths for general testing of these changes.

1. Open an existing dashboard, edit, save
2. Navigate to a different dashboard, toggle between tabs if tabs exist
3. Create a new dashboard, save, edt, save
4. Re-load app verify new dashboard still works as expected

You can manually replicate the bad component id by injecting a bad id in https://github.com/apache/superset/blob/25114a7b97ca96341cdb2d5e6fceceddf6ebc3c4/superset-frontend/src/dashboard/actions/hydrate.js

Add:

Object.values(layout).some(element => {
      if (element.id !== DASHBOARD_ROOT_ID) {
        if (Array.isArray(element?.children)) {
          element.children.push('FAKE_BAD_ID');
          console.log(`ADDED FAKE ID ${element.id}`);
          return true;
        }
      }
      return false;
    });

after line 263

With the fix the above code insertion should not cause any errors of failures on dashboard behavior. If you add the above code in master without fix in this PR you should see various errors and odd behaviors as you interact, save, edit dashboards.

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

[codecov]

Codecov Report

Merging #22323 (f427e66) into master (3ffe782) will decrease coverage by 0.02%.
The diff coverage is 80.00%.

@@            Coverage Diff             @@
##           master   #22323      +/-   ##
==========================================
- Coverage   66.79%   66.77%   -0.03%     
==========================================
  Files        1846     1847       +1     
  Lines       70286    70392     +106     
  Branches     7683     7721      +38     
==========================================
+ Hits        46948    47002      +54     
- Misses      21346    21390      +44     
- Partials     1992     2000       +8     

Flag	Coverage Δ
javascript	53.78% <80.00%> (-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/utils.ts	46.66% <0.00%> (ø)
...d/src/dashboard/util/updateComponentParentsList.js	100.00% <100.00%> (ø)
...eModal/DatabaseConnectionForm/CommonParameters.tsx	76.92% <0.00%> (-8.80%)	⬇️
...rontend/src/components/DropdownContainer/index.tsx	75.00% <0.00%> (-3.58%)	⬇️
...t-frontend/src/dashboard/reducers/nativeFilters.ts	40.74% <0.00%> (-3.26%)	⬇️
...src/filters/components/Range/RangeFilterPlugin.tsx	68.80% <0.00%> (-1.95%)	⬇️
...ilters/FilterBar/FilterControls/FilterControls.tsx	68.62% <0.00%> (-1.59%)	⬇️
...c/views/CRUD/data/database/DatabaseModal/index.tsx	41.27% <0.00%> (-0.72%)	⬇️
...t-frontend/src/dashboard/actions/dashboardState.js	52.45% <0.00%> (-0.50%)	⬇️
...veFilters/FilterBar/FilterControls/FilterValue.tsx	6.00% <0.00%> (-0.32%)	⬇️
... and 32 more

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