Make code.jelly compatible with CSP in Jenkins 2.539+ (#458)

Co-authored-by: Daniel Beck <daniel-beck@users.noreply.github.com>

Author: daniel-beck

src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.jelly

@@ -1,5 +1,5 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:s="/lib/samples" xmlns:f="/lib/form">
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:s="/lib/samples" xmlns:f="/lib/form" xmlns:st="jelly:stapler">
   <s:layout>
     <s:section title="Alerts">
       <s:group>
@@ -15,7 +15,7 @@
             </div>
           </dialog>
         </s:preview>
-        <s:code language="java" file="alert.js" code="showAlert()" executable="true"/>
+        <s:code language="java" file="alert.js" callback="showAlert"/>
       </s:group>
       <p class="jdl-paragraph">${%alerts}</p>
     </s:section>
@@ -35,7 +35,7 @@
             </div>
           </dialog>
         </s:preview>
-        <s:code language="java" file="prompt.js" code="showPrompt()" executable="true"/>
+        <s:code language="java" file="prompt.js" callback="showPrompt"/>
       </s:group>
       <p class="jdl-paragraph">${%prompts}</p>
     </s:section>
@@ -52,7 +52,7 @@
             </div>
           </dialog>
         </s:preview>
-        <s:code language="java" file="confirm.js" code="showConfirm()" executable="true"/>
+        <s:code language="java" file="confirm.js" code="showConfirm()" callback="showConfirm"/>
       </s:group>
       <p class="jdl-paragraph">${%confirmations}</p>
     </s:section>
@@ -87,7 +87,7 @@
         </s:preview>
         <s:code-panes>
           <s:code-pane title="JavaScript">
-            <s:code language="java" file="modal.js" code="showModal()" executable="true"/>
+            <s:code language="java" file="modal.js" code="showModal()" callback="showModal"/>
           </s:code-pane>
           <s:code-pane title="Jelly">
             <s:code file="modal.jelly"/>
@@ -123,7 +123,7 @@
         </s:preview>
         <s:code-panes>
           <s:code-pane title="JavaScript">
-            <s:code language="java" file="form.js" code="showForm()" executable="true"/>
+            <s:code language="java" file="form.js" code="showForm()" callback="showForm"/>
           </s:code-pane>
           <s:code-pane title="Jelly">
             <s:code file="form.jelly"/>

src/main/resources/io/jenkins/plugins/designlibrary/Notifications/adjunct.js

@@ -0,0 +1,19 @@
+function showDefault() {
+  notificationBar.show("Default");
+}
+
+function showSuccess() {
+  notificationBar.show("Success", notificationBar.SUCCESS);
+}
+
+function showWarning() {
+  notificationBar.show("Warning", notificationBar.WARNING);
+}
+
+function showError() {
+  notificationBar.show("Error", notificationBar.ERROR);
+}
+
+function hideNotification() {
+  notificationBar.hide();
+}

src/main/resources/io/jenkins/plugins/designlibrary/Notifications/index.jelly

@@ -1,5 +1,5 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples">
+<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:st="jelly:stapler">
   <s:layout>
     <s:section title="Default">
       <s:group>
@@ -17,6 +17,7 @@
         </s:preview>
         <s:code language="java"
                 code="notificationBar.show('Default')"
+                callback="showDefault"
                 executable="true"/>
       </s:group>
     </s:section>
@@ -37,6 +38,7 @@
         </s:preview>
         <s:code language="java"
                 code="notificationBar.show('Success', notificationBar.SUCCESS)"
+                callback="showSuccess"
                 executable="true"/>
       </s:group>
     </s:section>
@@ -57,6 +59,7 @@
         </s:preview>
         <s:code language="java"
                 code="notificationBar.show('Warning', notificationBar.WARNING)"
+                callback="showWarning"
                 executable="true"/>
       </s:group>
     </s:section>
@@ -77,14 +80,17 @@
         </s:preview>
         <s:code language="java"
                 code="notificationBar.show('Error', notificationBar.ERROR)"
+                callback="showError"
                 executable="true"/>
       </s:group>
     </s:section>
 
     <s:section title="Closing notifications" description="${%usage.2}">
       <s:code language="java"
               code="notificationBar.hide()"
+              callback="hideNotification"
               executable="true"/>
     </s:section>
   </s:layout>
+  <st:adjunct includes="io.jenkins.plugins.designlibrary.Notifications.adjunct" />
 </j:jelly>

src/main/resources/io/jenkins/plugins/designlibrary/sample.js

@@ -1,6 +1,21 @@
 document.addEventListener("DOMContentLoaded", () => {
   const url = document.querySelector("head").dataset.rooturl;
 
+  document.querySelectorAll(".callback-button").forEach((element) => {
+    let callback = element.dataset.callback;
+    element.onclick = () => {
+      if (
+        callback &&
+        window[callback] &&
+        typeof window[callback] === "function"
+      ) {
+        window[callback]();
+      } else {
+        console.warn(`Callback function ${callback} is not defined`);
+      }
+    };
+  });
+
   document.querySelectorAll(".sample-remote").forEach((element) => {
     const uiComponentName = element.dataset.componentName;
     const fileName = element.dataset.sample;

src/main/resources/lib/samples/code.jelly

@@ -3,28 +3,36 @@
   <st:documentation>
     Displays a copyable code snippet.
 
-    <st:attribute name="code" />
-    <st:attribute name="file" />
+    <st:attribute name="code">
+      Code snippet to be displayed if and only if "file" is not set.
+    </st:attribute>
+    <st:attribute name="callback">
+      JavaScript function to be called when the "Execute code" button is clicked.
+      If "code" attribute is set, these two attributes should be in sync ("code" cannot be inline JS anymore due to CSP).
+    </st:attribute>
+    <st:attribute name="file">
+      File containing the code snippet to be displayed.
+      If the "callback" attribute is set, the file will be referenced in a script tag, so that it can be invoked.
+    </st:attribute>
     <st:attribute name="language" use="optional">
       Defaults to 'xml'.
     </st:attribute>
-    <st:attribute name="executable" type="boolean" />
     <st:attribute name="previewable" type="boolean" />
   </st:documentation>
 
   <div class="jdl-component-code">
     <pre class="jdl-component-code__code">
-      <code class="language-${language != null ? language : 'xml'} ${file != null ? 'sample-remote' : ''}" data-component-name="${it.class.simpleName}" data-sample="${file}" data-executable="${executable}">
+      <code class="language-${language != null ? language : 'xml'} ${file != null ? 'sample-remote' : ''}" data-component-name="${it.class.simpleName}" data-sample="${file}" data-executable="${callback != null}">
         ${code}
       </code>
     </pre>
     <div class="jdl-component-code__controls">
       <div>
         <d:invokeBody />
 
-        <j:if test="${executable != null}">
+        <j:if test="${callback != null}">
           <!-- This only works if the 'code' attribute is set -->
-          <button class="jenkins-button jenkins-button--tertiary jenkins-!-build-color" onclick="${code}" tooltip="${%Execute code}">
+          <button class="jenkins-button jenkins-button--tertiary jenkins-!-build-color callback-button" data-callback="${callback}" tooltip="${%Execute code}">
             <l:icon src="symbol-play" />
           </button>
         </j:if>