[JENKINS-69917] - Snippetizer/index.jelly javascript un-inlined. (#599)

* [JENKINS-69917] - Snippetizer/index.jelly javascript un-inlined.

* [JENKINS-69917] - Attribute used to pass url from jelly to JS.

* [JENKINS-69917] - Apply suggestions from code review

Co-authored-by: Jesse Glick <[email protected]>

* [JENKINS-69917] - handle-prototype fixed.

* [JENKINS-69917] - handle-prototype use fetch.

---------

Co-authored-by: Jesse Glick <[email protected]>

Author: Artmorse

plugin/src/main/resources/org/jenkinsci/plugins/workflow/cps/Snippetizer/handle-prototype.js

@@ -0,0 +1,43 @@
+function handlePrototype(url, crumb) {
+    buildFormTree(document.forms.config);
+    // TODO JSON.stringify fails in some circumstances: https://gist.github.com/jglick/70ec4b15c1f628fdf2e9 due to Array.prototype.toJSON
+    // TODO simplify when Prototype.js is removed
+    const json = Object.toJSON ? Object.toJSON(JSON.parse(document.forms.config.elements.json.value).prototype) : JSON.stringify(JSON.parse(document.forms.config.elements.json.value).prototype);
+    if (!json) {
+        return; // just a separator
+    }
+
+    const headers = new Headers();
+    headers.append("Content-Type", "application/x-www-form-urlencoded");
+    headers.append("Jenkins-Crumb", crumb);
+
+    fetch(url, {
+        method: "POST",
+        headers: headers,
+        body: "json=" + encodeURIComponent(json),
+
+    })
+        .then(response => {
+            if (response.ok) {
+                response.text().then((responseText) => {
+                    document.getElementById('prototypeText').value = responseText;
+                });
+            }
+        })
+        .catch(error => {
+            console.error('Fetch error:', error);
+        });
+}
+
+
+document.addEventListener('DOMContentLoaded', () => {
+
+    const generatePipelineScript = document.getElementById("generatePipelineScript");
+    const url = generatePipelineScript.getAttribute("data-url");
+    const crumb = generatePipelineScript.getAttribute("data-crumb");
+    generatePipelineScript.onclick = (_) => {
+        handlePrototype(url, crumb);
+        return false;
+    };
+
+});

plugin/src/main/resources/org/jenkinsci/plugins/workflow/cps/Snippetizer/index.jelly

@@ -67,36 +67,13 @@ THE SOFTWARE.
                     <f:dropdownListBlock title="${%— Advanced/Deprecated —}"/>
                     <local:listSteps quasiDescriptors="${it.getQuasiDescriptors(true)}"/>
                 </f:dropdownList>
-                <j:set var="id" value="${h.generateId()}"/>
                 <f:block>
-                    <input type="button" value="${%Generate Pipeline Script}" onclick="handlePrototype_${id}(); return false" class="submit-button primary"/>
-                    <f:textarea id="prototypeText_${id}" readonly="true" style="margin-top: 10px" />
-                    <script>
-                        function handlePrototype_${id}() {
-                            buildFormTree(document.forms.config);
-                            // TODO JSON.stringify fails in some circumstances: https://gist.github.com/jglick/70ec4b15c1f628fdf2e9 due to Array.prototype.toJSON
-                            // TODO simplify when Prototype.js is removed
-                            var json = Object.toJSON ? Object.toJSON(JSON.parse(document.forms.config.elements.json.value).prototype) : JSON.stringify(JSON.parse(document.forms.config.elements.json.value).prototype);
-                            if (!json) {
-                                return; // just a separator
-                            }
-                            fetch('${rootURL}/${it.GENERATE_URL}', {
-                                method: 'post',
-                                headers: crumb.wrap({
-                                    "Content-Type": "application/x-www-form-urlencoded",
-                                }),
-                                body: new URLSearchParams({
-                                    json: json,
-                                }),
-                            }).then((rsp) => {
-                                if (rsp.ok) {
-                                    rsp.text().then((responseText) => {
-                                        document.getElementById('prototypeText_${id}').value = responseText;
-                                    });
-                                }
-                            });
-                        }
-                    </script>
+                    <input type="button" id="generatePipelineScript" value="${%Generate Pipeline Script}"
+                           class="submit-button primary"
+                           data-url="${rootURL}/${it.GENERATE_URL}"
+                           data-crumb="${h.getCrumb(request)}"/>
+                    <f:textarea id="prototypeText" readonly="true" style="margin-top: 10px"/>
+                    <st:adjunct includes="org.jenkinsci.plugins.workflow.cps.Snippetizer.handle-prototype"/>
                 </f:block>
                 <f:section title="${%Global Variables}"/>
                 <f:block>