mirror of https://github.com/apache/superset.git
refactor(userInfo): userinfo panel to styled component (#14090)
* migrate component * fix lint * remove collapse * fix test
This commit is contained in:
parent
19d2e10aff
commit
fbf0149d8b
|
@ -18,7 +18,6 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import Gravatar from 'react-gravatar';
|
||||
import { Panel } from 'react-bootstrap';
|
||||
import { mount } from 'enzyme';
|
||||
import UserInfo from 'src/profile/components/UserInfo';
|
||||
|
||||
|
@ -37,7 +36,7 @@ describe('UserInfo', () => {
|
|||
});
|
||||
it('renders a Panel', () => {
|
||||
const wrapper = mount(<UserInfo {...mockedProps} />);
|
||||
expect(wrapper.find(Panel)).toExist();
|
||||
expect(wrapper.find('.panel')).toExist();
|
||||
});
|
||||
it('renders 5 icons', () => {
|
||||
const wrapper = mount(<UserInfo {...mockedProps} />);
|
||||
|
|
|
@ -19,17 +19,22 @@
|
|||
import React from 'react';
|
||||
import Gravatar from 'react-gravatar';
|
||||
import moment from 'moment';
|
||||
import { Panel } from 'react-bootstrap';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
import { UserWithPermissionsAndRoles } from '../../types/bootstrapTypes';
|
||||
|
||||
interface UserInfoProps {
|
||||
user: UserWithPermissionsAndRoles;
|
||||
}
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
.panel {
|
||||
padding: ${({ theme }) => theme.gridUnit * 6}px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function UserInfo({ user }: UserInfoProps) {
|
||||
return (
|
||||
<div>
|
||||
<StyledContainer>
|
||||
<a href="https://en.gravatar.com/">
|
||||
<Gravatar
|
||||
email={user.email}
|
||||
|
@ -42,8 +47,8 @@ export default function UserInfo({ user }: UserInfoProps) {
|
|||
/>
|
||||
</a>
|
||||
<hr />
|
||||
<Panel>
|
||||
<Panel.Body>
|
||||
<div className="panel">
|
||||
<div className="header">
|
||||
<h3>
|
||||
<strong>
|
||||
{user.firstName} {user.lastName}
|
||||
|
@ -52,25 +57,25 @@ export default function UserInfo({ user }: UserInfoProps) {
|
|||
<h4 className="username">
|
||||
<i className="fa fa-user-o" /> {user.username}
|
||||
</h4>
|
||||
<hr />
|
||||
<p>
|
||||
<i className="fa fa-clock-o" /> {t('joined')}{' '}
|
||||
{moment(user.createdOn, 'YYYYMMDD').fromNow()}
|
||||
</p>
|
||||
<p className="email">
|
||||
<i className="fa fa-envelope-o" /> {user.email}
|
||||
</p>
|
||||
<p className="roles">
|
||||
<i className="fa fa-lock" /> {Object.keys(user.roles).join(', ')}
|
||||
</p>
|
||||
<p>
|
||||
<i className="fa fa-key" />
|
||||
|
||||
<span className="text-muted">{t('id:')}</span>
|
||||
<span className="user-id">{user.userId}</span>
|
||||
</p>
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<p>
|
||||
<i className="fa fa-clock-o" /> {t('joined')}{' '}
|
||||
{moment(user.createdOn, 'YYYYMMDD').fromNow()}
|
||||
</p>
|
||||
<p className="email">
|
||||
<i className="fa fa-envelope-o" /> {user.email}
|
||||
</p>
|
||||
<p className="roles">
|
||||
<i className="fa fa-lock" /> {Object.keys(user.roles).join(', ')}
|
||||
</p>
|
||||
<p>
|
||||
<i className="fa fa-key" />
|
||||
|
||||
<span className="text-muted">{t('id:')}</span>
|
||||
<span className="user-id">{user.userId}</span>
|
||||
</p>
|
||||
</div>
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue