Start on using Primer components inside the datepicker modal

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

@@ -0,0 +1,11 @@
+<%=
+  content_tag("turbo-frame", id: "wp-datepicker-dialog--content") do
+    render(Primer::Alpha::Banner.new(scheme: banner_scheme,
+                                     full: true,
+                                     icon: :info,
+                                     description: banner_description)) do |banner|
+      banner.with_action_button(href: "/todo") { I18n.t("js.work_packages.datepicker_modal.show_relations") }
+      banner_title
+    end
+  end
+%>

app/components/work_packages/date_picker/dialog_content_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module WorkPackages
+  module DatePicker
+    class DialogContentComponent < ApplicationComponent
+      include OpPrimer::ComponentHelpers
+
+      def initialize(work_package:)
+        super
+
+        @work_package = work_package
+      end
+
+      private
+
+      def manually_scheduled?
+        @work_package.schedule_manually
+      end
+
+      def banner_scheme
+        manually_scheduled? ? :warning : :default
+      end
+
+      def banner_title
+        if manually_scheduled?
+          I18n.t("js.work_packages.datepicker_modal.banner.title.manually_scheduled")
+        elsif children.any?
+          I18n.t("js.work_packages.datepicker_modal.banner.title.automatic_with_children")
+        elsif predecessor_relations.any?
+          I18n.t("js.work_packages.datepicker_modal.banner.title.automatic_with_predecessor")
+        end
+      end
+
+      def banner_description
+        if manually_scheduled?
+          if children.any?
+            return I18n.t("js.work_packages.datepicker_modal.banner.description.manual_with_children")
+          elsif predecessor_relations.any?
+            if overlapping_predecessor?
+              return I18n.t("js.work_packages.datepicker_modal.banner.description.manual_overlap_with_predecessors")
+            elsif predecessor_with_large_gap?
+              return I18n.t("js.work_packages.datepicker_modal.banner.description.manual_gap_between_predecessors")
+            end
+          end
+        end
+
+        I18n.t("js.work_packages.datepicker_modal.banner.description.click_on_show_relations_to_open_gantt",
+               button_name: I18n.t("js.work_packages.datepicker_modal.show_relations"))
+      end
+
+      def overlapping_predecessor?
+        predecessor_work_packages.any? { |wp| wp.due_date.after?(@work_package.start_date) }
+      end
+
+      def predecessor_with_large_gap?
+        sorted = predecessor_work_packages.sort_by(&:due_date)
+        sorted.last.due_date.before?(@work_package.start_date - 2)
+      end
+
+      def predecessor_relations
+        @predecessor_relations ||= @work_package.follows_relations
+      end
+
+      def predecessor_work_packages
+        @predecessor_work_packages ||= predecessor_relations
+                                         .includes(:to)
+                                         .map(&:to)
+      end
+
+      def children
+        @children ||= @work_package.children
+      end
+    end
+  end
+end

app/controllers/work_packages_controller.rb

@@ -38,12 +38,13 @@ class WorkPackagesController < ApplicationController
 
   before_action :authorize_on_work_package,
                 :project, only: %i[show generate_pdf_dialog generate_pdf]
+  before_action :authorize_on_work_package, only: %i[datepicker_dialog_content]
   before_action :load_and_authorize_in_optional_project,
                 :check_allowed_export,
                 :protect_from_unauthorized_export, only: %i[index export_dialog]
 
   before_action :authorize, only: :show_conflict_flash_message
-  authorization_checked! :index, :show, :export_dialog, :generate_pdf_dialog, :generate_pdf
+  authorization_checked! :index, :show, :export_dialog, :generate_pdf_dialog, :generate_pdf, :datepicker_dialog_content
 
   before_action :load_and_validate_query, only: :index, unless: -> { request.format.html? }
   before_action :load_work_packages, only: :index, if: -> { request.format.atom? }
@@ -106,6 +107,13 @@ def generate_pdf
     redirect_back(fallback_location: work_package_path(work_package))
   end
 
+  def datepicker_dialog_content
+    render(
+      WorkPackages::DatePicker::DialogContentComponent.new(work_package:),
+      layout: false
+    )
+  end
+
   def show_conflict_flash_message
     scheme = params[:scheme]&.to_sym || :danger
 

config/locales/js-en.yml

@@ -984,11 +984,16 @@ en:
       comment_updated: "The comment was successfully updated."
       confirm_edit_cancel: "Are you sure you want to cancel editing the work package?"
       datepicker_modal:
-        automatically_scheduled_parent: "Automatically scheduled. Dates are derived from relations."
-        manually_scheduled: "Manual scheduling enabled, all relations ignored."
-        start_date_limited_by_relations: "Available start and finish dates are limited by relations."
-        changing_dates_affects_follow_relations: "Changing these dates will affect dates of related work packages."
-        click_on_show_relations_to_open_gantt: 'Click on "%{button_name}" for GANTT overview.'
+        banner:
+          title:
+            manually_scheduled: "Manually scheduled. Dates not affected by relations."
+            automatic_with_predecessor: "The start date is set by a predecessor."
+            automatic_with_children: "The dates are determined by child work packages."
+          description:
+            click_on_show_relations_to_open_gantt: 'Click on "%{button_name}" for Gantt overview.'
+            manual_gap_between_predecessors: "There is a gap between this and all predecessors."
+            manual_overlap_with_predecessors: "Overlaps with at least one predecessor."
+            manual_with_children: "This has child work package but their start dates are ignored."
         show_relations: "Show relations"
         ignore_non_working_days:
           title: "Working days only"

