pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-17 11:09:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix adhocpopovers tab animate. (#14478)

Browse Source 
* fix popover

* addd tabs default css

* fix lint

* fix tests

* address comments

* lint fix

* fix test

* lint
This commit is contained in:
Phillip Kelley-Dotson 2021-05-13 20:30:27 -07:00 committed by GitHub
parent 2bd0b62902
commit e4e23ea487
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
View File

@ -128,10 +128,10 @@ describe('DashboardBuilder', () => {
expect(parentSize.find(Tabs.TabPane)).toHaveLength(2); 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 wrapper = setup({ dashboardLayout: undoableDashboardLayoutWithTabs });
const tabProps = wrapper.find(ParentSize).find(Tabs).props(); 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', () => { it('should render a TabPane and DashboardGrid for first Tab', () => {
@ -182,7 +182,7 @@ describe('DashboardBuilder', () => {
dashboardLayout: undoableDashboardLayoutWithTabs, 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 wrapper
.find('.dashboard-component-tabs .ant-tabs .ant-tabs-tab') .find('.dashboard-component-tabs .ant-tabs .ant-tabs-tab')

51
superset-frontend/src/components/Tabs/Tabs.tsx
View File

@ -26,45 +26,42 @@ export interface TabsProps extends AntDTabsProps {
allowOverflow?: boolean; allowOverflow?: boolean;
} }
const notForwardedProps = ['fullWidth', 'allowOverflow']; const StyledTabs = ({
animated = false,
const StyledTabs = styled(AntDTabs, { fullWidth = true,
shouldForwardProp: prop => !notForwardedProps.includes(String(prop)), allowOverflow = true,
})<TabsProps>` ...props
overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'hidden')}; }: TabsProps) => (
<AntDTabs
animated={animated}
{...props}
css={theme => css`
overflow: ${allowOverflow ? 'visible' : 'hidden'};
.ant-tabs-content-holder { .ant-tabs-content-holder {
overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'auto')}; overflow: ${allowOverflow ? 'visible' : 'auto'};
} }
.ant-tabs-tab { .ant-tabs-tab {
flex: 1 1 auto; flex: 1 1 auto;
&.ant-tabs-tab-active .ant-tabs-tab-btn { &.ant-tabs-tab-active .ant-tabs-tab-btn {
color: inherit; color: inherit;
} }
&:hover { &:hover {
.anchor-link-container { .anchor-link-container {
cursor: pointer; cursor: pointer;
.fa.fa-link { .fa.fa-link {
visibility: visible; visibility: visible;
} }
} }
} }
.short-link-trigger.btn { .short-link-trigger.btn {
padding: 0 ${({ theme }) => theme.gridUnit}px; padding: 0 ${theme.gridUnit}px;
& > .fa.fa-link { & > .fa.fa-link {
top: 0; top: 0;
} }
} }
} }
${fullWidth &&
${({ fullWidth }) =>
fullWidth &&
css` css`
.ant-tabs-nav-list { .ant-tabs-nav-list {
width: 100%; width: 100%;
@ -72,6 +69,7 @@ const StyledTabs = styled(AntDTabs, {
.ant-tabs-tab { .ant-tabs-tab {
width: 0; width: 0;
margin-right: 0;
} }
`}; `};
@ -80,21 +78,21 @@ const StyledTabs = styled(AntDTabs, {
flex: 1 1 auto; flex: 1 1 auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: ${({ theme }) => theme.typography.sizes.s}px; font-size: ${theme.typography.sizes.s}px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
user-select: none; user-select: none;
.required { .required {
margin-left: ${({ theme }) => theme.gridUnit / 2}px; margin-left: ${theme.gridUnit / 2}px;
color: ${({ theme }) => theme.colors.error.base}; color: ${theme.colors.error.base};
} }
} }
.ant-tabs-ink-bar { .ant-tabs-ink-bar {
background: ${({ theme }) => theme.colors.secondary.base}; background: ${theme.colors.secondary.base};
} }
`; `}
/>
);
const StyledTabPane = styled(AntDTabs.TabPane)``; const StyledTabPane = styled(AntDTabs.TabPane)``;
@ -102,11 +100,6 @@ const Tabs = Object.assign(StyledTabs, {
TabPane: StyledTabPane, TabPane: StyledTabPane,
}); });
Tabs.defaultProps = {
fullWidth: true,
animated: { inkBar: true, tabPane: false },
};
const StyledEditableTabs = styled(StyledTabs)` const StyledEditableTabs = styled(StyledTabs)`
.ant-tabs-content-holder { .ant-tabs-content-holder {
background: white; background: white;

1
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
View File

@ -72,6 +72,7 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
activeKey={activeKey} activeKey={activeKey}
renderTabBar={() => <></>} renderTabBar={() => <></>}
fullWidth={false} fullWidth={false}
animated
allowOverflow allowOverflow
> >
{childIds.map((id, index) => ( {childIds.map((id, index) => (