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

[Stefan Sterz]

I realized that there are some more improvements to be made here, I'll
send an updated version in a bit. Sorry for the inconvenience.

On 01.04.22 12:19, Stefan Sterz wrote:
> 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 at 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',
> +	},
> +    },
> +});