chore(sqllab): Change icon color for running sql

[justinpark]

SUMMARY

There's an open issue that is hard to distinguish icons between running and successful query state in sqllab.
This commit adds the animated dimming translation for running statue to be distinguishing the running state easily.
This commit updates the icon color for running state to be distinguishing the running and finish states. It also adds the icons for success and fail status to help red/green colorblind to distinguish the color status.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

• Before:

• After:

Grey: Not yet started
Blue: In progress*
Green: Success
Red: Failed
Note people are red/green colorblind so maybe having a check-mark/x-mark inside the circle would help to distinguish between (3) and (4).

TESTING INSTRUCTIONS

Go to sqllab
Run a query

ADDITIONAL INFORMATION

• Has associated issue: issues#11123 issues#13648 discussion#18402
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #22050 (b8be2b7) into master (06f87e1) will increase coverage by 0.00%.
The diff coverage is 80.00%.

@@           Coverage Diff           @@
##           master   #22050   +/-   ##
=======================================
  Coverage   66.97%   66.97%           
=======================================
  Files        1832     1832           
  Lines       69905    69909    +4     
  Branches     7570     7571    +1     
=======================================
+ Hits        46820    46823    +3     
  Misses      21127    21127           
- Partials     1958     1959    +1     

Flag	Coverage Δ
javascript	53.77% <80.00%> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
...tend/packages/superset-ui-core/src/style/index.tsx	100.00% <ø> (ø)
...tend/src/SqlLab/components/TabStatusIcon/index.tsx	80.00% <80.00%> (-20.00%)	⬇️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[john-bodley]

Woot! I never realized that the icon changed. @justinpark rather than flashing I was wondering whether a different color would be more intuitive, i.e.,

1. Grey: Not yet started
2. Blue: In progress*
3. Green: Success
4. Red: Failed

Note people are red/green colorblind so maybe having a check-mark/x-mark inside the circle would help to distinguish between (3) and (4).

* I think blue is likely better than orange as orange normally implies warning.

[justinpark]

Woot! I never realized that the icon changed. justinpark rather than flashing I was wondering whether a different color would be more intuitive, i.e.,

1. Grey: Not yet started
2. Blue: In progress*
3. Green: Success
4. Red: Failed

Note people are red/green colorblind so maybe having a check-mark/x-mark inside the circle would help to distinguish between (3) and (4).

• I think blue is likely better than orange as orange normally implies warning.

@john-bodley that's good idea. I updated the icons accordingly.

[justinpark]

cc: @michael-s-molina @eschutho

[eschutho]

This is awesome @justinpark!

[ktmud]

Nice