fix(sql-editor): Fix run stop button color to improve usability

[anamitraadhikari]

SUMMARY

During the running state of a query, users may find it challenging to distinguish between the stop button and the run button due to their similar color schemes. As a result, users may accidentally click the stop button, causing unintended interruption of the query's execution.

This pull request proposes to modify the color of the stop button to make it more distinct from the run button during query execution. By doing so, it will be easier for users to differentiate between the two buttons and avoid accidentally clicking the stop button, thereby preventing unintentional interruption of the query's execution.

Edit:
As part of this PR, we have also updated the explore view's stop button icon, to match it with sql lab stop button icon, for the sake of consistency.

Before:

After:

TESTING INSTRUCTIONS

• Open SQL Lab
• Hit the run button to execute a query
• Check out the updated stop button color

[github-actions]

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

[rusackas]

@kasiazjc @yousoph thoughts on the design change? Code is a slam dunk :)

[codecov]

Codecov Report

Merging #23892 (d406bb9) into master (2a1a061) will increase coverage by 0.00%.
The diff coverage is 83.33%.

❗ Current head d406bb9 differs from pull request most recent head 93062b2. Consider uploading reports for the commit 93062b2 to get more accurate results

@@           Coverage Diff           @@
##           master   #23892   +/-   ##
=======================================
  Coverage   68.10%   68.10%           
=======================================
  Files        1938     1940    +2     
  Lines       74999    75017   +18     
  Branches     8152     8155    +3     
=======================================
+ Hits        51077    51093   +16     
- Misses      21840    21841    +1     
- Partials     2082     2083    +1     

Flag	Coverage Δ
javascript	54.46% <77.77%> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
...set-frontend/src/components/Select/AsyncSelect.tsx	88.46% <ø> (ø)
superset-frontend/src/components/Select/Select.tsx	90.41% <ø> (ø)
...nd/src/explore/components/RunQueryButton/index.tsx	100.00% <ø> (ø)
superset-frontend/src/preamble.ts	0.00% <0.00%> (ø)
superset-frontend/src/setup/setupFormatters.ts	0.00% <ø> (ø)
superset-frontend/src/types/bootstrapTypes.ts	100.00% <ø> (ø)
superset/cli/native_filters.py	0.00% <ø> (ø)
superset/dashboards/api.py	92.54% <ø> (+0.43%)	⬆️
superset/views/base.py	76.87% <ø> (ø)
...s/ExploreChartPanel/useResizeDetectorByObserver.ts	62.50% <62.50%> (ø)
... and 7 more

... and 1 file with indirect coverage changes

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

[villebro]

Left a few comments, curious to hear @kasiazjc 's thoughts

[villebro]

I talked with @kasiazjc about this (she's out today), and she said we should make sure it's in line with the button in Explore. Looking at the code it appears we're using warning instead of danger there:

superset/superset-frontend/src/explore/components/RunQueryButton/index.tsx

Line 44 in 3c381c5

<Button onClick={onStop} buttonStyle="warning" disabled={!canStopQuery}>

This renders the following button when Explore is fetching data:

So if we change this to warning and also change the icon from fa fa-stop to fa fa-stop-circle-o then we get a very similar look and feel:

For reference, here's the button with the original icon class and danger style:

(btw, I kinda feel like the square stop icon is more intuitive, but I'd vote for using the same icon in both places, so I'm ok either way as long as they're in line)

[anamitraadhikari]

@villebro Made the changes as requested, please take a look.

[villebro]

Thanks @curious86 ! After chatting with @kasiazjc , we arrived at the following minor adjustment:

• Let's keep the fa fa-stop class in the SQL Lab button icon.
• Let's swap out fa fa-stop-circle-o in the Explore button for fa fa-stop

After that good to go!