refactor: Replace react-bootstrap tabs with Antd tabs on Profile (#11211)

* Create styled Antd Tabs and Dropdown

* Replace Tabs in Profile view

* Change some hard coded variables to theme

* Lint fix

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

@@ -17,9 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import { Col, Row, Tab } from 'react-bootstrap';
+import { Col, Row } from 'react-bootstrap';
 import { shallow } from 'enzyme';
 import App from 'src/profile/components/App';
+import Tabs from 'src/common/components/Tabs';
 
 import { user } from './fixtures';
 
@@ -39,6 +40,6 @@ describe('App', () => {
 
   it('renders 4 Tabs', () => {
     const wrapper = shallow(<App {...mockedProps} />);
-    expect(wrapper.find(Tab)).toHaveLength(4);
+    expect(wrapper.find(Tabs.TabPane)).toHaveLength(4);
   });
 });

superset-frontend/src/common/components/Dropdown.tsx

@@ -18,18 +18,14 @@
  */
 import React from 'react';
 import { Dropdown as AntdDropdown } from 'src/common/components';
-import { css } from '@emotion/core';
 import { styled } from '@superset-ui/core';
 
-const dotStyle = css`
-  width: 3px;
-  height: 3px;
-  border-radius: 1.5px;
-  background-color: #bababa;
-`;
-
 const MenuDots = styled.div`
-  ${dotStyle};
+  width: ${({ theme }) => theme.gridUnit * 0.75}px;
+  height: ${({ theme }) => theme.gridUnit * 0.75}px;
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.colors.grayscale.light1};
+
   font-weight: ${({ theme }) => theme.typography.weights.normal};
   display: inline-flex;
   position: relative;
@@ -47,7 +43,10 @@ const MenuDots = styled.div`
   &::after {
     position: absolute;
     content: ' ';
-    ${dotStyle};
+    width: ${({ theme }) => theme.gridUnit * 0.75}px;
+    height: ${({ theme }) => theme.gridUnit * 0.75}px;
+    border-radius: 50%;
+    background-color: ${({ theme }) => theme.colors.grayscale.light1};
   }
 
   &::before {

superset-frontend/src/common/components/Modal.tsx

@@ -57,7 +57,7 @@ const StyledModal = styled(BaseModal)`
 
     .close {
       flex: 1 1 auto;
-      margin-bottom: 3px;
+      margin-bottom: ${({ theme }) => theme.gridUnit}px;
       color: ${({ theme }) => theme.colors.secondary.dark1};
       font-size: 32px;
       font-weight: ${({ theme }) => theme.typography.weights.light};
@@ -65,12 +65,13 @@ const StyledModal = styled(BaseModal)`
   }
 
   .ant-modal-body {
-    padding: 18px;
+    padding: ${({ theme }) => theme.gridUnit * 4}px;
   }
 
   .ant-modal-footer {
-    border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
-    padding: 16px;
+    border-top: ${({ theme }) => theme.gridUnit / 4}px solid
+      ${({ theme }) => theme.colors.grayscale.light2};
+    padding: ${({ theme }) => theme.gridUnit * 4}px;
 
     .btn {
       font-size: 12px;
@@ -78,9 +79,14 @@ const StyledModal = styled(BaseModal)`
     }
 
     .btn + .btn {
-      margin-left: 8px;
+      margin-left: ${({ theme }) => theme.gridUnit * 2}px;
     }
   }
+
+  // styling for Tabs component
+  .ant-tabs {
+    margin-top: -${({ theme }) => theme.gridUnit * 4}px;
+  }
 `;
 
 export default function Modal({

superset-frontend/src/common/components/Tabs.tsx

@@ -17,10 +17,9 @@
  * under the License.
  */
 import React from 'react';
-import { styled } from '@superset-ui/core';
+import { css, styled } from '@superset-ui/core';
 import { Tabs as AntdTabs } from 'src/common/components';
-import { css } from '@emotion/core';
-import Icon from '../../components/Icon';
+import Icon from 'src/components/Icon';
 
 interface TabsProps {
   fullWidth?: boolean;
@@ -52,7 +51,10 @@ const StyledTabs = styled(AntdTabs, {
     `};
 
   .ant-tabs-tab-btn {
+    display: flex;
     flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
     font-size: ${({ theme }) => theme.typography.sizes.s}px;
     text-align: center;
     text-transform: uppercase;

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

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { Col, Row, Tabs, Tab, Panel } from 'react-bootstrap';
+import { Col, Row, Panel } from 'react-bootstrap';
+import Tabs from 'src/common/components/Tabs';
 import { t } from '@superset-ui/core';
 
 import Favorites from './Favorites';
@@ -39,10 +40,10 @@ export default function App({ user }: AppProps) {
           <UserInfo user={user} />
         </Col>
         <Col md={9}>
-          <Tabs id="options">
-            <Tab
-              eventKey={1}
-              title={
+          <Tabs centered>
+            <Tabs.TabPane
+              key="1"
+              tab={
                 <div>
                   <i className="fa fa-star" /> {t('Favorites')}
                 </div>
@@ -53,10 +54,10 @@ export default function App({ user }: AppProps) {
                   <Favorites user={user} />
                 </Panel.Body>
               </Panel>
-            </Tab>
-            <Tab
-              eventKey={2}
-              title={
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              key="2"
+              tab={
                 <div>
                   <i className="fa fa-paint-brush" /> {t('Created Content')}
                 </div>
@@ -67,10 +68,10 @@ export default function App({ user }: AppProps) {
                   <CreatedContent user={user} />
                 </Panel.Body>
               </Panel>
-            </Tab>
-            <Tab
-              eventKey={3}
-              title={
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              key="3"
+              tab={
                 <div>
                   <i className="fa fa-list" /> {t('Recent Activity')}
                 </div>
@@ -81,10 +82,10 @@ export default function App({ user }: AppProps) {
                   <RecentActivity user={user} />
                 </Panel.Body>
               </Panel>
-            </Tab>
-            <Tab
-              eventKey={4}
-              title={
+            </Tabs.TabPane>
+            <Tabs.TabPane
+              key="4"
+              tab={
                 <div>
                   <i className="fa fa-lock" /> {t('Security & Access')}
                 </div>
@@ -95,7 +96,7 @@ export default function App({ user }: AppProps) {
                   <Security user={user} />
                 </Panel.Body>
               </Panel>
-            </Tab>
+            </Tabs.TabPane>
           </Tabs>
         </Col>
       </Row>