Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: remove panel from userinfo component #14364

Merged
merged 11 commits into from May 8, 2021
113 changes: 53 additions & 60 deletions superset-frontend/src/profile/components/App.tsx
Expand Up @@ -17,10 +17,9 @@
* under the License.
*/
import React from 'react';
import { t, styled } from '@superset-ui/core';
import { Row, Col } from 'src/common/components';
import { Panel } from 'react-bootstrap';
import Tabs from 'src/components/Tabs';
import { t } from '@superset-ui/core';
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
import Favorites from './Favorites';
import UserInfo from './UserInfo';
Expand All @@ -32,6 +31,14 @@ interface AppProps {
user: UserWithPermissionsAndRoles;
}

const StyledPanel = styled.div`
padding: 10px;
pkdotson marked this conversation as resolved.
Show resolved Hide resolved
.ant-tabs-content-holder {
pkdotson marked this conversation as resolved.
Show resolved Hide resolved
background-color: white;
padding: ${({ theme }) => theme.gridUnit * 4}px;
}
`;

export default function App({ user }: AppProps) {
return (
<div className="container app">
Expand All @@ -40,64 +47,50 @@ export default function App({ user }: AppProps) {
<UserInfo user={user} />
</Col>
<Col xs={24} md={18}>
<Tabs centered>
<Tabs.TabPane
key="1"
tab={
<div>
<i className="fa fa-star" /> {t('Favorites')}
</div>
}
>
<Panel>
<Panel.Body>
<Favorites user={user} />
</Panel.Body>
</Panel>
</Tabs.TabPane>
<Tabs.TabPane
key="2"
tab={
<div>
<i className="fa fa-paint-brush" /> {t('Created content')}
</div>
}
>
<Panel>
<Panel.Body>
<CreatedContent user={user} />
</Panel.Body>
</Panel>
</Tabs.TabPane>
<Tabs.TabPane
key="3"
tab={
<div>
<i className="fa fa-list" /> {t('Recent activity')}
</div>
}
>
<Panel>
<Panel.Body>
<RecentActivity user={user} />
</Panel.Body>
</Panel>
</Tabs.TabPane>
<Tabs.TabPane
key="4"
tab={
<div>
<i className="fa fa-lock" /> {t('Security & Access')}
</div>
}
>
<Panel>
<Panel.Body>
<Security user={user} />
</Panel.Body>
</Panel>
</Tabs.TabPane>
</Tabs>
<StyledPanel>
<Tabs centered>
<Tabs.TabPane
key="1"
tab={
<div>
<i className="fa fa-star" /> {t('Favorites')}
</div>
}
>
<Favorites user={user} />
</Tabs.TabPane>
<Tabs.TabPane
key="2"
tab={
<div>
<i className="fa fa-paint-brush" /> {t('Created content')}
</div>
}
>
<CreatedContent user={user} />
</Tabs.TabPane>
<Tabs.TabPane
key="3"
tab={
<div>
<i className="fa fa-list" /> {t('Recent activity')}
</div>
}
>
<RecentActivity user={user} />
</Tabs.TabPane>
<Tabs.TabPane
key="4"
tab={
<div>
<i className="fa fa-lock" /> {t('Security & Access')}
</div>
}
>
<Security user={user} />
</Tabs.TabPane>
</Tabs>
</StyledPanel>
</Col>
</Row>
</div>
Expand Down