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-69656] Un-inlining AbstractTestResultAction/summary.jelly for CSP compliance #444

Merged
merged 1 commit into from
Oct 13, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* Displays all the tests failures, and hides the link allowing to display them from UI.
*/
function showFailures() {
// Displaying all the hidden elements from the page (those are the failed tests)
let hiddenElements = document.getElementsByClassName("hidden");

// DEV MEMO:
// hiddenElements is not an array but an HTMLCollection.
// To allow using forEach, we need an array, so I'm using the spread operator below to get that.
[...hiddenElements].forEach(element => { element.style.display = ""; });

// Now hiding the link from UI allowing to show all failed tests
let showFailuresLink = document.getElementById("showLink");
showFailuresLink.style.display = "none";
}

// Adding an onclick listener to the link in UI allowing to display all failed tests
// DEV MEMO:
// We are doing it after DOM content is loaded as a good practice to ensure we are not slowing down
// the page rendering. In that particular situation the addition of the onclick handler shouldn't
// really impact the page performances, but rather stick with good practices.

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

// Retrieving the link from UI allowing to show all failed tests
// Note: we are retrieving the link by its ID to match how it was already done
// in the showFailures method above.
const showFailuresLink = document.getElementById("showLink");
Copy link
Member Author

Choose a reason for hiding this comment

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

Note:

The Jira issue (JENKINS-69656) mentioned:

Be careful, the id "showLink" is perhaps too generic (could be present on other elements in the same page. Adding a className like "showFailuresLink" and using it as selector could be a good idea.

But the original piece of code was actually using document.getElementById("showLink") to identify the link, so I considered it safe to rely on the very same identification for adding the onclick handler.

If you feel like it's not good enough, I'm happy to change it, but the current proposal matches the original behavior of the source code.

Copy link
Contributor

Choose a reason for hiding this comment

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

Perhaps a matter of luck, but we have several occurrences of showLink being used as id: https://github.com/search?l=XML&q=org%3Ajenkinsci+showLink&type=Code

Copy link
Member Author

Choose a reason for hiding this comment

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

Do you want me to change it in that PR with something unique (both in the onclick and in the showFailures function)?

Or should I create another issue to fix it? (or ignore it?)


showFailuresLink.onclick = (_) => showFailures();

});
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,7 @@ THE SOFTWARE.
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:test="/lib/hudson/test" xmlns:f="/lib/form" xmlns:i="jelly:fmt">

<script type="text/javascript">
function showFailures() {

var elms = document.getElementsByClassName("hidden");
for(var i = 0; i &lt; elms.length; i++) {
elms[i].style.display = "";
}
elm = document.getElementById("showLink");
elm.style.display = "none";
}
</script>
<st:adjunct includes="hudson.tasks.test.AbstractTestResultAction.show-failures" />

<!-- summary -->
<t:summary icon="clipboard.png">
Expand Down Expand Up @@ -75,8 +65,7 @@ THE SOFTWARE.
<!-- Show failures link -->
<j:if test="${displayedCount &lt; failedTests.size() }">
<a id="showLink" name="editFailuresLink"
href="#showFailuresLink"
onclick="javascript:showFailures()">${%Show all failed tests} ${">>>"}</a>
href="#showFailuresLink">${%Show all failed tests} ${">>>"}</a>
</j:if>
</j:if>

Expand Down