Improve the display of role membership on both the properties panel and role dialogue. Fixes #1730

web/pgadmin/browser/server_groups/servers/roles/templates/role/js/role.js

@@ -105,16 +105,18 @@ function($, _, S, pgAdmin, pgBrowser, alertify, Backform) {
       }
     },
     template: _.template([
-      '<label class="control-label col-xs-12"><%=label%></label>',
+      '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
-      '<div class="pgadmin-controls col-xs-12">',
+      '<div class="<%=Backform.controlsClassName%>">',
       '  <select multiple="multiple" style="width:100%;" class="pgadmin-controls <%=extraClasses.join(\' \')%>" name="<%=name%>" value="<%-JSON.stringify(value)%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%>>',
       '    <% for (var i=0; i < options.length; i++) { %>',
       '      <% var option = options[i]; %>',
       '      <option value=<%-option.value%> data-icon=<%-option.image%> <%=value != null && _.indexOf(value, option.value) != -1 ? "selected" : ""%> <%=option.disabled ? "disabled=\'disabled\'" : ""%>><%-option.label%></option>',
       '    <% } %>',
       '  </select>',
+      '  <% if (helpMessage && helpMessage.length) { %>',
+      '    <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
+      '  <% } %>',
       '</div>',
-      '<div class="note <%=Backform.helpMessageClassName%> col-xs-12"></div>',
       ].join("\n")),
     selectionTemplate: _.template([
       '<span>',
@@ -150,13 +152,17 @@ function($, _, S, pgAdmin, pgBrowser, alertify, Backform) {
           }),
           evalF = function(f, d, m) {
             return (_.isFunction(f) ? !!f.apply(d, [m]) : !!f);
+          },
+          evalASFunc = function(f, d, m) {
+             return (_.isFunction(f) ? f.apply(d, [m]) : f);
           };
 
       // Evaluate the disabled, visible, and required option
       _.extend(data, {
         disabled: evalF(data.disabled, data, this.model),
         visible:  evalF(data.visible, data, this.model),
-        required: evalF(data.required, data, this.model)
+        required: evalF(data.required, data, this.model),
+        helpMessage: evalASFunc(data.helpMessage, data, this.model)
       });
       // Evaluation the options
       if (_.isFunction(data.options)) {
@@ -245,16 +251,13 @@ function($, _, S, pgAdmin, pgBrowser, alertify, Backform) {
         templateSelection: formatSelection,
         multiple: true,
         tags: true,
-        allowClear: true,
+        allowClear: data.disabled ? false : true,
-        placeholder: "Select members",
+        placeholder: data.disabled ? "" : "Select members",
         width: 'style'
       }).on("change", function(e) {
         $(e.target).find(':selected').each(function() {
         });
       });
-      var msg = '{{ _('Select the checkbox for roles to include WITH ADMIN OPTION.') }}';
-
-      this.$el.find('div.note').html("<span>NOTE: " + msg + "</span>");
 
       return this;
     },
@@ -491,6 +494,13 @@ function($, _, S, pgAdmin, pgBrowser, alertify, Backform) {
           }),
           filter: function(d) {
             return this.model.isNew() || (this.model.get('rolname') != d.label);
+          },
+          helpMessage: function(m) {
+            if (m.has('read_only') && m.get('read_only') == false) {
+              return '{{ _('Select the checkbox for roles to include WITH ADMIN OPTION.') }}';
+            } else {
+              return '{{ _('Roles shown with a check mark have the WITH ADMIN OPTION set.') }}';
+            }
           }
         },{
           id: 'variables', label: '{{ _('Parameters') }}', type: 'collection',

web/pgadmin/static/css/overrides.css

@@ -752,7 +752,6 @@ td.switch-cell > div.bootstrap-switch {
 }
 
 div.rolmembership {
-    border: 1.5px solid #faebd7;
     margin-top: 15px;
 }