Get rid of decorated select altogether

app/models/custom_actions/actions/base.rb

@@ -43,6 +43,12 @@ def allowed_values
     raise NotImplementedError
   end
 
+  def value_objects
+    values.map do |value|
+      allowed_values.find { |v| v[:value] == value }
+    end
+  end
+
   def type
     raise NotImplementedError
   end

app/models/custom_actions/conditions/base.rb

@@ -45,6 +45,12 @@ def allowed_values
       .map { |value, label| { value:, label: } }
   end
 
+  def value_objects
+    values.map do |value|
+      allowed_values.find { |v| v[:value] == value }
+    end
+  end
+
   def human_name
     WorkPackage.human_attribute_name(self.class.key)
   end

app/views/custom_actions/_form.html.erb

@@ -32,18 +32,17 @@
                                       }
             %>
           <% else %>
-            <% selected_values = condition.values
-               select_options = condition.allowed_values.map { |v| { label: v[:label], value: v[:value], selected: selected_values.include?(v[:value]) } } %>
-            <%= render partial: 'augmented/autocomplete_select_decoration',
-                       locals: {
-                         select_options:,
-                         inputs: {
-                           inputName: input_name,
-                           inputId: "custom_action_conditions_#{condition.key}",
-                           multiple: true,
-                           key: condition.key.to_s
-                         }
-                       } %>
+            <%= angular_component_tag 'opce-autocompleter',
+                                      inputs: {
+                                        multiple: true,
+                                        defaultData: false,
+                                        items: condition.allowed_values.map { |v| { id: v[:value], name: v[:label] } },
+                                        model: condition.value_objects.map { |v| { id: v[:value], name: v[:label] } },
+                                        inputName: input_name,
+                                        inputId: "custom_action_conditions_#{condition.key}",
+                                        appendTo: "body",
+                                      }
+            %>
           <% end %>
         </div>
       </div>
@@ -79,18 +78,17 @@
                                             }
                   %>
                 <% else %>
-                  <% selected_values = action.values
-                     select_options = action.allowed_values.map { |v| { label: v[:label], value: v[:value], selected: selected_values.include?(v[:value]) } } %>
-                  <%= render partial: 'augmented/autocomplete_select_decoration',
-                             locals: {
-                               select_options:,
-                               inputs: {
-                                 inputName: input_name,
-                                 inputId: "custom_action_actions_#{action.key}",
-                                 multiple: action.multi_value?,
-                                 key: action.key.to_s
-                               }
-                             } %>
+                  <%= angular_component_tag 'opce-autocompleter',
+                                            inputs: {
+                                              multiple: true,
+                                              defaultData: false,
+                                              items: action.allowed_values.map { |v| { id: v[:value], name: v[:label] } },
+                                              model: action.value_objects.map { |v| { id: v[:value], name: v[:label] } },
+                                              inputName: input_name,
+                                              inputId: "custom_action_conditions_#{action.key}",
+                                              appendTo: "body",
+                                            }
+                  %>
                 <% end %>
               </div>
             </div>

frontend/src/app/app.module.ts

