Display ghost relations properly in date picker tabs

app/components/work_package_relations_tab/relation_component.rb

@@ -4,6 +4,13 @@ class WorkPackageRelationsTab::RelationComponent < ApplicationComponent
 
   attr_reader :work_package, :relation, :visibility, :child, :editable
 
+  # Checks if the relation or child work package is visible to the current user
+  #
+  # @param work_package [WorkPackage] The work package whose relations are being displayed
+  # @param relation [Relation, nil] The relation between work packages, if any
+  # @param visibility [Symbol] The visibility status of the relation (:visible or :ghost)
+  # @param child [WorkPackage, nil] The child work package, if this is a parent-child relationship
+  # @param editable [Boolean] Whether the relation can be edited
   def initialize(work_package:,
                  relation:,
                  visibility:,

app/components/work_package_relations_tab/relations_mediator.rb

@@ -29,7 +29,19 @@
 #++
 
 class WorkPackageRelationsTab::RelationsMediator
-  RelationGroup = Data.define(:type, :visible_relations, :ghost_relations)
+  RelationGroup = Data.define(:type, :visible_relations, :ghost_relations) do
+    def count
+      visible_relations.count + ghost_relations.count
+    end
+
+    def any?
+      visible_relations.any? || ghost_relations.any?
+    end
+
+    def children_type?
+      type == "children"
+    end
+  end
 
   attr_reader :work_package
 
@@ -59,8 +71,20 @@ def directionally_aware_grouped_relations
 
     # Group visible and invisible relations by type
     all_relation_types.map do |type|
+      relation_group(type)
+    end
+  end
+
+  def relation_group(type)
+    if type == "children"
+      RelationGroup.new(
+        type:,
+        visible_relations: visible_children,
+        ghost_relations: ghost_children
+      )
+    else
       RelationGroup.new(
-        type: type,
+        type:,
         visible_relations: filter_relations_by_type(visible_relations, type),
         ghost_relations: filter_relations_by_type(ghost_relations, type)
       )

app/components/work_packages/date_picker/dialog_content_component.html.erb

@@ -25,26 +25,37 @@
             end
 
             additional_tabs.each do |tab|
-              component.with_tab(id: "wp-datepicker-dialog--content-tab--#{tab[:key]}") do |tab_content|
-                tab_content.with_text { I18n.t("work_packages.datepicker_modal.tabs.#{tab[:key]}") }
-                tab_content.with_counter(count: tab[:relations].count)
+              component.with_tab(id: "wp-datepicker-dialog--content-tab--#{tab.key}") do |tab_content|
+                relation_group = tab.relation_group
+                tab_content.with_text { I18n.t("work_packages.datepicker_modal.tabs.#{tab.key}") }
+                tab_content.with_counter(count: relation_group.count)
                 tab_content.with_panel do
-                  if tab[:relations].any?
+                  if relation_group.any?
                     render(border_box_container(padding: :condensed)) do |box|
-                      tab[:relations].visible.each do |relation|
+                      relation_group.visible_relations.each do |relation|
                         box.with_row(scheme: :default) do
                           render(WorkPackageRelationsTab::RelationComponent.new(work_package:,
-                                                                                relation: (relation unless tab[:is_child_relation?]),
-                                                                                child: (relation if tab[:is_child_relation?]),
+                                                                                relation: (relation unless relation_group.children_type?),
+                                                                                visibility: :visible,
+                                                                                child: (relation if relation_group.children_type?),
+                                                                                editable: false))
+                        end
+                      end
+                      relation_group.ghost_relations.each do |relation|
+                        box.with_row(scheme: :default) do
+                          render(WorkPackageRelationsTab::RelationComponent.new(work_package:,
+                                                                                relation: (relation unless relation_group.children_type?),
+                                                                                visibility: :ghost,
+                                                                                child: (relation if relation_group.children_type?),
                                                                                 editable: false))
                         end
                       end
                     end
                   else
                     render(Primer::Beta::Blankslate.new(border: true)) do |component|
                       component.with_visual_icon(icon: :book, size: :medium)
-                      component.with_heading(tag: :h2) { I18n.t("work_packages.datepicker_modal.tabs.blankslate.#{tab[:key]}.title") }
-                      component.with_description { I18n.t("work_packages.datepicker_modal.tabs.blankslate.#{tab[:key]}.description") }
+                      component.with_heading(tag: :h2) { I18n.t("work_packages.datepicker_modal.tabs.blankslate.#{tab.key}.title") }
+                      component.with_description { I18n.t("work_packages.datepicker_modal.tabs.blankslate.#{tab.key}.description") }
                     end
                   end
                 end

app/components/work_packages/date_picker/dialog_content_component.rb

@@ -36,6 +36,9 @@ class DialogContentComponent < ApplicationComponent
 
       DIALOG_FORM_ID = "datepicker-form"
 
+      # Used for the three tabs for predecessors, successors and children in the date picker modal.
+      Tab = Data.define(:key, :relation_group)
+
       attr_accessor :work_package, :schedule_manually, :focused_field, :touched_field_map
 
       def initialize(work_package:, schedule_manually: true, focused_field: :start_date, touched_field_map: {})
@@ -62,20 +65,11 @@ def children
       end
 
       def additional_tabs
+        mediator = WorkPackageRelationsTab::RelationsMediator.new(work_package:)
         [
-          {
-            key: "predecessors",
-            relations: follows_relations
-          },
-          {
-            key: "successors",
-            relations: precedes_relations
-          },
-          {
-            key: "children",
-            relations: children,
-            is_child_relation?: true
-          }
+          Tab.new("predecessors", mediator.relation_group("follows")),
+          Tab.new("successors", mediator.relation_group("precedes")),
+          Tab.new("children", mediator.relation_group("children"))
         ]
       end