Books/navigation (#6280)

* added previous and next buttons

* previous and next notebook API

* links for prev/next notebooks

* fixed first and last pages

* made code more readable

* addressed Kevin's comments

* moved logic over to BookTreeItem

* show buttons in dev mode only

* added BookTreeItemFormat interface

* added interface and enum

* removed localize call

src/sql/workbench/parts/notebook/notebook.component.html

@@ -19,5 +19,7 @@
 			<placeholder-cell-component [cellModel]="cell" [model]="model">
 			</placeholder-cell-component>
 		</div>
+		<div class="book-nav" #bookNav>
+		</div>
 	</div>
 </div>

src/sql/workbench/parts/notebook/notebook.component.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { nb } from 'azdata';
+import * as vscode from 'vscode';
 import { OnInit, Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnDestroy } from '@angular/core';
 
 import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -19,6 +20,7 @@ import { IAction, Action, IActionViewItem } from 'vs/base/common/actions';
 import { IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
+import * as DOM from 'vs/base/browser/dom';
 
 import { AngularDisposable } from 'sql/base/node/lifecycle';
 import { CellTypes, CellType } from 'sql/workbench/parts/notebook/models/contracts';
@@ -50,6 +52,8 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
 import { LabeledMenuItemActionItem, fillInActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { Button } from 'sql/base/browser/ui/button/button';
+import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { isUndefinedOrNull } from 'vs/base/common/types';
 
 
@@ -63,6 +67,8 @@ export const NOTEBOOK_SELECTOR: string = 'notebook-component';
 export class NotebookComponent extends AngularDisposable implements OnInit, OnDestroy, INotebookEditor {
 	@ViewChild('toolbar', { read: ElementRef }) private toolbar: ElementRef;
 	@ViewChild('container', { read: ElementRef }) private container: ElementRef;
+	@ViewChild('bookNav', { read: ElementRef }) private bookNav: ElementRef;
+
 	private _model: NotebookModel;
 	private _isInErrorState: boolean = false;
 	private _errorMessage: string;
@@ -127,6 +133,10 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
 		this.updateTheme(this.themeService.getColorTheme());
 		this.initActionBar();
+		if (this.contextKeyService.getContextKeyValue('isDevelopment') &&
+			this.contextKeyService.getContextKeyValue('bookOpened')) {
+			this.initNavSection();
+		}
 		this.setScrollPosition();
 		this.doLoad();
 	}
@@ -392,7 +402,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		this.notificationService.error(error);
 	}
 
-	protected initActionBar() {
+	protected initActionBar(): void {
 		let kernelContainer = document.createElement('div');
 		let kernelDropdown = new KernelsDropdown(kernelContainer, this.contextViewService, this.modelReady);
 		kernelDropdown.render(kernelContainer);
@@ -428,6 +438,24 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 			{ action: this._runAllCellsAction },
 			{ action: clearResultsButton }
 		]);
+	}
+
+	protected initNavSection(): void {
+		this.addButton(localize('previousButtonLabel', "Previous"),
+			() => this.previousPage());
+		this.addButton(localize('nextButtonLabel', "Next"),
+			() => this.nextPage());
+	}
+
+	private addButton(label: string, onDidClick?: () => void): void {
+		const container = DOM.append(this.bookNav.nativeElement, DOM.$('.dialog-message-button'));
+		let button = new Button(container);
+		button.icon = '';
+		button.label = label;
+		if (onDidClick) {
+			this._register(button.onDidClick(onDidClick));
+		}
+		this._register(attachButtonStyler(button, this.themeService));
 
 	}
 
@@ -582,6 +610,28 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		}
 	}
 
+	public async nextPage(): Promise<void> {
+		try {
+			let navProvider = this.notebookService.getNavigationProvider(this.model.notebookUri);
+			if (navProvider) {
+				navProvider.onNext(this.model.notebookUri);
+			}
+		} catch (error) {
+			this.notificationService.error(notebookUtils.getErrorMessage(error));
+		}
+	}
+
+	public previousPage() {
+		try {
+			let navProvider = this.notebookService.getNavigationProvider(this.model.notebookUri);
+			if (navProvider) {
+				navProvider.onPrevious(this.model.notebookUri);
+			}
+		} catch (error) {
+			this.notificationService.error(notebookUtils.getErrorMessage(error));
+		}
+	}
+
 	getSections(): INotebookSection[] {
 		return this.getSectionElements();
 	}

src/sql/workbench/parts/notebook/notebook.css

@@ -125,3 +125,15 @@
 .hc-black .monaco-workbench .notebook-action.new-notebook {
 	background: url('./media/dark/new_notebook_inverse.svg') center center no-repeat;
 }
+
+.notebookEditor .book-nav {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 5px;
+}
+
+.notebookEditor .book-nav .dialog-message-button {
+	min-width: 60px;
+	margin-right: 10px;
+}