config/routes.rb

@@ -612,6 +612,7 @@
 
     get "/export_dialog" => "work_packages#export_dialog", on: :collection, as: "export_dialog"
     get :show_conflict_flash_message, on: :collection # we don't need a specific work package for this
+    get "/datepicker_dialog_content" => "work_packages#datepicker_dialog_content", on: :member, as: "datepicker_dialog_content"
 
     get "/split_view/update_counter" => "work_packages/split_view#update_counter",
         on: :member

frontend/src/app/core/path-helper/path-helper.service.ts

@@ -300,6 +300,10 @@ export class PathHelperService {
     return `${this.workPackagePath(workPackageId)}/split_view/update_counter?counter=${counter}`;
   }
 
+  public workPackageDatepickerDialogContentPath(workPackageId:string|number) {
+    return `${this.workPackagePath(workPackageId)}/datepicker_dialog_content`;
+  }
+
   // Work Package Bulk paths
 
   public workPackagesBulkEditPath() {

frontend/src/app/shared/components/datepicker/datepicker.module.ts

@@ -17,6 +17,7 @@ import { OpBasicDatePickerModule } from './basic-datepicker.module';
 import { OpSpotModule } from 'core-app/spot/spot.module';
 import { OpenprojectModalModule } from '../modal/modal.module';
 import { OpDatePickerSheetComponent } from 'core-app/shared/components/datepicker/sheet/date-picker-sheet.component';
+import { OpenprojectContentLoaderModule } from 'core-app/shared/components/op-content-loader/openproject-content-loader.module';
 
 @NgModule({
   imports: [
@@ -27,6 +28,7 @@ import { OpDatePickerSheetComponent } from 'core-app/shared/components/datepicke
     OpSpotModule,
     OpBasicDatePickerModule,
     OpenprojectModalModule,
+    OpenprojectContentLoaderModule,
   ],
 
   providers: [

frontend/src/app/shared/components/datepicker/wp-multi-date-form/wp-multi-date-form.component.html

@@ -7,10 +7,19 @@
   tabindex="0"
   (submit)="doSave($event)"
 >
-  <op-datepicker-banner
-    [scheduleManually]="scheduleManually"
-    class="op-datepicker-modal--banner"
-  ></op-datepicker-banner>
+  <turbo-frame *ngIf="turboFrameSrc"
+               [src]="turboFrameSrc"
+               id="wp-datepicker-dialog--content">
+    <op-content-loader viewBox="0 0 100 100">
+      <svg:rect x="0" y="0" width="70" height="5" rx="1"/>
+
+      <svg:rect x="75" y="0" width="25" height="5" rx="1"/>
+
+      <svg:rect x="0" y="10" width="100" height="8" rx="1"/>
+
+      <svg:rect x="0" y="25" width="100" height="12" rx="1"/>
+    </op-content-loader>
+  </turbo-frame>
 
   <div class="spot-container op-datepicker-modal--stretch-content">
     <div class="op-datepicker-modal--toggle-actions-container">

frontend/src/app/shared/components/datepicker/wp-multi-date-form/wp-multi-date-form.component.ts

@@ -82,6 +82,7 @@ import { WorkPackageChangeset } from 'core-app/features/work-packages/components
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
 import { DateModalSchedulingService } from '../services/date-modal-scheduling.service';
+import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 
 export type DateKeys = 'start'|'end';
 export type DateFields = DateKeys|'duration';
@@ -132,6 +133,8 @@ export class OpWpMultiDateFormComponent extends UntilDestroyedMixin implements A
 
   @Output() save = new EventEmitter();
 
+  public turboFrameSrc:string;
+
   text = {
     save: this.I18n.t('js.button_save'),
     cancel: this.I18n.t('js.button_cancel'),
@@ -243,6 +246,7 @@ export class OpWpMultiDateFormComponent extends UntilDestroyedMixin implements A
     readonly deviceService:DeviceService,
     readonly weekdayService:WeekdayService,
     readonly focusHelper:FocusHelperService,
+    readonly pathHelper:PathHelperService,
   ) {
     super();
 
@@ -289,6 +293,8 @@ export class OpWpMultiDateFormComponent extends UntilDestroyedMixin implements A
     this.dates.start = this.changeset.value('startDate');
     this.dates.end = this.changeset.value('dueDate');
     this.setCurrentActivatedField(this.initialActivatedField);
+
+    this.turboFrameSrc = this.pathHelper.workPackageDatepickerDialogContentPath(this.changeset.id);
   }
 
   ngAfterViewInit():void {