Notebook Views Actions fix for ADS Web (#16707)

.eslintrc.json

@@ -742,7 +742,6 @@
 					"chart.js",
 					"plotly.js",
 					"angular2-grid",
-					"html-to-image",
 					"html-query-plan",
 					"turndown",
 					"gridstack",

ThirdPartyNotices.txt

@@ -30,7 +30,6 @@ expressly granted herein, whether by implication, estoppel or otherwise.
     getmac: https://github.com/bevry/getmac
     graceful-fs: https://github.com/isaacs/node-graceful-fs
     gridstack: https://github.com/gridstack/gridstack.js
-    html-to-image: https://github.com/bubkoo/html-to-image
     html-query-plan: https://github.com/JustinPealing/html-query-plan
     http-proxy-agent: https://github.com/TooTallNate/node-https-proxy-agent
     https-proxy-agent: https://github.com/TooTallNate/node-https-proxy-agent
@@ -521,32 +520,6 @@ SOFTWARE.
 =========================================
 END OF gridstack NOTICES AND INFORMATION
 
-%% html-to-image NOTICES AND INFORMATION BEGIN HERE
-=========================================
-MIT License
-
-Copyright (c) 2017 W.Y.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-=========================================
-END OF html-to-image NOTICES AND INFORMATION
-
 %% html-query-plan NOTICES AND INFORMATION BEGIN HERE
 =========================================
 The MIT License (MIT)

package.json

@@ -78,7 +78,6 @@
     "graceful-fs": "4.2.3",
     "gridstack": "^3.1.3",
     "html-query-plan": "git://github.com/kburtram/html-query-plan.git#2.6",
-    "html-to-image": "^1.6.2",
     "http-proxy-agent": "^2.1.0",
     "https-proxy-agent": "^2.2.3",
     "iconv-lite-umd": "0.6.8",

remote/package.json

@@ -20,7 +20,6 @@
     "graceful-fs": "4.2.3",
     "gridstack": "^3.1.3",
     "html-query-plan": "git://github.com/kburtram/html-query-plan.git#2.6",
-    "html-to-image": "^1.6.2",
     "http-proxy-agent": "^2.1.0",
     "https-proxy-agent": "^2.2.3",
     "iconv-lite-umd": "0.6.8",

remote/web/package.json

@@ -16,7 +16,6 @@
 		"chart.js": "^2.9.4",
     "gridstack": "^3.1.3",
 		"html-query-plan": "git://github.com/kburtram/html-query-plan.git#2.6",
-    "html-to-image": "^1.6.2",
 		"iconv-lite-umd": "0.6.8",
     "jquery": "3.5.0",
 		"jschardet": "2.3.0",

remote/web/yarn.lock

@@ -180,11 +180,6 @@ has-flag@^3.0.0:
   version "2.5.0"
   resolved "git://github.com/kburtram/html-query-plan.git#c524feb824e4960897ad875a37af068376a2b4a3"
 
-html-to-image@^1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/html-to-image/-/html-to-image-1.6.2.tgz#9d444424cc638df13db5c7be810ac0d2962f5edd"
-  integrity sha512-X6X7wJW2KQ+AGqMeBITdntCcQnxBgZY62MdGOi042Y70+0SMe8/iJCzUv8RNaUoXqUjWw5FPyoTDmdGoapTQIQ==
-
 htmlparser2@^3.9.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"

remote/yarn.lock

@@ -402,11 +402,6 @@ has-flag@^3.0.0:
   version "2.5.0"
   resolved "git://github.com/kburtram/html-query-plan.git#c524feb824e4960897ad875a37af068376a2b4a3"
 
-html-to-image@^1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/html-to-image/-/html-to-image-1.6.2.tgz#9d444424cc638df13db5c7be810ac0d2962f5edd"
-  integrity sha512-X6X7wJW2KQ+AGqMeBITdntCcQnxBgZY62MdGOi042Y70+0SMe8/iJCzUv8RNaUoXqUjWw5FPyoTDmdGoapTQIQ==
-
 htmlparser2@^3.9.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"

src/sql/workbench/contrib/notebook/browser/notebookViews/insertCellsModal.ts

@@ -19,15 +19,11 @@ import { attachCheckboxStyler } from 'sql/platform/theme/common/styler';
 import { ServiceOptionType } from 'sql/platform/connection/common/interfaces';
 import { ServiceOption } from 'azdata';
 import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper';
-import { TextCellComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/textCell.component';
-import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
 import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
-import { NotebookModel } from 'sql/workbench/services/notebook/browser/models/notebookModel';
 import { inputBorder, inputValidationInfoBorder } from 'vs/platform/theme/common/colorRegistry';
 import { localize } from 'vs/nls';
 import { NotebookViewsExtension } from 'sql/workbench/services/notebook/browser/notebookViews/notebookViewsExtension';
 import { attachButtonStyler } from 'vs/platform/theme/common/styler';
-import { toJpeg } from 'html-to-image';
 import { truncate } from 'vs/base/common/strings';
 
 type CellOption = {
@@ -99,8 +95,6 @@ export class InsertCellsModal extends Modal {
 	constructor(
 		private onInsert: (cell: ICellModel) => void,
 		private _context: NotebookViewsExtension,
-		private _containerRef: ViewContainerRef,
-		private _componentFactoryResolver: ComponentFactoryResolver,
 		@ILogService logService: ILogService,
 		@IThemeService themeService: IThemeService,
 		@ILayoutService layoutService: ILayoutService,
@@ -161,14 +155,7 @@ export class InsertCellsModal extends Modal {
 				() => this.onOptionChecked(cell.cellGuid)
 			);
 
-			const img = await this.generateScreenshot(cell);
+			optionWidget.label = cell.cellGuid;
-			const wrapper = DOM.$<HTMLDivElement>('div.thumnail-wrapper');
-			const thumbnail = DOM.$<HTMLImageElement>('img.thumbnail');
-
-			thumbnail.src = img;
-			thumbnail.style.maxWidth = '100%';
-			DOM.append(wrapper, thumbnail);
-			optionWidget.label = wrapper.outerHTML;
 
 			this._optionsMap[cell.cellGuid] = optionWidget;
 		});
@@ -253,24 +240,6 @@ export class InsertCellsModal extends Modal {
 			delete this._optionsMap[key];
 		}
 	}
-
-	public async generateScreenshot(cell: ICellModel, screenshotWidth: number = 300, screenshowHeight: number = 300, backgroundColor: string = '#ffffff'): Promise<string> {
-		let componentFactory = this._componentFactoryResolver.resolveComponentFactory(TextCellComponent);
-		let component = this._containerRef.createComponent(componentFactory);
-
-		component.instance.model = this._context.notebook as NotebookModel;
-		component.instance.cellModel = cell;
-
-		component.instance.handleContentChanged();
-
-		const element: HTMLElement = component.instance.outputRef.nativeElement;
-
-		const scale = element.clientWidth / screenshotWidth;
-		const canvasWidth = element.clientWidth / scale;
-		const canvasHeight = element.clientHeight / scale;
-
-		return toJpeg(component.instance.outputRef.nativeElement, { quality: .6, canvasWidth, canvasHeight, backgroundColor });
-	}
 }
 
 registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {

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

@@ -2,7 +2,7 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-import { Component, Input, ViewChildren, QueryList, ChangeDetectorRef, forwardRef, Inject, ViewChild, ElementRef, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
+import { Component, Input, ViewChildren, QueryList, ChangeDetectorRef, forwardRef, Inject, ViewChild, ElementRef } from '@angular/core';
 import { ICellModel, INotebookModel, ISingleNotebookEditOperation } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
 import { CodeCellComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/codeCell.component';
 import { TextCellComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/textCell.component';
@@ -67,9 +67,7 @@ export class NotebookViewComponent extends AngularDisposable implements INoteboo
 		@Inject(INotebookService) private _notebookService: INotebookService,
 		@Inject(IConnectionManagementService) private _connectionManagementService: IConnectionManagementService,
 		@Inject(IConfigurationService) private _configurationService: IConfigurationService,
-		@Inject(IEditorService) private _editorService: IEditorService,
+		@Inject(IEditorService) private _editorService: IEditorService
-		@Inject(ViewContainerRef) private _containerRef: ViewContainerRef,
-		@Inject(ComponentFactoryResolver) private _componentFactoryResolver: ComponentFactoryResolver,
 	) {
 		super();
 		this._register(this._configurationService.onDidChangeConfiguration(e => {
@@ -242,7 +240,7 @@ export class NotebookViewComponent extends AngularDisposable implements INoteboo
 		titleElement.style.marginRight = '25px';
 		titleElement.style.minHeight = '25px';
 
-		let insertCellsAction = this._instantiationService.createInstance(InsertCellAction, this.insertCell.bind(this), this.views, this._containerRef, this._componentFactoryResolver);
+		let insertCellsAction = this._instantiationService.createInstance(InsertCellAction, this.insertCell.bind(this), this.views);
 
 		this._runAllCellsAction = this._instantiationService.createInstance(RunAllCellsAction, 'notebook.runAllCells', localize('runAllPreview', "Run all"), 'notebook-button masked-pseudo start-outline');
 

src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsActions.ts

@@ -8,7 +8,6 @@ import { ViewOptionsModal } from 'sql/workbench/contrib/notebook/browser/noteboo
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { localize } from 'vs/nls';
 import { InsertCellsModal } from 'sql/workbench/contrib/notebook/browser/notebookViews/insertCellsModal';
-import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
 import { IDialogService } from 'vs/platform/dialogs/common/dialogs';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { CellExecutionState, ICellModel, ViewMode } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
@@ -92,15 +91,13 @@ export class InsertCellAction extends Action {
 	constructor(
 		private onInsert: (cell: ICellModel) => void,
 		private _context: NotebookViewsExtension,
-		private _containerRef: ViewContainerRef,
-		private _componentFactoryResolver: ComponentFactoryResolver,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 	) {
 		super(InsertCellAction.ID, InsertCellAction.LABEL, InsertCellAction.ICON);
 	}
 
 	override async run(): Promise<void> {
-		const optionsModal = this._instantiationService.createInstance(InsertCellsModal, this.onInsert, this._context, this._containerRef, this._componentFactoryResolver);
+		const optionsModal = this._instantiationService.createInstance(InsertCellsModal, this.onInsert, this._context);
 		optionsModal.render();
 		optionsModal.open();
 	}

src/sql/workbench/contrib/notebook/test/browser/notebookViewsActions.test.ts

@@ -133,8 +133,6 @@ suite('Notebook Views Actions', function (): void {
 		let insertCellsModal = TypeMoq.Mock.ofType(InsertCellsModal, TypeMoq.MockBehavior.Strict,
 			(cell: ICellModel) => { }, // onInsert
 			notebookViews, // _context
-			undefined, // _containerRef
-			undefined, // _componentFactoryResolver
 			undefined, // logService
 			undefined, // themeService
 			undefined, // layoutService
@@ -153,9 +151,9 @@ suite('Notebook Views Actions', function (): void {
 		});
 
 		const instantiationService = new InstantiationService();
-		sinon.stub(instantiationService, 'createInstance').withArgs(InsertCellsModal, sinon.match.any, sinon.match.any, sinon.match.any, sinon.match.any).returns(insertCellsModal.object);
+		sinon.stub(instantiationService, 'createInstance').withArgs(InsertCellsModal, sinon.match.any, sinon.match.any).returns(insertCellsModal.object);
 
-		const insertCellAction = new InsertCellAction((cell: ICellModel) => { }, notebookViews, undefined, undefined, instantiationService);
+		const insertCellAction = new InsertCellAction((cell: ICellModel) => { }, notebookViews, instantiationService);
 		await insertCellAction.run();
 
 		assert.ok(rendered);

src/vs/code/browser/workbench/workbench-dev.html

@@ -60,7 +60,6 @@
 				'angular2-slickgrid': `${window.location.origin}/static/remote/web/node_modules/angular2-slickgrid/out/bundles/angular2-slickgrid.umd.js`,
 				'chart.js':  `${window.location.origin}/static/remote/web/node_modules/chart.js/dist/Chart.bundle.min.js`,
 				'html-query-plan': `${window.location.origin}/static/remote/web/node_modules/html-query-plan/dist/index.min.js`,
-				'html-to-image': `${window.location.origin}/static/web/node_modules/html-to-image/dist/html-to-image.js`,
 				'ng2-charts': `${window.location.origin}/static/remote/web/node_modules/ng2-charts/bundles/ng2-charts.umd.js`,
 				'rxjs/Observable': `${window.location.origin}/static/remote/web/node_modules/rxjs/bundles/Rx.min.js?0`,
 				'rxjs/observable/merge': `${window.location.origin}/static/remote/web/node_modules/rxjs/bundles/Rx.min.js?1`,

src/vs/code/browser/workbench/workbench.html

@@ -60,7 +60,6 @@
 				'angular2-slickgrid': `${window.location.origin}/static/node_modules/angular2-slickgrid/out/bundles/angular2-slickgrid.umd.js`,
 				'chart.js':  `${window.location.origin}/static/node_modules/chart.js/dist/Chart.bundle.min.js`,
 				'html-query-plan': `${window.location.origin}/static/node_modules/html-query-plan/dist/index.min.js`,
-				'html-to-image': `${window.location.origin}/static/web/node_modules/html-to-image/dist/html-to-image.js`,
 				'ng2-charts': `${window.location.origin}/static/node_modules/ng2-charts/bundles/ng2-charts.umd.js`,
 				'rxjs/Observable': `${window.location.origin}/static/node_modules/rxjs/bundles/Rx.min.js?0`,
 				'rxjs/observable/merge': `${window.location.origin}/static/node_modules/rxjs/bundles/Rx.min.js?1`,

test/unit/electron/renderer.js

@@ -103,7 +103,6 @@ function initLoader(opts) {
 			'@angular/platform-browser-dynamic',
 			'@angular/router',
 			'angular2-grid',
-			'html-to-image',
 			'gridstack/dist/h5/gridstack-dd-native',
 			'ng2-charts',
 			'rxjs/add/observable/of',

yarn.lock

@@ -5289,11 +5289,6 @@ html-escaper@^2.0.0:
   version "2.5.0"
   resolved "git://github.com/kburtram/html-query-plan.git#c524feb824e4960897ad875a37af068376a2b4a3"
 
-html-to-image@^1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/html-to-image/-/html-to-image-1.6.2.tgz#9d444424cc638df13db5c7be810ac0d2962f5edd"
-  integrity sha512-X6X7wJW2KQ+AGqMeBITdntCcQnxBgZY62MdGOi042Y70+0SMe8/iJCzUv8RNaUoXqUjWw5FPyoTDmdGoapTQIQ==
-
 "htmlparser2@>= 3.7.3 < 4.0.0":
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"