Add property-display-manager service to ElsaStudio model

src/designer/elsa-workflows-studio/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsa-workflows/elsa-workflows-studio",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

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

@@ -166,6 +166,7 @@ export namespace Components {
         "culture": string;
     }
     interface ElsaStudioRoot {
+        "addPlugin": (pluginType: any) => Promise<void>;
         "addPlugins": (pluginTypes: Array<any>) => Promise<void>;
         "basePath": string;
         "culture": string;

src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx

@@ -1,10 +1,11 @@
 import {Component, Event, EventEmitter, h, Method, Prop} from '@stencil/core';
 import Tunnel, {DashboardState} from "../../../../data/dashboard";
 import {ElsaStudio} from "../../../../models";
-import {eventBus, pluginManager, activityIconProvider, confirmDialogService, toastNotificationService, createElsaClient, createHttpClient, ElsaClient} from "../../../../services";
+import {eventBus, pluginManager, activityIconProvider, confirmDialogService, toastNotificationService, createElsaClient, createHttpClient, ElsaClient, propertyDisplayManager} from "../../../../services";
 import {AxiosInstance} from "axios";
 import {EventTypes} from "../../../../models";
 import {ToastNotificationOptions} from "../../../shared/elsa-toast-notification/elsa-toast-notification";
+import {getOrCreateProperty} from "../../../../utils/utils";
 
 @Component({
   tag: 'elsa-studio-root',
@@ -26,6 +27,11 @@ export class ElsaStudioRoot {
     pluginManager.registerPlugins(pluginTypes);
   }
 
+  @Method()
+  async addPlugin(pluginType: any) {
+    pluginManager.registerPlugin(pluginType);
+  }
+
   connectedCallback() {
     eventBus.on(EventTypes.ShowConfirmDialog, e => e.promise = this.confirmDialog.show(e.caption, e.message));
     eventBus.on(EventTypes.HideConfirmDialog, () => this.confirmDialog.hide());
@@ -50,15 +56,18 @@ export class ElsaStudioRoot {
       basePath: this.basePath,
       eventBus,
       pluginManager,
+      propertyDisplayManager,
       activityIconProvider,
       confirmDialogService,
       toastNotificationService,
       elsaClientFactory,
-      httpClientFactory
+      httpClientFactory,
+      getOrCreateProperty: getOrCreateProperty 
     };
 
     this.initializing.emit(elsaStudio);
     pluginManager.initialize(elsaStudio);
+    propertyDisplayManager.initialize(elsaStudio);
   }
 
   render() {

src/designer/elsa-workflows-studio/src/index.html

@@ -79,6 +79,22 @@
             });
         });
     }
+    
+    // Custom activity property type input control driver:
+    function CustomPropertyFieldDriver(elsaStudio){
+        this.display = (activity, property) => {
+            const prop = elsaStudio.getOrCreateProperty(activity, property.name);
+            return `<input type="text" className="disabled:elsa-opacity-50 disabled:elsa-cursor-not-allowed focus:elsa-ring-blue-500 focus:elsa-border-blue-500 elsa-block elsa-w-full elsa-min-w-0 elsa-rounded-md sm:elsa-text-sm elsa-border-gray-300"`;
+        };
+    }
+
+    // Custom activity property type input control plugin:
+    function CustomPropertyFieldPlugin(elsaStudio) {
+        const {propertyDisplayManager} = elsaStudio;
+
+        // Register custom driver.
+        propertyDisplayManager.addDriver('my-custom-property-type', CustomPropertyFieldDriver);
+    }
 
     // Get a handle to the elsa-studio-root element.
     const elsaStudioRoot = document.querySelector('elsa-studio-root');
@@ -89,7 +105,7 @@
         await customElements.whenDefined('elsa-studio-root');
 
         // Install plugins.
-        await elsaStudioRoot.addPlugins([CustomReadLinePlugin, CustomBulkActionsPlugin, CustomHttpMiddlewarePlugin]);
+        await elsaStudioRoot.addPlugins([CustomReadLinePlugin, CustomBulkActionsPlugin, CustomHttpMiddlewarePlugin, CustomPropertyFieldPlugin]);
     })();
 
     // Alternatively, configure Elsa during the 'initializing' event.

src/designer/elsa-workflows-studio/src/models/services.ts

@@ -1,17 +1,20 @@
-import {PluginManager, ActivityIconProvider, ConfirmDialogService} from "../services";
-import {ElsaClient} from "../services/elsa-client";
+import {PluginManager, ActivityIconProvider, ConfirmDialogService, propertyDisplayManager, PropertyDisplayManager} from "../services";
+import {ElsaClient, ToastNotificationService} from "../services";
 import EventBus from "js-event-bus";
 import {AxiosInstance} from "axios";
-import {ToastNotificationService} from "../services/toast-notification-service";
+import {ActivityDefinitionProperty} from "./domain";
+import {ActivityModel} from "./view";
 
 export interface ElsaStudio {
   serverUrl: string;
   basePath: string;
   pluginManager: PluginManager;
+  propertyDisplayManager: PropertyDisplayManager;
   elsaClientFactory: () => ElsaClient;
   httpClientFactory: () => AxiosInstance;
   eventBus: EventBus;
   activityIconProvider: ActivityIconProvider;
   confirmDialogService: ConfirmDialogService;
   toastNotificationService: ToastNotificationService;
+  getOrCreateProperty: (activity: ActivityModel, name: string, defaultExpression?: () => string, defaultSyntax?: () => string) => ActivityDefinitionProperty
 }

src/designer/elsa-workflows-studio/src/services/property-display-manager.ts

@@ -1,4 +1,4 @@
-import {ActivityModel, ActivityPropertyDescriptor} from "../models/";
+import {ActivityModel, ActivityPropertyDescriptor, ElsaStudio} from "../models/";
 import {PropertyDisplayDriver} from "./property-display-driver";
 import {NullPropertyDriver } from "../drivers";
 import {Map} from '../utils/utils';
@@ -7,8 +7,18 @@ export type PropertyDisplayDriverMap = Map<() => PropertyDisplayDriver>;
 
 export class PropertyDisplayManager {
 
+  elsaStudio: ElsaStudio;
+  initialized: boolean;
   drivers: PropertyDisplayDriverMap = {};
 
+  initialize(elsaStudio: ElsaStudio) {
+    if (this.initialized)
+      return;
+
+    this.elsaStudio = elsaStudio;
+    this.initialized = true;
+  }
+
   addDriver<T extends PropertyDisplayDriver>(controlType: string, driver: T) {
     this.drivers[controlType] = () => driver;
   }
@@ -24,8 +34,8 @@ export class PropertyDisplayManager {
   }
 
   getDriver(type: string) {
-    const driverFactory = this.drivers[type] || (() => new NullPropertyDriver());
-    return driverFactory();
+    const driverFactory = this.drivers[type] || ((_: ElsaStudio) => new NullPropertyDriver());
+    return driverFactory(this.elsaStudio);
   }
 }
 

src/designer/elsa-workflows-studio/tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
     enabled: !dev,
     content: ['./src/**/*.tsx', './src/**/*.html'],
     options: {
-      safelist: ['hidden', 'jtk-connector', 'rose', 'sky', /gray/, /pink/, /blue/, /green/, /red/, /yellow/, /rose/]
+      safelist: ['hidden', 'jtk-connector', 'rose', 'sky', /gray/, /pink/, /blue/, /green/, /red/, /yellow/, /rose/, 'label-container', 'node', 'start', 'activity']
     },
   },
   prefix: 'elsa-',