From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Sat, 14 May 2022 12:07:06 +0000 (+0200)
Subject: ui: acl role selector: make wider and wrap priv column
X-Git-Url: https://git.proxmox.com/?a=commitdiff_plain;h=49275c6726e7bf40f6d79e7b62eb4ad490a75119;p=proxmox-widget-toolkit.git

ui: acl role selector: make wider and wrap priv column

as UX was pretty poort, one could only see one and a half privileges
of the role, the rest overflowed and was hidden. While the column
could be resized, doing so would make the role name column shrink
automatically, and it really shouldn't be required in the first
place.

This is a very important selector and all privs of a role must be
visible when opening without any manual user interaction required.

So increase the width to 500px, make the priv colum take more
relative space and enable cellWrap to avoid hidden overflow.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---

diff --git a/src/form/RoleSelector.js b/src/form/RoleSelector.js
index 142cdfd..d82c980 100644
--- a/src/form/RoleSelector.js
+++ b/src/form/RoleSelector.js
@@ -18,17 +18,21 @@ Ext.define('Proxmox.form.RoleSelector', {
     displayField: 'roleid',
 
     listConfig: {
+	width: 500,
 	columns: [
 	    {
 		header: gettext('Role'),
 		sortable: true,
 		dataIndex: 'roleid',
-		flex: 1,
+		flex: 2,
 	    },
 	    {
 		header: gettext('Privileges'),
 		dataIndex: 'privs',
-		flex: 1,
+		cellWrap: true,
+		// join manually here, as ExtJS joins without whitespace which breaks cellWrap
+		renderer: v => v.join(', '),
+		flex: 5,
 	    },
 	],
     },