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;