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);