Replace old GIFs with symbols (#208)

* Replace old GIFs with symbols

* add emojis plugin
* remove GIFs

* Update documentation

* Update src/main/resources/com/jenkinsci/plugins/badge/dsl/AddSummaryStep/help-icon.html

Co-authored-by: Mark Waite <mark.earl.waite@gmail.com>

---------

Co-authored-by: Martin Pokorny <89339813+mPokornyETM@users.noreply.github.com>
Co-authored-by: Mark Waite <mark.earl.waite@gmail.com>

pom.xml

@@ -77,6 +77,10 @@
   </dependencyManagement>
 
   <dependencies>
+    <dependency>
+      <groupId>io.jenkins.plugins</groupId>
+      <artifactId>emoji-symbols-api</artifactId>
+    </dependency>
     <dependency>
       <groupId>io.jenkins.plugins</groupId>
       <artifactId>ionicons-api</artifactId>

src/main/java/com/jenkinsci/plugins/badge/action/AbstractBadgeAction.java

@@ -24,9 +24,9 @@
 package com.jenkinsci.plugins.badge.action;
 
 import edu.umd.cs.findbugs.annotations.NonNull;
-import hudson.PluginWrapper;
 import hudson.model.Action;
-import java.io.File;
+import io.jenkins.plugins.emoji.symbols.Emojis;
+import io.jenkins.plugins.ionicons.Ionicons;
 import java.io.IOException;
 import java.io.Serial;
 import java.io.Serializable;
@@ -95,13 +95,24 @@ public String getIcon() {
             return icon;
         }
 
-        // try plugin images dir, fallback to Jenkins images dir
-        PluginWrapper wrapper = Jenkins.get().getPluginManager().getPlugin("badge");
-        boolean pluginIconExists =
-                (wrapper != null) && new File(wrapper.baseResourceURL.getPath() + "/images/" + icon).exists();
-        return pluginIconExists
-                ? "/plugin/" + wrapper.getShortName() + "/images/" + icon
-                : Jenkins.RESOURCE_PATH + "/images/16x16/" + icon;
+        // backwards compatible replacement for old GIFs
+        return switch (icon) {
+            case "completed.gif" -> "symbol-status-blue";
+            case "db_in.gif" -> Ionicons.getIconClassName("cloud-upload-outline");
+            case "db_out.gif" -> Ionicons.getIconClassName("cloud-download-outline");
+            case "delete.gif" -> "symbol-trash";
+            case "error.gif" -> "symbol-status-red";
+            case "folder.gif" -> "symbol-folder";
+            case "green.gif" -> Emojis.getIconClassName("green_square");
+            case "info.gif" -> "symbol-information-circle";
+            case "red.gif" -> Emojis.getIconClassName("red_square");
+            case "save.gif" -> Ionicons.getIconClassName("save-outline");
+            case "success.gif" -> "symbol-status-blue";
+            case "text.gif" -> "symbol-document-text";
+            case "warning.gif" -> "symbol-status-yellow";
+            case "yellow.gif" -> Emojis.getIconClassName("yellow_square");
+            default -> Jenkins.RESOURCE_PATH + "/images/16x16/" + icon;
+        };
     }
 
     @Whitelisted

src/main/resources/com/jenkinsci/plugins/badge/dsl/AddBadgeStep/help-icon.html

@@ -1,13 +1,13 @@
 <div>
     <p>
-        The plugin supports symbols from the <a href="https://ionic.io/ionicons">ionicons library</a> through the <a href="https://plugins.jenkins.io/ionicons-api/">ionicons-api-plugin</a>.
-        More symbols can be added by installing additional plugins, such as <a href="https://plugins.jenkins.io/font-awesome-api">font-awesome-api-plugin</a> or <a href="https://plugins.jenkins.io/custom-folder-icon">custom-folder-icon-plugin</a>.
+        The plugin supports symbols from the <a href="https://plugins.jenkins.io/ionicons-api/">Ionicons API</a> as well as the <a href="https://plugins.jenkins.io/emoji-symbols-api/">Emoji Symbols API</a>.
+        More symbols can be added by installing additional plugins, such as <a href="https://plugins.jenkins.io/font-awesome-api/">Font Awesome API</a> or <a href="https://plugins.jenkins.io/oss-symbols-api/">IT Symbols API</a>.
         Symbols from plugins are referenced as "symbol-<i>icon-name</i> plugin-<i>plugin-name</i>" and Jenkins Core icons as "icon-<i>icon-name</i>" or "symbol-<i>icon-name</i>" - see <a href="https://weekly.ci.jenkins.io/design-library">Jenkins Design Library</a> for more details.
         For example, the following are all valid references to symbols:
         <ul>
             <li><code>addBadge icon: 'symbol-alert-circle-outline plugin-ionicons-api', text: 'This is an alert symbol'</code></li>
             <li><code>addBadge icon: 'symbol-bar-chart-filled plugin-ionicons-api', text: 'This is a bar chart symbol'</code></li>
