diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocMetricStaticOption_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocMetricStaticOption_spec.jsx deleted file mode 100644 index cba7178b2f..0000000000 --- a/superset-frontend/spec/javascripts/explore/components/AdhocMetricStaticOption_spec.jsx +++ /dev/null @@ -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( - , - ); - expect(wrapper.text()).toBe('SUM(source)'); - }); -}); diff --git a/superset-frontend/spec/javascripts/explore/components/FilterDefinitionOption_spec.jsx b/superset-frontend/spec/javascripts/explore/components/FilterDefinitionOption_spec.jsx index f12212fb82..0e36348d00 100644 --- a/superset-frontend/spec/javascripts/explore/components/FilterDefinitionOption_spec.jsx +++ b/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 { ColumnOption } from '@superset-ui/chart-controls'; +import { styledMount as mount } from 'spec/helpers/theming'; 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( , ); - 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( , ); - 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( , ); - expect(wrapper.text()).toBe('my_custom_metric'); + expect(wrapper.find('.option-label').text()).toBe('my_custom_metric'); }); }); diff --git a/superset-frontend/spec/javascripts/explore/components/MetricDefinitionOption_spec.jsx b/superset-frontend/spec/javascripts/explore/components/MetricDefinitionOption_spec.jsx index dda794b2bf..7ab2bdc6a7 100644 --- a/superset-frontend/spec/javascripts/explore/components/MetricDefinitionOption_spec.jsx +++ b/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().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', () => { diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx index 182e1e00f0..d3c3298b69 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx +++ b/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; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/main.less b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/main.less deleted file mode 100644 index d530ea081b..0000000000 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/main.less +++ /dev/null @@ -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; -} diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx index 40063c28ae..bac9babcea 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx +++ b/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 { - ColumnOption, - MetricOption, - ControlConfig, - DatasourceMeta, -} from '@superset-ui/chart-controls'; +import { 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} > - + ) : ( - + )} ))} @@ -238,10 +234,10 @@ export default function DataSourcePanel({ value={col} type={DndItemType.Column} > - + ) : ( - + )} ))} diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricStaticOption.jsx b/superset-frontend/src/explore/components/ExploreContentPopover.tsx similarity index 55% rename from superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricStaticOption.jsx rename to superset-frontend/src/explore/components/ExploreContentPopover.tsx index ee5eed7d4d..6a91c6b4ca 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricStaticOption.jsx +++ b/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 PropTypes from 'prop-types'; -import { ColumnTypeLabel } from '@superset-ui/chart-controls'; +import { styled } from '@superset-ui/core'; -import adhocMetricType from './adhocMetricType'; - -const propTypes = { - adhocMetric: adhocMetricType, - showType: PropTypes.bool, -}; - -export default function AdhocMetricStaticOption({ - adhocMetric, - showType = false, -}) { - return ( -
- {showType && } - {adhocMetric.label} -
- ); -} -AdhocMetricStaticOption.propTypes = propTypes; +export const ExplorePopoverContent = styled.div` + .edit-popover-resize { + transform: scaleX(-1); + float: right; + margin-top: ${({ theme }) => theme.gridUnit * 4}px; + margin-right: ${({ theme }) => theme.gridUnit * -2}px; + cursor: nwse-resize; + } + .filter-sql-editor { + border: ${({ theme }) => theme.colors.grayscale.light2} solid thin; + } + .custom-sql-disabled-message { + color: ${({ theme }) => theme.colors.grayscale.light1}; + font-size: ${({ theme }) => theme.typography.sizes.xs}px; + text-align: center; + margin-top: ${({ theme }) => theme.gridUnit * 15}px; + } +`; diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx index 8a680bd393..b6d6a28389 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx +++ b/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} > - + )); diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx index f7ec6be4f8..ba4a63601e 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx +++ b/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 ( -
- + ); } } diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx index 6599e85058..405d692a94 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx +++ b/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 /> diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx index 45fe11fc98..530c1bb4ff 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx +++ b/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 = ( - + + + ); return ( diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx index fd62b81406..ef8a07ca59 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx +++ b/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 { ColumnOption, MetricOption } from '@superset-ui/chart-controls'; +import { t } from '@superset-ui/core'; 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 ; } render() { @@ -369,7 +358,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent { } key={savedMetric.id} > - + ))} @@ -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 /> @@ -465,7 +454,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent { > {t('Save')} - + + + ); const popoverTitle = ( diff --git a/superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.jsx b/superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.jsx index 0c5093a62a..0491090ed9 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.jsx +++ b/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 ( -
- - {option.saved_metric_name} -
+ ); } if (option.column_name) { - return ; + return ; } if (option.label) { - return ; + return ( + + ); } } FilterDefinitionOption.propTypes = propTypes; diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionOption.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionOption.jsx index 121d02a31b..b0acad2298 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionOption.jsx +++ b/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 ; + return ; } if (option.column_name) { - return ; + return ; } if (option.aggregate_name) { return ; diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx index 03d399ecde..521bcc9274 100644 --- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx +++ b/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 { - MetricOption, - InfoTooltipWithTrigger, -} from '@superset-ui/chart-controls'; +import { 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 ; + return ; } return {label}; }; diff --git a/superset-frontend/src/explore/components/optionRenderers.tsx b/superset-frontend/src/explore/components/optionRenderers.tsx new file mode 100644 index 0000000000..368138a4d5 --- /dev/null +++ b/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) => ( + + + +); + +export const StyledColumnOption = (props: ColumnOptionProps) => ( + + + +); diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx index c37f5e72bb..451ca525d3 100644 --- a/superset-frontend/src/explore/controls.jsx +++ b/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 => , - valueRenderer: c => , + optionRenderer: c => , + valueRenderer: c => , valueKey: 'column_name', allowAll: true, filterOption: ({ data: opt }, text) => @@ -308,8 +308,8 @@ export const controls = { 'expression', ), clearable: false, - optionRenderer: c => , - valueRenderer: c => , + optionRenderer: c => , + valueRenderer: c => , valueKey: 'column_name', mapStateToProps: state => { const props = {}; diff --git a/superset-frontend/src/explore/main.less b/superset-frontend/src/explore/main.less index f30435fb28..84ae27ef80 100644 --- a/superset-frontend/src/explore/main.less +++ b/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;