[pve-devel] [PATCH widget-toolkit 0/5] improve webhook edit window

[pve-devel] [PATCH widget-toolkit 0/5] improve webhook edit window

[Dominik Csapak]

by implementing Thomas suggestions from here:
https://lore.proxmox.com/pve-devel/f592fea7-e0a5-4858-af48-b0b2ed57bc50@proxmox.com/

Dominik Csapak (5):
  webhook edit: improve layout and component hierarchy
  webhook edit: make items config not static
  webhook edit: use type in add button text
  webhook edit: add emptytext to key-value fields
  webhook edit: display validity for added key/value fields

 src/panel/WebhookEditPanel.js | 185 +++++++++++++++++-----------------
 1 file changed, 92 insertions(+), 93 deletions(-)

-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] [PATCH widget-toolkit 1/5] webhook edit: improve layout and component hierarchy

[Dominik Csapak]

* instead of manually setting margin/paddings and the fieldLabel, just
  use a FieldContainer instead of Container. That implements the
  Ext.form.Labelable mixin, which correctly positions the label. This
  also has the effect that the labels are now styled correctly.

* modify the margins to get a consistent spacing between fields

* reverse the order of grid/button, to be consistent with our other
  grids with this input pattern

* make the label of the textarea a proper fieldLabel with a
  FieldContainer, which gets rid of the ':' in the gettext and
  styles the label correctly.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/panel/WebhookEditPanel.js | 46 ++++++++++++-----------------------
 1 file changed, 15 insertions(+), 31 deletions(-)

diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index 0a39f3c..b440d7f 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -36,15 +36,12 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
 
     columnB: [
 	{
+	    xtype: 'fieldcontainer',
+	    fieldLabel: gettext('Method/URL'),
 	    layout: 'hbox',
 	    border: false,
 	    margin: '0 0 5 0',
 	    items: [
-		{
-		    xtype: 'displayfield',
-		    value: gettext('Method/URL:'),
-		    width: 125,
-		},
 		{
 		    xtype: 'proxmoxKVComboBox',
 		    name: 'method',
@@ -77,6 +74,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
 	    cbind: {
 		isCreate: '{isCreate}',
 	    },
+	    margin: '0 0 10 0',
 	},
 	{
 	    xtype: 'textarea',
@@ -87,7 +85,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
 	    fieldStyle: {
 		'font-family': 'monospace',
 	    },
-	    margin: '15 0 0 0',
+	    margin: '0 0 5 0',
 	},
 	{
 	    xtype: 'pmxWebhookKeyValueList',
@@ -97,6 +95,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
 	    cbind: {
 		isCreate: '{isCreate}',
 	    },
+	    margin: '0 0 10 0',
 	},
 	{
 	    xtype: 'proxmoxtextfield',
@@ -159,7 +158,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
 });
 
 Ext.define('Proxmox.form.WebhookKeyValueList', {
-    extend: 'Ext.container.Container',
+    extend: 'Ext.form.FieldContainer',
     alias: 'widget.pmxWebhookKeyValueList',
 
     mixins: [
@@ -319,33 +318,13 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 	},
     },
 
-    margin: '10 0 5 0',
-
     items: [
-	{
-	    layout: 'hbox',
-	    border: false,
-	    items: [
-		{
-		    xtype: 'displayfield',
-		    width: 125,
-		},
-		{
-		    xtype: 'button',
-		    text: gettext('Add'),
-		    iconCls: 'fa fa-plus-circle',
-		    handler: 'addLine',
-		    margin: '0 5 5 0',
-		},
-	    ],
-	},
 	{
 	    xtype: 'grid',
 	    reference: 'grid',
 	    minHeight: 100,
 	    maxHeight: 100,
 	    scrollable: 'vertical',
-	    margin: '0 0 0 125',
 
 	    viewConfig: {
 		deferEmptyText: false,
@@ -358,6 +337,13 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 		    },
 		},
 	    },
+	    margin: '5 0 5 0',
+	},
+	{
+	    xtype: 'button',
+	    text: gettext('Add'),
+	    iconCls: 'fa fa-plus-circle',
+	    handler: 'addLine',
 	},
     ],
 
@@ -365,12 +351,10 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 	let me = this;
 
 	for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
-	    me.items[1][key] = value;
+	    me.items[0][key] = value;
 	}
 
