[58734] Extract work package info line into a Primer component and do…

…cument it (#17234)

* create a component for WP info line

* fix spacing

* change component name and simplify code

* add a preview for lookbook

* pass workpackage itself to the component, not its id

* render info line component inside the relation component

* First draft of Lookbook docs

* add some docs for info line component

* make fon-size configurable

* make id clickable

* use info-line component in meeting agenda item

* use info-line component in hover card

---------

Co-authored-by: Parimal Satyal <[email protected]>

app/components/work_package_relations_tab/relation_component.html.erb

@@ -1,18 +1,7 @@
 <%=
 flex_layout(direction: :column, style: "gap: 0.25rem;") do |flex|
-  flex.with_row(flex_layout: true,
-                justify_content: :flex_start,
-                align_items: :center,
-                style: "gap: 0.5rem;") do |meta_information_row|
-    meta_information_row.with_column do
-      render(WorkPackages::HighlightedTypeComponent.new(work_package: related_work_package, font_size: :small))
-    end
-    meta_information_row.with_column do
-      render(Primer::Beta::Text.new(font_size: :small, color: :muted)) { "##{related_work_package.id}" }
-    end
-    meta_information_row.with_column do
-      render WorkPackages::StatusBadgeComponent.new(status: related_work_package.status)
-    end
+  flex.with_row do
+    render(WorkPackages::InfoLineComponent.new(work_package: related_work_package))
   end
 
   flex.with_row(flex_layout: true, justify_content: :space_between, align_items: :center) do |subject_line_row|

app/components/work_packages/hover_card_component.html.erb

@@ -1,16 +1,8 @@
 <%=
     if @work_package.present?
       grid_layout('op-wp-hover-card', tag: :div) do |grid|
-        grid.with_area(:type, tag: :div) do
-          render(WorkPackages::HighlightedTypeComponent.new(work_package: @work_package, font_size: :small))
-        end
-
-        grid.with_area(:status, tag: :div) do
-          render WorkPackages::StatusBadgeComponent.new(status: @work_package.status)
-        end
-
-        grid.with_area(:id, tag: :div) do
-          render(Primer::Beta::Text.new(font_size: :small,color: :muted)) { "##{@work_package.id}" }
+        grid.with_area(:info, tag: :div) do
+          render(WorkPackages::InfoLineComponent.new(work_package: @work_package))
         end
 
         grid.with_area(:project, tag: :div) do

app/components/work_packages/hover_card_component.sass

@@ -1,11 +1,11 @@
 .op-wp-hover-card
   display: grid
   align-items: center
-  grid-template-columns: auto auto auto auto 1fr
+  grid-template-columns: auto auto 1fr
   grid-template-rows: max-content 1fr auto
   grid-row-gap: calc(var(--stack-gap-condensed) / 2)
   grid-column-gap: var(--stack-gap-condensed)
-  grid-template-areas: "type id status project project project" "subject subject subject subject subject subject" "assignee assignee assignee assignee dates dates"
+  grid-template-areas: "info project project project" "subject subject subject subject" "assignee assignee dates dates"
   overflow: hidden
 
   &--project

app/components/work_packages/info_line_component.html.erb

@@ -0,0 +1,19 @@
+<%=
+  flex_layout do |flex|
+    flex.with_column(mr: 2) do
+      render(WorkPackages::HighlightedTypeComponent.new(work_package: @work_package, font_size: :small))
+    end
+    flex.with_column(mr: 2)  do
+      render(Primer::Beta::Link.new(
+        href: url_for(controller: "/work_packages", action: "show", id: @work_package),
+        title: @work_package.subject,
+        target: :_blank,
+        font_size: @font_size,
+        color: :muted
+      )) { "##{@work_package.id}" }
+    end
+    flex.with_column do
+      render WorkPackages::StatusBadgeComponent.new(status: @work_package.status)
+    end
+  end
+%>

app/components/work_packages/info_line_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class WorkPackages::InfoLineComponent < ApplicationComponent
+  include OpPrimer::ComponentHelpers
+
+  def initialize(work_package:, font_size: :small)
+    super
+
+    @work_package = work_package
+    @font_size = font_size
+  end
+end

lookbook/docs/patterns/26-work-package-info-line.md.erb

@@ -0,0 +1,34 @@
+The work package info line is a consistent way to display the most commonly-used  set of basic work package attributes.
+
+## Overview
+
+<%= embed OpenProject::WorkPackages::InfoLineComponentPreview, :playground %>
+
+## Anatomy
+
+The info line consists of three attributes that are displayed together:
+
+- Type
+- ID
+- Status
+
+Only the ID the only interactive element; it is clickable and points the work package. All other interaction has to come from the element using this work component.
+
+## Best practices
+
+It's best to not separate these three elements in different lines. The element can, however, be wrapped in multi-line if needed.
+
+## Used in
+
+- Hovercard
+- Work package relations tab
+- Work package header
+- ...
+
+### Code structure
+
+You can typically call the InfoLineComponent in views where work package details (Type, ID, and Status) need to be displayed in one line. You must pass a work package object containing valid data to it.
+
+```html
+    render(WorkPackages::InfoLineComponent.new(work_package: @work_package))
+```

lookbook/previews/open_project/work_packages/info_line_component_preview.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module OpenProject::WorkPackages
+  # @logical_path OpenProject/WorkPackages
+  class InfoLineComponentPreview < ViewComponent::Preview
+    def playground
+      render(WorkPackages::InfoLineComponent.new(work_package: WorkPackage.visible.first))
+    end
+  end
+end

modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb

@@ -9,19 +9,7 @@
 
       grid.with_area(:content, tag: :span, mr: 2) do
         if @meeting_agenda_item.visible_work_package?
-          flex_layout(align_items: :center) do |flex|
-            flex.with_column(mr: 2) do
-              render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do
-                "##{@meeting_agenda_item.work_package.id} #{@meeting_agenda_item.work_package.type.name}"
-              end
-            end
-
-            flex.with_column(mr: 2) do
-              render(Primer::Beta::Label.new(font_weight: :bold)) do
-                @meeting_agenda_item.work_package.status.name
-              end
-            end
-          end
+          render(WorkPackages::InfoLineComponent.new(work_package: @meeting_agenda_item.work_package))
         elsif @meeting_agenda_item.linked_work_package?
           render(Primer::Beta::Text.new(font_size: :small, mr: 2, color: :subtle, test_selector: 'op-meeting-agenda-title')) do
             I18n.t(:label_agenda_item_undisclosed_wp, id: @meeting_agenda_item.work_package_id)