Create a JSON tree visualizer (#10579)

Inspired by
https://github.com/reduxjs/redux-devtools/tree/main/packages/react-json-tree

- Created a reusable JSON tree visualizer
- For now, the visualizer is only meant to render raw JSON. It can't
determine if a string is a UUID and display a specific icon.

**The visualizer is not rendered in the app. You must use Storybook to
review it.**

## Demo



https://github.com/user-attachments/assets/ffd4fc94-b33d-4481-9ac1-fa3a348b7c81

packages/twenty-front/src/locales/af-ZA.po

@@ -570,6 +570,10 @@ msgstr "Maak toe"
 msgid "Close command menu"
 msgstr "Sluit opdragkieslys"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Kleurkode"
@@ -1265,6 +1269,10 @@ msgstr "Bestaande voorwerpe"
 msgid "Exit Settings"
 msgstr "Verlaat Instellings"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/ar-SA.po

@@ -570,6 +570,10 @@ msgstr "إغلاق"
 msgid "Close command menu"
 msgstr "إغلاق قائمة الأوامر"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "رمز اللون"
@@ -1265,6 +1269,10 @@ msgstr "الكائنات الحالية"
 msgid "Exit Settings"
 msgstr "خروج من الإعدادات"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/ca-ES.po

@@ -570,6 +570,10 @@ msgstr "Tanca"
 msgid "Close command menu"
 msgstr "Tanca el menú de comandament"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Codi de colors"
@@ -1265,6 +1269,10 @@ msgstr "Objectes existents"
 msgid "Exit Settings"
 msgstr "Sortir de la configuració"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/cs-CZ.po

@@ -570,6 +570,10 @@ msgstr "Zavřít"
 msgid "Close command menu"
 msgstr "Zavřít příkazové menu"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Barevný kód"
@@ -1265,6 +1269,10 @@ msgstr "Stávající objekty"
 msgid "Exit Settings"
 msgstr "Opustit nastavení"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/da-DK.po

@@ -570,6 +570,10 @@ msgstr "Luk"
 msgid "Close command menu"
 msgstr "Luk kommandomenu"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Farvekode"
@@ -1265,6 +1269,10 @@ msgstr "Eksisterende objekter"
 msgid "Exit Settings"
 msgstr "Forlad indstillinger"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/de-DE.po

@@ -570,6 +570,10 @@ msgstr "Schließen"
 msgid "Close command menu"
 msgstr "Befehlsmenü schließen"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Farbcode"
@@ -1265,6 +1269,10 @@ msgstr "Vorhandene Objekte"
 msgid "Exit Settings"
 msgstr "Einstellungen verlassen"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/el-GR.po

@@ -570,6 +570,10 @@ msgstr "Κλείσιμο"
 msgid "Close command menu"
 msgstr "Κλείσιμο μενού εντολών"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Κωδικός χρώματος"
@@ -1265,6 +1269,10 @@ msgstr "Υπάρχοντα αντικείμενα"
 msgid "Exit Settings"
 msgstr "Έξοδος από Ρυθμίσεις"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/en.po

@@ -565,6 +565,10 @@ msgstr "Close"
 msgid "Close command menu"
 msgstr "Close command menu"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr "Collapse"
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Color code"
@@ -1260,6 +1264,10 @@ msgstr "Existing objects"
 msgid "Exit Settings"
 msgstr "Exit Settings"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr "Expand"
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/es-ES.po

@@ -570,6 +570,10 @@ msgstr "Cerrar"
 msgid "Close command menu"
 msgstr "Cerrar menú de comandos"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Código de color"
@@ -1265,6 +1269,10 @@ msgstr "Objetos existentes"
 msgid "Exit Settings"
 msgstr "Salir de Configuración"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/fi-FI.po

@@ -570,6 +570,10 @@ msgstr "Sulje"
 msgid "Close command menu"
 msgstr "Sulje komento-valikko"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Värikoodi"
@@ -1265,6 +1269,10 @@ msgstr "Olemassa olevat objektit"
 msgid "Exit Settings"
 msgstr "Poistu asetuksista"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/fr-FR.po

@@ -570,6 +570,10 @@ msgstr "Fermer"
 msgid "Close command menu"
 msgstr "Fermer le menu de commande"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Code couleur"
@@ -1265,6 +1269,10 @@ msgstr "Objets existants"
 msgid "Exit Settings"
 msgstr "Quitter les paramètres"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/he-IL.po

@@ -570,6 +570,10 @@ msgstr "סגור"
 msgid "Close command menu"
 msgstr "סגור תפריט פקודות"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "קוד צבע"
@@ -1265,6 +1269,10 @@ msgstr "אובייקטים קיימים"
 msgid "Exit Settings"
 msgstr "יציאה מהגדרות"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/hu-HU.po

@@ -570,6 +570,10 @@ msgstr "Bezár"
 msgid "Close command menu"
 msgstr "Parancsmenü bezárása"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Színekód"
@@ -1265,6 +1269,10 @@ msgstr "Meglévő objektumok"
 msgid "Exit Settings"
 msgstr "Kilépés a beállításokból"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/it-IT.po

@@ -570,6 +570,10 @@ msgstr "Chiudi"
 msgid "Close command menu"
 msgstr "Chiudi il menu comandi"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Codice colore"
@@ -1265,6 +1269,10 @@ msgstr "Oggetti esistenti"
 msgid "Exit Settings"
 msgstr "Esci dalle impostazioni"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/ja-JP.po

@@ -570,6 +570,10 @@ msgstr "閉じる"
 msgid "Close command menu"
 msgstr "コマンドメニューを閉じる"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "色のコード"
@@ -1265,6 +1269,10 @@ msgstr "既存のオブジェクト"
 msgid "Exit Settings"
 msgstr "設定を終了"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/ko-KR.po

@@ -570,6 +570,10 @@ msgstr "닫기"
 msgid "Close command menu"
 msgstr "명령 메뉴 닫기"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "색상 코드"
@@ -1265,6 +1269,10 @@ msgstr "기존 개체"
 msgid "Exit Settings"
 msgstr "설정 종료"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/nl-NL.po

@@ -570,6 +570,10 @@ msgstr "Sluiten"
 msgid "Close command menu"
 msgstr "Sluit opdrachtmenu"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Kleurcode"
@@ -1265,6 +1269,10 @@ msgstr "Bestaande objecten"
 msgid "Exit Settings"
 msgstr "Verlaat instellingen"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/no-NO.po

@@ -570,6 +570,10 @@ msgstr "Lukk"
 msgid "Close command menu"
 msgstr "Lukk kommandomeny"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Fargekode"
@@ -1265,6 +1269,10 @@ msgstr "Eksisterende objekter"
 msgid "Exit Settings"
 msgstr "Avslutt innstillinger"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/pl-PL.po

@@ -570,6 +570,10 @@ msgstr "Zamknij"
 msgid "Close command menu"
 msgstr "Zamknij menu poleceń"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Kod koloru"
@@ -1265,6 +1269,10 @@ msgstr "Istniejące obiekty"
 msgid "Exit Settings"
 msgstr "Wyjdź z ustawień"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/pseudo-en.po

@@ -565,6 +565,10 @@ msgstr ""
 msgid "Close command menu"
 msgstr ""
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr ""
@@ -1260,6 +1264,10 @@ msgstr ""
 msgid "Exit Settings"
 msgstr ""
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr ""

packages/twenty-front/src/locales/pt-BR.po

@@ -570,6 +570,10 @@ msgstr "Fechar"
 msgid "Close command menu"
 msgstr "Fechar menu de comandos"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Código de cor"
@@ -1265,6 +1269,10 @@ msgstr "Objetos existentes"
 msgid "Exit Settings"
 msgstr "Sair das Configurações"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/pt-PT.po

@@ -570,6 +570,10 @@ msgstr "Fechar"
 msgid "Close command menu"
 msgstr "Fechar menu de comandos"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Código de cor"
@@ -1265,6 +1269,10 @@ msgstr "Objetos existentes"
 msgid "Exit Settings"
 msgstr "Sair das Definições"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/ro-RO.po

@@ -570,6 +570,10 @@ msgstr "Închide"
 msgid "Close command menu"
 msgstr "Închide meniul de comandă"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Cod culoare"
@@ -1265,6 +1269,10 @@ msgstr "Obiecte existente"
 msgid "Exit Settings"
 msgstr "Ieșire din Setări"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/sr-Cyrl.po

@@ -570,6 +570,10 @@ msgstr "Затвори"
 msgid "Close command menu"
 msgstr "Затвори мени команди"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Шифра боје"
@@ -1265,6 +1269,10 @@ msgstr "Постојећи објекти"
 msgid "Exit Settings"
 msgstr "Изађи из подешавања"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/sv-SE.po

@@ -570,6 +570,10 @@ msgstr "Stäng"
 msgid "Close command menu"
 msgstr "Stäng kommandomenyn"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Färgkod"
@@ -1265,6 +1269,10 @@ msgstr "Befintliga objekt"
 msgid "Exit Settings"
 msgstr "Avsluta inställningar"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/tr-TR.po

@@ -570,6 +570,10 @@ msgstr "Kapat"
 msgid "Close command menu"
 msgstr "Komut menüsünü kapat"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Renk kodu"
@@ -1265,6 +1269,10 @@ msgstr "Mevcut nesneler"
 msgid "Exit Settings"
 msgstr "Ayarları Kapat"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/uk-UA.po

@@ -570,6 +570,10 @@ msgstr "Закрити"
 msgid "Close command menu"
 msgstr "Закрити командне меню"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Код кольору"
@@ -1321,6 +1325,10 @@ msgstr "Існуючі об'єкти"
 msgid "Exit Settings"
 msgstr "Вийти з налаштувань"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/vi-VN.po

@@ -570,6 +570,10 @@ msgstr "Đóng"
 msgid "Close command menu"
 msgstr "Đóng menu lệnh"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "Mã màu"
@@ -1265,6 +1269,10 @@ msgstr "\"Đối tượng hiện hữu\""
 msgid "Exit Settings"
 msgstr "\"Thoát Cài đặt\""
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/zh-CN.po

@@ -570,6 +570,10 @@ msgstr "关闭"
 msgid "Close command menu"
 msgstr "关闭命令菜单"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "颜色代码"
@@ -1265,6 +1269,10 @@ msgstr "现有对象"
 msgid "Exit Settings"
 msgstr "退出设置"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/locales/zh-TW.po

@@ -570,6 +570,10 @@ msgstr "關閉"
 msgid "Close command menu"
 msgstr "關閉指令選單"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Collapse"
+msgstr ""
+
 #: src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
 msgid "Color code"
 msgstr "顏色代碼"
@@ -1265,6 +1269,10 @@ msgstr "現有對象"
 msgid "Exit Settings"
 msgstr "退出設置"
 
+#: src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+msgid "Expand"
+msgstr ""
+
 #: src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
 #~ msgid "Expected selected node to be a create step node."
 #~ msgstr "Expected selected node to be a create step node."

packages/twenty-front/src/modules/workflow/components/json-visualizer/__stories__/JsonTree.stories.tsx

@@ -0,0 +1,189 @@
+import { JsonTree } from '@/workflow/components/json-visualizer/components/JsonTree';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  expect,
+  userEvent,
+  waitForElementToBeRemoved,
+  within,
+} from '@storybook/test';
+import { ComponentDecorator } from 'twenty-ui';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+
+const meta: Meta<typeof JsonTree> = {
+  title: 'Modules/Workflow/JsonVisualizer/JsonTree',
+  component: JsonTree,
+  args: {},
+  argTypes: {},
+  decorators: [ComponentDecorator, I18nFrontDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof JsonTree>;
+
+export const String: Story = {
+  args: {
+    value: 'Hello',
+  },
+};
+
+export const Number: Story = {
+  args: {
+    value: 42,
+  },
+};
+
+export const Boolean: Story = {
+  args: {
+    value: true,
+  },
+};
+
+export const Null: Story = {
+  args: {
+    value: null,
+  },
+};
+
+export const ArraySimple: Story = {
+  args: {
+    value: [1, 2, 3],
+  },
+};
+
+export const ArrayNested: Story = {
+  args: {
+    value: [1, 2, ['a', 'b', 'c'], 3],
+  },
+};
+
+export const ArrayWithObjects: Story = {
+  args: {
+    value: [
+      {
+        name: 'John Doe',
+        age: 30,
+      },
+      {
+        name: 'John Dowl',
+        age: 42,
+      },
+    ],
+  },
+};
+
+export const ObjectSimple: Story = {
+  args: {
+    value: {
+      name: 'John Doe',
+      age: 30,
+    },
+  },
+};
+
+export const ObjectNested: Story = {
+  args: {
+    value: {
+      person: {
+        name: 'John Doe',
+        address: {
+          street: '123 Main St',
+          city: 'New York',
+        },
+      },
+      isActive: true,
+    },
+  },
+};
+
+export const ObjectWithArray: Story = {
+  args: {
+    value: {
+      users: [
+        { id: 1, name: 'John' },
+        { id: 2, name: 'Jane' },
+      ],
+      settings: {
+        theme: 'dark',
+        notifications: true,
+      },
+    },
+  },
+};
+
+export const NestedElementCanBeCollapsed: Story = {
+  args: {
+    value: {
+      person: {
+        name: 'John Doe',
+        age: 12,
+      },
+      isActive: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const toggleButton = await canvas.findByRole('button', {
+      name: 'Collapse',
+    });
+
+    const ageElement = canvas.getByText('age');
+
+    await Promise.all([
+      waitForElementToBeRemoved(ageElement),
+
+      userEvent.click(toggleButton),
+    ]);
+
+    expect(toggleButton).toHaveTextContent('Expand');
+  },
+};
+
+export const ExpandingElementExpandsAllItsDescendants: Story = {
+  args: {
+    value: {
+      person: {
+        name: 'John Doe',
+        address: {
+          street: '123 Main St',
+          city: 'New York',
+          country: {
+            name: 'USA',
+            code: 'US',
+          },
+        },
+      },
+      isActive: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    {
+      const allCollapseButtons = await canvas.findAllByRole('button', {
+        name: 'Collapse',
+      });
+
+      expect(allCollapseButtons).toHaveLength(3);
+
+      for (const collapseButton of allCollapseButtons.reverse()) {
+        await userEvent.click(collapseButton);
+      }
+    }
+
+    const rootExpandButton = await canvas.findByRole('button', {
+      name: 'Expand',
+    });
+
+    await userEvent.click(rootExpandButton);
+
+    {
+      const allCollapseButtons = await canvas.findAllByRole('button', {
+        name: 'Collapse',
+      });
+
+      expect(allCollapseButtons).toHaveLength(3);
+    }
+  },
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/JsonArrayNode.tsx

@@ -0,0 +1,25 @@
+import { JsonNestedNode } from '@/workflow/components/json-visualizer/components/JsonNestedNode';
+import { IconBrackets } from 'twenty-ui';
+import { JsonArray } from 'type-fest';
+
+export const JsonArrayNode = ({
+  label,
+  value,
+  depth,
+}: {
+  label?: string;
+  value: JsonArray;
+  depth: number;
+}) => {
+  return (
+    <JsonNestedNode
+      elements={[...value.entries()].map(([key, value]) => ({
+        key: String(key),
+        value,
+      }))}
+      label={label}
+      Icon={IconBrackets}
+      depth={depth}
+    />
+  );
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/JsonNestedNode.tsx

@@ -0,0 +1,65 @@
+import { JsonArrow } from '@/workflow/components/json-visualizer/components/internal/JsonArrow';
+import { JsonList } from '@/workflow/components/json-visualizer/components/internal/JsonList';
+import { JsonNodeLabel } from '@/workflow/components/json-visualizer/components/internal/JsonNodeLabel';
+import { JsonNode } from '@/workflow/components/json-visualizer/components/JsonNode';
+import styled from '@emotion/styled';
+import { useState } from 'react';
+import { isDefined } from 'twenty-shared';
+import { IconComponent } from 'twenty-ui';
+import { JsonValue } from 'type-fest';
+
+const StyledContainer = styled.li`
+  list-style-type: none;
+  display: grid;
+  row-gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledLabelContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const JsonNestedNode = ({
+  label,
+  Icon,
+  elements,
+  depth,
+}: {
+  label?: string;
+  Icon: IconComponent;
+  elements: Array<{ key: string; value: JsonValue }>;
+  depth: number;
+}) => {
+  const hideRoot = !isDefined(label);
+
+  const [isOpen, setIsOpen] = useState(true);
+
+  const renderedChildren = (
+    <JsonList depth={depth}>
+      {elements.map(({ key, value }) => (
+        <JsonNode key={key} label={key} value={value} depth={depth + 1} />
+      ))}
+    </JsonList>
+  );
+
+  const handleArrowClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  if (hideRoot) {
+    return <StyledContainer>{renderedChildren}</StyledContainer>;
+  }
+
+  return (
+    <StyledContainer>
+      <StyledLabelContainer>
+        <JsonArrow isOpen={isOpen} onClick={handleArrowClick} />
+
+        <JsonNodeLabel label={label} Icon={Icon} />
+      </StyledLabelContainer>
+
+      {isOpen && renderedChildren}
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/JsonNode.tsx

@@ -0,0 +1,68 @@
+import { JsonArrayNode } from '@/workflow/components/json-visualizer/components/JsonArrayNode';
+import { JsonObjectNode } from '@/workflow/components/json-visualizer/components/JsonObjectNode';
+import { JsonValueNode } from '@/workflow/components/json-visualizer/components/JsonValueNode';
+import { isArray } from '@/workflow/components/json-visualizer/utils/isArray';
+import { isBoolean, isNull, isNumber, isString } from '@sniptt/guards';
+import {
+  IconCheckbox,
+  IconCircleOff,
+  IconNumber9,
+  IconTypography,
+} from 'twenty-ui';
+import { JsonValue } from 'type-fest';
+
+export const JsonNode = ({
+  label,
+  value,
+  depth,
+}: {
+  label?: string;
+  value: JsonValue;
+  depth: number;
+}) => {
+  if (isNull(value)) {
+    return (
+      <JsonValueNode
+        label={label}
+        valueAsString="[null]"
+        Icon={IconCircleOff}
+      />
+    );
+  }
+
+  if (isString(value)) {
+    return (
+      <JsonValueNode
+        label={label}
+        valueAsString={value}
+        Icon={IconTypography}
+      />
+    );
+  }
+
+  if (isNumber(value)) {
+    return (
+      <JsonValueNode
+        label={label}
+        valueAsString={String(value)}
+        Icon={IconNumber9}
+      />
+    );
+  }
+
+  if (isBoolean(value)) {
+    return (
+      <JsonValueNode
+        label={label}
+        valueAsString={String(value)}
+        Icon={IconCheckbox}
+      />
+    );
+  }
+
+  if (isArray(value)) {
+    return <JsonArrayNode label={label} value={value} depth={depth} />;
+  }
+
+  return <JsonObjectNode label={label} value={value} depth={depth} />;
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/JsonObjectNode.tsx

@@ -0,0 +1,25 @@
+import { JsonNestedNode } from '@/workflow/components/json-visualizer/components/JsonNestedNode';
+import { IconCube } from 'twenty-ui';
+import { JsonObject } from 'type-fest';
+
+export const JsonObjectNode = ({
+  label,
+  value,
+  depth,
+}: {
+  label?: string;
+  value: JsonObject;
+  depth: number;
+}) => {
+  return (
+    <JsonNestedNode
+      elements={Object.entries(value).map(([key, value]) => ({
+        key,
+        value,
+      }))}
+      label={label}
+      Icon={IconCube}
+      depth={depth}
+    />
+  );
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/JsonTree.tsx

@@ -0,0 +1,11 @@
+import { JsonList } from '@/workflow/components/json-visualizer/components/internal/JsonList';
+import { JsonNode } from '@/workflow/components/json-visualizer/components/JsonNode';
+import { JsonValue } from 'type-fest';
+
+export const JsonTree = ({ value }: { value: JsonValue }) => {
+  return (
+    <JsonList depth={0}>
+      <JsonNode value={value} depth={0} />
+    </JsonList>
+  );
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/JsonValueNode.tsx

@@ -0,0 +1,32 @@
+import { JsonListItem } from '@/workflow/components/json-visualizer/components/internal/JsonListItem';
+import { JsonNodeLabel } from '@/workflow/components/json-visualizer/components/internal/JsonNodeLabel';
+import { JsonNodeValue } from '@/workflow/components/json-visualizer/components/internal/JsonNodeValue';
+import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
+
+const StyledListItem = styled(JsonListItem)`
+  column-gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+type JsonValueNodeProps = {
+  valueAsString: string;
+} & (
+  | {
+      label: string;
+      Icon: IconComponent;
+    }
+  | {
+      label?: never;
+      Icon?: unknown;
+    }
+);
+
+export const JsonValueNode = (props: JsonValueNodeProps) => {
+  return (
+    <StyledListItem>
+      {props.label && <JsonNodeLabel label={props.label} Icon={props.Icon} />}
+
+      <JsonNodeValue valueAsString={props.valueAsString} />
+    </StyledListItem>
+  );
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx

@@ -0,0 +1,48 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import { motion } from 'framer-motion';
+import { IconChevronDown, VisibilityHidden } from 'twenty-ui';
+
+const StyledButton = styled(motion.button)`
+  align-items: center;
+  border-color: ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-style: solid;
+  border-width: 1px;
+  display: flex;
+  justify-content: center;
+  padding-inline: ${({ theme }) => theme.spacing(1)};
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  height: 24px;
+  width: 24px;
+  box-sizing: border-box;
+  cursor: pointer;
+`;
+
+const MotionIconChevronDown = motion(IconChevronDown);
+
+export const JsonArrow = ({
+  isOpen,
+  onClick,
+}: {
+  isOpen: boolean;
+  onClick: () => void;
+}) => {
+  const { t } = useLingui();
+
+  const theme = useTheme();
+
+  return (
+    <StyledButton onClick={onClick}>
+      <VisibilityHidden>{isOpen ? t`Collapse` : t`Expand`}</VisibilityHidden>
+
+      <MotionIconChevronDown
+        size={theme.icon.size.md}
+        color={theme.font.color.secondary}
+        initial={false}
+        animate={{ rotate: isOpen ? -180 : 0 }}
+      />
+    </StyledButton>
+  );
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/internal/JsonList.tsx

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledList = styled.ul<{ depth: number }>`
+  margin: 0;
+  padding: 0;
+
+  display: grid;
+  row-gap: ${({ theme }) => theme.spacing(2)};
+
+  ${({ theme, depth }) =>
+    depth > 0 &&
+    css`
+      padding-left: ${theme.spacing(8)};
+    `}
+`;
+
+export { StyledList as JsonList };

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/internal/JsonListItem.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const StyledListItem = styled.li`
+  align-items: center;
+  display: flex;
+  list-style-type: none;
+`;
+
+export { StyledListItem as JsonListItem };

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/internal/JsonNodeLabel.tsx

@@ -0,0 +1,39 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
+
+const StyledLabelContainer = styled.span`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border-color: ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-style: solid;
+  border-width: 1px;
+  height: 24px;
+  box-sizing: border-box;
+  column-gap: ${({ theme }) => theme.spacing(2)};
+  display: flex;
+  font-variant-numeric: tabular-nums;
+  justify-content: center;
+  padding-block: ${({ theme }) => theme.spacing(1)};
+  padding-inline: ${({ theme }) => theme.spacing(2)};
+  width: fit-content;
+`;
+
+export const JsonNodeLabel = ({
+  label,
+  Icon,
+}: {
+  label: string;
+  Icon: IconComponent;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <StyledLabelContainer>
+      <Icon size={theme.icon.size.md} color={theme.font.color.tertiary} />
+
+      <span>{label}</span>
+    </StyledLabelContainer>
+  );
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/internal/JsonNodeValue.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const StyledText = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+export const JsonNodeValue = ({ valueAsString }: { valueAsString: string }) => {
+  return <StyledText>{valueAsString}</StyledText>;
+};

packages/twenty-front/src/modules/workflow/components/json-visualizer/utils/isArray.ts

@@ -0,0 +1,5 @@
+import { isArray as _isArray } from '@sniptt/guards';
+
+export const isArray = (
+  value: unknown,
+): value is unknown[] | readonly unknown[] => _isArray(value);

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -23,6 +23,7 @@ export {
   IconBookmark,
   IconBookmarkPlus,
   IconBox,
+  IconBrackets,
   IconBracketsContain,
   IconBrandGithub,
   IconBrandGoogle,
@@ -59,6 +60,8 @@ export {
   IconCoins,
   IconColorSwatch,
   IconMessageCircle as IconComment,
+  IconCube,
+  IconTypography,
   IconCopy,
   IconCreativeCommonsSa,
   IconCreditCard,