Added user input tracking + Started error management for in the Designer

src/components/workflows/Readme.md

@@ -4,9 +4,10 @@
 
 using `_id={WORKFLOW_DESIGNER_INSTANCE_ID}{session['user_id']}{get_unique_id()}`
 
-| Name       | value          |
-|------------|----------------|
-| Canvas     | `c_{self._id}` |
-| Designer   | `d_{self._id}` |
-| Properties | `p_{self._id}` |
-| Spliter    | `s_{self._id}` |
+| Name          | value            |
+|---------------|------------------|
+| Canvas        | `c_{self._id}`   |
+| Designer      | `d_{self._id}`   |
+| Error Message | `err_{self._id}` |
+| Properties    | `p_{self._id}`   |
+| Spliter       | `s_{self._id}`   |

src/components/workflows/components/WorkflowDesigner.py

@@ -4,6 +4,7 @@ from fastcore.basics import NotStr
 from fasthtml.components import *
 from fasthtml.xtend import Script
 
+from assets.icons import icon_error
 from components.BaseComponent import BaseComponent
 from components.workflows.assets.icons import icon_play, icon_pause, icon_stop
 from components.workflows.commands import WorkflowDesignerCommandManager
@@ -63,6 +64,7 @@ class WorkflowDesigner(BaseComponent):
     self._state = self._db.load_state(key)
     self._boundaries = boundaries
     self.commands = WorkflowDesignerCommandManager(self)
+    self._error_message = None
   
   def set_boundaries(self, boundaries: dict):
     self._boundaries = boundaries
@@ -187,11 +189,13 @@ class WorkflowDesigner(BaseComponent):
                                  player_settings=WorkflowsPlayerSettings(workflow_name,
                                                                          list(self._state.components.values())),
                                  boundaries=boundaries)
+    try:
+      player.run()
+      self.tabs_manager.add_tab(f"Workflow {workflow_name}", player, player.key)
+      return self.tabs_manager.refresh()
     
-    player.run()
-    
-    self.tabs_manager.add_tab(f"Workflow {workflow_name}", player, player.key)
-    return self.tabs_manager.refresh()
+    except Exception as e:
+      return self.error_message(str(e))
   
   def on_processor_details_event(self, component_id: str, event_name: str, details: dict):
     if component_id in self._state.components:
@@ -203,11 +207,19 @@ class WorkflowDesigner(BaseComponent):
     
     return self.refresh_properties()
   
+  def error_message(self, message: str):
+    self._error_message = message
+    return self.tabs_manager.refresh()
+  
   def __ft__(self):
     return Div(
       H1(f"{self._designer_settings.workflow_name}", cls="text-xl font-bold"),
       P("Drag components from the toolbox to the canvas to create your workflow.", cls="text-sm mb-6"),
-      self._mk_media(),
+      Div(
+        self._mk_media(),
+        self._mk_error_message(),
+        cls="flex mb-2"
+      ),
       self._mk_designer(),
       Div(cls="wkf-splitter", id=f"s_{self._id}"),
       self._mk_properties(),
@@ -292,6 +304,18 @@ class WorkflowDesigner(BaseComponent):
       cls=f"media-controls flex m-2"
     )
   
+  def _mk_error_message(self):
+    if not self._error_message:
+      return Div()
+    
+    return Div(
+      mk_icon(icon_error),
+      Span(self._error_message, cls="text-sm"),
+      role="alert",
+      cls="alert alert-error alert-outline p-1!",
+      hx_swap_oob='true',
+    )
+  
   def _mk_processor_properties(self, component, processor_name):
     if processor_name == "Jira":
       return self._mk_jira_processor_details(component)
@@ -304,7 +328,7 @@ class WorkflowDesigner(BaseComponent):
     
     return Div('Not defined yet !')
   
-  def _mk_properties_details(self):
+  def _mk_properties_details(self, component_id, allow_component_selection=False):
     def _mk_header():
       return Div(
         Div(
@@ -326,7 +350,7 @@ class WorkflowDesigner(BaseComponent):
         **self.commands.select_processor(component_id)
       )
     
-    if self._state.selected_component_id is None or self._state.selected_component_id not in self._state.components:
+    if component_id is None or component_id not in self._state.components and not allow_component_selection:
       return None
     else:
       component_id = self._state.selected_component_id
@@ -334,19 +358,23 @@ class WorkflowDesigner(BaseComponent):
       selected_processor_name = component.properties["processor_name"]
       icon = COMPONENT_TYPES[component.type]["icon"]
       color = COMPONENT_TYPES[component.type]["color"]
-      return Form(
-        _mk_header(),
-        _mk_select(),
-        self._mk_processor_properties(component, selected_processor_name),
-        mk_dialog_buttons(cls="mt-4",
-                          on_ok=self.commands.save_properties(component_id),
-                          on_cancel=self.commands.cancel_properties(component_id)),
-        cls="font-mono text-sm",
+      return Div(
+        Form(
+          _mk_header(),
+          _mk_select(),
+          self._mk_processor_properties(component, selected_processor_name),
+          mk_dialog_buttons(cls="mt-4",
+                            on_ok=self.commands.save_properties(component_id),
+                            on_cancel=self.commands.cancel_properties(component_id)),
+          cls="font-mono text-sm",
+          id=f"f_{self._id}_{component_id}",
+        ),
+        Script(f"bindFormData('f_{self._id}_{component_id}');")
       )
   
   def _mk_properties(self):
     return Div(
-      self._mk_properties_details(),
+      self._mk_properties_details(self._state.selected_component_id),
       cls="p-2 bg-base-100 rounded-lg border",
       style=f"height:{self._get_properties_height()}px;",
       id=f"p_{self._id}",