Merge pull request #21633 from opf/merge-release/17.0-20260112112144

Merge release/17.0 into dev

Author: myabc

Gemfile

@@ -428,4 +428,4 @@ end
 
 gem "openproject-octicons", "~>19.32.0"
 gem "openproject-octicons_helper", "~>19.32.0"
-gem "openproject-primer_view_components", "~>0.79.0"
+gem "openproject-primer_view_components", "~>0.79.1"

Gemfile.lock

@@ -879,7 +879,7 @@ GEM
       actionview
       openproject-octicons (= 19.32.0)
       railties
-    openproject-primer_view_components (0.79.0)
+    openproject-primer_view_components (0.79.1)
       actionview (>= 7.2.0)
       activesupport (>= 7.2.0)
       openproject-octicons (>= 19.30.1)
@@ -1652,7 +1652,7 @@ DEPENDENCIES
   openproject-octicons (~> 19.32.0)
   openproject-octicons_helper (~> 19.32.0)
   openproject-openid_connect!
-  openproject-primer_view_components (~> 0.79.0)
+  openproject-primer_view_components (~> 0.79.1)
   openproject-recaptcha!
   openproject-reporting!
   openproject-storages!
@@ -2028,7 +2028,7 @@ CHECKSUMS
   openproject-octicons (19.32.0) sha256=e9c908e7c4310d57e1dece8fc506339862f18b67b3b67d549e8f56a7b763d48b
   openproject-octicons_helper (19.32.0) sha256=687a8b173c6436634397477c1f05b0a575e52745a5cc1aef03351272e73e3832
   openproject-openid_connect (1.0.0)
-  openproject-primer_view_components (0.79.0) sha256=2bce8ba03527bf0998adb4a3aa672d70bd3c475413da2ea084cb21668acfbb9b
+  openproject-primer_view_components (0.79.1) sha256=3cb8315ed0ea0cefa831764f9b1c54a4aa242a3bd771626ad2699e62a228519a
   openproject-recaptcha (1.0.0)
   openproject-reporting (1.0.0)
   openproject-storages (1.0.0)

frontend/package-lock.json

@@ -110,12 +110,12 @@
     "@ng-select/ng-select": "^20.1.0",
     "@ngneat/content-loader": "^7.0.0",
     "@openproject/octicons-angular": "^19.32.0",
-    "@openproject/primer-view-components": "^0.79.0",
+    "@openproject/primer-view-components": "^0.79.1",
     "@openproject/reactivestates": "^3.0.1",
     "@primer/css": "^22.0.2",
     "@primer/live-region-element": "^0.8.0",
     "@primer/primitives": "^11.3.2",
-    "@primer/view-components": "npm:@openproject/primer-view-components@^0.79.0",
+    "@primer/view-components": "npm:@openproject/primer-view-components@^0.79.1",
     "@rails/request.js": "^0.0.13",
     "@stimulus-components/auto-submit": "^6.0.0",
     "@stimulus-components/reveal": "^5.0.0",

frontend/package.json

@@ -11,7 +11,6 @@ $search-input-height-mobile: 36px
         width: unset
         min-width: unset
         flex-basis: 100%
-        position: unset
         flex-grow: 1
 
         .scroll-host
@@ -34,11 +33,13 @@ $search-input-height-mobile: 36px
           width: 0 !important
           padding-left: 0.75rem !important
 
-        .ng-input input
+        .ng-input
           height: 36px
+          top: 0 !important
 
         .ng-dropdown-panel
           width: 100% !important
+          min-width: unset !important
 
     .top-menu-search--back-button
       @include unset-button-styles

frontend/src/app/core/global_search/input/global-search-input-mobile.component.sass

@@ -34,6 +34,7 @@
     class="global-search"
     [placeholder]="effectivePlaceholder"
     [ariaLabel]="effectivePlaceholder"
+    [appendTo]="'#global-search-input'"
     [dropdownPosition]="'bottom'"
     [classes]="{'top-menu-search--input': true, '-markable': markable, '-expanded': expanded, 'ng-select--primerized': true }"
     [inputAttrs]="{ 'class': 'global-search--input', 'name': 'global-search--input', autocomplete: 'off'}"

frontend/src/app/core/global_search/input/global-search-input.component.html

@@ -30,6 +30,8 @@
 
 import { User } from '@blocknote/core/comments';
 import { HocuspocusProvider } from '@hocuspocus/provider';
+import { Application } from '@hotwired/stimulus';
+import FlashController from 'core-stimulus/controllers/flash.controller';
 import { LiveCollaborationManager } from 'core-stimulus/helpers/live-collaboration-helpers';
 import { ShadowDomWrapper } from 'op-blocknote-extensions';
 import React from 'react';
@@ -41,15 +43,20 @@ class BlockNoteElement extends HTMLElement {
   private mount:HTMLDivElement;
   private errorContainer:HTMLDivElement;
   private reactRoot:Root|null = null;
+  private stimulusApp:Application|null = null;
 
   constructor() {
     super();
 
     const shadowRoot = this.attachShadow({ mode: 'open' });
+
     // Container for connection error/recovery messages (rendered by React via fetchConnectionTemplate)
     this.errorContainer = document.createElement('div');
     this.errorContainer.id = 'documents-show-edit-view-connection-error-notice-component';
+    this.errorContainer.dataset.controller = 'flash';
+    this.errorContainer.dataset.flashAutohideValue = 'true';
     this.mount = document.createElement('div');
+
     shadowRoot.appendChild(this.errorContainer);
     shadowRoot.appendChild(this.mount);
 
@@ -71,6 +78,11 @@ class BlockNoteElement extends HTMLElement {
   }
 
   connectedCallback() {
+    // Initialize Stimulus application within shadow DOM
+    this.stimulusApp = Application.start(this.errorContainer);
+    this.stimulusApp.register('flash', FlashController);
+
+    // Initialize React application within shadow DOM
     this.reactRoot = createRoot(this.mount);
 
     const collaborationEnabled = this.getAttribute('collaboration-enabled') === 'true';
@@ -93,6 +105,11 @@ class BlockNoteElement extends HTMLElement {
       this.reactRoot.unmount();
       this.reactRoot = null;
     }
+
+    if (this.stimulusApp) {
+      this.stimulusApp.stop();
+      this.stimulusApp = null;
+    }
   }
 
   private BlockNoteReactContainer = (hocuspocusProvider?:HocuspocusProvider) => {

frontend/src/elements/block-note-element.ts

@@ -91,10 +91,6 @@ ul.SegmentedControl,
   align-self: center
   min-width: var(--control-medium-size)
 
-  &.op-app-header--modules-menu-button svg
-    height: 20px
-    width: 20px
-
   &:hover
     color: var(--header-item-font-hover-color)
 

frontend/src/global_styles/primer/_overrides.sass

@@ -38,8 +38,7 @@ def render_module_top_menu_node(item_groups = module_top_menu_item_groups)
                                        position: :left) do |dialog|
         dialog.with_show_button(icon: "op-grid-menu",
                                 scheme: :invisible,
-                                size: :large,
-                                classes: "op-app-header--primer-button op-app-header--modules-menu-button",
+                                classes: "op-app-header--primer-button",
                                 test_selector: "op-app-header--modules-menu-button",
                                 "aria-controls": "op-app-header--modules-menu-list",
                                 "aria-label": I18n.t("label_global_modules"))