Add Notebook <-> SQL convert (#11590)

* Add Notebook <-> SQL convert

* Update STS

src/sql/base/browser/ui/taskbar/media/icons.css

@@ -118,3 +118,9 @@
 	background-image: url('disable_sqlcmd_inverse.svg');
 	background-repeat: no-repeat;
 }
+
+.carbon-taskbar .codicon.export {
+	background-origin: initial;
+	background-position: left;
+	background-size: 11px
+}

src/sql/media/icons/common-icons.css

@@ -287,6 +287,15 @@
 	background-image: url("stop_inverse.svg");
 }
 
+.hc-black .codicon.export,
+.vs-dark .codicon.export {
+	background: url("export_inverse.svg") center center no-repeat;
+}
+
+.vs .codicon.export {
+	background: url("export.svg") center center no-repeat;
+}
+
 /* Notebook cells */
 .codicon.toolbarIconRunInactive {
 	background-image: url("execute_cell_grey.svg");

src/sql/media/icons/export.svg

@@ -0,0 +1,15 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<g clip-path="url(#clip1)">
+<path d="M11.6943 4.60156L14.1006 7.01562H2.0459V8.01562H14.0771L11.6943 10.3984L12.3975 11.1016L15.999 7.5L12.3975 3.89844L11.6943 4.60156ZM1.0459 4H0.0458984V11H1.0459V4Z" fill="#323130"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="16" height="16" fill="white" transform="translate(-0.000976562)"/>
+</clipPath>
+</defs>
+</svg>

src/sql/media/icons/export_inverse.svg

@@ -0,0 +1,15 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<g clip-path="url(#clip1)">
+<path d="M11.6943 4.60156L14.1006 7.01562H2.0459V8.01562H14.0771L11.6943 10.3984L12.3975 11.1016L15.999 7.5L12.3975 3.89844L11.6943 4.60156ZM1.0459 4H0.0458984V11H1.0459V4Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="16" height="16" fill="white" transform="translate(-0.000976562)"/>
+</clipPath>
+</defs>
+</svg>

src/sql/workbench/contrib/notebook/browser/notebook.component.ts

@@ -553,7 +553,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		// This is similar behavior that exists in MenuItemActionItem
 		if (action instanceof MenuItemAction) {
 
-			if (action.item.id.includes('jupyter.cmd') && this.previewFeaturesEnabled) {
+			if ((action.item.id.includes('jupyter.cmd') && this.previewFeaturesEnabled) || action.item.id.includes('mssql')) {
 				action.tooltip = action.label;
 				action.label = '';
 			}

src/sql/workbench/contrib/query/browser/queryActions.ts

@@ -36,7 +36,7 @@ import { IQueryEditorService } from 'sql/workbench/services/queryEditor/common/q
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import { getCurrentGlobalConnection } from 'sql/workbench/browser/taskUtilities';
 import { ServicesAccessor, IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { CommandsRegistry } from 'vs/platform/commands/common/commands';
+import { CommandsRegistry, ICommandService } from 'vs/platform/commands/common/commands';
 import { OEAction } from 'sql/workbench/services/objectExplorer/browser/objectExplorerActions';
 import { TreeViewItemHandleArg } from 'sql/workbench/common/views';
 import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilitiesService';
@@ -813,3 +813,27 @@ export class ListDatabasesActionItem extends Disposable implements IActionViewIt
 	}
 
 }
+
+/**
+ * Action class that sends the request to convert the contents of the sql editor
+ * into a Notebook document
+ */
+export class ExportAsNotebookAction extends QueryTaskbarAction {
+
+	public static IconClass = 'export';
+	public static ID = 'exportAsNotebookAction';
+
+	constructor(
+		editor: QueryEditor,
+		@IConnectionManagementService connectionManagementService: IConnectionManagementService,
+		@ICommandService private _commandService: ICommandService
+	) {
+		super(connectionManagementService, editor, ConnectDatabaseAction.ID, ExportAsNotebookAction.IconClass);
+
+		this.label = nls.localize('queryEditor.exportSqlAsNotebook', "Export as Notebook");
+	}
+
+	public async run(): Promise<void> {
+		this._commandService.executeCommand('mssql.exportSqlAsNotebook', this.editor.input.uri);
+	}
+}

src/sql/workbench/contrib/query/browser/queryEditor.ts

@@ -86,6 +86,7 @@ export class QueryEditor extends BaseEditor {
 	private _actualQueryPlanAction: actions.ActualQueryPlanAction;
 	private _listDatabasesActionItem: actions.ListDatabasesActionItem;
 	private _toggleSqlcmdMode: actions.ToggleSqlCmdModeAction;
+	private _exportAsNotebookAction: actions.ExportAsNotebookAction;
 
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -183,6 +184,7 @@ export class QueryEditor extends BaseEditor {
 		this._estimatedQueryPlanAction = this.instantiationService.createInstance(actions.EstimatedQueryPlanAction, this);
 		this._actualQueryPlanAction = this.instantiationService.createInstance(actions.ActualQueryPlanAction, this);
 		this._toggleSqlcmdMode = this.instantiationService.createInstance(actions.ToggleSqlCmdModeAction, this, false);
+		this._exportAsNotebookAction = this.instantiationService.createInstance(actions.ExportAsNotebookAction, this);
 
 		this.setTaskbarContent();
 
@@ -266,13 +268,14 @@ export class QueryEditor extends BaseEditor {
 			{ action: this._listDatabasesAction },
 			{ element: separator },
 			{ action: this._estimatedQueryPlanAction },
-			{ action: this._toggleSqlcmdMode }
+			{ action: this._toggleSqlcmdMode },
+			{ action: this._exportAsNotebookAction }
 		];
 
 		// Remove the estimated query plan action if preview features are not enabled
 		let previewFeaturesEnabled = this.configurationService.getValue('workbench')['enablePreviewFeatures'];
 		if (!previewFeaturesEnabled) {
-			content = content.slice(0, -2);
+			content.splice(7, 1);
 		}
 
 		this.taskbar.setContent(content);