fix(Explore): fixes broken layout of tooltips (#14529)

* fix: moves LESS styles into Emotion, fixes broken layout of tooltips

* fix: tests

* style: linting

* style: better styling location

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(<ControlPanelsContainer {...getDefaultProps()} />);
-    expect(wrapper.find(Collapse.Panel)).toHaveLength(5);
+    expect(
+      wrapper.find('[data-test="collapsible-control-panel"]'),
+    ).toHaveLength(5);
   });
 });

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 (
-        <span>
+        <span
+          css={theme => css`
+            position: absolute;
+            top: 50%;
+            right: 0;
+            padding-left: ${theme.gridUnit}px;
+            transform: translate(100%, -50%);
+            white-space: nowrap;
+          `}
+        >
           {this.props.description && (
             <span>
               <InfoTooltipWithTrigger
@@ -85,7 +94,13 @@ export default class ControlHeader extends React.Component {
     return (
       <div className="ControlHeader" data-test={`${this.props.name}-header`}>
         <div className="pull-left">
-          <FormLabel css={{ marginBottom: 0 }}>
+          <FormLabel
+            css={{
+              marginBottom: 0,
+              position: 'relative',
+              whiteSpace: 'nowrap',
+            }}
+          >
             {this.props.leftNode && <span>{this.props.leftNode}</span>}
             <span
               role="button"

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

@@ -27,6 +27,7 @@ import {
   getChartControlPanelRegistry,
   QueryFormData,
   DatasourceType,
+  css,
 } from '@superset-ui/core';
 import {
   ControlPanelSectionConfig,
@@ -314,7 +315,24 @@ export class ControlPanelsContainer extends React.Component<
 
     return (
       <Collapse.Panel
-        className="control-panel-section"
+        data-test="collapsible-control-panel"
+        css={theme => 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}
       >

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;
 }