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
2020-12-14 08:57:08 +02:00 · 2020-12-14 08:57:08 +02:00 · 1afe91579e
parent fee9bbe57b
commit 1afe91579e
7 changed files with 157 additions and 51 deletions
--- 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;
--- 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>
+);
--- 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 {
--- 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}
        >
--- 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}
--- 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 {
--- 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,8 +121,8 @@ 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}
@ -143,8 +130,8 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
            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>
  );