From 5d11b16fc73b25ce7b547509929366ff7a0d46e5 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <michael.s.molina@gmail.com>
Date: Mon, 29 Mar 2021 16:19:31 -0300
Subject: [PATCH] Displays row limit warning with Alert component

---
 .../src/SqlLab/components/ResultSet.tsx       | 25 ++++++-------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ResultSet.tsx b/superset-frontend/src/SqlLab/components/ResultSet.tsx
index b326910710e94..29e2551aec4c2 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet.tsx
@@ -27,7 +27,6 @@ import shortid from 'shortid';
 import rison from 'rison';
 import { styled, t, makeApi } from '@superset-ui/core';
 import { debounce } from 'lodash';
-import Icon from 'src/components/Icon';
 import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 import { put as updateDatset } from 'src/api/dataset';
@@ -104,15 +103,6 @@ const MonospaceDiv = styled.div`
 const ReturnedRows = styled.div`
   font-size: 13px;
   line-height: 24px;
-  .returnedRowsImage {
-    color: ${({ theme }) => theme.colors.warning.base};
-    vertical-align: bottom;
-    margin-right: ${({ theme }) => theme.gridUnit * 2}px;
-  }
-  .limitMessage {
-    color: ${({ theme }) => theme.colors.secondary.light1};
-    margin-left: ${({ theme }) => theme.gridUnit * 2}px;
-  }
 `;
 const ResultSetControls = styled.div`
   display: flex;
@@ -514,21 +504,20 @@ export default class ResultSet extends React.PureComponent<
   renderRowsReturned() {
     const { results, rows, queryLimit } = this.props.query;
     const limitReached = results?.displayLimitReached;
-    const limitWarning = <Icon className="returnedRowsImage" name="warning" />;
     return (
       <ReturnedRows>
-        {limitReached && limitWarning}
-        <span>{t(`%s rows returned`, rows)}</span>
+        {!limitReached && <span>{t(`%s rows returned`, rows)}</span>}
         {limitReached && (
-          <span className="limitMessage">
-            {t(
+          <Alert
+            type="warning"
+            message={t(
               `The number of results displayed is limited to %s. Please add
-              additional limits/filters or download to csv to see more rows up to
-              the %s limit.`,
+            additional limits/filters or download to csv to see more rows up to
+            the %s limit.`,
               rows,
               queryLimit,
             )}
-          </span>
+          />
         )}
       </ReturnedRows>
     );