Display page number, title, and description in wizard page headers (#1766)

src/sql/platform/dialog/dialogContainer.component.ts

@@ -9,26 +9,36 @@ import 'vs/css!./media/dialogModal';
 import { Component, AfterContentInit, ViewChild, Input, Inject, forwardRef, ElementRef } from '@angular/core';
 import { ModelViewContent } from 'sql/parts/modelComponents/modelViewContent.component';
 import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService';
+import { DialogPane } from 'sql/platform/dialog/dialogPane';
+import { ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import { Event, Emitter } from 'vs/base/common/event';
-import { ComponentEventType } from '../../parts/modelComponents/interfaces';
 
 export interface DialogComponentParams extends IBootstrapParams {
 	modelViewId: string;
 	validityChangedCallback: (valid: boolean) => void;
 	onLayoutRequested: Event<string>;
+	dialogPane: DialogPane;
 }
 
 @Component({
 	selector: 'dialog-modelview-container',
 	providers: [],
 	template: `
-		<modelview-content [modelViewId]="modelViewId">
-		</modelview-content>
+		<div class="dialogContainer">
+			<div class="dialogModal-wizardHeader" *ngIf="_dialogPane && _dialogPane.displayPageTitle">
+				<div *ngIf="_dialogPane.pageNumber" class="wizardPageNumber">Step {{_dialogPane.pageNumber}}</div>
+				<h1 class="wizardPageTitle">{{_dialogPane.title}}</h1>
+				<div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div>
+			</div>
+			<modelview-content [modelViewId]="modelViewId">
+			</modelview-content>
+		</div>
 	`
 })
 export class DialogContainer implements AfterContentInit {
 	private _onResize = new Emitter<void>();
 	public readonly onResize: Event<void> = this._onResize.event;
+	private _dialogPane: DialogPane;
 
 	public modelViewId: string;
 	@ViewChild(ModelViewContent) private _modelViewContent: ModelViewContent;
@@ -41,6 +51,7 @@ export class DialogContainer implements AfterContentInit {
 				this.layout();
 			}
 		});
+		this._dialogPane = this._params.dialogPane;
 	}
 
 	ngAfterContentInit(): void {

src/sql/platform/dialog/dialogModal.ts

@@ -115,7 +115,7 @@ export class DialogModal extends Modal {
 		});
 
 		this._dialogPane = new DialogPane(this._dialog.title, this._dialog.content,
-			valid => this._dialog.notifyValidityChanged(valid), this._instantiationService);
+			valid => this._dialog.notifyValidityChanged(valid), this._instantiationService, false);
 		this._dialogPane.createBody(body);
 	}
 

src/sql/platform/dialog/dialogPane.ts

@@ -10,12 +10,11 @@ import 'vs/css!./media/dialogModal';
 import { NgModuleRef } from '@angular/core';
 
 import { IModalDialogStyles } from 'sql/base/browser/ui/modal/modal';
-import { Dialog, DialogTab } from 'sql/platform/dialog/dialogTypes';
+import { DialogTab } from 'sql/platform/dialog/dialogTypes';
 import { TabbedPanel, IPanelTab, IPanelView } from 'sql/base/browser/ui/panel/panel';
 import { bootstrapAngular } from 'sql/services/bootstrap/bootstrapService';
 import { DialogModule } from 'sql/platform/dialog/dialog.module';
 import { DialogComponentParams } from 'sql/platform/dialog/dialogContainer.component';
-import { DialogMessage } from 'sql/workbench/api/common/sqlExtHostTypes';
 
 import * as DOM from 'vs/base/browser/dom';
 import { Builder } from 'vs/base/browser/builder';
