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 <yahyakiani1@gmail.com>

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();

superset-frontend/src/assets/images/empty_sql_chart.svg

@@ -0,0 +1,22 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<svg width="196" height="152" viewBox="0 0 196 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M193.652 1.5C193.652 1.22386 193.428 1 193.152 1L52.3477 1V30.3478L193.152 30.3478C193.428 30.3478 193.652 30.124 193.652 29.8478V1.5ZM41.4781 1.5C41.4781 1.22386 41.2543 1 40.9781 1L1.26074 1V30.3478L40.9781 30.3478C41.2543 30.3478 41.4781 30.124 41.4781 29.8478V1.5ZM193.652 122.152C193.652 121.876 193.428 121.652 193.152 121.652H153.435V151H193.152C193.428 151 193.652 150.776 193.652 150.5V122.152ZM40.9781 81.4348C41.2543 81.4348 41.4781 81.6586 41.4781 81.9348V110.283C41.4781 110.559 41.2543 110.783 40.9781 110.783H1.26074V81.4348H40.9781ZM116.478 81.9348C116.478 81.6586 116.254 81.4348 115.978 81.4348H52.3477V110.783H115.978C116.254 110.783 116.478 110.559 116.478 110.283V81.9348ZM193.761 81C194.037 81 194.261 81.2239 194.261 81.5V110.5C194.261 110.776 194.037 111 193.761 111H127.261V81H193.761ZM142.065 121.652C142.341 121.652 142.565 121.876 142.565 122.152V150.5C142.565 150.776 142.341 151 142.065 151L1.26074 151V121.652L142.065 121.652ZM194.739 41.7174C194.739 41.4413 194.515 41.2174 194.239 41.2174L1.26074 41.2174V70.5652L194.239 70.5652C194.515 70.5652 194.739 70.3414 194.739 70.0652V41.7174Z" fill="#F7F7F7"/>
+<path d="M193.152 1V0.500004V1ZM52.3477 1V0.5H51.8477V1H52.3477ZM52.3477 30.3478H51.8477V30.8478H52.3477V30.3478ZM193.152 30.3478V30.8478V30.3478ZM40.9781 1V1.5V1ZM1.26074 1L1.26074 0.500003L0.760742 0.500003V1H1.26074ZM1.26074 30.3478H0.760742V30.8478H1.26074L1.26074 30.3478ZM40.9781 30.3478V30.8478V30.3478ZM153.435 121.652V121.152H152.935V121.652H153.435ZM153.435 151H152.935V151.5H153.435V151ZM1.26074 110.783H0.760742V111.283H1.26074V110.783ZM1.26074 81.4348V80.9348H0.760742V81.4348H1.26074ZM52.3477 81.4348V80.9348H51.8477V81.4348H52.3477ZM52.3477 110.783H51.8477V111.283H52.3477V110.783ZM127.261 111H126.761V111.5H127.261V111ZM127.261 81V80.5H126.761V81H127.261ZM142.065 121.652V122.152V121.652ZM142.065 151V151.5V151ZM1.26074 151H0.760742V151.5H1.26074L1.26074 151ZM1.26074 121.652L1.26074 121.152H0.760742V121.652H1.26074ZM194.239 41.2174V41.7174V41.2174ZM1.26074 41.2174L1.26074 40.7174H0.760742V41.2174H1.26074ZM1.26074 70.5652H0.760742V71.0652H1.26074L1.26074 70.5652ZM194.239 70.5652V71.0652V70.5652ZM193.152 1.5V1.5H194.152C194.152 0.947717 193.704 0.500004 193.152 0.500004V1.5ZM52.3477 1.5L193.152 1.5V0.500004L52.3477 0.5V1.5ZM52.8477 30.3478V1H51.8477V30.3478H52.8477ZM193.152 29.8478L52.3477 29.8478V30.8478L193.152 30.8478V29.8478ZM193.152 29.8478V30.8478C193.704 30.8478 194.152 30.4001 194.152 29.8478H193.152ZM193.152 1.5V29.8478H194.152V1.5H193.152ZM40.9781 1.5H41.9781C41.9781 0.947719 41.5304 0.500004 40.9781 0.500004V1.5ZM1.26074 1.5L40.9781 1.5V0.500004L1.26074 0.500003L1.26074 1.5ZM1.76074 30.3478V1H0.760742V30.3478H1.76074ZM40.9781 29.8478L1.26074 29.8478L1.26074 30.8478L40.9781 30.8478V29.8478ZM40.9781 29.8478V30.8478C41.5304 30.8478 41.9781 30.4001 41.9781 29.8478H40.9781ZM40.9781 1.5V29.8478H41.9781V1.5H40.9781ZM193.152 122.152H194.152C194.152 121.6 193.704 121.152 193.152 121.152V122.152ZM153.435 122.152H193.152V121.152H153.435V122.152ZM153.935 151V121.652H152.935V151H153.935ZM193.152 150.5H153.435V151.5H193.152V150.5ZM193.152 150.5V150.5V151.5C193.704 151.5 194.152 151.052 194.152 150.5H193.152ZM193.152 122.152V150.5H194.152V122.152H193.152ZM41.9781 81.9348C41.9781 81.3825 41.5304 80.9348 40.9781 80.9348V81.9348H41.9781ZM41.9781 110.283V81.9348H40.9781V110.283H41.9781ZM40.9781 111.283C41.5304 111.283 41.9781 110.835 41.9781 110.283H40.9781V111.283ZM1.26074 111.283H40.9781V110.283H1.26074V111.283ZM0.760742 81.4348V110.783H1.76074V81.4348H0.760742ZM40.9781 80.9348H1.26074V81.9348H40.9781V80.9348ZM115.978 81.9348H116.978C116.978 81.3825 116.53 80.9348 115.978 80.9348V81.9348ZM52.3477 81.9348H115.978V80.9348H52.3477V81.9348ZM52.8477 110.783V81.4348H51.8477V110.783H52.8477ZM115.978 110.283H52.3477V111.283H115.978V110.283ZM115.978 110.283V111.283C116.53 111.283 116.978 110.835 116.978 110.283H115.978ZM115.978 81.9348V110.283H116.978V81.9348H115.978ZM194.761 81.5C194.761 80.9477 194.313 80.5 193.761 80.5V81.5H194.761ZM194.761 110.5V81.5H193.761V110.5H194.761ZM193.761 111.5C194.313 111.5 194.761 111.052 194.761 110.5H193.761V111.5ZM127.261 111.5H193.761V110.5H127.261V111.5ZM126.761 81V111H127.761V81H126.761ZM193.761 80.5H127.261V81.5H193.761V80.5ZM143.065 122.152C143.065 121.6 142.617 121.152 142.065 121.152V122.152H143.065ZM143.065 150.5V122.152H142.065V150.5H143.065ZM142.065 151.5C142.617 151.5 143.065 151.052 143.065 150.5H142.065V151.5ZM1.26074 151.5L142.065 151.5V150.5L1.26074 150.5L1.26074 151.5ZM0.760742 121.652V151H1.76074V121.652H0.760742ZM142.065 121.152L1.26074 121.152L1.26074 122.152L142.065 122.152V121.152ZM194.239 41.7174H195.239C195.239 41.1651 194.791 40.7174 194.239 40.7174V41.7174ZM1.26074 41.7174L194.239 41.7174V40.7174L1.26074 40.7174L1.26074 41.7174ZM1.76074 70.5652V41.2174H0.760742V70.5652H1.76074ZM194.239 70.0652L1.26074 70.0652L1.26074 71.0652L194.239 71.0652V70.0652ZM194.239 70.0652V71.0652C194.791 71.0652 195.239 70.6175 195.239 70.0652H194.239ZM194.239 41.7174V70.0652H195.239V41.7174H194.239Z" fill="#D9D9D9"/>
+</svg>