From 30f55be67d171535c4de1d8edd0ee4fb6a379af5 Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Thu, 18 Feb 2021 00:10:41 -0800
Subject: [PATCH] fix the header filter plugin issue (#14333)

---
 src/sql/base/browser/ui/table/interfaces.ts   |  4 +++
 .../browser/ui/table/media/slick.grid.css     | 12 ++++++++
 src/sql/base/browser/ui/table/media/table.css | 11 ++++----
 .../ui/table/plugins/headerFilter.plugin.ts   | 28 ++++++++-----------
 .../resourceViewer/resourceViewerInput.ts     |  4 +--
 5 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/sql/base/browser/ui/table/interfaces.ts b/src/sql/base/browser/ui/table/interfaces.ts
index eb56fea0a6..65df5bd48c 100644
--- a/src/sql/base/browser/ui/table/interfaces.ts
+++ b/src/sql/base/browser/ui/table/interfaces.ts
@@ -29,3 +29,7 @@ export interface ITableConfiguration<T> {
 	columns?: Slick.Column<T>[];
 	sorter?: ITableSorter<T>;
 }
+
+export interface FilterableColumn<T> extends Slick.Column<T> {
+	filterable?: boolean;
+}
diff --git a/src/sql/base/browser/ui/table/media/slick.grid.css b/src/sql/base/browser/ui/table/media/slick.grid.css
index ef18056012..5f82edc472 100644
--- a/src/sql/base/browser/ui/table/media/slick.grid.css
+++ b/src/sql/base/browser/ui/table/media/slick.grid.css
@@ -186,3 +186,15 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
+
+.slick-header-column.slick-header-with-filter {
+	display: flex;
+}
+
+.slick-header-with-filter .slick-column-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: inline-block;
+	flex: 1 1 auto;
+}
diff --git a/src/sql/base/browser/ui/table/media/table.css b/src/sql/base/browser/ui/table/media/table.css
index aa44372176..71155a146d 100644
--- a/src/sql/base/browser/ui/table/media/table.css
+++ b/src/sql/base/browser/ui/table/media/table.css
@@ -37,14 +37,15 @@
 .slick-header-menubutton {
 	background-position: center center;
 	background-repeat: no-repeat;
-	bottom: 0;
 	cursor: pointer;
 	display: inline-block;
-	position: absolute;
-	right: 10px;
-	top: 0;
-	width: 18px;
+	width: 16px;
 	background-image: url('down.svg');
+	flex: 0 0 auto;
+	margin-right: 2px;
+	background-color: transparent;
+	border: 0px;
+	padding: 0px;
 }
 
 .vs-dark .slick-header-menubutton,
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 d1b3408ef8..3c2e2a9cf0 100644
--- a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts
+++ b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts
@@ -5,6 +5,7 @@ import { IButtonStyles } from 'vs/base/browser/ui/button/button';
 import { localize } from 'vs/nls';
 
 import { Button } from 'sql/base/browser/ui/button/button';
+import { FilterableColumn } from 'sql/base/browser/ui/table/interfaces';
 import { escape } from 'sql/base/common/strings';
 import { addDisposableListener } from 'vs/base/browser/dom';
 import { DisposableStore } from 'vs/base/common/lifecycle';
@@ -20,6 +21,8 @@ export interface CommandEventArgs<T extends Slick.SlickData> {
 	command: string
 }
 
+const ShowFilterText: string = localize('headerFilter.showFilter', "Show Filter");
+
 export class HeaderFilter<T extends Slick.SlickData> {
 
 	public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: IExtendedColumn<T> }>();
@@ -84,25 +87,18 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		if (column.id === '_detail_selector') {
 			return;
 		}
-		if ((<any>column).filterable === false) {
+		if ((<FilterableColumn<T>>column).filterable === false) {
 			return;
 		}
-		const $el = jQuery('<div tabIndex="0"></div>')
+		args.node.classList.add('slick-header-with-filter');
+		const $el = jQuery(`<button aria-label="${ShowFilterText}" title="${ShowFilterText}"></button>`)
 			.addClass('slick-header-menubutton')
 			.data('column', column);
 
-		$el.bind('click', (e: KeyboardEvent) => {
-			this.showFilter(e);
-			e.preventDefault();
-			e.stopPropagation();
-		}).appendTo(args.node);
-		$el.bind('keydown', (e: KeyboardEvent) => {
-			if (e.key === 'Enter' || e.keyCode === 13) {
-				this.showFilter(e);
-				e.preventDefault();
-				e.stopPropagation();
-			}
-		}).appendTo(args.node);
+		$el.click(() => {
+			this.showFilter($el[0]);
+		});
+		$el.appendTo(args.node);
 	}
 
 	private handleBeforeHeaderCellDestroy(e: Event, args: Slick.OnBeforeHeaderCellDestroyEventArgs<T>) {
@@ -165,8 +161,8 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		});
 	}
 
-	private showFilter(e: KeyboardEvent) {
-		const target = withNullAsUndefined(e.target);
+	private showFilter(element: HTMLElement) {
+		const target = withNullAsUndefined(element);
 		const $menuButton = jQuery(target);
 		this.columnDef = $menuButton.data('column');
 
diff --git a/src/sql/workbench/browser/editor/resourceViewer/resourceViewerInput.ts b/src/sql/workbench/browser/editor/resourceViewer/resourceViewerInput.ts
index 22247cddbd..364030d020 100644
--- a/src/sql/workbench/browser/editor/resourceViewer/resourceViewerInput.ts
+++ b/src/sql/workbench/browser/editor/resourceViewer/resourceViewerInput.ts
@@ -12,12 +12,12 @@ import { DataGridProvider, IDataGridProviderService } from 'sql/workbench/servic
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
 import { getDataGridFormatter } from 'sql/workbench/services/dataGridProvider/browser/dataGridProviderUtils';
+import { FilterableColumn } from 'sql/base/browser/ui/table/interfaces';
 
-export interface ColumnDefinition extends Slick.Column<azdata.DataGridItem> {
+export interface ColumnDefinition extends FilterableColumn<azdata.DataGridItem> {
 	name: string;
 	// actions is a special internal type for the More Actions column
 	type: azdata.DataGridColumnType | 'actions';
-	filterable?: boolean;
 }
 
 export class ResourceViewerInput extends EditorInput {