fix: Reordering native filters ignored by filter bar

[kgabryje]

SUMMARY

When user was tried to reorder native filters placed in overflow dropdown in horizontal bar, the visual changes were not applied and filters were rendered in the same order as before. The problem was using a key property around rendered filter - since the key={id} wasn't changing when filters were reordered, React ignored the change and didn't redraw the filters.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screen.Recording.2022-12-07.at.20.11.14.mov

After:

Screen.Recording.2022-12-07.at.20.07.04.mov

TESTING INSTRUCTIONS

1. Enable HORIZONTAL_FILTERS_BAR ff
2. Add some filters, enough to make the overflow button appear
3. Reorder filters rendered in the overflow dropdown
4. Verify that those filters are indeed reordered after saving

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

[michael-s-molina]

@kgabryje There's still a problem with reordering when overflowed and not-overflowed elements are involved.

Screen.Recording.2022-12-07.at.2.25.46.PM.mov

[codecov]

Codecov Report

Merging #22362 (5922be4) into master (0dbaaad) will decrease coverage by 0.00%.
The diff coverage is 66.66%.

@@            Coverage Diff             @@
##           master   #22362      +/-   ##
==========================================
- Coverage   66.77%   66.77%   -0.01%     
==========================================
  Files        1847     1847              
  Lines       70558    70559       +1     
  Branches     7735     7736       +1     
==========================================
  Hits        47114    47114              
  Misses      21444    21444              
- Partials     2000     2001       +1     

Flag	Coverage Δ
javascript	53.83% <66.66%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
...rontend/src/components/DropdownContainer/index.tsx	72.83% <ø> (ø)
...Filters/FilterBar/FiltersDropdownContent/index.tsx	25.00% <ø> (ø)
...s/FilterBar/FiltersOutOfScopeCollapsible/index.tsx	20.00% <ø> (ø)
...ilters/FilterBar/FilterControls/FilterControls.tsx	67.30% <66.66%> (-1.32%)	⬇️

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