From 7f9f2d8fcd4d1e90a915d8d5e16946338c32a161 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Wed, 30 Nov 2022 14:15:48 +0100
Subject: [PATCH] Improve Variables UI

---
 .../src/components.d.ts                       | 34 -------------------
 .../variable-editor-dialog-content.tsx        |  2 +-
 .../src/components/inputs/variable-picker.tsx | 18 +++++-----
 3 files changed, 10 insertions(+), 44 deletions(-)

diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
index 4777c3971..150dc8675 100644
--- a/src/designer/elsa-workflows-designer/src/components.d.ts
+++ b/src/designer/elsa-workflows-designer/src/components.d.ts
@@ -136,15 +136,6 @@ export namespace Components {
         "workflowDefinition": WorkflowDefinition;
         "zoomToFit": () => Promise<void>;
     }
-    interface ElsaFlowchartEditor {
-        "export": () => Promise<Activity>;
-        "monacoLibPath": string;
-        "newRoot": () => Promise<Activity>;
-    }
-    interface ElsaFlowchartEditorToolbar {
-        "autoLayout": (direction: "TB" | "BT" | "LR" | "RL") => Promise<void>;
-        "zoomToFit": () => Promise<void>;
-    }
     interface ElsaFormPanel {
         "actions": Array<PanelActionDefinition>;
         "mainTitle": string;
@@ -439,18 +430,6 @@ declare global {
         prototype: HTMLElsaFlowchartElement;
         new (): HTMLElsaFlowchartElement;
     };
-    interface HTMLElsaFlowchartEditorElement extends Components.ElsaFlowchartEditor, HTMLStencilElement {
-    }
-    var HTMLElsaFlowchartEditorElement: {
-        prototype: HTMLElsaFlowchartEditorElement;
-        new (): HTMLElsaFlowchartEditorElement;
-    };
-    interface HTMLElsaFlowchartEditorToolbarElement extends Components.ElsaFlowchartEditorToolbar, HTMLStencilElement {
-    }
-    var HTMLElsaFlowchartEditorToolbarElement: {
-        prototype: HTMLElsaFlowchartEditorToolbarElement;
-        new (): HTMLElsaFlowchartEditorToolbarElement;
-    };
     interface HTMLElsaFormPanelElement extends Components.ElsaFormPanel, HTMLStencilElement {
     }
     var HTMLElsaFormPanelElement: {
@@ -710,8 +689,6 @@ declare global {
         "elsa-dropdown-input": HTMLElsaDropdownInputElement;
         "elsa-flow-switch-editor": HTMLElsaFlowSwitchEditorElement;
         "elsa-flowchart": HTMLElsaFlowchartElement;
-        "elsa-flowchart-editor": HTMLElsaFlowchartEditorElement;
-        "elsa-flowchart-editor-toolbar": HTMLElsaFlowchartEditorToolbarElement;
         "elsa-form-panel": HTMLElsaFormPanelElement;
         "elsa-home-page": HTMLElsaHomePageElement;
         "elsa-input-control-switch": HTMLElsaInputControlSwitchElement;
@@ -838,13 +815,6 @@ declare namespace LocalJSX {
         "onGraphUpdated"?: (event: CustomEvent<GraphUpdatedArgs>) => void;
         "workflowDefinition"?: WorkflowDefinition;
     }
-    interface ElsaFlowchartEditor {
-        "monacoLibPath"?: string;
-    }
-    interface ElsaFlowchartEditorToolbar {
-        "autoLayout"?: (direction: "TB" | "BT" | "LR" | "RL") => Promise<void>;
-        "zoomToFit"?: () => Promise<void>;
-    }
     interface ElsaFormPanel {
         "actions"?: Array<PanelActionDefinition>;
         "mainTitle"?: string;
@@ -1062,8 +1032,6 @@ declare namespace LocalJSX {
         "elsa-dropdown-input": ElsaDropdownInput;
         "elsa-flow-switch-editor": ElsaFlowSwitchEditor;
         "elsa-flowchart": ElsaFlowchart;
-        "elsa-flowchart-editor": ElsaFlowchartEditor;
-        "elsa-flowchart-editor-toolbar": ElsaFlowchartEditorToolbar;
         "elsa-form-panel": ElsaFormPanel;
         "elsa-home-page": ElsaHomePage;
         "elsa-input-control-switch": ElsaInputControlSwitch;
@@ -1128,8 +1096,6 @@ declare module "@stencil/core" {
             "elsa-dropdown-input": LocalJSX.ElsaDropdownInput & JSXBase.HTMLAttributes<HTMLElsaDropdownInputElement>;
             "elsa-flow-switch-editor": LocalJSX.ElsaFlowSwitchEditor & JSXBase.HTMLAttributes<HTMLElsaFlowSwitchEditorElement>;
             "elsa-flowchart": LocalJSX.ElsaFlowchart & JSXBase.HTMLAttributes<HTMLElsaFlowchartElement>;
-            "elsa-flowchart-editor": LocalJSX.ElsaFlowchartEditor & JSXBase.HTMLAttributes<HTMLElsaFlowchartEditorElement>;
-            "elsa-flowchart-editor-toolbar": LocalJSX.ElsaFlowchartEditorToolbar & JSXBase.HTMLAttributes<HTMLElsaFlowchartEditorToolbarElement>;
             "elsa-form-panel": LocalJSX.ElsaFormPanel & JSXBase.HTMLAttributes<HTMLElsaFormPanelElement>;
             "elsa-home-page": LocalJSX.ElsaHomePage & JSXBase.HTMLAttributes<HTMLElsaHomePageElement>;
             "elsa-input-control-switch": LocalJSX.ElsaInputControlSwitch & JSXBase.HTMLAttributes<HTMLElsaInputControlSwitchElement>;
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variable-editor-dialog-content.tsx b/src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variable-editor-dialog-content.tsx
index 7a76c1a1f..a587b3d7b 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variable-editor-dialog-content.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variable-editor-dialog-content.tsx
@@ -26,7 +26,7 @@ export class VariableEditorDialogContent {
     const variableTypeName = variable.typeName;
     const availableTypes: Array<VariableDescriptor> = descriptorsStore.variableDescriptors;
     const groupedVariableTypes = _.groupBy(availableTypes, x => x.category);
-    const storageDrivers: Array<StorageDriverDescriptor> = [{id: null, displayName: '-'}, ...descriptorsStore.storageDrivers];
+    const storageDrivers: Array<StorageDriverDescriptor> = descriptorsStore.storageDrivers;
 
     return (
       <div>
diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/variable-picker.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/variable-picker.tsx
index 7c89f4bcd..0ca9ec8f2 100644
--- a/src/designer/elsa-workflows-designer/src/components/inputs/variable-picker.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/inputs/variable-picker.tsx
@@ -27,18 +27,18 @@ export class VariablePickerInput {
       currentValue = defaultValue ? defaultValue.toString() : undefined;
     }
 
-    debugger;
-
     return (
       <WorkflowDefinitionTunnel.Consumer>
         {({workflowDefinition}) => {
-          const variables = workflowDefinition?.variables ?? [];
-          return<FormEntry fieldId={fieldId} label={displayName} hint={description}>
+          let  variables: Variable[] = workflowDefinition?.variables ?? [];
+          variables = [null, ...variables];
+          return <FormEntry fieldId={fieldId} label={displayName} hint={description}>
           <select id={fieldId} name={fieldName} onChange={e => this.onChange(e)}>
               {variables.map((variable: Variable) => {
-                const isSelected = variable.name == currentValue?.name;
-                const json = JSON.stringify(variable);
-                return <option value={variable.name} selected={isSelected} data-variable={json}>{variable.name}</option>;
+                const variableName = variable?.name;
+                const isSelected = variableName == currentValue?.name;
+                const json = variable ? JSON.stringify(variable) : '';
+                return <option value={variableName} selected={isSelected} data-variable={json}>{variableName}</option>;
               })}
             </select>
           </FormEntry>
@@ -48,9 +48,9 @@ export class VariablePickerInput {
   }
 
   private onChange = (e: Event) => {
-    debugger;
     const inputElement = e.target as HTMLSelectElement;
-    const variable = inputElement.selectedOptions.length == 0 ? null : JSON.parse(inputElement.selectedOptions[0].dataset.variable);
+    const json = inputElement.selectedOptions[0].dataset.variable;
+    const variable = inputElement.selectedIndex <= 0 ? null : JSON.parse(json);
     this.inputContext.inputChanged(variable, SyntaxNames.Literal);
   }
 }