WIP Pattern input field

app/components/_index.sass

@@ -21,3 +21,4 @@
 @import "work_package_relations_tab/index_component"
 @import "users/hover_card_component"
 @import "enterprise_edition/banner_component"
+@import "work_packages/types/pattern_autocompleter"

app/components/work_packages/types/pattern_autocompleter.html.erb

@@ -0,0 +1,119 @@
+<%#-- 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.
+
+++#%>
+
+<%=
+  content_tag(
+    :div,
+    class: "pattern-autocompleter",
+    "data-controller": "pattern-autocompleter",
+    "data-pattern-autocompleter-pattern-initial-value": @value
+  ) do
+%>
+  <%=
+    @input.builder.hidden_field(
+      name,
+      value: @value,
+      data: {
+        "pattern-autocompleter-target": "formInput"
+      }
+    )
+  %>
+
+  <template data-pattern-autocompleter-target="tokenTemplate">
+    <%=
+      render(
+        Primer::Beta::Label.new(
+          contenteditable: false,
+          tag: :span, display: :inline, scheme: :accent,
+          "data-role": :token
+        )
+      ) do
+    %>
+      <%= content_tag(:span, style: "cursor: default;", "data-role": "token-text") { "__VALUE__" } %>
+      <%=
+        render(
+          Primer::Beta::Octicon.new(
+            icon: :x, size: :xsmall, style: "cursor: pointer;margin: 0.2em;",
+            "data-action": "click->pattern-autocompleter#remove_token"
+          )
+        )
+      %>
+    <% end %>
+  </template>
+
+  <%= content_tag(:div, style: "position: relative;") do %>
+      <%=
+        render(
+          Primer::Beta::Octicon.new(
+            icon: "triangle-down",
+            size: :small,
+            style: "cursor: pointer;position: absolute;right: 1em;top: 0.5em;",
+            "data-action": "click->pattern-autocompleter#suggestions_toggle"
+          )
+        )
+      %>
+      <%=
+        render(
+          Primer::Box.new(
+            contenteditable: true,
+            border: true, border_radius: 2, p: 1,
+            style: "white-space: pre-wrap;",
+            "data-pattern-autocompleter-target": "content",
+            data: {
+              action: "keydown->pattern-autocompleter#input_keydown
+                       input->pattern-autocompleter#input_change
+                       mouseup->pattern-autocompleter#input_mouseup
+                       blur->pattern-autocompleter#input_blur"
+            }
+          )
+        )
+      %>
+  <% end %>
+  <%= render(Primer::Box.new(box_shadow: :medium, border_radius: 2)) do %>
+    <%=
+      render(
+        Primer::Alpha::ActionList.new(
+          role: :list,
+          hidden: true,
+          show_dividers: false,
+          "data-pattern-autocompleter-target": "suggestions"
+        )
+      ) do |component|
+        @suggestions.each_key do |key|
+          component.with_divider_content(key.to_s.humanize)
+          entries = @suggestions[key]
+          entries.each do |prop, label|
+            component.with_item(label:, data: select_item_action.merge({ value: prop }))
+          end
+          component.with_divider
+        end
+      end
+    %>
+  <% end %>
+<% end %>

app/components/work_packages/types/pattern_autocompleter.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+# -- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2024 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 WorkPackages
+  module Types
+    class PatternAutocompleter < Primer::Forms::BaseComponent
+      delegate :name, to: :@input
+
+      def initialize(input:, value:, suggestions:)
+        super()
+        @input = input
+        @value = value
+        @suggestions = suggestions
+      end
+
+      def select_item_action
+        {
+          action: "click->pattern-autocompleter#suggestions_select",
+          role: "suggestion-item"
+        }
+      end
+    end
+  end
+end

app/components/work_packages/types/pattern_autocompleter.sass

@@ -0,0 +1,5 @@
+.pattern-autocompleter
+  .selected
+    color: var(--list-item-hover--color)
+    background-color: var(--control-transparent-bgColor-hover)
+

app/forms/work_packages/types/subject_configuration_form.rb

@@ -57,13 +57,13 @@ def has_pattern?(type)
         end
 
         subject_form.group(data: { "admin--subject-configuration-target": "patternInput" }) do |toggleable_group|
-          toggleable_group.text_field(
+          toggleable_group.pattern_autocompleter(
             name: :subject_pattern,
             value: subject_pattern,
+            suggestions: ::Types::Patterns::TokenPropertyMapper.new.tokens_for_type(model),
             label: I18n.t("types.edit.subject_configuration.pattern.label"),
             caption: I18n.t("types.edit.subject_configuration.pattern.caption"),
-            required: true,
-            input_width: :large
+            required: true
           )
         end