From d7bd51e1bba4fa3a84b7d0a37dd4b4166b9c80db Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Aug 2022 12:23:21 +0200
Subject: [PATCH] Remove dom duplication (#825)

---
 packages/toolpad-app/src/appDom.ts            | 27 -------------------
 .../toolpad-app/src/components/JsonView.tsx   |  1 +
 packages/toolpad-app/src/server/data.ts       |  2 +-
 .../src/toolpad/AppEditor/PagePanel.tsx       |  2 +-
 4 files changed, 3 insertions(+), 29 deletions(-)

diff --git a/packages/toolpad-app/src/appDom.ts b/packages/toolpad-app/src/appDom.ts
index 2da48513641..f2ccf9c928b 100644
--- a/packages/toolpad-app/src/appDom.ts
+++ b/packages/toolpad-app/src/appDom.ts
@@ -872,30 +872,3 @@ export function fromLegacyQueryNode(node: QueryNode<any>): QueryNode<any> {
 
   return node;
 }
-
-/**
- * Poor man's duplicate function
- * In anticipation of https://github.com/mui/mui-toolpad/pull/658
- */
-export function duplicate(dom: AppDom): AppDom {
-  const newIndices = new Map(Object.keys(dom.nodes).map((id) => [id, cuid()]));
-  return {
-    root: newIndices.get(dom.root) as NodeId,
-    nodes: Object.fromEntries(
-      Object.entries(dom.nodes).map(([oldId, node]) => {
-        const newId = newIndices.get(oldId) as NodeId;
-        const newNode = {
-          ...node,
-          parentId: node.parentId ? (newIndices.get(node.parentId) as NodeId) : null,
-          id: newId,
-        } as AppDomNode;
-        if (isQuery(newNode) && newNode.attributes.connectionId.value) {
-          newNode.attributes.connectionId.value = ref(
-            newIndices.get(deref(newNode.attributes.connectionId.value)) as NodeId,
-          );
-        }
-        return [newId, newNode];
-      }),
-    ),
-  };
-}
diff --git a/packages/toolpad-app/src/components/JsonView.tsx b/packages/toolpad-app/src/components/JsonView.tsx
index 2b6540eb688..d7671c304d3 100644
--- a/packages/toolpad-app/src/components/JsonView.tsx
+++ b/packages/toolpad-app/src/components/JsonView.tsx
@@ -29,6 +29,7 @@ const JsonViewRoot = styled('div')(({ theme }) => ({
   position: 'relative',
   display: 'flex',
   minHeight: 0,
+  minWidth: 0,
 
   [`&.${classes.disabled}`]: {
     opacity: 0.5,
diff --git a/packages/toolpad-app/src/server/data.ts b/packages/toolpad-app/src/server/data.ts
index 31e471b5d74..5c86d13fd47 100644
--- a/packages/toolpad-app/src/server/data.ts
+++ b/packages/toolpad-app/src/server/data.ts
@@ -204,7 +204,7 @@ export async function createApp(name: string, opts: CreateAppOptions = {}): Prom
       data: { name },
     });
 
-    const dom = opts.dom ? appDom.duplicate(opts.dom) : createDefaultDom();
+    const dom = opts.dom || createDefaultDom();
 
     await saveDom(app.id, dom);
 
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx
index 67b773db255..c077d73566e 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx
@@ -62,7 +62,7 @@ function AppMenu() {
         maxWidth="sm"
       >
         <DialogTitle id={dialogTitleId}>Application DOM</DialogTitle>
-        <DialogContent sx={{ position: 'relative', display: 'flex' }}>
+        <DialogContent sx={{ position: 'relative', display: 'flex', alignItems: 'stretch' }}>
           <JsonView sx={{ flex: 1 }} copyToClipboard src={dom} expandPaths={[]} expandLevel={5} />
         </DialogContent>
         <DialogActions>