Show and edit the Lag for follows/precedes relationships

app/components/work_package_relations_tab/relation_component.html.erb

@@ -60,20 +60,46 @@ flex_layout do |flex|
     end
   end
 
-  if should_display_start_and_end_dates?
-    flex.with_row(flex_layout: true, align_items: :center) do |start_and_end_dates_row|
-      start_and_end_dates_row.with_column(mr: 1) do
-        icon = if follows?
-                 :calendar
-               elsif precedes?
-                 :pin
-               end
+  if should_display_dates_row?
+    flex.with_row(flex_layout: true, align_items: :center, color: :muted) do |dates_row|
+      if precedes? && lag_present?
+        dates_row.with_column(mr: 1) do
+          render(Primer::Beta::Octicon.new(icon: "arrow-both"))
+        end
+        dates_row.with_column(mr: 3) do
+          render(Primer::Beta::Text.new) do
+            "#{I18n.t("work_package_relations_tab.lag.title")}: #{I18n.t('datetime.distance_in_words.x_days',
+                                                                         count: relation.lag)}"
+          end
+        end
+      end
+
+      if related_work_package.start_date.present? || related_work_package.due_date.present?
+        dates_row.with_column(mr: 1) do
+          icon = if follows?
+                   :calendar
+                 elsif precedes?
+                   :pin
+                 end
 
-        render(Primer::Beta::Octicon.new(icon:, color: :muted))
+          render(Primer::Beta::Octicon.new(icon:))
+        end
+        dates_row.with_column do
+          render(Primer::Beta::Text.new) do
+            "#{format_date(related_work_package.start_date)} - #{format_date(related_work_package.due_date)}"
+          end
+        end
       end
-      start_and_end_dates_row.with_column do
-        render(Primer::Beta::Text.new(color: :muted)) do
-          "#{format_date(related_work_package.start_date)} - #{format_date(related_work_package.due_date)}"
+
+      if follows? && lag_present?
+        dates_row.with_column(ml: 3, mr: 1) do
+          render(Primer::Beta::Octicon.new(icon: "arrow-both"))
+        end
+        dates_row.with_column(mr: 1) do
+          render(Primer::Beta::Text.new) do
+            "#{I18n.t("work_package_relations_tab.lag.title")}: #{I18n.t('datetime.distance_in_words.x_days',
+                                                                         count: relation.lag)}"
+          end
         end
       end
     end

app/components/work_package_relations_tab/relation_component.rb

@@ -61,7 +61,11 @@ def should_display_description?
     relation.description.present?
   end
 
-  def should_display_start_and_end_dates?
+  def lag_present?
+    relation.lag.present?
+  end
+
+  def should_display_dates_row?
     return false if parent_child_relationship?
 
     relation.follows? || relation.precedes?

app/components/work_package_relations_tab/work_package_relation_form_component.html.erb

@@ -19,6 +19,7 @@
           # These are not available inside the render_inline_form block
           # so we need to re-define them here. Figure out solution for this.
           relation = @relation
+          lag_shown = show_lag?
           to_id_field_value = relation.to.present? ? "#{related_work_package.type.name.upcase} ##{related_work_package.id} - #{related_work_package.subject}" : nil
           url = ::API::V3::Utilities::PathHelper::ApiV3Path.work_package_available_relation_candidates(@work_package.id, type: relation.relation_type_for(@work_package))
           render_inline_form(f) do |my_form|
@@ -57,6 +58,15 @@
               name: :description,
               label: Relation.human_attribute_name(:description),
             )
+
+            if lag_shown
+              my_form.text_field(
+                name: :lag,
+                label: Relation.human_attribute_name(:lag),
+                caption: I18n.t("work_package_relations_tab.lag.caption"),
+                input_width: :small,
+              )
+            end
           end
         end
       end %>

app/components/work_package_relations_tab/work_package_relation_form_component.rb

@@ -59,4 +59,8 @@ def submit_url_options
         url: work_package_relations_path(@work_package) }
     end
   end
+
+  def show_lag?
+    @relation.relation_type == Relation::TYPE_PRECEDES || @relation.relation_type == Relation::TYPE_FOLLOWS
+  end
 end

app/controllers/work_package_relations_controller.rb

@@ -121,12 +121,12 @@ def set_relation
 
   def create_relation_params
     params.require(:relation)
-          .permit(:relation_type, :to_id, :description)
+          .permit(:relation_type, :to_id, :description, :lag)
           .merge(from_id: @work_package.id)
   end
 
   def update_relation_params
     params.require(:relation)
-          .permit(:description)
+          .permit(:description, :lag)
   end
 end

config/locales/en.yml

@@ -716,6 +716,9 @@ en:
     label_add_x: "Add %{x}"
     label_edit_x: "Edit %{x}"
     label_add_description: "Add description"
+    lag:
+      title: "Lag"
+      caption: "The gap in number of working days in between the two work packages"
     relations:
       label_relates_singular: "related to"
       label_relates_plural: "related to"