kasia feedback

apache · Feb 24, 2022 · 01d1199 · 01d1199
1 parent 91c4a5e
commit 01d1199
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx
@@ -65,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;
@@ -315,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) {
@@ -403,10 +408,27 @@ 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={<TabTitle style={{ paddingTop: '6px' }}>Add a New Tab</TabTitle>}
+        tab={emptyTab}
         closable={false}
       >
         <EmptyStateBig
@@ -425,7 +447,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"
@@ -441,7 +465,7 @@ class TabbedSqlEditors extends React.PureComponent {
         }
       >
         {editors}
-        {this.props.queryEditors?.length === 0 && emptyTab}
+        {noQueryEditors && emptyTabState}
       </EditableTabs>
     );
   }

diff --git a/superset-frontend/src/SqlLab/reducers/sqlLab.js b/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();