refactor: remove panel from userinfo component (#14364)

* first pass

* fix merge

* fix lint

* covert pane to styled comp

* add theme

* fix lint

* fix test

* remove unused import
This commit is contained in:
Phillip Kelley-Dotson 2021-05-08 15:04:16 -07:00 committed by GitHub
parent e16c4d856e
commit cee22e28c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 32 deletions

View File

@ -20,7 +20,6 @@ import React from 'react';
import { Row, Col } from 'src/common/components';
import { shallow } from 'enzyme';
import App from 'src/profile/components/App';
import Tabs from 'src/components/Tabs';
import { user } from './fixtures';
@ -40,6 +39,6 @@ describe('App', () => {
it('renders 4 Tabs', () => {
const wrapper = shallow(<App {...mockedProps} />);
expect(wrapper.find(Tabs.TabPane)).toHaveLength(4);
expect(wrapper.find('[tab]')).toHaveLength(4);
});
});

View File

@ -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';
@ -32,6 +31,11 @@ interface AppProps {
user: UserWithPermissionsAndRoles;
}
const StyledTabPane = styled(Tabs.TabPane)`
background-color: ${({ theme }) => theme.colors.grayscale.light5};
padding: ${({ theme }) => theme.gridUnit * 4}px;
`;
export default function App({ user }: AppProps) {
return (
<div className="container app">
@ -41,7 +45,7 @@ export default function App({ user }: AppProps) {
</Col>
<Col xs={24} md={18}>
<Tabs centered>
<Tabs.TabPane
<StyledTabPane
key="1"
tab={
<div>
@ -49,13 +53,9 @@ export default function App({ user }: AppProps) {
</div>
}
>
<Panel>
<Panel.Body>
<Favorites user={user} />
</Panel.Body>
</Panel>
</Tabs.TabPane>
<Tabs.TabPane
<Favorites user={user} />
</StyledTabPane>
<StyledTabPane
key="2"
tab={
<div>
@ -63,13 +63,9 @@ export default function App({ user }: AppProps) {
</div>
}
>
<Panel>
<Panel.Body>
<CreatedContent user={user} />
</Panel.Body>
</Panel>
</Tabs.TabPane>
<Tabs.TabPane
<CreatedContent user={user} />
</StyledTabPane>
<StyledTabPane
key="3"
tab={
<div>
@ -77,13 +73,9 @@ export default function App({ user }: AppProps) {
</div>
}
>
<Panel>
<Panel.Body>
<RecentActivity user={user} />
</Panel.Body>
</Panel>
</Tabs.TabPane>
<Tabs.TabPane
<RecentActivity user={user} />
</StyledTabPane>
<StyledTabPane
key="4"
tab={
<div>
@ -91,12 +83,8 @@ export default function App({ user }: AppProps) {
</div>
}
>
<Panel>
<Panel.Body>
<Security user={user} />
</Panel.Body>
</Panel>
</Tabs.TabPane>
<Security user={user} />
</StyledTabPane>
</Tabs>
</Col>
</Row>