chore: Move styles from .less stylesheet to emotion in Explore (#14485)

* Move some styles from .less stylesheet to emotion in Explore

* Replace Global styles with local styled components

* Address comments

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

@@ -1,42 +0,0 @@
-/**
- * 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.
- */
-/* eslint-disable no-unused-expressions */
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { AGGREGATES } from 'src/explore/constants';
-import AdhocMetricStaticOption from 'src/explore/components/controls/MetricControl/AdhocMetricStaticOption';
-import AdhocMetric, {
-  EXPRESSION_TYPES,
-} from 'src/explore/components/controls/MetricControl/AdhocMetric';
-
-const sumValueAdhocMetric = new AdhocMetric({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
-  column: { type: 'VARCHAR(255)', column_name: 'source' },
-  aggregate: AGGREGATES.SUM,
-});
-
-describe('AdhocMetricStaticOption', () => {
-  it('renders the adhoc metrics label', () => {
-    const wrapper = shallow(
-      <AdhocMetricStaticOption adhocMetric={sumValueAdhocMetric} />,
-    );
-    expect(wrapper.text()).toBe('SUM(source)');
-  });
-});

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

@@ -19,14 +19,13 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import { shallow } from 'enzyme';
-
+import { styledMount as mount } from 'spec/helpers/theming';
-import { ColumnOption } from '@superset-ui/chart-controls';
 import FilterDefinitionOption from 'src/explore/components/controls/MetricControl/FilterDefinitionOption';
-import AdhocMetricStaticOption from 'src/explore/components/controls/MetricControl/AdhocMetricStaticOption';
 import { AGGREGATES } from 'src/explore/constants';
 import AdhocMetric, {
   EXPRESSION_TYPES,
 } from 'src/explore/components/controls/MetricControl/AdhocMetric';
+import { StyledColumnOption } from 'src/explore/components/optionRenderers';
 
 const sumValueAdhocMetric = new AdhocMetric({
   expressionType: EXPRESSION_TYPES.SIMPLE,
@@ -35,26 +34,26 @@ const sumValueAdhocMetric = new AdhocMetric({
 });
 
 describe('FilterDefinitionOption', () => {
-  it('renders a ColumnOption given a column', () => {
+  it('renders a StyledColumnOption given a column', () => {
     const wrapper = shallow(
       <FilterDefinitionOption option={{ column_name: 'a_column' }} />,
     );
-    expect(wrapper.find(ColumnOption)).toExist();
+    expect(wrapper.find(StyledColumnOption)).toExist();
   });
 
-  it('renders a AdhocMetricStaticOption given an adhoc metric', () => {
+  it('renders a StyledColumnOption given an adhoc metric', () => {
     const wrapper = shallow(
       <FilterDefinitionOption option={sumValueAdhocMetric} />,
     );
-    expect(wrapper.find(AdhocMetricStaticOption)).toExist();
+    expect(wrapper.find(StyledColumnOption)).toExist();
   });
 
   it('renders the metric name given a saved metric', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <FilterDefinitionOption
         option={{ saved_metric_name: 'my_custom_metric' }}
       />,
     );
-    expect(wrapper.text()).toBe('<ColumnTypeLabel />my_custom_metric');
+    expect(wrapper.find('.option-label').text()).toBe('my_custom_metric');
   });
 });

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

@@ -19,10 +19,13 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import { shallow } from 'enzyme';
-import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';
 
 import MetricDefinitionOption from 'src/explore/components/controls/MetricControl/MetricDefinitionOption';
 import AggregateOption from 'src/explore/components/controls/MetricControl/AggregateOption';
+import {
+  StyledMetricOption,
+  StyledColumnOption,
+} from 'src/explore/components/optionRenderers';
 
 describe('MetricDefinitionOption', () => {
   const mockStore = configureStore([]);
@@ -32,16 +35,16 @@ describe('MetricDefinitionOption', () => {
     return shallow(<MetricDefinitionOption store={store} {...props} />).dive();
   }
 
-  it('renders a MetricOption given a saved metric', () => {
+  it('renders a StyledMetricOption given a saved metric', () => {
     const wrapper = setup({
       option: { metric_name: 'a_saved_metric', expression: 'COUNT(*)' },
     });
-    expect(wrapper.find(MetricOption)).toExist();
+    expect(wrapper.find(StyledMetricOption)).toExist();
   });
 
-  it('renders a ColumnOption given a column', () => {
+  it('renders a StyledColumnOption given a column', () => {
     const wrapper = setup({ option: { column_name: 'a_column' } });
-    expect(wrapper.find(ColumnOption)).toExist();
+    expect(wrapper.find(StyledColumnOption)).toExist();
   });
 
   it('renders an AggregateOption given an aggregate metric', () => {

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx

@@ -66,8 +66,6 @@ import {
   CASCADING_FILTERS,
   getFiltersConfigModalTestId,
 } from '../FiltersConfigModal';
-// TODO: move styles from AdhocFilterControl to emotion and delete this ./main.less
-import './main.less';
 
 const StyledContainer = styled.div`
   display: flex;

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/main.less

@@ -1,86 +0,0 @@
-/**
- * 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 '../../../../../../stylesheets/less/variables.less';
-
-.option-label {
-  display: inline-block;
-  & ~ i {
-    margin-left: 4px;
-  }
-}
-
-.type-label {
-  margin-right: 8px;
-  width: 30px;
-  display: inline-block;
-  text-align: center;
-  font-weight: @font-weight-bold;
-}
-
-.adhoc-filter-edit-tabs > .nav-tabs {
-  margin-bottom: 8px;
-
-  & > li > a {
-    padding: 4px;
-  }
-}
-
-.edit-popover-resize {
-  transform: scaleX(-1);
-  -moz-transform: scaleX(-1);
-  -webkit-transform: scaleX(-1);
-  -ms-transform: scaleX(-1);
-  float: right;
-  margin-top: 18px;
-  margin-right: -10px;
-  cursor: nwse-resize;
-}
-
-#filter-edit-popover {
-  max-width: none;
-}
-
-.filter-edit-clause-dropdown {
-  width: 120px;
-  margin-right: 5px;
-}
-
-.filter-edit-clause-info {
-  font-size: @font-size-xs;
-  padding-left: 5px;
-}
-
-.filter-edit-clause-section {
-  display: inline-flex;
-}
-
-.adhoc-filter-sql-editor {
-  border: @gray-light solid thin;
-}
-
-.adhoc-filter-simple-column-dropdown {
-  margin-top: 20px;
-}
-
-.custom-sql-disabled-message {
-  color: @gray;
-  font-size: @font-size-xs;
-  text-align: center;
-  margin-top: 60px;
-}

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

@@ -19,12 +19,7 @@
 import React, { useEffect, useState } from 'react';
 import { styled, t } from '@superset-ui/core';
 import Collapse from 'src/components/Collapse';
-import {
+import { ControlConfig, DatasourceMeta } from '@superset-ui/chart-controls';
-  ColumnOption,
-  MetricOption,
-  ControlConfig,
-  DatasourceMeta,
-} from '@superset-ui/chart-controls';
 import { debounce } from 'lodash';
 import { matchSorter, rankings } from 'match-sorter';
 import { FAST_DEBOUNCE } from 'src/constants';
@@ -33,6 +28,7 @@ import { ExploreActions } from 'src/explore/actions/exploreActions';
 import Control from 'src/explore/components/Control';
 import DatasourcePanelDragWrapper from './DatasourcePanelDragWrapper';
 import { DndItemType } from '../DndItemType';
+import { StyledColumnOption, StyledMetricOption } from '../optionRenderers';
 
 interface DatasourceControl extends ControlConfig {
   datasource?: DatasourceMeta;
@@ -216,10 +212,10 @@ export default function DataSourcePanel({
                     value={m}
                     type={DndItemType.Metric}
                   >
-                    <MetricOption metric={m} showType />
+                    <StyledMetricOption metric={m} showType />
                   </DatasourcePanelDragWrapper>
                 ) : (
-                  <MetricOption metric={m} showType />
+                  <StyledMetricOption metric={m} showType />
                 )}
               </LabelContainer>
             ))}
@@ -238,10 +234,10 @@ export default function DataSourcePanel({
                     value={col}
                     type={DndItemType.Column}
                   >
-                    <ColumnOption column={col} showType />
+                    <StyledColumnOption column={col} showType />
                   </DatasourcePanelDragWrapper>
                 ) : (
-                  <ColumnOption column={col} showType />
+                  <StyledColumnOption column={col} showType />
                 )}
               </LabelContainer>
             ))}

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

@@ -16,26 +16,23 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import { styled } from '@superset-ui/core';
-import PropTypes from 'prop-types';
-import { ColumnTypeLabel } from '@superset-ui/chart-controls';
 
-import adhocMetricType from './adhocMetricType';
+export const ExplorePopoverContent = styled.div`
-
+  .edit-popover-resize {
-const propTypes = {
+    transform: scaleX(-1);
-  adhocMetric: adhocMetricType,
+    float: right;
-  showType: PropTypes.bool,
+    margin-top: ${({ theme }) => theme.gridUnit * 4}px;
-};
+    margin-right: ${({ theme }) => theme.gridUnit * -2}px;
-
+    cursor: nwse-resize;
-export default function AdhocMetricStaticOption({
+  }
-  adhocMetric,
+  .filter-sql-editor {
-  showType = false,
+    border: ${({ theme }) => theme.colors.grayscale.light2} solid thin;
-}) {
+  }
-  return (
+  .custom-sql-disabled-message {
-    <div>
+    color: ${({ theme }) => theme.colors.grayscale.light1};
-      {showType && <ColumnTypeLabel type="expression" />}
+    font-size: ${({ theme }) => theme.typography.sizes.xs}px;
-      <span className="option-label">{adhocMetric.label}</span>
+    text-align: center;
-    </div>
+    margin-top: ${({ theme }) => theme.gridUnit * 15}px;
-  );
+  }
-}
+`;
-AdhocMetricStaticOption.propTypes = propTypes;

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useState } from 'react';
-import { ColumnMeta, ColumnOption } from '@superset-ui/chart-controls';
+import { ColumnMeta } from '@superset-ui/chart-controls';
 import { isEmpty } from 'lodash';
 import { LabelProps } from 'src/explore/components/controls/DndColumnSelectControl/types';
 import DndSelectLabel from 'src/explore/components/controls/DndColumnSelectControl/DndSelectLabel';
@@ -25,6 +25,7 @@ import OptionWrapper from 'src/explore/components/controls/DndColumnSelectContro
 import { OptionSelector } from 'src/explore/components/controls/DndColumnSelectControl/utils';
 import { DatasourcePanelDndItem } from 'src/explore/components/DatasourcePanel/types';
 import { DndItemType } from 'src/explore/components/DndItemType';
+import { StyledColumnOption } from 'src/explore/components/optionRenderers';
 
 export const DndColumnSelect = (props: LabelProps) => {
   const { value, options } = props;
@@ -66,7 +67,7 @@ export const DndColumnSelect = (props: LabelProps) => {
         onShiftOptions={onShiftOptions}
         type={DndItemType.ColumnOption}
       >
-        <ColumnOption column={column} showType />
+        <StyledColumnOption column={column} showType />
       </OptionWrapper>
     ));
 

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx

@@ -55,6 +55,38 @@ const ResizeIcon = styled.i`
 const startingWidth = 320;
 const startingHeight = 240;
 
+const FilterPopoverContentContainer = styled.div`
+  .adhoc-filter-edit-tabs > .nav-tabs {
+    margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+
+    & > li > a {
+      padding: ${({ theme }) => theme.gridUnit}px;
+    }
+  }
+
+  #filter-edit-popover {
+    max-width: none;
+  }
+
+  .filter-edit-clause-dropdown {
+    width: ${({ theme }) => theme.gridUnit * 30}px;
+    margin-right: ${({ theme }) => theme.gridUnit}px;
+  }
+
+  .filter-edit-clause-info {
+    font-size: ${({ theme }) => theme.typography.sizes.xs}px;
+    padding-left: ${({ theme }) => theme.gridUnit}px;
+  }
+
+  .filter-edit-clause-section {
+    display: inline-flex;
+  }
+
+  .adhoc-filter-simple-column-dropdown {
+    margin-top: ${({ theme }) => theme.gridUnit * 5}px;
+  }
+`;
+
 export default class AdhocFilterEditPopover extends React.Component {
   constructor(props) {
     super(props);
@@ -149,7 +181,7 @@ export default class AdhocFilterEditPopover extends React.Component {
     const hasUnsavedChanges = !adhocFilter.equals(propsAdhocFilter);
 
     return (
-      <div
+      <FilterPopoverContentContainer
         id="filter-edit-popover"
         {...popoverProps}
         data-test="filter-edit-popover"
@@ -229,7 +261,7 @@ export default class AdhocFilterEditPopover extends React.Component {
             className="fa fa-expand edit-popover-resize text-muted"
           />
         </div>
-      </div>
+      </FilterPopoverContentContainer>
     );
   }
 }

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx

@@ -145,7 +145,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
             value={adhocFilter.sqlExpression || adhocFilter.translateToSql()}
             editorProps={{ $blockScrolling: true }}
             enableLiveAutocompletion
-            className="adhoc-filter-sql-editor"
+            className="filter-sql-editor"
             wrapEnabled
           />
         </FormGroup>

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx

@@ -21,6 +21,7 @@ import Popover from 'src/components/Popover';
 import { OptionSortType } from 'src/explore/types';
 import AdhocFilterEditPopover from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopover';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
+import { ExplorePopoverContent } from 'src/explore/components/ExploreContentPopover';
 
 interface AdhocFilterPopoverTriggerProps {
   adhocFilter: AdhocFilter;
@@ -82,15 +83,17 @@ class AdhocFilterPopoverTrigger extends React.PureComponent<
           closePopover: this.closePopover,
         };
     const overlayContent = (
-      <AdhocFilterEditPopover
+      <ExplorePopoverContent>
-        adhocFilter={adhocFilter}
+        <AdhocFilterEditPopover
-        options={this.props.options}
+          adhocFilter={adhocFilter}
-        datasource={this.props.datasource}
+          options={this.props.options}
-        partitionColumn={this.props.partitionColumn}
+          datasource={this.props.datasource}
-        onResize={this.onPopoverResize}
+          partitionColumn={this.props.partitionColumn}
-        onClose={closePopover}
+          onResize={this.onPopoverResize}
-        onChange={this.props.onFilterEdit}
+          onClose={closePopover}
-      />
+          onChange={this.props.onFilterEdit}
+        />
+      </ExplorePopoverContent>
     );
 
     return (

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx

@@ -23,8 +23,7 @@ import { FormGroup } from 'react-bootstrap';
 import Tabs from 'src/components/Tabs';
 import Button from 'src/components/Button';
 import { NativeSelect as Select } from 'src/components/Select';
-import { styled, t } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
-import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';
 
 import FormLabel from 'src/components/FormLabel';
 import { SQLEditor } from 'src/components/AsyncAceEditor';
@@ -37,6 +36,10 @@ import savedMetricType from 'src/explore/components/controls/MetricControl/saved
 import AdhocMetric, {
   EXPRESSION_TYPES,
 } from 'src/explore/components/controls/MetricControl/AdhocMetric';
+import {
+  StyledMetricOption,
+  StyledColumnOption,
+} from 'src/explore/components/optionRenderers';
 
 const propTypes = {
   onChange: PropTypes.func.isRequired,
@@ -56,16 +59,6 @@ const defaultProps = {
   getCurrentTab: noOp,
 };
 
-const ResizeIcon = styled.i`
-  margin-left: ${({ theme }) => theme.gridUnit * 2}px;
-`;
-
-const ColumnOptionStyle = styled.span`
-  .option-label {
-    display: inline;
-  }
-`;
-
 export const SAVED_TAB_KEY = 'SAVED';
 
 const startingWidth = 320;
@@ -255,11 +248,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
     if (column.metric_name && !column.verbose_name) {
       column.verbose_name = column.metric_name;
     }
-    return (
+    return <StyledColumnOption column={column} showType />;
-      <ColumnOptionStyle>
-        <ColumnOption column={column} showType />
-      </ColumnOptionStyle>
-    );
   }
 
   render() {
@@ -369,7 +358,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                       }
                       key={savedMetric.id}
                     >
-                      <MetricOption metric={savedMetric} showType />
+                      <StyledMetricOption metric={savedMetric} showType />
                     </Select.Option>
                   ))}
               </Select>
@@ -433,7 +422,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                   }
                   editorProps={{ $blockScrolling: true }}
                   enableLiveAutocompletion
-                  className="adhoc-filter-sql-editor"
+                  className="filter-sql-editor"
                   wrapEnabled
                 />
               </FormGroup>
@@ -465,7 +454,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
           >
             {t('Save')}
           </Button>
-          <ResizeIcon
+          <i
             role="button"
             aria-label="Resize"
             tabIndex={0}

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx

@@ -20,6 +20,7 @@ import React, { ReactNode } from 'react';
 import { Metric } from '@superset-ui/core';
 import Popover from 'src/components/Popover';
 import AdhocMetricEditPopoverTitle from 'src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle';
+import { ExplorePopoverContent } from 'src/explore/components/ExploreContentPopover';
 import AdhocMetricEditPopover, {
   SAVED_TAB_KEY,
 } from './AdhocMetricEditPopover';
@@ -176,19 +177,21 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
         };
 
     const overlayContent = (
-      <AdhocMetricEditPopover
+      <ExplorePopoverContent>
-        adhocMetric={adhocMetric}
+        <AdhocMetricEditPopover
-        title={title}
+          adhocMetric={adhocMetric}
-        columns={columns}
+          title={title}
-        savedMetricsOptions={savedMetricsOptions}
+          columns={columns}
-        savedMetric={savedMetric}
+          savedMetricsOptions={savedMetricsOptions}
-        datasourceType={datasourceType}
+          savedMetric={savedMetric}
-        onResize={this.onPopoverResize}
+          datasourceType={datasourceType}
-        onClose={closePopover}
+          onResize={this.onPopoverResize}
-        onChange={this.onChange}
+          onClose={closePopover}
-        getCurrentTab={this.getCurrentTab}
+          onChange={this.onChange}
-        getCurrentLabel={this.getCurrentLabel}
+          getCurrentTab={this.getCurrentTab}
-      />
+          getCurrentLabel={this.getCurrentLabel}
+        />
+      </ExplorePopoverContent>
     );
 
     const popoverTitle = (

superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.jsx

@@ -18,11 +18,10 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ColumnOption, ColumnTypeLabel } from '@superset-ui/chart-controls';
 
 import columnType from './columnType';
-import AdhocMetricStaticOption from './AdhocMetricStaticOption';
 import adhocMetricType from './adhocMetricType';
+import { StyledColumnOption } from '../../optionRenderers';
 
 const propTypes = {
   option: PropTypes.oneOfType([
@@ -35,17 +34,22 @@ const propTypes = {
 export default function FilterDefinitionOption({ option }) {
   if (option.saved_metric_name) {
     return (
-      <div>
+      <StyledColumnOption
-        <ColumnTypeLabel type="expression" />
+        column={{ column_name: option.saved_metric_name, type: 'expression' }}
-        <span className="option-label">{option.saved_metric_name}</span>
+        showType
-      </div>
+      />
     );
   }
   if (option.column_name) {
-    return <ColumnOption column={option} showType />;
+    return <StyledColumnOption column={option} showType />;
   }
   if (option.label) {
-    return <AdhocMetricStaticOption adhocMetric={option} showType />;
+    return (
+      <StyledColumnOption
+        column={{ column_name: option.label, type: 'expression' }}
+        showType
+      />
+    );
   }
 }
 FilterDefinitionOption.propTypes = propTypes;

superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionOption.jsx

@@ -18,9 +18,12 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';
 
 import withToasts from 'src/messageToasts/enhancers/withToasts';
+import {
+  StyledColumnOption,
+  StyledMetricOption,
+} from 'src/explore/components/optionRenderers';
 import AggregateOption from './AggregateOption';
 import columnType from './columnType';
 import aggregateOptionType from './aggregateOptionType';
@@ -37,10 +40,10 @@ const propTypes = {
 
 function MetricDefinitionOption({ option, addWarningToast }) {
   if (option.metric_name) {
-    return <MetricOption metric={option} showType />;
+    return <StyledMetricOption metric={option} showType />;
   }
   if (option.column_name) {
-    return <ColumnOption column={option} showType />;
+    return <StyledColumnOption column={option} showType />;
   }
   if (option.aggregate_name) {
     return <AggregateOption aggregate={option} showType />;

superset-frontend/src/explore/components/controls/OptionControls/index.tsx

@@ -19,14 +19,12 @@
 import React, { useRef } from 'react';
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 import { styled, t, useTheme } from '@superset-ui/core';
-import {
+import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-  MetricOption,
-  InfoTooltipWithTrigger,
-} from '@superset-ui/chart-controls';
 import { Tooltip } from 'src/components/Tooltip';
 import Icon from 'src/components/Icon';
 import { savedMetricType } from 'src/explore/components/controls/MetricControl/types';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
+import { StyledMetricOption } from '../../optionRenderers';
 
 export const DragContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.gridUnit}px;
@@ -246,7 +244,7 @@ export const OptionControlLabel = ({
 
   const getLabelContent = () => {
     if (savedMetric?.metric_name) {
-      return <MetricOption metric={savedMetric} />;
+      return <StyledMetricOption metric={savedMetric} />;
     }
     return <Tooltip title={label}>{label}</Tooltip>;
   };

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

@@ -0,0 +1,55 @@
+/**
+ * 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';
+import {
+  MetricOption,
+  ColumnOption,
+  MetricOptionProps,
+  ColumnOptionProps,
+} from '@superset-ui/chart-controls';
+
+const OptionContainer = styled.div`
+  .option-label {
+    display: inline-block;
+    & ~ i {
+      margin-left: ${({ theme }) => theme.gridUnit}px;
+    }
+  }
+  .type-label {
+    margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+    width: ${({ theme }) => theme.gridUnit * 7}px;
+    display: inline-block;
+    text-align: center;
+    font-weight: ${({ theme }) => theme.typography.weights.bold};
+  }
+`;
+
+export const StyledMetricOption = (props: MetricOptionProps) => (
+  <OptionContainer>
+    <MetricOption {...props} />
+  </OptionContainer>
+);
+
+export const StyledColumnOption = (props: ColumnOptionProps) => (
+  <OptionContainer>
+    <ColumnOption {...props} />
+  </OptionContainer>
+);

superset-frontend/src/explore/controls.jsx

@@ -64,9 +64,9 @@ import {
   legacyValidateInteger,
   validateNonEmpty,
 } from '@superset-ui/core';
-import { ColumnOption } from '@superset-ui/chart-controls';
 import { formatSelectOptions, mainMetric } from 'src/modules/utils';
 import { TIME_FILTER_LABELS } from './constants';
+import { StyledColumnOption } from './components/optionRenderers';
 
 const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
 const sequentialSchemeRegistry = getSequentialSchemeRegistry();
@@ -124,8 +124,8 @@ const groupByControl = {
   default: [],
   includeTime: false,
   description: t('One or many controls to group by'),
-  optionRenderer: c => <ColumnOption column={c} showType />,
+  optionRenderer: c => <StyledColumnOption column={c} showType />,
-  valueRenderer: c => <ColumnOption column={c} />,
+  valueRenderer: c => <StyledColumnOption column={c} />,
   valueKey: 'column_name',
   allowAll: true,
   filterOption: ({ data: opt }, text) =>
@@ -308,8 +308,8 @@ export const controls = {
         'expression',
     ),
     clearable: false,
-    optionRenderer: c => <ColumnOption column={c} showType />,
+    optionRenderer: c => <StyledColumnOption column={c} showType />,
-    valueRenderer: c => <ColumnOption column={c} />,
+    valueRenderer: c => <StyledColumnOption column={c} />,
     valueKey: 'column_name',
     mapStateToProps: state => {
       const props = {};

superset-frontend/src/explore/main.less

@@ -97,21 +97,6 @@
   margin-left: 3px;
 }
 
-.option-label {
-  display: inline-block;
-  & ~ i {
-    margin-left: 4px;
-  }
-}
-
-.type-label {
-  margin-right: 8px;
-  width: 30px;
-  display: inline-block;
-  text-align: center;
-  font-weight: @font-weight-bold;
-}
-
 .datasource-container {
   overflow: auto;
 }
@@ -124,25 +109,6 @@
   }
 }
 
-.adhoc-filter-edit-tabs > .nav-tabs {
-  margin-bottom: 8px;
-
-  & > li > a {
-    padding: 4px;
-  }
-}
-
-.edit-popover-resize {
-  transform: scaleX(-1);
-  -moz-transform: scaleX(-1);
-  -webkit-transform: scaleX(-1);
-  -ms-transform: scaleX(-1);
-  float: right;
-  margin-top: 18px;
-  margin-right: -10px;
-  cursor: nwse-resize;
-}
-
 #metrics-edit-popover {
   max-width: none;
 
@@ -151,32 +117,10 @@
   }
 }
 
-#filter-edit-popover {
-  max-width: none;
-}
-
-.filter-edit-clause-dropdown {
-  width: 120px;
-  margin-right: 5px;
-}
-
-.filter-edit-clause-info {
-  font-size: @font-size-xs;
-  padding-left: 5px;
-}
-
-.filter-edit-clause-section {
-  display: inline-flex;
-}
-
 .adhoc-option {
   cursor: pointer;
 }
 
-.adhoc-filter-sql-editor {
-  border: @gray-light solid thin;
-}
-
 .label-dropdown ul.dropdown-menu {
   position: fixed;
   top: auto;
@@ -193,10 +137,6 @@
   cursor: pointer;
 }
 
-.adhoc-filter-simple-column-dropdown {
-  margin-top: 20px;
-}
-
 .adhoc-label-arrow {
   font-size: @font-size-s;
   margin-left: 3px;
@@ -211,13 +151,6 @@
   }
 }
 
-.custom-sql-disabled-message {
-  color: @gray;
-  font-size: @font-size-xs;
-  text-align: center;
-  margin-top: 60px;
-}
-
 h1.section-header {
   font-size: @font-size-m;
   font-weight: @font-weight-bold;