Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #2006 from tfennelly/2.0-with-config-tabs
[JENKINS-32357] Section tabs for job configs - phase 1
  • Loading branch information
daniel-beck committed Feb 13, 2016
2 parents eb4855b + 267d1fe commit 055bc41
Show file tree
Hide file tree
Showing 30 changed files with 2,768 additions and 17 deletions.
7 changes: 5 additions & 2 deletions core/src/main/resources/hudson/model/Job/configure.jelly
Expand Up @@ -31,8 +31,11 @@ THE SOFTWARE.
<st:include page="sidepanel.jelly" />
<f:breadcrumb-config-outline />
<l:main-panel>
<l:js src="jsbundles/config-tabbar.js" />
<l:css src="jsbundles/jenkins-widgets.css" />

<div class="behavior-loading">${%LOADING}</div>
<f:form method="post" action="configSubmit" name="config">
<f:form method="post" action="configSubmit" name="config" tableClass="job-config tabbed">
<j:set var="descriptor" value="${it.descriptor}" />
<j:set var="instance" value="${it}" />

Expand All @@ -54,7 +57,7 @@ THE SOFTWARE.
<f:bottomButtonBar>
<!--<input type="button" name="StructureTest" value="Test" onclick="buildFormTree(this.form)" />-->
<f:submit value="${%Save}"/>
<f:apply />
<f:apply value="${%Apply}"/>
</f:bottomButtonBar>
</j:if>
</f:form>
Expand Down
Expand Up @@ -20,4 +20,6 @@
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
# THE SOFTWARE.

name={0} name
name={0} name
Save=Save All
Apply=Apply All
5 changes: 4 additions & 1 deletion core/src/main/resources/lib/form/apply.jelly
Expand Up @@ -32,8 +32,11 @@ THE SOFTWARE.
When this button is pressed, the FORM element fires the "jenkins:apply" event
that allows interested parties to write back whatever states back into the INPUT
elements.
<s:attribute name="value">
The text of the apply button.
</s:attribute>
</s:documentation>
<st:adjunct includes="lib.form.apply.apply"/>
<input type="hidden" name="core:apply" value="" />
<input type="button" value="${%Apply}" class="apply-button applyButton" name="Apply"/><!-- applyButton is legacy -->
<input type="button" value="${attrs.value ?: 'Apply'}" class="apply-button applyButton" name="Apply"/><!-- applyButton is legacy -->
</j:jelly>
2 changes: 1 addition & 1 deletion core/src/main/resources/lib/form/checkbox.jelly
Expand Up @@ -63,7 +63,7 @@ THE SOFTWARE.
name="${name}"
value="${attrs.value}"
title="${attrs.tooltip}"
onclick="${attrs.onclick}" id="${attrs.id}" class="${attrs.negative!=null ? 'negative' : null} ${attrs.checkUrl!=null?'validated':''}"
onclick="${attrs.onclick}" id="${attrs.id}" class="${attrs.class} ${attrs.negative!=null ? 'negative' : null} ${attrs.checkUrl!=null?'validated':''}"
checkUrl="${attrs.checkUrl}" checkDependsOn="${attrs.checkDependsOn}" json="${attrs.json}"
checked="${value ? 'true' : null}"/>
<j:if test="${attrs.title!=null}">
Expand Down
6 changes: 3 additions & 3 deletions core/src/main/resources/lib/form/optionalBlock.jelly
Expand Up @@ -66,9 +66,9 @@ THE SOFTWARE.

<j:choose>
<j:when test="${attrs.title!=null}">
<tr class="optional-block-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
<tr class="optional-block-start row-group-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
<td colspan="3">
<f:checkbox name="${attrs.name}" onclick="javascript:updateOptionalBlock(this,true)"
<f:checkbox name="${attrs.name}" class="optional-block-control block-control" onclick="javascript:updateOptionalBlock(this,true)"
negative="${attrs.negative}" checked="${attrs.checked}" field="${attrs.field}" title="${title}" />
</td>
<f:helpLink url="${attrs.help}" featureName="${title}"/>
Expand All @@ -79,7 +79,7 @@ THE SOFTWARE.
<tr class="rowvg-start" />
<d:invokeBody />
<!-- end marker -->
<tr class="${attrs.inline?'':'row-set-end'} rowvg-end optional-block-end" />
<tr class="${attrs.inline?'':'row-set-end'} rowvg-end optional-block-end row-group-end" />
</j:when>

<j:otherwise>
Expand Down
6 changes: 3 additions & 3 deletions core/src/main/resources/lib/form/radioBlock.jelly
Expand Up @@ -54,11 +54,11 @@ THE SOFTWARE.

<st:adjunct includes="lib.form.radioBlock.radioBlock"/>

<tr class="radio-block-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
<tr class="radio-block-start row-group-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
<td colspan="3">
<label>
<input type="radio" name="${name}" value="${value}"
class="radio-block-control" checked="${checked?'true':null}" />
class="radio-block-control block-control" checked="${checked?'true':null}" />
${title}
</label>
</td>
Expand All @@ -69,5 +69,5 @@ THE SOFTWARE.
</j:if>
<d:invokeBody />
<!-- end marker -->
<tr class="${attrs.inline?'':'row-set-end'} radio-block-end" style="display:none" />
<tr class="${attrs.inline?'':'row-set-end'} radio-block-end row-group-end" style="display:none" />
</j:jelly>
4 changes: 2 additions & 2 deletions core/src/main/resources/lib/form/rowSet.jelly
Expand Up @@ -43,9 +43,9 @@ THE SOFTWARE.
<d:invokeBody />
</j:when>
<j:otherwise>
<tr ref="${attrs.ref}" class="row-set-start" style="display:none" name="${attrs.name}" />
<tr ref="${attrs.ref}" class="row-set-start row-group-start" style="display:none" name="${attrs.name}" />
<d:invokeBody />
<tr class="row-set-end" />
<tr class="row-set-end row-group-end" />
</j:otherwise>
</j:choose>
</j:jelly>
37 changes: 37 additions & 0 deletions core/src/main/resources/lib/layout/css.jelly
@@ -0,0 +1,37 @@
<!--
The MIT License
Copyright (c) 2016, CloudBees
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->

<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
<st:documentation>
Client-side CSS loading tag. Similar to adjunct, but driven from the client. See page-init.js.

@since 2.0
<st:attribute name="src" required="true">
CSS source path (relative to Jenkins).
</st:attribute>
</st:documentation>

<div class="jenkins-css-load" data-src="${attrs.src}" />
</j:jelly>
37 changes: 37 additions & 0 deletions core/src/main/resources/lib/layout/js.jelly
@@ -0,0 +1,37 @@
<!--
The MIT License
Copyright (c) 2016, CloudBees
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->

<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
<st:documentation>
Client-side JavaScript loading tag. Similar to adjunct, but driven from the client. See page-init.js.

@since 2.0
<st:attribute name="src" required="true">
JavaScript source path (relative to Jenkins).
</st:attribute>
</st:documentation>

<div class="jenkins-js-load" data-src="${attrs.src}" />
</j:jelly>
2 changes: 2 additions & 0 deletions core/src/main/resources/lib/layout/layout.jelly
Expand Up @@ -166,6 +166,8 @@ ${h.initPageVariables(context)}
<script src="${resURL}/scripts/msie.js" type="text/javascript"/>
</j:if>

<script src="${resURL}/jsbundles/page-init.js" type="text/javascript"/>

</head>
<body id="jenkins" class="yui-skin-sam jenkins-${h.version}" data-version="jenkins-${h.version}" data-model-type="${it.class.name}">
<!-- for accessibility, skip the entire navigation bar and etc and go straight to the head of the content -->
Expand Down
17 changes: 17 additions & 0 deletions war/gulpfile.js
Expand Up @@ -3,6 +3,14 @@
//
var builder = require('jenkins-js-builder');

//
// Bundle the page init script.
// See https://github.com/jenkinsci/js-builder#bundling
//
builder.bundle('src/main/js/page-init.js')
.withExternalModuleMapping('jquery-detached', 'core-assets/jquery-detached:jquery2')
.inDir('src/main/webapp/jsbundles');

//
// Bundle the Install Wizard.
// See https://github.com/jenkinsci/js-builder#bundling
Expand All @@ -13,3 +21,12 @@ builder.bundle('src/main/js/pluginSetupWizard.js')
.withExternalModuleMapping('handlebars', 'core-assets/handlebars:handlebars3')
.less('src/main/less/pluginSetupWizard.less')
.inDir('src/main/webapp/jsbundles');

//
// Bundle the Config Tab Bar.
// See https://github.com/jenkinsci/js-builder#bundling
//
builder.bundle('src/main/js/config-tabbar.js')
.withExternalModuleMapping('jquery-detached', 'core-assets/jquery-detached:jquery2')
.less('src/main/js/widgets/jenkins-widgets.less')
.inDir('src/main/webapp/jsbundles');
8 changes: 4 additions & 4 deletions war/package.json
Expand Up @@ -8,13 +8,13 @@
"handlebars": "^3.0.3",
"hbsfy": "^2.4.1",
"jenkins-handlebars-rt": "^1.0.1",
"jenkins-js-builder": "0.0.37",
"jenkins-js-test": "0.0.16"
"jenkins-js-builder": "0.0.40",
"jenkins-js-test": "^1.0.0"
},
"dependencies": {
"bootstrap-detached": "^3.3.5-v1",
"jenkins-js-modules": "^1.4.0",
"jenkins-js-modules": "^1.5.0",
"jquery-detached": "^2.1.4-v2",
"window-handle": "0.0.6"
"window-handle": "^1.0.0"
}
}
96 changes: 96 additions & 0 deletions war/src/main/js/config-tabbar.js
@@ -0,0 +1,96 @@
var $ = require('jquery-detached').getJQuery();
var jenkinsLocalStorage = require('./util/jenkinsLocalStorage.js');
var configMetadata = require('./widgets/config/model/ConfigTableMetaData.js');

