Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Use new Jenkins styles for Boostrap tabs #457

Merged
merged 3 commits into from
Aug 24, 2022
Merged

Use new Jenkins styles for Boostrap tabs #457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7dab50e
Use new Jenkins styles for Boostrap tabs.
uhafner Aug 22, 2022
843f267
Bump version of Bootstrap to 5.2.0-3.
uhafner Aug 23, 2022
bec1ed8
Merge remote-tracking branch 'origin/master' into tabs-ui-refresh
uhafner Aug 23, 2022
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
1 change: 1 addition & 0 deletions plugin/pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@
<dependency>
<groupId>io.jenkins.plugins</groupId>
<artifactId>bootstrap5-api</artifactId>
<version>5.2.0-3</version>
</dependency>
<dependency>
<groupId>io.jenkins.plugins</groupId>
Expand Down
66 changes: 34 additions & 32 deletions plugin/src/main/resources/io/jenkins/plugins/coverage/model/CoverageViewModel/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,34 +17,36 @@
<j:set var="hasChangeCoverage" value="${it.hasChangeCoverage()}"/>
<j:set var="hasIndirectCoverageChanges" value="${it.hasIndirectCoverageChanges()}"/>

<ul class="nav nav-tabs flex-wrap" role="tablist" id="tab-details">
<li class="nav-item">
<a class="nav-link" role="tab" data-bs-toggle="tab" href="#overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" role="tab" data-bs-toggle="tab" href="#lineCoverage">Line Coverage</a>
</li>
<li class="nav-item">
<a class="nav-link" role="tab" data-bs-toggle="tab" href="#branchCoverage">Branch Coverage</a>
</li>
<li class="nav-item">
<a class="nav-link" role="tab" data-bs-toggle="tab" href="#fileCoverage">File Coverage</a>
</li>
<j:if test="${hasChangeCoverage}">
<li class="nav-item">
<a class="nav-link" role="tab" data-bs-toggle="tab" href="#changeCoverage">Change Coverage</a>
<div class="tabBarFrame">
<ul class="flex-wrap tabBar" role="tablist" id="tab-details">
<li class="nav-item tab" role="presentation">
<a class="nav-link" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="false">Overview</a>
Copy link

Choose a reason for hiding this comment

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

Why do these a elements have type="button"? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-type says the value of type is supposed to be a MIME type; "button" is not that. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type is different.

Copy link
Member Author

Choose a reason for hiding this comment

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

It's because Boostrap recommends so: https://getbootstrap.com/docs/5.2/components/navs-tabs/#javascript-behavior

Does it cause any problems?

Copy link
Member Author

Choose a reason for hiding this comment

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

I think I changed it later on to <a> because otherwise Jenkins CSS did style those elements in a strange way.

Copy link

Choose a reason for hiding this comment

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

I did not see any problem caused by type=button, but noticed it while playing with tabindex.

Copy link

@KalleOlaviNiemitalo KalleOlaviNiemitalo Oct 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Boostrap recommends so: https://getbootstrap.com/docs/5.2/components/navs-tabs/#javascript-behavior

On that page, I see type="button" attributes on button elements but not on a elements.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type says it's OK for button elements.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, as mentioned above I started with button, but then Jenkins CSS decorated these buttons so I switched back to a. I did not change the type.

</li>
</j:if>
<j:if test="${hasIndirectCoverageChanges}">
<li class="nav-item">
<a class="nav-link" role="tab" data-bs-toggle="tab" href="#indirectCoverage">Indirect Coverage Changes</a>
<li class="nav-item tab" role="presentation">
<a class="nav-link" id="lineCoverage-tab" data-bs-toggle="tab" data-bs-target="#lineCoverage" type="button" role="tab" aria-controls="lineCoverage" aria-selected="false">Line Coverage</a>
</li>
</j:if>
</ul>
<li class="nav-item tab" role="presentation">
<a class="nav-link" id="branchCoverage-tab" data-bs-toggle="tab" data-bs-target="#branchCoverage" type="button" role="tab" aria-controls="branchCoverage" aria-selected="false">Branch Coverage</a>
</li>
<li class="nav-item tab" role="presentation">
<a class="nav-link" id="fileCoverage-tab" data-bs-toggle="tab" data-bs-target="#fileCoverage" type="button" role="tab" aria-controls="fileCoverage" aria-selected="false">File Coverage</a>
</li>
<j:if test="${hasChangeCoverage}">
<li class="nav-item tab" role="presentation">
<a class="nav-link" id="changeCoverage-tab" data-bs-toggle="tab" data-bs-target="#changeCoverage" type="button" role="tab" aria-controls="changeCoverage" aria-selected="false">Change Coverage</a>
</li>
</j:if>
<j:if test="${hasIndirectCoverageChanges}">
<li class="nav-item tab" role="presentation">
<a class="nav-link" id="indirectCoverage-tab" data-bs-toggle="tab" data-bs-target="#indirectCoverage" type="button" role="tab" aria-controls="indirectCoverage" aria-selected="false">Indirect Coverage Changes</a>
</li>
</j:if>
</ul>
</div>

