JavaScript intellisense (elsa-workflows#3639)

* Incremental work * Incremental work * Incremental work * Initial support for intellisense * Implement variable type definition provider
faith0831 · Jan 19, 2023 · 28e9922 · 28e9922
1 parent 6759a0d
commit 28e9922
Show file tree

Hide file tree

Showing 79 changed files with 1,252 additions and 212 deletions.
diff --git a/src/designer/elsa-workflows-designer/package-lock.json b/src/designer/elsa-workflows-designer/package-lock.json
diff --git a/src/designer/elsa-workflows-designer/package.json b/src/designer/elsa-workflows-designer/package.json
@@ -32,6 +32,7 @@
  "@stencil/core": "^2.20.0",
  "@stencil/state-tunnel": "^1.0.1",
  "@stencil/store": "^2.0.1",
+ "async-mutex": "^0.4.0",
  "axios": "^0.27.2",
  "axios-middleware": "^0.3.1",
  "el-transition": "^0.0.7",

diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
@@ -8,14 +8,14 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { ActivityDefinition, ActivityDefinitionPropsUpdatedArgs, ActivityDefinitionSummary, ActivityDefinitionUpdatedArgs } from "./modules/activity-definitions/models";
 import { ActivityDriverRegistry } from "./services";
 import { Activity, ActivityDeletedArgs, ActivitySelectedArgs, ChildActivitySelectedArgs, ContainerSelectedArgs, EditChildActivityArgs, GraphUpdatedArgs, IntellisenseContext, SelectListItem, TabChangedArgs, TabDefinition, Variable, WorkflowInstance, WorkflowInstanceSummary, WorkflowUpdatedArgs } from "./models";
-import { WorkflowDefinition, WorkflowDefinitionSummary } from "./modules/workflow-definitions/models/entities";
 import { ActivityUpdatedArgs, DeleteActivityRequestedArgs, Widget, WorkflowDefinitionPropsUpdatedArgs, WorkflowDefinitionUpdatedArgs } from "./modules/workflow-definitions/models/ui";
 import { PublishClickedArgs } from "./modules/activity-definitions/components/publish-button";
 import { NotificationType } from "./modules/notifications/models";
 import { Button } from "./components/shared/button-group/models";
-import { ActivityInputContext } from "./services/node-input-driver";
+import { ActivityInputContext } from "./services/activity-input-driver";
 import { ContextMenuAnchorPoint, ContextMenuItem } from "./components/shared/context-menu/models";
 import { DropdownButtonItem, DropdownButtonOrigin } from "./components/shared/dropdown-button/models";
+import { WorkflowDefinition, WorkflowDefinitionSummary } from "./modules/workflow-definitions/models/entities";
 import { Graph } from "@antv/x6";
 import { AddActivityArgs, FlowchartPathItem, LayoutDirection, RenameActivityArgs, UpdateActivityArgs } from "./modules/flowchart/models";
 import { OutNode } from "@antv/layout";
@@ -25,7 +25,7 @@ import { ExpressionChangedArs } from "./components/designer/input-control-switch
 import { SignedInArgs } from "./modules/login/models";
 import { ModalActionClickArgs, ModalActionDefinition, ModalDialogInstance } from "./components/shared/modal-dialog/models";
 import { ModalType } from "./components/shared/modal-dialog/modal-type";
-import { MonacoLib, MonacoValueChangedArgs } from "./components/shared/monaco-editor/monaco-editor";
+import { MonacoValueChangedArgs } from "./components/shared/monaco-editor/monaco-editor";
 import { PagerData } from "./components/shared/pager/pager";
 import { PanelPosition, PanelStateChangedArgs } from "./components/panel/models";
 import { PublishClickedArgs as PublishClickedArgs1 } from "./modules/workflow-definitions/components/publish-button";
@@ -54,10 +54,11 @@ export namespace Components {
  }
  interface ElsaActivityPropertiesEditor {
  "activity"?: Activity;
+ "containerId": string;
+ "containerType": string;
  "hide": () => Promise<void>;
  "show": () => Promise<void>;
  "variables": Array<Variable>;
- "workflowDefinition": WorkflowDefinition;
  }
  interface ElsaActivityPublishButton {
  "publishing": boolean;
@@ -135,8 +136,11 @@ export namespace Components {
  interface ElsaHomePage {
  }
  interface ElsaInputControlSwitch {
+ "activityType": string;
  "codeEditorHeight": string;
  "codeEditorSingleLineMode": boolean;
+ "containerId": string;
+ "containerType": string;
  "context"?: IntellisenseContext;
  "defaultSyntax": string;
  "expression"?: string;
@@ -145,6 +149,7 @@ export namespace Components {
  "hint": string;
  "isReadOnly"?: boolean;
  "label": string;
+ "propertyName": string;
  "supportedSyntaxes": Array<string>;
  "syntax"?: string;
  }
@@ -180,11 +185,11 @@ export namespace Components {
  interface ElsaModalDialogContainer {
  }
  interface ElsaMonacoEditor {
+ "addJavaScriptLib": (libSource: string, libUri: string) => Promise<void>;
  "editorHeight": string;
  "language": string;
- "monacoLibPath"?: string;
  "padding": string;
- "setJavaScriptLibs": (libs: Array<MonacoLib>) => Promise<void>;
+ "setValue": (value: string) => Promise<void>;
  "singleLineMode": boolean;
  "value": string;
  }
@@ -879,10 +884,11 @@ declare namespace LocalJSX {
  }
  interface ElsaActivityPropertiesEditor {
  "activity"?: Activity;
+ "containerId"?: string;
+ "containerType"?: string;
  "onActivityUpdated"?: (event: ElsaActivityPropertiesEditorCustomEvent<ActivityUpdatedArgs>) => void;
  "onDeleteActivityRequested"?: (event: ElsaActivityPropertiesEditorCustomEvent<DeleteActivityRequestedArgs>) => void;
  "variables"?: Array<Variable>;
- "workflowDefinition"?: WorkflowDefinition;
  }
  interface ElsaActivityPublishButton {
  "onExportClicked"?: (event: ElsaActivityPublishButtonCustomEvent<any>) => void;
@@ -962,8 +968,11 @@ declare namespace LocalJSX {
  interface ElsaHomePage {
  }
  interface ElsaInputControlSwitch {
+ "activityType"?: string;
  "codeEditorHeight"?: string;
  "codeEditorSingleLineMode"?: boolean;
+ "containerId"?: string;
+ "containerType"?: string;
  "context"?: IntellisenseContext;
  "defaultSyntax"?: string;
  "expression"?: string;
@@ -974,6 +983,7 @@ declare namespace LocalJSX {
  "label"?: string;
  "onExpressionChanged"?: (event: ElsaInputControlSwitchCustomEvent<ExpressionChangedArs>) => void;
  "onSyntaxChanged"?: (event: ElsaInputControlSwitchCustomEvent<string>) => void;
+ "propertyName"?: string;
  "supportedSyntaxes"?: Array<string>;
  "syntax"?: string;
  }
@@ -1016,7 +1026,6 @@ declare namespace LocalJSX {
  interface ElsaMonacoEditor {
  "editorHeight"?: string;
  "language"?: string;
- "monacoLibPath"?: string;
  "onValueChanged"?: (event: ElsaMonacoEditorCustomEvent<MonacoValueChangedArgs>) => void;
  "padding"?: string;
  "singleLineMode"?: boolean;

diff --git a/...-workflows-designer/src/components/designer/input-control-switch/input-control-switch.tsx b/...-workflows-designer/src/components/designer/input-control-switch/input-control-switch.tsx
@@ -7,6 +7,9 @@ import {MonacoValueChangedArgs} from "../../shared/monaco-editor/monaco-editor";
 import {Hint} from "../../shared/forms/hint";
 import {mapSyntaxToLanguage} from "../../../utils";
 import descriptorsStore from "../../../data/descriptors-store";
+import {Container} from "typedi";
+import {ElsaClient, ElsaClientProvider} from "../../../services/api-client/elsa-client";
+import InputControlSwitchContextState from "./state";
 
 export interface ExpressionChangedArs {
  expression: string;
@@ -27,6 +30,12 @@ export class InputControlSwitch {
  this.onExpressionChangedDebounced = debounce(this.onExpressionChanged, 10);
  }
 
+ // Tunneled props.
+ @Prop() containerType: string;
+ @Prop() containerId: string;
+ @Prop() activityType: string;
+ @Prop() propertyName: string;
+
  @Prop() label: string;
  @Prop() hideLabel: boolean;
  @Prop() hint: string;
@@ -53,10 +62,21 @@ export class InputControlSwitch {
  this.closeContextMenu();
  }
 
- componentWillLoad() {
+ async componentWillLoad() {
  this.currentExpression = this.expression;
  }
 
+ async componentDidLoad() {
+ const elsaClient = await Container.get(ElsaClientProvider).getElsaClient();
+ const containerType = this.containerType;
+ const containerId = this.containerId;
+ const activityTypeName = this.activityType;
+ const propertyName = this.propertyName;
+ const typeDefinitions = await elsaClient.scripting.javaScriptApi.getTypeDefinitions({containerType, containerId, activityTypeName, propertyName});
+ const libUri = 'defaultLib:lib.es6.d.ts';
+ await this.monacoEditor.addJavaScriptLib(typeDefinitions, libUri);
+ }
+
  render() {
 
  if (this.hideLabel && !this.shouldRenderMonaco()) {
@@ -200,3 +220,5 @@ export class InputControlSwitch {
  this.expressionChanged.emit({expression, syntax: this.syntax});
  }
 }
+
+InputControlSwitchContextState.injectProps(InputControlSwitch, ['containerType', 'containerId', 'activityType', 'propertyName'])
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/input-control-switch/state.tsx b/src/designer/elsa-workflows-designer/src/components/designer/input-control-switch/state.tsx
@@ -0,0 +1,19 @@
+import {h} from "@stencil/core";
+import {createProviderConsumer} from "@stencil/state-tunnel";
+
+export interface InputControlSwitchContextState {
+ containerType: string;
+ containerId: string;
+ activityType: string;
+ propertyName: string;
+}
+
+export default createProviderConsumer<InputControlSwitchContextState>(
+ {
+ containerType: null,
+ containerId: null,
+ activityType: null,
+ propertyName: null
+ },
+ (subscribe, child) => (<context-consumer subscribe={subscribe} renderer={child}/>)
+);
diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/check-list.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/check-list.tsx
@@ -1,7 +1,7 @@
 import {Component, h, Prop, State} from '@stencil/core';
 import {uniq} from 'lodash'
 import {JsonExpression, LiteralExpression, SelectList, SyntaxNames} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getSelectListItems, getInputPropertyValue, parseJson} from "../../utils";
 import {ExpressionChangedArs} from "../designer/input-control-switch/input-control-switch";
 

diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/checkbox.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/checkbox.tsx
@@ -1,6 +1,6 @@
 import {Component, Prop, h, State} from '@stencil/core';
 import {LiteralExpression, SyntaxNames} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getInputPropertyValue } from "../../utils";
 import {ExpressionChangedArs} from "../designer/input-control-switch/input-control-switch";
 

diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/code-editor.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/code-editor.tsx
@@ -1,6 +1,6 @@
 import {Component, h, Prop} from '@stencil/core';
 import {EditorHeight, LiteralExpression, SyntaxNames} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getInputPropertyValue} from "../../utils";
 import {MonacoValueChangedArgs} from "../shared/monaco-editor/monaco-editor";
 import {ExpressionChangedArs} from "../designer/input-control-switch/input-control-switch";

diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/dropdown.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/dropdown.tsx
@@ -1,6 +1,6 @@
 import {Component, Prop, h} from '@stencil/core';
 import {LiteralExpression, SelectList, SyntaxNames} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getInputPropertyValue, getSelectListItems} from "../../utils";
 import {ExpressionChangedArs} from "../designer/input-control-switch/input-control-switch";
 

diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/multi-line.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/multi-line.tsx
@@ -1,6 +1,6 @@
 import {Component, Prop, h} from '@stencil/core';
 import {LiteralExpression, SyntaxNames} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getInputPropertyValue} from "../../utils";
 import {ExpressionChangedArs} from "../designer/input-control-switch/input-control-switch";
 

diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/multi-text.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/multi-text.tsx
@@ -1,6 +1,6 @@
 import {Component, Prop, h} from '@stencil/core';
 import {JsonExpression, LiteralExpression, SyntaxNames} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getInputPropertyValue, parseJson} from "../../utils";
 import {ExpressionChangedArs} from "../designer/input-control-switch/input-control-switch";
 

diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/radio-list.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/radio-list.tsx
@@ -1,6 +1,6 @@
 import {Component, h, Prop, State} from '@stencil/core';
 import {LiteralExpression, SelectList, SyntaxNames} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getSelectListItems, getInputPropertyValue} from "../../utils";
 import {ExpressionChangedArs} from "../designer/input-control-switch/input-control-switch";
 

diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/single-line.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/single-line.tsx
@@ -1,6 +1,6 @@
 import {Component, h, Prop} from '@stencil/core';
 import {LiteralExpression, SyntaxNames} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getInputPropertyValue} from "../../utils";
 import {ExpressionChangedArs} from "../designer/input-control-switch/input-control-switch";
 import descriptorsStore from "../../data/descriptors-store";

diff --git a/src/designer/elsa-workflows-designer/src/components/inputs/type-picker.tsx b/src/designer/elsa-workflows-designer/src/components/inputs/type-picker.tsx
@@ -1,7 +1,7 @@
 import {Component, Prop, h} from '@stencil/core';
 import {groupBy} from 'lodash';
 import {LiteralExpression, SyntaxNames} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getInputPropertyValue} from "../../utils";
 import descriptorsStore from '../../data/descriptors-store';
 import {VariableDescriptor} from "../../services/api-client/variable-descriptors-api";

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
@@ -1,9 +1,9 @@
 import {Component, Prop, h} from '@stencil/core';
 import {SyntaxNames, Variable} from "../../models";
-import {ActivityInputContext} from "../../services/node-input-driver";
+import {ActivityInputContext} from "../../services/activity-input-driver";
 import {getPropertyValue} from "../../utils";
 import {FormEntry} from "../shared/forms/form-entry";
-import WorkflowDefinitionTunnel from "../../state/workflow-definition-state";
+import WorkflowDefinitionTunnel from "../../modules/workflow-definitions/state";
 
 @Component({
  tag: 'elsa-variable-picker-input',