feat(native-filters): Show alert for unsaved filters after cancelling Filter Config Modal

[agatapst]

SUMMARY

The aim was to show info at the bottom of Native Filter Config Modal when users clicks 'cancel'.
Now we want the user to confirm this decision when there are unsaved filters.
Fixes #12459

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Confirming cancel:

Remove incorrect

Alert with long filter names:

TEST PLAN

Set "DASHBOARD_NATIVE_FILTERS": True
Create native filter
Click Cancel

ADDITIONAL INFORMATION

• Has associated issue: [dashboard] When adding two native filters (first ok,second one partially filled) I lost the first one #12459
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

cc @junlincc @rusackas @villebro
@adam-stasiak please test it

[codecov-io]

Codecov Report

Merging #12554 (1b6c019) into master (0f243c6) will decrease coverage by 3.06%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #12554      +/-   ##
==========================================
- Coverage   66.75%   63.68%   -3.07%     
==========================================
  Files        1015      486     -529     
  Lines       49634    29984   -19650     
  Branches     4839        0    -4839     
==========================================
- Hits        33131    19095   -14036     
+ Misses      16380    10889    -5491     
+ Partials      123        0     -123     

Flag	Coverage Δ
cypress	?
javascript	?
python	63.68% <ø> (-0.28%)	⬇️

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

Impacted Files	Coverage Δ
superset/sql_validators/postgres.py	50.00% <0.00%> (-50.00%)	⬇️
superset/db_engine_specs/sqlite.py	65.62% <0.00%> (-9.38%)	⬇️
superset/databases/commands/create.py	83.67% <0.00%> (-8.17%)	⬇️
superset/databases/commands/update.py	85.71% <0.00%> (-8.17%)	⬇️
superset/databases/commands/test_connection.py	84.78% <0.00%> (-4.35%)	⬇️
superset/utils/celery.py	96.42% <0.00%> (-3.58%)	⬇️
superset/models/core.py	85.86% <0.00%> (-2.99%)	⬇️
superset/views/core.py	72.82% <0.00%> (-2.55%)	⬇️
superset/db_engine_specs/mysql.py	89.79% <0.00%> (-2.05%)	⬇️
superset/datasets/api.py	89.49% <0.00%> (-1.83%)	⬇️
... and 538 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 0f243c6...1b6c019. Read the comment docs.

[junlincc]

Thank you for the PR @agatapst! ♥️Tested, work as expected! should we add quotation mark to the filter name in the confirmation message?
to delete will not be saved. seems a bit confusing to me.

[agatapst]

@junlincc Thanks for you comment. 🙂 I think that's good idea. One more improvement has come to my mind after your suggestion - to add 'and' before the last filter name. That's how it looks now:

[junlincc]

to add 'and' before the last filter name.

♥️👍you are awesome @agatapst

@zhaoyongjie @villebro @rusackas ready for your code review :)

[villebro]

LGTM after adding a simple test.

[villebro]

LGTM 👍

[mihir174]

@agatapst @junlincc
I think the warning is awesome! Not sure if this is too late but just some design input - it's an uncommon pattern to have the "Confirm" button in addition to the "Save" and "Cancel" buttons. It would be better if we replaced the "Save" and "Cancel" buttons completely with "Yes, cancel" and "Keep editing".

Also, the bottom bar with those buttons should not be part of the scrolling window - it causes a bit of jumpiness. Here's a visual for the warning replacing the existing buttons -

[ktmud]

@mihir174 should the main CTA stay at the rightmost position?

[agatapst]

@mihir174 Thanks for help, the UX is better with different buttons!
@ktmud Buttons order can be easily changed if it is necessary 🙂

[junlincc]

@agatapst let's go with @mihir174 's proposed design for now having YES,CANCEL on the left.both buttons seems CTAs to me.

thank you Mihir♥️🙏

[junlincc]

perfect, good to go!

[adam-stasiak]

@junlincc @agatapst Tested and looks nice. I found different issue which may be connected with this a little bit but it was already in master. 🟡

Scenario:
Go to native filter
add 2 filters and save
Open edit modal again and add new filter (without filling data) and delete name of first filter
Cancel edition - confirm you want to lost your changes

Open modal again - > you can see on filter list that name is blank but in filter name we have a blank value.

In this PR this kind of change will not be captured by warning. Are you able @agatapst to catch this case as well?

[junlincc]

Thank you QA king!! @adam-stasiak this is a real edge case but super good find!
I'm gonna merge this PR first as we need to demo this feature soon to users. @agatapst im gonna open different ticket for this edge case(not priority). Thanks you both!