From 45b1ae1fb17f477d220c30fc906fa4c60340d9f9 Mon Sep 17 00:00:00 2001
From: Abbie Petchtes <appetcht@microsoft.com>
Date: Thu, 8 Mar 2018 15:30:28 -0800
Subject: [PATCH] Improve experience in "open installed features" dialog (#876)

* fix keyboard nav and double click issues in open install features dialog

* the focus will be at the first item in the extension list when the dialog is opened
---
 .../media/newDashboardTabDialog.css           | 14 ++++++++--
 .../newDashboardTabDialog.ts                  | 28 ++++++++++++-------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/sql/parts/dashboard/newDashboardTabDialog/media/newDashboardTabDialog.css b/src/sql/parts/dashboard/newDashboardTabDialog/media/newDashboardTabDialog.css
index 8d0782c6a6..db911b0bbf 100644
--- a/src/sql/parts/dashboard/newDashboardTabDialog/media/newDashboardTabDialog.css
+++ b/src/sql/parts/dashboard/newDashboardTabDialog/media/newDashboardTabDialog.css
@@ -2,17 +2,25 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-.extension-view .monaco-split-view .split-view-view .header {
+.extension-view .header {
+	position: relative;
+	line-height: 22px;
+	font-size: 11px;
+	font-weight: bold;
+	text-transform: uppercase;
+	padding-left: 20px;
 	padding-right: 12px;
+	overflow: hidden;
+	display: flex;
 }
 
-.extension-view .split-view-view .header .title {
+.extension-view .header .title {
 	display: flex;
 	justify-content: flex-start;
 	flex: 1 1 auto;
 }
 
-.extension-view .split-view-view .header .count-badge-wrapper {
+.extension-view .header .count-badge-wrapper {
 	justify-content: flex-end;
 }
 
diff --git a/src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts b/src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts
index 94d9cd7045..2dc1a75952 100644
--- a/src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts
+++ b/src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts
@@ -20,14 +20,16 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
-import { IDelegate, IRenderer } from 'vs/base/browser/ui/list/list';
+import { IDelegate, IRenderer, IListMouseEvent } from 'vs/base/browser/ui/list/list';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/base/browser/ui/modal/modal';
 import { attachModalDialogStyler, attachButtonStyler } from 'sql/common/theme/styler';
 import { FixedListView } from 'sql/platform/views/fixedListView';
 import * as TelemetryKeys from 'sql/common/telemetryKeys';
-import { SplitView } from 'sql/base/browser/ui/splitview/splitview';
+import { Orientation } from 'sql/base/browser/ui/splitview/splitview';
 import { NewDashboardTabViewModel, IDashboardUITab } from 'sql/parts/dashboard/newDashboardTabDialog/newDashboardTabViewModel';
 import { IDashboardTab } from 'sql/platform/dashboard/common/dashboardRegistry';
 
@@ -98,7 +100,6 @@ export class NewDashboardTabDialog extends Modal {
 	private _cancelButton: Button;
 	private _extensionList: List<IDashboardUITab>;
 	private _extensionTabView: FixedListView<IDashboardUITab>;
-	private _splitView: SplitView;
 	private _container: HTMLElement;
 
 	private _viewModel: NewDashboardTabViewModel;
@@ -139,8 +140,7 @@ export class NewDashboardTabDialog extends Modal {
 
 	// MODAL OVERRIDE METHODS //////////////////////////////////////////////
 	protected layout(height?: number): void {
-		// Ignore height as it's a subcomponent being laid out
-		this._splitView.layout(DOM.getContentHeight(this._container));
+		// Nothing currently laid out in this class
 	}
 
 	public render() {
@@ -156,7 +156,6 @@ export class NewDashboardTabDialog extends Modal {
 		this._container = container;
 		let viewBody = DOM.$('div.extension-view');
 		DOM.append(container, viewBody);
-		this._splitView = new SplitView(viewBody);
 
 		// Create a fixed list view for the account provider
 		let extensionTabViewContainer = DOM.$('.extensionTab-view');
@@ -177,13 +176,22 @@ export class NewDashboardTabDialog extends Modal {
 			this._themeService
 		);
 
-		// Append the list view to the split view
-		this._splitView.addView(this._extensionTabView);
+		this._extensionList.onMouseDblClick(e => this.onAccept());
+		this._extensionList.onKeyDown(e => {
+			let event = new StandardKeyboardEvent(e);
+			if (event.equals(KeyCode.Enter)) {
+				this.onAccept();
+			} else if (event.equals(KeyCode.Escape)) {
+				this.onClose();
+			}
+		});
+
+		this._extensionTabView.render(viewBody, Orientation.VERTICAL);
+
 		this._register(attachListStyler(this._extensionList, this._themeService));
 
 		let listService = <ListService>this._listService;
 		this._register(listService.register(this._extensionList));
-		this._splitView.layout(DOM.getContentHeight(this._container));
 	}
 
 	private registerListeners(): void {
@@ -227,8 +235,8 @@ export class NewDashboardTabDialog extends Modal {
 		this.layout();
 		if (this._extensionList.length > 0) {
 			this._extensionList.setSelection([0]);
+			this._extensionList.domFocus();
 			this._addNewTabButton.enabled = true;
-			this._addNewTabButton.focus();
 		} else {
 			this._addNewTabButton.enabled = false;
 			this._cancelButton.focus();