@@ -31,24 +30,21 @@ export class DialogPane extends Disposable implements IThemable {
 	// Validation
 	private _modelViewValidityMap = new Map<string, boolean>();
 
-	// HTML Elements
 	private _body: HTMLElement;
-	private _tabBar: HTMLElement;
-	private _tabs: HTMLElement[];
-	private _tabContent: HTMLElement[];
 	private _selectedTabIndex: number = 0; //TODO: can be an option
 	private _onTabChange = new Emitter<string>();
 	private _selectedTabContent: string;
+	public pageNumber?: number;
 
 	constructor(
-		private _title: string,
+		public title: string,
 		private _content: string | DialogTab[],
 		private _validityChangedCallback: (valid: boolean) => void,
-		private _instantiationService: IInstantiationService
+		private _instantiationService: IInstantiationService,
+		public displayPageTitle: boolean,
+		public description?: string,
 	) {
 		super();
-		this._tabs = [];
-		this._tabContent = [];
 	}
 
 	public createBody(container: HTMLElement): HTMLElement {
@@ -73,7 +69,7 @@ export class DialogPane extends Disposable implements IThemable {
 					});
 					this._tabbedPanel.pushTab({
 						title: tab.title,
-						identifier: 'dialogPane.' + this._title + '.' + tabIndex,
+						identifier: 'dialogPane.' + this.title + '.' + tabIndex,
 						view: {
 							render: (container) => {
 								if (tabContainer.parentElement === this._body) {
@@ -119,7 +115,8 @@ export class DialogPane extends Disposable implements IThemable {
 						tab.notifyValidityChanged(valid);
 					}
 				},
-				onLayoutRequested: this._onTabChange.event
+				onLayoutRequested: this._onTabChange.event,
+				dialogPane: this
 			} as DialogComponentParams,
 			undefined,
 			(moduleRef) => {

src/sql/platform/dialog/dialogTypes.ts

@@ -135,6 +135,7 @@ export class DialogButton implements sqlops.window.modelviewdialog.Button {
 export class WizardPage extends DialogTab {
 	public customButtons: DialogButton[];
 	private _enabled: boolean;
+	private _description: string;
 	private _onUpdate: Emitter<void> = new Emitter<void>();
 	public readonly onUpdate: Event<void> = this._onUpdate.event;
 
@@ -150,6 +151,15 @@ export class WizardPage extends DialogTab {
 		this._enabled = enabled;
 		this._onUpdate.fire();
 	}
+
+	public get description(): string {
+		return this._description;
+	}
+
+	public set description(description: string) {
+		this._description = description;
+		this._onUpdate.fire();
+	}
 }
 
 export class Wizard {
@@ -171,6 +181,7 @@ export class Wizard {
 	private _onMessageChange = new Emitter<DialogMessage>();
 	public readonly onMessageChange = this._onMessageChange.event;
 	private _message: DialogMessage;
+	public displayPageTitles: boolean;
 
 	constructor(public title: string) { }
 

src/sql/platform/dialog/media/dialogModal.css

@@ -30,3 +30,19 @@
 .footer-button.dialogModal-hidden {
 	margin: 0;
 }
+
+.dialogModal-wizardHeader {
+	padding: 10px 30px;
+}
+
+.dialogModal-wizardHeader h1 {
+	margin-top: 10px;
+	margin-bottom: 3px;
+	font-size: 1.5em;
+	font-weight: lighter;
+}
+
+.dialogContainer {
+	display: flex;
+	flex-direction: column
+}

src/sql/platform/dialog/wizardModal.ts

@@ -133,18 +133,28 @@ export class WizardModal extends Modal {
 		});
 		this._wizard.onPageAdded(page => {
 			this.registerPage(page);
+			this.updatePageNumbers();
 			this.showPage(this._wizard.currentPage, false);
 		});
 		this._wizard.onPageRemoved(page => {
 			let dialogPane = this._dialogPanes.get(page);
 			this._dialogPanes.delete(page);
+			this.updatePageNumbers();
 			this.showPage(this._wizard.currentPage, false);
 			dialogPane.dispose();
 		});
+		this.updatePageNumbers();
+	}
+
+	private updatePageNumbers(): void {
+		this._wizard.pages.forEach((page, index) => {
+			let dialogPane = this._dialogPanes.get(page);
+			dialogPane.pageNumber = index + 1;
+		});
 	}
 
 	private registerPage(page: WizardPage): void {
-		let dialogPane = new DialogPane(page.title, page.content, valid => page.notifyValidityChanged(valid), this._instantiationService);
+		let dialogPane = new DialogPane(page.title, page.content, valid => page.notifyValidityChanged(valid), this._instantiationService, this._wizard.displayPageTitles, page.description);
 		dialogPane.createBody(this._body);
 		this._dialogPanes.set(page, dialogPane);
 		page.onUpdate(() => this.setButtonsForPage(this._wizard.currentPage));