Cleanup and fixes for resource viewer and filter plugin (#12154)

* Cleanup and fixes for resource viewer and filter plugin

* fix strict nulls

src/sql/azdata.proposed.d.ts

@@ -106,22 +106,55 @@ declare module 'azdata' {
 		DataGridProvider = 'DataGridProvider'
 	}
 
+	export type DataGridColumnType = 'hyperlink' | 'text' | 'image';
 	/**
 	 * A column in a data grid
 	 */
 	export interface DataGridColumn {
 		/**
 		* The text to display on the column heading.
-		**/
+		 */
 		name: string;
+
 		/**
 		* The property name in the DataGridItem
-		**/
+		 */
 		field: string;
+
 		/**
 		* A unique identifier for the column within the grid.
 		*/
 		id: string;
+
+		/**
+		 * The type of column this is. This is used to determine how to render the contents.
+		 */
+		type: DataGridColumnType;
+
+		/**
+		 * Whether this column is sortable.
+		 */
+		sortable?: boolean;
+
+		/**
+		 * Whether this column is filterable
+		 */
+		filterable?: boolean;
+
+		/**
+		 * If false, column can no longer be resized.
+		 */
+		resizable?: boolean;
+
+		/**
+		 * If set to a non-empty string, a tooltip will appear on hover containing the string.
+		 */
+		tooltip?: string;
+
+		/**
+		 * Width of the column in pixels.
+		 */
+		width?: number
 	}
 
 	/**
@@ -132,10 +165,14 @@ declare module 'azdata' {
 		 * A unique identifier for this item
 		 */
 		id: string;
+		/**
+		 * The optional icon to display for this item
+		 */
+		iconPath?: string;
 		/**
 		 * The other properties that will be displayed in the grid
 		 */
-		[key: string]: string;
+		[key: string]: any;
 	}
 
 	/**

src/sql/base/browser/ui/table/formatters.ts

@@ -68,6 +68,10 @@ export function textFormatter(row: number | undefined, cell: any | undefined, va
 	return `<span title="${titleValue}" class="${cellClasses}">${valueToDisplay}</span>`;
 }
 
+export function imageFormatter(row: number | undefined, cell: any | undefined, value: any, columnDef: any | undefined, dataContext: any | undefined): string {
+	return `<img src="${value.text}" />`;
+}
+
 /**
  * Provide slick grid cell with encoded ariaLabel and plain text.
  * text will be escaped by the textFormatter and ariaLabel will be consumed by slickgrid directly.

src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts

@@ -10,7 +10,7 @@ import { addDisposableListener } from 'vs/base/browser/dom';
 import { DisposableStore } from 'vs/base/common/lifecycle';
 import { withNullAsUndefined } from 'vs/base/common/types';
 
-interface IExtendedColumn<T> extends Slick.Column<T> {
+export interface IExtendedColumn<T> extends Slick.Column<T> {
 	filterValues?: Array<string>;
 }
 
@@ -84,6 +84,9 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		if (column.id === '_detail_selector') {
 			return;
 		}
+		if ((<any>column).filterable === false) {
+			return;
+		}
 		const $el = jQuery('<div tabIndex="0"></div>')
 			.addClass('slick-header-menubutton')
 			.data('column', column);

src/sql/workbench/browser/editor/resourceViewer/resourceViewerInput.ts

@@ -7,38 +7,32 @@ import * as nls from 'vs/nls';
 import { EditorInput } from 'vs/workbench/common/editor';
 import { Event, Emitter } from 'vs/base/common/event';
 import { URI } from 'vs/base/common/uri';
-import { ResourceViewerState } from 'sql/workbench/common/editor/resourceViewer/resourceViewerState';
-import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
+import { IDataGridProviderService } from 'sql/workbench/services/dataGridProvider/common/dataGridProviderService';
+import { onUnexpectedError } from 'vs/base/common/errors';
+import { getDataGridFormatter } from 'sql/workbench/services/dataGridProvider/browser/dataGridProviderUtils';
 
 export interface ColumnDefinition extends Slick.Column<Slick.SlickData> {
 	name: string;
+	filterable?: boolean;
 }
 
 export class ResourceViewerInput extends EditorInput {
 
 	public static ID: string = 'workbench.editorInput.resourceViewerInput';
-	private _data: TableDataView<Slick.SlickData>;
-	private _columns: string[] = [];
-	private _state: ResourceViewerState;
+	private _data: Slick.SlickData[] = [];
+	private _columns: ColumnDefinition[] = [];
 
 	private _onColumnsChanged = new Emitter<Slick.Column<Slick.SlickData>[]>();
 	public onColumnsChanged: Event<Slick.Column<Slick.SlickData>[]> = this._onColumnsChanged.event;
 
-	constructor() {
-		super();
-		this._state = new ResourceViewerState();
-		let searchFn = (val: { [x: string]: string }, exp: string): Array<number> => {
-			let ret = new Array<number>();
-			for (let i = 0; i < this._columns.length; i++) {
-				let colVal = val[this._columns[i]];
-				if (colVal && colVal.toLocaleLowerCase().indexOf(exp.toLocaleLowerCase()) > -1) {
-					ret.push(i);
-				}
-			}
-			return ret;
-		};
+	private _onDataChanged = new Emitter<void>();
+	public onDataChanged: Event<void> = this._onDataChanged.event;
+
+	constructor(private _providerId: string, @IDataGridProviderService private _dataGridProvider: IDataGridProviderService) {
+		super();
+		this.fetchColumns();
+		this.fetchItems();
 
-		this._data = new TableDataView<Slick.SlickData>(undefined, searchFn, undefined, undefined);
 	}
 
 	public getTypeId(): string {
@@ -49,39 +43,49 @@ export class ResourceViewerInput extends EditorInput {
 		return nls.localize('resourceViewerInput.resourceViewer', "Resource Viewer");
 	}
 
-	public get data(): TableDataView<Slick.SlickData> {
+	public get data(): Slick.SlickData[] {
 		return this._data;
 	}
 
-	public get columnDefinitions(): ColumnDefinition[] {
-		if (this._columns) {
-			return this._columns.map(i => {
-				return {
-					id: i,
-					field: i,
-					name: i,
-					sortable: true
-				};
-			});
-		} else {
-			return [];
-		}
-	}
-
-	public set columns(columns: Array<string>) {
+	public set columns(columns: ColumnDefinition[]) {
 		this._columns = columns;
-		this._onColumnsChanged.fire(this.columnDefinitions);
+		this._onColumnsChanged.fire(this._columns);
 	}
 
-	public get state(): ResourceViewerState {
-		return this._state;
+	public get columns(): ColumnDefinition[] {
+		return this._columns;
 	}
 
 	isDirty(): boolean {
-		return false; // TODO chgagnon implement
+		return false;
 	}
 
 	public get resource(): URI | undefined {
 		return undefined;
 	}
+
+	private fetchColumns(): void {
+		this._dataGridProvider.getDataGridColumns(this._providerId).then(columns => {
+			this.columns = columns.map(col => {
+				return {
+					name: col.name,
+					field: col.field,
+					id: col.id,
+					formatter: getDataGridFormatter(col.type),
+					sortable: col.sortable ?? true,
+					filterable: col.filterable ?? true,
+					resizable: col.resizable ?? true,
+					tooltip: col.tooltip,
+					width: col.width
+				};
+			});
+		}).catch(err => onUnexpectedError(err));
+	}
+
+	private fetchItems(): void {
+		this._dataGridProvider.getDataGridItems(this._providerId).then(items => {
+			this._data = items;
+			this._onDataChanged.fire();
+		}).catch(err => onUnexpectedError(err));
+	}
 }

src/sql/workbench/common/editor/resourceViewer/resourceViewerState.ts

@@ -1,34 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-import { IDisposable } from 'vs/base/common/lifecycle';
-import { Emitter } from 'vs/base/common/event';
-
-export interface IResourceViewerStateChangedEvent {
-
-}
-
-export interface INewResourceViewerState {
-	// TODO - chgagnon implement state
-}
-
-export class ResourceViewerState implements IDisposable {
-
-	private readonly _onResourceViewerStateChange = new Emitter<IResourceViewerStateChangedEvent>();
-	public readonly onResourceViewerStateChange = this._onResourceViewerStateChange.event;
-
-	public dispose(): void {
-	}
-
-	public change(newState: INewResourceViewerState): void {
-		let changeEvent: IResourceViewerStateChangedEvent = {
-		};
-		let somethingChanged = false;
-
-		if (somethingChanged) {
-			this._onResourceViewerStateChange.fire(changeEvent);
-		}
-	}
-}

src/sql/workbench/contrib/resourceViewer/browser/media/resourceViewerTable.css

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.resource-viewer-table .slick-cell {
+	border-right: none;
+}
+

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

@@ -11,14 +11,18 @@ import { ResourceViewerInput } from 'sql/workbench/browser/editor/resourceViewer
 import { CommandsRegistry } from 'vs/platform/commands/common/commands';
 import { ServicesAccessor, IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IEditorService, ACTIVE_GROUP } from 'vs/workbench/services/editor/common/editorService';
+import { isString } from 'vs/base/common/types';
 
 CommandsRegistry.registerCommand({
-	id: 'resourceViewer.newResourceViewer',
-	handler: (accessor: ServicesAccessor, ...args: any[]): void => {
+	id: 'resourceViewer.openResourceViewer',
+	handler: async (accessor: ServicesAccessor, ...args: any[]): Promise<void> => {
 		const instantiationService: IInstantiationService = accessor.get(IInstantiationService);
 		const editorService: IEditorService = accessor.get(IEditorService);
+		if (!isString(args[0])) {
+			throw new Error('First argument must be the ProviderId');
+		}
 
-		const resourceViewerInput = instantiationService.createInstance(ResourceViewerInput);
+		const resourceViewerInput = instantiationService.createInstance(ResourceViewerInput, args[0]);
 		editorService.openEditor(resourceViewerInput, { pinned: true }, ACTIVE_GROUP);
 	}
 });

src/sql/workbench/contrib/resourceViewer/browser/resourceViewerEditor.ts

@@ -12,7 +12,6 @@ import { EditorOptions, IEditorOpenContext } from 'vs/workbench/common/editor';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { IResourceViewerStateChangedEvent } from 'sql/workbench/common/editor/resourceViewer/resourceViewerState';
 import { ResourceViewerInput } from 'sql/workbench/browser/editor/resourceViewer/resourceViewerInput';
 import { ResourceViewerTable } from 'sql/workbench/contrib/resourceViewer/browser/resourceViewerTable';
 import { EditorPane } from 'vs/workbench/browser/parts/editor/editorPane';
@@ -39,22 +38,22 @@ export class ResourceViewerEditor extends EditorPane {
 		this._container.className = 'resource-viewer';
 		parent.appendChild(this._container);
 
-		this._createHeader();
-
-		let tableContainer = this.createResourceViewerTable();
+		const header = this.createHeader();
+		const tableContainer = this.createResourceViewerTable();
 
+		this._container.appendChild(header);
 		this._container.appendChild(tableContainer);
 	}
 
-	private _createHeader(): void {
+	private createHeader(): HTMLElement {
 		const header = document.createElement('div');
 		header.className = 'resource-viewer-header';
-		this._container.appendChild(header);
 		this._actionBar = this._register(new Taskbar(header));
 
 		this._actionBar.setContent([
 			// TODO - chgagnon add actions
 		]);
+		return header;
 	}
 
 	private createResourceViewerTable(): HTMLElement {
@@ -78,33 +77,19 @@ export class ResourceViewerEditor extends EditorPane {
 		this._inputDisposables.clear();
 
 		this._resourceViewerTable.data = input.data;
+		this._resourceViewerTable.columns = input.columns;
 		this._inputDisposables.add(input.onColumnsChanged(columns => {
 			this._resourceViewerTable.columns = columns;
 		}));
-
-		this._inputDisposables.add(input.data.onRowCountChange(() => {
-			this._resourceViewerTable.updateRowCount();
-		}));
-
-		this._inputDisposables.add(input.data.onFilterStateChange(() => {
-			this._resourceViewerTable.invalidateAllRows();
-			this._resourceViewerTable.updateRowCount();
+		this._inputDisposables.add(input.onDataChanged(() => {
+			this._resourceViewerTable.data = input.data;
 		}));
 
 		this._actionBar.context = input;
 
-		this._inputDisposables.add(input.state.onResourceViewerStateChange(e => this.onStateChange(e)));
-		this.onStateChange({
-		});
-
 		this._resourceViewerTable.focus();
 	}
 
-
-	private onStateChange(e: IResourceViewerStateChangedEvent): void {
-
-	}
-
 	public layout(dimension: DOM.Dimension): void {
 		this._container.style.width = dimension.width + 'px';
 		this._container.style.height = dimension.height + 'px';

src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts

@@ -3,65 +3,92 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import 'vs/css!./media/resourceViewerTable';
 import { Table } from 'sql/base/browser/ui/table/table';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler, attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
 
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
-import { Dimension } from 'vs/base/browser/dom';
-import { textFormatter, slickGridDataItemColumnValueExtractor } from 'sql/base/browser/ui/table/formatters';
-import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
+import { slickGridDataItemColumnValueExtractor } from 'sql/base/browser/ui/table/formatters';
+import { HeaderFilter, CommandEventArgs, IExtendedColumn } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
 import { Disposable } from 'vs/base/common/lifecycle';
+import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 
 export class ResourceViewerTable extends Disposable {
 
 	private _resourceViewerTable!: Table<Slick.SlickData>;
-	private _data: TableDataView<Slick.SlickData> | undefined;
+	private _dataView: TableDataView<Slick.SlickData>;
 
 	constructor(parent: HTMLElement, @IWorkbenchThemeService private _themeService: IWorkbenchThemeService) {
 		super();
+		let filterFn = (data: Array<Slick.SlickData>): Array<Slick.SlickData> => {
+			return data.filter(item => this.filter(item));
+		};
+
+		this._dataView = new TableDataView<Slick.SlickData>(undefined, undefined, undefined, filterFn);
 		this._resourceViewerTable = this._register(new Table(parent, {
 			sorter: (args) => {
-				this._data?.sort(args);
+				this._dataView.sort(args);
 			}
 		}, {
 			dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor
 		}));
 		this._resourceViewerTable.setSelectionModel(new RowSelectionModel());
-		attachTableStyler(this._resourceViewerTable, this._themeService);
+		let filterPlugin = new HeaderFilter<Slick.SlickData>();
+		this._register(attachButtonStyler(filterPlugin, this._themeService));
+		this._register(attachTableStyler(this._resourceViewerTable, this._themeService));
+		filterPlugin.onFilterApplied.subscribe(() => {
+			this._dataView.filter();
+			this._resourceViewerTable.grid.render();
+			this._resourceViewerTable.grid.resetActiveCell();
+			this._resourceViewerTable.grid.resizeCanvas();
+		});
+		filterPlugin.onCommand.subscribe((e, args: CommandEventArgs<Slick.SlickData>) => {
+			// Convert filter command to SlickGrid sort args
+			this._dataView.sort({
+				grid: args.grid,
+				multiColumnSort: false,
+				sortCol: args.column,
+				sortAsc: args.command === 'sort-asc'
+			});
+			this._resourceViewerTable.grid.invalidate();
+			this._resourceViewerTable.grid.render();
+		});
+		this._resourceViewerTable.registerPlugin(filterPlugin);
 	}
 
-	public set data(data: TableDataView<Slick.SlickData>) {
-		this._data = data;
-		this._resourceViewerTable.setData(data);
+	public set data(data: Slick.SlickData[]) {
+		this._dataView.clear();
+		this._dataView.push(data);
+		this._resourceViewerTable.grid.setData(this._dataView, true);
+		this._resourceViewerTable.grid.render();
 	}
 
 	public set columns(columns: Slick.Column<Slick.SlickData>[]) {
-		this._resourceViewerTable.columns = columns.map(column => {
-			column.formatter = textFormatter;
-			return column;
-		});
-		this._resourceViewerTable.autosizeColumns();
-	}
-
-	public updateRowCount(): void {
-		this._resourceViewerTable.updateRowCount();
-	}
-
-	public invalidateAllRows(): void {
-		this._resourceViewerTable.grid.invalidateAllRows();
-	}
-
-	public autosizeColumns(): void {
-		this._resourceViewerTable.autosizeColumns();
+		this._resourceViewerTable.columns = columns;
 	}
 
 	public focus(): void {
 		this._resourceViewerTable.focus();
 	}
 
-	public layout(dimension: Dimension): void {
-		this._resourceViewerTable.layout(dimension);
-		this._resourceViewerTable.autosizeColumns();
+	private filter(item: Slick.SlickData) {
+		const columns = this._resourceViewerTable.grid.getColumns();
+		let value = true;
+		for (let i = 0; i < columns.length; i++) {
+			const col: IExtendedColumn<Slick.SlickData> = columns[i];
+			if (!col.field) {
+				continue;
+			}
+			let filterValues = col.filterValues;
+			if (filterValues && filterValues.length > 0) {
+				if (item._parent) {
+					value = value && !!filterValues.find(x => x === item._parent[col.field!]);
+				} else {
+					value = value && !!filterValues.find(x => x === item[col.field!]);
+				}
+			}
+		}
+		return value;
 	}
 }

src/sql/workbench/services/dataGridProvider/browser/dataGridProviderUtils.ts

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import { textFormatter, hyperLinkFormatter, imageFormatter } from 'sql/base/browser/ui/table/formatters';
+
+export function getDataGridFormatter(formatterType: azdata.DataGridColumnType): Slick.Formatter<any> {
+	switch (formatterType) {
+		case 'text':
+			return textFormatter;
+		case 'hyperlink':
+			return hyperLinkFormatter;
+		case 'image':
+			return imageFormatter;
+	}
+}