[AGILE-251] Migrate Backlogs to Pragmatic DnD

app/components/open_project/common/border_box_list_component.rb

@@ -141,12 +141,23 @@ class BorderBoxListComponent < ApplicationComponent
       #   # @param title [String] empty-state title.
       #   # @param description [String, nil] optional supporting text.
       #   # @param icon [Symbol, nil] optional Primer icon.
+      #   # @param drop_target_label [String, nil] when given, renders a
+      #   #   drop-zone overlay with this label. The overlay becomes visible
+      #   #   while a sortable item hovers the surrounding
+      #   #   `[data-drop-container]` list.
       #   # @param system_arguments [Hash] forwarded to `Primer::Beta::Blankslate`.
       #   # @return [ViewComponent::Slot]
-      #   def with_empty_state(title:, description: nil, icon: nil, **system_arguments)
+      #   def with_empty_state(title:, description: nil, icon: nil, drop_target_label: nil, **system_arguments)
       #   end
-      renders_one :empty_state, ->(title:, description: nil, icon: nil, **system_arguments) {
-        EmptyState.new(title:, description:, icon:, interactive: interactive?, **system_arguments)
+      renders_one :empty_state, ->(title:, description: nil, icon: nil, drop_target_label: nil, **system_arguments) {
+        EmptyState.new(
+          title:,
+          description:,
+          icon:,
+          interactive: interactive?,
+          drop_target_label:,
+          **system_arguments
+        )
       }
 
       # Optional footer row.

app/components/open_project/common/border_box_list_component.sass

@@ -8,14 +8,19 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-.op-border-box-list_transparent
-  > .Box-header
-    background-color: transparent
-    border-bottom: none
-    padding-bottom: var(--stack-padding-condensed)
+// Edge borders for row states. The top edge is the row's own top border, the
+// bottom edge is the following row's top border; the last row draws its own
+// bottom border, overlapping the Box border like the upstream
+// Box-body:last-of-type rule.
+@mixin op-box-list-item-edge-borders($color)
+  border-top-color: $color
 
-  > ul > .Box-row:first-of-type
-    border-top: none
+  & + .Box-row
+    border-top-color: $color
+
+  &:last-child
+    margin-bottom: calc(var(--borderWidth-thin) * -1)
+    border-bottom: var(--borderWidth-thin) solid $color
 
 .op-border-box-list
   --op-border-box-list-header-row-gap: calc(var(--stack-gap-condensed) / 2)
@@ -47,12 +52,54 @@
     .Box-title
       font-size: var(--text-title-size-medium)
 
+  &_transparent
+    > .Box-header
+      background-color: transparent
+      border-bottom: none
+      padding-bottom: var(--stack-padding-condensed)
+
+    // A transparent (not absent) border keeps the first row's height stable
+    // when a state recolors it. These recolors repeat the state rules from
+    // further down because this selector outweighs them.
+    > ul > .Box-row:first-of-type
+      border-top-color: transparent
+
+      &:has(> .Box-card[data-selected])
+        border-top-color: var(--box-list-item-selected-border-color)
+
+      &:has(> .Box-card[aria-current="true"])
+        border-top-color: var(--box-list-item-pressed-border-color)
+
   &.op-border-box-list_transparent
     &.op-border-box-list_header-padding-default,
     &.op-border-box-list_header-padding-spacious
       > .Box-header
         padding-bottom: var(--stack-padding-condensed)
 
+  // Upstream rounds the outer row corners for boxes whose rows form the box
+  // edge. With a header or footer between the row and the box edge, a row
+  // background (hover, focus, selected) would show rounded corners mid-box.
+  &:has(> .Box-header) > ul > .Box-row:first-of-type
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+
+  &:has(> .Box-footer) > ul > .Box-row:last-of-type
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+
+  // Container drop zone: the whole list outlines while a sortable item hovers
+  // it, signalling the item will land inside this list.
+  &[data-drop-container]
+    outline: var(--borderWidth-thick) solid var(--fgColor-accent)
+    outline-offset: calc(var(--borderWidth-thick) * -1)
+    border-radius: var(--borderRadius-medium)
+
+  // The empty-state row only makes sense while it is alone in the list. Hiding
+  // it as soon as a sibling row appears (e.g. dropped by drag and drop) avoids
+  // a flicker between the drop and the server render removing it.
+  > .Box-list > .Box-row[data-empty-list-item]:not(:only-child)
+    display: none
+
 .op-border-box-list-header
   display: grid
   grid-template-columns: minmax(0, 1fr) minmax(5rem, max-content) auto
@@ -82,3 +129,140 @@
 
   &--description
     margin-top: var(--op-border-box-list-header-row-gap)
+
+.Box-card--clickable
+  cursor: pointer
+
+.Box-card--draggable
+  cursor: grab
+  user-select: none
+
+  &:active
+    cursor: grabbing
+
+// Rows wrapping a card delegate their padding to the card and take their
+// colors from the box-list-item state variables.
+.Box-row:has(> .Box-card)
+  padding: 0
+  background-color: var(--box-list-item-bg-color)
+  border-top-color: var(--box-list-item-border-color)
+
+  &:hover
+    background-color: var(--box-list-item-bg-hover-color)
+
+  &:has(> .Box-card:focus-visible)
+    background-color: var(--bgColor-muted)
+
+// Selected state: applied synchronously on activation by the backlogs--story
+// controller (single selection), so the list reacts before the split screen
+// has loaded.
+.Box-row:has(> .Box-card[data-selected])
+  background-color: var(--box-list-item-selected-bg-color)
+  @include op-box-list-item-edge-borders(var(--box-list-item-selected-border-color))
+
+  &:hover,
+  &:has(> .Box-card:focus-visible)
+    background-color: var(--box-list-item-selected-bg-hover-color)
+
+// Current state: the card is open in the split screen. aria-current is
+// maintained by the backlogs--story controller once the URL reflects the
+// details pane; the strong border wins over a simultaneous selected state.
+.Box-row:has(> .Box-card[aria-current="true"])
+  @include op-box-list-item-edge-borders(var(--box-list-item-pressed-border-color))
+
+.Box-row[data-dragging="source"]
+  opacity: 0.4
+  background-color: var(--bgColor-inset)
+  box-shadow: inset 0 0 0 var(--borderWidth-default) var(--borderColor-muted)
+
+.Box-row[data-drop-position]
+  --op-backlogs-drop-gap-border-width: 2px
+  --op-backlogs-drop-gap-height: 8px
+
+  position: relative
+
+  &::before,
+  &::after
+    position: absolute
+    left: 0
+    right: 0
+    height: var(--op-backlogs-drop-gap-height)
+    background: linear-gradient(
+      to bottom,
+      var(--bgColor-accent-muted) 0,
+      var(--bgColor-accent-muted) calc(50% - var(--op-backlogs-drop-gap-border-width) / 2),
+      var(--fgColor-accent) calc(50% - var(--op-backlogs-drop-gap-border-width) / 2),
+      var(--fgColor-accent) calc(50% + var(--op-backlogs-drop-gap-border-width) / 2),
+      var(--bgColor-accent-muted) calc(50% + var(--op-backlogs-drop-gap-border-width) / 2),
+      var(--bgColor-accent-muted) 100%
+    )
+    pointer-events: none
+    z-index: 1
+
+  &[data-drop-position="top"]::before
+    content: ''
+    top: calc(var(--op-backlogs-drop-gap-height) / -2)
+
+  &[data-drop-position="bottom"]::after
+    content: ''
+    bottom: calc(var(--op-backlogs-drop-gap-height) / -2)
+
+// Empty-state wrapper. With a drop target label, an overlay covers the
+// blankslate while a sortable item hovers the list, labelling it as a drop
+// zone. Hidden via visibility so it is unreachable while inactive; the
+// visibility delay keeps the overlay shown until the fade-out finishes.
+.op-border-box-list-empty-state
+  position: relative
+
+  &--drop-overlay
+    position: absolute
+    // Bottom inset keeps the box's bottom border and rounding visible.
+    inset: 0 0 var(--base-size-4) 0
+    border: var(--borderWidth-thin) dashed var(--borderColor-default)
+    z-index: 1
+
+    display: flex
+    align-items: center
+    justify-content: center
+
+    background: var(--bgColor-default)
+    color: var(--fgColor-default)
+
+    opacity: 0
+    visibility: hidden
+    pointer-events: none
+
+    @media (prefers-reduced-motion: no-preference)
+      transition: opacity 0.1s ease-in-out, visibility 0s linear 0.1s
+
+.op-border-box-list[data-drop-container] .op-border-box-list-empty-state--drop-overlay
+  opacity: 1
+  visibility: visible
+  pointer-events: auto
+
+  @media (prefers-reduced-motion: no-preference)
+    transition: opacity 0.1s ease-in-out, visibility 0s
+
+// Reapplies the padding removed from the containing .Box-row, matching the
+// .Box-row padding of each Box density variant upstream.
+.Box-card
+  padding: var(--stack-padding-normal)
+
+  &[data-preview]
+    background-color: var(--bgColor-default)
+    border-radius: var(--borderRadius-medium)
+    box-shadow: var(--shadow-floating-medium)
+    opacity: 1
+
+    // Firefox folds a card's box-shadow ink overflow into the native drag-image
+    // snapshot, shifting the snapshot origin off the border box so the grab
+    // offset no longer lines up under the pointer. Drop the lift shadow on
+    // Firefox only; other browsers snapshot the border box and are unaffected.
+    .-browser-firefox &
+      box-shadow: none
+
+.Box--condensed .Box-card
+  padding: var(--stack-padding-condensed) var(--stack-padding-normal)
+
+.Box--spacious .Box-card
+  padding: var(--stack-padding-spacious)

app/components/open_project/common/border_box_list_component/empty_state.html.erb

@@ -0,0 +1,40 @@
+<%# -- copyright
+OpenProject is an open source project management software.
+Copyright (C) the OpenProject GmbH
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License version 3.
+
+OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+Copyright (C) 2006-2013 Jean-Philippe Lang
+Copyright (C) 2010-2013 the ChiliProject Team
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+See COPYRIGHT and LICENSE files for more details.
+
+++# %>
+
+<%= render(Primer::Box.new(classes: "op-border-box-list-empty-state")) do %>
+  <%= render(blankslate) %>
+
+  <% if drop_target_label %>
+    <%# The overlay only duplicates the drop affordance for pointer
+        interactions, so it is hidden from assistive technology. %>
+    <%= render(Primer::Box.new(aria: { hidden: true }, classes: "op-border-box-list-empty-state--drop-overlay")) do %>
+      <%= render(Primer::Beta::Text.new(tag: :p, font_size: 4)) { drop_target_label } %>
+    <% end %>
+  <% end %>
+<% end %>

app/components/open_project/common/border_box_list_component/empty_state.rb

@@ -31,7 +31,8 @@
 module OpenProject
   module Common
     class BorderBoxListComponent
-      # Empty-state content rendered as a Primer Blankslate.
+      # Empty-state content rendered as a Primer Blankslate, wrapped in an
+      # empty-state container that can host a drop-zone overlay.
       #
       # This component is part of {BorderBoxListComponent} and should not be
       # used as a standalone component.
@@ -44,13 +45,24 @@ class EmptyState < ApplicationComponent
         # @param icon [Symbol, nil] optional Primer icon.
         # @param interactive [Boolean] whether empty-state updates should be
         #   announced politely to assistive technology.
+        # @param drop_target_label [String, nil] when given, renders a drop-zone
+        #   overlay with this label. The overlay becomes visible while a
+        #   sortable item hovers the surrounding `[data-drop-container]` list.
         # @param system_arguments [Hash] forwarded to `Primer::Beta::Blankslate`.
-        def initialize(title:, description: nil, icon: nil, interactive: false, **system_arguments)
+        def initialize(
+          title:,
+          description: nil,
+          icon: nil,
+          interactive: false,
+          drop_target_label: nil,
+          **system_arguments
+        )
           super()
 
           @title = title
           @description = description
           @icon = icon
+          @drop_target_label = drop_target_label
 
           @system_arguments = system_arguments
           return unless interactive
@@ -62,13 +74,17 @@ def initialize(title:, description: nil, icon: nil, interactive: false, **system
           )
         end
 
-        def call
+        private
+
+        attr_reader :drop_target_label
+
+        def blankslate
           blankslate = Primer::Beta::Blankslate.new(**@system_arguments)
           blankslate.with_heading(tag: :h4).with_content(@title)
           blankslate.with_description_content(@description) if @description
           blankslate.with_visual_icon(icon: @icon) if @icon
 
-          render(blankslate)
+          blankslate
         end
       end
     end

app/components/open_project/common/border_box_list_component/work_package_item.rb

@@ -78,12 +78,7 @@ def initialize(
         def row_args
           row_arguments = @system_arguments.deep_dup
           row_arguments[:id] ||= dom_id(work_package)
-          row_arguments[:tabindex] ||= 0
           row_arguments[:test_selector] ||= "work-package-#{work_package.id}"
-          row_arguments[:classes] = class_names(
-            row_classes,
-            row_arguments[:classes]
-          )
           row_arguments[:data] = merge_data(
             { data: row_data },
             row_arguments
@@ -110,15 +105,14 @@ def card
         #
         # @return [ApplicationComponent]
         def build_card
-          WorkPackageCardComponent.new(work_package:)
+          WorkPackageCardComponent.new(work_package:, classes: card_classes)
         end
 
-        def row_classes
+        def card_classes
           class_names(
-            "Box-row--hover-blue",
-            "Box-row--focus-gray",
-            "Box-row--clickable",
-            "Box-row--draggable" => draggable?
+            "Box-card",
+            "Box-card--clickable",
+            "Box-card--draggable" => draggable?
           )
         end
 

app/components/open_project/common/work_package_card_component.html.erb

@@ -27,11 +27,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++# %>
 
-<%= grid_layout(
-      "op-work-package-card",
-      tag: :article,
-      classes: layout_classes
-    ) do |grid| %>
+<%= grid_layout("op-work-package-card", **@system_arguments) do |grid| %>
   <% if show_drag_handle %>
     <% grid.with_area(:drag_handle, classes: "hide-when-print") do %>
       <%= render(Primer::OpenProject::DragHandle.new) %>