Revert "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.22.2'
+gem 'openproject-primer_view_components', '~>0.20.0'

Gemfile.lock

@@ -756,7 +756,7 @@ GEM
       actionview
       openproject-octicons (= 19.8.0)
       railties
-    openproject-primer_view_components (0.22.2)
+    openproject-primer_view_components (0.20.0)
       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.22.2)
+  openproject-primer_view_components (~> 0.20.0)
   openproject-recaptcha!
   openproject-reporting!
   openproject-storages!

app/views/augmented/_autocomplete_select_decoration.html.erb

@@ -2,10 +2,9 @@
   <%= content_tag :'opce-select-decoration',
                   {},
                   data: {
-                      multiple:,
+                      "multiselect": 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-lock.json

@@ -46,7 +46,7 @@
         "@ngneat/content-loader": "^7.0.0",
         "@ngx-formly/core": "^6.1.4",
         "@openproject/octicons-angular": "^19.8.0",
-        "@openproject/primer-view-components": "^0.22.2",
+        "@openproject/primer-view-components": "^0.20.0",
         "@openproject/reactivestates": "^3.0.1",
         "@primer/css": "^21.1.1",
         "@uirouter/angular": "^12.0.0",
@@ -4491,9 +4491,9 @@
       }
     },
     "node_modules/@oddbird/popover-polyfill": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.8.tgz",
-      "integrity": "sha512-+aK7EHL3VggfsWGVqUwvtli2+kP5OWyseAsrefhzR2XWoi2oALUCeoDn63i5WS3ZOmLiXHRNBwHPeta8w+aM1g=="
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.7.tgz",
+      "integrity": "sha512-WNthEIPPXnFQkumLby6yVxhyOcA/GtMnlByHwEglMO9WZckoaqidnpLp2JFzAh2RDOZxn+Xt3ffSMKId9cPjOQ=="
     },
     "node_modules/@openproject/octicons-angular": {
       "version": "19.8.0",
@@ -4510,9 +4510,9 @@
       }
     },
     "node_modules/@openproject/primer-view-components": {
-      "version": "0.22.2",
-      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.22.2.tgz",
-      "integrity": "sha512-Tiasv9lc/Ey87PuU4ZffzWhZwxp+RBQULD4bFWjOB/03yPGHejHuzl47Ak2IxT/laUUotVFZsIWvo2a5/7H0Kg==",
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.20.0.tgz",
+      "integrity": "sha512-RWSLLS3PvyXyqXB53l4foQcb4hfOd8l+LWVedOHbYa+8nWVotkgi1TUrZCeIRjIOuTQrmLNx2xyBcmANcktQAw==",
       "dependencies": {
         "@github/auto-check-element": "^5.2.0",
         "@github/auto-complete-element": "^3.6.0",
@@ -4523,7 +4523,7 @@
         "@github/include-fragment-element": "^6.1.1",
         "@github/relative-time-element": "^4.0.0",
         "@github/tab-container-element": "^3.1.2",
-        "@oddbird/popover-polyfill": "^0.3.8",
+        "@oddbird/popover-polyfill": "^0.3.6",
         "@primer/behaviors": "^1.3.4"
       }
     },
@@ -4595,9 +4595,9 @@
     },
     "node_modules/@primer/view-components": {
       "name": "@openproject/primer-view-components",
-      "version": "0.22.2",
-      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.22.2.tgz",
-      "integrity": "sha512-Tiasv9lc/Ey87PuU4ZffzWhZwxp+RBQULD4bFWjOB/03yPGHejHuzl47Ak2IxT/laUUotVFZsIWvo2a5/7H0Kg==",
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.20.0.tgz",
+      "integrity": "sha512-RWSLLS3PvyXyqXB53l4foQcb4hfOd8l+LWVedOHbYa+8nWVotkgi1TUrZCeIRjIOuTQrmLNx2xyBcmANcktQAw==",
       "dependencies": {
         "@github/auto-check-element": "^5.2.0",
         "@github/auto-complete-element": "^3.6.0",
@@ -4608,7 +4608,7 @@
         "@github/include-fragment-element": "^6.1.1",
         "@github/relative-time-element": "^4.0.0",
         "@github/tab-container-element": "^3.1.2",
-        "@oddbird/popover-polyfill": "^0.3.8",
+        "@oddbird/popover-polyfill": "^0.3.6",
         "@primer/behaviors": "^1.3.4"
       }
     },
