feat: base tabbed modal for new database CRUD UI

[riahk]

SUMMARY

• Add DatabaseModal opened from new DatabaseList UI
• Sections separated into sections based on relevance
• Modal can accept a database object to trigger edit mode
• Add styled ant-d Modal to src/common/components
• As per feat: setup react page with submenu for datasources listview  #10642 new UI is only available when both ENABLE_REACT_CRUD_VIEWS and SIP_34_DATABASE_UI config flags are turned on

Tabbed sections will be built in later PRs.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[rusackas]

Wondering if this will be a common occurrence for the Icon (having text to the right of it). If so, it might make sense to add a prop to that component, handle the styling on that side, and just use the prop here.

[rusackas]

Is this to counteract some other padding/margin that should be removed instead?

[riahk]

Yes, it was a hack to counteract the modal body default padding. Not sure if I want to change the modal padding since generally, it's nice to have. It just looks weird for the tabs in particular.

[rusackas]

Looking good, I'm excited about a lot of these changes! Made some questions/comments/suggestions about small tweaks.

[nytai]

Mostly looks good to me. Can we add some tests?

[codecov-commenter]

Codecov Report

Merging #10668 into master will increase coverage by 4.06%.
The diff coverage is 66.07%.

@@            Coverage Diff             @@
##           master   #10668      +/-   ##
==========================================
+ Coverage   60.18%   64.25%   +4.06%     
==========================================
  Files         783      789       +6     
  Lines       36934    37032      +98     
  Branches     3527     3535       +8     
==========================================
+ Hits        22228    23794    +1566     
+ Misses      14519    13126    -1393     
+ Partials      187      112      -75     

Flag	Coverage Δ
#cypress	54.10% <ø> (?)
#javascript	60.85% <66.07%> (-0.03%)	⬇️
#python	59.82% <ø> (+0.05%)	⬆️

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

Impacted Files	Coverage Δ
...nd/src/views/CRUD/data/dataset/AddDatasetModal.tsx	60.00% <0.00%> (-1.77%)	⬇️
superset-frontend/src/common/components/Tabs.tsx	50.00% <50.00%> (ø)
...end/src/views/CRUD/data/database/DatabaseModal.tsx	58.18% <58.18%> (ø)
...tend/src/views/CRUD/data/database/DatabaseList.tsx	74.28% <70.00%> (-25.72%)	⬇️
superset-frontend/src/common/components/Modal.tsx	94.11% <94.11%> (ø)
superset-frontend/src/components/Icon/index.tsx	100.00% <100.00%> (ø)
...perset-frontend/src/views/CRUD/chart/ChartList.tsx	72.41% <0.00%> (-3.78%)	⬇️
...rontend/src/views/CRUD/dashboard/DashboardList.tsx	70.43% <0.00%> (-3.57%)	⬇️
...ontend/src/views/CRUD/data/dataset/DatasetList.tsx	71.83% <0.00%> (-1.51%)	⬇️
superset/db_engine_specs/mssql.py	92.30% <0.00%> (-1.03%)	⬇️
... and 175 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 b86c0e5...492b450. Read the comment docs.

[nytai]

lgtm, thanks for adding some tests!

[mistercrunch]

I like the new tabs and modal, but we'll have to go back and migrate all of the react-bootstrap's instances of these components and point them to these new style wrappers (that's outside the scope of this PR).

What color Is the active tab underline? looks like a dark blue. Shouldn't this be our brand-primary color?

[willbarrett]

Good progress! One question, but I may simply not be understanding the state of things :)

[riahk]

@mistercrunch yea that's a dark blue from our theme colors, as per the figma mocks. I can consult with design and possibly update it?

[mistercrunch]

@riahk sorry about the confusion, stick with the Figma designs!

Let's note that we now have 2 new component (tabs & modal) that don't fully meet the horizontal component process, so we'll need to:

• add them to react-storybook
• migrate all instances of tabs and modal react-bootstrap components to these new ones

[willbarrett]

@mistercrunch Yes, that's accurate. We'll track those as separate pieces of work.