From 89edf8a7a9274f25fd50b03ecdd1c5affc7d01ee Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Thu, 10 Mar 2022 15:54:07 +0100
Subject: [PATCH] fix(dashboard): Empty states overflowing small chart
 containers (#19095)

* fix(dashboard): Empty states overflowing small chart containers

* Fix test

(cherry picked from commit 70081a698fd423ab953d0943fc15ce88c24311ae)
---
 .../src/components/Chart/Chart.jsx            |  6 ++-
 .../src/components/Chart/ChartRenderer.jsx    | 39 ++++++++++++++-----
 .../gridComponents/ChartHolder.test.tsx       |  4 +-
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx
index 734ebb8ce9177..89fdd54546195 100644
--- a/superset-frontend/src/components/Chart/Chart.jsx
+++ b/superset-frontend/src/components/Chart/Chart.jsx
@@ -298,7 +298,11 @@ class Chart extends React.PureComponent {
             className={`slice_container ${isFaded ? ' faded' : ''}`}
             data-test="slice-container"
           >
-            <ChartRenderer {...this.props} data-test={this.props.vizType} />
+            <ChartRenderer
+              {...this.props}
+              source={this.props.dashboardId ? 'dashboard' : 'explore'}
+              data-test={this.props.vizType}
+            />
           </div>
 
           {!isLoading && !chartAlert && isFaded && (
diff --git a/superset-frontend/src/components/Chart/ChartRenderer.jsx b/superset-frontend/src/components/Chart/ChartRenderer.jsx
index a5a20c616a3ea..3c634ea32df8a 100644
--- a/superset-frontend/src/components/Chart/ChartRenderer.jsx
+++ b/superset-frontend/src/components/Chart/ChartRenderer.jsx
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { SuperChart, logging, Behavior, t } from '@superset-ui/core';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
-import { EmptyStateBig } from 'src/components/EmptyState';
+import { EmptyStateBig, EmptyStateSmall } from 'src/components/EmptyState';
 
 const propTypes = {
   annotationData: PropTypes.object,
@@ -48,10 +48,14 @@ const propTypes = {
   onFilterMenuOpen: PropTypes.func,
   onFilterMenuClose: PropTypes.func,
   ownState: PropTypes.object,
+  source: PropTypes.oneOf(['dashboard', 'explore']),
 };
 
 const BLANK = {};
 
+const BIG_NO_RESULT_MIN_WIDTH = 300;
+const BIG_NO_RESULT_MIN_HEIGHT = 220;
+
 const defaultProps = {
   addFilter: () => BLANK,
   onFilterMenuOpen: () => BLANK,
@@ -212,6 +216,29 @@ class ChartRenderer extends React.Component {
           }`
         : '';
 
+    let noResultsComponent;
+    const noResultTitle = t('No results were returned for this query');
+    const noResultDescription =
+      this.props.source === 'explore'
+        ? t(
+            'Make sure that the controls are configured properly and the datasource contains data for the selected time range',
+          )
+        : undefined;
+    const noResultImage = 'chart.svg';
+    if (width > BIG_NO_RESULT_MIN_WIDTH && height > BIG_NO_RESULT_MIN_HEIGHT) {
+      noResultsComponent = (
+        <EmptyStateBig
+          title={noResultTitle}
+          description={noResultDescription}
+          image={noResultImage}
+        />
+      );
+    } else {
+      noResultsComponent = (
+        <EmptyStateSmall title={noResultTitle} image={noResultImage} />
+      );
+    }
+
     return (
       <SuperChart
         disableErrorBoundary
@@ -232,15 +259,7 @@ class ChartRenderer extends React.Component {
         queriesData={queriesResponse}
         onRenderSuccess={this.handleRenderSuccess}
         onRenderFailure={this.handleRenderFailure}
-        noResults={
-          <EmptyStateBig
-            title={t('No results were returned for this query')}
-            description={t(
-              'Make sure that the controls are configured properly and the datasource contains data for the selected time range',
-            )}
-            image="chart.svg"
-          />
-        }
+        noResults={noResultsComponent}
       />
     );
   }
diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx
index 4b2b91041b954..09cd34738e5ee 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx
@@ -86,10 +86,10 @@ describe('ChartHolder', () => {
       screen.getByText('No results were returned for this query'),
     ).toBeVisible();
     expect(
-      screen.getByText(
+      screen.queryByText(
         'Make sure that the controls are configured properly and the datasource contains data for the selected time range',
       ),
-    ).toBeVisible();
+    ).not.toBeInTheDocument(); // description should display only in Explore view
     expect(screen.getByAltText('empty')).toBeVisible();
   });
 });