refactor: Move ProgressBar to Antd

[geido]

SUMMARY

Moving the ProgressBar component from react-bootstrap to AntDesign and customizing it with Emotion/CSS to enable a striped background which is not supported by Antd by default.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TEST PLAN

1. Log into Superset
2. Navigate to SQL Lab > SQL Editor (/superset/sqllab)
3. Query a table
4. Select "QUERY HISTORY" tab

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

[geido]

@rusackas @junlincc

[codecov-io]

Codecov Report

Merging #11875 (ab1d52c) into master (0728878) will decrease coverage by 12.53%.
The diff coverage is 16.66%.

@@             Coverage Diff             @@
##           master   #11875       +/-   ##
===========================================
- Coverage   67.65%   55.11%   -12.54%     
===========================================
  Files         927      421      -506     
  Lines       45009    14802    -30207     
  Branches     4306     3815      -491     
===========================================
- Hits        30450     8158    -22292     
+ Misses      14455     6644     -7811     
+ Partials      104        0      -104     

Flag	Coverage Δ
cypress	55.11% <16.66%> (+0.12%)	⬆️
javascript	?
python	?

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

Impacted Files	Coverage Δ
...rset-frontend/src/SqlLab/components/QueryTable.jsx	11.11% <ø> (-55.56%)	⬇️
...erset-frontend/src/SqlLab/components/ResultSet.tsx	3.41% <ø> (-72.71%)	⬇️
superset-frontend/src/common/components/index.tsx	100.00% <ø> (ø)
...set-frontend/src/common/components/ProgressBar.tsx	16.66% <16.66%> (ø)
...uperset-frontend/src/dashboard/util/dnd-reorder.js	0.00% <0.00%> (-100.00%)	⬇️
...rset-frontend/src/dashboard/util/getEmptyLayout.js	0.00% <0.00%> (-100.00%)	⬇️
...dashboard/components/resizable/ResizableHandle.jsx	0.00% <0.00%> (-100.00%)	⬇️
.../src/dashboard/util/getFilterScopeFromNodesTree.js	0.00% <0.00%> (-93.48%)	⬇️
...src/dashboard/components/gridComponents/Header.jsx	10.52% <0.00%> (-86.85%)	⬇️
...rc/dashboard/components/gridComponents/Divider.jsx	13.33% <0.00%> (-86.67%)	⬇️
... and 779 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 0728878...ab1d52c. Read the comment docs.

[junlincc]

LGTM @rusackas thanks @geido !

[rusackas]

I'd like to nudge superset devs toward using only this styled ProgressBar and not the one from Antd directly - just to keep things consistent. What do you think about importing from antd directly here, and NOT export Progress from common/components/index.tsx?

[rusackas]

... you could even import this component from common/components/index.tsx and export it as Progress - then people could import { Progress } from 'src/common/components' as it if were the AntD one, but it'd really be this enhanced/styled one.

[geido]

I would rather go with your first suggestion and import the Antd Progress directly into the enhanced component. From src/common/components only export the enhanced Progress so that accessing the Antd one directly becomes unlikely/harder.

[rusackas]

This looks great... just had one question/suggestion about enforcing best practices by having only one export for progress bars in the codebase (your enhanced one, rather than AntD's).

Really appreciate the storybook entry. Trying to fill in more of those!