Re: [pbs-devel] [PATCH proxmox-backup 2/2] ui: add Remove button for DirectoryList

[Lukas Wagner <l.wagner@proxmox.com>]

Comments inline.

On 10/10/23 08:39, Markus Frank wrote:
> With this patch it is possible to remove systemd mount units via the webui.
> 
> Signed-off-by: Markus Frank <m.frank@proxmox.com>
> ---
>   www/DirectoryList.js | 79 ++++++++++++++++++++++++++++++++++++++++++++
>   1 file changed, 79 insertions(+)
> 
> diff --git a/www/DirectoryList.js b/www/DirectoryList.js
> index 00531fd0..53aa76cc 100644
> --- a/www/DirectoryList.js
> +++ b/www/DirectoryList.js
> @@ -7,6 +7,15 @@ Ext.define('PBS.admin.Directorylist', {
>   
>       emptyText: gettext('No Mount-Units found'),
>   
> +    viewModel: {
> +	data: {
> +	    path: '',
> +	},
> +	formulas: {
> +	    dirName: (get) => get('path')?.replace('/mnt/datastore/', '') || undefined,
> +	},
> +    },
> +
>       controller: {
>   	xclass: 'Ext.app.ViewController',
>   
> @@ -21,6 +30,27 @@ Ext.define('PBS.admin.Directorylist', {
>   	    }).show();
>   	},
>   
> +	removeDirectory: function() {
> +	    let me = this;
> +	    let vm = me.getViewModel();
> +
> +	    const dirName = vm.get('dirName');
Nit: As per our JS style guidelines I'd use 'let' here. For objects,
'const' only prohibits reassignemnt, but not modification of the
actual object.

> +
> +	    if (!dirName) {
> +		throw "no directory name specified";
> +	    }
> +
> +	    Ext.create('Proxmox.window.SafeDestroy', {
> +		url: `/nodes/localhost/disks/directory/${dirName}`,
> +		item: { id: dirName },
> +		showProgress: true,
> +		taskName: 'dirremove',
> +		listeners: {
> +		    destroy: () => me.reload(),
> +		},
> +	    }).show();
> +	},
> +
>   	reload: function() {
>   	    let me = this;
>   	    let store = me.getView().getStore();
> @@ -49,6 +79,45 @@ Ext.define('PBS.admin.Directorylist', {
>   	    text: gettext('Create') + ': Directory',
>   	    handler: 'createDirectory',
>   	},
> +	'->',
> +        {
> +            xtype: 'tbtext',
> +            data: {
> +                dirName: undefined,
> +            },
> +            bind: {
> +                data: {
> +                    dirName: "{dirName}",
> +                },
> +            },
> +            tpl: [
> +                '<tpl if="dirName">',
> +                gettext('Directory') + ' {dirName}:',
> +                '<tpl else>',
> +                Ext.String.format(gettext('No {0} selected'), gettext('directory')),
> +                '</tpl>',
> +            ],
> +	},
Indentation is off here (only spaces).

> +	{
> +	    text: gettext('More'),
> +	    iconCls: 'fa fa-bars',
> +	    disabled: true,
> +	    bind: {
> +		disabled: '{!dirName}',
> +	    },
> +	    menu: [
> +		{
> +		    text: gettext('Remove'),
> +		    itemId: 'remove',
> +		    iconCls: 'fa fa-fw fa-trash-o',
> +		    handler: 'removeDirectory',
> +		    disabled: true,
> +		    bind: {
> +			disabled: '{!dirName}',
> +		    },
> +		},
> +	    ],
> +	},
>       ],
>   
>       columns: [
> @@ -79,6 +148,16 @@ Ext.define('PBS.admin.Directorylist', {
>   	},
>       ],
>   
> +    listeners: {
> +	activate: "reload",
> +	selectionchange: function(model, selected) {
> +	    let me = this;
> +	    let vm = me.getViewModel();
> +
> +	    vm.set('path', selected[0]?.data.path || '');
> +	},
> +    },
> +
>       store: {
>   	fields: ['path', 'device', 'filesystem', 'options', 'unitfile'],
>   	proxy: {

A high-level comment about the UI changes:
In most places in our UI, we have a dedicated 'Remove' button right next
to the 'Add/Create' and 'Edit' button:

[Add] [Edit] [Remove]

We don't need 'Edit' here, but why not just add the button right next
to the 'Create: Directory' button?
What's the rationale of  moving the remove button to a menu on the
right-hand side?

-- 
- Lukas