White labelling capabilities for Che 7

[slemeur]

Is your enhancement related to a problem? Please describe.

Che 7 needs capabilities to be branded:

• Dashboard (should not be different from Che 6.x)
• IDE (about, welcome plugin)
• favicon
• name of the product

Sub-tasks:

• Allow to display images instead of product name Allow to display images instead of product name #14845

Improvements:

• Allow to use external JSON file to brand Che-Theia Allow to use external JSON file to brand Che-Theia #14839
• Make it possible to choose default theme when branding Che-Theia Make it possible to choose default theme when branding Che-Theia #14840
• Devfile Registry Should Serve Pictures Devfile Registry Should Serve Pictures #14844

[nickboldt]

Any update on this issue? Need it in Che 7 so downstream can be rebranded. :) Will it get done for 7.2.0 or 7.3.0?

[l0rd]

UPDATE:

• Depends on Allow to use HTTP resources for webview tabs eclipse-theia/theia#6270
• Currently preparing a PR for the Welcome plugin
• After Welcome Plugin it's the turn of the About dialog (~2 more days)

[vitaliy-guliy]

PR with Welcome plugin eclipse-che/che-theia#454

[nickboldt]

Depends on eclipse-theia/theia#6270

This fixed is merged, but AFTER 0.11.0. So maybe we need to cherry pick if 0.12.0 won't be available in time for 7.3.0?

[benoitf]

we have a way to patch che-theia
https://github.com/eclipse/che-theia/blob/master/dockerfiles/theia/Dockerfile#L34-L45

and to take any commit from theia as upstream theia for 7.3.0

so no need to use uppercase. If a fix is required, it will be part of 7.3.0

[nickboldt]

I was just being emphatic, not shoutycaps. :)

Good news is that patching approach is compatible w/ Brew, so no extra forking work needed from my side. \o/

[vitaliy-guliy]

The conclusion of discussing in the PR:

1. We have to implement BrandingSerice which will provide the product info (name, logo, description, etc)
2. Extensions can get the product info from this BrandingService. Currently only one extension displaying About dialog needs the product info.
3. Implement che.product plugin API. All the plugins can get the product info using this API.
4. As the first step: BrandingService will read the product info from product.json file. To have custom build, user has to change product.json file and rebuild Theia.
5. Second step: defile PRODUCT_JSON environment variable with path to product.json file. If the variable is set, BrandingServie tries to get the product info from that file.

[slemeur]

@vitaliy-guliy Could you also provide the documentation on che-docs? It is as important as the implementation, as there are a lot of people who are white-labelling Che for their own purposes. See interest on: #12811

[slemeur]

Until there is docs available, I don't think we can consider this issue done.

[sunix]

5. Second step: defile PRODUCT_JSON environment variable with path to product.json file. If the variable is set, BrandingServie tries to get the product info from that file.

This should be the first step before doing anything. If you do that first, all the previous steps you are mentioning would be implementation details. With this step working you could have documentation right away.

BTW how are you going to deal with images ? would be external ?

[vitaliy-guliy]

Current state.
Customized for CRW

[nickboldt]

Some feedback re: the above screenshots:

• "Red Hat CRW" will make the Marketing people cringe. Never do that. The three valid ways to refer to the product are:

• Red Hat CodeReady Workspaces (first time on a page must be in full)
• CodeReady Workspaces (subsequent time can drop "Red Hat")
• Workspaces (after that, it's ok to use the shortname)

The CRW acronym is not official and will never appear IN a product.

• We should use the wordmarks in the Welcome page and About dialogs so that we're more closely aligned to the look that was approved for Workspaces 1.2.

• https://github.com/redhat-developer/codeready-workspaces/blob/master/product/branding/CRW_SaaS_Wordmark_white.svg (dark theme)
• https://github.com/redhat-developer/codeready-workspaces/blob/master/product/branding/CRW_SaaS_Wordmark_black.svg (light theme)

• Why does the Welcome page have the product title shown twice? Can we just use the wordmark and then NOTHING below that, before we get to the New and Open commands below?

• What does the loading animation look like? Is it still the ring-of-blue-balls? In CRW 1.2 we used the image listed here and just faded it in/out using CSS, rather than using an animated GIF. Do we need to create a GIF, or can we use the same fade in/out mechanism in CRW 1.2?

• did you use the specially-designed favicon from https://github.com/redhat-developer/codeready-workspaces/blob/master/product/branding/CodeReady.ico ? (I suspect this is a dashboard artifact so not important here.)

• what does the list of devfiles look like right now? If an icon is not provided or can't be loaded, is the fallback/default icon still the grey Che logo? We need to reskin that too (to a greyscaled CR logo, I suspect)

[vitaliy-guliy]

@nickboldt thanks for your feedback
I created dedicated issue on improvement #14845

Is it possible to provide images for logo which will include both logo and text? For both dark and white theme.

[vitaliy-guliy]

For the loader I have to investigate it the first. I haven't touched it.
But it's easier to display animated git I think.

[sunix]

@vitaliy-guliy to me your dedicated issue #14845 should be a subtask of this one.

[nickboldt]

Looking at the contents of

• https://github.com/che-samples/che-theia-branding-example/blob/master/branding/product.json

vs.

• https://github.com/redhat-developer/codeready-workspaces/blob/master/assembly/assembly-dashboard-war/src/main/webapp/assets/branding/product.json.template

and I'm wondering... do I need to add just the new fields you've added?

For example there was already a "favicon" field, but you added an "icon" field. Are they the same thing? Should I remove favicon and use icon instead?

Asking because https://github.com/eclipse/che/blob/master/dashboard/src/assets/branding/product.json#L6 still uses favicon.

Are logoFile and logoTextFile replaced by logo (light and dark) ? Again, these are still in upstream Che server:

https://github.com/eclipse/che/blob/master/dashboard/src/assets/branding/product.json#L4-L5

Where do the links for website and documentation go? Are they a replacement for the docs links provided by the Che server?

https://github.com/eclipse/che/blob/master/dashboard/src/assets/branding/product.json#L21-L29

Re: the loader, will we have two different ones? One for Che server/dashboard [1] and another for Theia workspaces?

[1] https://github.com/eclipse/che/blob/master/dashboard/src/assets/branding/product.json#L7

[evidolob]

@vitaliy-guliy on PTO, so I try to give an answer:

For example there was already a "favicon" field, but you added an "icon" field.
Are they the same thing? Should I remove favicon and use icon instead?

They may look the same, but image format and purpose is different:

• "favicon" has 'ico' format - used by dashboard to add icon in browser tab
• "icon" field in che-theia used by welcome page inside Theia to add image to the tab

Are logoFile and logoTextFile replaced by logo (light and dark) ?

It not replacement we have two different product.json one for dashboard and second for che-theia. They may have similar or same field and resources, but now they are independent. (This is good field for improvement: to have only one product.json and use it across all sub projects)

Where do the links for website and documentation go? Are they a replacement for the docs links
provided by the Che server?

They are rendered at the bottom of welcome page

[nickboldt]

With merge of https://github.com/redhat-developer/codeready-workspaces-theia/pull/2 we might be done with this issue. :)

[bendavis78]

@vitaliy-guliy is there a guide available that shows how to customizing branding as shown in the screenshots above?

[sunix]

@vitaliy-guliy is there a guide available that shows how to customizing branding as shown in the screenshots above?

@bendavis78 https://www.eclipse.org/che/docs/che-7/branding-che-theia/ should have what you are looking for