-            <li><code>addBadge icon: 'symbol-battery-half-sharp plugin-ionicons-api', text: 'This is a half filled battery symbol'</code></li>
+            <li><code>addBadge icon: 'symbol-sloth plugin-emoji-symbols-api', text: 'This is a sloth symbol'</code></li>
             <li><code>addBadge icon: 'symbol-cube', text: 'This is a Jenkins Core symbol'</code></li>
             <li><code>addBadge icon: 'icon-gear', text: 'This is a Jenkins Core icon'</code></li>
         </ul>
@@ -23,13 +23,13 @@
     </p>
 
     <p>
-        The plugin includes icons as GIF images and also supports the <a href="https://github.com/jenkinsci/jenkins/tree/master/war/src/main/webapp/images/16x16">16x16 icons</a> that are offered by Jenkins.
+        The plugin also supports the <a href="https://github.com/jenkinsci/jenkins/tree/master/war/src/main/webapp/images/16x16">16x16 icons</a> that are offered by Jenkins.
         These icons are listed in the <a href="https://plugins.jenkins.io/badge/#plugin-content-icons">plugin documentation</a> and are referenced as "<i>image-name</i>.gif".
         For example, the following are all valid references to icons included with the plugin:
         <ul>
-            <li><code>addBadge icon: 'completed.gif', text: 'This is a completed symbol'</code></li>
-            <li><code>addBadge icon: 'success.gif', text: 'This is a success icon'</code></li>
-            <li><code>addBadge icon: 'warning.gif', text: 'This is a warning icon'</code></li>
+            <li><code>addBadge icon: 'aborted.gif', text: 'This is a aborted symbol'</code></li>
+            <li><code>addBadge icon: 'folder-open.gif', text: 'This is a folder icon'</code></li>
+            <li><code>addBadge icon: 'document_edit.gif', text: 'This is a document icon'</code></li>
         </ul>
     </p>
 </div>

src/main/resources/com/jenkinsci/plugins/badge/dsl/AddSummaryStep/help-icon.html

@@ -1,13 +1,13 @@
 <div>
     <p>
-        The plugin supports symbols from the <a href="https://ionic.io/ionicons">ionicons library</a> through the <a href="https://plugins.jenkins.io/ionicons-api/">ionicons-api-plugin</a>.
-        More symbols can be added by installing additional plugins, such as <a href="https://plugins.jenkins.io/font-awesome-api">font-awesome-api-plugin</a> or <a href="https://plugins.jenkins.io/custom-folder-icon">custom-folder-icon-plugin</a>.
+        The plugin supports symbols from the <a href="https://plugins.jenkins.io/ionicons-api/">Ionicons API</a> as well as the <a href="https://plugins.jenkins.io/emoji-symbols-api/">Emoji Symbols API</a>.
+        More symbols can be added by installing additional plugins, such as <a href="https://plugins.jenkins.io/font-awesome-api/">Font Awesome API</a> or <a href="https://plugins.jenkins.io/oss-symbols-api/">IT Symbols API</a>.
         Symbols from plugins are referenced as "symbol-<i>icon-name</i> plugin-<i>plugin-name</i>" and Jenkins Core icons as "icon-<i>icon-name</i>" or "symbol-<i>icon-name</i>" - see <a href="https://weekly.ci.jenkins.io/design-library">Jenkins Design Library</a> for more details.
         For example, the following are all valid references to symbols:
         <ul>
             <li><code>addSummary icon: 'symbol-alert-circle-outline plugin-ionicons-api', text: 'This is an alert symbol'</code></li>
             <li><code>addSummary icon: 'symbol-bar-chart-filled plugin-ionicons-api', text: 'This is a bar chart symbol'</code></li>
