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

* migrate component

* fix lint

* remove collapse

* fix test

superset-frontend/spec/javascripts/profile/UserInfo_spec.tsx

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

superset-frontend/src/profile/components/UserInfo.tsx

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