Replace angular sidemenu with rails based Submenu component for TeamP…

…lanner module

app/components/open_project/common/submenu_component.html.erb

@@ -60,7 +60,7 @@
           <% menu_item.children.each do |child_item| %>
             <li class="op-sidemenu--item" data-filter--filter-list-target="searchItem">
               <% selected = child_item.selected ? 'selected' : '' %>
-              <a class="op-sidemenu--item-action <%= selected %>" href="<%= child_item.href %>">
+              <a class="op-sidemenu--item-action <%= selected %>" href="<%= child_item.href %>" data-test-selector="op-sidemenu--item-action">
                 <span class="op-sidemenu--item-title"><%= child_item.title %></span>
               </a>
             </li>

frontend/src/app/core/setup/global-dynamic-components.const.ts

@@ -143,10 +143,6 @@ import {
   opInAppNotificationBellSelector,
 } from 'core-app/features/in-app-notifications/bell/in-app-notification-bell.component';
 import { IanMenuComponent, ianMenuSelector } from 'core-app/features/in-app-notifications/center/menu/menu.component';
-import {
-  opTeamPlannerSidemenuSelector,
-  TeamPlannerSidemenuComponent,
-} from 'core-app/features/team-planner/team-planner/sidemenu/team-planner-sidemenu.component';
 import {
   OpModalOverlayComponent,
   opModalOverlaySelector,
@@ -213,7 +209,6 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: headerProjectSelectSelector, cls: OpHeaderProjectSelectComponent },
   { selector: wpOverviewGraphSelector, cls: WorkPackageOverviewGraphComponent },
   { selector: opViewSelectSelector, cls: ViewSelectComponent },
-  { selector: opTeamPlannerSidemenuSelector, cls: TeamPlannerSidemenuComponent },
   { selector: triggerActionsEntryComponentSelector, cls: TriggerActionsEntryComponent, embeddable: true },
   { selector: editableQueryPropsSelector, cls: EditableQueryPropsComponent },
   { selector: backupSelector, cls: BackupComponent },

frontend/src/app/features/team-planner/team-planner/team-planner.module.ts

@@ -14,7 +14,6 @@ import { TeamPlannerPageComponent } from 'core-app/features/team-planner/team-pl
 import { OpSharedModule } from 'core-app/shared/shared.module';
 import { AddExistingPaneComponent } from './add-work-packages/add-existing-pane.component';
 import { OpenprojectContentLoaderModule } from 'core-app/shared/components/op-content-loader/openproject-content-loader.module';
