From eedb11e08c02fd8543e4668a619b7a26e68ec748 Mon Sep 17 00:00:00 2001
From: Pavel Denisjuk <pavel@webiny.com>
Date: Mon, 22 Jul 2024 14:39:35 +0200
Subject: [PATCH] fix(react-properties): add config debugging utility

---
 .../src/createConfigurableComponent.tsx       |  4 ++-
 .../react-properties/src/useDebugConfig.ts    | 27 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-properties/src/useDebugConfig.ts

diff --git a/packages/react-properties/src/createConfigurableComponent.tsx b/packages/react-properties/src/createConfigurableComponent.tsx
index 5a353f979a4..8742e79941e 100644
--- a/packages/react-properties/src/createConfigurableComponent.tsx
+++ b/packages/react-properties/src/createConfigurableComponent.tsx
@@ -1,7 +1,8 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { Compose, Decorator, makeDecoratable } from "@webiny/react-composition";
-import { Property, Properties, toObject } from "~/index";
 import { GenericComponent } from "@webiny/react-composition/types";
+import { Property, Properties, toObject } from "~/index";
+import { useDebugConfig } from "./useDebugConfig";
 
 const createHOC =
     (newChildren: React.ReactNode): Decorator<GenericComponent<{ children?: React.ReactNode }>> =>
@@ -68,6 +69,7 @@ export function createConfigurableComponent<TConfig>(name: string) {
 
     const WithConfig = ({ onProperties, children }: WithConfigProps) => {
         const [properties, setProperties] = useState<Property[]>([]);
+        useDebugConfig(name, properties);
         const context = { properties };
 
         useEffect(() => {
diff --git a/packages/react-properties/src/useDebugConfig.ts b/packages/react-properties/src/useDebugConfig.ts
new file mode 100644
index 00000000000..679b918e4bd
--- /dev/null
+++ b/packages/react-properties/src/useDebugConfig.ts
@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { Property } from "./Properties";
+import { toObject } from "./utils";
+
+declare global {
+    interface Window {
+        __debugConfigs: Record<string, () => void>;
+    }
+}
+
+export function useDebugConfig(name: string, properties: Property[]) {
+    useEffect(() => {
+        if (process.env.NODE_ENV !== "development") {
+            return;
+        }
+
+        const configs = window.__debugConfigs ?? {};
+        configs[name] = () => console.log(toObject(properties));
+        window.__debugConfigs = configs;
+
+        return () => {
+            const configs = window.__debugConfigs ?? {};
+            delete configs[name];
+            window.__debugConfigs = configs;
+        };
+    }, [properties]);
+}