Enable double click edit (#12200)

* fix to working version

* add comment documentation

* minor changes based on review

* resolve comments

* remnove unnecessary assignment

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

@@ -107,4 +107,8 @@ export class CellToolbarComponent {
 
 		this._actionBar.setContent(taskbarContent);
 	}
+
+	public getEditCellAction(): EditCellAction {
+		return this._editCellAction;
+	}
 }

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

@@ -58,6 +58,11 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 		this._model.updateActiveCell(undefined);
 	}
 
+	// Double click to edit text cell in notebook
+	@HostListener('dblclick', ['$event']) onDblClick() {
+		this.enableActiveCellEditOnDoubleClick();
+	}
+
 	@HostListener('document:keydown.meta.a', ['$event'])
 	onkeydown(e) {
 		// use preventDefault() to avoid invoking the editor's select all
@@ -78,6 +83,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 	private markdownRenderer: NotebookMarkdownRenderer;
 	private markdownResult: IMarkdownRenderResult;
 	public previewFeaturesEnabled: boolean = false;
+	public doubleClickEditEnabled: boolean;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
@@ -97,6 +103,9 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 		this._register(this._configurationService.onDidChangeConfiguration(e => {
 			this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
 		}));
+		this._register(this._configurationService.onDidChangeConfiguration(e => {
+			this.doubleClickEditEnabled = this._configurationService.getValue('notebook.enableDoubleClickEdit');
+		}));
 	}
 
 	public get cellEditors(): ICellEditorProvider[] {
@@ -176,7 +185,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 
 	/**
 	 * Updates the preview of markdown component with latest changes
-	 * If content is empty and in non-edit mode, default it to 'Add content here...'
+	 * If content is empty and in non-edit mode, default it to 'Add content here...' or 'Double-click to edit' depending on setting
 	 * Sanitizes the data to be shown in markdown cell
 	 */
 	private updatePreview(): void {
@@ -187,7 +196,11 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 		if (trustedChanged || contentChanged) {
 			this._lastTrustedMode = this.cellModel.trustedMode;
 			if ((!cellModelSourceJoined) && !this.isEditMode) {
+				if (this.doubleClickEditEnabled) {
+					this._content = localize('doubleClickEdit', "Double-click to edit");
+				} else {
 					this._content = localize('addContent', "Add content here...");
+				}
 			} else {
 				this._content = this.cellModel.source;
 			}
@@ -350,4 +363,13 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 		});
 		return textOutput;
 	}
+
+	// Enables edit mode on double clicking active cell
+	private enableActiveCellEditOnDoubleClick() {
+		if (!this.isEditMode && this.doubleClickEditEnabled) {
+			this.toggleEditMode(true);
+		}
+		this.cellModel.active = true;
+		this._model.updateActiveCell(this.cellModel);
+	}
 }

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

@@ -14,7 +14,7 @@
 				<cell-toolbar-component *ngIf="cell.active" [cellModel]="cell" [model]="model"></cell-toolbar-component>
 				<code-cell-component *ngIf="cell.cellType === 'code'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
 				</code-cell-component>
-				<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
+				<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId" (dblclick)="enableActiveCellIconOnDoubleClick()">
 				</text-cell-component>
 			</div>
 		</div>

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

@@ -57,6 +57,7 @@ import { NotebookInput } from 'sql/workbench/contrib/notebook/browser/models/not
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { CellToolbarComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.component';
 
 export const NOTEBOOK_SELECTOR: string = 'notebook-component';
 
@@ -71,6 +72,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 
 	@ViewChildren(CodeCellComponent) private codeCells: QueryList<CodeCellComponent>;
 	@ViewChildren(TextCellComponent) private textCells: QueryList<TextCellComponent>;
+	@ViewChildren(CellToolbarComponent) private cellToolbar: QueryList<CellToolbarComponent>;
 
 	private _model: NotebookModel;
 	protected _actionBar: Taskbar;
@@ -85,6 +87,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 	private _navProvider: INavigationProvider;
 	private navigationResult: nb.NavigationResult;
 	public previewFeaturesEnabled: boolean = false;
+	public doubleClickEditEnabled: boolean;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
@@ -113,6 +116,9 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		this._register(this._configurationService.onDidChangeConfiguration(e => {
 			this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
 		}));
+		this._register(this._configurationService.onDidChangeConfiguration(e => {
+			this.doubleClickEditEnabled = this._configurationService.getValue('notebook.enableDoubleClickEdit');
+		}));
 	}
 
 	private updateProfile(): void {
@@ -203,6 +209,18 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		this.detectChanges();
 	}
 
+	// Handles double click to edit icon change
+	// See textcell.component.ts for changing edit behavior
+	public enableActiveCellIconOnDoubleClick() {
+		if (this.doubleClickEditEnabled) {
+			const toolbarComponent = (<CellToolbarComponent>this.cellToolbar.first);
+			const toolbarEditCellAction = toolbarComponent.getEditCellAction();
+			if (!toolbarEditCellAction.editMode) {
+				toolbarEditCellAction.editMode = !toolbarEditCellAction.editMode;
+			}
+		}
+	}
+
 	// Add cell based on cell type
 	public addCell(cellType: CellType, index?: number, event?: Event) {
 		if (event) {

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

@@ -220,6 +220,11 @@ configurationRegistry.registerConfiguration({
 			'type': 'boolean',
 			'default': false,
 			'description': localize('notebook.allowADSCommands', "Allow notebooks to run Azure Data Studio commands.")
+		},
+		'notebook.enableDoubleClickEdit': {
+			'type': 'boolean',
+			'default': true,
+			'description': localize('notebook.enableDoubleClickEdit', "Enable double click to edit for text cells in notebooks")
 		}
 	}
 });