@@ -23681,9 +23681,9 @@
       "optional": true
     },
     "@oddbird/popover-polyfill": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.8.tgz",
-      "integrity": "sha512-+aK7EHL3VggfsWGVqUwvtli2+kP5OWyseAsrefhzR2XWoi2oALUCeoDn63i5WS3ZOmLiXHRNBwHPeta8w+aM1g=="
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.7.tgz",
+      "integrity": "sha512-WNthEIPPXnFQkumLby6yVxhyOcA/GtMnlByHwEglMO9WZckoaqidnpLp2JFzAh2RDOZxn+Xt3ffSMKId9cPjOQ=="
     },
     "@openproject/octicons-angular": {
       "version": "19.8.0",
@@ -23694,9 +23694,9 @@
       }
     },
     "@openproject/primer-view-components": {
-      "version": "0.22.2",
-      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.22.2.tgz",
-      "integrity": "sha512-Tiasv9lc/Ey87PuU4ZffzWhZwxp+RBQULD4bFWjOB/03yPGHejHuzl47Ak2IxT/laUUotVFZsIWvo2a5/7H0Kg==",
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.20.0.tgz",
+      "integrity": "sha512-RWSLLS3PvyXyqXB53l4foQcb4hfOd8l+LWVedOHbYa+8nWVotkgi1TUrZCeIRjIOuTQrmLNx2xyBcmANcktQAw==",
       "requires": {
         "@github/auto-check-element": "^5.2.0",
         "@github/auto-complete-element": "^3.6.0",
@@ -23707,7 +23707,7 @@
         "@github/include-fragment-element": "^6.1.1",
         "@github/relative-time-element": "^4.0.0",
         "@github/tab-container-element": "^3.1.2",
-        "@oddbird/popover-polyfill": "^0.3.8",
+        "@oddbird/popover-polyfill": "^0.3.6",
         "@primer/behaviors": "^1.3.4"
       }
     },
@@ -23752,7 +23752,7 @@
       "integrity": "sha512-1XRx8FwWxrr8SSZit2C9KxaofTi0CELKbGmHGpmYQmRIAECIa912Emp4BlAC7iQmf3Tb5oZOkke5zuAt+seDxg==",
       "requires": {
         "@primer/primitives": "^7.12.0",
-        "@primer/view-components": "npm:@openproject/primer-view-components@^0.22.2"
+        "@primer/view-components": "npm:@openproject/primer-view-components@^0.20.0"
       }
     },
     "@primer/primitives": {
@@ -23761,9 +23761,9 @@
       "integrity": "sha512-tiJEMxy5hDi9a3YxgrBeJScLPUQSLuWsKDNuoXXiX7zLzejnYdxXXG3qOaNHzNyyn8TkSQkzmKx0ioaSLR2zNw=="
     },
     "@primer/view-components": {
-      "version": "npm:@openproject/primer-view-components@0.22.2",
-      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.22.2.tgz",
-      "integrity": "sha512-Tiasv9lc/Ey87PuU4ZffzWhZwxp+RBQULD4bFWjOB/03yPGHejHuzl47Ak2IxT/laUUotVFZsIWvo2a5/7H0Kg==",
+      "version": "npm:@openproject/primer-view-components@0.20.0",
+      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.20.0.tgz",
+      "integrity": "sha512-RWSLLS3PvyXyqXB53l4foQcb4hfOd8l+LWVedOHbYa+8nWVotkgi1TUrZCeIRjIOuTQrmLNx2xyBcmANcktQAw==",
       "requires": {
         "@github/auto-check-element": "^5.2.0",
         "@github/auto-complete-element": "^3.6.0",
@@ -23774,7 +23774,7 @@
         "@github/include-fragment-element": "^6.1.1",
         "@github/relative-time-element": "^4.0.0",
         "@github/tab-container-element": "^3.1.2",
-        "@oddbird/popover-polyfill": "^0.3.8",
+        "@oddbird/popover-polyfill": "^0.3.6",
         "@primer/behaviors": "^1.3.4"
       }
     },

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.22.2",
+    "@openproject/primer-view-components": "^0.20.0",
     "@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.22.2"
+    "@primer/view-components": "npm:@openproject/primer-view-components@^0.20.0"
   }
 }

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

@@ -27,17 +27,13 @@
 //++
 
 import {
-  AfterViewInit,
-  Component,
-  OnInit,
-  ViewChild,
+  Component, ElementRef, 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 };
 
