From a1cb5b933db0a4e0b58f1a099555de3688add41d Mon Sep 17 00:00:00 2001 From: ulferts Date: Wed, 2 Apr 2025 17:37:13 +0200 Subject: [PATCH 1/2] use component for global and project definition administration --- .../projects/life_cycle_component.html.erb | 8 ------ .../phase_definition_component.html.erb | 15 ++++++++++ ...onent.rb => phase_definition_component.rb} | 26 +++++++++++++---- .../life_cycle_steps/step_component.html.erb | 18 ++++++------ .../life_cycle_steps/step_component.rb | 26 ----------------- .../row_component.html.erb | 28 +++++-------------- .../row_component.rb | 26 ----------------- .../phase.html.erb | 6 ---- ... => phase_definition_component_preview.rb} | 8 ++++-- .../phase.html.erb | 6 ++++ 10 files changed, 62 insertions(+), 105 deletions(-) delete mode 100644 app/components/projects/life_cycle_component.html.erb create mode 100644 app/components/projects/phase_definition_component.html.erb rename app/components/projects/{life_cycle_component.rb => phase_definition_component.rb} (82%) delete mode 100644 lookbook/previews/open_project/projects/life_cycle_component_preview/phase.html.erb rename lookbook/previews/open_project/projects/{life_cycle_component_preview.rb => phase_definition_component_preview.rb} (86%) create mode 100644 lookbook/previews/open_project/projects/phase_definition_component_preview/phase.html.erb diff --git a/app/components/projects/life_cycle_component.html.erb b/app/components/projects/life_cycle_component.html.erb deleted file mode 100644 index 3f9a0f06e6fe..000000000000 --- a/app/components/projects/life_cycle_component.html.erb +++ /dev/null @@ -1,8 +0,0 @@ -<%= flex_layout(align_items: :center) do |type_container| - type_container.with_column(mr: 1, classes: icon_color_class) do - render Primer::Beta::Octicon.new(icon: icon) - end - type_container.with_column do - render(Primer::Beta::Text.new(**text_options)) { text } - end - end %> diff --git a/app/components/projects/phase_definition_component.html.erb b/app/components/projects/phase_definition_component.html.erb new file mode 100644 index 000000000000..0b3092e71eeb --- /dev/null +++ b/app/components/projects/phase_definition_component.html.erb @@ -0,0 +1,15 @@ +<%= flex_layout(align_items: :center) do |type_container| + type_container.with_column(classes: icon_color_class, mr: 1) do + render Primer::Beta::Octicon.new(icon: icon) + end + type_container.with_column(test_selector: "project-life-cycle-step-definition-name", classes: "ellipsis") do + if edit_link? + render(Primer::Beta::Link.new(href: phase_href, **phase_text_options)) { phase_text } + else + render(Primer::Beta::Text.new(**phase_text_options)) { phase_text } + end + end + type_container.with_column(ml: 2, classes: "no-wrap") do + render(Primer::Beta::Text.new(**gates_text_options)) { gates_text } + end + end %> diff --git a/app/components/projects/life_cycle_component.rb b/app/components/projects/phase_definition_component.rb similarity index 82% rename from app/components/projects/life_cycle_component.rb rename to app/components/projects/phase_definition_component.rb index f96e1453c735..09e874042430 100644 --- a/app/components/projects/life_cycle_component.rb +++ b/app/components/projects/phase_definition_component.rb @@ -28,14 +28,22 @@ # See COPYRIGHT and LICENSE files for more details. # ++ module Projects - class LifeCycleComponent < ApplicationComponent + class PhaseDefinitionComponent < ApplicationComponent include OpPrimer::ComponentHelpers # TODO: This component is currently not in use! It should be a shared component # between the Projects::Settings::LifeCycleSteps::StepComponent and the # Settings::ProjectLifeCycleStepDefinitions::RowComponent. # It should hold the icon, definition name and gate text information. - def text + def phase_text + model.name + end + + def phase_href + edit_admin_settings_project_phase_definition_path(model) + end + + def gates_text if model.start_gate? && model.finish_gate? I18n.t("settings.project_phase_definitions.both_gate") elsif model.start_gate? @@ -52,14 +60,22 @@ def icon end def icon_color_class - helpers.hl_inline_class("project_phase_definition", model) + helpers.hl_inline_class("project_phase_definition", model.id) end - def text_options + def gates_text_options # The tag: :div is is a hack to fix the line height difference # caused by font_size: :small. That line height difference # would otherwise lead to the text being not on the same height as the icon - { color: :muted, font_size: :small, tag: :div }.merge(options) + { color: :muted, font_size: :small, tag: :div }.merge(options[:gates_text_options] || {}) + end + + def phase_text_options + { font_weight: :bold }.merge(options[:phase_text_options] || {}) + end + + def edit_link? + options[:edit_link] end end end diff --git a/app/components/projects/settings/life_cycle_steps/step_component.html.erb b/app/components/projects/settings/life_cycle_steps/step_component.html.erb index 7d777ea72c52..c198e9f52bfd 100644 --- a/app/components/projects/settings/life_cycle_steps/step_component.html.erb +++ b/app/components/projects/settings/life_cycle_steps/step_component.html.erb @@ -3,16 +3,14 @@ align_items: :center, justify_content: :space_between ) do |step_container| - step_container.with_column(flex_layout: true, mr: 2, classes: "min-width-0") do |title_container| - title_container.with_column(pt: 1, mr: 1, classes: icon_color_class) do - render Primer::Beta::Octicon.new(icon: icon) - end - title_container.with_column(pt: 1, mr: 2, classes: "ellipsis") do - render(Primer::Beta::Text.new(classes: "filter-target-visible-text")) { definition.name } - end - title_container.with_column(pt: 1, classes: "no-wrap") do - render(Primer::Beta::Text.new(**gate_text_options)) { gate_info } - end + step_container.with_column(mr: 2, classes: "min-width-0") do + render( + Projects::PhaseDefinitionComponent.new( + definition, + edit_link: User.current.admin?, + phase_text_options: { classes: "filter-target-visible-text" } + ) + ) end # py: 1 quick fix: prevents the row from bouncing as the toggle switch currently changes height while toggling step_container.with_column(py: 1, mr: 2) do diff --git a/app/components/projects/settings/life_cycle_steps/step_component.rb b/app/components/projects/settings/life_cycle_steps/step_component.rb index 08a2cf32264e..2dd0f59b6479 100644 --- a/app/components/projects/settings/life_cycle_steps/step_component.rb +++ b/app/components/projects/settings/life_cycle_steps/step_component.rb @@ -37,32 +37,6 @@ class StepComponent < ApplicationComponent options :definition, :active? - # TODO: Remove these helper methods once the Projects::LifeCycleComponent - # has been refactored. - def icon - :"op-phase" - end - - def icon_color_class - helpers.hl_inline_class("project_phase_definition", definition) - end - - def gate_info - if definition.start_gate? && definition.finish_gate? - I18n.t("settings.project_phase_definitions.both_gate") - elsif definition.start_gate? - I18n.t("settings.project_phase_definitions.start_gate") - elsif definition.finish_gate? - I18n.t("settings.project_phase_definitions.finish_gate") - else - I18n.t("settings.project_phase_definitions.no_gate") - end - end - - def gate_text_options - { color: :muted, font_size: :small }.merge(options) - end - def toggle_aria_label I18n.t("projects.settings.life_cycle.step.use_in_project", step: definition.name) end diff --git a/app/components/settings/project_life_cycle_step_definitions/row_component.html.erb b/app/components/settings/project_life_cycle_step_definitions/row_component.html.erb index 9c40ff194f1f..ae6983e7de32 100644 --- a/app/components/settings/project_life_cycle_step_definitions/row_component.html.erb +++ b/app/components/settings/project_life_cycle_step_definitions/row_component.html.erb @@ -39,28 +39,14 @@ See COPYRIGHT and LICENSE files for more details. ) end end - title_container.with_column(classes: icon_color_class) do - render Primer::Beta::Octicon.new(icon: icon) - end - title_container.with_column(classes: "ellipsis", test_selector: "project-life-cycle-step-definition-name") do - render( - if allowed_to_customize_life_cycle? - Primer::Beta::Link.new( - classes: "filter-target-visible-text", - href: edit_admin_settings_project_phase_definition_path(definition), - font_weight: :bold - ) - else - Primer::Beta::Text.new( - font_weight: :bold - ) - end - ) do - definition.name - end - end title_container.with_column do - render(Primer::Beta::Text.new(**gate_text_options)) { gate_info } + render( + Projects::PhaseDefinitionComponent.new( + definition, + edit_link: allowed_to_customize_life_cycle?, + phase_text_options: { classes: "filter-target-visible-text" } + ) + ) end title_container.with_column(classes: "no-wrap") do render(Primer::Beta::Text.new) { t("project.count", count: definition.project_count) } diff --git a/app/components/settings/project_life_cycle_step_definitions/row_component.rb b/app/components/settings/project_life_cycle_step_definitions/row_component.rb index 7f92dd5684fe..777fcf1b76c1 100644 --- a/app/components/settings/project_life_cycle_step_definitions/row_component.rb +++ b/app/components/settings/project_life_cycle_step_definitions/row_component.rb @@ -39,32 +39,6 @@ class RowComponent < ApplicationComponent options :first?, :last? - # TODO: Remove these helper classes once the Projects::LifeCycleComponent - # has been refactored. - def icon - :"op-phase" - end - - def icon_color_class - helpers.hl_inline_class("project_phase_definition", definition) - end - - def gate_info - if definition.start_gate? && definition.finish_gate? - I18n.t("settings.project_phase_definitions.both_gate") - elsif definition.start_gate? - I18n.t("settings.project_phase_definitions.start_gate") - elsif definition.finish_gate? - I18n.t("settings.project_phase_definitions.finish_gate") - else - I18n.t("settings.project_phase_definitions.no_gate") - end - end - - def gate_text_options - { color: :muted, font_size: :small }.merge(options) - end - private def move_action(menu:, move_to:, label:, icon:) diff --git a/lookbook/previews/open_project/projects/life_cycle_component_preview/phase.html.erb b/lookbook/previews/open_project/projects/life_cycle_component_preview/phase.html.erb deleted file mode 100644 index ffd42d8cf052..000000000000 --- a/lookbook/previews/open_project/projects/life_cycle_component_preview/phase.html.erb +++ /dev/null @@ -1,6 +0,0 @@ - - - -<%= render(::Projects::LifeCycleComponent.new(model)) %> diff --git a/lookbook/previews/open_project/projects/life_cycle_component_preview.rb b/lookbook/previews/open_project/projects/phase_definition_component_preview.rb similarity index 86% rename from lookbook/previews/open_project/projects/life_cycle_component_preview.rb rename to lookbook/previews/open_project/projects/phase_definition_component_preview.rb index fa5daee61ab6..f20d20201e74 100644 --- a/lookbook/previews/open_project/projects/life_cycle_component_preview.rb +++ b/lookbook/previews/open_project/projects/phase_definition_component_preview.rb @@ -31,12 +31,14 @@ module OpenProject module Projects # @logical_path OpenProject/Projects - class LifeCycleComponentPreview < Lookbook::Preview + class PhaseDefinitionComponentPreview < Lookbook::Preview + # @param edit_link [boolean] # @param start_gate [boolean] # @param finish_gate [boolean] - def phase(start_gate: false, finish_gate: false) + def phase(edit_link: false, start_gate: false, finish_gate: false) model = Project::PhaseDefinition.new(id: 1, name: "The first phase", start_gate:, finish_gate:) - render_with_template(locals: { model: }) + + render_with_template(locals: { model:, edit_link: }) end end end diff --git a/lookbook/previews/open_project/projects/phase_definition_component_preview/phase.html.erb b/lookbook/previews/open_project/projects/phase_definition_component_preview/phase.html.erb new file mode 100644 index 000000000000..7cc860782cf0 --- /dev/null +++ b/lookbook/previews/open_project/projects/phase_definition_component_preview/phase.html.erb @@ -0,0 +1,6 @@ + + + +<%= render(::Projects::PhaseDefinitionComponent.new(model, edit_link:)) %> From 109b81bbbb0091b06945b4b13d3ff2d73fc7e7a7 Mon Sep 17 00:00:00 2001 From: ulferts Date: Tue, 8 Apr 2025 17:24:38 +0200 Subject: [PATCH 2/2] remove outdated comment --- app/components/projects/phase_definition_component.rb | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/components/projects/phase_definition_component.rb b/app/components/projects/phase_definition_component.rb index 09e874042430..0f4cb9d72bc5 100644 --- a/app/components/projects/phase_definition_component.rb +++ b/app/components/projects/phase_definition_component.rb @@ -31,10 +31,6 @@ module Projects class PhaseDefinitionComponent < ApplicationComponent include OpPrimer::ComponentHelpers - # TODO: This component is currently not in use! It should be a shared component - # between the Projects::Settings::LifeCycleSteps::StepComponent and the - # Settings::ProjectLifeCycleStepDefinitions::RowComponent. - # It should hold the icon, definition name and gate text information. def phase_text model.name end