Allows branding of Che-Theia #454

vitaliy-guliy · 2019-09-27T11:39:29Z

What does this PR do?

Makes it possible to brand your Theia IDE to be consistent with your product.

Product name, logo, description and helpful links were extracted to external product.json JSON file.
Default product.json has been placed in che-theia/extensions/eclipse-che-theia-plugin-ext/src/resource/ directory:

{
    "name": "Eclipse Che",
    "logo": "che-logo.svg",
    "description": "Welcome To Your Cloud Developer Workspace",
    "links": {
        "Documentation": "https://www.eclipse.org/che/docs/che-7",
        "Community chat": "https://mattermost.eclipse.org/eclipse/channels/eclipse-che"
    }
}

The following screenshots shows how Theia looks with this file.

You can customize Che Theia in two steps:

create custom JSON file with necessary properties and place it somewhere in your container
set PRODUCT_JSON environment variable with path to this JSON file

Sample of product.json file.

{
    "name": "RedHat",
    "logo": "logo.png",
    "description": "Welcome To RedHat IDE",
    "links": {
        "RedHat": "https://www.redhat.com/en",
        "RedHat Wikipedia": "https://uk.wikipedia.org/wiki/Red_Hat",
        "Eclipse Che": "https://www.eclipse.org/che/",
        "Che-Theia": "https://github.com/eclipse/che-theia"
    }
}

Result

After changing theme to white

What issues does this PR fix or reference?

eclipse-che/che#14110

Signed-off-by: Vitaliy Gulyy <vgulyy@redhat.com>

Signed-off-by: Vitaliy Guliy <vgulyy@redhat.com>

vitaliy-guliy · 2019-09-27T11:44:58Z

@benoitf I updated Content-Security-Policy for the Welcome frame. I think we will not have any issues with enabling external resources.
If the developer wants to allow everything, he can clone our Welcome plugin, remove all the restrictions, build and use.

benoitf · 2019-09-27T11:55:34Z

plugins/welcome-plugin/resources/welcome-page.css

 }

 .che-welcome-command-desc {
    display: flex;
 }

