chore: Remove FilterBox.less (#19462)

* Remove FilterBox less * Fix test * Add theme top level * Use styledMount
apache · Apr 7, 2022 · 6d5771a · 6d5771a
1 parent e8f3e8a
commit 6d5771a
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 102 deletions.
diff --git 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,37 +441,56 @@ class FilterBox extends React.PureComponent {
     return filtersFields.map(filterConfig => {
       const { label, key } = filterConfig;
       return (
-        <div key={key} className="m-b-5 filter-container">
+        <StyledFilterContainer key={key} className="filter-container">
           <FormLabel htmlFor={`LABEL-${key}`}>{label}</FormLabel>
           {this.renderSelect(filterConfig)}
-        </div>
+        </StyledFilterContainer>
       );
     });
   }
 
   render() {
     const { instantFiltering, width, height } = this.props;
+    const { zIndex, gridUnit } = this.props.theme;
     return (
-      <div style={{ width, height, overflow: 'auto' }}>
-        {this.renderDateFilter()}
-        {this.renderDatasourceFilters()}
-        {this.renderFilters()}
-        {!instantFiltering && (
-          <Button
-            buttonSize="small"
-            buttonStyle="primary"
-            onClick={this.clickApply.bind(this)}
-            disabled={!this.state.hasChanged}
-          >
-            {t('Apply')}
-          </Button>
-        )}
-      </div>
+      <>
+        <Global
+          styles={css`
+            .dashboard .filter_box .slice_container > div:not(.alert) {
+              padding-top: 0;
+            }
+
+            .filter_box {
+              padding: ${gridUnit * 2 + 2}px 0;
+              overflow: visible !important;
+
+              &:hover {
+                z-index: ${zIndex.max};
+              }
+            }
+          `}
+        />
+        <div style={{ width, height, overflow: 'auto' }}>
+          {this.renderDateFilter()}
+          {this.renderDatasourceFilters()}
+          {this.renderFilters()}
+          {!instantFiltering && (
+            <Button
+              buttonSize="small"
+              buttonStyle="primary"
+              onClick={this.clickApply.bind(this)}
+              disabled={!this.state.hasChanged}
+            >
+              {t('Apply')}
+            </Button>
+          )}
+        </div>
+      </>
     );
   }
 }
 
 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
diff --git 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(
       <FilterBox
         chartId={1001}
         datasource={{ id: 1 }}
@@ -48,7 +47,7 @@ describe('FilterBox', () => {
         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);