<div class="tab-content">

<div role="tabpanel" id="overview" class="tab-pane fade">
<div role="tabpanel" id="overview" class="tab-pane fade" aria-labelledby="overview-tab" >
<div class="row">

<div class="col-5">
Expand All @@ -62,31 +64,31 @@
</div>
</div>

<div role="tabpanel" id="lineCoverage" class="tab-pane fade">
<div role="tabpanel" id="lineCoverage" class="tab-pane fade" aria-labelledby="lineCoverage-tab">
<bs:card title="${%Line coverage}" fontAwesomeIcon="folder-tree">
<div id="project-line-coverage" class="graph-cursor-pointer tree-chart"/>
</bs:card>
</div>

<div role="tabpanel" id="branchCoverage" class="tab-pane fade">
<bs:card title="${%Branch coverage}" fontAwesomeIcon="folder-tree" >
<div role="tabpanel" id="branchCoverage" class="tab-pane fade" aria-labelledby="branchCoverage-tab">
<bs:card title="${%Branch coverage}" fontAwesomeIcon="folder-tree">
<div id="project-branch-coverage" class="graph-cursor-pointer tree-chart"/>
</bs:card>
</div>

<div role="tabpanel" id="fileCoverage" class="tab-pane fade">
<cov:coverage-table tableId="absolute-coverage" />
<div role="tabpanel" id="fileCoverage" class="tab-pane fade" aria-labelledby="fileCoverage-tab">
<cov:coverage-table tableId="absolute-coverage"/>
</div>

<j:if test="${hasChangeCoverage}">
<div role="tabpanel" id="changeCoverage" class="tab-pane fade">
<cov:coverage-table tableId="change-coverage" />
<div role="tabpanel" id="changeCoverage" class="tab-pane fade" aria-labelledby="changeCoverage-tab">
<cov:coverage-table tableId="change-coverage"/>
</div>
</j:if>

<j:if test="${hasIndirectCoverageChanges}">
<div role="tabpanel" id="indirectCoverage" class="tab-pane fade">
<cov:coverage-table tableId="indirect-coverage" />
<div role="tabpanel" id="indirectCoverage" class="tab-pane fade" aria-labelledby="indirectCoverage-tab">
<cov:coverage-table tableId="indirect-coverage"/>
</div>
</j:if>

Expand Down
8 changes: 4 additions & 4 deletions plugin/src/main/webapp/js/charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,16 +330,16 @@ const CoverageChartGenerator = function ($) {
const selectedTabID = 'jenkins-coverage-activeTab';
const url = document.location.toString();
if (url.match('#')) {
window.location.hash = '';
const tabName = url.split('#')[1];
if (selectTab('a[href="#' + tabName + '"]')) {
if (selectTab('a[data-bs-target="#' + tabName + '"]')) {
localStorage.setItem(selectedTabID, '#' + tabName);
}

}
else {
const activeTab = localStorage.getItem(selectedTabID);
if (activeTab) {
selectTab('a[href="' + activeTab + '"]');
selectTab('a[data-bs-target="' + activeTab + '"]');
}
}
if ($('#tab-details a.active').length === 0) {
Expand All @@ -348,7 +348,7 @@ const CoverageChartGenerator = function ($) {

$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
const activeTab = $(e.target).attr('href');
const activeTab = $(e.target).attr('data-bs-target');
localStorage.setItem(selectedTabID, activeTab);
redrawCharts();
});
Expand Down