-import { TeamPlannerSidemenuComponent } from 'core-app/features/team-planner/team-planner/sidemenu/team-planner-sidemenu.component';
 import { TeamPlannerViewSelectMenuDirective } from 'core-app/features/team-planner/team-planner/view-select/view-select-menu.directive';
 
 @NgModule({
@@ -23,7 +22,6 @@ import { TeamPlannerViewSelectMenuDirective } from 'core-app/features/team-plann
     TeamPlannerPageComponent,
     AddAssigneeComponent,
     AddExistingPaneComponent,
-    TeamPlannerSidemenuComponent,
     TeamPlannerViewSelectMenuDirective,
   ],
   imports: [

frontend/src/app/features/team-planner/team-planner/team-planner.routes.ts

@@ -33,6 +33,13 @@ import { WorkPackagesBaseComponent } from 'core-app/features/work-packages/routi
 import { TeamPlannerPageComponent } from 'core-app/features/team-planner/team-planner/page/team-planner-page.component';
 import { TeamPlannerComponent } from 'core-app/features/team-planner/team-planner/planner/team-planner.component';
 
+export const sidemenuId = 'team_planner_sidemenu';
+export const sideMenuOptions = {
+  sidemenuId,
+  hardReloadOnBaseRoute: true,
+  defaultQuery: 'new',
+};
+
 export const TEAM_PLANNER_ROUTES:Ng2StateDeclaration[] = [
   {
     name: 'team_planner',
@@ -56,12 +63,14 @@ export const TEAM_PLANNER_ROUTES:Ng2StateDeclaration[] = [
     redirectTo: 'team_planner.page.show',
     data: {
       bodyClasses: 'router--team-planner',
+      sideMenuOptions,
     },
   },
   {
     name: 'team_planner.page.show',
     data: {
       baseRoute: 'team_planner.page.show',
+      sideMenuOptions,
     },
     views: {
       'content-left': { component: TeamPlannerComponent },

modules/team_planner/app/controllers/team_planner/menus_controller.rb

@@ -0,0 +1,42 @@
+# -- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2010-2023 the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+# ++
+module ::TeamPlanner
+  class MenusController < ApplicationController
+    before_action :find_project_by_project_id,
+                  :authorize
+
+    def show
+      @submenu_menu_items = ::TeamPlanner::Menu.new(project: @project, params:).menu_items
+      @create_btn_options = if User.current.allowed_in_project?(:manage_team_planner, @project)
+                              { href: new_project_team_planners_path(@project), text: I18n.t("label_team_planner") }
+                            end
+
+      render layout: nil
+    end
+  end
+end

modules/team_planner/app/menus/team_planner/menu.rb

@@ -0,0 +1,56 @@
+# -- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2010-2023 the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+# ++
+module TeamPlanner
+  class Menu < Submenu
+    attr_reader :view_type, :project
+
+    def initialize(project: nil, params: nil)
+      @view_type = "team_planner"
+      @project = project
+      @params = params
+
+      super(view_type:, project:, params:)
+    end
+
+    def default_queries
+      []
+    end
+
+    def selected?(query_params)
+      query_params[:id].to_s == params[:id]
+    end
+
+    def query_params(id)
+      { id: }
+    end
+
+    def query_path(query_params)
+      project_team_planner_path(project, query_params)
+    end
+  end
+end

modules/team_planner/app/views/team_planner/menus/_menu.html.erb

@@ -0,0 +1,5 @@
+  <%= turbo_frame_tag "team_planner_sidemenu",
+                      src: menu_project_team_planners_path(@project, **params.permit(:id)),
+                      target: '_top',
+                      data: { turbo: false },
+                      loading: :lazy %>

modules/team_planner/app/views/team_planner/menus/show.html.erb

@@ -0,0 +1,5 @@
+<%= turbo_frame_tag "team_planner_sidemenu" do %>
+  <%= render OpenProject::Common::SubmenuComponent.new(sidebar_menu_items: @submenu_menu_items,
+                                                       searchable: true,
+                                                       create_btn_options: @create_btn_options) %>
+<% end %>

modules/team_planner/config/routes.rb

@@ -15,6 +15,7 @@
               only: %i[index destroy],
               as: :team_planners do
       collection do
+        get "menu" => "team_planner/menus#show"
         get "/upsale", to: "team_planner/team_planner#upsale", as: :upsale
         get "/new", to: "team_planner/team_planner#show", as: :new
       end

modules/team_planner/lib/open_project/team_planner/engine.rb

@@ -38,7 +38,8 @@ class Engine < ::Rails::Engine
              settings: {} do
       project_module :team_planner_view, dependencies: :work_package_tracking, enterprise_feature: true do
         permission :view_team_planner,
-                   { "team_planner/team_planner": %i[index show upsale overview] },
+                   { "team_planner/team_planner": %i[index show upsale overview],
+                     "team_planner/menus": %i[show] },
                    permissible_on: :project,
                    dependencies: %i[view_work_packages],
                    contract_actions: { team_planner: %i[read] }
@@ -80,7 +81,7 @@ class Engine < ::Rails::Engine
            :team_planner_menu,
            { controller: "/team_planner/team_planner", action: :index },
            parent: :team_planner_view,
-           partial: "team_planner/team_planner/menu",
+           partial: "team_planner/menus/menu",
            last: true,
            caption: :"team_planner.label_team_planner_plural"
 

modules/team_planner/spec/features/query_handling_spec.rb

@@ -75,7 +75,7 @@
   let(:team_planner) { Pages::TeamPlanner.new project }
   let(:work_package_page) { Pages::WorkPackagesTable.new project }
   let(:query_title) { Components::WorkPackages::QueryTitle.new }
-  let(:query_menu) { Components::WorkPackages::QueryMenu.new }
+  let(:query_menu) { Components::Submenu.new }
   let(:filters) { team_planner.filters }
 
   current_user { user }
@@ -114,7 +114,7 @@
 
   it "shows only team planner queries" do
     # Go to team planner where no query is shown, only the create option
-    query_menu.expect_no_menu_entry
+    query_menu.expect_no_items
     expect(page).to have_test_selector("team-planner--create-button")
 
     # Change filter
@@ -128,11 +128,11 @@
     team_planner.expect_and_dismiss_toaster(message: I18n.t("js.notice_successful_create"))
 
     # The saved query appears in the side menu...
-    query_menu.expect_menu_entry "I am your Query"
+    query_menu.expect_item "I am your Query"
 
     # .. but not in the work packages module
     work_package_page.visit!
-    query_menu.expect_menu_entry_not_visible "I am your Query"
+    query_menu.expect_no_item "I am your Query"
   end
 
   it_behaves_like "module specific query view management" do

spec/support/components/common/submenu.rb

@@ -36,13 +36,13 @@ def expect_item(name, selected: false, visible: true)
       within "#main-menu" do
         selected_specifier = selected ? ".selected" : ":not(.selected)"
 
-        expect(page).to have_css(".op-sidemenu--item-action#{selected_specifier}", text: name, visible:)
+        expect(page).to have_css("[data-test-selector='op-sidemenu--item-action']#{selected_specifier}", text: name, visible:)
       end
     end
 
     def expect_no_item(name)
       within "#main-menu" do
-        expect(page).to have_no_css(".op-sidemenu--item-action", text: name)
+        expect(page).not_to have_test_selector("op-sidemenu--item-action", text: name)
       end
     end
 
@@ -52,6 +52,12 @@ def click_item(name)
       end
     end
 
+    def expect_no_items
+      within "#main-menu" do
+        expect(page).to have_test_selector("op-sidemenu--item-action")
+      end
+    end
+
     def search_for_item(name)
       within "#main-menu" do
         page.find_test_selector("op-sidebar--search-input").set(name)

spec/support/components/work_packages/query_menu.rb

@@ -69,10 +69,6 @@ def expect_menu_entry(name)
       def expect_menu_entry_not_visible(name)
         expect(page).to have_no_selector(autocompleter_item_selector, text: name)
       end
-
-      def expect_no_menu_entry
-        expect(page).to have_no_selector(autocompleter_item_selector)
-      end
     end
   end
 end