chore: Moves Fade component into TableElement (apache#13458)

allanco91 · May 21, 2021 · 31f84e5 · 31f84e5
1 parent 4fb4b93
commit 31f84e5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 32 deletions.
diff --git a/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx b/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx
@@ -24,7 +24,6 @@ import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import Collapse from 'src/common/components/Collapse';
 
 import { IconTooltip } from 'src/components/IconTooltip';
-import Fade from 'src/common/components/Fade';
 import TableElement from 'src/SqlLab/components/TableElement';
 import ColumnElement from 'src/SqlLab/components/ColumnElement';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
@@ -88,11 +87,15 @@ describe('TableElement', () => {
       },
     );
     expect(wrapper.find(TableElement).state().hovered).toBe(false);
-    expect(wrapper.find(Fade).props().hovered).toBe(false);
+    expect(wrapper.find('[data-test="fade"]').first().props().hovered).toBe(
+      false,
+    );
     wrapper.find('.header-container').hostNodes().simulate('mouseEnter');
     await waitForComponentToPaint(wrapper, 300);
     expect(wrapper.find(TableElement).state().hovered).toBe(true);
-    expect(wrapper.find(Fade).props().hovered).toBe(true);
+    expect(wrapper.find('[data-test="fade"]').first().props().hovered).toBe(
+      true,
+    );
   });
   it('sorts columns', () => {
     const wrapper = mount(

diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx b/superset-frontend/src/SqlLab/components/TableElement.jsx
@@ -25,7 +25,6 @@ import shortid from 'shortid';
 import { t, styled } from '@superset-ui/core';
 import { debounce } from 'lodash';
 
-import Fade from 'src/common/components/Fade';
 import { Tooltip } from 'src/common/components/Tooltip';
 import CopyToClipboard from '../../components/CopyToClipboard';
 import { IconTooltip } from '../../components/IconTooltip';
@@ -52,6 +51,11 @@ const StyledSpan = styled.span`
   cursor: pointer;
 `;
 
+const Fade = styled.div`
+  transition: all ${({ theme }) => theme.transitionTiming}s;
+  opacity: ${props => (props.hovered ? 1 : 0)};
+`;
+
 class TableElement extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -215,6 +219,7 @@ class TableElement extends React.PureComponent {
             <Loading position="inline" />
           ) : (
             <Fade
+              data-test="fade"
               hovered={this.state.hovered}
               onClick={e => e.stopPropagation()}
             >

diff --git a/superset-frontend/src/common/components/Fade.tsx b/superset-frontend/src/common/components/Fade.tsx