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
2025-03-03 16:55:16 +01:00
parent 2325e0ae0f
commit 3d56e5394f
76 changed files with 817 additions and 31 deletions
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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 ""
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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."
@@ -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);
+    }
+  },
+};
@@ -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}
+    />
+  );
+};
@@ -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>
+  );
+};
@@ -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} />;
+};
@@ -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}
+    />
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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 };
@@ -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 };
@@ -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>
+  );
+};
@@ -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>;
+};
@@ -0,0 +1,5 @@
+import { isArray as _isArray } from '@sniptt/guards';
+
+export const isArray = (
+  value: unknown,
+): value is unknown[] | readonly unknown[] => _isArray(value);
@@ -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,