refactor(explore): Enhance Dataset and Control panel Collapse compone…

…nts (#12218)

superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts

@@ -28,7 +28,7 @@ describe('Advanced analytics', () => {
     cy.visitChartByName('Num Births Trend');
     cy.verifySliceSuccess({ waitAlias: '@postJson' });
 
-    cy.get('.panel-title').contains('Advanced Analytics').click();
+    cy.get('.ant-collapse-header').contains('Advanced Analytics').click();
 
     cy.get('[data-test=time_compare]').find('.Select__control').click();
     cy.get('[data-test=time_compare]')
@@ -47,7 +47,7 @@ describe('Advanced analytics', () => {
       chartSelector: 'svg',
     });
 
-    cy.get('.panel-title').contains('Advanced Analytics').click();
+    cy.get('.ant-collapse-header').contains('Advanced Analytics').click();
     cy.get('[data-test=time_compare]')
       .find('.Select__multi-value__label')
       .contains('28 days');

superset-frontend/cypress-base/cypress/integration/explore/control.test.ts

@@ -112,7 +112,7 @@ describe('VizType control', () => {
     // should load mathjs for line chart
     cy.get('script[src*="mathjs"]').should('have.length', 1);
     cy.get('script').then(nodes => {
-      expect(nodes.length).to.greaterThan(numScripts);
+      expect(nodes.length).to.eq(numScripts);
     });
 
     cy.get('button[data-test="run-query-button"]').click();

superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.jsx

@@ -22,7 +22,7 @@ import { getChartControlPanelRegistry, t } from '@superset-ui/core';
 import { defaultControls } from 'src/explore/store';
 import { getFormDataFromControls } from 'src/explore/controlUtils';
 import { ControlPanelsContainer } from 'src/explore/components/ControlPanelsContainer';
-import ControlPanelSection from 'src/explore/components/ControlPanelSection';
+import Collapse from 'src/common/components/Collapse';
 
 describe('ControlPanelsContainer', () => {
   let wrapper;
@@ -91,6 +91,6 @@ describe('ControlPanelsContainer', () => {
 
   it('renders ControlPanelSections', () => {
     wrapper = shallow(<ControlPanelsContainer {...getDefaultProps()} />);
-    expect(wrapper.find(ControlPanelSection)).toHaveLength(5);
+    expect(wrapper.find(Collapse.Panel)).toHaveLength(5);
   });
 });

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

@@ -26,11 +26,12 @@ interface CollapseProps extends AntdCollapseProps {
   light?: boolean;
   bigger?: boolean;
   bold?: boolean;
+  animateArrows?: boolean;
 }
 
 const Collapse = Object.assign(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  styled(({ light, bigger, bold, ...props }: CollapseProps) => (
+  styled(({ light, bigger, bold, animateArrows, ...props }: CollapseProps) => (
     <AntdCollapse {...props} />
   ))`
     height: 100%;
@@ -48,6 +49,20 @@ const Collapse = Object.assign(
         font-size: ${({ bigger, theme }) =>
           bigger ? `${theme.gridUnit * 4}px` : 'inherit'};
 
+        .ant-collapse-arrow svg {
+          transition: ${({ animateArrows }) =>
+            animateArrows ? 'transform 0.24s' : 'none'};
+        }
+
+        ${({ expandIconPosition }) =>
+          expandIconPosition &&
+          expandIconPosition === 'right' &&
+          `
+            .anticon.anticon-right.ant-collapse-arrow > svg {
+              transform: rotate(90deg) !important;
+            }
+          `}
+
         ${({ light, theme }) =>
           light &&
           `
@@ -56,6 +71,13 @@ const Collapse = Object.assign(
               color: ${theme.colors.grayscale.light4};
             }
           `}
+
+        ${({ ghost, bordered, theme }) =>
+          ghost &&
+          bordered &&
+          `
+            border-bottom: 1px solid ${theme.colors.grayscale.light3};
+          `}
       }
       .ant-collapse-content {
         height: 100%;
@@ -68,6 +90,18 @@ const Collapse = Object.assign(
         }
       }
     }
+    .ant-collapse-item-active {
+      .ant-collapse-header {
+        ${({ expandIconPosition }) =>
+          expandIconPosition &&
+          expandIconPosition === 'right' &&
+          `
+            .anticon.anticon-right.ant-collapse-arrow > svg {
+              transform: rotate(-90deg) !important;
+            }
+          `}
+      }
+    }
   `,
   {
     Panel: AntdCollapse.Panel,

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

@@ -322,6 +322,16 @@ export const CollapseTextLight = () => (
     </Collapse.Panel>
   </Collapse>
 );
+export const CollapseAnimateArrows = () => (
+  <Collapse animateArrows 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 function StyledCronPicker() {
   // @ts-ignore
   const inputRef = useRef<Input>(null);