style: database modal updates

[riahk]

SUMMARY

• Add syntax highlighting to Secure Extra and Extra fields
• Create new InfoTooltip component that uses ant-d Tooltip
• Add storybook for InfoTooltip

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

[codecov-io]

Codecov Report

Merging #11311 into master will decrease coverage by 4.34%.
The diff coverage is 38.23%.

@@            Coverage Diff             @@
##           master   #11311      +/-   ##
==========================================
- Coverage   65.78%   61.43%   -4.35%     
==========================================
  Files         839      841       +2     
  Lines       39828    39858      +30     
  Branches     3652     3659       +7     
==========================================
- Hits        26200    24487    -1713     
- Misses      13528    15190    +1662     
- Partials      100      181      +81     

Flag	Coverage Δ
#cypress	?
#javascript	62.60% <38.23%> (-0.06%)	⬇️
#python	60.73% <ø> (-0.17%)	⬇️

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

Impacted Files	Coverage Δ
...-frontend/src/common/components/common.stories.tsx	0.00% <0.00%> (ø)
...end/src/views/CRUD/data/database/DatabaseModal.tsx	57.93% <30.76%> (-13.50%)	⬇️
...set-frontend/src/common/components/InfoTooltip.tsx	53.84% <53.84%> (ø)
...uperset-frontend/src/common/components/Tooltip.tsx	100.00% <100.00%> (ø)
superset-frontend/src/SqlLab/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/dashboard/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/index.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/dashboard/index.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/setup/setupColors.js	0.00% <0.00%> (-100.00%)	⬇️
... and 178 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 3a0fcda...4911e68. Read the comment docs.

[pkdotson]

LGTM!

[mistercrunch]

I was looking before for a way to import type specifications from antd but couldn't find an easy way. It sucks to have to redefine/align the type defs on our side as these could get out of sync as we upgrade antd. Would it make more sense to import this? https://github.com/ant-design/ant-design/blob/master/components/tooltip/index.tsx#L14

import { InfoTooltipProps } from 'antd/components/tooltip/';

[riahk]

I tried to import TooltipPlacement but got an error about it not being exported, so I don't think it's exposed. :/

[mistercrunch]

Mmmh. We may need to start growing a antdCommonTypes / antdTypeHelpers somewhere for this use case. It's likely that we'll want to reuse these!

[mistercrunch]

@rusackas , any thoughts?

[eschutho]

What's the thought-process around this wrapper component? I saw that we have similar ones that wrap antd but with our styles applied on top. Should the styled tooltip css above be in this file?

[riahk]

I wanted to leave it open in case we wanted to add custom styles at a later time. It might make sense to take the custom styles in InfoTooltip and just apply them to the general Tooltip component here though!

[nytai]

Let's get this file rebased and merged. We can continue discussion around best approach for handling antd types/styling separately.