@@ -123,9 +123,6 @@ import {
 import {
   ProjectAutocompleterComponent,
 } from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component';
-import {
-  AutocompleteSelectDecorationComponent,
-} from 'core-app/shared/components/autocompleter/autocomplete-select-decoration/autocomplete-select-decoration.component';
 import {
   MembersAutocompleterComponent,
 } from 'core-app/shared/components/autocompleter/members-autocompleter/members-autocompleter.component';
@@ -426,7 +423,6 @@ export class OpenProjectModule implements DoBootstrap {
     registerCustomElement('opce-global-search', GlobalSearchInputComponent, { injector });
     registerCustomElement('opce-autocompleter', OpAutocompleterComponent, { injector });
     registerCustomElement('opce-project-autocompleter', ProjectAutocompleterComponent, { injector });
-    registerCustomElement('opce-select-decoration', AutocompleteSelectDecorationComponent, { injector });
     registerCustomElement('opce-members-autocompleter', MembersAutocompleterComponent, { injector });
     registerCustomElement('opce-user-autocompleter', UserAutocompleterComponent, { injector });
     registerCustomElement('opce-macro-attribute-value', AttributeValueMacroComponent, { injector });

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts

@@ -146,7 +146,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
 
   @Input() public items?:IOPAutocompleterOption[]|HalResource[];
 
-  private items$ = new BehaviorSubject(null);
+  private items$ = new BehaviorSubject<IOPAutocompleterOption[]|null>(null);
 
   @Input() public clearSearchOnAdd?:boolean = true;
 
@@ -314,6 +314,10 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
       this.typeahead = new BehaviorSubject<string>('');
     }
 
+    if (this.items) {
+      this.items$.next(this.items as IOPAutocompleterOption[]);
+    }
+
     if (this.inputValue && !this.model) {
       this
         .opAutocompleterService
@@ -328,8 +332,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
 
   ngOnChanges(changes:SimpleChanges):void {
     if (changes.items) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      this.items$.next(changes.items.currentValue);
+      this.items$.next(changes.items.currentValue as IOPAutocompleterOption[]);
     }
   }
 

frontend/src/app/shared/components/autocompleter/openproject-autocompleter.module.ts

@@ -18,9 +18,6 @@ import {
 import {
   TimeEntryWorkPackageAutocompleterComponent,
 } from 'core-app/shared/components/autocompleter/te-work-package-autocompleter/te-work-package-autocompleter.component';
-import {
-  AutocompleteSelectDecorationComponent,
-} from 'core-app/shared/components/autocompleter/autocomplete-select-decoration/autocomplete-select-decoration.component';
 import {
   VersionAutocompleterComponent,
 } from 'core-app/shared/components/autocompleter/version-autocompleter/version-autocompleter.component';
@@ -67,7 +64,6 @@ export const OPENPROJECT_AUTOCOMPLETE_COMPONENTS = [
   ProjectAutocompleterComponent,
   ProjectAutocompleterTemplateComponent,
   ColorsAutocompleterComponent,
-  AutocompleteSelectDecorationComponent,
   OpAutocompleterComponent,
   OpAutocompleterOptionTemplateDirective,
   OpAutocompleterLabelTemplateDirective,

frontend/src/global_styles/content/_index.sass

@@ -2,7 +2,6 @@
 @import accounts_mobile
 @import api_docs
 @import avatar
-@import augmented
 @import badges
 @import blockquotes
 @import context_menu

lib/primer/open_project/forms/autocompleter.html.erb

@@ -1,31 +1,9 @@
 <%= render(FormControl.new(input: @input, data: @wrapper_data_attributes)) do %>
   <%= content_tag(:div, **@field_wrap_arguments) do %>
-    <% if decorated_select? %>
-      <%= render partial: '/augmented/autocomplete_select_decoration',
-                 formats: %i[html],
-                 locals: {
-                   inputs: @autocomplete_options.merge(
-                     classes: "ng-select--primerized #{@input.invalid? ? '-error' : ''}",
-                     inputName: @autocomplete_options.fetch(:inputName) { builder.field_name(@input.name) },
-                     inputId: @autocomplete_options.fetch(:inputId) { builder.field_id(@input.name) },
-                     inputValue: @autocomplete_options.fetch(:inputValue) { builder.object.send(@input.name) },
-                     key: @autocomplete_options.fetch(:resource, ''),
-                     defaultData: @autocomplete_options.fetch(:defaultData) { true }
-                   ),
-                   select_options: select_options.map(&:to_h),
-                 } %>
-    <% else %>
-      <%= content_tag(:div, class: ("projects-autocomplete-with-search-icon" if @autocomplete_options.delete(:with_search_icon))) do %>
-        <%= angular_component_tag @autocomplete_options.fetch(:component),
-                                  data: @autocomplete_options.delete(:data) { {} },
-                                  inputs: @autocomplete_options.merge(
-                                    classes: "ng-select--primerized #{@input.invalid? ? '-error' : ''}",
-                                    inputName: @autocomplete_options.fetch(:inputName) { builder.field_name(@input.name) },
-                                    inputValue: @autocomplete_options.fetch(:inputValue) { builder.object.send(@input.name) },
-                                    defaultData: @autocomplete_options.fetch(:defaultData) { true }
-                                  )
-        %>
-      <% end %>
+    <%= content_tag(:div, class: ("projects-autocomplete-with-search-icon" if @with_search_icon)) do %>
+      <%= angular_component_tag(@autocomplete_component,
+                                data: @autocomplete_data,
+                                inputs: @autocomplete_inputs) %>
     <% end %>
   <% end %>
 <% end %>