You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ju...@apache.org on 2023/07/20 17:46:21 UTC
[superset] branch master updated: chore(native filters): Expandable filter config modal (#24559)
This is an automated email from the ASF dual-hosted git repository.
justinpark pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 05e724f3d7 chore(native filters): Expandable filter config modal (#24559)
05e724f3d7 is described below
commit 05e724f3d7ce0b74b264527eab0e04dafcb558a5
Author: JUST.in DO IT <ju...@airbnb.com>
AuthorDate: Thu Jul 20 10:46:13 2023 -0700
chore(native filters): Expandable filter config modal (#24559)
Co-authored-by: Justin Park <ju...@apache.org>
---
.../nativeFilters/FilterCard/FilterCard.test.tsx | 7 --
.../FiltersConfigModal/FilterTitleContainer.tsx | 8 ++-
.../FiltersConfigModal/FiltersConfigModal.tsx | 83 ++++++++++++++++++----
3 files changed, 76 insertions(+), 22 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 93c12a53da..f75612baeb 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 }) =>
- <span role="img" aria-label={fileName.replace('_', '-')} />,
-);
-
// extract text from embedded html tags
// source: https://polvara.me/posts/five-things-you-didnt-know-about-testing-library
const getTextInHTMLTags =
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
index bfae2ce016..5a65fd1d60 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<HTMLDivElement, Props>(
className={classNames.join(' ')}
>
<div css={{ display: 'flex', width: '100%' }}>
- <div css={{ alignItems: 'center', display: 'flex' }}>
+ <div
+ css={{
+ alignItems: 'center',
+ display: 'flex',
+ wordBreak: 'break-all',
+ }}
+ >
{isRemoved ? t('(Removed)') : getFilterTitle(id)}
</div>
{!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 29833af580..26db1c9a97 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,40 @@ import {
} from './utils';
import DividerConfigForm from './DividerConfigForm';
-const StyledModalWrapper = styled(StyledModal)`
- min-width: 700px;
+const MODAL_MARGIN = 16;
+
+const StyledModalWrapper = styled(StyledModal)<{ expanded: boolean }>`
+ 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%;
+ }
+ `}
`;
-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;
@@ -79,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,
@@ -119,6 +150,7 @@ function FiltersConfigModal({
onCancel,
}: FiltersConfigModalProps) {
const dispatch = useDispatch();
+ const theme = useTheme();
const [form] = AntdForm.useForm<NativeFiltersForm>();
@@ -482,6 +514,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) => {
@@ -586,25 +626,40 @@ function FiltersConfigModal({
visible={isOpen}
maskClosable={false}
title={t('Add and edit filters')}
- width="50%"
+ expanded={expanded}
destroyOnClose
onCancel={handleCancel}
onOk={handleSave}
centered
data-test="filter-modal"
footer={
- <Footer
- onDismiss={() => setSaveAlertVisible(false)}
- onCancel={handleCancel}
- handleSave={handleSave}
- canSave={!erroredFilters.length}
- saveAlertVisible={saveAlertVisible}
- onConfirmCancel={handleConfirmCancel}
- />
+ <div
+ css={css`
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ `}
+ >
+ <Footer
+ onDismiss={() => setSaveAlertVisible(false)}
+ onCancel={handleCancel}
+ handleSave={handleSave}
+ canSave={!erroredFilters.length}
+ saveAlertVisible={saveAlertVisible}
+ onConfirmCancel={handleConfirmCancel}
+ />
+ <StyledExpandButtonWrapper>
+ <ToggleIcon
+ iconSize="l"
+ iconColor={theme.colors.grayscale.dark2}
+ onClick={toggleExpand}
+ />
+ </StyledExpandButtonWrapper>
+ </div>
}
>
<ErrorBoundary>
- <StyledModalBody>
+ <StyledModalBody expanded={expanded}>
<StyledForm
form={form}
onValuesChange={handleValuesChange}