@@ -48,10 +44,10 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat
     <op-project-autocompleter
       *ngIf="isProjectField()"
       [model]="currentProjectSelection"
-      [multiple]="multiple"
+      [multiple]="multiselect"
       [labelForId]="labelForId"
       (change)="updateProjectSelection($event)"
-      [appendTo]="appendTo"
+      appendTo="body"
     >
     </op-project-autocompleter>
 
@@ -60,10 +56,10 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat
       [items]="options"
       [labelForId]="labelForId"
       bindLabel="label"
-      [multiple]="multiple"
+      [multiple]="multiselect"
       [virtualScroll]="true"
       [ngModel]="selected"
-      [appendTo]="appendTo"
+      appendTo="body"
       [placeholder]="text.placeholder"
       (ngModelChange)="updateSelection($event)">
       <ng-template ng-option-tmp let-item="item" let-index="index">
@@ -73,11 +69,14 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat
   `,
   selector: autocompleteSelectDecorationSelector,
 })
-export class AutocompleteSelectDecorationComponent extends OpAutocompleterComponent<IAutocompleteItem> implements OnInit, AfterViewInit {
+export class AutocompleteSelectDecorationComponent implements OnInit {
   @ViewChild(NgSelectComponent) public ngSelectComponent:NgSelectComponent;
 
   public options:SelectItem[];
 
+  /** Whether we're a multiselect */
+  public multiselect = false;
+
   /** Get the selected options */
   public selected:SelectItem|SelectItem[];
 
@@ -87,6 +86,9 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon
   /** 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;
 
@@ -94,19 +96,24 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon
     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.multiple = element.dataset.multiple === 'true';
-    this.labelForId = element.dataset.inputId;
+    this.multiselect = element.dataset.multiselect === '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 multiple
-    if (this.multiple) {
+    // Add Rails multiple identifier if multiselect
+    if (this.multiselect) {
       this.syncInputFieldName += '[]';
     }
 
@@ -120,7 +127,7 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon
       this.setInitialProjectSelection();
     }
 
-    if (!this.multiple) {
+    if (!this.multiselect) {
       this.selected = (this.selected as SelectItem[])[0];
     }
 
@@ -130,11 +137,6 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon
     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));
   }
@@ -183,7 +185,7 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon
     const items = _.castArray(this.selected);
     if (items.length === 0) return;
 
-    if (this.multiple) {
+    if (this.multiselect) {
       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?:string;
+  @Input() public labelForId ? = null;
 
   @Input() public inputAttrs?:{ [key:string]:string } = {};
 

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

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

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

@@ -30,8 +30,9 @@
 
 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<HTMLDialogElement> {
+export default class OpenProjectStorageModalController extends Controller<ModalDialogElement> {
   static values = {
     projectStorageOpenUrl: String,
     redirectUrl: String,
@@ -42,7 +43,7 @@ export default class OpenProjectStorageModalController extends Controller<HTMLDi
   redirectUrlValue:string;
 
   connect() {
-    this.element.showModal();
+    this.element.open = true;
     this.interval = 0;
     this.load();
     this.element.addEventListener('close', () => { this.disconnect(); });

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

@@ -6,8 +6,7 @@
                  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, ''),
-                 append_to: @autocomplete_options.fetch(:append_to, 'body')
+                 key: @autocomplete_options.fetch(:resource, '')
                } %>
   <% 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, wrapper_id: 'add-work-package-to-meeting-dialog'))
+                render(MeetingAgendaItem::MeetingForm.new(f))
               end
               flex.with_row(mt: 3) do
                 render(MeetingAgendaItem::Notes.new(f))

modules/meeting/app/forms/meeting_agenda_item/meeting_form.rb

@@ -38,8 +38,7 @@ class MeetingAgendaItem::MeetingForm < ApplicationForm
       caption: I18n.t("label_meeting_selection_caption"),
       autocomplete_options: {
         multiple: false,
-        decorated: true,
-        append_to: append_to_container
+        decorated: true
       }
     ) do |select|
       MeetingAgendaItems::CreateContract
@@ -54,13 +53,8 @@ class MeetingAgendaItem::MeetingForm < ApplicationForm
     end
   end
 
-  def initialize(disabled: false, wrapper_id: nil)
+  def initialize(disabled: false)
     super()
     @disabled = disabled
-    @wrapper_id = wrapper_id
-  end
-
-  def append_to_container
-    @wrapper_id.nil? ? 'body' : "##{@wrapper_id}"
   end
 end