From e4e23ea4878e61a05e51da060404386acd5213b9 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 13 May 2021 20:30:27 -0700
Subject: [PATCH] fix: fix adhocpopovers tab animate. (#14478)

* fix popover

* addd tabs default css

* fix lint

* fix tests

* address comments

* lint fix

* fix test

* lint
---
 .../components/DashboardBuilder_spec.jsx      |   6 +-
 .../src/components/Tabs/Tabs.tsx              | 127 +++++++++---------
 .../DashboardBuilder/DashboardContainer.tsx   |   1 +
 3 files changed, 64 insertions(+), 70 deletions(-)

diff --git a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
index b341e89d45..6f2385b2c3 100644
--- a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
@@ -128,10 +128,10 @@ describe('DashboardBuilder', () => {
     expect(parentSize.find(Tabs.TabPane)).toHaveLength(2);
   });
 
-  it('should set animated=true on Tabs for perf', () => {
+  it('should have default animated=true on Tabs for perf', () => {
     const wrapper = setup({ dashboardLayout: undoableDashboardLayoutWithTabs });
     const tabProps = wrapper.find(ParentSize).find(Tabs).props();
-    expect(tabProps.animated).toEqual({ inkBar: true, tabPane: false });
+    expect(tabProps.animated).toEqual(true);
   });
 
   it('should render a TabPane and DashboardGrid for first Tab', () => {
@@ -182,7 +182,7 @@ describe('DashboardBuilder', () => {
       dashboardLayout: undoableDashboardLayoutWithTabs,
     });
 
-    expect(wrapper.find(Tabs).prop('activeKey')).toBe(DASHBOARD_GRID_ID);
+    expect(wrapper.find(Tabs).at(1).prop('activeKey')).toBe(DASHBOARD_GRID_ID);
 
     wrapper
       .find('.dashboard-component-tabs .ant-tabs .ant-tabs-tab')
diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx
index c9239f0c61..f5a1d148f3 100644
--- a/superset-frontend/src/components/Tabs/Tabs.tsx
+++ b/superset-frontend/src/components/Tabs/Tabs.tsx
@@ -26,75 +26,73 @@ export interface TabsProps extends AntDTabsProps {
   allowOverflow?: boolean;
 }
 
-const notForwardedProps = ['fullWidth', 'allowOverflow'];
+const StyledTabs = ({
+  animated = false,
+  fullWidth = true,
+  allowOverflow = true,
+  ...props
+}: TabsProps) => (
+  <AntDTabs
+    animated={animated}
+    {...props}
+    css={theme => css`
+      overflow: ${allowOverflow ? 'visible' : 'hidden'};
 
-const StyledTabs = styled(AntDTabs, {
-  shouldForwardProp: prop => !notForwardedProps.includes(String(prop)),
-})<TabsProps>`
-  overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'hidden')};
-
-  .ant-tabs-content-holder {
-    overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'auto')};
-  }
-
-  .ant-tabs-tab {
-    flex: 1 1 auto;
-
-    &.ant-tabs-tab-active .ant-tabs-tab-btn {
-      color: inherit;
-    }
-
-    &:hover {
-      .anchor-link-container {
-        cursor: pointer;
-
-        .fa.fa-link {
-          visibility: visible;
+      .ant-tabs-content-holder {
+        overflow: ${allowOverflow ? 'visible' : 'auto'};
+      }
+      .ant-tabs-tab {
+        flex: 1 1 auto;
+        &.ant-tabs-tab-active .ant-tabs-tab-btn {
+          color: inherit;
+        }
+        &:hover {
+          .anchor-link-container {
+            cursor: pointer;
+            .fa.fa-link {
+              visibility: visible;
+            }
+          }
+        }
+        .short-link-trigger.btn {
+          padding: 0 ${theme.gridUnit}px;
+          & > .fa.fa-link {
+            top: 0;
+          }
         }
       }
-    }
+      ${fullWidth &&
+      css`
+        .ant-tabs-nav-list {
+          width: 100%;
+        }
 
-    .short-link-trigger.btn {
-      padding: 0 ${({ theme }) => theme.gridUnit}px;
+        .ant-tabs-tab {
+          width: 0;
+          margin-right: 0;
+        }
+      `};
 
-      & > .fa.fa-link {
-        top: 0;
+      .ant-tabs-tab-btn {
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        justify-content: center;
+        font-size: ${theme.typography.sizes.s}px;
+        text-align: center;
+        text-transform: uppercase;
+        user-select: none;
+        .required {
+          margin-left: ${theme.gridUnit / 2}px;
+          color: ${theme.colors.error.base};
+        }
       }
-    }
-  }
-
-  ${({ fullWidth }) =>
-    fullWidth &&
-    css`
-      .ant-tabs-nav-list {
-        width: 100%;
+      .ant-tabs-ink-bar {
+        background: ${theme.colors.secondary.base};
       }
-
-      .ant-tabs-tab {
-        width: 0;
-      }
-    `};
-
-  .ant-tabs-tab-btn {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    justify-content: center;
-    font-size: ${({ theme }) => theme.typography.sizes.s}px;
-    text-align: center;
-    text-transform: uppercase;
-    user-select: none;
-
-    .required {
-      margin-left: ${({ theme }) => theme.gridUnit / 2}px;
-      color: ${({ theme }) => theme.colors.error.base};
-    }
-  }
-
-  .ant-tabs-ink-bar {
-    background: ${({ theme }) => theme.colors.secondary.base};
-  }
-`;
+    `}
+  />
+);
 
 const StyledTabPane = styled(AntDTabs.TabPane)``;
 
@@ -102,11 +100,6 @@ const Tabs = Object.assign(StyledTabs, {
   TabPane: StyledTabPane,
 });
 
-Tabs.defaultProps = {
-  fullWidth: true,
-  animated: { inkBar: true, tabPane: false },
-};
-
 const StyledEditableTabs = styled(StyledTabs)`
   .ant-tabs-content-holder {
     background: white;
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
index 4bdd667446..d9dcb02f38 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
@@ -72,6 +72,7 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
             activeKey={activeKey}
             renderTabBar={() => <></>}
             fullWidth={false}
+            animated
             allowOverflow
           >
             {childIds.map((id, index) => (