feat(data-modeling): show previous edits when opening the diagram COMPASS-9544 (#7106)

* allow previous edits

* add test

Author: mabaasit

packages/compass-data-modeling/src/store/diagram.ts

@@ -94,11 +94,14 @@ export const diagramReducer: Reducer<DiagramState> = (
   action
 ) => {
   if (isAction(action, DiagramActionTypes.OPEN_DIAGRAM)) {
+    const current = action.diagram.edits;
+    const prev = current.map((_item, index, arr) => arr.slice(0, index + 1));
+    prev.shift(); // Remove the first item, which is initial SetModel and there's no previous edit for it.
     return {
       ...action.diagram,
       edits: {
-        prev: [],
-        current: action.diagram.edits,
+        prev,
+        current,
         next: [],
       },
     };

packages/compass-e2e-tests/tests/data-modeling-tab.test.ts

@@ -213,6 +213,54 @@ describe('Data Modeling tab', function () {
       .waitForDisplayed({ reverse: true });
   });
 
+  it('allows undo after opening a diagram', async function () {
+    const dataModelName = 'Test Data Model - Undo After Open';
+    await setupDiagram(browser, {
+      diagramName: dataModelName,
+      connectionName: DEFAULT_CONNECTION_NAME_1,
+      databaseName: 'test',
+    });
+
+    const dataModelEditor = browser.$(Selectors.DataModelEditor);
+    await dataModelEditor.waitForDisplayed();
+
+    const testCollection1 = browser.$(
+      Selectors.DataModelPreviewCollection('test.testCollection-one')
+    );
+    const startPosition = await testCollection1.getLocation();
+    const nodeSize = await testCollection1.getSize();
+
+    await browser
+      .action('pointer')
+      .move({
+        x: Math.round(startPosition.x + nodeSize.width / 2),
+        y: Math.round(startPosition.y + nodeSize.height / 2),
+      })
+      .down({ button: 0 }) // Left mouse button
+      .move({ x: 100, y: 0, duration: 1000, origin: 'pointer' })
+      .pause(1000)
+      .move({ x: 100, y: 0, duration: 1000, origin: 'pointer' })
+      .up({ button: 0 }) // Release the left mouse button
+      .perform();
+    await browser.waitForAnimations(dataModelEditor);
+
+    // Open the saved diagram in new tab
+    await browser.openNewTab();
+    await browser.clickVisible(Selectors.DataModelsListItem(dataModelName));
+    await browser.$(Selectors.DataModelEditor).waitForDisplayed();
+
+    // Ensure that undo button is enabled
+    await browser.waitForAriaDisabled(Selectors.DataModelUndoButton, false);
+
+    // Undo the change
+    await browser.clickVisible(Selectors.DataModelUndoButton);
+    await browser.waitForAnimations(dataModelEditor);
+
+    // Ensure that undo button is now disabled and redo is enabled
+    await browser.waitForAriaDisabled(Selectors.DataModelUndoButton, true);
+    await browser.waitForAriaDisabled(Selectors.DataModelRedoButton, false);
+  });
+
   it('exports the data model to JSON', async function () {
     const dataModelName = 'Test Export Model - JSON';
     exportFileName = `${dataModelName}.json`;