diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx index 658af0dabec5..c01fb98f60b7 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx +++ b/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, }); }, }, @@ -805,13 +806,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) { diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx index ad7b4cb103f5..f055a612edb8 100644 --- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx +++ b/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, diff --git a/superset-frontend/src/SqlLab/utils/newQueryTabName.test.ts b/superset-frontend/src/SqlLab/utils/newQueryTabName.test.ts new file mode 100644 index 000000000000..d0d98c3cd5e2 --- /dev/null +++ b/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`); + }); +}); diff --git a/superset-frontend/src/SqlLab/utils/newQueryTabName.ts b/superset-frontend/src/SqlLab/utils/newQueryTabName.ts new file mode 100644 index 000000000000..a719a74af59a --- /dev/null +++ b/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; +};