-	me.items[0].items[0].value = me.fieldLabel + ':';
-
-	me.items[1].columns = [
+	me.items[0].columns = [
 	    {
 		header: me.fieldTtitle,
 		dataIndex: 'headerName',
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] [PATCH widget-toolkit 2/5] webhook edit: make items config not static

[Dominik Csapak]

modifying static elements from the class, like done here with e.g.

 me.items[0][key] = value;

is dangerous, since it directly modifies the class definition of those
arrays/objects.

Instead move the definition in initComponent, which uses a fresh
declaration each time the component is initialized.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/panel/WebhookEditPanel.js | 143 +++++++++++++++++-----------------
 1 file changed, 73 insertions(+), 70 deletions(-)

diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index b440d7f..fcc5b06 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -318,90 +318,93 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 	},
     },
 
-    items: [
-	{
-	    xtype: 'grid',
-	    reference: 'grid',
-	    minHeight: 100,
-	    maxHeight: 100,
-	    scrollable: 'vertical',
-
-	    viewConfig: {
-		deferEmptyText: false,
-	    },
-
-	    store: {
-		listeners: {
-		    update: function() {
-			this.commitChanges();
-		    },
-		},
-	    },
-	    margin: '5 0 5 0',
-	},
-	{
-	    xtype: 'button',
-	    text: gettext('Add'),
-	    iconCls: 'fa fa-plus-circle',
-	    handler: 'addLine',
-	},
-    ],
-
     initComponent: function() {
 	let me = this;
 
-	for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
-	    me.items[0][key] = value;
-	}
-
-	me.items[0].columns = [
+	let items = [
 	    {
-		header: me.fieldTtitle,
-		dataIndex: 'headerName',
-		xtype: 'widgetcolumn',
-		widget: {
-		    xtype: 'textfield',
-		    isFormField: false,
-		    maskRe: me.maskRe,
-		    allowBlank: false,
-		    queryMode: 'local',
+		xtype: 'grid',
+		reference: 'grid',
+		minHeight: 100,
+		maxHeight: 100,
+		scrollable: 'vertical',
+
+		viewConfig: {
+		    deferEmptyText: false,
+		},
+
+		store: {
 		    listeners: {
-			change: 'itemChange',
+			update: function() {
+			    this.commitChanges();
+			},
 		    },
 		},
-		flex: 1,
-	    },
-	    {
-		header: me.fieldTtitle,
-		dataIndex: 'headerValue',
-		xtype: 'widgetcolumn',
-		widget: {
-		    xtype: 'proxmoxtextfield',
-		    inputType: me.maskValues ? 'password' : 'text',
-		    isFormField: false,
-		    maskRe: me.maskRe,
-		    queryMode: 'local',
-		    listeners: {
-			change: 'itemChange',
+		margin: '5 0 5 0',
+		columns: [
+		    {
+			header: me.fieldTtitle,
+			dataIndex: 'headerName',
+			xtype: 'widgetcolumn',
+			widget: {
+			    xtype: 'textfield',
+			    isFormField: false,
+			    maskRe: me.maskRe,
+			    allowBlank: false,
+			    queryMode: 'local',
+			    listeners: {
+				change: 'itemChange',
+			    },
+			},
+			flex: 1,
 		    },
-		    allowBlank: !me.isCreate && me.maskValues,
-
-		    bind: {
-			emptyText: '{record.emptyText}',
+		    {
+			header: me.fieldTtitle,
+			dataIndex: 'headerValue',
+			xtype: 'widgetcolumn',
+			widget: {
+			    xtype: 'proxmoxtextfield',
+			    inputType: me.maskValues ? 'password' : 'text',
+			    isFormField: false,
+			    maskRe: me.maskRe,
+			    queryMode: 'local',
+			    listeners: {
+				change: 'itemChange',
+			    },
+			    allowBlank: !me.isCreate && me.maskValues,
+
+			    bind: {
+				emptyText: '{record.emptyText}',
+			    },
+			},
+			flex: 1,
 		    },
-		},
-		flex: 1,
+		    {
+			xtype: 'widgetcolumn',
+			width: 40,
+			widget: {
+			    xtype: 'button',
+			    iconCls: 'fa fa-trash-o',
+			},
+		    },
+		],
 	    },
 	    {
-		xtype: 'widgetcolumn',
-		width: 40,
-		widget: {
-		    xtype: 'button',
-		    iconCls: 'fa fa-trash-o',
-		},
+		xtype: 'button',
+		text: gettext('Add'),
+		iconCls: 'fa fa-plus-circle',
+		handler: 'addLine',
 	    },
 	];
 
+	for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
+	    items[0][key] = value;
+	}
+
+	Ext.apply(me, {
+	    items,
+	});
+
 	me.callParent();
 	me.initField();
     },
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] [PATCH widget-toolkit 3/5] webhook edit: use type in add button text

[Dominik Csapak]

so one can more easily see what gets added.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/panel/WebhookEditPanel.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index fcc5b06..8b76d0a 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -70,6 +70,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
 	    xtype: 'pmxWebhookKeyValueList',
 	    name: 'header',
 	    fieldLabel: gettext('Headers'),
+	    subject: gettext('Header'),
 	    maskValues: false,
 	    cbind: {
 		isCreate: '{isCreate}',
@@ -91,6 +92,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
 	    xtype: 'pmxWebhookKeyValueList',
 	    name: 'secret',
 	    fieldLabel: gettext('Secrets'),
+	    subject: gettext('Secret'),
 	    maskValues: true,
 	    cbind: {
 		isCreate: '{isCreate}',
@@ -168,6 +170,9 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
     // override for column header
     fieldTitle: gettext('Item'),
 
+    // the text for a single element, used for the add button
+    subject: undefined,
+
     // will be applied to the textfields
     maskRe: undefined,
 
@@ -391,7 +396,7 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 	    },
 	    {
 		xtype: 'button',
-		text: gettext('Add'),
+		text: me.subject ? Ext.String.format(gettext('Add {0}'), me.subject) : gettext('Add'),
 		iconCls: 'fa fa-plus-circle',
 		handler: 'addLine',
 	    },
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] [PATCH widget-toolkit 4/5] webhook edit: add emptytext to key-value fields

[Dominik Csapak]

namely 'Key' and 'Value'

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/panel/WebhookEditPanel.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index 8b76d0a..69a38f5 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -282,7 +282,7 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 	    me.lookup('grid').getStore().add({
 		headerName: '',
 		headerValue: '',
-		emptyText: '',
+		emptyText: gettext('Value'),
 		newValue: true,
 	    });
 	},
