fix: sql lab ctrl t behaved differently from clicking

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

@@ -75,6 +75,7 @@ import ShareSqlLabQuery from '../ShareSqlLabQuery';
 import SqlEditorLeftBar from '../SqlEditorLeftBar';
 import AceEditorWrapper from '../AceEditorWrapper';
 import RunQueryActionButton from '../RunQueryActionButton';
+import { newQueryTabName } from '../../utils/newQueryTabName';
 
 const LIMIT_DROPDOWN = [10, 100, 1000, 10000, 100000];
 const SQL_EDITOR_PADDING = 10;
@@ -333,10 +334,10 @@ class SqlEditor extends React.PureComponent {
         key: userOS === 'Windows' ? 'ctrl+q' : 'ctrl+t',
         descr: t('New tab'),
         func: () => {
+          const title = newQueryTabName(this.props.queryEditors || []);
           this.props.addQueryEditor({
             ...this.props.queryEditor,
-            title: t('Untitled query'),
-            sql: '',
+            title,
           });
         },
       },
@@ -804,13 +805,12 @@ class SqlEditor extends React.PureComponent {
 SqlEditor.defaultProps = defaultProps;
 SqlEditor.propTypes = propTypes;
 
-function mapStateToProps(state, props) {
-  const { sqlLab } = state;
+function mapStateToProps({ sqlLab }, props) {
   const queryEditor = sqlLab.queryEditors.find(
     editor => editor.id === props.queryEditorId,
   );
 
-  return { sqlLab, ...props, queryEditor };
+  return { sqlLab, ...props, queryEditor, queryEditors: sqlLab.queryEditors };
 }
 
 function mapDispatchToProps(dispatch) {

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

@@ -29,6 +29,7 @@ import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import { areArraysShallowEqual } from 'src/reduxUtils';
 import { Tooltip } from 'src/components/Tooltip';
 import { detectOS } from 'src/utils/common';
+import { newQueryTabName } from '../../utils/newQueryTabName';
 import * as Actions from 'src/SqlLab/actions/sqlLab';
 import { EmptyStateBig } from 'src/components/EmptyState';
 import SqlEditor from '../SqlEditor';
@@ -262,19 +263,7 @@ class TabbedSqlEditors extends React.PureComponent {
           '-- Note: Unless you save your query, these tabs will NOT persist if you clear your cookies or change browsers.\n\n',
         );
 
-    let newTitle = 'Untitled Query 1';
-
-    if (this.props.queryEditors.length > 0) {
-      const untitledQueryNumbers = this.props.queryEditors
-        .filter(x => x.title.match(/^Untitled Query (\d+)$/))
-        .map(x => x.title.replace('Untitled Query ', ''));
-      if (untitledQueryNumbers.length > 0) {
-        // When there are query tabs open, and at least one is called "Untitled Query #"
-        // Where # is a valid number
-        const largestNumber = Math.max.apply(null, untitledQueryNumbers);
-        newTitle = t('Untitled Query %s', largestNumber + 1);
-      }
-    }
+    const newTitle = newQueryTabName(this.props.queryEditors || []);
 
     const qe = {
       title: newTitle,

superset-frontend/src/SqlLab/utils/newQueryTabName.ts

@@ -0,0 +1,28 @@
+import { t } from '@superset-ui/core';
+import { QueryEditor } from '../types';
+
+const untitledQueryRegex = /^Untitled Query (\d+)$/; // Literal notation isn't recompiled
+const untitledQuery = 'Untitled Query ';
+
+export const newQueryTabName = (
+  queryEditors: QueryEditor[],
+  initialTitle = `${untitledQuery}1`,
+): string => {
+  if (queryEditors.length > 0) {
+    const mappedUntitled = queryEditors.filter(qe =>
+      qe.title.match(untitledQueryRegex),
+    );
+    const untitledQueryNumbers = mappedUntitled.map(
+      qe => +qe.title.replace(untitledQuery, ''),
+    );
+    if (untitledQueryNumbers.length > 0) {
+      // When there are query tabs open, and at least one is called "Untitled Query #"
+      // Where # is a valid number
+      const largestNumber: number = Math.max(...untitledQueryNumbers);
+      return t(`${untitledQuery}%s`, largestNumber + 1);
+    }
+    return initialTitle;
+  }
+
+  return initialTitle;
+};