This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch split-button-to-add-filters in repository https://gitbox.apache.org/repos/asf/superset.git
commit e1b6ee514ef565a724d16bb48887809d25ed3e3a Author: Evan Rusackas <[email protected]> AuthorDate: Thu Aug 10 10:51:01 2023 -0600 take 1 --- .../FiltersConfigModal/DraggableFilter.tsx | 5 +++ .../FiltersConfigModal/FilterTitlePane.tsx | 44 +++++++++++----------- superset/config.py | 2 +- 3 files changed, 28 insertions(+), 23 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx index 556e3ed32d..1fdd2328a9 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx @@ -130,6 +130,10 @@ export const DraggableFilter: React.FC<FilterTabTitleProps> = ({ }, }); drag(drop(ref)); + + //this is gross... we should pass in the filter/divider type, rather than inferring from the generated ID. + const filterIcon = filterIds[0].split('-')[0] == "NATIVE_FILTER" ? <Icons.FilterSmall /> : <Icons.BorderVerticleOutlined />; + return ( <Container ref={ref} isDragging={isDragging}> <DragIcon @@ -138,6 +142,7 @@ export const DraggableFilter: React.FC<FilterTabTitleProps> = ({ className="dragIcon" viewBox="4 4 16 16" /> + {filterIcon} <div css={{ flex: 1 }}>{children}</div> </Container> ); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx index a080d35645..dd978d3495 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx @@ -18,8 +18,10 @@ */ import React, { useRef } from 'react'; import { NativeFilterType, styled, t, useTheme } from '@superset-ui/core'; -import { AntdDropdown } from 'src/components'; -import { MainNav as Menu } from 'src/components/Menu'; +import { DropdownButton } from 'src/components/DropdownButton'; +import { DropdownButtonProps } from 'antd/lib/dropdown'; +import Icons from 'src/components/Icons'; +import { MainNav } from 'src/components/Menu'; import FilterTitleContainer from './FilterTitleContainer'; import { FilterRemoval } from './types'; @@ -52,11 +54,6 @@ const TabsContainer = styled.div` flex-direction: column; `; -const options = [ - { label: t('Filter'), type: NativeFilterType.NATIVE_FILTER }, - { label: t('Divider'), type: NativeFilterType.DIVIDER }, -]; - const FilterTitlePane: React.FC<Props> = ({ getFilterTitle, onChange, @@ -88,27 +85,30 @@ const FilterTitlePane: React.FC<Props> = ({ }, 0); }; const menu = ( - <Menu mode="horizontal"> - {options.map(item => ( - <Menu.Item onClick={() => handleOnAdd(item.type)}> - {item.label} - </Menu.Item> - ))} - </Menu> + <MainNav mode="horizontal"> + <MainNav.Item onClick={() => handleOnAdd(NativeFilterType.DIVIDER)}> + {t('Add Divider')} + </MainNav.Item> + </MainNav> ); + + const StyledDropdownButton = styled( + DropdownButton as React.FC<DropdownButtonProps>, + )` + padding: ${theme.gridUnit * 2}px ${theme.gridUnit * 4}px; + `; + return ( <TabsContainer> - <AntdDropdown + <StyledDropdownButton overlay={menu} - arrow placement="topLeft" - trigger={['hover']} + icon={<Icons.CaretDown />} > - <StyledAddBox> - <div data-test="new-dropdown-icon" className="fa fa-plus" />{' '} - <span>{t('Add filters and dividers')}</span> - </StyledAddBox> - </AntdDropdown> + <span onClick={() => handleOnAdd(NativeFilterType.NATIVE_FILTER)}> + {t('Add Filter')} + </span> + </StyledDropdownButton> <div css={{ height: '100%', diff --git a/superset/config.py b/superset/config.py index 75fda6eb37..538bd1bf91 100644 --- a/superset/config.py +++ b/superset/config.py @@ -1408,7 +1408,7 @@ TALISMAN_CONFIG = { TALISMAN_DEV_CONFIG = { "content_security_policy": { "default-src": ["'self'"], - "img-src": ["'self'", "data:"], + "img-src": ["'self'", "data:", "upload.wikimedia.org"], "worker-src": ["'self'", "blob:"], "connect-src": [ "'self'",
