feat(dashboard): Implement empty states for empty tabs (#19408)

* feat(dashboard): Implement empty states in empty tabs

* Change button to in text link

* Add edit dashboard button to dashboard empty state

* Add tests

* Fix test

superset-frontend/src/dashboard/components/gridComponents/Tab.jsx

@@ -18,8 +18,12 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@superset-ui/core';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { styled, t } from '@superset-ui/core';
 
+import { EmptyStateMedium } from 'src/components/EmptyState';
+import { setEditMode } from 'src/dashboard/actions/dashboardState';
 import DashboardComponent from '../../containers/DashboardComponent';
 import DragDroppable from '../dnd/DragDroppable';
 import EditableTitle from '../../../components/EditableTitle';
@@ -40,6 +44,7 @@ const propTypes = {
   renderType: PropTypes.oneOf([RENDER_TAB, RENDER_TAB_CONTENT]).isRequired,
   onDropOnTab: PropTypes.func,
   editMode: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   filters: PropTypes.object.isRequired,
 
   // grid related
@@ -53,6 +58,7 @@ const propTypes = {
   handleComponentDrop: PropTypes.func.isRequired,
   updateComponents: PropTypes.func.isRequired,
   setDirectPathToChild: PropTypes.func.isRequired,
+  setEditMode: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -85,7 +91,7 @@ const renderDraggableContentTop = dropProps =>
     <div className="drop-indicator drop-indicator--top" />
   );
 
-export default class Tab extends React.PureComponent {
+class Tab extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleChangeText = this.handleChangeText.bind(this);
@@ -143,8 +149,11 @@ export default class Tab extends React.PureComponent {
       onResizeStop,
       editMode,
       isComponentVisible,
+      canEdit,
+      setEditMode,
     } = this.props;
 
+    const shouldDisplayEmptyState = tabComponent.children.length === 0;
     return (
       <div className="dashboard-component-tabs-content">
         {/* Make top of tab droppable */}
@@ -162,6 +171,43 @@ export default class Tab extends React.PureComponent {
             {renderDraggableContentTop}
           </DragDroppable>
         )}
+        {shouldDisplayEmptyState && (
+          <EmptyStateMedium
+            title={
+              editMode
+                ? t('Drag and drop components to this tab')
+                : t('There are no components added to this tab')
+            }
+            description={
+              canEdit &&
+              (editMode ? (
+                <span>
+                  {t('You can')}{' '}
+                  <a
+                    href="/chart/add"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    {t('create a new chart')}
+                  </a>{' '}
+                  {t('or use existing ones from the panel on the right')}
+                </span>
+              ) : (
+                <span>
+                  {t('You can add the components in the')}{' '}
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setEditMode(true)}
+                  >
+                    {t('edit mode')}
+                  </span>
+                </span>
+              ))
+            }
+            image="chart.svg"
+          />
+        )}
         {tabComponent.children.map((componentId, componentIndex) => (
           <DashboardComponent
             key={componentId}
@@ -262,3 +308,20 @@ export default class Tab extends React.PureComponent {
 
 Tab.propTypes = propTypes;
 Tab.defaultProps = defaultProps;
+
+function mapStateToProps(state) {
+  return {
+    canEdit: state.dashboardInfo.dash_edit_perm,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    {
+      setEditMode,
+    },
+    dispatch,
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Tab);