From 3566da328a2c1f0cb59ea87d4a63361d76029401 Mon Sep 17 00:00:00 2001
From: v-bbrady <60623315+v-bbrady@users.noreply.github.com>
Date: Wed, 15 Apr 2020 16:36:48 -0700
Subject: [PATCH] Fix duplicating list on extension pack (#9992) (#10003)

* makes the preview button hover state stay active when hovering over tooltip

* fixes the duplicating list on the extension pack when a 2nd welcome page tab is opened
---
 .../welcome/page/browser/welcomePage.css      |  1 -
 .../welcome/page/browser/welcomePage.ts       | 71 ++++++++++---------
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
index caa35f55b5..8972efb573 100644
--- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
+++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
@@ -278,7 +278,6 @@
 	visibility: hidden;
 	padding: 10px 15px;
 	z-index: 1;
-	top: 150%;
 	right: -72px;
 	text-align: center;
 	border-radius: 6px;
diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
index 5dce6183fe..6eba4753fd 100644
--- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
+++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
@@ -294,7 +294,7 @@ class WelcomePage extends Disposable {
 	}
 
 	private createWidePreviewToolTip() {
-		const previewLink = document.querySelector('#preview_link_wide');
+		const previewLink = document.querySelector('#tool_tip_container_wide');
 		const tooltip = document.querySelector('#tooltip_text_wide');
 		const previewModalBody = document.querySelector('.preview_tooltip_body') as HTMLElement;
 		const previewModalHeader = document.querySelector('.preview_tooltip_header') as HTMLElement;
@@ -625,41 +625,48 @@ class WelcomePage extends Disposable {
 				description.innerHTML = extension.description;
 				header.innerHTML = extension.name;
 
-				const extensionListContainer = document.querySelector('.extension_pack_extension_list');
-				extensionPackExtensions.forEach((j) => {
-					const outerContainerElem = document.createElement('div');
-					const flexContainerElem = document.createElement('div');
-					const iconContainerElem = document.createElement('img');
-					const descriptionContainerElem = document.createElement('div');
-					const pElem = document.createElement('p');
-					const anchorElem = document.createElement('a');
-
-					const outerContainerClasses = ['extension_pack_extension_container', 'flex', 'flex_j_center'];
-					const flexContainerClasses = ['flex', 'flex_a_center'];
-
-					anchorElem.href = j.link;
-
-					outerContainerElem.classList.add(...outerContainerClasses);
-					flexContainerElem.classList.add(...flexContainerClasses);
-					iconContainerElem.classList.add('icon');
-					pElem.classList.add('extension_pack_extension_list_header');
-					descriptionContainerElem.classList.add('description');
-
-					outerContainerElem.appendChild(flexContainerElem);
-					flexContainerElem.appendChild(iconContainerElem);
-					flexContainerElem.appendChild(descriptionContainerElem);
-					descriptionContainerElem.appendChild(anchorElem);
-					anchorElem.appendChild(pElem);
-
-					pElem.innerText = j.name;
-					iconContainerElem.src = j.icon;
-
-					extensionListContainer.appendChild(outerContainerElem);
-				});
+				this.addExtensionPackList(container, '.extension_pack_extension_list');
 			});
 		}
 	}
 
+	private addExtensionPackList(container: HTMLElement, listSelector: string) {
+		const list = container.querySelector(listSelector);
+		if (list) {
+			extensionPackExtensions.forEach((j) => {
+				const outerContainerElem = document.createElement('div');
+				const flexContainerElem = document.createElement('div');
+				const iconContainerElem = document.createElement('img');
+				const descriptionContainerElem = document.createElement('div');
+				const pElem = document.createElement('p');
+				const anchorElem = document.createElement('a');
+
+				const outerContainerClasses = ['extension_pack_extension_container', 'flex', 'flex_j_center'];
+				const flexContainerClasses = ['flex', 'flex_a_center'];
+
+				anchorElem.href = j.link;
+
+				outerContainerElem.classList.add(...outerContainerClasses);
+				flexContainerElem.classList.add(...flexContainerClasses);
+				iconContainerElem.classList.add('icon');
+				pElem.classList.add('extension_pack_extension_list_header');
+				descriptionContainerElem.classList.add('description');
+
+				outerContainerElem.appendChild(flexContainerElem);
+				flexContainerElem.appendChild(iconContainerElem);
+				flexContainerElem.appendChild(descriptionContainerElem);
+				descriptionContainerElem.appendChild(anchorElem);
+				anchorElem.appendChild(pElem);
+
+				pElem.innerText = j.name;
+				iconContainerElem.src = j.icon;
+
+				list.appendChild(outerContainerElem);
+			});
+		}
+	}
+
+
 	private installExtension(extensionSuggestion: ExtensionSuggestion): void {
 		/* __GDPR__FRAGMENT__
 			"WelcomePageInstall-1" : {