fix: Cascading filter popover widens automatically (apache#15390)

CybercentreCanada · Dec 17, 2021 · eebd68e · eebd68e
1 parent 69566fa
commit eebd68e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 50 deletions.
diff --git a/...ashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx b/...ashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx
@@ -18,7 +18,6 @@
  */
 import React from 'react';
 import { styled, DataMask } from '@superset-ui/core';
-import Icon from 'src/components/Icon';
 import FilterControl from 'src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl';
 import { CascadeFilter } from 'src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/types';
 import { Filter } from 'src/dashboard/components/nativeFilters/types';
@@ -31,19 +30,15 @@ export interface CascadeFilterControlProps {
   onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void;
 }
 
-const StyledCascadeChildrenList = styled.ul`
-  list-style-type: none;
-  & > * {
-    list-style-type: none;
-  }
-`;
-
-const StyledFilterControlBox = styled.div`
+const StyledDiv = styled.div`
   display: flex;
-`;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
 
-const StyledCaretIcon = styled(Icon)`
-  margin-top: ${({ theme }) => -theme.gridUnit}px;
+  .ant-form-item {
+    margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+  }
 `;
 
 const CascadeFilterControl: React.FC<CascadeFilterControlProps> = ({
@@ -53,28 +48,23 @@ const CascadeFilterControl: React.FC<CascadeFilterControlProps> = ({
   onFilterSelectionChange,
 }) => (
   <>
-    <StyledFilterControlBox>
-      <StyledCaretIcon name="caret-down" />
-      <FilterControl
-        dataMaskSelected={dataMaskSelected}
-        filter={filter}
-        directPathToChild={directPathToChild}
-        onFilterSelectionChange={onFilterSelectionChange}
-      />
-    </StyledFilterControlBox>
-
-    <StyledCascadeChildrenList>
+    <FilterControl
+      dataMaskSelected={dataMaskSelected}
+      filter={filter}
+      directPathToChild={directPathToChild}
+      onFilterSelectionChange={onFilterSelectionChange}
+    />
+    <StyledDiv>
       {filter.cascadeChildren?.map(childFilter => (
-        <li key={childFilter.id}>
-          <CascadeFilterControl
-            dataMaskSelected={dataMaskSelected}
-            filter={childFilter}
-            directPathToChild={directPathToChild}
-            onFilterSelectionChange={onFilterSelectionChange}
-          />
-        </li>
+        <CascadeFilterControl
+          key={childFilter.id}
+          dataMaskSelected={dataMaskSelected}
+          filter={childFilter}
+          directPathToChild={directPathToChild}
+          onFilterSelectionChange={onFilterSelectionChange}
+        />
       ))}
-    </StyledCascadeChildrenList>
+    </StyledDiv>
   </>
 );
 

diff --git a/.../src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx b/.../src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx
@@ -74,6 +74,11 @@ const StyledPill = styled(Pill)`
   background: ${({ theme }) => theme.colors.grayscale.light1};
 `;
 
+const ContentWrapper = styled.div`
+  max-height: 700px;
+  overflow-y: auto;
+`;
+
 const CascadePopover: React.FC<CascadePopoverProps> = ({
   dataMaskSelected,
   filter,
@@ -166,14 +171,16 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
   );
 
   const content = (
-    <CascadeFilterControl
-      dataMaskSelected={dataMaskSelected}
-      data-test="cascade-filters-control"
-      key={filter.id}
-      filter={filter}
-      directPathToChild={visible ? currentPathToChild : undefined}
-      onFilterSelectionChange={onFilterSelectionChange}
-    />
+    <ContentWrapper>
+      <CascadeFilterControl
+        dataMaskSelected={dataMaskSelected}
+        data-test="cascade-filters-control"
+        key={filter.id}
+        filter={filter}
+        directPathToChild={visible ? currentPathToChild : undefined}
+        onFilterSelectionChange={onFilterSelectionChange}
+      />
+    </ContentWrapper>
   );
 
   return (
@@ -185,7 +192,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
       onVisibleChange={onVisibleChange}
       placement="rightTop"
       id={filter.id}
-      overlayStyle={{ minWidth: '400px', maxWidth: '600px' }}
+      overlayStyle={{ width: '400px' }}
     >
       <div>
         {activeFilters.map(activeFilter => (

diff --git a/...rontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/...rontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -23,13 +23,6 @@ import FilterValue from './FilterValue';
 import { FilterProps } from './types';
 import { checkIsMissingRequiredValue } from '../utils';
 
-const StyledFormItem = styled(FormItem)`
-  & label {
-    width: 100%;
-    padding-right: ${({ theme }) => theme.gridUnit * 11}px;
-  }
-`;
-
 const StyledIcon = styled.div`
   position: absolute;
   right: 0;
@@ -52,6 +45,11 @@ const StyledFilterControlTitleBox = styled.div`
 
 const StyledFilterControlContainer = styled(Form)`
   width: 100%;
+  & .ant-form-item-label > label {
+    text-transform: none;
+    width: 100%;
+    padding-right: ${({ theme }) => theme.gridUnit * 11}px;
+  }
 `;
 
 const FilterControl: React.FC<FilterProps> = ({
@@ -71,7 +69,7 @@ const FilterControl: React.FC<FilterProps> = ({
 
   return (
     <StyledFilterControlContainer layout="vertical">
-      <StyledFormItem
+      <FormItem
         label={
           <StyledFilterControlTitleBox>
             <StyledFilterControlTitle data-test="filter-control-name">
@@ -90,7 +88,7 @@ const FilterControl: React.FC<FilterProps> = ({
           onFilterSelectionChange={onFilterSelectionChange}
           inView={inView}
         />
-      </StyledFormItem>
+      </FormItem>
     </StyledFilterControlContainer>
   );
 };