Notebook Views Actions fix for ADS Web (#16707)

This commit is contained in:
Daniel Grajeda
2021-08-11 14:19:02 -06:00
committed by GitHub
parent 9b2836c9e7
commit 10ee4f2d7c
15 changed files with 7 additions and 94 deletions

View File

@@ -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);
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;
optionWidget.label = cell.cellGuid;
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) => {

View File

@@ -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(ViewContainerRef) private _containerRef: ViewContainerRef,
@Inject(ComponentFactoryResolver) private _componentFactoryResolver: ComponentFactoryResolver,
@Inject(IEditorService) private _editorService: IEditorService
) {
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');

View File

@@ -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();
}

View File

@@ -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);