@@ -357,6 +357,7 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 			    maskRe: me.maskRe,
 			    allowBlank: false,
 			    queryMode: 'local',
+			    emptyText: gettext('Key'),
 			    listeners: {
 				change: 'itemChange',
 			    },
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] [PATCH widget-toolkit 5/5] webhook edit: display validity for added key/value fields

[Dominik Csapak]

by calling 'isValid()' once the widget is attached to the grid

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/panel/WebhookEditPanel.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index 69a38f5..ca99333 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -362,6 +362,9 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 				change: 'itemChange',
 			    },
 			},
+			onWidgetAttach: function(_col, widget) {
+			    widget.isValid();
+			},
 			flex: 1,
 		    },
 		    {
@@ -383,6 +386,9 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 				emptyText: '{record.emptyText}',
 			    },
 			},
+			onWidgetAttach: function(_col, widget) {
+			    widget.isValid();
+			},
 			flex: 1,
 		    },
 		    {
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] applied-series: [PATCH widget-toolkit 0/5] improve webhook edit window

[Thomas Lamprecht]

Am 12.11.24 um 15:41 schrieb Dominik Csapak:
> by implementing Thomas suggestions from here:
> https://lore.proxmox.com/pve-devel/f592fea7-e0a5-4858-af48-b0b2ed57bc50@proxmox.com/
> 
> Dominik Csapak (5):
>   webhook edit: improve layout and component hierarchy
>   webhook edit: make items config not static
>   webhook edit: use type in add button text
>   webhook edit: add emptytext to key-value fields
>   webhook edit: display validity for added key/value fields
> 
>  src/panel/WebhookEditPanel.js | 185 +++++++++++++++++-----------------
>  1 file changed, 92 insertions(+), 93 deletions(-)
> 


applied series, many thanks!


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel