Update Primer to version 0.22.2

Gemfile

@@ -382,4 +382,4 @@ end
 
 gem 'openproject-octicons', '~>19.8.0'
 gem 'openproject-octicons_helper', '~>19.8.0'
-gem 'openproject-primer_view_components', '~>0.20.0'
+gem 'openproject-primer_view_components', '~>0.22.2'

Gemfile.lock

@@ -756,7 +756,7 @@ GEM
       actionview
       openproject-octicons (= 19.8.0)
       railties
-    openproject-primer_view_components (0.20.0)
+    openproject-primer_view_components (0.22.2)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       openproject-octicons (>= 19.8.0)
@@ -1227,7 +1227,7 @@ DEPENDENCIES
   openproject-octicons (~> 19.8.0)
   openproject-octicons_helper (~> 19.8.0)
   openproject-openid_connect!
-  openproject-primer_view_components (~> 0.20.0)
+  openproject-primer_view_components (~> 0.22.2)
   openproject-recaptcha!
   openproject-reporting!
   openproject-storages!

app/views/augmented/_autocomplete_select_decoration.html.erb

@@ -2,9 +2,10 @@
   <%= content_tag :'opce-select-decoration',
                   {},
                   data: {
-                      "multiselect": multiple,
+                      multiple:,
                       "input-name": input_name,
                       "input-id": input_id,
+                      "append-to": defined?(append_to) ? append_to : 'body',
                       key:,
                       options: JSON.dump(select_options),
                   } %>

frontend/package.json

@@ -97,7 +97,7 @@
     "@ngneat/content-loader": "^7.0.0",
     "@ngx-formly/core": "^6.1.4",
     "@openproject/octicons-angular": "^19.8.0",
-    "@openproject/primer-view-components": "^0.20.0",
+    "@openproject/primer-view-components": "^0.22.2",
     "@openproject/reactivestates": "^3.0.1",
     "@primer/css": "^21.1.1",
     "@uirouter/angular": "^12.0.0",
@@ -175,6 +175,6 @@
     "generate-typings": "tsc -d -p src/tsconfig.app.json"
   },
   "overrides": {
-    "@primer/view-components": "npm:@openproject/primer-view-components@^0.20.0"
+    "@primer/view-components": "npm:@openproject/primer-view-components@^0.22.2"
   }
 }

frontend/src/app/shared/components/autocompleter/autocomplete-select-decoration/autocomplete-select-decoration.component.ts

@@ -27,13 +27,17 @@
 //++
 
 import {
-  Component, ElementRef, OnInit, ViewChild,
+  AfterViewInit,
+  Component,
+  OnInit,
+  ViewChild,
 } from '@angular/core';
 import { NgSelectComponent } from '@ng-select/ng-select';
-import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { HalResource } from 'core-app/features/hal/resources/hal-resource';
-import { IProjectAutocompleterData } from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component';
 import { IProjectAutocompleteItem } from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocomplete-item';
