Undo/Redo action

[oliviertassinari]

The very first frustration I had using the tool today is not being able to undo a change. I have tried a change that didn't work, now, I'm not sure how to get back to the previous state that was better. It doesn't incentive me to experiment.

To do:

• [x] basic undo/redo based on a undo history stack of the dom state https://github.com/mui/mui-toolpad/pull/1225
• [x] Keyboard shortcut: Undo Ctrl+Z and Redo Ctrl+Shift+Z #1274
• [x] undo/redo button needs to be disabled when the stack is empty
• [x] If undoing/redoing change that is in a different view - don't do the undo, focus that view instead (i.e. we made changes in connection view, went to canvas editor and did undo - we should end up in connection view). For extra context, read the discussion in https://github.com/mui/mui-toolpad/pull/1225#discussion_r1007856833
• [x] make atomic changes instead of using a throttle to combine changes, currently known issues:
  • [x] Combine multiple changes when typeing an input of a string property value. What's the best way?
  • [x] Make insertion of elements atomic https://github.com/mui/mui-toolpad/pull/1374
  • [ ] ...?
• [ ] Display a history of changes
• [x] Make dom selection part of undo/redo

How do other tools push to history when typing text?

	debounce	throttle	word delimiters
google docs	✅	✅
notion	✅		✅
vscode			✅
figma	✅

[prakhargupta1]

To get some idea on how Undo and Redo should work in different scenarios: https://github.com/appsmithorg/appsmith/issues/1426#issuecomment-810842190

[apedroferreira]

First prerequisite for undo/redo: https://github.com/mui/mui-toolpad/issues/845

[bytasv]

As a follow up to https://github.com/mui/mui-toolpad/pull/1225 we should make following UX improvement:

• [ ] If undoing/redoing change that is in a different view - focus that view (i.e. we made changes in connection view, went to canvas editor and did undo - we should end up in connection view)

High level pseudo-code proposal:

function getViewForDom(dom: AppDom): ToolpadView
function isSameView(view1: ToolpadView, view2: ToolpadView): boolean
function navigateToView(ToolpadView): void

[apedroferreira]

High level pseudo-code proposal:

Maybe focusOnView instead of navigateToView? Other than that sounds good if we need this type of solution.

[Janpot]

This was just some pseudo-code to illustrate an idea, I didn't intend for this to be used as a starting point or anything.

[oliviertassinari]

• [x] The undo / redo has a bug, it might be an important one https://master--toolpad.mui.com/_toolpad/app/cl9my2gkr0001q89lt82h56ey

https://user-images.githubusercontent.com/3165635/201174983-5b2f95b7-0a90-4d9e-a1af-2afeef9a8855.mov

When I press Cmd+Z key, it undo 2 actions, not one. In the same way, when I press the shortcut to redo my change after the undo, it doesn't work. It seems that undo/redo is strongly tight to what is committed on the backend. I think that it would be great to decorrelate the two notions. Fixed in #1328

• [ ] I don't think that the undo/redo button will ever be used more than 5% of the time, I think that it could be hidden from the interface, into a submenu like notion has:

Or Figma, even better:

---

[bytasv]

The undo / redo has a bug

@oliviertassinari thanks, that's a great catch. I already found the cause - it happens because throttled undo stack update is triggered after we undo action which messes up the state. I have one working solution to the issue that makes situation way better, but not perfect yet, I should post an update soon

I don't think that the undo/redo button will ever be used more than 5% of the time, I think that it could be hidden from the interface, into a submenu like notion has

I do agree, I could just remove the buttons. @gerdadesign any issues from your end if we remove the buttons? Maybe you could share what was the motivation of having them designed in the UI? Maybe we are missing some important details?

[oliviertassinari]

• [ ] I could find a strange behavior: when doing an undo or a redo, the sync state doesn't show correctly: It keeps saying "All changes saved". I don't know when my change is actually saved. So I don't know if I can leave the page or not.

  

[gerdadesign]

I do agree, I could just remove the buttons. @gerdadesign any issues from your end if we remove the buttons? Maybe you could share what was the motivation of having them designed in the UI? Maybe we are missing some important details?

This seems fine. For context:

• Tooljet shows undo and redo buttons in the UI
• The more common pattern across Retool, Appsmith, and Openblocks seems to be not showing undo / redo buttons, but listing the keyboard shortcuts (and have a keyboard shortcut of ? to access the keyboard shorts list). They also show feedback for the action in the form of a small temporary banner.
• I could not find the info for Superblocks

So, especially for a tech-fluent audience, I think that keyboard shortcut would suffice. This would probably require adding Keyboard shortcuts to the Help menu:

and then from there, showing the list of available keyboard shortcuts

[bytasv]

I'm removing undo/redo buttons as part of https://github.com/mui/mui-toolpad/pull/1308 👍

[Janpot]

This has been implemented