From 8a56f68b919c567a235472f133d64b13b4411bc5 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 26 Nov 2025 09:25:25 +0100
Subject: [PATCH] Removed react element from config as that makes template
 unserializable

fixes: #13
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../content/examples/BasicExample.tsx               |  4 +---
 packages/module/src/WidgetLayout/GridLayout.tsx     | 13 +++++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/module/patternfly-docs/content/examples/BasicExample.tsx b/packages/module/patternfly-docs/content/examples/BasicExample.tsx
index 7181069..dec63a1 100644
--- a/packages/module/patternfly-docs/content/examples/BasicExample.tsx
+++ b/packages/module/patternfly-docs/content/examples/BasicExample.tsx
@@ -135,9 +135,7 @@ export const BasicExample: React.FunctionComponent = () => {
       <WidgetLayout
         widgetMapping={widgetMapping}
         initialTemplate={template}
-        onTemplateChange={(newTemplate) => {
-          setTemplate(newTemplate);
-        }}
+        onTemplateChange={setTemplate}
         documentationLink="https://www.patternfly.org"
         initialDrawerOpen={true}
       />
diff --git a/packages/module/src/WidgetLayout/GridLayout.tsx b/packages/module/src/WidgetLayout/GridLayout.tsx
index 1d67b3f..23c6c8f 100644
--- a/packages/module/src/WidgetLayout/GridLayout.tsx
+++ b/packages/module/src/WidgetLayout/GridLayout.tsx
@@ -11,6 +11,7 @@ import {
   WidgetMapping,
   ExtendedTemplateConfig,
   AnalyticsTracker,
+  WidgetConfiguration,
 } from './types';
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateVariant, PageSection } from '@patternfly/react-core';
 import { ExternalLinkAltIcon, GripVerticalIcon, PlusCircleIcon } from '@patternfly/react-icons';
@@ -18,6 +19,14 @@ import { columns, breakpoints, droppingElemId, getWidgetIdentifier, extendLayout
 
 export const defaultBreakpoints = breakpoints;
 
+const createSerializableConfig = (config?: WidgetConfiguration) => {
+  if (!config) return undefined;
+  return {
+    ...(config.title && { title: config.title }),
+    ...(config.headerLink && { headerLink: config.headerLink })
+  };
+};
+
 // SVG resize handle as inline data URI
 const resizeHandleSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2IDEuMTQyODZMMTQuODU3MSAwTDAgMTQuODU3MVYxNkgxLjE0Mjg2TDE2IDEuMTQyODZaIiBmaWxsPSIjRDJEMkQyIi8+Cjwvc3ZnPgo=';
 
@@ -115,7 +124,7 @@ const GridLayout = ({
         i: droppingElemId,
         widgetType: currentDropInItem,
         title: 'New title',
-        config: widget.config,
+        config: createSerializableConfig(widget.config)
       };
     }
     return undefined;
@@ -161,7 +170,7 @@ const GridLayout = ({
           widgetType: data,
           i: getWidgetIdentifier(data),
           title: 'New title',
-          config: widget.config,
+          config: createSerializableConfig(widget.config)
         };
         return {
           ...acc,