Add notebook grid actions (#7181)

* Add notebook grid actions

* pr comments

src/sql/workbench/parts/notebook/browser/cellViews/media/output.css

@@ -468,3 +468,9 @@ plotly-output .plotly-wrapper {
 	display: block;
 	overflow-y: hidden;
 }
+
+output-component .grid-panel .action-label.icon {
+	min-width: 16px;
+	margin-right: 6px;
+	margin-bottom: 6px;
+}

src/sql/workbench/parts/notebook/browser/outputs/gridOutput.component.ts

@@ -32,10 +32,11 @@ import { getErrorMessage } from 'vs/base/common/errors';
 import { ISerializationService, SerializeDataParams } from 'sql/platform/serialization/common/serializationService';
 import { SaveResultAction } from 'sql/workbench/parts/query/browser/actions';
 import { ResultSerializer, SaveResultsResponse } from 'sql/workbench/parts/query/common/resultSerializer';
+import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
 
 @Component({
 	selector: GridOutputComponent.SELECTOR,
-	template: `<div #output class="notebook-cellTable"></div>`
+	template: `<div #output class="notebook-cellTable" (mouseover)="hover=true" (mouseleave)="hover=false"></div>`
 })
 export class GridOutputComponent extends AngularDisposable implements IMimeComponent, OnInit {
 	public static readonly SELECTOR: string = 'grid-output';
@@ -46,6 +47,7 @@ export class GridOutputComponent extends AngularDisposable implements IMimeCompo
 	private _cellModel: ICellModel;
 	private _bundleOptions: MimeModel.IOptions;
 	private _table: DataResourceTable;
+	private _hover: boolean;
 	constructor(
 		@Inject(IInstantiationService) private instantiationService: IInstantiationService,
 		@Inject(IThemeService) private readonly themeService: IThemeService
@@ -73,6 +75,14 @@ export class GridOutputComponent extends AngularDisposable implements IMimeCompo
 		}
 	}
 
+	@Input() set hover(value: boolean) {
+		// only reaction on hover changes
+		if (this._hover !== value) {
+			this.toggleActionbar(value);
+			this._hover = value;
+		}
+	}
+
 	ngOnInit() {
 		this.renderGrid();
 	}
@@ -89,6 +99,8 @@ export class GridOutputComponent extends AngularDisposable implements IMimeCompo
 			outputElement.appendChild(this._table.element);
 			this._register(attachTableStyler(this._table, this.themeService));
 			this.layout();
+			// By default, do not show the actions
+			this.toggleActionbar(false);
 			this._table.onAdd();
 			this._initialized = true;
 		}
@@ -97,7 +109,19 @@ export class GridOutputComponent extends AngularDisposable implements IMimeCompo
 	layout(): void {
 		if (this._table) {
 			let maxSize = Math.min(this._table.maximumSize, 500);
-			this._table.layout(maxSize);
+			this._table.layout(maxSize, undefined, ActionsOrientation.HORIZONTAL);
+		}
+	}
+
+	private toggleActionbar(visible: boolean) {
+		let outputElement = <HTMLElement>this.output.nativeElement;
+		let actionsContainers: HTMLElement[] = Array.prototype.slice.call(outputElement.getElementsByClassName('actions-container'));
+		if (actionsContainers && actionsContainers.length) {
+			if (visible) {
+				actionsContainers.forEach(container => container.style.visibility = 'visible');
+			} else {
+				actionsContainers.forEach(container => container.style.visibility = 'hidden');
+			}
 		}
 	}
 }
@@ -125,7 +149,7 @@ class DataResourceTable extends GridTableBase<any> {
 	}
 
 	protected getCurrentActions(): IAction[] {
-		return [];
+		return this.getContextActions();
 	}
 
 	protected getContextActions(): IAction[] {

src/sql/workbench/parts/query/browser/gridPanel.ts

@@ -3,6 +3,8 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import 'vs/css!./media/gridPanel';
+
 import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import QueryRunner, { QueryGridDataProvider } from 'sql/platform/query/common/queryRunner';
 import { VirtualizedCollection, AsyncDataProvider } from 'sql/base/browser/ui/table/asyncDataView';
@@ -416,7 +418,22 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
 		this.scrolled = false;
 	}
 
-	private build(): void {
+	// actionsOrientation controls the orientation (horizontal or vertical) of the actionBar
+	private build(actionsOrientation?: ActionsOrientation): void {
+
+		// Default is VERTICAL
+		if (isUndefinedOrNull(actionsOrientation)) {
+			actionsOrientation = ActionsOrientation.VERTICAL;
+		}
+
+		let actionBarContainer = document.createElement('div');
+
+		// Create a horizontal actionbar if orientation passed in is HORIZONTAL
+		if (actionsOrientation === ActionsOrientation.HORIZONTAL) {
+			actionBarContainer.className = 'grid-panel action-bar horizontal';
+			this.container.appendChild(actionBarContainer);
+		}
+
 		let tableContainer = document.createElement('div');
 		tableContainer.style.display = 'inline-block';
 		tableContainer.style.width = `calc(100% - ${ACTIONBAR_WIDTH}px)`;
@@ -459,13 +476,12 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
 		if (this.styles) {
 			this.table.style(this.styles);
 		}
-
-		let actionBarContainer = document.createElement('div');
-		actionBarContainer.style.width = ACTIONBAR_WIDTH + 'px';
-		actionBarContainer.style.display = 'inline-block';
-		actionBarContainer.style.height = '100%';
-		actionBarContainer.style.verticalAlign = 'top';
-		this.container.appendChild(actionBarContainer);
+		// If the actionsOrientation passed in is "VERTICAL" (or no actionsOrientation is passed in at all), create a vertical actionBar
+		if (actionsOrientation === ActionsOrientation.VERTICAL) {
+			actionBarContainer.className = 'grid-panel action-bar vertical';
+			actionBarContainer.style.width = ACTIONBAR_WIDTH + 'px';
+			this.container.appendChild(actionBarContainer);
+		}
 		let context: IGridActionContext = {
 			gridDataProvider: this.gridDataProvider,
 			table: this.table,
@@ -474,7 +490,7 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
 			resultId: this.resultSet.id
 		};
 		this.actionBar = new ActionBar(actionBarContainer, {
-			orientation: ActionsOrientation.VERTICAL, context: context
+			orientation: actionsOrientation, context: context
 		});
 		// update context before we run an action
 		this.selectionModel.onSelectedRangesChanged.subscribe(e => {
@@ -602,15 +618,17 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
 
 	protected abstract getContextActions(): IAction[];
 
-	public layout(size?: number): void {
+	// The actionsOrientation passed in controls the actionBar orientation
+	public layout(size?: number, orientation?: Orientation, actionsOrientation?: ActionsOrientation): void {
 		if (!this.table) {
-			this.build();
+			this.build(actionsOrientation);
 		}
 		if (!size) {
 			size = this.currentHeight;
 		} else {
 			this.currentHeight = size;
 		}
+		// Table is always called with Orientation as VERTICAL
 		this.table.layout(size, Orientation.VERTICAL);
 	}
 

src/sql/workbench/parts/query/browser/media/gridPanel.css

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.grid-panel.action-bar.vertical {
+	display : inline-block;
+	height : 100%;
+	vertical-align : top;
+}
+
+.grid-panel.action-bar.horizontal {
+	width : 100%;
+	display: flex;
+}