feat: Undo/Redo

[rahulramesha]

Description

Undo/redo feature for Editor

Fixes #3915
Fixes #3916
Fixes #3918
Fixes #3919

Atomic Operations - Making DSL operations atomic(single DSL update on wire as well as on the app state)

• De-coupled a few widget operations from WidgetOperationSagas(which was becoming too big)
• Make widget resize operation atomic
• Make property updates from property pane atomic
• Add arch to allow multi widget / multi property updates from property control
• Make Tabs operations(Add/Remove/Tab name change) atomic.

Fixes #5058

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Manual Test, Jest Tests and Cypress Tests

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

Test coverage results 🧪

🔴 Total coverage has decreased

// Code coverage diff between base branch:release and head branch: undo_redo_poc 

Status	File	% Stmts	% Branch	% Funcs	% Lines
🔴	total	54.61 (-0.09)	36.39 (-0.09)	33.83 (-0.02)	55.2 (-0.04)
🔴	app/client/src/actions/controlActions.tsx	64.71 (-12.21)	0 (-100)	0 (-25)	50 (-16.67)
🟢	app/client/src/actions/pageActions.tsx	70.59 (1.2)	25 (0)	33.33 (4.76)	61.43 (2.34)
🔴	app/client/src/components/ads/ColorPickerComponent.tsx	35 (-2.84)	53.85 (-9.79)	0 (0)	36.84 (-3.16)
🟢	app/client/src/components/ads/DraggableList.tsx	44.26 (3.28)	33.33 (0)	21.43 (0)	51.02 (4.08)
🔴	app/client/src/components/ads/DraggableListComponent.tsx	43.75 (-18.32)	50 (-50)	37.5 (4.17)	46.15 (-23.42)
🔴	app/client/src/components/ads/Toast.tsx	77.55 (-1.17)	63.33 (0.83)	83.33 (-4.91)	77.55 (-1.17)
🔴	app/client/src/components/editorComponents/DropTargetComponent.tsx	88.73 (-1.01)	68.63 (0.71)	90 (-0.91)	88.41 (-1.06)
🔴	app/client/src/components/editorComponents/DropTargetUtils.ts	90 (-10)	66.67 (0)	100 (0)	88.89 (-11.11)
🔴	app/client/src/components/editorComponents/EditorContextProvider.tsx	92.86 (-0.47)	100 (0)	66.67 (0)	92.86 (-0.47)
🟢	app/client/src/components/editorComponents/ResizableComponent.tsx	57.94 (-0.24)	20.93 (0.48)	66.67 (0)	58.49 (0.55)
🔴	app/client/src/components/editorComponents/CodeEditor/index.tsx	67.41 (-0.5)	39.75 (-1.01)	52.5 (0)	68.15 (-0.55)
🟢	app/client/src/components/propertyControls/InputTextControl.tsx	78.95 (1.17)	28.57 (0)	66.67 (0)	77.78 (1.31)
🔴	app/client/src/components/propertyControls/KeyValueComponent.tsx	17.14 (-0.6)	29.63 (0)	0 (0)	18.75 (-0.22)
🔴	app/client/src/components/propertyControls/MenuItemsControl.tsx	22.83 (-4.8)	29.41 (-10.59)	7.69 (-1.4)	24.69 (-3.09)
🔴	app/client/src/components/propertyControls/PrimaryColumnsControl.tsx	20.35 (-1.98)	12.5 (-2.05)	7.14 (-0.86)	21.57 (-1.35)
🟢	app/client/src/components/propertyControls/SwitchControl.tsx	92.86 (0)	80 (13.33)	75 (0)	91.67 (0)
🔴	app/client/src/components/propertyControls/TabControl.tsx	40.4 (-0.3)	40 (-8)	22.22 (1.39)	42.7 (2.46)
🔴	app/client/src/constants/messages.ts	74.62 (-0.04)	100 (0)	24.31 (-0.12)	80.87 (-0.23)
🟢	app/client/src/pages/Editor/GlobalHotKeys.tsx	65.14 (0.99)	30.3 (0)	56.41 (2.36)	63.81 (1.06)
🟢	app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx	76.32 (0.71)	16.67 (0)	66.67 (0)	75.68 (0.68)
🔴	app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx	50.75 (-6.64)	32.95 (-7.33)	21.43 (-3.57)	51.59 (-7.29)
🟢	app/client/src/pages/Editor/PropertyPane/PropertySection.tsx	86.21 (0.5)	57.14 (0)	66.67 (0)	85.19 (0.57)
🟢	app/client/src/sagas/DraggingCanvasSagas.ts	84.29 (8.68)	39.29 (15.76)	100 (0)	84.62 (7.7)
🟢	app/client/src/sagas/EvaluationsSaga.ts	24.38 (3.67)	6.25 (4.69)	13.64 (3.64)	27.65 (3.84)
✨ 🆕	app/client/src/sagas/ReplaySaga.ts	31.11	4.17	33.33	35
🔴	app/client/src/sagas/SnipingModeSagas.ts	21.21 (-0.79)	3.33 (0)	40 (0)	22.11 (-0.81)
✨ 🆕	app/client/src/sagas/WidgetAdditionSagas.ts	69.34	60	62.5	70.25
✨ 🆕	app/client/src/sagas/WidgetDeletionSagas.ts	38.51	20.24	38.1	39.86
🔴	app/client/src/sagas/WidgetOperationSagas.tsx	42.35 (-9.98)	35.75 (-1.63)	39.58 (-12.37)	44.26 (-8.76)
🟢	app/client/src/sagas/index.tsx	92.59 (0.14)	60 (0)	100 (0)	94.23 (0.11)
🟢	app/client/src/utils/DSLMigrations.ts	76.61 (1.57)	66.8 (0.6)	69.77 (0)	76.26 (1.62)
🔴	app/client/src/utils/DynamicBindingUtils.ts	87.76 (-1.9)	77.22 (-6.32)	73.91 (-4.35)	86.05 (-2.14)
🟢	app/client/src/utils/WidgetPropsUtils.tsx	86.9 (0)	76 (2)	84.62 (0)	83.58 (0)
🔴	app/client/src/utils/helpers.tsx	64.71 (-0.44)	36.89 (-2.29)	45.45 (-1.43)	62.11 (-0.07)
✨ 🆕	app/client/src/utils/replayHelpers.tsx	45.65	23.08	14.29	45.95
🔴	app/client/src/utils/storage.ts	33.75 (-1.25)	16.67 (3.03)	9.09 (-3.73)	26.05 (-1.77)
🔴	app/client/src/utils/hooks/useBlocksToBeDraggedOnCanvas.ts	95.41 (-0.32)	84.38 (-1.33)	85.71 (-0.65)	95.24 (-0.26)
🔴	app/client/src/widgets/BaseWidget.tsx	73.98 (-0.61)	37.78 (-1.75)	68.75 (0)	72.88 (-0.62)
🔴	app/client/src/widgets/TabsWidget/index.ts	31.25 (-11.61)	0 (-100)	0 (0)	31.25 (-11.61)
🟢	app/client/src/widgets/TabsWidget/widget/index.tsx	77.17 (10.02)	48.53 (2.99)	78.95 (18.95)	77.01 (10.34)
✨ 🆕	app/client/src/workers/ReplayDSL.ts	91.8	76.47	87.5	91.38
✨ 🆕	app/client/src/workers/replayUtils.ts	91.3	75	100	95.12

