take 1

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>
   );

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%',

superset/config.py

@@ -1408,7 +1408,7 @@ def EMAIL_HEADER_MUTATOR(  # pylint: disable=invalid-name,unused-argument
 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'",