diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx index 7ba54567e43..7ee69d7eea5 100644 --- a/superset-frontend/src/components/EmptyState/index.tsx +++ b/superset-frontend/src/components/EmptyState/index.tsx @@ -106,6 +106,7 @@ const BigDescription = styled(Description)` const SmallDescription = styled(Description)` ${({ theme }) => css` margin-top: ${theme.gridUnit}px; + line-height: 1.2; `} `; diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx index 973fabaccf8..8df36c1291a 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx @@ -27,6 +27,7 @@ import { getChartMetadataRegistry, validateNonEmpty, isValidExpression, + styled, withTheme, } from '@superset-ui/core'; @@ -43,6 +44,7 @@ import { } from 'src/modules/AnnotationTypes'; import PopoverSection from 'src/components/PopoverSection'; import ControlHeader from 'src/explore/components/ControlHeader'; +import { EmptyStateSmall } from 'src/components/EmptyState'; const AUTOMATIC_COLOR = ''; @@ -98,6 +100,35 @@ const defaultProps = { close: () => {}, }; +const NotFoundContentWrapper = styled.div` + && > div:first-child { + padding-left: 0; + padding-right: 0; + } +`; + +const NotFoundContent = () => ( + + + {t('Add an annotation layer')}{' '} + + {t('here')} + + . + + } + image="empty.svg" + /> + +); + class AnnotationLayer extends React.PureComponent { constructor(props) { super(props); @@ -416,6 +447,7 @@ class AnnotationLayer extends React.PureComponent { onChange={this.handleValue} validationErrors={!value ? ['Mandatory'] : []} optionRenderer={this.renderOption} + notFoundContent={} /> ); } @@ -760,9 +792,10 @@ class AnnotationLayer extends React.PureComponent { ariaLabel={t('Annotation source type')} hovered description={t('Choose the source of your annotations')} - label={t('Annotation Source')} + label={t('Annotation source')} name="annotation-source-type" options={supportedSourceTypes} + notFoundContent={} value={sourceType} onChange={this.handleAnnotationSourceType} validationErrors={!sourceType ? [t('Mandatory')] : []} diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx index 53b7440cb4b..59141458a46 100644 --- a/superset-frontend/src/explore/components/controls/SelectControl.jsx +++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx @@ -53,6 +53,7 @@ const propTypes = { placeholder: PropTypes.string, filterOption: PropTypes.func, tokenSeparators: PropTypes.arrayOf(PropTypes.string), + notFoundContent: PropTypes.object, // ControlHeader props label: PropTypes.string, @@ -179,6 +180,7 @@ export default class SelectControl extends React.PureComponent { showHeader, value, tokenSeparators, + notFoundContent, // ControlHeader props description, renderTrigger, @@ -245,6 +247,7 @@ export default class SelectControl extends React.PureComponent { sortComparator: this.props.sortComparator, value: getValue(), tokenSeparators, + notFoundContent, }; return (