vsx-registry: display incompatible extensions

packages/vsx-registry/src/browser/style/index.css

@@ -28,6 +28,11 @@
     min-height: calc(var(--theia-content-line-height)*3)
 }
 
+.theia-vsx-extension.incompatible {
+    opacity: 0.6;
+    cursor: default;
+}
+
 .theia-vsx-extensions-search-bar {
     padding: var(--theia-ui-padding) var(--theia-scrollbar-width) var(--theia-ui-padding) 18px /* expansion toggle padding of tree elements in result list */;
     display: flex;

packages/vsx-registry/src/browser/vsx-extension-preferences.ts

@@ -0,0 +1,51 @@
+/********************************************************************************
+ * Copyright (C) 2021 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { interfaces } from '@theia/core/shared/inversify';
+import { createPreferenceProxy, PreferenceProxy, PreferenceService, PreferenceContribution, PreferenceSchema } from '@theia/core/lib/browser';
+
+export const VSXExtensionConfigSchema: PreferenceSchema = {
+    'type': 'object',
+    properties: {
+        'extensions.displayIncompatible': {
+            type: 'boolean',
+            description: 'Controls whether to display incompatible extensions when searching.',
+            default: true
+        }
+    }
+};
+
+export interface VSXExtensionConfiguration {
+    'extensions.displayIncompatible': boolean;
+}
+
+export const VSXExtensionPreferenceContribution = Symbol('VSXExtensionPreferenceContribution');
+export const VSXExtensionPreferences = Symbol('VSXExtensionPreferences');
+export type VSXExtensionPreferences = PreferenceProxy<VSXExtensionConfiguration>;
+
+export function createVSXExtensionPreferences(preferences: PreferenceService, schema: PreferenceSchema = VSXExtensionConfigSchema): VSXExtensionPreferences {
+    return createPreferenceProxy(preferences, schema);
+}
+
+export function bindVSXExtensionPreferences(bind: interfaces.Bind): void {
+    bind(VSXExtensionPreferences).toDynamicValue(ctx => {
+        const preferences = ctx.container.get<PreferenceService>(PreferenceService);
+        const contribution = ctx.container.get<PreferenceContribution>(VSXExtensionPreferenceContribution);
+        return createVSXExtensionPreferences(preferences, contribution.schema);
+    }).inSingletonScope();
+    bind(VSXExtensionPreferenceContribution).toConstantValue({ schema: VSXExtensionConfigSchema });
+    bind(PreferenceContribution).toService(VSXExtensionPreferenceContribution);
+}

packages/vsx-registry/src/browser/vsx-extension.tsx

@@ -144,6 +144,11 @@ export class VSXExtension implements VSXExtensionData, TreeElement {
         return type === PluginType.System;
     }
 
+    get compatible(): boolean {
+        // An extension is not compatible if it has no compatible version.
+        return !!this.version;
+    }
+
     update(data: Partial<VSXExtensionData>): void {
         for (const key of VSXExtensionData.KEYS) {
             if (key in data) {
@@ -260,7 +265,7 @@ export class VSXExtension implements VSXExtensionData, TreeElement {
     }
 
     get tooltip(): string {
-        let md = `__${this.displayName}__ ${this.version}\n\n${this.description}\n_____\n\nPublisher: ${this.publisher}`;
+        let md = `__${this.displayName}__ ${this.version !== undefined ? this.version : 'No Compatible Version'}\n\n${this.description}\n_____\n\nPublisher: ${this.publisher}`;
 
         if (this.license) {
             md += `  \rLicense: ${this.license}`;
@@ -384,7 +389,7 @@ export abstract class AbstractVSXExtensionComponent extends React.Component<Abst
 
     protected renderAction(): React.ReactNode {
         const extension = this.props.extension;
-        const { builtin, busy, installed } = extension;
+        const { builtin, busy, installed, compatible } = extension;
         if (builtin) {
             return <div className="codicon codicon-settings-gear action" onClick={this.manage}></div>;
         }
@@ -398,7 +403,9 @@ export abstract class AbstractVSXExtensionComponent extends React.Component<Abst
             return <div><button className="theia-button action" onClick={this.uninstall}>Uninstall</button>
                 <div className="codicon codicon-settings-gear action" onClick={this.manage}></div></div>;
         }
-        return <button className="theia-button prominent action" onClick={this.install}>Install</button>;
+        if (compatible) {
+            return <button className="theia-button prominent action" onClick={this.install}>Install</button>;
+        }
     }
 
 }
@@ -414,16 +421,16 @@ const downloadCompactFormatter = new Intl.NumberFormat(undefined, { notation: 'c
 
 export class VSXExtensionComponent extends AbstractVSXExtensionComponent {
     render(): React.ReactNode {
-        const { iconUrl, publisher, displayName, description, version, downloadCount, averageRating, tooltipId, tooltip } = this.props.extension;
+        const { iconUrl, publisher, displayName, description, version, downloadCount, averageRating, tooltipId, tooltip, compatible } = this.props.extension;
 
-        return <div className='theia-vsx-extension noselect' data-for={tooltipId} data-tip={tooltip}>
+        return <div className={`theia-vsx-extension noselect ${compatible ? '' : 'incompatible'}`} data-for={tooltipId} data-tip={tooltip}>
             {iconUrl ?
                 <img className='theia-vsx-extension-icon' src={iconUrl} /> :
                 <div className='theia-vsx-extension-icon placeholder' />}
             <div className='theia-vsx-extension-content'>
                 <div className='title'>
                     <div className='noWrapInfo'>
-                        <span className='name'>{displayName}</span> <span className='version'>{version}</span>
+                        <span className='name'>{displayName}</span> <span className='version'>{version !== undefined ? version : 'No Compatible Version'}</span>
                     </div>
                     <div className='stat'>
                         {!!downloadCount && <span className='download-count'><i className={codicon('cloud-download')} />{downloadCompactFormatter.format(downloadCount)}</span>}

packages/vsx-registry/src/browser/vsx-extensions-model.ts

@@ -31,6 +31,7 @@ import { RecommendedExtensions } from './recommended-extensions/recommended-exte
 import URI from '@theia/core/lib/common/uri';
 import { VSXResponseError, VSXSearchParam } from '@theia/ovsx-client/lib/ovsx-types';
 import { OVSXClientProvider } from '../common/ovsx-client-provider';
+import { VSXExtensionPreferences } from './vsx-extension-preferences';
 
 @injectable()
 export class VSXExtensionsModel {
@@ -56,6 +57,9 @@ export class VSXExtensionsModel {
     @inject(WorkspaceService)
     protected readonly workspaceService: WorkspaceService;
 
+    @inject(VSXExtensionPreferences)
+    protected vsxPreferences: VSXExtensionPreferences;
+
     @inject(VSXExtensionsSearchModel)
     readonly search: VSXExtensionsSearchModel;
 
@@ -175,7 +179,7 @@ export class VSXExtensionsModel {
             for (const data of result.extensions) {
                 const id = data.namespace.toLowerCase() + '.' + data.name.toLowerCase();
                 const extension = client.getLatestCompatibleVersion(data);
-                if (!extension) {
+                if (!extension && this.vsxPreferences.get('extensions.displayIncompatible') === false) {
                     continue;
                 }
                 this.setExtension(id).update(Object.assign(data, {
@@ -184,7 +188,7 @@ export class VSXExtensionsModel {
                     iconUrl: data.files.icon,
                     readmeUrl: data.files.readme,
                     licenseUrl: data.files.license,
-                    version: extension.version
+                    version: extension?.version
                 }));
                 searchResult.add(id);
             }

packages/vsx-registry/src/browser/vsx-registry-frontend-module.ts

@@ -35,6 +35,7 @@ import { bindExtensionPreferences } from './recommended-extensions/recommended-e
 import { bindPreferenceProviderOverrides } from './recommended-extensions/preference-provider-overrides';
 import { OVSXClientProvider, createOVSXClient } from '../common/ovsx-client-provider';
 import { VSXEnvironment, VSX_ENVIRONMENT_PATH } from '../common/vsx-environment';
+import { bindVSXExtensionPreferences } from './vsx-extension-preferences';
 
 export default new ContainerModule((bind, unbind) => {
     bind<OVSXClientProvider>(OVSXClientProvider).toDynamicValue(ctx => {
@@ -105,4 +106,6 @@ export default new ContainerModule((bind, unbind) => {
 
     bindExtensionPreferences(bind);
     bindPreferenceProviderOverrides(bind, unbind);
+
+    bindVSXExtensionPreferences(bind);
 });