-.che-welcome-command-desc .monaco-keybinding {


hello, why these margins are gone ? (and for cheico logo) ?

Style is not used

I didn't found it in HTML, so I removed

benoitf · 2019-09-27T12:00:23Z

it's not clear to me how override is done ?
by patching the source code and modifying the json file ?
I don't see quite good benefit as you still need to patch the source code. For sure it's in a single file but you still need to rebuild the product.

I was thinking that customization could have been done through custom plug-in providing these entries as we have dynamic extensibility and plug-ins can require other plug-ins or ask them.

vitaliy-guliy · 2019-09-27T12:03:43Z

You don't need to rebuild the plugin. You can just edit branding.json inside .theia package.
But yes, it's not very convenient as you still need to change the plugin.

benoitf · 2019-09-27T12:26:55Z

with dynamic extensibility I think it's not so nice to patch every component.

It means welcome plugin will have its branding json file and then the about menu as well ?

vitaliy-guliy · 2019-09-27T12:48:37Z

I still did nothing with about dialog. But wanted to go with the same way as welcome plugin.

benoitf · 2019-09-27T12:50:07Z

Thinking again on the branding:

we need to check vscode.env is correct: vscode.env.appName should return Eclipse Che (or Code Ready Workspaces or something else) depending of the branding
welcome plugin should rely on this variable
about plug-in should get the same stuff as well.

If branding is done at compile time, then about/extension can use a branding.json file and we can provide on @eclipse-che/plugin API a branding API which is providing some documentation link, icon, etc so any plug-in could get a centralized information.
if branding is done at runtime: then it means a branding service needs to be provided as well and a plug-in will provide upon start the different values. The tricky part is to propagate changes correctly where I have some doubts.

vitaliy-guliy · 2019-09-27T13:06:01Z

Ok. Let's implement it step-by-step:

if env variable is set - use it
if branding service provide different values set by special plugin - use it ( let't implement it later )
if no, use value from branding JSON

branding.json can provide 6 fields https://github.com/eclipse/che-theia/blob/labeling/plugins/welcome-plugin/src/branding.json.d.ts
Do we need to use 6 env variables?
If yes, let's decide which names we can use

    // Title for Welcome tab
    vscode.env.welcome.title
    // Icon for Welcome tab
    vscode.env.welcome.icon

    // Logo image
    vscode.env.app.logo
    // Product name
    vscode.env.app.name

    // A short description under product name
    vscode.env.app.description
    // List of hyperlinks to be shown in Help section
    vscode.env.help.links

wdyt?

che-bot · 2019-09-27T13:08:00Z

E2E Happy path tests of Eclipse Che Single User on K8S (minikube v1.1.1) has been successful:

build details
"che-theia" docker image: maxura/che-theia:454

benoitf · 2019-09-27T13:11:19Z

we can't use vscode namespace except for appName and it needs to be appName not app.name
https://github.com/microsoft/vscode/blob/master/src/vs/vscode.d.ts#L6188

all other fields need to be part of che namespace @eclipse-che/plugin

I would stick with camelCase to match VS Code

What's the difference between icon and logo ?

what is the description ?

che-bot · 2019-09-27T13:27:16Z

E2E Happy path tests of Eclipse Che Single User on K8S (minikube v1.1.1) has been successful:

build details
"che-theia" docker image: maxura/che-theia:454

vitaliy-guliy · 2019-09-27T13:41:12Z

@benoitf I'm not sure I understand you correctly.

I see that there is Variables plugin API https://github.com/eclipse/che-theia/blob/master/extensions/eclipse-che-theia-plugin/src/che-proposed.d.ts#L61

Do we need extra service for branding?

We can just describe variables for Che Theia about dialog and for Welcome plugin.
Then any custom plugin can register that variables. Che Theia about extension and Welcome plugin can read the variables and reuse.

For About dialog we have to provide:

dialog title
product logo
product name

For Welcome plugin we have to provide:

welcome tab title
welcome tab icon
product logo (can be reused)
product name (can be reused)
product description ( subtitle, a text under product name )
list of links to be shown in Help section

che-bot · 2019-09-27T14:37:48Z

E2E Happy path tests of Eclipse Che Single User on K8S (minikube v1.1.1) has been successful:

build details
"che-theia" docker image: maxura/che-theia:454

benoitf · 2019-09-30T07:46:26Z

Hello,

I think we don't need dialog title (can be product title)
Welcome tab title --> not sure we need as property for now

welcome tab icon, product logo should be the same : product.logo

product name is vscode.env.appName

and we need product description + links

che-bot · 2019-10-07T17:15:32Z

E2E Happy path tests of Eclipse Che Single User on K8S (minikube v1.1.1) has been successful:

build details
"che-theia" docker image: maxura/che-theia:454

Signed-off-by: Vitaliy Guliy <vgulyy@redhat.com>

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

benoitf · 2019-10-08T11:24:52Z

could you provide screenshot of About dialog in light theme ?
for Eclipse Che (not red hat)

extensions/eclipse-che-theia-plugin-ext/src/resource/product.json

plugins/welcome-plugin/package.json

extensions/eclipse-che-theia-plugin-ext/src/resource/che-logo.svg

che-bot · 2019-10-08T11:36:22Z

E2E Happy path tests of Eclipse Che Single User on K8S (minikube v1.1.1) has failed:

build details
test report
logs and configs
"che-theia" docker image: maxura/che-theia:454
"che-theia-endpoint-runtime" docker image: maxura/che-theia-endpoint-runtime:454
"che-remote-plugin-runner-java8" docker image: maxura/che-remote-plugin-runner-java8:454
"che-remote-plugin-kubernetes-tooling-1.0.0" docker image: maxura/che-remote-plugin-kubernetes-tooling-1.0.0:454
Happy path tests DevFile
https://github.com/orgs/eclipse/teams/eclipse-che-qa please check this report.
Use command "crw-ci-test" to rerun the test.

vitaliy-guliy · 2019-10-08T11:37:06Z

@benoitf defaults with light theme

Signed-off-by: Vitaliy Guliy <vgulyy@redhat.com>

benoitf · 2019-10-08T12:32:41Z

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

+        // Temporary solution.
+        // We should wait for some time until proxy is being fully initialized.
+        setTimeout(() => {
+            this.proxy.$setName(this.productInfo.name);
+            this.proxy.$setLogo(this.productInfo.logo);
+            this.proxy.$setDescription(this.productInfo.description);
+            this.proxy.$setLinks(this.productInfo.links);
+        }, 500);


what is the expected proper solution ? it looks something that is not working when we're using timeout

I still don't get it there and why we have setTimeout as it'll mostly fail.

we have async everywhere so it should either be async or deleted/reworked

Main part should send values to the plugin. In our plugin system main part is initialized earlier than plugin part. So, if we send the values immediately, nobody receive it.

che.product plugin API has only variables. They have to be initialized somehow before using.
We cannot use asynchronous method as you requested to use synchronous variables.

Cannot approve due to setTimeout but no longer request changes

Signed-off-by: Vitaliy Guliy <vgulyy@redhat.com>

vitaliy-guliy · 2019-10-08T15:16:20Z

@benoitf No more timeout and setters.

che-bot · 2019-10-08T16:28:47Z

E2E Happy path tests of Eclipse Che Single User on K8S (minikube v1.1.1) has failed:

build details
test report
logs and configs
"che-theia" docker image: maxura/che-theia:454
"che-theia-endpoint-runtime" docker image: maxura/che-theia-endpoint-runtime:454
"che-remote-plugin-runner-java8" docker image: maxura/che-remote-plugin-runner-java8:454
"che-remote-plugin-kubernetes-tooling-1.0.0" docker image: maxura/che-remote-plugin-kubernetes-tooling-1.0.0:454
Happy path tests DevFile
https://github.com/orgs/eclipse/teams/eclipse-che-qa please check this report.
Use command "crw-ci-test" to rerun the test.

sunix · 2019-10-09T09:23:53Z

where should the logo be located ? next to the product.json ?

vitaliy-guliy · 2019-10-09T09:26:19Z

@sunix
Logo can be located anyway you want. It could be absolute path, relative path to the roduct.json or http / https resource.

musienko-maxim · 2019-10-09T10:07:06Z

This PR has been checked locally. The new regressions was not defined.

sunix · 2019-10-09T11:04:07Z

@sunix
Logo can be located anyway you want. It could be absolute path, relative path to the roduct.json or http / https resource.

Awesome ! you have to mention that in the doc

vitaliy-guliy · 2019-10-09T13:30:02Z

@sunix sure

Revert the previous fix for eclipse-che/che#16728, and add a new 1.33.0a plugin to the registry with the correct node-debug dependency specified. Signed-off-by: Eric Williams <ericwill@redhat.com>

vitaliy-guliy added 4 commits September 27, 2019 13:37

Branding Welcome plugin

9ca98c3

Signed-off-by: Vitaliy Gulyy <vgulyy@redhat.com>

Add comments

7538c5b

Signed-off-by: Vitaliy Guliy <vgulyy@redhat.com>

Fixup

4db7ca8

Signed-off-by: Vitaliy Guliy <vgulyy@redhat.com>

Update Content-Security-Policy

0fa8c8c

Signed-off-by: Vitaliy Guliy <vgulyy@redhat.com>

vitaliy-guliy marked this pull request as ready for review September 27, 2019 11:41

vitaliy-guliy requested review from l0rd, olexii4, rhopp, sunix and vparfonov as code owners September 27, 2019 11:41

vitaliy-guliy requested review from benoitf and evidolob September 27, 2019 11:42

This was referenced Sep 27, 2019

White labelling capabilities for Che 7 eclipse-che/che#14110

Closed

Allow to use HTTP resources for webview tabs eclipse-theia/theia#6270

Merged

benoitf reviewed Sep 27, 2019

View reviewed changes

vitaliy-guliy closed this Sep 27, 2019

vitaliy-guliy reopened this Sep 27, 2019

Update about dialog

14b4eb9

Signed-off-by: Vitaliy Guliy <vgulyy@redhat.com>