From 2ffdec1b61a2f10b53261a3c78bb180511a1a094 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Sat, 4 Jun 2022 21:03:40 +0200
Subject: [PATCH] Incremental work on variables editor

---
 .../src/components.d.ts                       | 13 +++++
 .../variables-editor/variables-editor.tsx     | 53 +++++++++++++++++++
 .../workflow-definition-properties-editor.tsx |  2 +-
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variables-editor.tsx

diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
index afb6da11e..81779a91d 100644
--- a/src/designer/elsa-workflows-designer/src/components.d.ts
+++ b/src/designer/elsa-workflows-designer/src/components.d.ts
@@ -184,6 +184,8 @@ export namespace Components {
         "tooltipContent": any;
         "tooltipPosition"?: string;
     }
+    interface ElsaVariablesEditor {
+    }
     interface ElsaWorkflowDefinitionBrowser {
         "hide": () => Promise<void>;
         "show": () => Promise<void>;
@@ -441,6 +443,12 @@ declare global {
         prototype: HTMLElsaTooltipElement;
         new (): HTMLElsaTooltipElement;
     };
+    interface HTMLElsaVariablesEditorElement extends Components.ElsaVariablesEditor, HTMLStencilElement {
+    }
+    var HTMLElsaVariablesEditorElement: {
+        prototype: HTMLElsaVariablesEditorElement;
+        new (): HTMLElsaVariablesEditorElement;
+    };
     interface HTMLElsaWorkflowDefinitionBrowserElement extends Components.ElsaWorkflowDefinitionBrowser, HTMLStencilElement {
     }
     var HTMLElsaWorkflowDefinitionBrowserElement: {
@@ -551,6 +559,7 @@ declare global {
         "elsa-studio": HTMLElsaStudioElement;
         "elsa-switch-editor": HTMLElsaSwitchEditorElement;
         "elsa-tooltip": HTMLElsaTooltipElement;
+        "elsa-variables-editor": HTMLElsaVariablesEditorElement;
         "elsa-workflow-definition-browser": HTMLElsaWorkflowDefinitionBrowserElement;
         "elsa-workflow-definition-editor": HTMLElsaWorkflowDefinitionEditorElement;
         "elsa-workflow-definition-editor-toolbox": HTMLElsaWorkflowDefinitionEditorToolboxElement;
@@ -728,6 +737,8 @@ declare namespace LocalJSX {
         "tooltipContent"?: any;
         "tooltipPosition"?: string;
     }
+    interface ElsaVariablesEditor {
+    }
     interface ElsaWorkflowDefinitionBrowser {
         "onWorkflowDefinitionSelected"?: (event: CustomEvent<WorkflowDefinitionSummary>) => void;
     }
@@ -814,6 +825,7 @@ declare namespace LocalJSX {
         "elsa-studio": ElsaStudio;
         "elsa-switch-editor": ElsaSwitchEditor;
         "elsa-tooltip": ElsaTooltip;
+        "elsa-variables-editor": ElsaVariablesEditor;
         "elsa-workflow-definition-browser": ElsaWorkflowDefinitionBrowser;
         "elsa-workflow-definition-editor": ElsaWorkflowDefinitionEditor;
         "elsa-workflow-definition-editor-toolbox": ElsaWorkflowDefinitionEditorToolbox;
@@ -864,6 +876,7 @@ declare module "@stencil/core" {
             "elsa-studio": LocalJSX.ElsaStudio & JSXBase.HTMLAttributes<HTMLElsaStudioElement>;
             "elsa-switch-editor": LocalJSX.ElsaSwitchEditor & JSXBase.HTMLAttributes<HTMLElsaSwitchEditorElement>;
             "elsa-tooltip": LocalJSX.ElsaTooltip & JSXBase.HTMLAttributes<HTMLElsaTooltipElement>;
+            "elsa-variables-editor": LocalJSX.ElsaVariablesEditor & JSXBase.HTMLAttributes<HTMLElsaVariablesEditorElement>;
             "elsa-workflow-definition-browser": LocalJSX.ElsaWorkflowDefinitionBrowser & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionBrowserElement>;
             "elsa-workflow-definition-editor": LocalJSX.ElsaWorkflowDefinitionEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorElement>;
             "elsa-workflow-definition-editor-toolbox": LocalJSX.ElsaWorkflowDefinitionEditorToolbox & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolboxElement>;
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variables-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variables-editor.tsx
new file mode 100644
index 000000000..22f608dc7
--- /dev/null
+++ b/src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variables-editor.tsx
@@ -0,0 +1,53 @@
+import {Component, h} from "@stencil/core";
+import {DeleteIcon, EditIcon} from "../../icons/tooling";
+
+@Component({
+  tag: 'elsa-variables-editor',
+  shadow: false
+})
+export class VariablesEditor {
+  render() {
+    return (
+      <div>
+        <div class="flex justify-end m-4">
+          <button class="btn btn-primary">Add variable</button>
+        </div>
+        <div class="align-middle inline-block min-w-full border-b border-gray-200">
+          <table>
+            <thead>
+            <tr>
+              <th scope="col">Name</th>
+              <th scope="col">Type</th>
+              <th scope="col">Value</th>
+              <th scope="col"/>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td class="whitespace-nowrap">CurrentValue</td>
+              <td class="whitespace-nowrap">String</td>
+              <td></td>
+              <td class="pr-6">
+                <elsa-context-menu
+                  menuItems={[
+                    {text: 'Edit', clickHandler: e => this.onEditClick(e), icon: <EditIcon/>},
+                    {text: 'Delete', clickHandler: e => this.onDeleteClick(e), icon: <DeleteIcon/>},
+                  ]}
+                />
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+
+  private onEditClick = (e: Event) => {
+    e.preventDefault();
+  };
+
+  private onDeleteClick = (e: Event) => {
+    e.preventDefault();
+  };
+}
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-properties-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-properties-editor.tsx
index f8c228769..774cb870b 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-properties-editor.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-properties-editor.tsx
@@ -148,7 +148,7 @@ export class WorkflowDefinitionPropertiesEditor {
 
   private renderVariablesTab = () => {
     return <div>
-      TODO: Variables editor
+      <elsa-variables-editor />
     </div>
   };