fix: Layout shifts when opening and closing panels from a fresh state (…

…#2241)

Fixes #1268

This mostly occurs when you have a relatively fresh state. There's a
video in the ticket, but if you have just 2 rows then this is frequently
triggered. Using incognito mode should give you a fresh state which is
affected by this bug.

This fixes both the vertical shift when you open a new panel type (open
a notebook from a fresh state or open a table from a fresh layout state)
and when you close the last panel in a stack (like in the ticket)

packages/dashboard/src/layout/LayoutUtils.test.ts

@@ -24,11 +24,20 @@ function makeContentItem(type = 'root'): Partial<ContentItem> {
         contentItems.splice(index, 1);
       }
     }),
+    replaceChild: jest.fn((oldChild, newChild) => {
+      const index = contentItems.indexOf(oldChild);
+      if (index >= 0) {
+        contentItems[index] = newChild;
+      }
+    }),
     isComponent: type === 'component',
     isColumn: type === 'column',
     isRow: type === 'row',
     isRoot: type === 'root',
     type,
+    layoutManager: {
+      createContentItem: ({ type: newType }) => makeContentItem(newType),
+    },
   };
 }
 

packages/dashboard/src/layout/LayoutUtils.ts

@@ -143,12 +143,18 @@ class LayoutUtils {
     const isCorrectType = !columnPreferred
       ? newParent.isColumn
       : newParent.isRow;
+
+    // This is usually triggered because we hit a stack within the last row/column
     if (!isCorrectType) {
-      const inverseRowOrColConfig: ItemConfig = {
-        type: !columnPreferred ? 'column' : 'row',
-      };
-      parent.addChild(inverseRowOrColConfig);
-      parent.removeChild(newParent, true);
+      const inverseRowOrColConfig = parent.layoutManager.createContentItem(
+        {
+          type: !columnPreferred ? 'column' : 'row',
+          height: newParent.config?.height,
+          width: newParent.config?.width,
+        },
+        parent
+      );
+      parent.replaceChild(newParent, inverseRowOrColConfig);
       parent.contentItems[parent.contentItems.length - 1].addChild(newParent);
       newParent = parent.contentItems[parent.contentItems.length - 1];
     }

packages/golden-layout/src/items/RowOrColumn.ts

@@ -179,13 +179,18 @@ export default class RowOrColumn extends AbstractContentItem {
   /**
    * Replaces a child of this Row or Column with another contentItem
    *
-   * @param oldChild
-   * @param newChild
+   * @param oldChild The old child to replace
+   * @param newChild The new child to take the old child's place
+   * @param destroyOldChild If the old child should be destroyed or not
    */
-  replaceChild(oldChild: AbstractContentItem, newChild: AbstractContentItem) {
+  replaceChild(
+    oldChild: AbstractContentItem,
+    newChild: AbstractContentItem,
+    destroyOldChild = false
+  ) {
     var size = oldChild.config[this._dimension];
-    super.replaceChild(oldChild, newChild);
     newChild.config[this._dimension] = size;
+    super.replaceChild(oldChild, newChild, destroyOldChild);
     this.callDownwards('setSize');
     this.emitBubblingEvent('stateChanged');
   }