Use second-level navigation for the Relations create menu

Author: HDinger

Gemfile

@@ -417,4 +417,4 @@ end
 
 gem "openproject-octicons", "~>19.25.0"
 gem "openproject-octicons_helper", "~>19.25.0"
-gem "openproject-primer_view_components", "~>0.68.0"
+gem "openproject-primer_view_components", "~>0.69.1"

Gemfile.lock

@@ -856,7 +856,7 @@ GEM
       actionview
       openproject-octicons (= 19.25.0)
       railties
-    openproject-primer_view_components (0.68.0)
+    openproject-primer_view_components (0.69.1)
       actionview (>= 7.1.0)
       activesupport (>= 7.1.0)
       openproject-octicons (>= 19.25.0)
@@ -1445,7 +1445,7 @@ DEPENDENCIES
   openproject-octicons (~> 19.25.0)
   openproject-octicons_helper (~> 19.25.0)
   openproject-openid_connect!
-  openproject-primer_view_components (~> 0.68.0)
+  openproject-primer_view_components (~> 0.69.1)
   openproject-recaptcha!
   openproject-reporting!
   openproject-storages!
@@ -1817,7 +1817,7 @@ CHECKSUMS
   openproject-octicons (19.25.0) sha256=16fc221375e693f0e893b1c208286f2d7719ae4dfe080c5415642b221f51f550
   openproject-octicons_helper (19.25.0) sha256=9b1778a67b0015ebe84ca0471f74e31004b985a8dcaaa443f7a2ac365b0a4e2d
   openproject-openid_connect (1.0.0)
-  openproject-primer_view_components (0.68.0) sha256=847cc5e0e2933e3c34f6106c6bb6b68d4563ef649401a59e794660b4aa50c47f
+  openproject-primer_view_components (0.69.1) sha256=34f127506d86e30cd8ce2bad74071d18aa22f0fe7935876bf5363e032084228a
   openproject-recaptcha (1.0.0)
   openproject-reporting (1.0.0)
   openproject-storages (1.0.0)

app/components/work_package_relations_tab/index_component.html.erb

@@ -22,7 +22,13 @@
               t(:label_relation)
             end
 
-            render_add_relations_menu_items(menu, ADD_RELATION_MENU_TYPES)
+            render_add_relations_menu_items(menu, FIRST_LEVEL_RELATION_MENU_TYPES)
+            menu.with_sub_menu_item(
+              label: t("#{I18N_NAMESPACE}.relations.label_other_relations"),
+              menu_id: ADD_RELATION_SUB_MENU
+            ) do |sub_menu|
+              render_add_relations_menu_items(sub_menu, SECOND_LEVEL_RELATION_MENU_TYPES)
+            end
           end
         end
       end

app/components/work_package_relations_tab/index_component.rb

@@ -9,6 +9,7 @@
 class WorkPackageRelationsTab::IndexComponent < ApplicationComponent
   FRAME_ID = "work-package-relations-tab-content"
   ADD_RELATION_ACTION_MENU = "add-relation-action-menu"
+  ADD_RELATION_SUB_MENU = "add-relation-sub-menu"
   ADD_CHILD_ACTION_MENU = "add-child-action-menu"
   I18N_NAMESPACE = "work_package_relations_tab"
 
@@ -17,20 +18,23 @@ class WorkPackageRelationsTab::IndexComponent < ApplicationComponent
     Relation::TYPE_CHILD
   ].freeze
 
-  ADD_RELATION_MENU_TYPES = [
+  FIRST_LEVEL_RELATION_MENU_TYPES = [
     *ADD_CHILD_MENU_TYPES,
-    Relation::TYPE_RELATES,
     Relation::TYPE_FOLLOWS,
     Relation::TYPE_PRECEDES,
     Relation::TYPE_PARENT,
-    Relation::TYPE_DUPLICATES,
-    Relation::TYPE_DUPLICATED,
+    Relation::TYPE_RELATES
+  ].freeze
+
+  SECOND_LEVEL_RELATION_MENU_TYPES = [
     Relation::TYPE_BLOCKS,
     Relation::TYPE_BLOCKED,
     Relation::TYPE_INCLUDES,
     Relation::TYPE_PARTOF,
     Relation::TYPE_REQUIRES,
-    Relation::TYPE_REQUIRED
+    Relation::TYPE_REQUIRED,
+    Relation::TYPE_DUPLICATES,
+    Relation::TYPE_DUPLICATED
   ].freeze
 
   include ApplicationHelper

app/components/work_package_relations_tab/index_component.sass

@@ -1,6 +1,7 @@
 // We reference an ID as one is required to be specified for the action menu list.
 // It can't be nested inside the BEM model as it's placed as a #top-layer element.
 #add-relation-action-menu-list,
+#add-relation-sub-menu-list,
 #add-child-action-menu-list
   max-height: 510px
   max-width: 280px

config/locales/en.yml

@@ -888,6 +888,7 @@ en:
 
       label_parent_singular: "parent"
       label_parent_plural: "parent"
+      label_other_relations: "Other relations"
       ghost_relation_title: "Related work package"
       ghost_relation_description: "This is not visible to you due to permissions."
 

frontend/package-lock.json

@@ -102,12 +102,12 @@
     "@ngneat/content-loader": "^7.0.0",
     "@ngx-formly/core": "^6.1.4",
     "@openproject/octicons-angular": "^19.25.0",
-    "@openproject/primer-view-components": "^0.68.0",
+    "@openproject/primer-view-components": "^0.69.1",
     "@openproject/reactivestates": "^3.0.1",
     "@primer/css": "^21.5.0",
     "@primer/live-region-element": "^0.8.0",
     "@primer/primitives": "^9.1.2",
-    "@primer/view-components": "npm:@openproject/primer-view-components@^0.68.0",
+    "@primer/view-components": "npm:@openproject/primer-view-components@^0.69.1",
     "@types/hotwired__turbo": "^8.0.1",
     "@uirouter/angular": "^13.0.0",
     "@uirouter/core": "^6.1.0",

frontend/package.json

@@ -128,7 +128,7 @@ def add_relation_action_menu
       end
 
       def new_relation_button
-        page.find_test_selector("add-relation-action-menu").find_button
+        page.find_test_selector("add-relation-action-menu").find_button(id: "add-relation-action-menu-button")
       end
 
       def remove_relation(relatable)