$(function() {
// Horrible ugly hack...
// We need to use Behaviour.js to wait until after radioBlock.js Behaviour.js rules
// have been applied, otherwise row-set rows become visible across sections.
var done = false;
Behaviour.specify(".block-control", 'row-set-block-control', 1000, function() { // jshint ignore:line
if (done) {
return;
}
done = true;

// Only do job configs for now.
var configTables = $('.job-config.tabbed');
if (configTables.size() > 0) {
var tabBarShowPreferenceKey = 'config:usetabs';
var tabBarShowPreference = jenkinsLocalStorage.getGlobalItem(tabBarShowPreferenceKey, "yes");

var tabBarWidget = require('./widgets/config/tabbar.js');
if (tabBarShowPreference === "yes") {
configTables.each(function() {
var configTable = $(this);
var tabBar = tabBarWidget.addTabs(configTable);

// We want to merge some sections together.
// Merge the "Advanced" section into the "General" section.
var generalSection = tabBar.getSection('config_general');
if (generalSection) {
generalSection.adoptSection('config_advanced_project_options');
}

addFinderToggle(tabBar);
tabBar.onShowSection(function() {
// Hook back into hudson-behavior.js
fireBottomStickerAdjustEvent();
});
tabBar.deactivator.click(function() {
jenkinsLocalStorage.setGlobalItem(tabBarShowPreferenceKey, "no");
require('window-handle').getWindow().location.reload();
});
$('.jenkins-config-widgets .find-container input').focus(function() {
fireBottomStickerAdjustEvent();
});

if (tabBar.hasSections()) {
var tabBarLastSectionKey = 'config:' + tabBar.configForm.attr('name') + ':last-tab';
var tabBarLastSection = jenkinsLocalStorage.getPageItem(tabBarLastSectionKey, tabBar.sections[0].id);
tabBar.onShowSection(function() {
jenkinsLocalStorage.setPageItem(tabBarLastSectionKey, this.id);
});
tabBar.showSection(tabBarLastSection);
}
});
} else {
configTables.each(function() {
var configTable = $(this);
var activator = tabBarWidget.addTabsActivator(configTable);
configMetadata.markConfigTableParentForm(configTable);
activator.click(function() {
jenkinsLocalStorage.setGlobalItem(tabBarShowPreferenceKey, "yes");
require('window-handle').getWindow().location.reload();
});
});
}
}
});
});

function addFinderToggle(configTableMetadata) {
var findToggle = $('<div class="find-toggle" title="Find"></div>');
var finderShowPreferenceKey = 'config:showfinder';

$('.tabBar', configTableMetadata.configWidgets).append(findToggle);
findToggle.click(function() {
var findContainer = $('.find-container', configTableMetadata.configWidgets);
if (findContainer.hasClass('visible')) {
findContainer.removeClass('visible');
jenkinsLocalStorage.setGlobalItem(finderShowPreferenceKey, "no");
} else {
findContainer.addClass('visible');
$('input', findContainer).focus();
jenkinsLocalStorage.setGlobalItem(finderShowPreferenceKey, "yes");
}
});

if (jenkinsLocalStorage.getGlobalItem(finderShowPreferenceKey, "yes") === 'yes') {
findToggle.click();
}
}

function fireBottomStickerAdjustEvent() {
Event.fire(window, 'jenkins:bottom-sticker-adjust'); // jshint ignore:line
}
37 changes: 37 additions & 0 deletions war/src/main/js/page-init.js
@@ -0,0 +1,37 @@
/*
* Page initialisation tasks.
*/

var $ = require('jquery-detached').getJQuery();
var jsModules = require('jenkins-js-modules');

$(function() {
loadScripts();
loadCSS();
});

function loadScripts() {
$('.jenkins-js-load').each(function () {
var scriptUrl = $(this).attr('data-src');
if (scriptUrl) {
// jsModules.addScript will ensure that the script is
// loaded once and once only. So, this can be considered
// analogous to a client-side adjunct.
jsModules.addScript(scriptUrl);
$(this).remove();
}
});
}

function loadCSS() {
$('.jenkins-css-load').each(function () {
var cssUrl = $(this).attr('data-src');
if (cssUrl) {
// jsModules.addCSSToPage will ensure that the CSS is
// loaded once and once only. So, this can be considered
// analogous to a client-side adjunct.
jsModules.addCSSToPage(cssUrl);
$(this).remove();
}
});
}

0 comments on commit 055bc41

Please sign in to comment.