[DREAM-869] Project hover card

app/components/projects/hover_card_component.html.erb

@@ -0,0 +1,65 @@
+<%#-- 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, see <https://www.gnu.org/licenses/>.
+
+See COPYRIGHT and LICENSE files for more details.
+
+++#%>
+
+<%=
+  flex_layout(classes: "op-project-hover-card", data: { test_selector: "project-hover-card-#{@id}" }) do |flex|
+    if breadcrumb_items.present?
+      flex.with_row(mb: 1) do
+        render(Primer::Beta::Breadcrumbs.new(data: { test_selector: "hierarchy-#{@id}" })) do |breadcrumbs|
+          breadcrumb_items.each_with_index do |item, i|
+            breadcrumbs.with_item(href: item[:href], font_size: :small, font_weight: i == breadcrumb_items.size - 1 ? :bold : nil) do
+              render(Primer::Beta::Truncate.new) do |truncate|
+                truncate.with_item(max_width: 135) { item[:text] }
+              end
+            end
+          end
+        end
+      end
+    end
+
+    flex.with_row(mb: 1) do
+      render(Primer::Beta::Text.new(tag: :h3, font_size: 5)) { @name }
+    end
+
+    flex.with_row(flex_layout: true, align_items: :center) do |row|
+      row.with_column(mr: 2) do
+        render(Projects::WorkspaceLabelComponent.new(project: @project, data: { test_selector: "workspace-label-#{@id}" }))
+      end
+
+      if @project.archived?
+        row.with_column(mr: 2) do
+          render(Primer::Beta::Label.new(scheme: :secondary)) { t("project.archive.archived") }
+        end
+      end
+
+      row.with_column do
+        render(Projects::StatusBadgeComponent.new(project: @project, size: :large, with_icon: true, data: { test_selector: "status-badge-#{@id}" }))
+      end
+    end
+  end
+%>

app/components/projects/hover_card_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+#-- 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, see <https://www.gnu.org/licenses/>.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module Projects
+  class HoverCardComponent < ApplicationComponent
+    include OpPrimer::ComponentHelpers
+
+    attr_reader :project
+
+    def initialize(project:, user:)
+      super
+
+      @project = project
+      @id = project.id
+      @name = project.name
+      @user = user
+    end
+
+    def breadcrumb_items
+      ancestors = project.ancestors.visible.active.reorder(:lft)
+      return nil if ancestors.empty?
+
+      (ancestors + [project]).map do |item|
+        { href: project_overview_path(item), text: item.name, selected: item == project }
+      end
+    end
+  end
+end

app/components/projects/info_line_component.html.erb

@@ -28,24 +28,23 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%=
   flex_layout(**@system_arguments) do |flex|
-    flex.with_column do
-      if project.archived?
-        render(Primer::Beta::Text.new(font_weight: :bold)) { project.name }
+    flex.with_column(mr: 2) do
+      if @project.archived?
+        render(Primer::Beta::Text.new(font_weight: :bold)) { @project.name }
       else
-        render(Primer::Beta::Link.new(href: project_path(project), font_weight: :bold)) { project.name }
+        render(Primer::Beta::Link.new(href: project_path(@project), font_weight: :bold)) { @project.name }
       end
     end
 
     if @show_workspace_type
-      flex.with_column(ml: 2, display: :flex, align_items: :center, test_selector: "project-info-line-workspace-type") do
-        render(Primer::Beta::Octicon.new(icon: workspace_type_icon, size: :xsmall, color: :muted, mr: 1)) +
-          render(Primer::Beta::Text.new(color: :muted, font_size: :small)) { workspace_type_label }
+      flex.with_column(mr: 2) do
+        render(Projects::WorkspaceLabelComponent.new(project: @project))
       end
     end
 
-    if project.archived?
-      flex.with_column(ml: 2) do
-        render(Primer::Beta::Label.new) { t("project.archive.archived") }
+    if @project.archived?
+      flex.with_column do
+        render(Primer::Beta::Label.new(scheme: :secondary)) { t("project.archive.archived") }
       end
     end
   end

app/components/projects/info_line_component.rb

@@ -40,12 +40,4 @@ def initialize(project:, show_workspace_type: false, **system_arguments)
     @system_arguments[:align_items] ||= :center
     @system_arguments[:flex_wrap] ||= :wrap
   end
-
-  private
-
-  attr_reader :project
-
-  def workspace_type_label = I18n.t(:"label_#{project.workspace_type}")
-
-  def workspace_type_icon = helpers.workspace_icon(project.workspace_type)
 end

app/components/projects/status_badge_component.html.erb