-            <li><code>addSummary icon: 'symbol-battery-half-sharp plugin-ionicons-api', text: 'This is a half filled battery symbol'</code></li>
+            <li><code>addSummary icon: 'symbol-sloth plugin-emoji-symbols-api', text: 'This is a sloth symbol'</code></li>
             <li><code>addSummary icon: 'symbol-cube', text: 'This is a Jenkins Core symbol'</code></li>
             <li><code>addSummary icon: 'icon-gear', text: 'This is a Jenkins Core icon'</code></li>
         </ul>
@@ -25,11 +25,11 @@
     <p>
         The plugin includes icons as GIF images and also supports the <a href="https://github.com/jenkinsci/jenkins/tree/master/war/src/main/webapp/images/16x16">16x16 icons</a> that are offered by Jenkins.
         These icons are listed in the <a href="https://plugins.jenkins.io/badge/#plugin-content-icons">plugin documentation</a> and are referenced as "<i>image-name</i>.gif".
-        For example, the following are all valid references to icons included with the plugin:
+        For example, the following are all valid references to icons that can be used with the plugin:
         <ul>
-            <li><code>addSummary icon: 'completed.gif', text: 'This is a completed symbol'</code></li>
-            <li><code>addSummary icon: 'success.gif', text: 'This is a success icon'</code></li>
-            <li><code>addSummary icon: 'warning.gif', text: 'This is a warning icon'</code></li>
+            <li><code>addSummary icon: 'aborted.gif', text: 'This is a aborted symbol'</code></li>
+            <li><code>addSummary icon: 'folder-open.gif', text: 'This is a folder icon'</code></li>
+            <li><code>addSummary icon: 'document_edit.gif', text: 'This is a document icon'</code></li>
         </ul>
     </p>
 </div>

src/test/java/com/jenkinsci/plugins/badge/action/AbstractBadgeActionTest.java

@@ -32,6 +32,8 @@
 import hudson.markup.EscapedMarkupFormatter;
 import hudson.markup.MarkupFormatter;
 import hudson.markup.RawHtmlMarkupFormatter;
+import io.jenkins.plugins.emoji.symbols.Emojis;
+import io.jenkins.plugins.ionicons.Ionicons;
 import java.io.IOException;
 import java.io.Writer;
 import jenkins.model.Jenkins;
@@ -81,14 +83,34 @@ void icon(@SuppressWarnings("unused") JenkinsRule r) {
         action.setIcon("https://host.domain/icon.png");
         assertEquals("https://host.domain/icon.png", action.getIcon());
 
+        action.setIcon("completed.gif");
+        assertEquals("symbol-status-blue", action.getIcon());
+        action.setIcon("db_in.gif");
+        assertEquals(Ionicons.getIconClassName("cloud-upload-outline"), action.getIcon());
+        action.setIcon("db_out.gif");
+        assertEquals(Ionicons.getIconClassName("cloud-download-outline"), action.getIcon());
+        action.setIcon("delete.gif");
+        assertEquals("symbol-trash", action.getIcon());
+        action.setIcon("error.gif");
+        assertEquals("symbol-status-red", action.getIcon());
+        action.setIcon("folder.gif");
+        assertEquals("symbol-folder", action.getIcon());
+        action.setIcon("green.gif");
+        assertEquals(Emojis.getIconClassName("green_square"), action.getIcon());
         action.setIcon("info.gif");
-
-        // work around some odd behavior in local tests
-        if (Jenkins.get().getPluginManager().getPlugin("badge") != null) {
-            assertEquals("/plugin/badge/images/info.gif", action.getIcon());
-        } else {
-            assertEquals(Jenkins.RESOURCE_PATH + "/images/16x16/info.gif", action.getIcon());
-        }
+        assertEquals("symbol-information-circle", action.getIcon());
+        action.setIcon("red.gif");
+        assertEquals(Emojis.getIconClassName("red_square"), action.getIcon());
+        action.setIcon("save.gif");
+        assertEquals(Ionicons.getIconClassName("save-outline"), action.getIcon());
+        action.setIcon("success.gif");
+        assertEquals("symbol-status-blue", action.getIcon());
+        action.setIcon("text.gif");
+        assertEquals("symbol-document-text", action.getIcon());
+        action.setIcon("warning.gif");
+        assertEquals("symbol-status-yellow", action.getIcon());
+        action.setIcon("yellow.gif");
+        assertEquals(Emojis.getIconClassName("yellow_square"), action.getIcon());
 
         action.setIcon("blue.gif");
         assertEquals(Jenkins.RESOURCE_PATH + "/images/16x16/blue.gif", action.getIcon());