Notebooks: Add Placeholder Cell, Fix Link Styling (#3728)

* Placeholder cell to add new real cells

* Fix links in notebooks to show correct color, rely on angular ngif for placeholder

* Fix failing test where one cell was expected by default

* Remove unnecessary TODO

src/sql/parts/notebook/cellViews/placeholder.css

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+ placeholder-cell-component {
+	height: 50px;
+	width: 100%;
+	display: block;
+	box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.14);
+}
+
+placeholder-cell-component .text {
+	display: flex;
+    align-items: center;
+	justify-content: center;
+	height: 50px;
+	-webkit-margin-before: 0em;
+	-webkit-margin-after: 0em;
+}

src/sql/parts/notebook/cellViews/placeholderCell.component.html

@@ -0,0 +1,13 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
+	<div class="placeholder-cell-component" style="flex: 0 0 auto;">
+		<div class="placeholder-cell-component text">
+			<p>{{clickOn}} <a href="#" (click)="addCell('code')">{{plusCode}}</a> {{or}} <a href="#" (click)="addCell('markdown')">{{plusText}}</a> {{toAddCell}}</p>
+		</div>
+	</div>
+</div>

src/sql/parts/notebook/cellViews/placeholderCell.component.ts

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+*  Copyright (c) Microsoft Corporation. All rights reserved.
+*  Licensed under the Source EULA. See License.txt in the project root for license information.
+*--------------------------------------------------------------------------------------------*/
+import 'vs/css!./placeholder';
+
+import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, SimpleChange, OnChanges } from '@angular/core';
+import { CellView } from 'sql/parts/notebook/cellViews/interfaces';
+import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces';
+import { NotebookModel } from 'sql/parts/notebook/models/notebookModel';
+import { localize } from 'vs/nls';
+import { CellType } from 'sql/parts/notebook/models/contracts';
+
+
+export const PLACEHOLDER_SELECTOR: string = 'placeholder-cell-component';
+
+@Component({
+	selector: PLACEHOLDER_SELECTOR,
+	templateUrl: decodeURI(require.toUrl('./placeholderCell.component.html'))
+})
+
+export class PlaceholderCellComponent extends CellView implements OnInit, OnChanges {
+	@Input() cellModel: ICellModel;
+	@Input() set model(value: NotebookModel) {
+		this._model = value;
+	}
+
+	private _model: NotebookModel;
+
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		if (this.cellModel) {
+			this._register(this.cellModel.onOutputsChanged(() => {
+				this._changeRef.detectChanges();
+			}));
+		}
+	}
+
+	ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
+	}
+
+	get model(): NotebookModel {
+		return this._model;
+	}
+
+	get clickOn(): string {
+		return localize('clickOn','Click on');
+	}
+
+	get plusCode(): string {
+		return localize('plusCode', '+ Code');
+	}
+
+	get or(): string {
+		return localize('or', 'or');
+	}
+
+	get plusText(): string {
+		return localize('plusText', '+ Text');
+	}
+
+	get toAddCell(): string {
+		return localize('toAddCell', 'to add a code or text cell');
+	}
+
+	public addCell(cellType: string): void {
+		let type: CellType = <CellType>cellType;
+		if (!type) {
+			type = 'code';
+		}
+		this._model.addCell(<CellType>cellType);
+	}
+
+	public layout() {
+
+	}
+}