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:
Kamil Gabryjelski
2021-05-05 15:36:52 +02:00
committed by GitHub
parent 93c7f5bb44
commit b030c9801c
19 changed files with 197 additions and 311 deletions

View File

@@ -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)');
});
});

View File

@@ -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');
});
});

View File

@@ -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', () => {