fix: fix dashboard layout grid on item dynamic added

src/components/Dashboard/Dashboard.stories.tsx

@@ -216,6 +216,51 @@ function NarrowGridStory() {
     );
 }
 
+function DynamicAddItemsStory() {
+    const [layout, setLayout] = React.useState([{i: 'errors', x: 0, y: 0, w: 2, h: 3}]);
+    const [items, setItems] = React.useState(operationalItems);
+
+    const handleAddItem = () => {
+        setItems((currentItems) => {
+            const itemNumber = currentItems.length + 1;
+
+            return [
+                ...currentItems,
+                {
+                    id: `metric-${itemNumber}`,
+                    content: (
+                        <Flex direction="column" gap={1}>
+                            <Text variant="display-3">{itemNumber * 128}</Text>
+                            <Text color="secondary">Dynamically added metric #{itemNumber}</Text>
+                        </Flex>
+                    ),
+                },
+            ];
+        });
+    };
+
+    return (
+        <StoryFrame
+            title="Controlled layout"
+            description="Switch presets, then drag or resize a card: every change is saved back to the controlled layout."
+            actions={
+                <Button selected={layout === balancedLayout} onClick={handleAddItem}>
+                    Add item
+                </Button>
+            }
+        >
+            <Dashboard
+                items={items}
+                defaultLayout={layout}
+                onLayoutChange={(nextLayout) => {
+                    setLayout(nextLayout);
+                    action('onLayoutChange')(nextLayout);
+                }}
+            />
+        </StoryFrame>
+    );
+}
+
 const meta: Meta<typeof Dashboard> = {
     title: 'Components/Dashboard',
     component: Dashboard,
@@ -246,3 +291,5 @@ export const ControlledLayout: Story = {render: () => <ControlledLayoutStory />}
 
 /** Grid columns, row height, gaps and compaction can be adapted to the host container. */
 export const CustomGrid: Story = {render: () => <NarrowGridStory />};
+
+export const AddItems: Story = {render: () => <DynamicAddItemsStory />};

src/components/Dashboard/helpers/createDefaultLayout.ts

@@ -6,6 +6,7 @@ const DEFAULT_ITEM_HEIGHT = 4;
 export const createDefaultLayout = (
     items: DashboardRenderItem[],
     columns: number,
+    defaultLayout?: ConfigLayout[],
 ): ConfigLayout[] => {
     const itemCount = items.length;
 
@@ -14,30 +15,17 @@ export const createDefaultLayout = (
 
     const itemsPerRow = Math.max(Math.floor(columns / width), 1);
 
-    return Array.from({length: itemCount}, (_, index) => ({
-        i: items[index].id,
-        x: (index % itemsPerRow) * width,
-        y: Math.floor(index / itemsPerRow) * height,
-        w: width,
-        h: height,
-    }));
-};
-
-export const createDefaultLayoutForItem = (
-    item: DashboardRenderItem,
-    columns: number,
-    index: number,
-) => {
-    const width = Math.min(Math.ceil(columns / 2), columns);
-    const height = DEFAULT_ITEM_HEIGHT;
-
-    const itemsPerRow = Math.max(Math.floor(columns / width), 1);
-
-    return {
-        i: item.id,
-        x: (index % itemsPerRow) * width,
-        y: Math.floor(index / itemsPerRow) * height,
-        w: width,
-        h: DEFAULT_ITEM_HEIGHT,
-    };
+    return Array.from({length: itemCount}, (_, index) => {
+        if (defaultLayout?.[index]) {
+            return defaultLayout?.[index];
+        }
+
+        return {
+            i: items[index].id,
+            x: (index % itemsPerRow) * width,
+            y: Math.floor(index / itemsPerRow) * height,
+            w: width,
+            h: height,
+        };
+    });
 };

src/components/Dashboard/hooks/useDashboardConfig.ts

@@ -38,7 +38,7 @@ export const useDashboardConfig = (
     const cols = gridProps.cols;
 
     const layout = useMemo(
-        () => defaultLayout ?? createDefaultLayout(items, cols),
+        () => createDefaultLayout(items, cols, defaultLayout),
         [defaultLayout, items, cols],
     );