From d9508946b5e74bcdb853d8d0bcea1e5d68d49fd9 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Mon, 21 Dec 2020 10:14:23 -0700
Subject: [PATCH] feat: add helper header above extensions search

Add a short message above the search box on the Extensions panel. This
helps explain the extension divergence to the user.

If they click dismiss, it stores an item in localStorage to prevent the
message from showing up on subsequent loads.

Co-authored-by: Asher <ash@coder.com>
---
 .../extensions/browser/extensionsViewlet.ts   | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts b/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts
index 9cd1effb..018efd12 100644
--- a/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts
+++ b/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts
@@ -410,6 +410,38 @@ export class ExtensionsViewPaneContainer extends ViewPaneContainer implements IE
 		overlay.style.backgroundColor = overlayBackgroundColor;
 		hide(overlay);
 
+		// NOTE@coder this UI element helps users understand the extension marketplace divergence
+		const extensionHelperLocalStorageKey = 'coder.extension-help-message';
+
+		if (localStorage.getItem(extensionHelperLocalStorageKey) === null) {
+			const helperHeader = append(this.root, $('.header'));
+			helperHeader.id = 'codeServerMarketplaceHelper';
+			helperHeader.style.height = 'auto';
+			helperHeader.style.fontWeight = '600';
+			helperHeader.style.padding = 'padding: 5px 16px';
+			helperHeader.style.position = 'relative';
+			helperHeader.innerHTML = `
+			<div style="margin-bottom: 8px;">
+			<p style="margin-bottom: 0; display: flex; align-items: center"><span class="codicon codicon-warning" style="margin-right: 2px; color: #C4A103"></span>WARNING</p>
+			<p style="margin-top: 0; margin-bottom: 4px">
+			These extensions are not official. Find additional open-source extensions
+			<a href="https://open-vsx.org/" target="_blank">here</a>.
+			See <a href="https://github.com/cdr/code-server/blob/master/doc/FAQ.md#differences-compared-to-vs-code" target="_blank">docs</a>.
+			</p>
+			</div>
+					`;
+
+			const dismiss = append(helperHeader, $('span'));
+			dismiss.innerHTML = 'Dismiss';
+			dismiss.style.display = 'block';
+			dismiss.style.textAlign = 'right';
+			dismiss.style.cursor = 'pointer';
+			dismiss.onclick = () => {
+				helperHeader.remove();
+				localStorage.setItem(extensionHelperLocalStorageKey, 'viewed');
+			};
+		}
+
 		const header = append(this.root, $('.header'));
 		const placeholder = localize('searchExtensions', "Search Extensions in Marketplace");
 		const searchValue = this.searchViewletState['query.value'] ? this.searchViewletState['query.value'] : '';