simpler one click edit mode for edit forms

[edlerd]

Done

• simpler one click edit mode for edit forms on instances, profiles networks, storage pools, storage volumes and projects

Fixes WD-14393

QA

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @mas-who or @edlerd for access.
   • With a local copy of this branch, build and run as described in the docs.
2. Perform the following QA steps:
   • check edit and creation of instances, profiles networks, storage pools, storage volumes and projects

[webteam-app]

Demo

Jenkins

demos.haus

[Kxiru]

To clarify, should the one click editing only work on dropdown and text fields? Not the overridable aspects of configs?

[edlerd]

To clarify, should the one click editing only work on dropdown and text fields? Not the overridable aspects of configs?

Previously you had to click "Edit instance", then those pencil icons would appear. When clicking a pencil to create an override, the input element appears.

Now the pencil icons are always visible, clicking them will go into edit-instanc-mode and show the input element.

[mas-who]

Thanks for this change, the interaction is really nice now for editing configurations on resources 👍

Only two smallish comments from QA:

1. On the network device form, seems like the config row cell content alignment is a little off. In non-edit mode, the configuration column cell value seems to be off vertical center.
   

2. When editing network main configurations, clicking the edit icon for one of the config row puts all other config rows in edit mode. I think this seems to be a little inconsistent with other pages where config rows can go into edit mode individually?
   Screencast from 27-08-2024 18:41:31.webm

[edlerd]

1. On the network device form, seems like the config row cell content alignment is a little off. In non-edit mode, the configuration column cell value seems to be off vertical center.
   

This is a local override, hence the placement on the right. I agree this looks off, though. Maybe we can adopt a similar layout as in disk device section: with inherited and custom devices as headings.

2. When editing network main configurations, clicking the edit icon for one of the config row puts all other config rows in edit mode. I think this seems to be a little inconsistent with other pages where config rows can go into edit mode individually?
   Screencast from 27-08-2024 18:41:31.webm

This is intended. Any fields with an override will go into edit mode once the user starts editing. I have no idea if or how we could improve this.

Both of those are implemented as intended. Maybe @piperdeck has an idea how to improve it?

[piperdeck]

1. On the network device form, seems like the config row cell content alignment is a little off. In non-edit mode, the configuration column cell value seems to be off vertical center.

This is a local override, hence the placement on the right. I agree this looks off, though. Maybe we can adopt a similar layout as in disk device section: with inherited and custom devices as headings.

I think Mason was talking about this alignment:

I think it would look better if we could give it this alignment:

2. When editing network main configurations, clicking the edit icon for one of the config row puts all other config rows in edit mode. I think this seems to be a little inconsistent with other pages where config rows can go into edit mode individually?
   Screencast from 27-08-2024 18:41:31.webm

This is intended. Any fields with an override will go into edit mode once the user starts editing. I have no idea if or how we could improve this.

Both of those are implemented as intended. Maybe @piperdeck has an idea how to improve it?

As for that point, I agree that this is implemented as intended, and personally I think it's working well

[mas-who]

On the devices form, for custom devices, the "Mount point", "Read limit" and "Write limit" configs are not editable. When I make a change for anything else on the devices form, then those fields for a custom device becomes editable. Is it possible to have the edit button next to those fields too?

[mas-who]

The alignment for the custom device "Pool / volume" field seems off

[mas-who]

This is a great change, the code also look cleaner than before on top of the UI improvements! Left some comments for feedback :)

[mas-who]

Code and QA LGTM, thanks for the updates 👍

[edlerd]

Addressed all the design requests @piperdeck please have another look at this.

[piperdeck]

Looks good to me!