[rahulramesha]

/ok-to-test sha=3a450c8

[YogeshJayaseelan]

@rahulramesha We have identified the below issues and still testing in-progress

1.Adding two widgets to canvas and renaming one of the widget and keeping the property pane open and press cmd+z to undo and cmd+shift+z to redo then close the property pane and press cmd+z - The widgets get selected and ready to be grouped

2. Choosing any of the options in checkbox group widget individually and clicking on cmd+z doesn't undo the last selection in the checkbox group widget. whereas if the user drags few widgets along with checkbox group widget to canvas and then grouping all the widget to an container and making selections in the checkbox group and clicking on cmd+d undo's the checkbox group selection

3.Chart widget - Open property pane and changed the title, chart type and make some changes in the option and clicking on cmd+d - Only the options value is reverted back to original value and the clicking on cmd+z again doesn't undo the values of chart type and title

4.File Picker - Changing the Max file size value and keeping the property pane open and clicking on file picker widget to upload file and when the file picker pop is in open state and clicking on cmd+z resets the max file values to default value

5.Tab Widget - Renaming the default tab to any incorrect tab name and collapsing the general section and pressing cmd+d only reverts the error message but the default tab value is not changed to original value

6. Modal Widget - Changing the modal type to from in the property pane and clicking on cmd+z for for first doesn't reset the modal to original mode

7.Suggestion - Can we implement this feature for API and Datasource

[rahulramesha]

@YogeshJayaseelan pushed a fix for the first issue,
for second issue, we don't have support for undo-redo for widget meta properties as it is meant for end users

[rahulramesha]

@YogeshJayaseelan
issue 3, Whenever Input field is in focus, undo-redo is handled by that particular input field itself, this is as expected.
issue 4, Undo-redo does not work on widget meta properties. I agree that the UX in this corner case is not great but we don't have a readily available solution for this.
issues 5 and 6 were fixed.

[YogeshJayaseelan]

@rahulramesha Verified the fixes and please find the status below,

Issues fixed:
1,5

Agreed on :
2 - Meta property is not included
3 - Undo/Redo will focus on input field change
4- Meta property is not included

Reopen:
6 - Still exists - Changing the modal type to form and using cmd+z for the first time the modal is not defaulted to alert modal

Suggestion:
7 - Can we implement this feature for API and Datasource

[rahulramesha]

@YogeshJayaseelan please test 6 again, with the latest resizable modal gone in, this wont be a problem anymore.

[YogeshJayaseelan]

@rahulramesha Verified the issue 6 and now there is no options to change modal type and problem is resolved. We can proceed further