From f024fcd56bc52420d7f104368a4acd1e73828d65 Mon Sep 17 00:00:00 2001 From: geido Date: Thu, 31 Mar 2022 12:28:30 +0000 Subject: [PATCH 1/4] Remove FilterBox less --- .../visualizations/FilterBox/FilterBox.jsx | 90 ++++++++++++++----- .../visualizations/FilterBox/FilterBox.less | 78 ---------------- 2 files changed, 69 insertions(+), 99 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..84c256cb30eff 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,30 @@ const defaultProps = { instantFiltering: false, }; +const StyledFilterContainer = styled.div` + display: flex; + flex-direction: column; + margin-bottom: ${({ theme }) => theme.gridUnit * 2 + 2}px; + + &:last-child { + margin-bottom: 0; + } + + label { + display: flex; + font-weight: ${({ theme }) => theme.typography.weights.bold}; + } + + .filter-badge-container { + width: 30px; + padding-right: ${({ theme }) => theme.gridUnit * 2 + 2}px; + } + + .filter-badge-container + div { + width: 100%; + } +`; + class FilterBox extends React.PureComponent { constructor(props) { super(props); @@ -409,10 +439,10 @@ class FilterBox extends React.PureComponent { return filtersFields.map(filterConfig => { const { label, key } = filterConfig; return ( -
+ {label} {this.renderSelect(filterConfig)} -
+ ); }); } @@ -420,21 +450,39 @@ class FilterBox extends React.PureComponent { render() { const { instantFiltering, width, height } = this.props; return ( -
- {this.renderDateFilter()} - {this.renderDatasourceFilters()} - {this.renderFilters()} - {!instantFiltering && ( - - )} -
+ <> + div:not(.alert) { + padding-top: 0; + } + + .filter_box { + padding: ${this.props.theme.gridUnit * 2 + 2}px 0; + overflow: visible !important; + + &:hover { + z-index: ${this.props.theme.zIndex.max}; + } + } + `} + /> +
+ {this.renderDateFilter()} + {this.renderDatasourceFilters()} + {this.renderFilters()} + {!instantFiltering && ( + + )} +
+ ); } } @@ -442,4 +490,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%; - } -} From 1e2be875b768968b1911c723816dd23ab8ae8043 Mon Sep 17 00:00:00 2001 From: geido Date: Fri, 1 Apr 2022 15:29:23 +0000 Subject: [PATCH 2/4] Fix test --- superset-frontend/src/visualizations/FilterBox/FilterBox.jsx | 5 +++-- .../src/visualizations/FilterBox/FilterBox.test.jsx | 5 ++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx index 84c256cb30eff..d41efff8a8d3e 100644 --- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx +++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx @@ -449,6 +449,7 @@ class FilterBox extends React.PureComponent { render() { const { instantFiltering, width, height } = this.props; + const { zIndex, gridUnit } = this.props.theme; return ( <> { it('should only add defined non-predefined options to filtersChoices', () => { @@ -46,9 +47,11 @@ describe('FilterBox', () => { }, ]} origSelectedValues={{}} + theme={supersetTheme} />, ); - const inst = wrapper.instance(); + const component = wrapper.shallow(); + const inst = component.instance(); // choose a predefined value inst.setState({ selectedValues: { name: ['John'] } }); expect(inst.props.filtersChoices.name.length).toEqual(2); From 6b17f1d1e9dd285995d55257dded906d72588e8f Mon Sep 17 00:00:00 2001 From: geido Date: Mon, 4 Apr 2022 14:13:39 +0000 Subject: [PATCH 3/4] Add theme top level --- .../visualizations/FilterBox/FilterBox.jsx | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx index d41efff8a8d3e..d734cf943dc67 100644 --- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx +++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx @@ -98,27 +98,29 @@ const defaultProps = { }; const StyledFilterContainer = styled.div` - display: flex; - flex-direction: column; - margin-bottom: ${({ theme }) => theme.gridUnit * 2 + 2}px; + ${({ theme }) => ` + display: flex; + flex-direction: column; + margin-bottom: ${theme.gridUnit * 2 + 2}px; - &:last-child { - margin-bottom: 0; - } + &:last-child { + margin-bottom: 0; + } - label { - display: flex; - font-weight: ${({ theme }) => theme.typography.weights.bold}; - } + label { + display: flex; + font-weight: ${theme.typography.weights.bold}; + } - .filter-badge-container { - width: 30px; - padding-right: ${({ theme }) => theme.gridUnit * 2 + 2}px; - } + .filter-badge-container { + width: 30px; + padding-right: ${theme.gridUnit * 2 + 2}px; + } - .filter-badge-container + div { - width: 100%; - } + .filter-badge-container + div { + width: 100%; + } + `} `; class FilterBox extends React.PureComponent { From 6190d5d8adf2ebf450c34683dd16d262c191b629 Mon Sep 17 00:00:00 2001 From: geido Date: Wed, 6 Apr 2022 09:22:12 +0000 Subject: [PATCH 4/4] Use styledMount --- .../src/visualizations/FilterBox/FilterBox.test.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.test.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.test.jsx index 4afa29d2fecca..e37a4bf1c69d7 100644 --- a/superset-frontend/src/visualizations/FilterBox/FilterBox.test.jsx +++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.test.jsx @@ -17,15 +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'; -import { supersetTheme } from '@superset-ui/core'; describe('FilterBox', () => { it('should only add defined non-predefined options to filtersChoices', () => { - const wrapper = shallow( + const wrapper = mount( { }, ]} origSelectedValues={{}} - theme={supersetTheme} />, ); - const component = wrapper.shallow(); - const inst = component.instance(); + const inst = wrapper.find('FilterBox').instance(); // choose a predefined value inst.setState({ selectedValues: { name: ['John'] } }); expect(inst.props.filtersChoices.name.length).toEqual(2);