Show recommended label in view and reason in editor #36649

Author: ramya-rao-a

src/vs/platform/extensionManagement/common/extensionManagement.ts

@@ -305,6 +305,7 @@ export const IExtensionTipsService = createDecorator<IExtensionTipsService>('ext
 
 export interface IExtensionTipsService {
 	_serviceBrand: any;
+	getAllRecommendationsWithReason(): { [id: string]: string; };
 	getFileBasedRecommendations(): string[];
 	getOtherRecommendations(): string[];
 	getWorkspaceRecommendations(): TPromise<string[]>;

src/vs/workbench/parts/extensions/browser/extensionEditor.ts

@@ -25,7 +25,7 @@ import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
-import { IExtensionGalleryService, IExtensionManifest, IKeyBinding, IView } from 'vs/platform/extensionManagement/common/extensionManagement';
+import { IExtensionGalleryService, IExtensionManifest, IKeyBinding, IView, IExtensionTipsService } from 'vs/platform/extensionManagement/common/extensionManagement';
 import { ResolvedKeybinding, KeyMod, KeyCode } from 'vs/base/common/keyCodes';
 import { ExtensionsInput } from 'vs/workbench/parts/extensions/common/extensionsInput';
 import { IExtensionsWorkbenchService, IExtensionsViewlet, VIEWLET_ID, IExtension, IExtensionDependencies } from 'vs/workbench/parts/extensions/common/extensions';
@@ -163,7 +163,8 @@ export class ExtensionEditor extends BaseEditor {
 	private extensionActionBar: ActionBar;
 	private navbar: NavBar;
 	private content: HTMLElement;
-
+	private recommendation: HTMLElement;
+	private header: HTMLElement;
 	private _highlight: ITemplateData;
 	private highlightDisposable: IDisposable;
 
@@ -195,6 +196,7 @@ export class ExtensionEditor extends BaseEditor {
 		@IPartService private partService: IPartService,
 		@IContextViewService private contextViewService: IContextViewService,
 		@IContextKeyService private contextKeyService: IContextKeyService,
+		@IExtensionTipsService private extensionTipsService: IExtensionTipsService
 	) {
 		super(ExtensionEditor.ID, telemetryService, themeService);
 		this._highlight = null;
@@ -212,11 +214,11 @@ export class ExtensionEditor extends BaseEditor {
 		const container = parent.getHTMLElement();
 
 		const root = append(container, $('.extension-editor'));
-		const header = append(root, $('.header'));
+		this.header = append(root, $('.header'));
 
-		this.icon = append(header, $<HTMLImageElement>('img.icon', { draggable: false }));
+		this.icon = append(this.header, $<HTMLImageElement>('img.icon', { draggable: false }));
 
-		const details = append(header, $('.details'));
+		const details = append(this.header, $('.details'));
 		const title = append(details, $('.title'));
 		this.name = append(title, $('span.name.clickable', { title: localize('name', "Extension name") }));
 		this.identifier = append(title, $('span.identifier', { title: localize('extension id', "Extension identifier") }));
@@ -249,6 +251,8 @@ export class ExtensionEditor extends BaseEditor {
 		});
 		this.disposables.push(this.extensionActionBar);
 
+		this.recommendation = append(details, $('.recommendation'));
+
 		chain(fromEventEmitter<{ error?: any; }>(this.extensionActionBar, 'run'))
 			.map(({ error }) => error)
 			.filter(error => !!error)
@@ -289,6 +293,14 @@ export class ExtensionEditor extends BaseEditor {
 		this.publisher.textContent = extension.publisherDisplayName;
 		this.description.textContent = extension.description;
 
+		const extRecommendations = this.extensionTipsService.getAllRecommendationsWithReason();
+		this.recommendation.textContent = extRecommendations[extension.id.toLowerCase()];
+		if (extRecommendations[extension.id.toLowerCase()]) {
+			addClass(this.header, 'recommended');
+		} else {
+			removeClass(this.header, 'recommended');
+		}
+
 		if (extension.url) {
 			this.name.onclick = finalHandler(() => window.open(extension.url));
 			this.rating.onclick = finalHandler(() => window.open(`${extension.url}#review-details`));

src/vs/workbench/parts/extensions/browser/extensionsList.ts

@@ -18,10 +18,11 @@ import { domEvent } from 'vs/base/browser/event';
 import { IExtension, IExtensionsWorkbenchService } from 'vs/workbench/parts/extensions/common/extensions';
 import { InstallAction, UpdateAction, BuiltinStatusLabelAction, ManageExtensionAction, ReloadAction } from 'vs/workbench/parts/extensions/browser/extensionsActions';
 import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil';
-import { Label, RatingsWidget, InstallWidget } from 'vs/workbench/parts/extensions/browser/extensionsWidgets';
+import { RatingsWidget, InstallWidget } from 'vs/workbench/parts/extensions/browser/extensionsWidgets';
 import { EventType } from 'vs/base/common/events';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IExtensionService } from 'vs/platform/extensions/common/extensions';
+import { IExtensionTipsService } from 'vs/platform/extensionManagement/common/extensionManagement';
 
 export interface ITemplateData {
 	root: HTMLElement;
@@ -32,6 +33,7 @@ export interface ITemplateData {
 	ratings: HTMLElement;
 	author: HTMLElement;
 	description: HTMLElement;
+	subText: HTMLElement;
 	extension: IExtension;
 	disposables: IDisposable[];
 	extensionDisposables: IDisposable[];
@@ -46,13 +48,18 @@ const actionOptions = { icon: true, label: true };
 
 export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 
+	private showRecommendedLabel: boolean;
 	constructor(
+		showRecommendedLabel: boolean,
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IContextMenuService private contextMenuService: IContextMenuService,
 		@IMessageService private messageService: IMessageService,
 		@IExtensionsWorkbenchService private extensionsWorkbenchService: IExtensionsWorkbenchService,
-		@IExtensionService private extensionService: IExtensionService
-	) { }
+		@IExtensionService private extensionService: IExtensionService,
+		@IExtensionTipsService private extensionTipsService: IExtensionTipsService
+	) {
+		this.showRecommendedLabel = showRecommendedLabel;
+	}
 
 	get templateId() { return 'extension'; }
 
@@ -63,7 +70,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const headerContainer = append(details, $('.header-container'));
 		const header = append(headerContainer, $('.header'));
 		const name = append(header, $('span.name'));
-		const version = append(header, $('span.version'));
+		const subText = append(header, $('span.version'));
 		const installCount = append(header, $('span.install-count'));
 		const ratings = append(header, $('span.ratings'));
 		const description = append(details, $('.description.ellipsis'));
@@ -80,7 +87,6 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		});
 		actionbar.addListener(EventType.RUN, ({ error }) => error && this.messageService.show(Severity.Error, error));
 
-		const versionWidget = this.instantiationService.createInstance(Label, version, (e: IExtension) => e.version);
 		const installCountWidget = this.instantiationService.createInstance(InstallWidget, installCount, { small: true });
 		const ratingsWidget = this.instantiationService.createInstance(RatingsWidget, ratings, { small: true });
 
@@ -91,13 +97,12 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const manageAction = this.instantiationService.createInstance(ManageExtensionAction);
 
 		actionbar.push([reloadAction, updateAction, installAction, builtinStatusAction, manageAction], actionOptions);
-		const disposables = [versionWidget, installCountWidget, ratingsWidget, builtinStatusAction, updateAction, reloadAction, manageAction, actionbar];
+		const disposables = [installCountWidget, ratingsWidget, builtinStatusAction, updateAction, reloadAction, manageAction, actionbar];
 
 		return {
-			root, element, icon, name, installCount, ratings, author, description, disposables,
+			root, element, icon, name, installCount, ratings, author, description, subText, disposables,
 			extensionDisposables: [],
 			set extension(extension: IExtension) {
-				versionWidget.extension = extension;
 				installCountWidget.extension = extension;
 				ratingsWidget.extension = extension;
 				builtinStatusAction.extension = extension;
@@ -127,10 +132,11 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		removeClass(data.element, 'loading');
 
 		data.extensionDisposables = dispose(data.extensionDisposables);
+		const isInstalled = this.extensionsWorkbenchService.local.some(e => e.id === extension.id);
 
 		this.extensionService.getExtensions().then(enabledExtensions => {
 			const isExtensionRunning = enabledExtensions.some(e => areSameExtensions(e, extension));
-			const isInstalled = this.extensionsWorkbenchService.local.some(e => e.id === extension.id);
+
 			toggleClass(data.element, 'disabled', isInstalled && !isExtensionRunning);
 		});
 
@@ -145,7 +151,17 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 			data.icon.style.visibility = 'inherit';
 		}
 
+		data.subText.textContent = isInstalled ? extension.version : '';
 		data.root.setAttribute('aria-label', extension.displayName);
+
+		const extRecommendations = this.extensionTipsService.getAllRecommendationsWithReason();
+		if (extRecommendations[extension.id.toLowerCase()] && !isInstalled) {
+			data.root.setAttribute('aria-label', extension.displayName + '. ' + extRecommendations[extension.id]);
+			if (this.showRecommendedLabel) {
+				data.subText.textContent = 'Recommended';
+			}
+		}
+
 		data.name.textContent = extension.displayName;
 		data.author.textContent = extension.publisherDisplayName;
 		data.description.textContent = extension.description;

src/vs/workbench/parts/extensions/browser/media/extensionEditor.css

@@ -21,6 +21,10 @@
 	font-size: 14px;
 }
 
+.extension-editor > .header.recommended {
+	height: 140px;
+}
+
 .extension-editor > .header > .icon {
 	height: 128px;
 	width: 128px;
@@ -59,7 +63,7 @@
 }
 
 .extension-editor > .header > .details > .subtitle {
-	padding-top: 10px;
+	padding-top: 6px;
 	white-space: nowrap;
 	height: 20px;
 	line-height: 20px;
@@ -81,14 +85,14 @@
 }
 
 .extension-editor > .header > .details > .description {
-	margin-top: 14px;
+	margin-top: 10px;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
 .extension-editor > .header > .details > .actions {
-	margin-top: 14px;
+	margin-top: 10px;
 }
 
 .extension-editor > .header > .details > .actions > .monaco-action-bar {
@@ -104,6 +108,16 @@
 	padding: 1px 6px;
 }
 
+.extension-editor > .header.recommended > .details > .recommendation {
+	display: none;
+}
+
+.extension-editor > .header.recommended > .details > .recommendation {
+	display: block;
+	margin-top: 10px;
+	font-size: 13px;
+}
+
 .extension-editor > .body {
 	height: calc(100% - 168px);
 	overflow: hidden;

src/vs/workbench/parts/extensions/electron-browser/extensionTipsService.ts

@@ -79,6 +79,13 @@ export class ExtensionTipsService extends Disposable implements IExtensionTipsSe
 		this._register(this.contextService.onDidChangeWorkspaceFolders(e => this.onWorkspaceFoldersChanged(e)));
 	}
 
+	getAllRecommendationsWithReason(): { [id: string]: string; } {
+		let output: { [id: string]: string; } = Object.create(null);
+		this.getFileBasedRecommendations().forEach(x => output[x.toLowerCase()] = localize('fileBasedRecommendation', "Based on your recent file history, we recommend this extension."));
+		this._allWorkspaceRecommendedExtensions.forEach(x => output[x.toLowerCase()] = localize('workspaceRecommendation', "Your team recommends this extension."));
+		return output;
+	}
+
 	getWorkspaceRecommendations(): TPromise<string[]> {
 		const workspace = this.contextService.getWorkspace();
 		return TPromise.join([this.resolveWorkspaceRecommendations(workspace), ...workspace.folders.map(workspaceFolder => this.resolveWorkspaceFolderRecommendations(workspaceFolder))])

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

@@ -122,6 +122,7 @@ export class ExtensionsViewlet extends PersistentViewsViewlet implements IExtens
 		viewDescriptors.push(this.createInstalledExtensionsListViewDescriptor());
 		viewDescriptors.push(this.createSearchInstalledExtensionsListViewDescriptor());
 		viewDescriptors.push(this.createRecommendedExtensionsListViewDescriptor());
+		viewDescriptors.push(this.createSearchRecommendedExtensionsListViewDescriptor());
 		ViewsRegistry.registerViews(viewDescriptors);
 	}
 
@@ -131,7 +132,7 @@ export class ExtensionsViewlet extends PersistentViewsViewlet implements IExtens
 			name: localize('marketPlace', "Marketplace"),
 			location: ViewLocation.Extensions,
 			ctor: ExtensionsListView,
-			when: ContextKeyExpr.and(ContextKeyExpr.has('searchExtensions'), ContextKeyExpr.not('searchInstalledExtensions')),
+			when: ContextKeyExpr.and(ContextKeyExpr.has('searchExtensions'), ContextKeyExpr.not('searchInstalledExtensions'), ContextKeyExpr.not('searchRecommendedExtensions')),
 			size: 100
 		};
 	}
@@ -170,6 +171,18 @@ export class ExtensionsViewlet extends PersistentViewsViewlet implements IExtens
 		};
 	}
 
+	private createSearchRecommendedExtensionsListViewDescriptor(): IViewDescriptor {
+		return {
+			id: 'extensions.searchrecommendedList',
+			name: localize('recommendedExtensions', "Recommended"),
+			location: ViewLocation.Extensions,
+			ctor: RecommendedExtensionsView,
+			when: ContextKeyExpr.and(ContextKeyExpr.has('searchExtensions'), ContextKeyExpr.has('searchRecommendedExtensions')),
+			size: 50,
+			canToggleVisibility: true
+		};
+	}
+
 	async create(parent: Builder): TPromise<void> {
 		parent.addClass('extensions-viewlet');
 		this.root = parent.getHTMLElement();

src/vs/workbench/parts/extensions/electron-browser/extensionsViews.ts

@@ -79,11 +79,15 @@ export class ExtensionsListView extends ViewsViewletPanel {
 		this.disposables.push(attachBadgeStyler(this.badge, this.themeService));
 	}
 
+	showRecommendedLabel() {
+		return true;
+	}
+
 	renderBody(container: HTMLElement): void {
 		this.extensionsList = append(container, $('.extensions-list'));
 		this.messageBox = append(container, $('.message'));
 		const delegate = new Delegate();
-		const renderer = this.instantiationService.createInstance(Renderer);
+		const renderer = this.instantiationService.createInstance(Renderer, this.showRecommendedLabel());
 		this.list = new PagedList(this.extensionsList, delegate, [renderer], {
 			ariaLabel: localize('extensions', "Extensions"),
 			keyboardSupport: false
@@ -534,6 +538,10 @@ export class InstalledExtensionsView extends ExtensionsListView {
 		return super.show(searchInstalledQuery);
 	}
 
+	showRecommendedLabel() {
+		return false;
+	}
+
 }
 
 export class RecommendedExtensionsView extends ExtensionsListView {
@@ -552,4 +560,8 @@ export class RecommendedExtensionsView extends ExtensionsListView {
 		return super.show(searchInstalledQuery);
 	}
 
+	showRecommendedLabel() {
+		return false;
+	}
+
 }