feat(explore): Add empty state to annotations (#20160)

* feat(explore): Add empty state to annotations

* Set line height for small empty state description

* Simplify code

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;
   `}
 `;
 

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 = () => (
+  <NotFoundContentWrapper>
+    <EmptyStateSmall
+      title={t('No annotation layers')}
+      description={
+        <span>
+          {t('Add an annotation layer')}{' '}
+          <a
+            href="/annotationlayermodelview/list"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t('here')}
+          </a>
+          .
+        </span>
+      }
+      image="empty.svg"
+    />
+  </NotFoundContentWrapper>
+);
+
 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={<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={<NotFoundContent />}
                   value={sourceType}
                   onChange={this.handleAnnotationSourceType}
                   validationErrors={!sourceType ? [t('Mandatory')] : []}

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 (