mirror of
https://github.com/apache/superset.git
synced 2024-09-06 13:57:40 -04:00
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
This commit is contained in:
parent
93c7f5bb44
commit
b030c9801c
@ -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)');
|
||||
});
|
||||
});
|
@ -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(
|
||||
<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');
|
||||
});
|
||||
});
|
||||
|
@ -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', () => {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
@ -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}
|
||||
>
|
||||
<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>
|
||||
))}
|
||||
|
@ -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 (
|
||||
<div>
|
||||
{showType && <ColumnTypeLabel type="expression" />}
|
||||
<span className="option-label">{adhocMetric.label}</span>
|
||||
</div>
|
||||
);
|
||||
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;
|
||||
}
|
||||
AdhocMetricStaticOption.propTypes = propTypes;
|
||||
.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;
|
||||
}
|
||||
`;
|
@ -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>
|
||||
));
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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,6 +83,7 @@ class AdhocFilterPopoverTrigger extends React.PureComponent<
|
||||
closePopover: this.closePopover,
|
||||
};
|
||||
const overlayContent = (
|
||||
<ExplorePopoverContent>
|
||||
<AdhocFilterEditPopover
|
||||
adhocFilter={adhocFilter}
|
||||
options={this.props.options}
|
||||
@ -91,6 +93,7 @@ class AdhocFilterPopoverTrigger extends React.PureComponent<
|
||||
onClose={closePopover}
|
||||
onChange={this.props.onFilterEdit}
|
||||
/>
|
||||
</ExplorePopoverContent>
|
||||
);
|
||||
|
||||
return (
|
||||
|
@ -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 (
|
||||
<ColumnOptionStyle>
|
||||
<ColumnOption column={column} showType />
|
||||
</ColumnOptionStyle>
|
||||
);
|
||||
return <StyledColumnOption column={column} showType />;
|
||||
}
|
||||
|
||||
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}
|
||||
|
@ -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,6 +177,7 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
|
||||
};
|
||||
|
||||
const overlayContent = (
|
||||
<ExplorePopoverContent>
|
||||
<AdhocMetricEditPopover
|
||||
adhocMetric={adhocMetric}
|
||||
title={title}
|
||||
@ -189,6 +191,7 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
|
||||
getCurrentTab={this.getCurrentTab}
|
||||
getCurrentLabel={this.getCurrentLabel}
|
||||
/>
|
||||
</ExplorePopoverContent>
|
||||
);
|
||||
|
||||
const popoverTitle = (
|
||||
|
@ -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>
|
||||
<ColumnTypeLabel type="expression" />
|
||||
<span className="option-label">{option.saved_metric_name}</span>
|
||||
</div>
|
||||
<StyledColumnOption
|
||||
column={{ column_name: option.saved_metric_name, type: 'expression' }}
|
||||
showType
|
||||
/>
|
||||
);
|
||||
}
|
||||
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;
|
||||
|
@ -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 />;
|
||||
|
@ -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 <MetricOption metric={savedMetric} />;
|
||||
return <StyledMetricOption metric={savedMetric} />;
|
||||
}
|
||||
return <Tooltip title={label}>{label}</Tooltip>;
|
||||
};
|
||||
|
55
superset-frontend/src/explore/components/optionRenderers.tsx
Normal file
55
superset-frontend/src/explore/components/optionRenderers.tsx
Normal file
@ -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>
|
||||
);
|
@ -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 />,
|
||||
valueRenderer: c => <ColumnOption column={c} />,
|
||||
optionRenderer: c => <StyledColumnOption column={c} showType />,
|
||||
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 />,
|
||||
valueRenderer: c => <ColumnOption column={c} />,
|
||||
optionRenderer: c => <StyledColumnOption column={c} showType />,
|
||||
valueRenderer: c => <StyledColumnOption column={c} />,
|
||||
valueKey: 'column_name',
|
||||
mapStateToProps: state => {
|
||||
const props = {};
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user