refactor: Existing Antd Collapse to enhanced (#12013)

* Move ProgressBar to Antd * Remove trailing space * Fix linting issues * Export enhanced Progress only * Move existing antd Collapse to enhanced Collapse * Move enhanced props up to Collapse only * Add stories for enhanced Collapse * Add 100% height for overflow * Improve text light story
apache · Dec 14, 2020 · 1afe915 · 1afe915
1 parent fee9bbe
commit 1afe915
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 51 deletions.
diff --git a/superset-frontend/src/common/components/Collapse.tsx b/superset-frontend/src/common/components/Collapse.tsx
@@ -0,0 +1,77 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+// eslint-disable-next-line no-restricted-imports
+import { Collapse as AntdCollapse } from 'antd';
+import { CollapseProps as AntdCollapseProps } from 'antd/lib/collapse';
+
+interface CollapseProps extends AntdCollapseProps {
+  light?: boolean;
+  bigger?: boolean;
+  bold?: boolean;
+}
+
+const Collapse = Object.assign(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  styled(({ light, bigger, bold, ...props }: CollapseProps) => (
+    <AntdCollapse {...props} />
+  ))`
+    height: 100%;
+    .ant-collapse-item {
+      border: 0;
+      height: 100%;
+      &:last-of-type.ant-collapse-item-active {
+        padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+      }
+      .ant-collapse-header {
+        font-weight: ${({ bold, theme }) =>
+          bold
+            ? theme.typography.weights.bold
+            : theme.typography.weights.normal};
+        font-size: ${({ bigger, theme }) =>
+          bigger ? `${theme.gridUnit * 4}px` : 'inherit'};
+
+        ${({ light, theme }) =>
+          light &&
+          `
+            color: ${theme.colors.grayscale.light4};
+            .ant-collapse-arrow svg {
+              color: ${theme.colors.grayscale.light4};
+            }
+          `}
+      }
+      .ant-collapse-content {
+        height: 100%;
+        .ant-collapse-content-box {
+          height: 100%;
+          .loading.inline {
+            margin: ${({ theme }) => theme.gridUnit * 12}px auto;
+            display: block;
+          }
+        }
+      }
+    }
+  `,
+  {
+    Panel: AntdCollapse.Panel,
+  },
+);
+
+export default Collapse;
diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx
@@ -34,6 +34,7 @@ import {
 } from './DatePicker';
 import Badge from './Badge';
 import ProgressBar from './ProgressBar';
+import Collapse from './Collapse';
 
 export default {
   title: 'Common Components',
@@ -261,3 +262,62 @@ export const BadgeTextColored = () => (
 export const BadgeSuccess = () => <Badge status="success" text="Success" />;
 export const BadgeError = () => <Badge status="error" text="Error" />;
 export const BadgeSmall = () => <Badge count={100} size="small" />;
+
+export const CollapseDefault = () => (
+  <Collapse defaultActiveKey={['1']}>
+    <Collapse.Panel header="Hi! I am a header" key="1">
+      Hi! I am a sample content
+    </Collapse.Panel>
+    <Collapse.Panel header="Hi! I am another header" key="2">
+      Hi! I am another sample content
+    </Collapse.Panel>
+  </Collapse>
+);
+export const CollapseGhost = () => (
+  <Collapse defaultActiveKey={['1']} ghost>
+    <Collapse.Panel header="Hi! I am a header" key="1">
+      Hi! I am a sample content
+    </Collapse.Panel>
+    <Collapse.Panel header="Hi! I am another header" key="2">
+      Hi! I am another sample content
+    </Collapse.Panel>
+  </Collapse>
+);
+export const CollapseBold = () => (
+  <Collapse defaultActiveKey={['1']} bold>
+    <Collapse.Panel header="Hi! I am a header" key="1">
+      Hi! I am a sample content
+    </Collapse.Panel>
+    <Collapse.Panel header="Hi! I am another header" key="2">
+      Hi! I am another sample content
+    </Collapse.Panel>
+  </Collapse>
+);
+export const CollapseBigger = () => (
+  <Collapse defaultActiveKey={['1']} bigger>
+    <Collapse.Panel header="Hi! I am a header" key="1">
+      Hi! I am a sample content
+    </Collapse.Panel>
+    <Collapse.Panel header="Hi! I am another header" key="2">
+      Hi! I am another sample content
+    </Collapse.Panel>
+  </Collapse>
+);
+export const CollapseTextLight = () => (
+  <Collapse defaultActiveKey={['1']} light>
+    <Collapse.Panel
+      header="Hi! I am a header"
+      key="1"
+      style={{ background: '#BBB' }}
+    >
+      Hi! I am a sample content
+    </Collapse.Panel>
+    <Collapse.Panel
+      header="Hi! I am another header"
+      key="2"
+      style={{ background: '#BBB' }}
+    >
+      Hi! I am another sample content
+    </Collapse.Panel>
+  </Collapse>
+);
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
@@ -32,7 +32,6 @@ export {
   Avatar,
   Button,
   Card,
-  Collapse,
   DatePicker,
   Dropdown,
   Empty,
@@ -47,8 +46,9 @@ export {
   Tooltip,
 } from 'antd';
 
-export { default as Badge } from 'src/common/components/Badge';
-export { default as Progress } from 'src/common/components/ProgressBar';
+export { default as Collapse } from './Collapse';
+export { default as Badge } from './Badge';
+export { default as Progress } from './ProgressBar';
 
 export const MenuItem = styled(AntdMenu.Item)`
   > a {

diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx
@@ -117,9 +117,6 @@ const DetailsPanelPopover = ({
                 padding-bottom: 0;
               }
             }
-            .ant-collapse-item:last-of-type.ant-collapse-item-active {
-              padding-bottom: ${theme.gridUnit * 3}px;
-            }
             &.ant-popover-placement-bottom,
             &.ant-popover-placement-bottomLeft,
             &.ant-popover-placement-bottomRight {
@@ -155,15 +152,13 @@ const DetailsPanelPopover = ({
             &.ant-popover {
               color: ${theme.colors.grayscale.light4};
             }
-            .ant-collapse-arrow svg {
-              color: ${theme.colors.grayscale.light4};
-            }
           }
         `}
       />
       <Reset>
         <Collapse
           ghost
+          light
           activeKey={activePanels}
           onChange={handleActivePanelChange}
         >

diff --git a/superset-frontend/src/explore/components/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane.tsx
@@ -222,7 +222,13 @@ export const DataTablesPane = ({
     <SouthPane>
       {displayBackground && <SouthPaneBackground />}
       <TabsWrapper contentHeight={tableSectionHeight}>
-        <Collapse accordion bordered={false} onChange={handleCollapseChange}>
+        <Collapse
+          accordion
+          bordered={false}
+          onChange={handleCollapseChange}
+          bold
+          ghost
+        >
           <Collapse.Panel header={t('Data')} key="data">
             <Tabs
               fullWidth={false}

diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -84,25 +84,6 @@ const Styles = styled.div`
   }
 
   .ant-collapse {
-    height: 100%;
-    background-color: ${({ theme }) => theme.colors.grayscale.light5};
-    .ant-collapse-item {
-      height: 100%;
-      border: 0;
-    }
-    .ant-collapse-content,
-    .ant-collapse-content-box {
-      height: 100%;
-    }
-    .ant-collapse-header {
-      background-color: ${({ theme }) => theme.colors.grayscale.light5};
-      padding-top: 0;
-      padding-bottom: 0;
-      font-weight: ${({ theme }) => theme.typography.weights.bold};
-      & > .ant-collapse-arrow {
-        top: 5px; // not a theme variable, override necessary after setting paddings to 0 to center arrow
-      }
-    }
     .ant-tabs {
       height: 100%;
       .ant-tabs-nav {

diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
@@ -30,8 +30,6 @@ import ChartTable from './ChartTable';
 import SavedQueries from './SavedQueries';
 import DashboardTable from './DashboardTable';
 
-const { Panel } = Collapse;
-
 interface WelcomeProps {
   user: User;
   addDangerToast: (arg0: string) => void;
@@ -81,17 +79,6 @@ const WelcomeContainer = styled.div`
   .ant-card.ant-card-bordered {
     border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
   }
-  .ant-collapse-header {
-    font-weight: ${({ theme }) => theme.typography.weights.normal};
-    font-size: ${({ theme }) => theme.gridUnit * 4}px;
-  }
-  .ant-collapse-content-box {
-    min-height: 265px;
-    .loading.inline {
-      margin: ${({ theme }) => theme.gridUnit * 12}px auto;
-      display: block;
-    }
-  }
 `;
 
 function Welcome({ user, addDangerToast }: WelcomeProps) {
@@ -134,17 +121,17 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
 
   return (
     <WelcomeContainer>
-      <Collapse defaultActiveKey={['1', '2', '3', '4']} ghost>
-        <Panel header={t('Recents')} key="1">
+      <Collapse defaultActiveKey={['1', '2', '3', '4']} ghost bigger>
+        <Collapse.Panel header={t('Recents')} key="1">
           <ActivityTable
             user={user}
             activeChild={activeChild}
             setActiveChild={setActiveChild}
             loading={loading}
             activityData={activityData}
           />
-        </Panel>
-        <Panel header={t('Dashboards')} key="2">
+        </Collapse.Panel>
+        <Collapse.Panel header={t('Dashboards')} key="2">
           {loading ? (
             <Loading position="inline" />
           ) : (
@@ -154,21 +141,21 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
               isLoading={loading}
             />
           )}
-        </Panel>
-        <Panel header={t('Saved Queries')} key="3">
+        </Collapse.Panel>
+        <Collapse.Panel header={t('Saved Queries')} key="3">
           {loading ? (
             <Loading position="inline" />
           ) : (
             <SavedQueries user={user} mine={activityData.myQuery} />
           )}
-        </Panel>
-        <Panel header={t('Charts')} key="4">
+        </Collapse.Panel>
+        <Collapse.Panel header={t('Charts')} key="4">
           {loading ? (
             <Loading position="inline" />
           ) : (
             <ChartTable user={user} mine={activityData.myChart} />
           )}
-        </Panel>
+        </Collapse.Panel>
       </Collapse>
     </WelcomeContainer>
   );