[superset] branch master updated: fix(dashboard): Empty states overflowing small chart containers (#19095)

[kg...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 70081a6  fix(dashboard): Empty states overflowing small chart containers (#19095)
70081a6 is described below

commit 70081a698fd423ab953d0943fc15ce88c24311ae
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Thu Mar 10 15:54:07 2022 +0100

    fix(dashboard): Empty states overflowing small chart containers (#19095)
    
    * fix(dashboard): Empty states overflowing small chart containers
    
    * Fix test
---
 superset-frontend/src/components/Chart/Chart.jsx   |  6 +++-
 .../src/components/Chart/ChartRenderer.jsx         | 39 ++++++++++++++++------
 .../components/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 734ebb8..89fdd54 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 a5a20c6..3c634ea 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 4b2b910..09cd347 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();
   });
 });