Refactoring Properties component

src/components/workflows/components/WorkflowDesigner.py

@@ -9,10 +9,11 @@ from components.BaseComponent import BaseComponent
 from components.undo_redo.constants import UndoRedoAttrs
 from components.workflows.assets.icons import icon_play, icon_pause, icon_stop, icon_refresh
 from components.workflows.commands import WorkflowDesignerCommandManager
+from components.workflows.components.WorkflowDesignerProperties import WorkflowDesignerProperties
 from components.workflows.components.WorkflowPlayer import WorkflowPlayer
 from components.workflows.constants import WORKFLOW_DESIGNER_INSTANCE_ID, ProcessorTypes
 from components.workflows.db_management import WorkflowsDesignerSettings, WorkflowComponent, \
-  Connection, WorkflowsDesignerDbManager, ComponentState
+  Connection, WorkflowsDesignerDbManager, ComponentState, WorkflowsDesignerState
 from components_helpers import apply_boundaries, mk_tooltip, mk_dialog_buttons, mk_icon
 from core.instance_manager import InstanceManager
 from core.jira import JiraRequestTypes, DEFAULT_SEARCH_FIELDS
@@ -65,9 +66,10 @@ class WorkflowDesigner(BaseComponent):
     self._designer_settings = designer_settings
     self._db = WorkflowsDesignerDbManager(session, settings_manager)
     self._undo_redo = ComponentsInstancesHelper.get_undo_redo(session)
-    self._state = self._db.load_state(key)
+    self._state: WorkflowsDesignerState = self._db.load_state(key)
     self._boundaries = boundaries
     self.commands = WorkflowDesignerCommandManager(self)
+    self.properties = WorkflowDesignerProperties(self._session, f"{self._id}", self)
     
     workflow_name = self._designer_settings.workflow_name
     self._player = InstanceManager.get(self._session,
@@ -83,7 +85,10 @@ class WorkflowDesigner(BaseComponent):
   def set_boundaries(self, boundaries: dict):
     self._boundaries = boundaries
   
-  def get_state(self):
+  def get_boundaries(self):
+    return self._boundaries
+  
+  def get_state(self) -> WorkflowsDesignerState:
     return self._state
   
   def get_db(self):
@@ -106,6 +111,7 @@ class WorkflowDesigner(BaseComponent):
   
   def refresh_state(self):
     self._state = self._db.load_state(self._key)
+    self.properties.update_layout()
     return self.__ft__(oob=True)
   
   def add_component(self, component_type, x, y):
@@ -140,7 +146,7 @@ class WorkflowDesigner(BaseComponent):
       undo_redo_attrs = UndoRedoAttrs(f"Move Component '{component.title}'", on_undo=self.refresh_state)
       self._db.save_state(self._key, self._state, undo_redo_attrs)  # update db
     
-    return self.refresh_designer(), self.refresh_properties(True), self._undo_redo.refresh()
+    return self.refresh_designer(), self.properties.refresh(), self._undo_redo.refresh()
   
   def delete_component(self, component_id):
     # Remove component
@@ -192,6 +198,16 @@ class WorkflowDesigner(BaseComponent):
     self._db.save_state(self._key, self._state, undo_redo_attrs)
     return self.__ft__(), self._undo_redo.refresh()  # refresh the whole component
   
+  def update_properties_layout(self, input_width, properties_width, output_width):
+    self._state.properties_input_width = input_width
+    self._state.properties_properties_width = properties_width
+    self._state.properties_output_width = output_width
+    self.properties.update_layout()
+    
+    undo_redo_attrs = UndoRedoAttrs(f"Resize Properties", on_undo=lambda: self.refresh_state())
+    self._db.save_state(self._key, self._state, undo_redo_attrs)
+    return self.__ft__(), self._undo_redo.refresh()  # refresh the whole component
+  
   def select_component(self, component_id):
     if component_id in self._state.components:
       self._state.selected_component_id = component_id
@@ -273,7 +289,7 @@ class WorkflowDesigner(BaseComponent):
   def __ft__(self, oob=False):
     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"),
+      # P("Drag components from the toolbox to the canvas to create your workflow.", cls="text-sm"),
       Div(
         self._mk_media(),
         # self._mk_refresh_button(),
@@ -365,6 +381,11 @@ class WorkflowDesigner(BaseComponent):
     )
   
   def _mk_elements(self):
+    if len(self._state.components) == 0:
+      return Div("Drag components from the toolbox to the canvas to create your workflow.",
+                 cls="flex items-center justify-center h-full w-full"
+                 )
+    
     return Div(
       # Render connections
       *[NotStr(self._mk_connection_svg(conn)) for conn in self._state.connections],
@@ -436,6 +457,17 @@ class WorkflowDesigner(BaseComponent):
     
     return Div('Not defined yet !')
   
+  def _mk_properties_output(self, component):
+    return Div(
+      "Output name",
+      Input(type="input",
+            name="output_name",
+            placeholder="data",
+            value=component.properties.get("output_name", None),
+            cls="input w-xs"),
+      cls="join"
+    )
+  
   def _mk_properties_details(self, component_id, allow_component_selection=False):
     def _mk_header():
       return Div(
@@ -469,11 +501,32 @@ class WorkflowDesigner(BaseComponent):
       return Div(
         Form(
           _mk_header(),
-          _mk_select(),
-          self._mk_processor_properties(component, selected_processor_name),
+          Div(
+            Input(type="radio", name=f"pt_{self._id}", cls="tab", aria_label="Properties", checked="checked"),
+            Div(
+              _mk_select(),
+              self._mk_processor_properties(component, selected_processor_name),
+              cls="tab-content"
+            ),
+            
+            Input(type="radio", name=f"pt_{self._id}", cls="tab", aria_label="Inputs"),
+            Div(
+              "Inputs",
+              cls="tab-content"
+            ),
+            
+            Input(type="radio", name=f"pt_{self._id}", cls="tab", aria_label="Output"),
+            Div(
+              self._mk_properties_output(component),
+              cls="tab-content"
+            ),
+            
+            cls="tabs tabs-border"
+          ),
           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}",
         ),
@@ -481,13 +534,7 @@ class WorkflowDesigner(BaseComponent):
       )
   
   def _mk_properties(self, oob=False):
-    return Div(
-      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;",
-      hx_swap_oob='true' if oob else None,
-      id=f"p_{self._id}",
-    )
+    return self.properties
   
   def _mk_jira_processor_details(self, component):
     def _mk_option(name):