feat: add empty states to sqlab editor and select

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -76,6 +76,7 @@ export const SET_USER_OFFLINE = 'SET_USER_OFFLINE';
 export const RUN_QUERY = 'RUN_QUERY';
 export const START_QUERY = 'START_QUERY';
 export const STOP_QUERY = 'STOP_QUERY';
+export const NO_DB_CONNECTED = 'NO_DB_CONNECTED';
 export const REQUEST_QUERY_RESULTS = 'REQUEST_QUERY_RESULTS';
 export const QUERY_SUCCESS = 'QUERY_SUCCESS';
 export const QUERY_FAILED = 'QUERY_FAILED';
@@ -127,6 +128,10 @@ export function resetState() {
   return { type: RESET_STATE };
 }
 
+export function setNoDatabaseConnected(bool) {
+  return {type: NO_DB_CONNECTED, isConnected: bool }
+}
+
 export function startQueryValidation(query) {
   Object.assign(query, {
     id: query.id ? query.id : shortid.generate(),

superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

@@ -25,6 +25,7 @@ import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import Split from 'react-split';
 import { t, styled, withTheme } from '@superset-ui/core';
+import { isEmpty } from 'lodash';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import StyledModal from 'src/components/Modal';
@@ -75,6 +76,7 @@ import ShareSqlLabQuery from '../ShareSqlLabQuery';
 import SqlEditorLeftBar from '../SqlEditorLeftBar';
 import AceEditorWrapper from '../AceEditorWrapper';
 import RunQueryActionButton from '../RunQueryActionButton';
+import { EmptyStateBig } from 'src/components/EmptyState';
 
 const LIMIT_DROPDOWN = [10, 100, 1000, 10000, 100000];
 const SQL_EDITOR_PADDING = 10;
@@ -740,6 +742,7 @@ class SqlEditor extends React.PureComponent {
     const leftBarStateClass = this.props.hideLeftBar
       ? 'schemaPane-exit-done'
       : 'schemaPane-enter-done';
+    console.log('this.props', this.props.sqlLab.dbConnect)
     return (
       <div ref={this.sqlEditorRef} className="SqlEditor">
         <CSSTransition
@@ -756,7 +759,16 @@ class SqlEditor extends React.PureComponent {
             />
           </div>
         </CSSTransition>
-        {this.queryPane()}
+        {this.props.sqlLab.dbConnect
+          ? 
+          this.queryPane() 
+          : 
+          <EmptyStateBig 
+            image="vector.svg" 
+            title="Select a database to write a query" 
+            description="Choose one of the avaialable database on the left" 
+          />
+        }
         <StyledModal
           visible={this.state.showCreateAsModal}
           title={t(createViewModalTitle)}

superset-frontend/src/SqlLab/reducers/sqlLab.js

@@ -33,6 +33,9 @@ import {
 
 export default function sqlLabReducer(state = {}, action) {
   const actionHandlers = {
+    [actions.NO_DB_CONNECTED]() {
+      return {...state, dbConnect: action.isConnected}
+    },
     [actions.ADD_QUERY_EDITOR]() {
       const tabHistory = state.tabHistory.slice();
       tabHistory.push(action.queryEditor.id);

superset-frontend/src/components/DatabaseSelector/index.tsx

@@ -24,6 +24,9 @@ import Label from 'src/components/Label';
 import { FormLabel } from 'src/components/Form';
 import RefreshLabel from 'src/components/RefreshLabel';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
+import { useDispatch, useSelector } from 'react-redux';
+import { EmptyStateSmall } from '../EmptyState';
+import { setNoDatabaseConnected } from 'src/SqlLab/actions/sqlLab';
 
 const DatabaseSelectorWrapper = styled.div`
   ${({ theme }) => `
@@ -141,6 +144,8 @@ export default function DatabaseSelector({
         }
       : undefined,
   );
+  const dispatch = useDispatch();
+  const dbConnect = useSelector<any, any>(state => state.sqlLab.dbConnect);
   const [currentSchema, setCurrentSchema] = useState<SchemaValue | undefined>(
     schema ? { label: schema, value: schema } : undefined,
   );
@@ -240,6 +245,7 @@ export default function DatabaseSelector({
   ) {
     setCurrentDb(database);
     setCurrentSchema(undefined);
+    dispatch(setNoDatabaseConnected(true));
     if (onDbChange) {
       onDbChange(database);
     }
@@ -263,11 +269,23 @@ export default function DatabaseSelector({
       </div>
     );
   }
+  const p = new Promise(() => null);
 
   function renderDatabaseSelect() {
     return renderSelectRow(
       <Select
         ariaLabel={t('Select database or type database name')}
+        emptyState={
+          <EmptyStateSmall
+            image="empty.svg"
+            title="There are no database available"
+            description={
+              <p>
+                Manage your databse <a href="/databaseview/list">here</a>
+              </p>
+            }
+          />
+        }
         optionFilterProps={['database_name', 'value']}
         data-test="select-database"
         header={<FormLabel>{t('Database')}</FormLabel>}
@@ -283,17 +301,17 @@ export default function DatabaseSelector({
   }
 
   function renderSchemaSelect() {
+    const disabled = dbConnect;
     const refreshIcon = !formMode && !readOnly && (
       <RefreshLabel
         onClick={() => setRefresh(refresh + 1)}
         tooltipContent={t('Force refresh schema list')}
       />
     );
-
     return renderSelectRow(
       <Select
         ariaLabel={t('Select schema or type schema name')}
-        disabled={readOnly}
+        disabled={!disabled || readOnly}
         header={<FormLabel>{t('Schema')}</FormLabel>}
         labelInValue
         lazyLoading={false}

superset-frontend/src/components/Select/Select.tsx

@@ -35,9 +35,9 @@ import AntdSelect, {
   LabeledValue as AntdLabeledValue,
 } from 'antd/lib/select';
 import { DownOutlined, SearchOutlined } from '@ant-design/icons';
+import { Spin } from 'antd';
 import debounce from 'lodash/debounce';
 import { isEqual } from 'lodash';
-import { Spin } from 'antd';
 import Icons from 'src/components/Icons';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import { SLOW_DEBOUNCE } from 'src/constants';
@@ -94,6 +94,10 @@ export interface SelectProps extends PickedSelectProps {
    * Must be plain English and localized.
    */
   ariaLabel: string;
+  /**
+   * Override for empty state.
+   */
+  emptyState?: ReactElement;
   /**
    * It adds a header on top of the Select.
    * Can be any ReactNode.
@@ -614,6 +618,9 @@ const Select = (
     if (isLoading && fullSelectOptions.length === 0) {
       return <StyledLoadingText>{t('Loading...')}</StyledLoadingText>;
     }
+    if (!isLoading && fullSelectOptions.length === 0) {
+      return props.emptyState;
+    }
     return error ? <Error error={error} /> : originNode;
   };