From a20b728cb08cab0bfeb96faa4161fde2822b91b8 Mon Sep 17 00:00:00 2001
From: Rainer Wittmann <R.Wittmann@spirit.de>
Date: Wed, 10 Nov 2021 16:13:19 +0100
Subject: [PATCH] add variables tab to instance view (#2442)

---
 .../elsa-workflow-instance-journal.tsx        | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/elsa-workflow-instance-journal.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/elsa-workflow-instance-journal.tsx
index ca1d4b6c7..e5d0f61b9 100644
--- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/elsa-workflow-instance-journal.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/elsa-workflow-instance-journal.tsx
@@ -133,6 +133,12 @@ export class ElsaWorkflowInstanceJournal {
         <elsa-tab-content tab="activityState" slot="content">
           {this.renderActivityStateTab()}
         </elsa-tab-content>
+        <elsa-tab-header tab="variables" slot="header">
+          Variables
+        </elsa-tab-header>
+        <elsa-tab-content tab="variables" slot="content">
+          {this.renderVariablesTab()}
+        </elsa-tab-content>
       </elsa-flyout-panel>
     );
   }
@@ -411,4 +417,17 @@ export class ElsaWorkflowInstanceJournal {
       </dl>
     )
   };
+
+  renderVariablesTab = () => {
+    const { workflowInstance, workflowBlueprint } = this;
+    const { variables } = workflowInstance;
+    
+    return (
+      <dl class="elsa-border-b elsa-border-gray-200 elsa-divide-y elsa-divide-gray-200">
+        <div class="elsa-py-3 elsa-text-sm elsa-font-medium">
+          {variables?.data ? <pre>{JSON.stringify(variables?.data, null, 2)}</pre> : '-'}
+          </div>
+      </dl>
+    );
+  };
 }