From a67ec9ba4808d3b273edb083654e7e3cd9ab11a9 Mon Sep 17 00:00:00 2001 From: Justin Park Date: Thu, 29 Jun 2023 15:41:23 -0700 Subject: [PATCH 1/5] chore(native filters): Expandable filter config modal --- .../FilterTitleContainer.tsx | 8 ++- .../FiltersConfigModal/FiltersConfigModal.tsx | 49 +++++++++++++++++-- 2 files changed, 51 insertions(+), 6 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx index bfae2ce016887..5a65fd1d60fa6 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx @@ -112,7 +112,13 @@ const FilterTitleContainer = forwardRef( className={classNames.join(' ')} >
-
+
{isRemoved ? t('(Removed)') : getFilterTitle(id)}
{!removedFilters[id] && isErrored && ( diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx index 0abca30a303f2..e325dc3532b37 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx @@ -32,13 +32,17 @@ import { styled, SLOW_DEBOUNCE, t, + css, + useTheme, } from '@superset-ui/core'; import { useDispatch } from 'react-redux'; import { AntdForm } from 'src/components'; +import Icons from 'src/components/Icons'; import ErrorBoundary from 'src/components/ErrorBoundary'; import { StyledModal } from 'src/components/Modal'; import { testWithId } from 'src/utils/testUtils'; import { updateCascadeParentIds } from 'src/dashboard/actions/nativeFilters'; +import useEffectEvent from 'src/hooks/useEffectEvent'; import { useFilterConfigMap, useFilterConfiguration } from '../state'; import FilterConfigurePane from './FilterConfigurePane'; import FiltersConfigForm, { @@ -58,17 +62,25 @@ import { } from './utils'; import DividerConfigForm from './DividerConfigForm'; -const StyledModalWrapper = styled(StyledModal)` +const StyledModalWrapper = styled(StyledModal)<{ expanded: boolean }>` min-width: 700px; .ant-modal-body { padding: 0px; } + ${({ expanded }) => + expanded && + css` + .ant-modal-content { + height: 100%; + } + `} `; -export const StyledModalBody = styled.div` +export const StyledModalBody = styled.div<{ expanded: boolean }>` display: flex; - height: 700px; + height: ${({ expanded }) => (expanded ? '100%' : '700px')}; flex-direction: row; + flex: 1; .filters-list { width: ${({ theme }) => theme.gridUnit * 50}px; overflow: auto; @@ -119,6 +131,7 @@ function FiltersConfigModal({ onCancel, }: FiltersConfigModalProps) { const dispatch = useDispatch(); + const theme = useTheme(); const [form] = AntdForm.useForm(); @@ -477,6 +490,14 @@ function FiltersConfigModal({ [buildDependencyMap, canBeUsedAsDependency, orderedFilters], ); + const [expanded, setExpanded] = useState(false); + const toggleExpand = useEffectEvent(() => { + setExpanded(!expanded); + }); + const ToggleIcon = expanded + ? Icons.FullscreenExitOutlined + : Icons.FullscreenOutlined; + const handleValuesChange = useMemo( () => debounce((changes: any, values: NativeFiltersForm) => { @@ -580,8 +601,26 @@ function FiltersConfigModal({ +
{t('Add and edit filters')}
+ +
+ } width="50%" + {...(expanded && { width: '100%', height: '100%' })} + expanded={expanded} destroyOnClose onCancel={handleCancel} onOk={handleSave} @@ -599,7 +638,7 @@ function FiltersConfigModal({ } > - + Date: Thu, 29 Jun 2023 15:55:54 -0700 Subject: [PATCH 2/5] increase default width to 70% --- .../nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx index e325dc3532b37..e02a57c28e279 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx @@ -618,7 +618,7 @@ function FiltersConfigModal({ />
} - width="50%" + width="70%" {...(expanded && { width: '100%', height: '100%' })} expanded={expanded} destroyOnClose From acca3e16353f59809b8c7f34c4bfed2a8c477d2a Mon Sep 17 00:00:00 2001 From: Justin Park Date: Wed, 5 Jul 2023 10:22:39 -0700 Subject: [PATCH 3/5] remove icon mock --- .../nativeFilters/FilterCard/FilterCard.test.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx index 93c12a53daf53..f75612baeb10f 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx @@ -205,13 +205,6 @@ jest.mock('@superset-ui/core', () => ({ }), })); -jest.mock( - 'src/components/Icons/Icon', - () => - ({ fileName }: { fileName: string }) => - , -); - // extract text from embedded html tags // source: https://polvara.me/posts/five-things-you-didnt-know-about-testing-library const getTextInHTMLTags = From 35c4a9c1a49e9f118254b8b0ec79e8cfa05214aa Mon Sep 17 00:00:00 2001 From: Justin Park Date: Wed, 5 Jul 2023 13:21:29 -0700 Subject: [PATCH 4/5] replace width by styled component --- .../nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx index e02a57c28e279..8439d42f070e3 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx @@ -64,12 +64,15 @@ import DividerConfigForm from './DividerConfigForm'; const StyledModalWrapper = styled(StyledModal)<{ expanded: boolean }>` min-width: 700px; + width: ${({ expanded }) => (expanded ? '100% !important' : '70%')}; + .ant-modal-body { padding: 0px; } ${({ expanded }) => expanded && css` + height: 100%; .ant-modal-content { height: 100%; } @@ -618,8 +621,6 @@ function FiltersConfigModal({ /> } - width="70%" - {...(expanded && { width: '100%', height: '100%' })} expanded={expanded} destroyOnClose onCancel={handleCancel} From 6516328abc627ade53bea39397dbcc93cf115c7a Mon Sep 17 00:00:00 2001 From: justinpark Date: Wed, 12 Jul 2023 13:34:56 -0700 Subject: [PATCH 5/5] update the expand icon location and adjust default width to 880px --- .../FiltersConfigModal/FiltersConfigModal.tsx | 67 ++++++++++++------- 1 file changed, 41 insertions(+), 26 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx index 8439d42f070e3..c6eec098c155c 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx @@ -62,17 +62,29 @@ import { } from './utils'; import DividerConfigForm from './DividerConfigForm'; +const MODAL_MARGIN = 16; + const StyledModalWrapper = styled(StyledModal)<{ expanded: boolean }>` - min-width: 700px; - width: ${({ expanded }) => (expanded ? '100% !important' : '70%')}; + min-width: 880px; + width: ${({ expanded }) => (expanded ? '100%' : '70%')} !important; + + @media (max-width: ${880 + MODAL_MARGIN * 2}px) { + width: 100% !important; + min-width: auto; + } .ant-modal-body { padding: 0px; } + ${({ expanded }) => expanded && css` height: 100%; + + .ant-modal-body { + flex: 1 1 auto; + } .ant-modal-content { height: 100%; } @@ -94,6 +106,10 @@ export const StyledForm = styled(AntdForm)` width: 100%; `; +export const StyledExpandButtonWrapper = styled.div` + margin-left: ${({ theme }) => theme.gridUnit * 4}px; +`; + export const FILTERS_CONFIG_MODAL_TEST_ID = 'filters-config-modal'; export const getFiltersConfigModalTestId = testWithId( FILTERS_CONFIG_MODAL_TEST_ID, @@ -604,39 +620,38 @@ function FiltersConfigModal({ -
{t('Add and edit filters')}
- setSaveAlertVisible(false)} + onCancel={handleCancel} + handleSave={handleSave} + canSave={!erroredFilters.length} + saveAlertVisible={saveAlertVisible} + onConfirmCancel={handleConfirmCancel} /> + + + } - expanded={expanded} - destroyOnClose - onCancel={handleCancel} - onOk={handleSave} - centered - data-test="filter-modal" - footer={ -