feat: provide icons for the editors (#1885)

* feat: provide icons for the editors Signed-off-by: Valeriy Svydenko <[email protected]>
eclipse-che · Feb 7, 2024 · 119a0fe · 119a0fe
1 parent 9af585f
commit 119a0fe
Show file tree

Hide file tree

Showing 15 changed files with 712 additions and 44 deletions.
diff --git a/.ci/openshift-ci/build/Dockerfile b/.ci/openshift-ci/build/Dockerfile
@@ -92,7 +92,7 @@ COPY /build/dockerfiles/openvsx.conf /mnt/rootfs/etc/httpd/conf.d/
 COPY README.md .htaccess /mnt/rootfs/var/www/html/
 COPY --from=builder /che-plugin-registry/output/v3 /mnt/rootfs/var/www/html/v3
 COPY v3/plugins/ /mnt/rootfs/var/www/html/v3/plugins/
-COPY v3/images/*.png /mnt/rootfs/var/www/html/v3/images/
+COPY v3/images/*.* /mnt/rootfs/var/www/html/v3/images/
 # apply permissions to later change these files (entrypoint update_extension_vsx_references)
 RUN chmod g+rwx -R /mnt/rootfs/var/www/html/v3
 

diff --git a/build/dockerfiles/Dockerfile b/build/dockerfiles/Dockerfile
@@ -68,7 +68,7 @@ COPY /build/dockerfiles/openvsx.conf /mnt/rootfs/etc/httpd/conf.d/
 COPY README.md .htaccess /mnt/rootfs/var/www/html/
 COPY output/v3 /mnt/rootfs/var/www/html/v3
 COPY v3/plugins/ /mnt/rootfs/var/www/html/v3/plugins/
-COPY v3/images/*.png /mnt/rootfs/var/www/html/v3/images/
+COPY v3/images/*.* /mnt/rootfs/var/www/html/v3/images/
 # apply permissions to later change these files (entrypoint update_extension_vsx_references)
 RUN chmod g+rwx -R /mnt/rootfs/var/www/html/v3
 

diff --git a/che-editors.yaml b/che-editors.yaml
@@ -5,7 +5,7 @@ editors:
       name: ws-skeleton/jupyter/5.7.0
       displayName: Jupyter Notebook
       description: Jupyter Notebook for Eclipse Che
-      icon: https://jupyter.org/assets/main-logo.svg
+      icon: /images/notebook.svg
       attributes:
         publisher: ws-skeleton
         version: 5.7.0
@@ -36,7 +36,7 @@ editors:
       name: dirigiblelabs/dirigible/3.4.0
       displayName: Eclipse Dirigible
       description: Eclipse Dirigible for Eclipse Che
-      icon: https://www.dirigible.io/img/dirigible.svg
+      icon: /images/dirigible.svg
       attributes:
         publisher: dirigiblelabs
         version: 3.4.0
@@ -85,7 +85,7 @@ editors:
       name: ws-skeleton/eclipseide/4.9.0
       displayName: Eclipse IDE with Broadway
       description: Eclipse IDE (in browser using Broadway) for Eclipse Che
-      icon: https://cdn.freebiesupply.com/logos/large/2x/eclipse-11-logo-svg-vector.svg
+      icon: /images/eclipse-ide.svg
       attributes:
         publisher: ws-skeleton
         version: 4.9.0
@@ -114,7 +114,7 @@ editors:
       displayName: VS Code via code-server
       description: An open source distribution of Visual Studio Code (code-server)
         for Eclipse Che
-      icon: https://raw.githubusercontent.com/sr229/discord-open-source/master/logos/code-server.svg
+      icon: /images/vscode.svg
       attributes:
         publisher: cdr
         version: 3.6.2
@@ -149,7 +149,7 @@ editors:
       displayName: VS Code - Open Source
       description: Microsoft Visual Studio Code - Open Source IDE for Eclipse Che
         - Insiders build
-      icon: https://raw.githubusercontent.com/che-incubator/che-code/main/code/resources/server/code-512.png?sanitize=true
+      icon: /images/vscode.svg
       attributes:
         publisher: che-incubator
         version: insiders
@@ -236,7 +236,7 @@ editors:
       name: che-incubator/che-code/7.81.0
       displayName: VS Code - Open Source
       description: Microsoft Visual Studio Code - Open Source IDE for Eclipse Che
-      icon: https://raw.githubusercontent.com/che-incubator/che-code/main/code/resources/server/code-512.png?sanitize=true
+      icon: /images/vscode.svg
       attributes:
         publisher: che-incubator
         version: 7.81.0
@@ -322,7 +322,7 @@ editors:
       name: che-incubator/che-idea/next
       displayName: IntelliJ IDEA Community
       description: JetBrains IntelliJ IDEA Community IDE for Eclipse Che - next
-      icon: https://resources.jetbrains.com/storage/products/intellij-idea/img/meta/intellij-idea_logo_300x300.png
+      icon: /images/intllij-idea.svg
       attributes:
         publisher: che-incubator
         version: next
@@ -427,7 +427,7 @@ editors:
       name: che-incubator/che-idea/latest
       displayName: IntelliJ IDEA Community
       description: JetBrains IntelliJ IDEA Community IDE for Eclipse Che
-      icon: https://resources.jetbrains.com/storage/products/intellij-idea/img/meta/intellij-idea_logo_300x300.png
+      icon: /images/intllij-idea.svg
       attributes:
         publisher: che-incubator
         version: latest
@@ -532,7 +532,7 @@ editors:
       name: che-incubator/che-pycharm/next
       displayName: JetBrains PyCharm Community
       description: JetBrains PyCharm Community IDE for Eclipse Che - next
-      icon: https://resources.jetbrains.com/storage/products/pycharm/img/meta/pycharm_logo_300x300.png
+      icon: /images/pycharm.svg
       attributes:
         publisher: che-incubator
         version: next
@@ -637,7 +637,7 @@ editors:
       name: che-incubator/che-pycharm/latest
       displayName: JetBrains PyCharm Community
       description: JetBrains PyCharm Community IDE for Eclipse Che
-      icon: https://resources.jetbrains.com/storage/products/pycharm/img/meta/pycharm_logo_300x300.png
+      icon: /images/pycharm.svg
       attributes:
         publisher: che-incubator
         version: latest
@@ -742,7 +742,7 @@ editors:
       name: che-incubator/che-idea-server/next
       displayName: IntelliJ IDEA Ultimate (desktop)
       description: JetBrains IntelliJ IDEA Ultimate dev server for Eclipse Che - next
-      icon: https://resources.jetbrains.com/storage/products/intellij-idea/img/meta/intellij-idea_logo_300x300.png
+      icon: /images/intllij-idea.svg
       attributes:
         publisher: che-incubator
         version: next
@@ -807,7 +807,7 @@ editors:
       name: che-incubator/che-idea-server/latest
       displayName: IntelliJ IDEA Ultimate (desktop)
       description: JetBrains IntelliJ IDEA Ultimate dev server for Eclipse Che - latest
-      icon: https://resources.jetbrains.com/storage/products/intellij-idea/img/meta/intellij-idea_logo_300x300.png
+      icon: /images/intllij-idea.svg
       attributes:
         publisher: che-incubator
         version: latest

diff --git a/tools/build/src/devfle-yaml/devfile-yaml-writer.ts b/tools/build/src/devfle-yaml/devfile-yaml-writer.ts
@@ -22,20 +22,18 @@ export class DevfileYamlWriter {
   @named('OUTPUT_ROOT_DIRECTORY')
   private outputRootDirectory: string;
 
-  public static readonly DEFAULT_ICON = '/images/default.png';
-
   verifyEditorId(editor: V222Devfile): string {
     const metadata = editor.metadata;
     if (!metadata) {
-      throw new Error(`The metadata of ${editor} is not defined`);
+      throw new Error(`The metadata of ${JSON.stringify(editor)} is not defined`);
     }
     const id = metadata.name;
     if (!id) {
-      throw new Error(`The id of ${metadata} is not defined`);
+      throw new Error(`The name of ${JSON.stringify(editor)} is not defined`);
     }
     const values = id.split('/');
     if (values.length !== 3) {
-      throw new Error(`The id for ${id} is not composed of 3 parts separated by / like <1>/<2>/<3>`);
+      throw new Error(`The name for ${id} is not composed of 3 parts separated by / like <1>/<2>/<3>`);
     }
     return id;
   }

diff --git a/tools/build/src/devfle-yaml/index-writer.ts b/tools/build/src/devfle-yaml/index-writer.ts
@@ -13,8 +13,7 @@ import * as path from 'path';
 
 import { inject, injectable, named } from 'inversify';
 
-import { V222Devfile } from '@devfile/api';
-import { DevfileYamlWriter } from './devfile-yaml-writer';
+import { V222Devfile, V222DevfileMetadata } from '@devfile/api';
 
 /**
  * Write in a file named index.json, all the plugins that can be found.
@@ -25,18 +24,18 @@ export class IndexWriter {
   @named('OUTPUT_ROOT_DIRECTORY')
   private outputRootDirectory: string;
 
-  @inject(DevfileYamlWriter)
-  private devfileYamlWriter: DevfileYamlWriter;
-
   private CHE_EDITOR_TYPE = 'Che Editor';
+  private DEFAULT_ICON = '/images/default.svg';
 
   async write(editors: V222Devfile[]): Promise<void> {
     const v3PluginsFolder = path.resolve(this.outputRootDirectory, 'v3', 'plugins');
     await fs.ensureDir(v3PluginsFolder);
     const externalImagesFile = path.join(v3PluginsFolder, 'index.json');
 
     const indexValues = editors.map(editor => {
-      let id = this.devfileYamlWriter.verifyEditorId(editor);
+      const metadata = this.getMetadata(editor);
+
+      let id = this.getId(metadata);
       const splitIds = id.split('/');
       const publisher = splitIds[0];
       const name = splitIds[1];
@@ -47,20 +46,54 @@ export class IndexWriter {
       }
       id = publisher + '/' + name + '/' + version;
 
+      const icon = this.getIcon(metadata);
+      const iconPathPrefix = '/v3';
+      const iconPath = iconPathPrefix + icon;
+
       return {
         id: id,
-        description: editor.metadata?.description,
-        displayName: editor.metadata?.displayName,
+        description: metadata.description,
+        displayName: metadata.displayName,
         links: {
           devfile: `/v3/plugins/${id}/devfile.yaml`,
         },
         name: name,
         publisher: publisher,
         type: this.CHE_EDITOR_TYPE,
         version: version,
+        icon: iconPath,
       };
     });
     indexValues.sort((pluginA, pluginB) => pluginA.id.localeCompare(pluginB.id));
     await fs.writeFile(externalImagesFile, JSON.stringify(indexValues, undefined, 2));
   }
+
+  getMetadata(editor: V222Devfile): V222DevfileMetadata {
+    const metadata = editor.metadata;
+    if (!metadata) {
+      throw new Error(`The metadata of ${JSON.stringify(editor)} is not defined`);
+    }
+    return metadata;
+  }
+
+  getIcon(metadata: V222DevfileMetadata): string {
+    let icon = metadata.icon;
+    if (!icon) {
+      // If the icon is not defined, we use the default one
+      icon = this.DEFAULT_ICON;
+    }
+    return icon;
+  }
+
+  getId(metadata: V222DevfileMetadata): string {
+    const id = metadata.name;
+    if (!id) {
+      throw new Error(`The id of ${JSON.stringify(metadata)} is not defined`);
+    }
+    const values = id.split('/');
+    if (values.length !== 3) {
+      throw new Error(`The id for ${id} is not composed of 3 parts separated by / like <1>/<2>/<3>`);
+    }
+    return id;
+  }
 }
diff --git a/tools/build/tests/devfile-yaml/devfile-yaml-writer.spec.ts b/tools/build/tests/devfile-yaml/devfile-yaml-writer.spec.ts
@@ -171,7 +171,7 @@ components:
 
       expect(() => {
         devfileYamlWriter.verifyEditorId(editor);
-      }).toThrow('The metadata of [object Object] is not defined');
+      }).toThrow('The metadata of {"schemaVersion":"2.2.2"} is not defined');
     });
 
     it('should throw an error if id is not defined', () => {
@@ -182,7 +182,7 @@ components:
 
       expect(() => {
         devfileYamlWriter.verifyEditorId(editor);
-      }).toThrow('The id of [object Object] is not defined');
+      }).toThrow('The name of {"schemaVersion":"2.2.2","metadata":{}} is not defined');
     });
 
     it('should throw an error if id is not composed of 3 parts separated by /', () => {
@@ -195,7 +195,7 @@ components:
 
       expect(() => {
         devfileYamlWriter.verifyEditorId(editor);
-      }).toThrow('The id for invalidId is not composed of 3 parts separated by / like <1>/<2>/<3>');
+      }).toThrow('The name for invalidId is not composed of 3 parts separated by / like <1>/<2>/<3>');
     });
   });
 });