Incremental work on variable editor

src/designer/elsa-workflows-designer/src/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { ActionDefinition, ActionInvokedArgs, Activity, ActivityDescriptor, ActivitySelectedArgs, ContainerSelectedArgs, GraphUpdatedArgs, IntellisenseContext, SelectListItem, TabChangedArgs, TabDefinition, WorkflowDefinition, WorkflowDefinitionSummary, WorkflowInstance, WorkflowInstanceSummary } from "./models";
+import { ActionDefinition, ActionInvokedArgs, Activity, ActivityDescriptor, ActivitySelectedArgs, ContainerSelectedArgs, GraphUpdatedArgs, IntellisenseContext, SelectListItem, TabChangedArgs, TabDefinition, Variable, WorkflowDefinition, WorkflowDefinitionSummary, WorkflowInstance, WorkflowInstanceSummary } from "./models";
 import { ActivityUpdatedArgs, DeleteActivityRequestedArgs } from "./components/designer/workflow-definition-editor/activity-properties-editor";
 import { Button } from "./components/shared/button-group/models";
 import { ContainerActivityComponent } from "./components/activities/container-activity-component";
@@ -184,7 +184,13 @@ export namespace Components {
         "tooltipContent": any;
         "tooltipPosition"?: string;
     }
+    interface ElsaVariableEditorDialog {
+        "hide": () => Promise<void>;
+        "show": () => Promise<void>;
+        "variable": Variable;
+    }
     interface ElsaVariablesEditor {
+        "variables": Array<Variable>;
     }
     interface ElsaWorkflowDefinitionBrowser {
         "hide": () => Promise<void>;
@@ -443,6 +449,12 @@ declare global {
         prototype: HTMLElsaTooltipElement;
         new (): HTMLElsaTooltipElement;
     };
+    interface HTMLElsaVariableEditorDialogElement extends Components.ElsaVariableEditorDialog, HTMLStencilElement {
+    }
+    var HTMLElsaVariableEditorDialogElement: {
+        prototype: HTMLElsaVariableEditorDialogElement;
+        new (): HTMLElsaVariableEditorDialogElement;
+    };
     interface HTMLElsaVariablesEditorElement extends Components.ElsaVariablesEditor, HTMLStencilElement {
     }
     var HTMLElsaVariablesEditorElement: {
@@ -559,6 +571,7 @@ declare global {
         "elsa-studio": HTMLElsaStudioElement;
         "elsa-switch-editor": HTMLElsaSwitchEditorElement;
         "elsa-tooltip": HTMLElsaTooltipElement;
+        "elsa-variable-editor-dialog": HTMLElsaVariableEditorDialogElement;
         "elsa-variables-editor": HTMLElsaVariablesEditorElement;
         "elsa-workflow-definition-browser": HTMLElsaWorkflowDefinitionBrowserElement;
         "elsa-workflow-definition-editor": HTMLElsaWorkflowDefinitionEditorElement;
@@ -737,7 +750,12 @@ declare namespace LocalJSX {
         "tooltipContent"?: any;
         "tooltipPosition"?: string;
     }
+    interface ElsaVariableEditorDialog {
+        "variable"?: Variable;
+    }
     interface ElsaVariablesEditor {
+        "onVariablesChanged"?: (event: CustomEvent<Array<Variable>>) => void;
+        "variables"?: Array<Variable>;
     }
     interface ElsaWorkflowDefinitionBrowser {
         "onWorkflowDefinitionSelected"?: (event: CustomEvent<WorkflowDefinitionSummary>) => void;
@@ -825,6 +843,7 @@ declare namespace LocalJSX {
         "elsa-studio": ElsaStudio;
         "elsa-switch-editor": ElsaSwitchEditor;
         "elsa-tooltip": ElsaTooltip;
+        "elsa-variable-editor-dialog": ElsaVariableEditorDialog;
         "elsa-variables-editor": ElsaVariablesEditor;
         "elsa-workflow-definition-browser": ElsaWorkflowDefinitionBrowser;
         "elsa-workflow-definition-editor": ElsaWorkflowDefinitionEditor;
@@ -876,6 +895,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-variable-editor-dialog": LocalJSX.ElsaVariableEditorDialog & JSXBase.HTMLAttributes<HTMLElsaVariableEditorDialogElement>;
             "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>;

src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variable-editor-dialog.tsx

@@ -0,0 +1,44 @@
+import {Component, h, Prop, Event, EventEmitter, Method} from "@stencil/core";
+import {DeleteIcon, EditIcon, PublishIcon, UnPublishIcon} from "../../icons/tooling";
+import {DefaultActions, Variable, WorkflowDefinitionSummary} from "../../../models";
+import {Filter} from "../../modals/workflow-definition-browser/filter";
+
+@Component({
+  tag: 'elsa-variable-editor-dialog',
+  shadow: false
+})
+export class VariableEditorDialog {
+  private modalDialog: HTMLElsaModalDialogElement;
+
+  @Prop() variable: Variable;
+
+  @Method()
+  public async show() {
+    await this.modalDialog.show();
+  }
+
+  @Method()
+  public async hide() {
+    await this.modalDialog.hide();
+  }
+
+  render() {
+    const variable: Variable = this.variable ?? {name: '', type: ''};
+    const closeAction = DefaultActions.Close();
+    const actions = [closeAction];
+
+    return (
+      <div>
+        <elsa-modal-dialog ref={el => (this.modalDialog = el)} actions={actions}>
+          <div class="pt-4">
+            <h2 class="text-lg font-medium ml-4 mb-2">Edit Variable</h2>
+            <div class="align-middle inline-block min-w-full border-b border-gray-200">
+
+            </div>
+          </div>
+        </elsa-modal-dialog>
+      </div>
+    );
+  }
+
+}

src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variables-editor.tsx

@@ -1,16 +1,23 @@
-import {Component, h} from "@stencil/core";
+import {Component, h, Prop, Event, EventEmitter} from "@stencil/core";
 import {DeleteIcon, EditIcon} from "../../icons/tooling";
+import {Variable} from "../../../models";
 
 @Component({
   tag: 'elsa-variables-editor',
   shadow: false
 })
 export class VariablesEditor {
+  private variableEditorDialog: HTMLElsaVariableEditorDialogElement;
+  @Prop() variables: Array<Variable> = [];
+  @Event() variablesChanged: EventEmitter<Array<Variable>>;
+
   render() {
+    const variables = this.variables;
+
     return (
       <div>
         <div class="flex justify-end m-4">
-          <button class="btn btn-primary">Add variable</button>
+          <button class="btn btn-primary" onClick={e => this.onAddVariableClick()}>Add variable</button>
         </div>
         <div class="align-middle inline-block min-w-full border-b border-gray-200">
           <table>
@@ -23,26 +30,35 @@ export class VariablesEditor {
             </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>
+            {variables.map(variable => {
+                return (
+                  <tr>
+                    <td class="whitespace-nowrap">{variable.name}</td>
+                    <td class="whitespace-nowrap">{variable.type}</td>
+                    <td>{variable.defaultValue}</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>
+        <elsa-variable-editor-dialog ref={el => this.variableEditorDialog = el} />
       </div>
     );
   }
 
+  private onAddVariableClick = async () => {
+    await this.variableEditorDialog.show();
+  };
+
   private onEditClick = (e: Event) => {
     e.preventDefault();
   };

src/designer/elsa-workflows-designer/src/components/modals/workflow-definition-browser/workflow-definition-browser.tsx

@@ -31,6 +31,7 @@ export class WorkflowDefinitionBrowser {
   @State() private orderBy?: WorkflowDefinitionsOrderBy;
   @State() private labels?: string[];
   @State() private selectAllChecked: boolean;
+
   @Method()
   public async show() {
     await this.modalDialog.show();

src/designer/elsa-workflows-designer/src/models/core.ts

@@ -23,6 +23,7 @@ export interface Container extends Activity {
 
 export interface Variable {
   name: string;
+  type: string;
   defaultValue?: any;
 }