[pbs-devel] [PATCH proxmox-backup v4 31/45] ui: add datastore type selector and reorganize component layout

[Christian Ebner]

In preparation for adding the S3 backed datastore variant to the edit
window. Introduce a datastore type selector in order to distinguish
between creation of regular and removable datastores, instead of
using the checkbox as is currently the case.

This allows to more easily expand for further datastore type variants
while keeping the datastore edit window compact.

Since selecting the type is one of the first steps during datastore
creation, position the component right below the datastore name field
and re-organize the components related to the removable datastore
creation, while keeping additional required components for the S3
backed datastore creation in mind.

Signed-off-by: Christian Ebner <c.ebner at proxmox.com>
---
 www/window/DataStoreEdit.js | 78 +++++++++++++++++++++----------------
 1 file changed, 45 insertions(+), 33 deletions(-)

diff --git a/www/window/DataStoreEdit.js b/www/window/DataStoreEdit.js
index 372984e37..35ceddbc6 100644
--- a/www/window/DataStoreEdit.js
+++ b/www/window/DataStoreEdit.js
@@ -52,6 +52,41 @@ Ext.define('PBS.DataStoreEdit', {
                         allowBlank: false,
                         fieldLabel: gettext('Name'),
                     },
+                    {
+                        xtype: 'proxmoxKVComboBox',
+                        name: 'datastore-type',
+                        fieldLabel: gettext('Datastore Type'),
+                        value: '__default__',
+                        submitValue: false,
+                        comboItems: [
+                            ['__default__', 'Regular'],
+                            ['removable', 'Removable'],
+                        ],
+                        cbind: {
+                            disabled: '{!isCreate}',
+                        },
+                        listeners: {
+                            change: function (checkbox, selected) {
+                                let isRemovable = selected === 'removable';
+
+                                let inputPanel = checkbox.up('inputpanel');
+                                let pathField = inputPanel.down('[name=path]');
+                                let uuidEditField = inputPanel.down('[name=backing-device]');
+
+                                uuidEditField.setDisabled(!isRemovable);
+                                uuidEditField.allowBlank = !isRemovable;
+                                uuidEditField.setValue('');
+
+                                if (isRemovable) {
+                                    pathField.setFieldLabel(gettext('Path on Device'));
+                                    pathField.setEmptyText(gettext('A relative path'));
+                                } else {
+                                    pathField.setFieldLabel(gettext('Backing Path'));
+                                    pathField.setEmptyText(gettext('An absolute path'));
+                                }
+                            },
+                        },
+                    },
                     {
                         xtype: 'pmxDisplayEditField',
                         cbind: {
@@ -63,17 +98,6 @@ Ext.define('PBS.DataStoreEdit', {
                         emptyText: gettext('An absolute path'),
                         validator: (val) => val?.trim() !== '/',
                     },
-                    {
-                        xtype: 'pbsPartitionSelector',
-                        fieldLabel: gettext('Device'),
-                        name: 'backing-device',
-                        disabled: true,
-                        allowBlank: true,
-                        cbind: {
-                            editable: '{isCreate}',
-                        },
-                        emptyText: gettext('Device path'),
-                    },
                 ],
                 column2: [
                     {
@@ -97,31 +121,19 @@ Ext.define('PBS.DataStoreEdit', {
                             value: '{scheduleValue}',
                         },
                     },
-                ],
-                columnB: [
                     {
-                        xtype: 'checkbox',
-                        boxLabel: gettext('Removable datastore'),
-                        submitValue: false,
-                        listeners: {
-                            change: function (checkbox, isRemovable) {
-                                let inputPanel = checkbox.up('inputpanel');
-                                let pathField = inputPanel.down('[name=path]');
-                                let uuidEditField = inputPanel.down('[name=backing-device]');
-
-                                uuidEditField.setDisabled(!isRemovable);
-                                uuidEditField.allowBlank = !isRemovable;
-                                uuidEditField.setValue('');
-                                if (isRemovable) {
-                                    pathField.setFieldLabel(gettext('Path on Device'));
-                                    pathField.setEmptyText(gettext('A relative path'));
-                                } else {
-                                    pathField.setFieldLabel(gettext('Backing Path'));
-                                    pathField.setEmptyText(gettext('An absolute path'));
-                                }
-                            },
+                        xtype: 'pbsPartitionSelector',
+                        fieldLabel: gettext('Device'),
+                        name: 'backing-device',
+                        disabled: true,
+                        allowBlank: true,
+                        cbind: {
+                            editable: '{isCreate}',
                         },
+                        emptyText: gettext('Device path'),
                     },
+                ],
+                columnB: [
                     {
                         xtype: 'textfield',
                         name: 'comment',
-- 
2.47.2