chore(native filters): Expandable filter config modal (#24559)

Co-authored-by: Justin Park <justinpark@apache.org>
apache · Jul 20, 2023 · 05e724f · 05e724f
1 parent 317aa98
commit 05e724f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 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
@@ -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/...ontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx b/...ontend/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/...frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/...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}