fix: Shopping list labels reordering dialog

[p0lycarpio]

What type of PR is this?

(REQUIRED)

• bug

What this PR does / why we need it:

(REQUIRED)

This PR fixes the modal allowing you to reorganize the labels of a shopping list. As mentioned in #3426, a "Save" button has been added to call the API with the new labels order. The cancel button closes the modal and reactivates the API polling.

Which issue(s) this PR fixes:

(REQUIRED)

Fixes #3426

Special notes for your reviewer:

If we change the order of the labels and cancel, the local state is still modified (this can be seen if we re-edit the order quickly). The next API poll (every 5 seconds) returns the original order. It was chosen not to call refresh() when canceling or saving to limit requests.

Testing

Manually tested on the frontend

[michael-genson]

Generally looks good! GH Actions threw two lint warnings which I commented on. Otherwise, the only issue I have is regarding the cancel behavior you mentioned - I would expect cancel to instantly revert my changes in the dialog (what if I make some changes, change my mind, then want to reset?).

What if instead of modifying the list in-place, we make a copy of the list which is displayed in the dialog, overwrite it when we open the dialog (so it resets), then save the "copied" list to the database on save? Check out the "Edit List Item" flow in the ShoppingListItem component, this is more-or-less what we do to achieve the same kind of thing.

[p0lycarpio]

Thanks for your feedback! Indeed, it looks better this way. What do you think now?

[michael-genson]

Yeah I like this much better, just one tiny thing and then I think this is good to go. I appreciate the work!