Fix active scope not visible in the menu if excluded

Depending on some settings (for example, if lookup server upload is
disabled) some items can be hidden in the scope menu. However, if the
user selected an scope in the past once the settings were changed the
scope was no longer visible in the menu. Now the active scope will be
always visible in the menu, although if it is an excluded scope it will
be disabled. Selecting any other scope will then hide the excluded and
no longer active one.

When upload to the lookup server is disabled the scope menu was hidden
for display name and email in the personal information settings; now the
menu will be always shown to enable the above described behaviour.

Note that the menu will be shown even if there is a single available
scope so the user can read its description.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

apps/settings/css/settings.scss

@@ -403,6 +403,16 @@ select {
 						font-weight: bold;
 					}
 				}
+
+				&.disabled {
+					opacity: .5;
+
+					cursor: default;
+
+					* {
+						cursor: default;
+					}
+				}
 			}
 		}
 	}

apps/settings/js/federationscopemenu.js

@@ -23,6 +23,7 @@
 		className: 'federationScopeMenu popovermenu bubble menu menu-center',
 		field: undefined,
 		_scopes: undefined,
+		_excludedScopes: [],
 
 		initialize: function(options) {
 			this.field = options.field;
@@ -58,9 +59,7 @@
 			];
 
 			if (options.excludedScopes && options.excludedScopes.length) {
-				this._scopes = this._scopes.filter(function(scopeEntry) {
+				this._excludedScopes = options.excludedScopes
-					return options.excludedScopes.indexOf(scopeEntry.name) === -1;
-				})
 			}
 		},
 
@@ -122,6 +121,17 @@
 				} else {
 					this._scopes[i].active = false;
 				}
+
+				var isExcludedScope = this._excludedScopes.includes(this._scopes[i].name)
+				if (isExcludedScope && !this._scopes[i].active) {
+					this._scopes[i].hidden = true
+				} else if (isExcludedScope && this._scopes[i].active) {
+					this._scopes[i].hidden = false
+					this._scopes[i].disabled = true
+				} else {
+					this._scopes[i].hidden = false
+					this._scopes[i].disabled = false
+				}
 			}
 
 			this.render();

apps/settings/js/templates.js

@@ -1,6 +1,15 @@
 (function() {
   var template = Handlebars.template, templates = OC.Settings.Templates = OC.Settings.Templates || {};
 templates['federationscopemenu'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return ((stack1 = lookupProperty(helpers,"unless").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"hidden") : depth0),{"name":"unless","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":2},"end":{"line":25,"column":13}}})) != null ? stack1 : "");
+},"2":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
         if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
           return parent[propertyName];
@@ -17,13 +26,45 @@ templates['federationscopemenu'] = template({"1":function(container,depth0,helpe
     + "\">\n"
     + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconClass") : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.program(6, data, 0),"data":data,"loc":{"start":{"line":5,"column":4},"end":{"line":9,"column":11}}})) != null ? stack1 : "")
     + "				<p>\n					<strong class=\"menuitem-text\">"
-    + alias4(((helper = (helper = lookupProperty(helpers,"displayName") || (depth0 != null ? lookupProperty(depth0,"displayName") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"displayName","hash":{},"data":data,"loc":{"start":{"line":11,"column":35},"end":{"line":11,"column":50}}}) : helper)))
+    + alias4(((helper = (helper = lookupProperty(helpers,"displayName") || (depth0 != null ? lookupProperty(depth0,"displayName") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"displayName","hash":{},"data":data,"loc":{"start":{"line":16,"column":35},"end":{"line":16,"column":50}}}) : helper)))
     + "</strong><br>\n					<span class=\"menuitem-text-detail\">"
-    + alias4(((helper = (helper = lookupProperty(helpers,"tooltip") || (depth0 != null ? lookupProperty(depth0,"tooltip") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"tooltip","hash":{},"data":data,"loc":{"start":{"line":12,"column":40},"end":{"line":12,"column":51}}}) : helper)))
+    + alias4(((helper = (helper = lookupProperty(helpers,"tooltip") || (depth0 != null ? lookupProperty(depth0,"tooltip") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"tooltip","hash":{},"data":data,"loc":{"start":{"line":17,"column":40},"end":{"line":17,"column":51}}}) : helper)))
-    + "</span>\n				</p>\n			</a>\n		</li>\n";
+    + "</span>\n				</p>\n"
-},"2":function(container,depth0,helpers,partials,data) {
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"disabled") : depth0),{"name":"if","hash":{},"fn":container.program(12, data, 0),"inverse":container.program(14, data, 0),"data":data,"loc":{"start":{"line":19,"column":3},"end":{"line":23,"column":10}}})) != null ? stack1 : "")
-    return "active";
+    + "		</li>\n";
+},"3":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "			<div class=\"menuitem action action-"
+    + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":6,"column":38},"end":{"line":6,"column":46}}}) : helper)))
+    + " permanent "
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"active") : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":6,"column":57},"end":{"line":6,"column":84}}})) != null ? stack1 : "")
+    + " disabled\" data-action=\""
+    + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":6,"column":108},"end":{"line":6,"column":116}}}) : helper)))
+    + "\">\n";
 },"4":function(container,depth0,helpers,partials,data) {
+    return "active";
+},"6":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "			<a href=\"#\" class=\"menuitem action action-"
+    + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":8,"column":45},"end":{"line":8,"column":53}}}) : helper)))
+    + " permanent "
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"active") : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":8,"column":64},"end":{"line":8,"column":91}}})) != null ? stack1 : "")
+    + "\" data-action=\""
+    + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":8,"column":106},"end":{"line":8,"column":114}}}) : helper)))
+    + "\">\n";
+},"8":function(container,depth0,helpers,partials,data) {
     var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) {
         if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
           return parent[propertyName];
@@ -32,10 +73,14 @@ templates['federationscopemenu'] = template({"1":function(container,depth0,helpe
     };
 
   return "					<span class=\"icon "
-    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"iconClass") || (depth0 != null ? lookupProperty(depth0,"iconClass") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"iconClass","hash":{},"data":data,"loc":{"start":{"line":6,"column":23},"end":{"line":6,"column":36}}}) : helper)))
+    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"iconClass") || (depth0 != null ? lookupProperty(depth0,"iconClass") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"iconClass","hash":{},"data":data,"loc":{"start":{"line":11,"column":23},"end":{"line":11,"column":36}}}) : helper)))
     + "\"></span>\n";
