chore(sqllab): Change icon color for running sql (#22050)

apache · Nov 15, 2022 · 4f2e264 · 4f2e264
1 parent 6f6cb18
commit 4f2e264
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git 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/...ents/TabStatusIcon/TabStatusIcon.test.jsx → ...ents/TabStatusIcon/TabStatusIcon.test.tsx b/...ents/TabStatusIcon/TabStatusIcon.test.jsx → ...ents/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
@@ -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
@@ -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 {