Fix dependency display in setup wizard: remove tooltip, add clickable

link

core/src/main/resources/jenkins/install/pluginSetupWizard.properties

@@ -36,3 +36,4 @@ installWizard_installIncomplete_title=Resume Installation
 installWizard_installIncomplete_banner=Resume Installation
 installWizard_installIncomplete_message=Jenknins was restarted during installation and some plugins didn't seem to get installed.
 installWizard_installIncomplete_resumeInstallationButtonLabel=Resume
+installWizard_installIncomplete_dependenciesLabel=Dependencies

war/src/main/js/pluginSetupWizardGui.js

@@ -66,8 +66,16 @@ var createPluginSetupWizard = function() {
 		}
 	});
 
+	// get total number of dependencies
+	Handlebars.registerHelper('dependencyCount', function(plugName) {
+		var plug = availablePlugins[plugName];
+		if(plug && plug.allDependencies && plug.allDependencies.length > 1) { // includes self
+			return plug.allDependencies.length - 1;
+		}
+	});
+
 	// gets user friendly dependency text
-	Handlebars.registerHelper('dependencyText', function(plugName) {
+	Handlebars.registerHelper('eachDependency', function(plugName, options) {
 		var plug = availablePlugins[plugName];
 		if(!plug) {
 			return '';
@@ -75,20 +83,25 @@ var createPluginSetupWizard = function() {
 		var deps = $.grep(plug.allDependencies, function(value) { // remove self
 			return value !== plugName;
 		});
-		var out = '';
+		
+		var out  = '';
 		for(var i = 0; i < deps.length; i++) {
-			if(i > 0) {
-				out += ', ';
-			}
 			var depName = deps[i];
 			var dep = availablePlugins[depName];
 			if(dep) {
-				out += dep.title;
+				out += options.fn(dep);
 			}
 		}
 		return out;
 	});
 
+	// executes a block if there are dependencies
+	Handlebars.registerHelper('ifVisibleDependency', function(plugName, options) {
+		if(visibleDependencies[plugName]) {
+			return options.fn();
+		}
+	});
+
 	// Include handlebars templates here - explicitly require them and they'll be available by hbsfy as part of the bundle process
 	var errorPanel = require('./templates/errorPanel.hbs');
 	var loadingPanel = require('./templates/loadingPanel.hbs');
@@ -122,6 +135,7 @@ var createPluginSetupWizard = function() {
 	var pluginList = pluginManager.plugins();
     var allPluginNames = pluginManager.pluginNames();
     var selectedPluginNames = pluginManager.recommendedPluginNames();
+	var visibleDependencies = {};
     var categories = [];
     var availablePlugins = {};
     var categorizedPlugins = {};
@@ -264,6 +278,24 @@ var createPluginSetupWizard = function() {
 
 		setPanel(progressPanel, { installingPlugins : installingPlugins });
 	};
+	
+	// toggles visibility of dependency listing for a plugin
+	var toggleDependencyList = function() {
+		var $btn = $(this);
+		var plugName = $btn.attr('data-plugin-name');
+		if(!visibleDependencies[plugName]) {
+			visibleDependencies[plugName] = true;
+		}
+		else {
+			visibleDependencies[plugName] = false;
+		}
+		if(!visibleDependencies[plugName]) {
+			$btn.removeClass('active');
+		}
+		else {
+			$btn.addClass('active');
+		}
+	};
 
 	// install the default plugins
 	var installDefaultPlugins = function() {
@@ -669,6 +701,7 @@ var createPluginSetupWizard = function() {
 
 	// click action mappings
 	var actions = {
+		'.toggle-dependency-list': toggleDependencyList,
 		'.install-recommended': installDefaultPlugins,
 		'.install-custom': loadCustomPluginPanel,
 		'.install-home': function() { setPanel(welcomePanel); },

war/src/main/js/templates/pluginSelectionPanel.hbs

@@ -26,13 +26,12 @@
 			</span>
 		</div>
 		<div class="plugin-list">
-            <div class="plugin-list-description">{{{translations.installWizard_installCustom_pluginListDesc}}}</div>
+			<div class="plugin-list-description">{{{translations.installWizard_installCustom_pluginListDesc}}}</div>
 			{{#each categorizedPlugins}}
 			<h2 id="{{id @key}}" class="expanded">{{@key}} {{pluginCountForCategory @key}}</h2>
 			<div class="plugins-for-category">
 				{{#each this}}
-				<label class="{{#inSelectedPlugins plugin.name}}selected{{/inSelectedPlugins}}" id="row-{{plugin.name}}"
-					{{#hasDependencies plugin.name}}data-tooltip="{{../../../translations.installWizard_installCustom_dependenciesPrefix}}: {{dependencyText ../plugin.name}}"{{/hasDependencies}}>
+				<label class="{{#inSelectedPlugins plugin.name}}selected{{/inSelectedPlugins}}" id="row-{{plugin.name}}">
 					<span class="title">
 						<input type="checkbox" id="chk-{{plugin.name}}" name="{{plugin.name}}" value="{{searchTerm}}" {{#inSelectedPlugins plugin.name}}checked="checked"{{/inSelectedPlugins}}/>
 						{{plugin.title}}
@@ -40,6 +39,20 @@
 					<span class="description">
 						{{{plugin.excerpt}}}
 					</span>
+					{{#hasDependencies plugin.name}}
+					<span class="deps">
+						<div class="btn btn-link toggle-dependency-list {{#ifVisibleDependency ../plugin.name}}active{{/ifVisibleDependency}}" type="button" data-plugin-name="{{../plugin.name}}">
+							{{../../../translations.installWizard_installIncomplete_dependenciesLabel}}<span class="badge">{{dependencyCount ../plugin.name}}</span>
+						</div>
+						<div class="dep-list">
+							{{#eachDependency ../plugin.name}}
+							<span class="dep badge">
+							{{title}}
+							</span>
+							{{/eachDependency}}
+						</div>
+					</deps>
+					{{/hasDependencies}}
 				</label>
 				{{/each}}
 			</div>

war/src/main/less/pluginSetupWizard.less

@@ -342,7 +342,7 @@
 
 		            &:hover{
 		              background: rgba(100, 200, 255, 0.1);
-		              box-shadow:inset 0 200px 200px -200px rgba(100, 200, 255, 0.33),inset 0 0 0 1px rgba(100, 200, 255, 0.33);
+                      box-shadow:inset 0 400px 400px -100px rgba(100, 200, 255, 0.33), inset 0 0 0 1px rgba(100, 200, 255, 0.33);
 		            }
 
 					&.selected {
@@ -376,6 +376,62 @@
 						vertical-align: middle;
 					}
 
+					.deps {
+						.toggle-dependency-list {
+							position: absolute;
+							top: 2px;
+							right: 5px;
+							color: #777;
+							border: 0;
+							text-decoration: none;
+							padding: 4px 8px;
+							
+							.badge {
+								margin-left: 7px;
+							}
+							
+							&:hover, &.active {
+								text-decoration: underline;
+							}
+							
+							&.active {
+								&:after {
+									content: '';
+									display: inline-block;
+									position: absolute;
+									top: 50%;
+									right: 100%;
+									width: 0; 
+									height: 0; 
+									border-left: 7px solid transparent;
+									border-right: 7px solid transparent;
+									border-top: 7px solid #999;
+									margin: -3px -3px 0 0;
+								}
+								+ .dep-list {
+									display: block;
+								}
+							}
+						}
+						
+						.dep-list {
+							padding: 10px 0 6px 0;
+							display: none;
+							
+							.badge {
+								padding: 4px 8px;
+								margin: 5px 3px 0 0;
+							}
+						}
+					}
+					
+					&.selected .deps {
+						.toggle-dependency-list {
+							top: 1px;
+							right: 4px;
+						}
+					}
+
 					+ .tooltip {
 				        left: 2px !important;
 						margin-right: 16px;