+import {
+  IAutocompleteItem,
+  OpAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component';
 
 type SelectItem = { label:string, value:string, selected?:boolean };
 
@@ -44,10 +48,10 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat
     <op-project-autocompleter
       *ngIf="isProjectField()"
       [model]="currentProjectSelection"
-      [multiple]="multiselect"
+      [multiple]="multiple"
       [labelForId]="labelForId"
       (change)="updateProjectSelection($event)"
-      appendTo="body"
+      [appendTo]="appendTo"
     >
     </op-project-autocompleter>
 
@@ -56,10 +60,10 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat
       [items]="options"
       [labelForId]="labelForId"
       bindLabel="label"
-      [multiple]="multiselect"
+      [multiple]="multiple"
       [virtualScroll]="true"
       [ngModel]="selected"
-      appendTo="body"
+      [appendTo]="appendTo"
       [placeholder]="text.placeholder"
       (ngModelChange)="updateSelection($event)">
       <ng-template ng-option-tmp let-item="item" let-index="index">
@@ -69,14 +73,11 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat
   `,
   selector: autocompleteSelectDecorationSelector,
 })
-export class AutocompleteSelectDecorationComponent implements OnInit {
+export class AutocompleteSelectDecorationComponent extends OpAutocompleterComponent<IAutocompleteItem> implements OnInit, AfterViewInit {
   @ViewChild(NgSelectComponent) public ngSelectComponent:NgSelectComponent;
 
   public options:SelectItem[];
 
-  /** Whether we're a multiselect */
-  public multiselect = false;
-
   /** Get the selected options */
   public selected:SelectItem|SelectItem[];
 
@@ -86,34 +87,26 @@ export class AutocompleteSelectDecorationComponent implements OnInit {
   /** The input name we're syncing selections to */
   private syncInputFieldName:string;
 
-  /** The input id used for label */
-  public labelForId:string;
-
   /** The field key (e.g. status, type, or project)  */
   public key:string;
 
   text = {
     placeholder: this.I18n.t('js.placeholders.selection'),
   };
 
-  constructor(
-    protected elementRef:ElementRef,
-    readonly I18n:I18nService,
-  ) {
-  }
-
   ngOnInit():void {
     const element = this.elementRef.nativeElement as HTMLElement;
 
     // Set options
-    this.multiselect = element.dataset.multiselect === 'true';
-    this.labelForId = element.dataset.inputId!;
+    this.multiple = element.dataset.multiple === 'true';
+    this.labelForId = element.dataset.inputId;
     this.key = element.dataset.key!;
+    this.appendTo = element.dataset.appendTo;
 
     // Get the sync target
     this.syncInputFieldName = element.dataset.inputName!;
-    // Add Rails multiple identifier if multiselect
-    if (this.multiselect) {
+    // Add Rails multiple identifier if multiple
+    if (this.multiple) {
       this.syncInputFieldName += '[]';
     }
 
@@ -127,7 +120,7 @@ export class AutocompleteSelectDecorationComponent implements OnInit {
       this.setInitialProjectSelection();
     }
 
-    if (!this.multiselect) {
+    if (!this.multiple) {
       this.selected = (this.selected as SelectItem[])[0];
     }
 
@@ -137,6 +130,11 @@ export class AutocompleteSelectDecorationComponent implements OnInit {
     element.parentElement!.hidden = false;
   }
 
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+  ngAfterViewInit():void {
+    // do nothing and prevent the parent hook to be called
+  }
+
   setInitialSelection(data:SelectItem[]):void {
     this.updateSelection(data.filter((element) => element.selected));
   }
@@ -185,7 +183,7 @@ export class AutocompleteSelectDecorationComponent implements OnInit {
     const items = _.castArray(this.selected);
     if (items.length === 0) return;
 
-    if (this.multiselect) {
+    if (this.multiple) {
       this.currentProjectSelection = items.map((item:SelectItem) => ({
         id: item.value,
         name: item.label,

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

@@ -195,7 +195,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
 
   @Input() public clearOnBackspace?:boolean = true;
 
-  @Input() public labelForId ? = null;
+  @Input() public labelForId?:string;
 
   @Input() public inputAttrs?:{ [key:string]:string } = {};
 

frontend/src/stimulus/controllers/dynamic/storages/oauth-access-grant-nudge-modal.controller.ts

@@ -29,10 +29,9 @@
  */
 
 import { Controller } from '@hotwired/stimulus';
-import { ModalDialogElement } from '@openproject/primer-view-components/app/components/primer/alpha/modal_dialog';
 
-export default class OAuthAccessGrantNudgeModalController extends Controller<ModalDialogElement> {
+export default class OAuthAccessGrantNudgeModalController extends Controller<HTMLDialogElement> {
   connect() {
-    this.element.open = true;
+    this.element.showModal();
   }
 }

frontend/src/stimulus/controllers/dynamic/storages/open-project-storage-modal.controller.ts

@@ -30,9 +30,8 @@
 
 import { Controller } from '@hotwired/stimulus';
 import { renderStreamMessage } from '@hotwired/turbo';
-import { ModalDialogElement } from '@openproject/primer-view-components/app/components/primer/alpha/modal_dialog';
 
-export default class OpenProjectStorageModalController extends Controller<ModalDialogElement> {
+export default class OpenProjectStorageModalController extends Controller<HTMLDialogElement> {
   static values = {
     projectStorageOpenUrl: String,
     redirectUrl: String,
@@ -43,7 +42,7 @@ export default class OpenProjectStorageModalController extends Controller<ModalD
   redirectUrlValue:string;
 
   connect() {
-    this.element.open = true;
+    this.element.showModal();
     this.interval = 0;
     this.load();
     this.element.addEventListener('close', () => { this.disconnect(); });

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

@@ -6,7 +6,8 @@
                  input_id: builder.field_id(@input.name),
                  select_options: select_options.map(&:to_h),
                  multiple: @autocomplete_options.fetch(:multiple, false),
-                 key: @autocomplete_options.fetch(:resource, '')
+                 key: @autocomplete_options.fetch(:resource, ''),
+                 append_to: @autocomplete_options.fetch(:append_to, 'body')
                } %>
   <% else %>
     <%= angular_component_tag 'opce-autocompleter',

modules/meeting/app/components/work_package_meetings_tab/add_work_package_to_meeting_form_component.html.erb

@@ -16,7 +16,7 @@
                 end
               end
               flex.with_row do
-                render(MeetingAgendaItem::MeetingForm.new(f))
+                render(MeetingAgendaItem::MeetingForm.new(f, wrapper_id: 'add-work-package-to-meeting-dialog'))
               end
               flex.with_row(mt: 3) do
                 render(MeetingAgendaItem::Notes.new(f))