@@ -1 +1,14 @@
-<%= render(Primer::Beta::Label.new(size: :medium, inline: true, **@system_arguments)) { name } %>
+<%=
+  render(Primer::Beta::Label.new(size: :medium, **@system_arguments)) do
+    render(Primer::OpenProject::FlexLayout.new(align_items: :center)) do |flex|
+      if @with_icon
+        flex.with_column(mr: 1) do
+          render(Primer::Beta::Octicon.new(icon: @status.icon))
+        end
+      end
+      flex.with_column do
+        render(Primer::Beta::Text.new(font_size: 5, font_weight: :bold)) { name }
+      end
+    end
+  end
+%>

app/components/projects/status_badge_component.rb

@@ -31,10 +31,11 @@ class Projects::StatusBadgeComponent < ApplicationComponent
   include OpPrimer::ComponentHelpers
   include Primer::ClassNameHelper
 
-  def initialize(project:, **system_arguments)
+  def initialize(project:, with_icon: false, **system_arguments)
     super
 
     @project = project
+    @with_icon = with_icon
     @status = find_status(project.status_code)
     @system_arguments = system_arguments
   end

app/components/projects/workspace_label_component.html.erb

@@ -0,0 +1,11 @@
+<%=
+  flex_layout(align_items: :center, **@system_arguments) do |container|
+    container.with_column(mr: 1) do
+      render(Primer::Beta::Octicon.new(icon: icon_name, color: :muted))
+    end
+
+    container.with_column do
+      render(Primer::Beta::Text.new(color: :muted, font_size: :small)) { label }
+    end
+  end
+%>

app/components/projects/workspace_label_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+#-- 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, see <https://www.gnu.org/licenses/>.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+class Projects::WorkspaceLabelComponent < ApplicationComponent
+  include OpPrimer::ComponentHelpers
+
+  def initialize(project:, **system_arguments)
+    super
+
+    @project = project
+    @system_arguments = system_arguments
+  end
+
+  private
+
+  attr_reader :project
+
+  def label = I18n.t(:"label_#{project.workspace_type}")
+
+  def icon_name = helpers.workspace_icon(project.workspace_type)
+end

app/views/projects/hover_card/show.html.erb

@@ -0,0 +1,3 @@
+<turbo-frame id="op-project-hover-card-body">
+  <%= render Projects::HoverCardComponent.new(id: @id) %>
+</turbo-frame>

frontend/src/global_styles/primer/_overrides.sass

@@ -52,6 +52,7 @@
 page-header,
 sub-header,
 .op-work-package-details-tab-component,
+.op-project-hover-card,
 .UnderlineNav,
 .tabnav,
 .Box-header,

lookbook/previews/open_project/projects/hover_card_component_preview.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+#-- 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, see <https://www.gnu.org/licenses/>.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module OpenProject::Projects
+  # @logical_path OpenProject/Projects
+  class HoverCardComponentPreview < ViewComponent::Preview
+    SCOPES = %i[visible active].freeze
+
+    def no_hierarchy
+      user = FactoryBot.build_stubbed(:admin)
+      project = FactoryBot.build_stubbed(:project, :with_status)
+      render(::Projects::HoverCardComponent.new(project:, user:))
+    end
+
+    def with_hierarchy
+      user = FactoryBot.build_stubbed(:admin)
+      root = FactoryBot.build_stubbed(:project, name: "Arcanos Flight Planning")
+      child = FactoryBot.build_stubbed(:project, name: "Mobile app", parent: root)
+      leaf = FactoryBot.build_stubbed(:project, active: false, name: "Data sources", parent: child, status_code: 1)
+
+      chain = [root, child, leaf]
+
+      chain.each_with_index do |project, i|
+        ancestors = chain.first(i)
+        SCOPES.each { |scope| ancestors.define_singleton_method(scope) { |*| self } }
+        ancestors.define_singleton_method(:reorder) { |*| self }
+        project.define_singleton_method(:ancestors) { ancestors }
+      end
+
+      render(::Projects::HoverCardComponent.new(project: leaf, user:))
+    end
+  end
+end

lookbook/previews/open_project/projects/status_badge_component_preview.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+#-- 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, see <https://www.gnu.org/licenses/>.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module OpenProject::Projects
+  # @logical_path OpenProject/Projects
+  class StatusBadgeComponentPreview < ViewComponent::Preview
+    # @label Playground
+    # @param with_icon [boolean]
+    def playground(with_icon: false)
+      project = FactoryBot.build_stubbed(:project, :with_status)
+
+      render(Projects::StatusBadgeComponent.new(project:, with_icon:))
+    end
+
+    def with_icon(with_icon: true)
+      project = FactoryBot.build_stubbed(:project, :with_status)
+
+      render(Projects::StatusBadgeComponent.new(project:, with_icon:))
+    end
+  end
+end