[pgadmin-hackers] [pgAdmin4][Patch]: RM 1730 - Role membership control display needs improvement

[Khushboo Vashi]

Hi,

Please find the attached patch to fix RM 1730 - Role membership control
display needs improvement

*Fixed items:*

- An alternate note is needed when shown on the properties panel
- Remove the border
- Align the label and control in columns as per other controls.

*Remaining*:

- Investigate making the control multi-line.
   - The control already implemented in a way that, once the selected
options don't fit in a single line, it becomes multi-line.


Thanks,
Khushboo

diff --git a/web/pgadmin/browser/server_groups/servers/roles/templates/role/js/role.js b/web/pgadmin/browser/server_groups/servers/roles/templates/role/js/role.js
index 9e3c689..3248185 100644
--- a/web/pgadmin/browser/server_groups/servers/roles/templates/role/js/role.js
+++ b/web/pgadmin/browser/server_groups/servers/roles/templates/role/js/role.js
@@ -44,10 +44,10 @@ function($, _, S, pgAdmin, pgBrowser, alertify, Backform) {
         String(data.provider).replace(/^\s+|\s+$/g, '') == '') {
         var msg = '{{ _('Please specify the value for all the security providers.') }}';
 
-	this.errorModel.set('provider', msg);
+        this.errorModel.set('provider', msg);
         return msg;
       } else {
-	this.errorModel.unset('provider');
+        this.errorModel.unset('provider');
       }
 
       if (_.isUndefined(data.label) ||
@@ -55,10 +55,10 @@ function($, _, S, pgAdmin, pgBrowser, alertify, Backform) {
         String(data.label).replace(/^\s+|\s+$/g, '') == '') {
         var msg = '{{ _('Please specify the value for all the security providers.') }}' ;
 
-	this.errorModel.set('label', msg);
+        this.errorModel.set('label', msg);
         return msg;
       } else {
-	this.errorModel.unset('label');
+        this.errorModel.unset('label');
       }
 
       return null;
@@ -105,16 +105,18 @@ function($, _, S, pgAdmin, pgBrowser, alertify, Backform) {
       }
     },
     template: _.template([
-      '<label class="control-label col-xs-12"><%=label%></label>',
-      '<div class="pgadmin-controls col-xs-12">',
+      '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
+      '<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)) {
@@ -252,9 +258,6 @@ function($, _, S, pgAdmin, pgBrowser, alertify, Backform) {
         $(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',
diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index 69528c9..1f5e0e0 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/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;
 }
 

-- 
Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers