Add setFilter to DeclarativeTableComponent (#14143)

* Add setFilter to DeclarativeTableComponent

* fix tests

* Update param name

extensions/arc/src/ui/dashboards/postgres/postgresParametersPage.ts

@@ -367,16 +367,20 @@ export class PostgresParametersPage extends DashboardPage {
 	@debounce(500)
 	private onSearchFilter(): void {
 		if (!this.searchBox!.value) {
-			this.parametersTable.data = this._parameters.map(p => [p.parameterName, p.valueContainer, p.description, p.resetButton]);
+			this.parametersTable.setFilter(undefined);
 		} else {
 			this.filterParameters(this.searchBox!.value);
 		}
 	}
 
 	private filterParameters(search: string): void {
-		this.parametersTable.data = this._parameters
+		const filteredRowIndexes: number[] = [];
-			.filter(p => p.parameterName?.search(search) !== -1 || p.description?.search(search) !== -1)
+		this.parametersTable.data?.forEach((row, index) => {
-			.map(p => [p.parameterName, p.valueContainer, p.description, p.resetButton]);
+			if (row[0]?.search(search) !== -1 || row[2]?.search(search) !== -1) {
+				filteredRowIndexes.push(index);
+			}
+		});
+		this.parametersTable.setFilter(filteredRowIndexes);
 	}
 
 	private handleOnTextChanged(component: azdata.InputBoxComponent, currentValue: string | undefined): boolean {

extensions/machine-learning/src/test/views/utils.ts

@@ -107,6 +107,7 @@ export function createViewContext(): ViewTestContext {
 	let declarativeTable: () => azdata.DeclarativeTableComponent = () => Object.assign({}, componentBase, {
 		onDataChanged: undefined!,
 		onRowSelected: undefined!,
+		setFilter: undefined!,
 		data: [],
 		columns: []
 	});

extensions/notebook/src/test/common.ts

@@ -347,6 +347,7 @@ class TestDeclarativeTableComponent extends TestComponentBase implements azdata.
 	}
 	onDataChanged: vscode.Event<any> = this.onClick.event;
 	onRowSelected: vscode.Event<any> = this.onClick.event;
+	setFilter: undefined;
 	data: any[][];
 	columns: azdata.DeclarativeTableColumn[];
 }

extensions/notebook/src/test/managePackages/managePackagesDialog.test.ts

@@ -184,6 +184,7 @@ describe('Manage Package Dialog', () => {
 		let declarativeTable: () => azdata.DeclarativeTableComponent = () => Object.assign({}, componentBase, {
 			onDataChanged: undefined!,
 			onRowSelected: undefined!,
+			setFilter: undefined!,
 			data: [],
 			columns: []
 		});

src/sql/azdata.proposed.d.ts

@@ -300,6 +300,11 @@ declare module 'azdata' {
 
 	export interface DeclarativeTableComponent extends Component, DeclarativeTableProperties {
 		onRowSelected: vscode.Event<DeclarativeTableRowSelectedEvent>;
+		/**
+		 * Sets the filter currently applied to this table - only rows with index in the given array will be visible. undefined
+		 * will clear the filter
+		 */
+		setFilter(rowIndexes: number[] | undefined): void;
 	}
 
 	/*

src/sql/platform/dashboard/browser/interfaces.ts

@@ -28,7 +28,8 @@ export enum ComponentEventType {
  */
 export enum ModelViewAction {
 	SelectTab = 'selectTab',
-	AppendData = 'appendData'
+	AppendData = 'appendData',
+	Filter = 'filter'
 }
 
 /**

src/sql/workbench/api/common/extHostModelView.ts

@@ -1585,6 +1585,10 @@ class DeclarativeTableWrapper extends ComponentWrapper implements azdata.Declara
 		this.setProperty('selectEffect', v);
 	}
 
+	public setFilter(rowIndexes: number[]): void {
+		this._proxy.$doAction(this._handle, this._id, ModelViewAction.Filter, rowIndexes);
+	}
+
 	public toComponentShape(): IComponentShape {
 		// Overridden to ensure we send the correct properties mapping.
 		return <IComponentShape>{

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -183,7 +183,8 @@ export enum ModelComponentTypes {
 
 export enum ModelViewAction {
 	SelectTab = 'selectTab',
-	AppendData = 'appendData'
+	AppendData = 'appendData',
+	Filter = 'filter'
 }
 
 export enum ColumnSizingMode {

src/sql/workbench/browser/modelComponents/declarativeTable.component.html

@@ -16,7 +16,7 @@
 	<tbody role="rowgroup">
 		<ng-container *ngIf="data.length > 0">
 			<ng-container *ngFor="let row of data;let r = index;">
-				<tr class="declarative-table-row" [class.selected]="isRowSelected(r)" role="row">
+				<tr [style.display]="isFiltered(r) ? 'none' : ''" class="declarative-table-row" [class.selected]="isRowSelected(r)" role="row">
 					<ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
 						<td class="declarative-table-cell" [style.width]="getColumnWidth(c)"
 							[attr.aria-label]="getAriaLabel(r, c)"

src/sql/workbench/browser/modelComponents/declarativeTable.component.ts

@@ -15,7 +15,7 @@ import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBa
 import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
 import { equals as arrayEquals } from 'vs/base/common/arrays';
 import { localize } from 'vs/nls';
-import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
 import { convertSize } from 'sql/base/browser/dom';
 import { ILogService } from 'vs/platform/log/common/log';
 
@@ -36,6 +36,7 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 	@Input() modelStore: IModelStore;
 
 	private _data: azdata.DeclarativeTableCellValue[][] = [];
+	private _filteredRowIndexes: number[] | undefined = undefined;
 	private columns: azdata.DeclarativeTableColumn[] = [];
 	private _selectedRow: number;
 
@@ -311,10 +312,29 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		}
 	}
 
+	public doAction(action: string, ...args: any[]): void {
+		if (action === ModelViewAction.Filter) {
+			this._filteredRowIndexes = args[0];
+		}
+		this._changeRef.detectChanges();
+	}
+
+	/**
+	 * Checks whether a given row is filtered (not visible)
+	 * @param rowIndex The row to check
+	 */
+	public isFiltered(rowIndex: number): boolean {
+		if (this._filteredRowIndexes === undefined) {
+			return false;
+		}
+		return this._filteredRowIndexes.includes(rowIndex) ? false : true;
+	}
+
 	public get CSSStyles(): azdata.CssStyles {
 		return this.mergeCss(super.CSSStyles, {
 			'width': this.getWidth(),
 			'height': this.getHeight()
 		});
+
 	}
 }