feat: Better return messages in SQL Editor (apache#14381)

* Sqllab limit

* Add migration script

* Set default values

* initial push

* revisions

* moving migration to separate PR

* revisions

* Fix apply_limit_to_sql

* all but tests

* added unit tests

* result set

* first draft

* revisions

* made user required prop, added it to all places ResultSet is imported

* changed QueryTable test to allow for useSelector

* Query Table working

* working with heights

* fixed scrolling

* got rid of animated

* fixed tests, revisions

* revisions

* revisions

* heights

* fun with heights

* alert state

* aaron helped me fix this

* better alert messages

* fixed result set test

Co-authored-by: Beto Dealmeida <roberto@dealmeida.net>

superset-frontend/spec/javascripts/sqllab/QuerySearch_spec.jsx

@@ -26,9 +26,12 @@ import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { fireEvent, render, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import userEvent from '@testing-library/user-event';
+import { user } from './fixtures';
 
 const mockStore = configureStore([thunk]);
-const store = mockStore({});
+const store = mockStore({
+  sqlLab: user,
+});
 
 const SEARCH_ENDPOINT = 'glob:*/superset/search_queries?*';
 const USER_ENDPOINT = 'glob:*/api/v1/query/related/user';

superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx

@@ -17,11 +17,14 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+import { styledMount as mount } from 'spec/helpers/theming';
 import QueryTable from 'src/SqlLab/components/QueryTable';
 import TableView from 'src/components/TableView';
 import { TableCollection } from 'src/components/dataViewCommon';
-import { queries } from './fixtures';
+import { Provider } from 'react-redux';
+import { queries, user } from './fixtures';
 
 describe('QueryTable', () => {
   const mockedProps = {
@@ -35,12 +38,18 @@ describe('QueryTable', () => {
     expect(React.isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
   });
   it('renders a proper table', () => {
-    const wrapper = shallow(<QueryTable {...mockedProps} />);
-    const tableWrapper = wrapper
-      .find(TableView)
-      .shallow()
-      .find(TableCollection)
-      .shallow();
+    const mockStore = configureStore([thunk]);
+    const store = mockStore({
+      sqlLab: user,
+    });
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <QueryTable {...mockedProps} />
+      </Provider>,
+    );
+    const tableWrapper = wrapper.find(TableView).find(TableCollection);
+
     expect(wrapper.find(TableView)).toExist();
     expect(tableWrapper.find('table')).toExist();
     expect(tableWrapper.find('table').find('thead').find('tr')).toHaveLength(1);

superset-frontend/spec/javascripts/sqllab/ResultSet_spec.jsx

@@ -37,6 +37,7 @@ import {
   runningQuery,
   stoppedQuery,
   initialState,
+  user,
 } from './fixtures';
 
 const mockStore = configureStore([thunk]);
@@ -54,8 +55,10 @@ describe('ResultSet', () => {
     },
     cache: true,
     query: queries[0],
-    height: 0,
+    height: 140,
     database: { allows_virtual_table_explore: true },
+    user,
+    defaultQueryLimit: 1000,
   };
   const stoppedQueryProps = { ...mockedProps, query: stoppedQuery };
   const runningQueryProps = { ...mockedProps, query: runningQuery };

superset-frontend/spec/javascripts/sqllab/fixtures.ts

@@ -208,6 +208,7 @@ export const queries = [
     executedSql: null,
     changed_on: '2016-10-19T20:56:06',
     rows: 42,
+    queryLimit: 100,
     endDttm: 1476910566798,
     limit_reached: false,
     schema: 'test_schema',
@@ -461,6 +462,18 @@ export const runningQuery = {
 };
 export const cachedQuery = { ...queries[0], cached: true };
 
+export const user = {
+  createdOn: '2021-04-27T18:12:38.952304',
+  email: 'admin',
+  firstName: 'admin',
+  isActive: true,
+  lastName: 'admin',
+  permissions: {},
+  roles: { Admin: Array(173) },
+  userId: 1,
+  username: 'admin',
+};
+
 export const initialState = {
   sqlLab: {
     offline: false,
@@ -473,6 +486,7 @@ export const initialState = {
     workspaceQueries: [],
     queriesLastUpdate: 0,
     activeSouthPaneTab: 'Results',
+    user: { user },
   },
   messageToasts: [],
   common: {

superset-frontend/src/SqlLab/components/QueryTable.jsx

@@ -22,8 +22,8 @@ import moment from 'moment';
 import Card from 'src/components/Card';
 import ProgressBar from 'src/components/ProgressBar';
 import Label from 'src/components/Label';
-import { t } from '@superset-ui/core';
-
+import { t, css } from '@superset-ui/core';
+import { useSelector } from 'react-redux';
 import TableView from 'src/components/TableView';
 import Button from 'src/components/Button';
 import { fDuration } from 'src/modules/dates';
@@ -53,6 +53,10 @@ const openQuery = id => {
   window.open(url);
 };
 
+const StaticPosition = css`
+  position: static;
+`;
+
 const QueryTable = props => {
   const columns = useMemo(
     () =>
@@ -64,6 +68,8 @@ const QueryTable = props => {
     [props.columns],
   );
 
+  const user = useSelector(({ sqlLab: { user } }) => user);
+
   const data = useMemo(() => {
     const restoreSql = query => {
       props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
@@ -129,7 +135,7 @@ const QueryTable = props => {
           </Button>
         );
         q.sql = (
-          <Card>
+          <Card css={[StaticPosition]}>
             <HighlightedSql
               sql={q.sql}
               rawSql={q.executedSql}
@@ -153,6 +159,7 @@ const QueryTable = props => {
               modalBody={
                 <ResultSet
                   showSql
+                  user={user}
                   query={query}
                   actions={props.actions}
                   height={400}