-},"6":function(container,depth0,helpers,partials,data) {
+},"10":function(container,depth0,helpers,partials,data) {
     return "					<span class=\"no-icon\"></span>\n";
+},"12":function(container,depth0,helpers,partials,data) {
+    return "			</div>\n";
+},"14":function(container,depth0,helpers,partials,data) {
+    return "			</a>\n";
 },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
         if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
@@ -45,7 +90,7 @@ templates['federationscopemenu'] = template({"1":function(container,depth0,helpe
     };
 
   return "<ul>\n"
-    + ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"items") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":2,"column":1},"end":{"line":16,"column":10}}})) != null ? stack1 : "")
+    + ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"items") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":2,"column":1},"end":{"line":26,"column":10}}})) != null ? stack1 : "")
     + "</ul>\n";
 },"useData":true});
 })();

apps/settings/js/templates/federationscopemenu.handlebars

@@ -2,6 +2,7 @@
 	{{#each items}}
 		<li tabindex="0">
 			<a href="#" class="menuitem action action-{{name}} permanent {{#if active}}active{{/if}}" data-action="{{name}}">
+			{{/if}}
 				{{#if iconClass}}
 					<span class="icon {{iconClass}}"></span>
 				{{else}}
@@ -11,7 +12,12 @@
 					<strong class="menuitem-text">{{displayName}}</strong><br>
 					<span class="menuitem-text-detail">{{tooltip}}</span>
 				</p>
+			{{#if disabled}}
+			</div>
+			{{else}}
 			</a>
+			{{/if}}
 		</li>
+		{{/unless}}
 	{{/each}}
 </ul>

apps/settings/templates/settings/personal/personal.info.php

@@ -122,9 +122,7 @@ script('settings', [
 				<?php } ?>
 				<span class="icon-checkmark hidden"></span>
 				<span class="icon-error hidden" ></span>
-				<?php if ($_['lookupServerUploadEnabled']) { ?>
 				<input type="hidden" id="displaynamescope" value="<?php p($_['displayNameScope']) ?>">
-				<?php } ?>
 			</form>
 		</div>
 		<div class="personal-settings-setting-box">
@@ -172,9 +170,7 @@ script('settings', [
 				<?php if ($_['displayNameChangeSupported']) { ?>
 					<em><?php p($l->t('For password reset and notifications')); ?></em>
 				<?php } ?>
-				<?php if ($_['lookupServerUploadEnabled']) { ?>
+				<input type="hidden" id="emailscope" value="<?php p($_['emailScope']) ?>">
-					<input type="hidden" id="emailscope" value="<?php p($_['emailScope']) ?>">
-				<?php } ?>
 			</form>
 		</div>
 		<div class="personal-settings-setting-box">