fix(sql Lab tabs): Empty SQL Lab tabs (#18817)

* Empty SQL table message on zero tabs

* sql editor no editor tab bug fix

* Revert Error message

* empty state tab state

* added a unit test

* addressed reviews

* kasia feedback

Co-authored-by: Yahya Kayani <[email protected]>
(cherry picked from commit 147dc5a)

superset-frontend/src/SqlLab/components/TabbedSqlEditors/TabbedSqlEditors.test.jsx

@@ -79,6 +79,7 @@ describe('TabbedSqlEditors', () => {
     defaultQueryLimit: 1000,
     maxRow: 100000,
   };
+
   const getWrapper = () =>
     shallow(<TabbedSqlEditors store={store} {...mockedProps} />)
       .dive()
@@ -227,4 +228,10 @@ describe('TabbedSqlEditors', () => {
     wrapper.setProps({ offline: true });
     expect(wrapper.find(EditableTabs).props().hideAdd).toBe(true);
   });
+  it('should have an empty state when query editors is empty', () => {
+    wrapper = getWrapper();
+    wrapper.setProps({ queryEditors: [] });
+    const firstTab = wrapper.find(EditableTabs.TabPane).first();
+    expect(firstTab.props()['data-key']).toBe(0);
+  });
 });

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

@@ -30,6 +30,7 @@ import { areArraysShallowEqual } from 'src/reduxUtils';
 import { Tooltip } from 'src/components/Tooltip';
 import { detectOS } from 'src/utils/common';
 import * as Actions from 'src/SqlLab/actions/sqlLab';
+import { EmptyStateBig } from 'src/components/EmptyState';
 import SqlEditor from '../SqlEditor';
 import TabStatusIcon from '../TabStatusIcon';
 
@@ -64,6 +65,10 @@ const TabTitleWrapper = styled.div`
   align-items: center;
 `;
 
+const StyledTab = styled.span`
+  line-height: 24px;
+`;
+
 const TabTitle = styled.span`
   margin-right: ${({ theme }) => theme.gridUnit * 2}px;
   text-transform: none;
@@ -314,6 +319,7 @@ class TabbedSqlEditors extends React.PureComponent {
   }
 
   render() {
+    const noQueryEditors = this.props.queryEditors?.length === 0;
     const editors = this.props.queryEditors.map(qe => {
       let latestQuery;
       if (qe.latestQueryId) {
@@ -401,6 +407,37 @@ class TabbedSqlEditors extends React.PureComponent {
       );
     });
 
+    const emptyTab = (
+      <StyledTab>
+        <TabTitle>{t('Add a new tab')}</TabTitle>
+        <Tooltip
+          id="add-tab"
+          placement="bottom"
+          title={
+            userOS === 'Windows'
+              ? t('New tab (Ctrl + q)')
+              : t('New tab (Ctrl + t)')
+          }
+        >
+          <i data-test="add-tab-icon" className="fa fa-plus-circle" />
+        </Tooltip>
+      </StyledTab>
+    );
+
+    const emptyTabState = (
+      <EditableTabs.TabPane
+        key={0}
+        data-key={0}
+        tab={emptyTab}
+        closable={false}
+      >
+        <EmptyStateBig
+          image="empty_sql_chart.svg"
+          description={t('Add a new tab to create SQL Query')}
+        />
+      </EditableTabs.TabPane>
+    );
+
     return (
       <EditableTabs
         destroyInactiveTabPane
@@ -411,7 +448,9 @@ class TabbedSqlEditors extends React.PureComponent {
         onChange={this.handleSelect}
         fullWidth={false}
         hideAdd={this.props.offline}
+        onTabClick={() => noQueryEditors && this.newQueryEditor()}
         onEdit={this.handleEdit}
+        type={noQueryEditors ? 'card' : 'editable-card'}
         addIcon={
           <Tooltip
             id="add-tab"
@@ -427,6 +466,7 @@ class TabbedSqlEditors extends React.PureComponent {
         }
       >
         {editors}
+        {noQueryEditors && emptyTabState}
       </EditableTabs>
     );
   }

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

@@ -358,7 +358,7 @@ export default function sqlLabReducer(state = {}, action) {
     [actions.SET_ACTIVE_QUERY_EDITOR]() {
       const qeIds = state.queryEditors.map(qe => qe.id);
       if (
-        qeIds.indexOf(action.queryEditor.id) > -1 &&
+        qeIds.indexOf(action.queryEditor?.id) > -1 &&
         state.tabHistory[state.tabHistory.length - 1] !== action.queryEditor.id
       ) {
         const tabHistory = state.tabHistory.slice();