diff --git a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx index 8bee3f3cc661..f25793dd5f3c 100644 --- a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx +++ b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx @@ -17,7 +17,7 @@ * under the License. */ import React from 'react'; -import { shallow } from 'enzyme'; +import { styledShallow as shallow } from 'spec/helpers/theming'; import { DatasourceType, getChartControlPanelRegistry, @@ -29,7 +29,6 @@ import { ControlPanelsContainer, ControlPanelsContainerProps, } from 'src/explore/components/ControlPanelsContainer'; -import Collapse from 'src/components/Collapse'; describe('ControlPanelsContainer', () => { let wrapper; @@ -98,6 +97,8 @@ describe('ControlPanelsContainer', () => { it('renders ControlPanelSections', () => { wrapper = shallow(); - expect(wrapper.find(Collapse.Panel)).toHaveLength(5); + expect( + wrapper.find('[data-test="collapsible-control-panel"]'), + ).toHaveLength(5); }); }); diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx index 3e0f912605a8..64cc7c205eeb 100644 --- a/superset-frontend/src/explore/components/ControlHeader.jsx +++ b/superset-frontend/src/explore/components/ControlHeader.jsx @@ -18,7 +18,7 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { t } from '@superset-ui/core'; +import { t, css } from '@superset-ui/core'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; import { Tooltip } from 'src/components/Tooltip'; import { FormLabel } from 'src/components/Form'; @@ -49,7 +49,16 @@ export default class ControlHeader extends React.Component { renderOptionalIcons() { if (this.props.hovered) { return ( - + css` + position: absolute; + top: 50%; + right: 0; + padding-left: ${theme.gridUnit}px; + transform: translate(100%, -50%); + white-space: nowrap; + `} + > {this.props.description && (
- + {this.props.leftNode && {this.props.leftNode}} css` + margin-bottom: 0; + box-shadow: none; + + &:last-child { + padding-bottom: ${theme.gridUnit * 10}px; + } + + .panel-body { + margin-left: ${theme.gridUnit * 4}px; + padding-bottom: 0px; + } + + span.label { + display: inline-block; + } + `} header={PanelHeader()} key={sectionId} > diff --git a/superset-frontend/src/explore/main.less b/superset-frontend/src/explore/main.less index 84ae27ef805b..43de0da2acc9 100644 --- a/superset-frontend/src/explore/main.less +++ b/superset-frontend/src/explore/main.less @@ -47,34 +47,10 @@ margin-right: 3px; } -.control-panel-section { - margin-bottom: 0; - box-shadow: none; - - &:last-child { - padding-bottom: 40px; - } -} - .background-transparent { background-color: transparent !important; } -.control-panel-section { - .panel-body { - margin-left: 15px; - padding-bottom: 0px; - } - - .control-label { - margin-bottom: 0px; - } - - span.label { - display: inline-block; - } -} - .fa.expander { width: 15px; }