Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Dec 7, 2023
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@

function handlePrototype() {
buildFormTree(document.forms.config);
// TODO JSON.stringify fails in some circumstances: https://gist.github.com/jglick/70ec4b15c1f628fdf2e9 due to Array.prototype.toJSON
var json = Object.toJSON(JSON.parse(document.forms.config.elements.json.value).prototype);
if (!json) {
return; // just a separator
}
const url = '/jenkins/pipeline-syntax/generateSnippet' // ${rootURL}/${it.GENERATE_URL}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will not work if the context path is set to anything other than /jenkins.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see how I can use/pass template variables (${rootURL}) in the Javascript file...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not often work in JS, but there are various ways; IIRC the preferred technique is to define data attributes on HTML elements and look those up from JS. Search core sources for examples.

new Ajax.Request(url, {
method: 'POST',
parameters: {json: json},
onSuccess: function(r) {
document.getElementById('prototypeText').value = r.responseText;
}
});
}


document.addEventListener('DOMContentLoaded', (event) => {

const generatePipelineScript = document.getElementById("generatePipelineScript");
generatePipelineScript.onclick = (_) => {
handlePrototype();
return false;
}

});
Original file line number Diff line number Diff line change
Expand Up @@ -67,27 +67,10 @@ THE SOFTWARE.
<f:dropdownListBlock title="${%— Advanced/Deprecated —}"/>
<local:listSteps quasiDescriptors="${it.getQuasiDescriptors(true)}"/>
</f:dropdownList>
<j:set var="id" value="${h.generateId()}"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Loses uniquification of the textarea. OTOH

var json = Object.toJSON(JSON.parse(document.forms.config.elements.json.value).prototype);
already worked only with the singleton so I guess it does not matter.

<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
var json = Object.toJSON(JSON.parse(document.forms.config.elements.json.value).prototype);
if (!json) {
return; // just a separator
}
new Ajax.Request('${rootURL}/${it.GENERATE_URL}', {
method: 'POST',
parameters: {json: json},
onSuccess: function(r) {
document.getElementById('prototypeText_${id}').value = r.responseText;
}
});
}
</script>
<input type="button" id="generatePipelineScript" value="${%Generate Pipeline Script}" class="submit-button primary"/>
<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>
Expand Down