From 862ffcf7d2fb59a724a993c2a7dc0d87e76f5108 Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Mon, 12 Apr 2021 13:05:19 -0700
Subject: [PATCH] fix search box issue (#15097)

* fix search box issue

* fix compilation error
---
 src/sql/base/browser/ui/table/media/table.css |  2 ++
 .../ui/table/plugins/headerFilter.plugin.ts   | 22 ++++++++++++-------
 .../browser/asmtResultsView.component.ts      |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/sql/base/browser/ui/table/media/table.css b/src/sql/base/browser/ui/table/media/table.css
index 590e7c792c..be8a83a78a 100644
--- a/src/sql/base/browser/ui/table/media/table.css
+++ b/src/sql/base/browser/ui/table/media/table.css
@@ -99,6 +99,8 @@
 	white-space: nowrap;
 	width: 200px;
 	align-content: flex-start;
+	display: flex;
+	flex-direction: column;
 }
 
 .slick-header-menu .filter .filter-option {
diff --git a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts
index 1ae60e9adf..d1a3da36fd 100644
--- a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts
+++ b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts
@@ -139,12 +139,12 @@ export class HeaderFilter<T extends Slick.SlickData> {
 			.appendTo($item);
 	}
 
-	private addMenuInput(menu: JQuery<HTMLElement>, columnDef: Slick.Column<T>) {
+	private addMenuInput(menu: JQuery<HTMLElement>, columnDef: Slick.Column<T>): void {
 		const self = this;
 		jQuery('<input class="input" placeholder="Search" style="margin-top: 5px; width: 206px">')
 			.data('column', columnDef)
-			.bind('keyup', (e) => {
-				const filterVals = this.getFilterValuesByInput(jQuery(e.target));
+			.bind('keyup', async (e) => {
+				const filterVals = await this.getFilterValuesByInput(jQuery(e.target));
 				self.updateFilterInputs(menu, columnDef, filterVals);
 			})
 			.appendTo(menu);
@@ -375,14 +375,20 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		return Array.from(seen);
 	}
 
-	private getFilterValuesByInput($input: JQuery<HTMLElement>): Array<string> {
+	private async getFilterValuesByInput($input: JQuery<HTMLElement>): Promise<Array<string>> {
 		const column = $input.data('column'),
 			filter = $input.val() as string,
-			dataView = this.grid.getData() as Slick.DataProvider<T>,
+			dataView = this.grid.getData() as IDisposableDataProvider<T>,
 			seen: Set<any> = new Set();
 
-		dataView.getItems().forEach(item => {
-			const value = item[column.field];
+		let columnValues: any[];
+		if (dataView.getColumnValues) {
+			columnValues = await dataView.getColumnValues(this.columnDef);
+		} else {
+			columnValues = dataView.getItems().map(item => item[column.field]);
+		}
+
+		columnValues.forEach(value => {
 			const valueArr = value instanceof Array ? value : [(!value ? '' : value)];
 			if (filter.length > 0) {
 				const lowercaseFilter = filter.toString().toLowerCase();
@@ -399,7 +405,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		return Array.from(seen).sort((v) => { return v; });
 	}
 
-	private getAllFilterValues(data: Array<Slick.SlickData>, column: Slick.Column<T>) {
+	private getAllFilterValues(data: Array<T>, column: Slick.Column<T>) {
 		const seen: Set<any> = new Set();
 
 		data.forEach(items => {
diff --git a/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts b/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts
index caf472b169..c0e6f45e2d 100644
--- a/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts
+++ b/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts
@@ -586,7 +586,7 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom
 		return seen.sort((v) => { return v; });
 	}
 
-	private getFilterValuesByInput($input: JQuery<HTMLElement>): Array<string> {
+	private async getFilterValuesByInput($input: JQuery<HTMLElement>): Promise<Array<string>> {
 		const column = $input.data('column'),
 			filter = $input.val() as string,
 			dataView = this['grid'].getData() as Slick.DataProvider<Slick.SlickData>,