[#69068] Add support for Project template icons

app/components/projects/settings/general/show_component.html.erb

@@ -84,5 +84,24 @@ See COPYRIGHT and LICENSE files for more details.
         )
       end
     end
+
+    container.with_row(mb: 3) do
+      settings_primer_form_with(model: project, url: project_settings_general_path(project)) do |f|
+        concat(
+          render(Primer::Beta::Subhead.new) do |component|
+            component.with_heading(tag: :h3, size: :medium) { I18n.t("projects.settings.header_icon") }
+          end
+        )
+
+        concat(
+          render(
+            Primer::Forms::FormList.new(
+              Projects::Settings::IconForm.new(f),
+              Projects::Settings::Submit.new(f, label: I18n.t("projects.settings.button_update_icon"))
+            )
+          )
+        )
+      end
+    end
   end
 %>

app/contracts/projects/base_contract.rb

@@ -52,6 +52,9 @@ class BaseContract < ::ModelContract
     attribute :templated do
       validate_templated_set_by_admin
     end
+    attribute :icon do
+      validate_templated_present
+    end
 
     validate :validate_user_allowed_to_manage
 
@@ -115,6 +118,12 @@ def validate_status_code_included
       errors.add :status, :inclusion if model.status_code && Project.status_codes.keys.exclude?(model.status_code.to_s)
     end
 
+    def validate_templated_present
+      if model.templated.nil?
+        errors.add(:templated, :blank)
+      end
+    end
+
     def validate_templated_set_by_admin
       if model.templated_changed? && !user.admin?
         errors.add :templated, :error_unauthorized

app/forms/projects/settings/icon_form.rb

@@ -0,0 +1,38 @@
+# 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, 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.
+#++
+module Projects
+  module Settings
+    class IconForm < ApplicationForm
+      form do |f|
+        f.file_field name: :icon, label: attribute_name(:icon), accept: "foo", size: "15"
+      end
+    end
+  end
+end

app/forms/projects/template_select_form.rb

@@ -66,7 +66,7 @@ class TemplateSelectForm < ApplicationForm
             value: template.id,
             label: template.name,
             caption: format_caption(template.description),
-            icon: agile_image, # TODO: support customizable icons (OP #69068)
+            icon: template.icon,
             checked: template.id == template_id
           )
         end

app/models/concerns/has_icon.rb

@@ -0,0 +1,37 @@
+# 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, 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.
+# ++
+
+module HasIcon
+  extend ActiveSupport::Concern
+
+  included do
+    has_one :icon, as: :iconifiable, dependent: :destroy
+  end
+end

app/models/custom_icon.rb

@@ -0,0 +1,31 @@
+# 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, 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.
+#++
+class CustomIcon < Icon
+end

app/models/icon.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Icon < ApplicationRecord
+end

app/models/octicon_icon.rb

@@ -0,0 +1,31 @@
+# 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, 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.
+#++
+class OcticonIcon < Icon
+end

app/models/permitted_params.rb

@@ -292,6 +292,7 @@ def project
                                                 :templated,
                                                 :status_code,
                                                 :status_explanation,
+                                                :icon,
                                                 work_package_custom_field_ids: [],
                                                 type_ids: [],
                                                 enabled_module_names: [])

app/models/project.rb

@@ -43,6 +43,8 @@ class Project < ApplicationRecord
 
   include ::Scopes::Scoped
 
+  include HasIcon
+
   # Maximum length for project identifiers
   IDENTIFIER_MAX_LENGTH = 100
 

config/locales/en.yml

@@ -506,9 +506,11 @@ en:
       header_details: Basic details
       header_status: Project status
       header_relations: Project relations
+      header_icon: Template icon
       button_update_details: Update details
       button_update_status_description: Update status description
       button_update_parent_project: Update parent project
+      button_update_icon: Update icon
       public_warning: >
         This project is public.
         Anyone who has access to this instance will be able to view and interact with this project depending on their role and associated permissions.
@@ -1995,6 +1997,7 @@ en:
     group: "Group"
     groups: "Groups"
     hexcode: "Hex code"
+    icon: "Icon"
     id: "ID"
     is_default: "Default value"
     is_for_all: "For all projects"

db/migrate/20251111183800_create_icons.rb

@@ -0,0 +1,46 @@
+# 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, 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.
+#++
+class CreateIcons < ActiveRecord::Migration[8.0]
+  def change
+    create_table :icons do |t|
+      t.string :type, null: false
+
+      t.string :octicon_name
+      t.string :custom_file
+
+      t.references :iconifiable, polymorphic: true, null: false
+      t.timestamps
+    end
+
+    add_check_constraint :icons,
+                         "(octicon_name IS NOT NULL) <> (custom_file IS NOT NULL)",
+                         name: "only_one_icon_source"
+  end
+end

frontend/src/custom-elements/index.ts

@@ -0,0 +1 @@
+import './primer-file-field';

frontend/src/custom-elements/primer-file-field.ts

@@ -0,0 +1,40 @@
+import { controller, target } from '@github/catalyst';
+
+@controller
+class PrimerFileFieldElement extends HTMLElement {
+  @target inputElement:HTMLInputElement;
+
+  #abortController:AbortController | null;
+
+  @target button:HTMLElement;
+  @target label:HTMLElement;
+
+  connectedCallback() {
+    this.#abortController?.abort();
+    const {signal} = (this.#abortController = new AbortController());
+
+    this.inputElement.addEventListener('change', () => {
+      const files = this.inputElement.files!;
+      if (files.length === 0) {
+        this.label.textContent = 'no file selected';
+      } else {
+        this.label.textContent = files[0].name;
+      }
+    }, { signal });
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort();
+  }
+}
+
+// if (!window.customElements.get('primer-file-field')) {
+//   window.PrimerFileFieldElement = PrimerFileFieldElement
+//   window.customElements.define('primer-file-field', PrimerFileFieldElement)
+// }
+
+declare global {
+  interface Window {
+    PrimerFileFieldElement:typeof PrimerFileFieldElement
+  }
+}

frontend/src/global_styles/openproject/_forms.sass

@@ -222,3 +222,37 @@ input[type="number"]
 .FormControl-advanced-checkbox-icon,
 .FormControl-advanced-radio-icon
   fill: var(--fgColor-accent)
+
+.FormControl-file-wrap
+  position: relative
+  display: inline-flex
+  align-items: center
+  gap: 0.5rem
+  border: 1px solid #ccc
+  border-radius: 4px
+  padding: 0.4rem 0.5rem 0.4rem 0.5rem
+  width: 280px
+  box-sizing: border-box
+
+.FormControl-file
+  position: absolute
+  inset: 0
+  opacity: 0
+  cursor: pointer
+
+.file-label
+  flex: 1
+  font-size: 0.875rem
+  color: #666
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+
+.file-button
+  padding: 0.35rem 0.75rem
+  border-radius: 4px
+  border: 1px solid #ccc
+  background: #f5f5f5
+  font-size: 0.85rem
+  cursor: pointer
+  white-space: nowrap

frontend/src/main.ts

@@ -11,6 +11,9 @@ import { getMetaElement } from 'core-app/core/setup/globals/global-helpers';
 
 import 'core-app/core/setup/init-vendors';
 import 'core-app/core/setup/init-globals';
+
+import './custom-elements';
+
 import './stimulus/setup';
 import './turbo/setup';
 import { platformBrowser } from '@angular/platform-browser';