From eef4699807d34c79a3e987f07b9f81c6a837d8c3 Mon Sep 17 00:00:00 2001
From: Erik Ritter <erik.ritter@airbnb.com>
Date: Fri, 6 Mar 2020 12:35:36 -0800
Subject: [PATCH] fix: small rendering for no results message (#309)

---
 .../src/components/NoResultsComponent.tsx     | 23 ++++++++++++-------
 .../superset-ui-chart/SuperChartStories.tsx   | 10 ++++++++
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/NoResultsComponent.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/NoResultsComponent.tsx
index 8ebbeadea7a1..176ed7e59613 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/NoResultsComponent.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/NoResultsComponent.tsx
@@ -1,8 +1,11 @@
 import React, { CSSProperties, useMemo } from 'react';
 
 const MESSAGE_STYLES: CSSProperties = { maxWidth: 800 };
-const TITLE_STYLES: CSSProperties = { fontSize: 20, fontWeight: 'bold', paddingBottom: 8 };
-const BODY_STYLES: CSSProperties = { fontSize: 16 };
+const TITLE_STYLES: CSSProperties = { fontSize: 16, fontWeight: 'bold', paddingBottom: 8 };
+const BODY_STYLES: CSSProperties = { fontSize: 14 };
+const MIN_WIDTH_FOR_BODY = 250;
+const BODY_STRING =
+  'No results were returned for this query. If you expected results to be returned, ensure any filters are configured properly and the datasource contains data for the selected time range.';
 
 const generateContainerStyles: (
   height: number | string,
@@ -28,15 +31,19 @@ type Props = {
 const NoResultsComponent = ({ className, height, id, width }: Props) => {
   const containerStyles = useMemo(() => generateContainerStyles(height, width), [height, width]);
 
+  // render the body if the width is auto/100% or greater than 250 pixels
+  const shouldRenderBody = typeof width === 'string' || width > MIN_WIDTH_FOR_BODY;
+
   return (
-    <div className={className} id={id} style={containerStyles}>
+    <div
+      className={className}
+      id={id}
+      style={containerStyles}
+      title={shouldRenderBody ? undefined : BODY_STRING}
+    >
       <div style={MESSAGE_STYLES}>
         <div style={TITLE_STYLES}>No Results</div>
-        <div style={BODY_STYLES}>
-          No results were returned for this query. If you expected results to be returned, ensure
-          any filters are configured properly and the datasource contains data for the selected time
-          range.
-        </div>
+        {shouldRenderBody && <div style={BODY_STYLES}>{BODY_STRING}</div>}
       </div>
     </div>
   );
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-chart/SuperChartStories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-chart/SuperChartStories.tsx
index daf017f901aa..f496c09d4020 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-chart/SuperChartStories.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-chart/SuperChartStories.tsx
@@ -157,6 +157,16 @@ export default [
 
       return <SuperChart chartType={ChartKeys.DILIGENT} width={width} height={height} />;
     },
+    storyName: 'With no results and medium',
+    storyPath: '@superset-ui/chart|SuperChart',
+  },
+  {
+    renderStory: () => {
+      const width = text('Vis width', '150');
+      const height = text('Vis height', '200');
+
+      return <SuperChart chartType={ChartKeys.DILIGENT} width={width} height={height} />;
+    },
     storyName: 'With no results and small',
     storyPath: '@superset-ui/chart|SuperChart',
   },