From cee22e28c04b18573480ba1ba8ab65f929451ef9 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Sat, 8 May 2021 15:04:16 -0700
Subject: [PATCH] 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
---
 .../spec/javascripts/profile/App_spec.tsx     |  3 +-
 .../src/profile/components/App.tsx            | 48 +++++++------------
 2 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/superset-frontend/spec/javascripts/profile/App_spec.tsx b/superset-frontend/spec/javascripts/profile/App_spec.tsx
index db466d54f..379d3c827 100644
--- a/superset-frontend/spec/javascripts/profile/App_spec.tsx
+++ b/superset-frontend/spec/javascripts/profile/App_spec.tsx
@@ -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);
   });
 });
diff --git a/superset-frontend/src/profile/components/App.tsx b/superset-frontend/src/profile/components/App.tsx
index 1afbaa13a..5a509e774 100644
--- a/superset-frontend/src/profile/components/App.tsx
+++ b/superset-frontend/src/profile/components/App.tsx
@@ -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>