style: Tabs now support AntD compound components (+ basic stories) (#10728)

* Supporting compound coponents, adding stories

* Adding a coupe o' knobs just for fun.

superset-frontend/.storybook/main.js

@@ -22,7 +22,7 @@ const path = require('path');
 const customConfig = require('../webpack.config.js');
 
 module.exports = {
-  stories: ['../src/components/**/*.stories.@(t|j)sx'],
+stories: ['../src/@(components|common)/**/*.stories.@(t|j)sx'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-links',

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

@@ -17,9 +17,9 @@
  * under the License.
  */
 import styled from '@superset-ui/style';
-import { Tabs as BaseTabs } from 'src/common/components';
+import { Tabs as AntdTabs } from 'src/common/components';
 
-const Tabs = styled(BaseTabs)`
+const StyledTabs = styled(AntdTabs)`
   margin-top: -18px;
 
   .ant-tabs-nav-list {
@@ -52,4 +52,10 @@ const Tabs = styled(BaseTabs)`
   }
 `;
 
+const StyledTabPane = styled(AntdTabs.TabPane)``;
+
+const Tabs = Object.assign(StyledTabs, {
+  TabPane: StyledTabPane,
+});
+
 export default Tabs;

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

@@ -0,0 +1,61 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import Modal from './Modal';
+import Tabs from './Tabs';
+
+export default {
+  title: 'Common Components',
+  decorators: [withKnobs],
+};
+
+export const StyledModal = () => (
+  <Modal
+    disablePrimaryButton={false}
+    onHandledPrimaryAction={action('Primary Action')}
+    primaryButtonName="Danger"
+    primaryButtonType="danger"
+    show
+    onHide={action('hidden')}
+    title="I'm a modal!"
+  >
+    <div>hi!</div>
+  </Modal>
+);
+
+export const StyledTabs = () => (
+  <Tabs defaultActiveKey="1" centered={boolean('Center tabs', false)}>
+    <Tabs.TabPane
+      tab="Tab 1"
+      key="1"
+      disabled={boolean('Tab 1 Disabled', false)}
+    >
+      Tab 1 Content!
+    </Tabs.TabPane>
+    <Tabs.TabPane
+      tab="Tab 2"
+      key="2"
+      disabled={boolean('Tab 2 Disabled', false)}
+    >
+      Tab 2 Content!
+    </Tabs.TabPane>
+  </Tabs>
+);

superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx

@@ -23,7 +23,6 @@ import withToasts from 'src/messageToasts/enhancers/withToasts';
 import Icon from 'src/components/Icon';
 import Modal from 'src/common/components/Modal';
 import Tabs from 'src/common/components/Tabs';
-import { Tabs as BaseTabs } from 'src/common/components';
 
 export type DatabaseObject = {
   id?: number;
@@ -41,8 +40,6 @@ interface DatabaseModalProps {
   database?: DatabaseObject | null; // If included, will go into edit mode
 }
 
-const { TabPane } = BaseTabs;
-
 const StyledIcon = styled(Icon)`
   margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
 `;
@@ -160,7 +157,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       }
     >
       <Tabs defaultActiveKey="1">
-        <TabPane
+        <Tabs.TabPane
           tab={
             <span>
               {t('Connection')}
@@ -210,19 +207,19 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               {t(' for more information on how to structure your URI.')}
             </div>
           </StyledInputContainer>
-        </TabPane>
-        <TabPane tab={<span>{t('Performance')}</span>} key="2">
+        </Tabs.TabPane>
+        <Tabs.TabPane tab={<span>{t('Performance')}</span>} key="2">
           Performance Form Data
-        </TabPane>
-        <TabPane tab={<span>{t('SQL Lab Settings')}</span>} key="3">
+        </Tabs.TabPane>
+        <Tabs.TabPane tab={<span>{t('SQL Lab Settings')}</span>} key="3">
           SQL Lab Settings Form Data
-        </TabPane>
-        <TabPane tab={<span>{t('Security')}</span>} key="4">
+        </Tabs.TabPane>
+        <Tabs.TabPane tab={<span>{t('Security')}</span>} key="4">
           Security Form Data
-        </TabPane>
-        <TabPane tab={<span>{t('Extra')}</span>} key="5">
+        </Tabs.TabPane>
+        <Tabs.TabPane tab={<span>{t('Extra')}</span>} key="5">
           Extra Form Data
-        </TabPane>
+        </Tabs.TabPane>
       </Tabs>
     </Modal>
   );