From 5c1e223e65850c713af98150b832f65af0f1d67e Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 4 May 2021 17:43:41 -0700 Subject: [PATCH 1/8] fix popover --- .../controls/FilterControl/AdhocFilterEditPopover/index.jsx | 1 + .../controls/MetricControl/AdhocMetricEditPopover/index.jsx | 1 + 2 files changed, 2 insertions(+) diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx index f7ec6be4f875..f0ca9ee85bfc 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx @@ -162,6 +162,7 @@ export default class AdhocFilterEditPopover extends React.Component { data-test="adhoc-filter-edit-tabs" style={{ minHeight: this.state.height, width: this.state.width }} allowOverflow + animated={false} onChange={this.onTabChange} > From 5b59def680781680baab67d8632c2cdbf0d2a6cd Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 6 May 2021 13:32:15 -0700 Subject: [PATCH 2/8] addd tabs default css --- .../src/components/Tabs/Tabs.tsx | 80 +++++++++++++++++-- 1 file changed, 75 insertions(+), 5 deletions(-) diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx index 90c3a64e6c46..ef51958c8b32 100644 --- a/superset-frontend/src/components/Tabs/Tabs.tsx +++ b/superset-frontend/src/components/Tabs/Tabs.tsx @@ -26,9 +26,9 @@ export interface TabsProps extends AntDTabsProps { allowOverflow?: boolean; } -const notForwardedProps = ['fullWidth', 'allowOverflow']; +//const notForwardedProps = ['fullWidth', 'allowOverflow']; -const StyledTabs = styled(AntDTabs, { +/*const StyledTabs = styled(AntDTabs, { shouldForwardProp: prop => !notForwardedProps.includes(String(prop)), })` overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'hidden')}; @@ -94,7 +94,77 @@ const StyledTabs = styled(AntDTabs, { .ant-tabs-ink-bar { background: ${({ theme }) => theme.colors.secondary.base}; } -`; +`;*/ + +const StyledTabs = ({ + animated = false, + fullWidth = true, + allowOverflow = true, + ...props +}:TabsProps) => { + return ( + css` + overflow: ${allowOverflow ? 'visible' : 'hidden'}; + + .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%; + } + + .ant-tabs-tab { + width: 0; + margin-right: 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}; + } + } + .ant-tabs-ink-bar { + background: ${theme.colors.secondary.base}; + } + `} + /> + ); +} const StyledTabPane = styled(AntDTabs.TabPane)``; @@ -102,10 +172,10 @@ const Tabs = Object.assign(StyledTabs, { TabPane: StyledTabPane, }); -Tabs.defaultProps = { +/*Tabs.defaultProps = { fullWidth: true, animated: true, -}; +};*/ const StyledEditableTabs = styled(StyledTabs)` .ant-tabs-content-holder { From 1cf67025e5c81d5c50835f70cf9051469111595c Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 6 May 2021 14:42:15 -0700 Subject: [PATCH 3/8] fix lint --- .../src/components/Tabs/Tabs.tsx | 190 ++++++------------ 1 file changed, 59 insertions(+), 131 deletions(-) diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx index ef51958c8b32..e0265fbc5b7f 100644 --- a/superset-frontend/src/components/Tabs/Tabs.tsx +++ b/superset-frontend/src/components/Tabs/Tabs.tsx @@ -26,145 +26,73 @@ export interface TabsProps extends AntDTabsProps { allowOverflow?: boolean; } -//const notForwardedProps = ['fullWidth', 'allowOverflow']; - -/*const StyledTabs = styled(AntDTabs, { - shouldForwardProp: prop => !notForwardedProps.includes(String(prop)), -})` - 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; - } - } - } - - .short-link-trigger.btn { - padding: 0 ${({ theme }) => theme.gridUnit}px; - - & > .fa.fa-link { - top: 0; - } - } - } - - ${({ fullWidth }) => - fullWidth && - css` - .ant-tabs-nav-list { - width: 100%; - } - - .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 StyledTabs = ({ animated = false, fullWidth = true, allowOverflow = true, ...props -}:TabsProps) => { - return ( - css` - overflow: ${allowOverflow ? 'visible' : 'hidden'}; - - .ant-tabs-content-holder { - overflow: ${allowOverflow ? 'visible' : 'auto'}; +}: TabsProps) => ( + css` + overflow: ${allowOverflow ? 'visible' : 'hidden'}; + + .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; } - .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; + &:hover { + .anchor-link-container { + cursor: pointer; + .fa.fa-link { + visibility: visible; } } } - ${fullWidth && - css` - .ant-tabs-nav-list { - width: 100%; - } - - .ant-tabs-tab { - width: 0; - margin-right: 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}; - } + .short-link-trigger.btn { + padding: 0 ${theme.gridUnit}px; + & > .fa.fa-link { + top: 0; } - .ant-tabs-ink-bar { - background: ${theme.colors.secondary.base}; - } - `} - /> - ); -} + } + } + ${fullWidth && + css` + .ant-tabs-nav-list { + width: 100%; + } + + .ant-tabs-tab { + width: 0; + margin-right: 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}; + } + } + .ant-tabs-ink-bar { + background: ${theme.colors.secondary.base}; + } + `} + /> +); const StyledTabPane = styled(AntDTabs.TabPane)``; @@ -172,10 +100,10 @@ const Tabs = Object.assign(StyledTabs, { TabPane: StyledTabPane, }); -/*Tabs.defaultProps = { +/* Tabs.defaultProps = { fullWidth: true, animated: true, -};*/ +}; */ const StyledEditableTabs = styled(StyledTabs)` .ant-tabs-content-holder { From 7a3ddfdcd1d0321a161f8031de67ac741d123342 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Fri, 7 May 2021 12:09:54 -0700 Subject: [PATCH 4/8] fix tests --- .../dashboard/components/DashboardBuilder_spec.jsx | 4 ++-- .../components/DashboardBuilder/DashboardContainer.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx index 4fd924e8c159..8663c5924e18 100644 --- a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx +++ b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx @@ -128,7 +128,7 @@ 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).toBe(true); @@ -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/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx index 7d5d07d57806..0306a9eeb8dc 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 = ({ topLevelTabs }) => { activeKey={activeKey} renderTabBar={() => <>} fullWidth={false} + animated={true} > {childIds.map((id, index) => ( // Matching the key of the first TabPane irrespective of topLevelTabs From 3aa923305df761ab6f7c25f16c5193067a74c154 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Fri, 7 May 2021 12:18:07 -0700 Subject: [PATCH 5/8] address comments --- superset-frontend/src/components/Tabs/Tabs.tsx | 5 ----- .../controls/FilterControl/AdhocFilterEditPopover/index.jsx | 1 - .../controls/MetricControl/AdhocMetricEditPopover/index.jsx | 1 - 3 files changed, 7 deletions(-) diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx index e0265fbc5b7f..a5d5ad50f2d2 100644 --- a/superset-frontend/src/components/Tabs/Tabs.tsx +++ b/superset-frontend/src/components/Tabs/Tabs.tsx @@ -100,11 +100,6 @@ const Tabs = Object.assign(StyledTabs, { TabPane: StyledTabPane, }); -/* Tabs.defaultProps = { - fullWidth: true, - animated: true, -}; */ - const StyledEditableTabs = styled(StyledTabs)` .ant-tabs-content-holder { background: white; diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx index f0ca9ee85bfc..f7ec6be4f875 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx @@ -162,7 +162,6 @@ export default class AdhocFilterEditPopover extends React.Component { data-test="adhoc-filter-edit-tabs" style={{ minHeight: this.state.height, width: this.state.width }} allowOverflow - animated={false} onChange={this.onTabChange} > From 0ef09beb49b95dde94a0ec0714839643485d5e8a Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Fri, 7 May 2021 12:25:29 -0700 Subject: [PATCH 6/8] lint fix --- .../components/DashboardBuilder/DashboardContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx index 0306a9eeb8dc..9204b92db356 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx @@ -72,7 +72,7 @@ const DashboardContainer: FC = ({ topLevelTabs }) => { activeKey={activeKey} renderTabBar={() => <>} fullWidth={false} - animated={true} + animated > {childIds.map((id, index) => ( // Matching the key of the first TabPane irrespective of topLevelTabs From adcd365a9e487a3fe814d2927c2ac574577fb236 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Mon, 10 May 2021 17:44:19 -0700 Subject: [PATCH 7/8] fix test --- .../javascripts/dashboard/components/DashboardBuilder_spec.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx index 03f16bbbb7cf..c4641b0414de 100644 --- a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx +++ b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx @@ -131,7 +131,8 @@ describe('DashboardBuilder', () => { 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 }); + console.log('tabProps', tabProps) + expect(tabProps.animated).toEqual(true); }); it('should render a TabPane and DashboardGrid for first Tab', () => { From 05166144bf5c900bca86ef905cd18066c9d21842 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 11 May 2021 23:05:36 -0700 Subject: [PATCH 8/8] lint --- .../javascripts/dashboard/components/DashboardBuilder_spec.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx index c4641b0414de..6f2385b2c305 100644 --- a/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx +++ b/superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx @@ -131,7 +131,6 @@ describe('DashboardBuilder', () => { it('should have default animated=true on Tabs for perf', () => { const wrapper = setup({ dashboardLayout: undoableDashboardLayoutWithTabs }); const tabProps = wrapper.find(ParentSize).find(Tabs).props(); - console.log('tabProps', tabProps) expect(tabProps.animated).toEqual(true); });