Revert "feat(sqllab): Show sql in the current result (apache#24787)"

This reverts commit 2d4de51.
preset-io · Sep 18, 2023 · 2ddaf91 · 2ddaf91
1 parent 411d9cf
commit 2ddaf91
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 77 deletions.
diff --git a/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx b/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
@@ -25,7 +25,7 @@ import ModalTrigger from 'src/components/ModalTrigger';
 
 SyntaxHighlighter.registerLanguage('sql', sql);
 
-export interface HighlightedSqlProps {
+interface HighlightedSqlProps {
   sql: string;
   rawSql?: string;
   maxWidth?: number;

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -27,11 +27,8 @@ import {
   QueryState,
   styled,
   t,
-  tn,
   useTheme,
   usePrevious,
-  css,
-  getNumberFormatter,
 } from '@superset-ui/core';
 import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
 import {
@@ -45,9 +42,6 @@ import { mountExploreUrl } from 'src/explore/exploreUtils';
 import { postFormData } from 'src/explore/exploreUtils/formData';
 import ProgressBar from 'src/components/ProgressBar';
 import Loading from 'src/components/Loading';
-import Card from 'src/components/Card';
-import Label from 'src/components/Label';
-import { Tooltip } from 'src/components/Tooltip';
 import FilterableTable from 'src/components/FilterableTable';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
@@ -61,7 +55,6 @@ import {
   reRunQuery,
 } from 'src/SqlLab/actions/sqlLab';
 import { URL_PARAMS } from 'src/constants';
-import Icons from 'src/components/Icons';
 import ExploreCtasResultsButton from '../ExploreCtasResultsButton';
 import ExploreResultsButton from '../ExploreResultsButton';
 import HighlightedSql from '../HighlightedSql';
@@ -83,7 +76,6 @@ export interface ResultSetProps {
   query: QueryResponse;
   search?: boolean;
   showSql?: boolean;
-  showSqlInline?: boolean;
   visualize?: boolean;
   user: UserWithPermissionsAndRoles;
   defaultQueryLimit: number;
@@ -118,7 +110,7 @@ const MonospaceDiv = styled.div`
 
 const ReturnedRows = styled.div`
   font-size: ${({ theme }) => theme.typography.sizes.s}px;
-  line-height: 1;
+  line-height: ${({ theme }) => theme.gridUnit * 6}px;
 `;
 
 const ResultSetControls = styled.div`
@@ -132,8 +124,10 @@ const ResultSetButtons = styled.div`
   padding-right: ${({ theme }) => 2 * theme.gridUnit}px;
 `;
 
-const ROWS_CHIP_WIDTH = 100;
-const GAP = 8;
+const LimitMessage = styled.span`
+  color: ${({ theme }) => theme.colors.secondary.light1};
+  margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+`;
 
 const ResultSet = ({
   cache = false,
@@ -144,7 +138,6 @@ const ResultSet = ({
   query,
   search = true,
   showSql = false,
-  showSqlInline = false,
   visualize = true,
   user,
   defaultQueryLimit,
@@ -303,7 +296,7 @@ const ResultSet = ({
 
   const renderRowsReturned = () => {
     const { results, rows, queryLimit, limitingFactor } = query;
-    let limitMessage = '';
+    let limitMessage;
     const limitReached = results?.displayLimitReached;
     const limit = queryLimit || results.query.limit;
     const isAdmin = !!user?.roles?.Admin;
@@ -346,7 +339,7 @@ const ResultSet = ({
         { rows },
       );
     }
-    const formattedRowCount = getNumberFormatter()(rows);
+
     const rowsReturnedMessage = t('%(rows)d rows returned', {
       rows,
     });
@@ -356,27 +349,10 @@ const ResultSet = ({
     return (
       <ReturnedRows>
         {!limitReached && !shouldUseDefaultDropdownAlert && (
-          <Tooltip
-            id="sqllab-rowcount-tooltip"
-            title={tooltipText}
-            placement="left"
-          >
-            <Label
-              css={css`
-                line-height: ${theme.typography.sizes.l}px;
-              `}
-            >
-              {limitMessage && (
-                <Icons.ExclamationCircleOutlined
-                  css={css`
-                    font-size: ${theme.typography.sizes.m}px;
-                    margin-right: ${theme.gridUnit}px;
-                  `}
-                />
-              )}
-              {tn('%s row', '%s rows', rows, formattedRowCount)}
-            </Label>
-          </Tooltip>
+          <span title={tooltipText}>
+            {rowsReturnedMessage}
+            <LimitMessage>{limitMessage}</LimitMessage>
+          </span>
         )}
         {!limitReached && shouldUseDefaultDropdownAlert && (
           <div ref={calculateAlertRefHeight}>
@@ -437,12 +413,7 @@ const ResultSet = ({
   }
 
   if (showSql) {
-    sql = (
-      <HighlightedSql
-        sql={query.sql}
-        {...(showSqlInline && { maxLines: 1, maxWidth: 60 })}
-      />
-    );
+    sql = <HighlightedSql sql={query.sql} />;
   }
 
   if (query.state === QueryState.STOPPED) {
@@ -530,39 +501,8 @@ const ResultSet = ({
       return (
         <ResultContainer>
           {renderControls()}
-          {showSql && showSqlInline ? (
-            <div
-              css={css`
-                display: flex;
-                justify-content: space-between;
-                gap: ${GAP}px;
-              `}
-            >
-              <Card
-                css={[
-                  css`
-                    height: 28px;
-                    width: calc(100% - ${ROWS_CHIP_WIDTH + GAP}px);
-                    code {
-                      width: 100%;
-                      overflow: hidden;
-                      white-space: nowrap !important;
-                      text-overflow: ellipsis;
-                      display: block;
-                    }
-                  `,
-                ]}
-              >
-                {sql}
-              </Card>
-              {renderRowsReturned()}
-            </div>
-          ) : (
-            <>
-              {renderRowsReturned()}
-              {sql}
-            </>
-          )}
+          {renderRowsReturned()}
+          {sql}
           <FilterableTable
             data={data}
             orderedColumnKeys={results.columns.map(col => col.column_name)}

diff --git a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
@@ -189,8 +189,6 @@ const SouthPane = ({
             database={databases[latestQuery.dbId]}
             displayLimit={displayLimit}
             defaultQueryLimit={defaultQueryLimit}
-            showSql
-            showSqlInline
           />
         );
       }