refactor(explore): Enhance Dataset and Control panel Collapse components

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

@@ -56,6 +56,12 @@ 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%;

superset-frontend/src/explore/components/ControlPanelsContainer.jsx

@@ -26,9 +26,10 @@ import { css } from '@emotion/core';
 import { t, styled, getChartControlPanelRegistry } from '@superset-ui/core';
 
 import Tabs from 'src/common/components/Tabs';
+import { Collapse } from 'src/common/components';
 import { PluginContext } from 'src/components/DynamicPlugins';
 import Loading from 'src/components/Loading';
-import ControlPanelSection from './ControlPanelSection';
+import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import ControlRow from './ControlRow';
 import Control from './Control';
 import { sectionsToRender } from '../controlUtils';
@@ -72,9 +73,11 @@ const ControlPanelsTabs = styled(Tabs)`
       .ant-tabs-nav-list {
         width: ${fullWidth ? '100%' : '50%'};
       }
+      .ant-tabs-tabpane {
+        height: 100%;
+      }
     `}
 `;
-
 class ControlPanelsContainer extends React.Component {
   // trigger updates to the component when async plugins load
   static contextType = PluginContext;
@@ -94,6 +97,13 @@ class ControlPanelsContainer extends React.Component {
     );
   }
 
+  sectionsToExpand(sections) {
+    return sections.reduce(
+      (acc, cur) => cur.expanded && [...acc, cur.label],
+      [],
+    );
+  }
+
   removeAlert() {
     this.props.actions.removeControlPanelAlert();
   }
@@ -135,6 +145,7 @@ class ControlPanelsContainer extends React.Component {
 
   renderControlPanelSection(section) {
     const { controls } = this.props;
+    const { label, description } = section;
 
     const hasErrors = section.controlSetRows.some(rows =>
       rows.some(
@@ -144,14 +155,27 @@ class ControlPanelsContainer extends React.Component {
           controls[s].validationErrors.length > 0,
       ),
     );
+    const PanelHeader = () => (
+      <span>
+        <span>{label}</span>{' '}
+        {description && (
+          <InfoTooltipWithTrigger label={label} tooltip={description} />
+        )}
+        {hasErrors && (
+          <InfoTooltipWithTrigger
+            label="validation-errors"
+            bsStyle="danger"
+            tooltip="This section contains validation errors"
+          />
+        )}
+      </span>
+    );
 
     return (
-      <ControlPanelSection
+      <Collapse.Panel
+        className="control-panel-section"
+        header={PanelHeader()}
         key={section.label}
-        label={section.label}
-        startExpanded={section.expanded}
-        hasErrors={hasErrors}
-        description={section.description}
       >
         {section.controlSetRows.map((controlSets, i) => {
           const renderedControls = controlSets
@@ -186,7 +210,7 @@ class ControlPanelsContainer extends React.Component {
             />
           );
         })}
-      </ControlPanelSection>
+      </Collapse.Panel>
     );
   }
 
@@ -221,7 +245,13 @@ class ControlPanelsContainer extends React.Component {
         displaySectionsToRender.push(section);
       }
     });
+
     const showCustomizeTab = displaySectionsToRender.length > 0;
+    const expandedQuerySections = this.sectionsToExpand(querySectionsToRender);
+    const expandedCustomSections = this.sectionsToExpand(
+      displaySectionsToRender,
+    );
+
     return (
       <Styles>
         {this.props.alert && (
@@ -243,11 +273,25 @@ class ControlPanelsContainer extends React.Component {
           fullWidth={showCustomizeTab}
         >
           <Tabs.TabPane key="query" tab={t('Data')}>
-            {querySectionsToRender.map(this.renderControlPanelSection)}
+            <Collapse
+              bordered
+              defaultActiveKey={expandedQuerySections}
+              expandIconPosition="right"
+              ghost
+            >
+              {querySectionsToRender.map(this.renderControlPanelSection)}
+            </Collapse>
           </Tabs.TabPane>
           {showCustomizeTab && (
             <Tabs.TabPane key="display" tab={t('Customize')}>
-              {displaySectionsToRender.map(this.renderControlPanelSection)}
+              <Collapse
+                bordered
+                defaultActiveKey={expandedCustomSections}
+                expandIconPosition="right"
+                ghost
+              >
+                {displaySectionsToRender.map(this.renderControlPanelSection)}
+              </Collapse>
             </Tabs.TabPane>
           )}
         </ControlPanelsTabs>