refactor: remove panel from userinfo component (apache#14364)

* first pass * fix merge * fix lint * covert pane to styled comp * add theme * fix lint * fix test * remove unused import
CybercentreCanada · Dec 17, 2021 · c46bbc3 · c46bbc3
1 parent e212b98
commit c46bbc3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 32 deletions.
diff --git 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
@@ -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,62 +45,46 @@ export default function App({ user }: AppProps) {
         </Col>
         <Col xs={24} md={18}>
           <Tabs centered>
-            <Tabs.TabPane
+            <StyledTabPane
               key="1"
               tab={
                 <div>
                   <i className="fa fa-star" /> {t('Favorites')}
                 </div>
               }
             >
-              <Panel>
-                <Panel.Body>
-                  <Favorites user={user} />
-                </Panel.Body>
-              </Panel>
-            </Tabs.TabPane>
-            <Tabs.TabPane
+              <Favorites user={user} />
+            </StyledTabPane>
+            <StyledTabPane
               key="2"
               tab={
                 <div>
                   <i className="fa fa-paint-brush" /> {t('Created content')}
                 </div>
               }
             >
-              <Panel>
-                <Panel.Body>
-                  <CreatedContent user={user} />
-                </Panel.Body>
-              </Panel>
-            </Tabs.TabPane>
-            <Tabs.TabPane
+              <CreatedContent user={user} />
+            </StyledTabPane>
+            <StyledTabPane
               key="3"
               tab={
                 <div>
                   <i className="fa fa-list" /> {t('Recent activity')}
                 </div>
               }
             >
-              <Panel>
-                <Panel.Body>
-                  <RecentActivity user={user} />
-                </Panel.Body>
-              </Panel>
-            </Tabs.TabPane>
-            <Tabs.TabPane
+              <RecentActivity user={user} />
+            </StyledTabPane>
+            <StyledTabPane
               key="4"
               tab={
                 <div>
                   <i className="fa fa-lock" /> {t('Security & Access')}
                 </div>
               }
             >
-              <Panel>
-                <Panel.Body>
-                  <Security user={user} />
-                </Panel.Body>
-              </Panel>
-            </Tabs.TabPane>
+              <Security user={user} />
+            </StyledTabPane>
           </Tabs>
         </Col>
       </Row>