chore(Dashboard): Highlight errored filters on the left pane of the Native Filters form plus several enhancements

[geido]

SUMMARY

This PR introduces several enhancements to the native filters form and some new functionalities:

• It shows [untitled] on the left pane when no name is entered. This is consistent with other parts of the platform
• It shows an error indication on the left pane when an error is generated on the fly or on save. This drags the attention of the user to the right filters where an action is required
• It restructures a little bit the form using the Antdesign Form.Item wherever possible. However, the constraints of this implementation are huge and I advocate for a full refactor asap

AFTER

Video.Game.Sales.4.mp4

TESTING INSTRUCTIONS

1. Open a Dashboard with native filters enabled
2. Fill in the form and observe the behavior when an error is generated

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

[geido]

@mihir174 @junlincc @rusackas the proposed layout with a red title and a red icon indicator is tentative. Feel free to come up with better suggestions and I'll be happy to change accordingly. Thank you!

[codecov]

Codecov Report

Merging #16940 (301432e) into master (a782a62) will decrease coverage by 0.01%.
The diff coverage is 52.30%.

❗ Current head 301432e differs from pull request most recent head cffda9b. Consider uploading reports for the commit cffda9b to get more accurate results

@@            Coverage Diff             @@
##           master   #16940      +/-   ##
==========================================
- Coverage   76.70%   76.69%   -0.02%     
==========================================
  Files        1030     1030              
  Lines       55056    55122      +66     
  Branches     7465     7485      +20     
==========================================
+ Hits        42231    42276      +45     
- Misses      12576    12596      +20     
- Partials      249      250       +1     

Flag	Coverage Δ
javascript	70.90% <52.30%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
...mponents/nativeFilters/FiltersConfigModal/utils.ts	70.37% <33.33%> (-0.52%)	⬇️
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	71.60% <35.71%> (-2.23%)	⬇️
...ts/nativeFilters/FiltersConfigModal/FilterTabs.tsx	85.71% <77.77%> (-0.96%)	⬇️
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	90.16% <92.00%> (+1.59%)	⬆️
superset-frontend/src/components/Select/Select.tsx	92.25% <0.00%> (-0.30%)	⬇️
...e/components/controls/SelectAsyncControl/index.jsx
...e/components/controls/SelectAsyncControl/index.tsx	81.08% <0.00%> (ø)

---

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 a782a62...cffda9b. Read the comment docs.

[michael-s-molina]

Thanks for the feature @geido. Some points:

• When creating a new filter, the name is "New Filter" and not "[untitled]". I liked your idea, so it should start as "[untitled]"
• If you generate an error in a saved filter, like deleting its name, and cancel, the error shows when reopening
• The error icon position will conflict with the drag icon that is being implemented here. Maybe position it on the right side?
• Should we make the size of the error icon the same as the trash icon?

[geido]

Hey @michael-s-molina thanks for your feedback! I implemented what you suggested above and updated the video in the description

[michael-s-molina]

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true

[github-actions]

@michael-s-molina Ephemeral environment spinning up at http://52.11.166.147:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[kgabryje]

The code looks great and I wasn't able to break anything.
1 suggestion - maybe we should disable the save button when there are errors in the form? Currently nothing happens when I click it when there are errors, but there is no indication that the button is unclickable.

PR approved, it's up to you if you want to implement disabled save button in this PR, in another... or not at all 🙂

[geido]

That's a great suggestion. Let me work on that in a separate PR

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.