iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(userInfo): userinfo panel to styled component (#14090) 

* migrate component

* fix lint

* remove collapse

* fix test
This commit is contained in:
Phillip Kelley-Dotson 2021-04-15 09:24:34 -07:00 committed by GitHub
parent 19d2e10aff
commit fbf0149d8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
superset-frontend/spec/javascripts/profile/UserInfo_spec.tsx
View File

@ -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} />);

55
superset-frontend/src/profile/components/UserInfo.tsx
View File

@ -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" />
&nbsp;
<span className="text-muted">{t('id:')}</span>&nbsp;
<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" />
&nbsp;
<span className="text-muted">{t('id:')}</span>&nbsp;
<span className="user-id">{user.userId}</span>
</p>
</div>
</StyledContainer>
);
}