From 4f2e264b3fa4f58a4fb984eeb65bfb4b9e7a803a Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Tue, 15 Nov 2022 12:33:53 -0800
Subject: [PATCH] chore(sqllab): Change icon color for running sql (#22050)

---
 .../superset-ui-core/src/style/index.tsx      |  1 +
 ...usIcon.test.jsx => TabStatusIcon.test.tsx} | 18 ++++++-------
 .../SqlLab/components/TabStatusIcon/index.tsx | 25 +++++++++++++++++--
 superset-frontend/src/SqlLab/main.less        |  5 ++--
 4 files changed, 35 insertions(+), 14 deletions(-)
 rename superset-frontend/src/SqlLab/components/TabStatusIcon/{TabStatusIcon.test.jsx => TabStatusIcon.test.tsx} (72%)

diff --git a/superset-frontend/packages/superset-ui-core/src/style/index.tsx b/superset-frontend/packages/superset-ui-core/src/style/index.tsx
index b20dbc5aa..1a4d9031f 100644
--- a/superset-frontend/packages/superset-ui-core/src/style/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/style/index.tsx
@@ -22,6 +22,7 @@ import createCache from '@emotion/cache';
 
 export {
   css,
+  keyframes,
   jsx,
   ThemeProvider,
   CacheProvider as EmotionCacheProvider,
diff --git a/superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.jsx b/superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.tsx
similarity index 72%
rename from superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.jsx
rename to superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.tsx
index 08923c5d9..fb8ee5599 100644
--- a/superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.jsx
+++ b/superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.tsx
@@ -16,24 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { QueryState } from '@superset-ui/core';
 import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
 
+import { render } from 'spec/helpers/testing-library';
 import TabStatusIcon from 'src/SqlLab/components/TabStatusIcon';
 
 function setup() {
-  const onClose = sinon.spy();
-  const wrapper = shallow(
-    <TabStatusIcon onClose={onClose} tabState="running" />,
-  );
-  return { wrapper, onClose };
+  return render(<TabStatusIcon tabState={'running' as QueryState} />);
 }
 
 describe('TabStatusIcon', () => {
   it('renders a circle without an x when hovered', () => {
-    const { wrapper } = setup();
-    expect(wrapper.find('div.circle')).toExist();
-    expect(wrapper.text()).toBe('');
+    const { container } = setup();
+    expect(container.getElementsByClassName('circle')[0]).toBeInTheDocument();
+    expect(
+      container.getElementsByClassName('circle')[0]?.textContent ?? 'undefined',
+    ).toBe('');
   });
 });
diff --git a/superset-frontend/src/SqlLab/components/TabStatusIcon/index.tsx b/superset-frontend/src/SqlLab/components/TabStatusIcon/index.tsx
index 799124fb9..ab6348e83 100644
--- a/superset-frontend/src/SqlLab/components/TabStatusIcon/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TabStatusIcon/index.tsx
@@ -17,12 +17,33 @@
  * under the License.
  */
 import React from 'react';
-import { QueryState } from '@superset-ui/core';
+import { QueryState, styled } from '@superset-ui/core';
+import Icons, { IconType } from 'src/components/Icons';
+
+const IconContainer = styled.span`
+  position: absolute;
+  top: -7px;
+  left: 0px;
+`;
 
 interface TabStatusIconProps {
   tabState: QueryState;
 }
 
+const STATE_ICONS: Record<string, React.FC<IconType>> = {
+  success: Icons.Check,
+  failed: Icons.CancelX,
+};
+
 export default function TabStatusIcon({ tabState }: TabStatusIconProps) {
-  return <div className={`circle ${tabState}`} />;
+  const StatusIcon = STATE_ICONS[tabState];
+  return (
+    <div className={`circle ${tabState}`}>
+      {StatusIcon && (
+        <IconContainer>
+          <StatusIcon iconSize="xs" />
+        </IconContainer>
+      )}
+    </div>
+  );
 }
diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
index bec202b7b..aa75c0ec0 100644
--- a/superset-frontend/src/SqlLab/main.less
+++ b/superset-frontend/src/SqlLab/main.less
@@ -161,11 +161,12 @@ div.Workspace {
   vertical-align: middle;
   font-size: @font-size-m;
   font-weight: @font-weight-bold;
+  color: @lightest;
+  position: relative;
 }
 
 .running {
-  background-color: fade(@success, @opacity-heavy);
-  color: @darkest;
+  background-color: @info;
 }
 
 .success {