From 784d29b57cce9dfb8276672bba01a64d614f109a Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Thu, 8 Apr 2021 16:56:21 -0300
Subject: [PATCH] chore: Moves Fade component into TableElement (#13458)

---
 .../javascripts/sqllab/TableElement_spec.jsx  |  9 ++++--
 .../src/SqlLab/components/TableElement.jsx    |  7 ++++-
 .../src/common/components/Fade.tsx            | 28 -------------------
 3 files changed, 12 insertions(+), 32 deletions(-)
 delete mode 100644 superset-frontend/src/common/components/Fade.tsx

diff --git a/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx b/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx
index aef614fae9aac..c667560ba2ec7 100644
--- 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
index 0811d955a1e91..380a73ff5ea12 100644
--- 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
deleted file mode 100644
index e90a47d99ae0e..0000000000000
--- a/superset-frontend/src/common/components/Fade.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { styled } from '@superset-ui/core';
-
-type FadeProps = { hovered: boolean };
-
-const Fade = styled.div<FadeProps>`
-  transition: all ${({ theme }) => theme.transitionTiming}s;
-  opacity: ${props => (props.hovered ? 1 : 0)};
-`;
-
-export default Fade;