From 6d5771af346e1ae821b1ac0598751508265481a6 Mon Sep 17 00:00:00 2001 From: Geido <60598000+geido@users.noreply.github.com> Date: Thu, 7 Apr 2022 17:17:50 +0300 Subject: [PATCH] chore: Remove FilterBox.less (#19462) * Remove FilterBox less * Fix test * Add theme top level * Use styledMount --- .../visualizations/FilterBox/FilterBox.jsx | 93 ++++++++++++++----- .../visualizations/FilterBox/FilterBox.less | 78 ---------------- .../FilterBox/FilterBox.test.jsx | 5 +- 3 files changed, 74 insertions(+), 102 deletions(-) delete mode 100644 superset-frontend/src/visualizations/FilterBox/FilterBox.less diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx index 8f5796644f1af..d734cf943dc67 100644 --- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx +++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx @@ -22,7 +22,15 @@ import { debounce } from 'lodash'; import { max as d3Max } from 'd3-array'; import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select'; import Button from 'src/components/Button'; -import { t, SupersetClient, ensureIsArray } from '@superset-ui/core'; +import { + css, + styled, + t, + SupersetClient, + ensureIsArray, + withTheme, +} from '@superset-ui/core'; +import { Global } from '@emotion/react'; import { BOOL_FALSE_DISPLAY, @@ -43,8 +51,6 @@ import { TIME_FILTER_MAP, } from 'src/explore/constants'; -import './FilterBox.less'; - // a shortcut to a map key, used by many components export const TIME_RANGE = TIME_FILTER_MAP.time_range; @@ -91,6 +97,32 @@ const defaultProps = { instantFiltering: false, }; +const StyledFilterContainer = styled.div` + ${({ theme }) => ` + display: flex; + flex-direction: column; + margin-bottom: ${theme.gridUnit * 2 + 2}px; + + &:last-child { + margin-bottom: 0; + } + + label { + display: flex; + font-weight: ${theme.typography.weights.bold}; + } + + .filter-badge-container { + width: 30px; + padding-right: ${theme.gridUnit * 2 + 2}px; + } + + .filter-badge-container + div { + width: 100%; + } + `} +`; + class FilterBox extends React.PureComponent { constructor(props) { super(props); @@ -409,32 +441,51 @@ class FilterBox extends React.PureComponent { return filtersFields.map(filterConfig => { const { label, key } = filterConfig; return ( -
+ {label} {this.renderSelect(filterConfig)} -
+ ); }); } render() { const { instantFiltering, width, height } = this.props; + const { zIndex, gridUnit } = this.props.theme; return ( -
- {this.renderDateFilter()} - {this.renderDatasourceFilters()} - {this.renderFilters()} - {!instantFiltering && ( - - )} -
+ <> + div:not(.alert) { + padding-top: 0; + } + + .filter_box { + padding: ${gridUnit * 2 + 2}px 0; + overflow: visible !important; + + &:hover { + z-index: ${zIndex.max}; + } + } + `} + /> +
+ {this.renderDateFilter()} + {this.renderDatasourceFilters()} + {this.renderFilters()} + {!instantFiltering && ( + + )} +
+ ); } } @@ -442,4 +493,4 @@ class FilterBox extends React.PureComponent { FilterBox.propTypes = propTypes; FilterBox.defaultProps = defaultProps; -export default FilterBox; +export default withTheme(FilterBox); diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.less b/superset-frontend/src/visualizations/FilterBox/FilterBox.less deleted file mode 100644 index 5a8f0953694f8..0000000000000 --- a/superset-frontend/src/visualizations/FilterBox/FilterBox.less +++ /dev/null @@ -1,78 +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 '../../assets/stylesheets/less/variables.less'; - -.dashboard .filter_box .slice_container > div:not(.alert) { - padding-top: 0; -} - -.filter_box { - padding: 10px 0; - overflow: visible !important; - - &:hover { - z-index: @z-index-max; - } -} - -.m-b-5 { - margin-bottom: 5px; -} - -.input-inline { - float: left; - padding-right: 3px; - - .dropdown { - display: flex; - button { - padding-right: 20px; - .caret { - width: auto; - position: absolute; - right: 5px; - top: 6px; - } - } - } -} - -.filter-container { - display: flex; - flex-direction: column; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - label { - display: flex; - font-weight: @font-weight-bold; - } - - .filter-badge-container { - width: 30px; - padding-right: 10px; - } - - .filter-badge-container + div { - width: 100%; - } -} diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.test.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.test.jsx index 66597fc69152f..e37a4bf1c69d7 100644 --- a/superset-frontend/src/visualizations/FilterBox/FilterBox.test.jsx +++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.test.jsx @@ -17,14 +17,13 @@ * under the License. */ import React from 'react'; -import { shallow } from 'enzyme'; import { styledMount as mount } from 'spec/helpers/theming'; import FilterBox from 'src/visualizations/FilterBox/FilterBox'; import SelectControl from 'src/explore/components/controls/SelectControl'; describe('FilterBox', () => { it('should only add defined non-predefined options to filtersChoices', () => { - const wrapper = shallow( + const wrapper = mount( { origSelectedValues={{}} />, ); - const inst = wrapper.instance(); + const inst = wrapper.find('FilterBox').instance(); // choose a predefined value inst.setState({ selectedValues: { name: ['John'] } }); expect(inst.props.filtersChoices.name.length).toEqual(2);