[pve-devel] [PATCH widget-toolkit v4 2/4] toolkit: add markdown based NotesView and NotesEdit

[Stefan Sterz <s.sterz@proxmox.com>]

adds a universal version of NotesView and NotesEdit to the widget
toolkit that is compatible with pve and pbs. this avoids maintaining
duplicate code in pve and pbs, but since the original versions were
very tightly integrated with pve-manager, changes are required to
make them compatible with pbs. changes include: making the tbar
configurable, setting the url differently in a pbs context, and
allowing the caller to set the onlineHelp field.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/Makefile            |   2 +
 src/panel/NotesView.js  | 149 ++++++++++++++++++++++++++++++++++++++++
 src/window/NotesEdit.js |  38 ++++++++++
 3 files changed, 189 insertions(+)
 create mode 100644 src/panel/NotesView.js
 create mode 100644 src/window/NotesEdit.js

diff --git a/src/Makefile b/src/Makefile
index abafc2c..dd7729e 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -66,6 +66,7 @@ JSSRC=					\
 	panel/ACMEDomains.js		\
 	panel/StatusView.js		\
 	panel/TfaView.js		\
+	panel/NotesView.js		\
 	window/Edit.js			\
 	window/PasswordEdit.js		\
 	window/SafeDestroy.js		\
@@ -87,6 +88,7 @@ JSSRC=					\
 	window/AddWebauthn.js		\
 	window/AddYubico.js		\
 	window/TfaEdit.js		\
+	window/NotesEdit.js		\
 	node/APT.js			\
 	node/APTRepositories.js		\
 	node/NetworkEdit.js		\
diff --git a/src/panel/NotesView.js b/src/panel/NotesView.js
new file mode 100644
index 0000000..d1c902f
--- /dev/null
+++ b/src/panel/NotesView.js
@@ -0,0 +1,149 @@
+Ext.define('Proxmox.panel.NotesView', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'pmxNotesView',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    title: gettext("Notes"),
+    bodyPadding: 10,
+    scrollable: true,
+    animCollapse: false,
+    maxLength: 64 * 1024,
+    enableTBar: false,
+    onlineHelp: 'markdown_basics',
+
+    tbar: {
+	itemId: 'tbar',
+	hidden: true,
+	items: [
+	    {
+		text: gettext('Edit'),
+		handler: function() {
+		    let view = this.up('panel');
+		    view.run_editor();
+		},
+	    },
+	],
+    },
+
+   cbindData: function(initalConfig) {
+	let me = this;
+	let type = '';
+
+	if (me.node) {
+	    me.url = `/api2/extjs/nodes/${me.node}/config`;
+	} else if (me.pveSelNode?.data?.id === 'root') {
+	    me.url = '/api2/extjs/cluster/options';
+	    type = me.pveSelNode?.data?.type;
+	} else {
+	    const nodename = me.pveSelNode?.data?.node;
+	    type = me.pveSelNode?.data?.type;
+
+	    if (!nodename) {
+		throw "no node name specified";
+	    }
+
+	    if (!Ext.Array.contains(['node', 'qemu', 'lxc'], type)) {
+		throw 'invalid type specified';
+	    }
+
+	    const vmid = me.pveSelNode?.data?.vmid;
+
+	    if (!vmid && type !== 'node') {
+		throw "no VM ID specified";
+	    }
+
+	    me.url = `/api2/extjs/nodes/${nodename}/`;
+
+	    // add the type specific path if qemu/lxc and set the backend's maxLen
+	    if (type === 'qemu' || type === 'lxc') {
+		me.url += `${type}/${vmid}/`;
+		me.maxLength = 8 * 1024;
+	    }
+
+	    me.url += 'config';
+	}
+
+	me.pveType = type;
+	return {};
+    },
+
+    run_editor: function() {
+	let me = this;
+	Ext.create('Proxmox.window.NotesEdit', {
+	    url: me.url,
+	    onlineHelp: me.onlineHelp,
+	    listeners: {
+		destroy: () => me.load(),
+	    },
+	    autoShow: true,
+	}).setMaxLength(me.maxLength);
+    },
+
+    setNotes: function(value) {
+	let me = this;
+
+	let mdHtml = Proxmox.Markdown.parse(value || '');
+	me.update(mdHtml);
+
+	if (me.collapsible && me.collapseMode === 'auto') {
+	    me.setCollapsed(!value);
+	}
+    },
+
+    load: function() {
+	var me = this;
+
+	Proxmox.Utils.API2Request({
+	    url: me.url,
+	    waitMsgTarget: me,
+	    failure: function(response, opts) {
+		me.update(gettext('Error') + " " + response.htmlStatus);
+		me.setCollapsed(false);
+	    },
+	    success: ({ result }) => me.setNotes(result.data.description),
+	});
+    },
+
+    listeners: {
+	render: function(c) {
+	    var me = this;
+	    me.getEl().on('dblclick', me.run_editor, me);
+	},
+	afterlayout: function() {
+	    let me = this;
+	    if (me.collapsible && !me.getCollapsed() && me.collapseMode === 'always') {
+		me.setCollapsed(true);
+		me.collapseMode = ''; // only once, on initial load!
+	    }
+	},
+    },
+
+    tools: [{
+	type: 'gear',
+	handler: function() {
+	    this.up('panel').run_editor();
+	},
+    }],
+
+    initComponent: function() {
+	const me = this;
+	me.callParent();
+
+	// '' is for datacenter
+	if (me.enableTBar === true || me.pveType === 'node' || me.pveType === '') {
+	    me.down('#tbar').setVisible(true);
+	} else if (me.pveSelNode?.data?.template !== 1) {
+	    me.setCollapsible(true);
+	    me.collapseDirection = 'right';
+
+	    let sp = Ext.state.Manager.getProvider();
+	    me.collapseMode = sp.get('guest-notes-collapse', 'never');
+
+	    if (me.collapseMode === 'auto') {
+		me.setCollapsed(true);
+	    }
+	}
+
+	me.load();
+    },
+});
diff --git a/src/window/NotesEdit.js b/src/window/NotesEdit.js
new file mode 100644
index 0000000..ab5254d
--- /dev/null
+++ b/src/window/NotesEdit.js
@@ -0,0 +1,38 @@
+Ext.define('Proxmox.window.NotesEdit', {
+    extend: 'Proxmox.window.Edit',
+
+    title: gettext('Notes'),
+    onlineHelp: 'markdown_basics',
+
+    width: 800,
+    height: '600px',
+
+    resizable: true,
+    layout: 'fit',
+
+    autoLoad: true,
+    defaultButton: undefined,
+
+    setMaxLength: function(maxLength) {
+	let me = this;
+
+	let area = me.down('textarea[name="description"]');
+	area.maxLength = maxLength;
+	area.validate();
+
+	return me;
+    },
+
+    items: {
+	xtype: 'textarea',
+	name: 'description',
+	height: '100%',
+	value: '',
+	hideLabel: true,
+	emptyText: gettext('You can use Markdown for rich text formatting.'),
+	fieldStyle: {
+	    'white-space': 'pre-wrap',
+	    'font-family': 'monospace',
+	},
+    },
+});
-- 
2.30.2