fix: sql lab ctrl t behaved differently from clicking (#19420)

* initial approach

To have consistent behaviour when creating a new tab with ctrl+t

* consistent behaviour when creating tabs

* fixed bug and added tests

* updates to pass checks

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

@@ -31,6 +31,7 @@ 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 { newQueryTabName } from '../../utils/newQueryTabName';
 import SqlEditor from '../SqlEditor';
 import TabStatusIcon from '../TabStatusIcon';
 
@@ -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.test.ts

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+import { newQueryTabName } from './newQueryTabName';
+
+const emptyEditor = {
+  title: '',
+  schema: '',
+  autorun: false,
+  sql: '',
+  remoteId: null,
+};
+
+describe('newQueryTabName', () => {
+  it("should return default title if queryEditor's length is 0", () => {
+    const defaultTitle = 'default title';
+    const title = newQueryTabName([], defaultTitle);
+    expect(title).toEqual(defaultTitle);
+  });
+  it('should return next available number if there are unsaved editors', () => {
+    const untitledQueryText = 'Untitled Query';
+    const unsavedEditors = [
+      { ...emptyEditor, title: `${untitledQueryText} 1` },
+      { ...emptyEditor, title: `${untitledQueryText} 2` },
+    ];
+
+    const nextTitle = newQueryTabName(unsavedEditors);
+    expect(nextTitle).toEqual(`${untitledQueryText} 3`);
+  });
+});

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

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ */
+
+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 => {
+  const resultTitle = t(initialTitle);
+
+  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 resultTitle;
+  }
+
+  return resultTitle;
+};