Update: Display product logo as image instead displaying in text

extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.ts

@@ -10,8 +10,12 @@
 
 import { AboutDialog, AboutDialogProps, ABOUT_EXTENSIONS_CLASS, ABOUT_CONTENT_CLASS } from '@theia/core/lib/browser/about-dialog';
 import { injectable, inject, postConstruct } from 'inversify';
-import { CheProductService, ProductInfo } from '@eclipse-che/theia-plugin-ext/lib/common/che-protocol';
+import { CheProductService, Product } from '@eclipse-che/theia-plugin-ext/lib/common/che-protocol';
+import { ThemeService, Theme } from '@theia/core/lib/browser/theming';
+import { Logo } from '@eclipse-che/plugin';
+
 import '../../src/browser/style/che-theia-about.css';
+
 const jsonDetails = require('../../conf/about-details.json');
 
 @injectable()
@@ -20,6 +24,9 @@ export class AboutCheTheiaDialog extends AboutDialog {
     @inject(CheProductService)
     private productService: CheProductService;
 
+    @inject(ThemeService)
+    protected readonly themeService: ThemeService;
+
     constructor(
         @inject(AboutDialogProps) protected readonly props: AboutDialogProps
     ) {
@@ -50,33 +57,56 @@ export class AboutCheTheiaDialog extends AboutDialog {
         }
     }
 
+    /**
+     * Check if theme is dark or not
+     */
+    private isDark(theme: Theme): boolean {
+        const currentThemeId: string = theme.id;
+        return !currentThemeId.includes('light');
+    }
+
     /**
      * Returns product header element
      */
-    protected async getProductHeader(product: ProductInfo): Promise<HTMLElement> {
+    protected async getProductHeader(product: Product): Promise<HTMLElement> {
         const header = document.createElement('div');
         header.setAttribute('class', 'che-theia-about-product-header');
 
         const logo = document.createElement('div');
         logo.setAttribute('class', 'che-theia-about-product-logo');
         const image = document.createElement('img');
-        image.setAttribute('src', this.getLogo(product.logo));
-        logo.appendChild(image);
 
-        const name = document.createElement('div');
-        name.setAttribute('class', 'che-theia-about-product-name');
-        name.innerHTML = product.name;
+        if (typeof product.logo === 'object') {
+            const productLogo: Logo  = product.logo as Logo;
+            if (this.isDark(this.themeService.getCurrentTheme())) {
+                image.setAttribute('src', this.getLogo(productLogo.dark));
+            } else {
+                image.setAttribute('src', this.getLogo(productLogo.light));
+            }
+
+            // listen on events when the theme is changing to update the logo
+            this.themeService.onThemeChange(e => {
+                if (this.isDark(e.newTheme)) {
+                    image.setAttribute('src', this.getLogo(productLogo.dark));
+                } else {
+                    image.setAttribute('src', this.getLogo(productLogo.light));
+                }
+            });
+
+        } else {
+            image.setAttribute('src', this.getLogo(product.logo));
+        }
 
+        logo.appendChild(image);
         header.appendChild(logo);
-        header.appendChild(name);
 
         return header;
     }
 
     @postConstruct()
     protected async init(): Promise<void> {
         // Get product info
-        const product = await this.productService.getProductInfo();
+        const product = await this.productService.getProduct();
 
         // Set dialog title
         this.titleNode.textContent = product.name;

extensions/eclipse-che-theia-plugin-ext/src/browser/che-product-main.ts

@@ -9,7 +9,7 @@
  **********************************************************************/
 
 import { interfaces } from 'inversify';
-import { CheProductMain, CheProductService, ProductInfo } from '../common/che-protocol';
+import { CheProductMain, CheProductService, Product } from '../common/che-protocol';
 import { RPCProtocol } from '@theia/plugin-ext/lib/common/rpc-protocol';
 
 export class CheProductMainImpl implements CheProductMain {
@@ -20,8 +20,8 @@ export class CheProductMainImpl implements CheProductMain {
         this.cheProductService = container.get(CheProductService);
     }
 
-    async $getProductInfo(): Promise<ProductInfo> {
-        return await this.cheProductService.getProductInfo();
+    async $getProduct(): Promise<Product> {
+        return await this.cheProductService.getProduct();
     }
 
 }

extensions/eclipse-che-theia-plugin-ext/src/common/che-protocol.ts

@@ -12,6 +12,7 @@ import { ProxyIdentifier, createProxyIdentifier } from '@theia/plugin-ext/lib/co
 import { che as cheApi } from '@eclipse-che/api';
 import * as che from '@eclipse-che/plugin';
 import { Event, JsonRpcServer } from '@theia/core';
+
 /**
  * Workspace plugin API
  */
@@ -516,7 +517,7 @@ export interface CheProduct {
 }
 
 export interface CheProductMain {
-    $getProductInfo(): Promise<ProductInfo>;
+    $getProduct(): Promise<Product>;
 }
 
 export const CHE_PRODUCT_SERVICE_PATH = '/che-product-service';
@@ -528,24 +529,19 @@ export interface CheProductService {
     /**
      * Returns the product info.
      */
-    getProductInfo(): Promise<ProductInfo>;
+    getProduct(): Promise<Product>;
 
 }
 
-export interface ProductInfo {
+export interface Product {
+    // Product icon
+    icon: string;
+    // Product logo. Provides images for dark and white themes
+    logo: string | che.Logo;
     // Product name
     name: string;
-
-    // Product logo
-    logo: string;
-
-    // Short description
-    description: string;
-
+    // Welcome page
+    welcome: che.Welcome | undefined;
     // Helpful links
-    links: Links;
-}
-
-export interface Links {
-    [text: string]: string;
+    links: che.LinkMap;
 }

extensions/eclipse-che-theia-plugin-ext/src/node/che-product-service.ts

@@ -9,16 +9,16 @@
  **********************************************************************/
 
 import { injectable } from 'inversify';
-import { CheProductService, ProductInfo } from '../common/che-protocol';
+import { CheProductService, Product } from '../common/che-protocol';
 import * as path from 'path';
 import * as fs from 'fs-extra';
 
 @injectable()
 export class CheProductServiceImpl implements CheProductService {
 
-    private product: ProductInfo;
+    private product: Product;
 
-    async getProductInfo(): Promise<ProductInfo> {
+    async getProduct(): Promise<Product> {
         if (this.product) {
             return this.product;
         }
@@ -28,11 +28,16 @@ export class CheProductServiceImpl implements CheProductService {
             jsonPath = jsonPath.startsWith('/') ? jsonPath : path.join(__dirname, jsonPath);
 
             try {
-                const product: ProductInfo = await fs.readJson(jsonPath) as ProductInfo;
+                const product: Product = await fs.readJson(jsonPath) as Product;
+
                 this.product = {
+                    icon: this.getResource(product.icon, jsonPath),
+                    logo: typeof product.logo === 'object' ? {
+                        dark: this.getResource(product.logo.dark, jsonPath),
+                        light: this.getResource(product.logo.light, jsonPath)
+                    } : this.getResource(product.logo, jsonPath),
                     name: product.name,
-                    logo: this.getLogo(product.logo, jsonPath),
-                    description: product.description,
+                    welcome: product.welcome,
                     links: product.links
                 };
 
@@ -46,30 +51,43 @@ export class CheProductServiceImpl implements CheProductService {
          * Return defaults
          */
         return {
+            icon: path.join(__dirname, '/../../src/resource/che-logo.svg'),
+            logo: {
+                dark: path.join(__dirname, '/../../src/resource/che-logo-dark.svg'),
+                light: path.join(__dirname, '/../../src/resource/che-logo-light.svg')
+            },
             name: 'Eclipse Che',
-            logo: path.join(__dirname, '/../../src/resource/che-logo.svg'),
-            description: 'Welcome To Your Cloud Developer Workspace',
+            welcome: {
+                title: 'Welcome To Your Cloud Developer Workspace',
+                links: undefined
+            },
             links: {
-                'Documentation': 'https://www.eclipse.org/che/docs/che-7',
-                'Community chat': 'https://mattermost.eclipse.org/eclipse/channels/eclipse-che'
+                'documentation': {
+                    'name': 'Documentation',
+                    'url': 'https://www.eclipse.org/che/docs/che-7'
+                },
+                'help': {
+                    'name': 'Community chat',
+                    'url': 'https://mattermost.eclipse.org/eclipse/channels/eclipse-che'
+                }
             }
         };
     }
 
     /**
-     * Returns string URI to Product Logo.
+     * Returns string URI to the resource.
      */
-    getLogo(logo: string, productJsonPath: string): string {
-        if (logo.startsWith('http://') || logo.startsWith('https://')) {
+    getResource(resource: string, productJsonPath: string): string {
+        if (resource.startsWith('http://') || resource.startsWith('https://')) {
             // HTTP resource
-            return logo;
-        } else if (logo.startsWith('/')) {
+            return resource;
+        } else if (resource.startsWith('/')) {
             // absolute path
-            return `file://${logo}`;
+            return `file://${resource}`;
         } else {
             // relative path
             const productJsonDir = path.dirname(productJsonPath);
-            return 'file://' + path.join(productJsonDir, logo);
+            return 'file://' + path.join(productJsonDir, resource);
         }
     }
 

extensions/eclipse-che-theia-plugin-ext/src/plugin/che-api.ts

@@ -34,7 +34,6 @@ export function createAPIFactory(rpc: RPCProtocol): CheApiFactory {
     const cheTaskImpl = rpc.set(PLUGIN_RPC_CONTEXT.CHE_TASK, new CheTaskImpl(rpc));
     const cheSshImpl = rpc.set(PLUGIN_RPC_CONTEXT.CHE_SSH, new CheSshImpl(rpc));
     const cheUserImpl = rpc.set(PLUGIN_RPC_CONTEXT.CHE_USER, new CheUserImpl(rpc));
-
     const cheProductImpl = rpc.set(PLUGIN_RPC_CONTEXT.CHE_PRODUCT, new CheProductImpl(rpc));
 
     return function (plugin: Plugin): typeof che {
@@ -145,16 +144,19 @@ export function createAPIFactory(rpc: RPCProtocol): CheApiFactory {
         };
 
         const product: typeof che.product = {
-            get name(): string {
-                return cheProductImpl.getName();
+            get icon(): string {
+                return cheProductImpl.getIcon();
             },
-            get logo(): string {
+            get logo(): string | che.Logo {
                 return cheProductImpl.getLogo();
             },
-            get description(): string {
-                return cheProductImpl.getDescription();
+            get name(): string {
+                return cheProductImpl.getName();
+            },
+            get welcome(): che.Welcome | undefined {
+                return cheProductImpl.getWelcome();
             },
-            get links(): { [text: string]: string } {
+            get links(): che.LinkMap {
                 return cheProductImpl.getLinks();
             }
         };

extensions/eclipse-che-theia-plugin-ext/src/plugin/che-product.ts

@@ -9,37 +9,43 @@
  **********************************************************************/
 
 import { RPCProtocol } from '@theia/plugin-ext/lib/common/rpc-protocol';
-import { PLUGIN_RPC_CONTEXT, CheProduct, ProductInfo } from '../common/che-protocol';
+import { PLUGIN_RPC_CONTEXT, CheProduct, Product } from '../common/che-protocol';
+import { Logo, Welcome, LinkMap } from '@eclipse-che/plugin';
 
 export class CheProductImpl implements CheProduct {
 
-    private product: ProductInfo = {
-        name: '',
+    private product: Product = {
+        icon: '',
         logo: '',
-        description: '',
+        name: '',
+        welcome: undefined,
         links: {}
     };
 
     constructor(rpc: RPCProtocol) {
         const productMain = rpc.getProxy(PLUGIN_RPC_CONTEXT.CHE_PRODUCT_MAIN);
-        productMain.$getProductInfo().then((product: ProductInfo) => {
+        productMain.$getProduct().then((product: Product) => {
             this.product = product;
         });
     }
 
-    getName(): string {
-        return this.product.name;
+    getIcon(): string {
+        return this.product.icon;
     }
 
-    getLogo(): string {
+    getLogo(): string | Logo {
         return this.product.logo;
     }
 
-    getDescription(): string {
-        return this.product.description;
+    getName(): string {
+        return this.product.name;
+    }
+
+    getWelcome(): Welcome | undefined {
+        return this.product.welcome;
     }
 
-    getLinks(): { [text: string]: string } {
+    getLinks(): LinkMap {
         return this.product.links;
     }