feat(welcome): add SQL snippets to saved queries card

[pkdotson]

SUMMARY

This Pr update the savedqueries card to the new proposed layout on welcome page. Also, updated media queries to keep text from expanding the cards to weird widths.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TEST PLAN

ADDITIONAL INFORMATION

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

[nytai]

FYI, I discovered #11679 while testing this. You'll want to handle the null case in this PR too

[nytai]

Also, it looks card size changes based on the content. I'm not sure whether this is desirable or not. I just worked on query history page added a truncation function you might be interested in

https://github.com/apache/incubator-superset/blob/432e5ab4607fe4743562101336c63dcfd18b0867/superset-frontend/src/views/CRUD/data/query/QueryList.tsx#L52

[codecov-io]

Codecov Report

Merging #11678 (483821f) into master (84c8a62) will decrease coverage by 0.32%.
The diff coverage is 77.77%.

@@            Coverage Diff             @@
##           master   #11678      +/-   ##
==========================================
- Coverage   63.54%   63.22%   -0.33%     
==========================================
  Files         915      916       +1     
  Lines       44358    44476     +118     
  Branches     4221     4228       +7     
==========================================
- Hits        28189    28120      -69     
- Misses      15990    16177     +187     
  Partials      179      179              

Flag	Coverage Δ
javascript	62.94% <77.77%> (-0.02%)	⬇️
python	63.38% <ø> (-0.51%)	⬇️

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

Impacted Files	Coverage Δ
...set-frontend/src/components/ListViewCard/index.tsx	94.54% <ø> (ø)
superset-frontend/src/views/CRUD/utils.tsx	48.88% <60.00%> (+0.10%)	⬆️
...t-frontend/src/views/CRUD/welcome/SavedQueries.tsx	62.88% <80.00%> (+3.58%)	⬆️
...t-frontend/src/views/CRUD/data/query/QueryList.tsx	72.72% <100.00%> (+0.34%)	⬆️
superset/db_engines/hive.py	0.00% <0.00%> (-85.72%)	⬇️
superset/db_engine_specs/hive.py	54.08% <0.00%> (-29.97%)	⬇️
superset/db_engine_specs/presto.py	69.76% <0.00%> (-12.53%)	⬇️
superset-frontend/src/utils/hostNamesConfig.js	33.33% <0.00%> (-4.17%)	⬇️
superset-frontend/src/featureFlags.ts	86.36% <0.00%> (-3.64%)	⬇️
superset/examples/world_bank.py	97.10% <0.00%> (-2.90%)	⬇️
... and 34 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 84c8a62...483821f. Read the comment docs.

[junlincc]

adding tooltip for long title display on hover. don't merge yet @rusackas

[junlincc]

just checked out this branch

1. can we get rid of the default Note in the query card?
2. what is "3"? it's not part of the query
3. add tooltip to show entire title

[junlincc]

LGTM, @rusackas let's merge! tooltip will come from a separate PR

[rusackas]

Ping me when you have a chance, we can pair up and see if there's a better selector to remove the need for !important here.

[rusackas]

This can be an experiment for another PR, but if this card is basically a text box, we may be able to base its height on the number of lines set elsewhere in the JS. That is, if line-height is pulled from the Theme variables, the height could be numLines * lineHeight. Anyway, something to fiddle with to make this a little more dynamic.

[rusackas]

Lookin' good to me, just one little nit to fix (I made a code suggestion)

[junlincc]

#11659