Open alexandraM98 opened 3 months ago
You're absolutely right, it's counterintuitive. Another approach would be to eagerly emit the change since we already ask you if you're sure you want to do it. So I think we should pick one: either don't ask and have a "pending you hitting save" button or we do it eagerly. I think I prefer the former as you might think "bah, I accidentally deleted the wrong secret" and you still have a chance to back out of the change.
What do you think?
A suggestion for the best UX for the pending mode
.
Personally, I would prefer to have a way of backing out of deleting secrets too. I agree with using the former approach that you mentioned @paullewis. I could start looking into implementing this feature following a similar approach to what I presented in the screenshots above if that's okay. But, additionally, it might also be useful to have some "undo" icon next to each entry pending deletion so that people can add/remove entries from that list without having to hit Cancel and then reopen the Settings modal.
I also agree with the UX suggestion from @Mearman. I think disabling the Save button until there's an actual change to "commit" is a good idea.
Just wanted to share an update on this ticket.
Firstly, here is a short demo of what the UI looks like currently: https://github.com/user-attachments/assets/2ebfb641-79cd-45f8-aa1c-72a96bbce02b
Secondly, I made a list of the main things I've done to achieve the above:
I had a look at the Settings
type. See: https://github.com/breadboard-ai/breadboard/blob/a77417aea60472b777d3829ee2685da63ddd607e/packages/visual-editor/src/ui/types/types.ts#L95-L111
Considering that I wanted to see a list of items pending deletion under the existing items
, I thought it would make sense to add another prop called pendingItems
that would behave in the same way as items
:
pendingItems?: Map<SettingEntry["value"]["name"], SettingEntry["value"]>;
Next, I modified the existing deleteItem
function by doing the following:
addPendingItem
Save
).Added a new function called restoreDeletedItem
which is called when clicking the Undo button on the UI next to any pending item. This function does pretty much the same as the previous one (addPendingItem
), but the other way around. When the undo button is pressed, the item is removed from the pending list and added back into the items list. There is still something that needs to be done at this stage, which is clearing the pendingItems after pressing Save
or Cancel
. At the moment, even though the Map of pendingItems itself is empty, it still shows on the UI until I reload the page.
The branch I created for this ticket can be found here.
Also, off-topic, all items in any section of the settings overlay seemed to gain an unusual height after editing any property. It's been fixed in this ticket in the highlighted lines here.
In the visual editor, in the Settings modal under the Secrets section, there is something I noticed with the behaviour when deleting an entry which I found a bit counterintuitive.
For example, if I have an existing entry and I click the "trash" icon to delete it, I get asked to confirm the action and then the list is empty with the message "There are currently no entries". This seemed to indicate that the entries were indeed removed. However, it looks like the changes won't apply unless I also click Save before closing the modal, because when I reloaded the page and went back to settings the entry I had "deleted" was still there.
An idea could be to temporarily add deleted entries to a list to indicate that they are "pending deletion" and then when the users click on "Save" at the bottom, they could then get a message from the browser asking if they are sure they want to delete the entries on the "pending" list.
Below is a screenshot of a quick mockup to help with visualising the suggestion above: