Add Duplicate Tab option (#8485)

* Add `Duplicate Tab` option Adds an option to duplicate the current tab's setting/content into a new tab. Useful if you're iterating on a query. * Add test
apache · Nov 4, 2019 · 5df1fcb · 5df1fcb
1 parent 51c2290
commit 5df1fcb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx b/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx
@@ -162,6 +162,14 @@ describe('TabbedSqlEditors', () => {
     expect(wrapper.instance().props.actions.addQueryEditor.getCall(0).args[0].title)
         .toContain('Untitled Query');
   });
+  it('should duplicate query editor', () => {
+    wrapper = getWrapper();
+    sinon.stub(wrapper.instance().props.actions, 'cloneQueryToNewTab');
+
+    wrapper.instance().duplicateQueryEditor(queryEditors[0]);
+    expect(wrapper.instance().props.actions.cloneQueryToNewTab.getCall(0).args[0])
+        .toBe(queryEditors[0]);
+  });
   it('should handle select', () => {
     wrapper = getWrapper();
     sinon.spy(wrapper.instance(), 'newQueryEditor');

diff --git a/superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx b/superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx
@@ -67,6 +67,7 @@ class TabbedSqlEditors extends React.PureComponent {
     this.renameTab = this.renameTab.bind(this);
     this.toggleLeftBar = this.toggleLeftBar.bind(this);
     this.removeAllOtherQueryEditors = this.removeAllOtherQueryEditors.bind(this);
+    this.duplicateQueryEditor = this.duplicateQueryEditor.bind(this);
   }
   componentDidMount() {
     const query = URI(window.location).search(true);
@@ -182,6 +183,9 @@ class TabbedSqlEditors extends React.PureComponent {
     this.props.queryEditors
       .forEach(qe => qe !== cqe && this.removeQueryEditor(qe));
   }
+  duplicateQueryEditor(qe) {
+    this.props.actions.cloneQueryToNewTab(qe);
+  }
   toggleLeftBar() {
     this.setState({ hideLeftBar: !this.state.hideLeftBar });
   }
@@ -236,6 +240,12 @@ class TabbedSqlEditors extends React.PureComponent {
             </div>
             {t('Close all other tabs')}
           </MenuItem>
+          <MenuItem eventKey="5" onClick={() => this.duplicateQueryEditor(qe)}>
+            <div className="icon-container">
+              <i className="fa fa-files-o" />
+            </div>
+            {t('Duplicate tab')}
+          </MenuItem>
         </SplitButton>
       );
       return (