Skip to content
Permalink
Browse files

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 055bc410a8d3efd40771f229a3ba61da61733b99
Showing with 2,768 additions and 17 deletions.
  1. +5 −2 core/src/main/resources/hudson/model/Job/configure.jelly
  2. +3 −1 core/src/main/resources/hudson/model/Job/configure.properties
  3. +4 −1 core/src/main/resources/lib/form/apply.jelly
  4. +1 −1 core/src/main/resources/lib/form/checkbox.jelly
  5. +3 −3 core/src/main/resources/lib/form/optionalBlock.jelly
  6. +3 −3 core/src/main/resources/lib/form/radioBlock.jelly
  7. +2 −2 core/src/main/resources/lib/form/rowSet.jelly
  8. +37 −0 core/src/main/resources/lib/layout/css.jelly
  9. +37 −0 core/src/main/resources/lib/layout/js.jelly
  10. +2 −0 core/src/main/resources/lib/layout/layout.jelly
  11. +17 −0 war/gulpfile.js
  12. +4 −4 war/package.json
  13. +96 −0 war/src/main/js/config-tabbar.js
  14. +37 −0 war/src/main/js/page-init.js
  15. +32 −0 war/src/main/js/util/jenkinsLocalStorage.js
  16. +40 −0 war/src/main/js/util/jquery-ext.js
  17. +36 −0 war/src/main/js/util/localStorage.js
  18. +73 −0 war/src/main/js/widgets/config/model/ConfigRowGrouping.js
  19. +219 −0 war/src/main/js/widgets/config/model/ConfigSection.js
  20. +322 −0 war/src/main/js/widgets/config/model/ConfigTableMetaData.js
  21. +5 −0 war/src/main/js/widgets/config/model/util.js
  22. +74 −0 war/src/main/js/widgets/config/tabbar.js
  23. +100 −0 war/src/main/js/widgets/config/tabbar.less
  24. +45 −0 war/src/main/js/widgets/form/form-mixins.less
  25. +13 −0 war/src/main/js/widgets/jenkins-widgets.less
  26. +49 −0 war/src/main/js/widgets/layout-mixins.less
  27. +2 −0 war/src/main/js/widgets/variables.less
  28. +1 −0 war/src/main/webapp/scripts/hudson-behavior.js
  29. +70 −0 war/src/test/js/widgets/config/tabbar-spec.js
  30. +1,436 −0 war/src/test/js/widgets/config/workflow-config.html
@@ -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}" />

@@ -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>
@@ -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
@@ -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>
@@ -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}">
@@ -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}"/>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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 -->
@@ -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
@@ -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,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"
}
}
@@ -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
}
@@ -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();
}
});
}
Oops, something went wrong.

0 comments on commit 055bc41

Please sign in to comment.
You can’t perform that action at this time.