From 4a8b5bd15837195e384246f231a4d3319dd6dbe7 Mon Sep 17 00:00:00 2001
From: Eric Schubert <e.schubert@openproject.com>
Date: Tue, 16 Nov 2021 13:52:24 +0100
Subject: [PATCH 1/5] [#39772] Moved wp-quqery-select to op-query-select

---
 .../work_packages/_menu_query_select.html.erb |  2 +-
 .../setup/global-dynamic-components.const.ts  |  9 ++++---
 .../openproject-work-packages.module.ts       |  4 ----
 .../partitioned-query-space-page.component.ts |  2 +-
 .../wp-view-base/work-packages-view.base.ts   |  4 ++--
 .../op-query-select.component.ts}             | 24 +++++++++----------
 .../op-query-select.template.html}            |  2 +-
 .../op-static-queries.service.ts}             |  2 +-
 frontend/src/app/shared/shared.module.ts      |  6 +++++
 .../work_packages/work_packages_table.rb      |  2 +-
 10 files changed, 29 insertions(+), 28 deletions(-)
 rename frontend/src/app/{features/work-packages/components/wp-query-select/wp-query-select-dropdown.component.ts => shared/components/op-query-select/op-query-select.component.ts} (87%)
 rename frontend/src/app/{features/work-packages/components/wp-query-select/wp-query-select.template.html => shared/components/op-query-select/op-query-select.template.html} (94%)
 rename frontend/src/app/{features/work-packages/components/wp-query-select/wp-static-queries.service.ts => shared/components/op-query-select/op-static-queries.service.ts} (99%)

diff --git a/app/views/work_packages/_menu_query_select.html.erb b/app/views/work_packages/_menu_query_select.html.erb
index 6b9025e494..4f99966bdc 100644
--- a/app/views/work_packages/_menu_query_select.html.erb
+++ b/app/views/work_packages/_menu_query_select.html.erb
@@ -1 +1 @@
-<wp-query-select data-project-identifier="<%= @project ? @project.identifier : '' %>"></wp-query-select>
+<op-query-select data-project-identifier="<%= @project ? @project.identifier : '' %>"></op-query-select>
diff --git a/frontend/src/app/core/setup/global-dynamic-components.const.ts b/frontend/src/app/core/setup/global-dynamic-components.const.ts
index 9766218e88..ebcc94bd92 100644
--- a/frontend/src/app/core/setup/global-dynamic-components.const.ts
+++ b/frontend/src/app/core/setup/global-dynamic-components.const.ts
@@ -98,9 +98,9 @@ import {
   wpOverviewGraphSelector,
 } from 'core-app/shared/components/work-package-graphs/overview/wp-overview-graph.component';
 import {
-  WorkPackageQuerySelectDropdownComponent,
-  wpQuerySelectSelector,
-} from 'core-app/features/work-packages/components/wp-query-select/wp-query-select-dropdown.component';
+  opQuerySelectSelector,
+  QuerySelectComponent,
+} from 'core-app/shared/components/op-query-select/op-query-select.component';
 import {
   GlobalSearchTitleComponent,
   globalSearchTitleSelector,
@@ -184,7 +184,6 @@ import {
   ianMenuSelector,
 } from 'core-app/features/in-app-notifications/center/menu/menu.component';
 
-
 export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: appBaseSelector, cls: ApplicationBaseComponent },
   { selector: attributeHelpTextSelector, cls: AttributeHelpTextComponent },
@@ -224,7 +223,7 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: projectMenuAutocompleteSelector, cls: ProjectMenuAutocompleteComponent },
   { selector: remoteFieldUpdaterSelector, cls: RemoteFieldUpdaterComponent },
   { selector: wpOverviewGraphSelector, cls: WorkPackageOverviewGraphComponent },
-  { selector: wpQuerySelectSelector, cls: WorkPackageQuerySelectDropdownComponent },
+  { selector: opQuerySelectSelector, cls: QuerySelectComponent },
   { selector: triggerActionsEntryComponentSelector, cls: TriggerActionsEntryComponent, embeddable: true },
   { selector: backlogsPageComponentSelector, cls: BacklogsPageComponent },
   { selector: attributeValueMacro, cls: AttributeValueMacroComponent, embeddable: true },
diff --git a/frontend/src/app/features/work-packages/openproject-work-packages.module.ts b/frontend/src/app/features/work-packages/openproject-work-packages.module.ts
index 0b49b5c00c..3ad070d341 100644
--- a/frontend/src/app/features/work-packages/openproject-work-packages.module.ts
+++ b/frontend/src/app/features/work-packages/openproject-work-packages.module.ts
@@ -42,7 +42,6 @@ import { OpSettingsMenuDirective } from 'core-app/shared/components/op-context-m
 import { WorkPackageStatusDropdownDirective } from 'core-app/shared/components/op-context-menu/handlers/wp-status-dropdown-menu.directive';
 import { WorkPackageCreateSettingsMenuDirective } from 'core-app/shared/components/op-context-menu/handlers/wp-create-settings-menu.directive';
 import { WorkPackageSingleContextMenuDirective } from 'core-app/shared/components/op-context-menu/wp-context-menu/wp-single-context-menu';
-import { WorkPackageQuerySelectDropdownComponent } from 'core-app/features/work-packages/components/wp-query-select/wp-query-select-dropdown.component';
 import { WorkPackageTimelineHeaderController } from 'core-app/features/work-packages/components/wp-table/timeline/header/wp-timeline-header.directive';
 import { WorkPackageTableTimelineRelations } from 'core-app/features/work-packages/components/wp-table/timeline/global-elements/wp-timeline-relations.directive';
 import { WorkPackageTableTimelineStaticElements } from 'core-app/features/work-packages/components/wp-table/timeline/global-elements/wp-timeline-static-elements.directive';
@@ -85,7 +84,6 @@ import { ExternalQueryConfigurationComponent } from 'core-app/features/work-pack
 import { ExternalQueryConfigurationService } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.service';
 import { ExternalRelationQueryConfigurationComponent } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.component';
 import { ExternalRelationQueryConfigurationService } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.service';
-import { WorkPackageStaticQueriesService } from 'core-app/features/work-packages/components/wp-query-select/wp-static-queries.service';
 import { WorkPackagesListInvalidQueryService } from 'core-app/features/work-packages/components/wp-list/wp-list-invalid-query.service';
 import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
 import { WorkPackageWatchersService } from 'core-app/features/work-packages/components/wp-single-view-tabs/watchers-tab/wp-watchers.service';
@@ -213,7 +211,6 @@ import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
     // For any service that depends on the isolated query space,
     // they should be provided in wp-isolated-query-space.directive instead
     QueryFiltersService,
-    WorkPackageStaticQueriesService,
     WorkPackagesListInvalidQueryService,
 
     // Provide a separate service for creation events of WP Inline create
@@ -298,7 +295,6 @@ import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
     WorkPackageStatusDropdownDirective,
     WorkPackageCreateSettingsMenuDirective,
     WorkPackageSingleContextMenuDirective,
-    WorkPackageQuerySelectDropdownComponent,
     WorkPackageViewDropdownMenuDirective,
     WorkPackageGroupToggleDropdownMenuDirective,
 
diff --git a/frontend/src/app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.ts b/frontend/src/app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.ts
index c8a3c655a4..d3c2ce3b7a 100644
--- a/frontend/src/app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.ts
+++ b/frontend/src/app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.ts
@@ -234,7 +234,7 @@ export class PartitionedQuerySpacePageComponent extends WorkPackagesViewBase imp
     if (isPersistedResource(query)) {
       this.selectedTitle = query.name;
     } else {
-      this.selectedTitle = this.wpStaticQueries.getStaticName(query);
+      this.selectedTitle = this.opStaticQueries.getStaticName(query);
     }
 
     this.titleEditingEnabled = this.authorisationService.can('query', 'updateImmediately');
diff --git a/frontend/src/app/features/work-packages/routing/wp-view-base/work-packages-view.base.ts b/frontend/src/app/features/work-packages/routing/wp-view-base/work-packages-view.base.ts
index 7fb5309d79..cd354c22dd 100644
--- a/frontend/src/app/features/work-packages/routing/wp-view-base/work-packages-view.base.ts
+++ b/frontend/src/app/features/work-packages/routing/wp-view-base/work-packages-view.base.ts
@@ -35,7 +35,7 @@ import { IsolatedQuerySpace } from 'core-app/features/work-packages/directives/q
 import { filter, take, withLatestFrom } from 'rxjs/operators';
 import { LoadingIndicatorService } from 'core-app/core/loading-indicator/loading-indicator.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { WorkPackageStaticQueriesService } from 'core-app/features/work-packages/components/wp-query-select/wp-static-queries.service';
+import { StaticQueriesService } from 'core-app/shared/components/op-query-select/op-static-queries.service';
 import { WorkPackageViewHighlightingService } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-highlighting.service';
 import { States } from 'core-app/core/states/states.service';
 import { WorkPackageViewColumnsService } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-columns.service';
@@ -98,7 +98,7 @@ export abstract class WorkPackagesViewBase extends UntilDestroyedMixin implement
 
   @InjectField() I18n!:I18nService;
 
-  @InjectField() wpStaticQueries:WorkPackageStaticQueriesService;
+  @InjectField() opStaticQueries:StaticQueriesService;
 
   @InjectField() wpStatesInitialization:WorkPackageStatesInitializationService;
 
diff --git a/frontend/src/app/features/work-packages/components/wp-query-select/wp-query-select-dropdown.component.ts b/frontend/src/app/shared/components/op-query-select/op-query-select.component.ts
similarity index 87%
rename from frontend/src/app/features/work-packages/components/wp-query-select/wp-query-select-dropdown.component.ts
rename to frontend/src/app/shared/components/op-query-select/op-query-select.component.ts
index 11af7a9478..9f8f1a3e8a 100644
--- a/frontend/src/app/features/work-packages/components/wp-query-select/wp-query-select-dropdown.component.ts
+++ b/frontend/src/app/shared/components/op-query-select/op-query-select.component.ts
@@ -42,16 +42,16 @@ import { MainMenuNavigationService } from 'core-app/core/main-menu/main-menu-nav
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { IOpSidemenuItem } from 'core-app/shared/components/sidemenu/sidemenu.component';
 import { QueryResource } from 'core-app/features/hal/resources/query-resource';
-import { WorkPackageStaticQueriesService } from 'core-app/features/work-packages/components/wp-query-select/wp-static-queries.service';
+import { StaticQueriesService } from 'core-app/shared/components/op-query-select/op-static-queries.service';
 
-export const wpQuerySelectSelector = 'wp-query-select';
+export const opQuerySelectSelector = 'op-query-select';
 
 @Component({
-  selector: wpQuerySelectSelector,
+  selector: opQuerySelectSelector,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './wp-query-select.template.html',
+  templateUrl: './op-query-select.template.html',
 })
-export class WorkPackageQuerySelectDropdownComponent extends UntilDestroyedMixin implements OnInit {
+export class QuerySelectComponent extends UntilDestroyedMixin implements OnInit {
   public text = {
     search: this.I18n.t('js.toolbar.search_query_label'),
     label: this.I18n.t('js.toolbar.search_query_label'),
@@ -75,7 +75,7 @@ export class WorkPackageQuerySelectDropdownComponent extends UntilDestroyedMixin
     readonly I18n:I18nService,
     readonly states:States,
     readonly CurrentProject:CurrentProjectService,
-    readonly wpStaticQueries:WorkPackageStaticQueriesService,
+    readonly opStaticQueries:StaticQueriesService,
     readonly mainMenuService:MainMenuNavigationService,
     readonly cdRef:ChangeDetectorRef,
   ) {
@@ -102,11 +102,12 @@ export class WorkPackageQuerySelectDropdownComponent extends UntilDestroyedMixin
       .pipe(
         map(([searchText, categories]) => categories
           .map((category) => {
-            if (this.matchesText(category.title, searchText)) {
+            if (QuerySelectComponent.matchesText(category.title, searchText)) {
               return category;
             }
 
-            const filteredChildren = category.children?.filter((query) => this.matchesText(query.title, searchText));
+            const filteredChildren = category.children
+              ?.filter((query) => QuerySelectComponent.matchesText(query.title, searchText));
             return { title: category.title, children: filteredChildren, collapsible: true };
           })
           .filter((category) => category.children && category.children.length > 0)),
@@ -131,8 +132,7 @@ export class WorkPackageQuerySelectDropdownComponent extends UntilDestroyedMixin
     this.initialized = true;
   }
 
-  // noinspection JSMethodCanBeStatic
-  private matchesText(text:string, searchText:string):boolean {
+  private static matchesText(text:string, searchText:string):boolean {
     return text.toLowerCase().includes(searchText.toLowerCase());
   }
 
@@ -159,12 +159,12 @@ export class WorkPackageQuerySelectDropdownComponent extends UntilDestroyedMixin
             cat = 'starred';
           }
 
-          categories[cat].push(WorkPackageQuerySelectDropdownComponent.toOpSideMenuItem(query));
+          categories[cat].push(QuerySelectComponent.toOpSideMenuItem(query));
         });
 
         this.$queryCategories.next([
           { title: this.text.scope_starred, children: categories.starred, collapsible: true },
-          { title: this.text.scope_default, children: this.wpStaticQueries.all, collapsible: true },
+          { title: this.text.scope_default, children: this.opStaticQueries.all, collapsible: true },
           { title: this.text.scope_global, children: categories.public, collapsible: true },
           { title: this.text.scope_private, children: categories.private, collapsible: true },
         ]);
diff --git a/frontend/src/app/features/work-packages/components/wp-query-select/wp-query-select.template.html b/frontend/src/app/shared/components/op-query-select/op-query-select.template.html
similarity index 94%
rename from frontend/src/app/features/work-packages/components/wp-query-select/wp-query-select.template.html
rename to frontend/src/app/shared/components/op-query-select/op-query-select.template.html
index 4231da272d..c9ed5dac4c 100644
--- a/frontend/src/app/features/work-packages/components/wp-query-select/wp-query-select.template.html
+++ b/frontend/src/app/shared/components/op-query-select/op-query-select.template.html
@@ -1,4 +1,4 @@
-<div id="querySelectDropdown" class="searchable-menu">
+<div id="querySelect" class="searchable-menu">
   <div class="searchable-menu--search-container">
     <div class="searchable-menu--search-bar">
       <label for="query-title-filter"
diff --git a/frontend/src/app/features/work-packages/components/wp-query-select/wp-static-queries.service.ts b/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts
similarity index 99%
rename from frontend/src/app/features/work-packages/components/wp-query-select/wp-static-queries.service.ts
rename to frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts
index ab2fdc3539..c2d389ea26 100644
--- a/frontend/src/app/features/work-packages/components/wp-query-select/wp-static-queries.service.ts
+++ b/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts
@@ -36,7 +36,7 @@ import { CurrentUserService } from 'core-app/core/current-user/current-user.serv
 import { IOpSidemenuItem } from 'core-app/shared/components/sidemenu/sidemenu.component';
 
 @Injectable()
-export class WorkPackageStaticQueriesService {
+export class StaticQueriesService {
   constructor(private readonly I18n:I18nService,
     private readonly $state:StateService,
     private readonly CurrentProject:CurrentProjectService,
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 1d2507eb5d..38348ddff9 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -57,6 +57,8 @@ import { EnterpriseBannerBootstrapComponent } from 'core-app/shared/components/e
 import { HomescreenNewFeaturesBlockComponent } from 'core-app/features/homescreen/blocks/new-features.component';
 import { TablePaginationComponent } from 'core-app/shared/components/table-pagination/table-pagination.component';
 import { HookService } from 'core-app/features/plugins/hook-service';
+import { QuerySelectComponent } from 'core-app/shared/components/op-query-select/op-query-select.component';
+import { StaticQueriesService } from 'core-app/shared/components/op-query-select/op-static-queries.service';
 import {
   highlightColSelector,
   OpHighlightColDirective,
@@ -186,8 +188,12 @@ export function bootstrapModule(injector:Injector) {
     OpOptionListComponent,
     OpSidemenuComponent,
   ],
+  providers: [
+    StaticQueriesService,
+  ],
   declarations: [
     OpDateTimeComponent,
+    QuerySelectComponent,
 
     ToastsContainerComponent,
     ToastComponent,
diff --git a/spec/support/pages/work_packages/work_packages_table.rb b/spec/support/pages/work_packages/work_packages_table.rb
index 7140cf48fa..49c0e8c525 100644
--- a/spec/support/pages/work_packages/work_packages_table.rb
+++ b/spec/support/pages/work_packages/work_packages_table.rb
@@ -123,7 +123,7 @@ module Pages
     def expect_query_in_select_dropdown(name)
       page.find('.title-container').click
 
-      page.within('#querySelectDropdown') do
+      page.within('#querySelect') do
         expect(page).to have_selector('.op-sidemenu--item-action', text: name)
       end
     end

From 629fe131a2ed2007812f5cd8270fa20a169fdc73 Mon Sep 17 00:00:00 2001
From: Eric Schubert <e.schubert@openproject.com>
Date: Wed, 17 Nov 2021 15:53:16 +0100
Subject: [PATCH 2/5] [#39772] decoupled query-select component from wp

[#39772] add op-query-select to bcf module

- https://community.openproject.org/work_packages/39772
- refactored query-select component to have input data from menu item
rendered by rails
---
 .../work_packages/_menu_query_select.html.erb |  8 +-
 .../openproject-ifc-models.routes.ts          |  3 +-
 .../routing/work-packages-routes.ts           |  1 +
 .../dataset-inputs.decorator.spec.ts          | 88 +++++++++++++++++
 .../components/dataset-inputs.decorator.ts    |  3 +
 .../op-query-select.component.ts              | 32 +++++--
 .../op-static-queries.service.ts              | 96 ++++++++++---------
 lib/redmine/menu_manager/menu_helper.rb       |  5 +-
 .../ifc_models/ifc_models/_panels.html.erb    | 14 ++-
 9 files changed, 191 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/app/shared/components/dataset-inputs.decorator.spec.ts

diff --git a/app/views/work_packages/_menu_query_select.html.erb b/app/views/work_packages/_menu_query_select.html.erb
index 4f99966bdc..ca9ecc4d71 100644
--- a/app/views/work_packages/_menu_query_select.html.erb
+++ b/app/views/work_packages/_menu_query_select.html.erb
@@ -1 +1,7 @@
-<op-query-select data-project-identifier="<%= @project ? @project.identifier : '' %>"></op-query-select>
+<%= content_tag 'op-query-select', '',
+                data: {
+                  'project-identifier': (@project ? @project.identifier : '').to_json,
+                  'menu-items': [parent_name, name].to_json,
+                  'base-route': 'work-packages'.to_json
+                }
+%>
diff --git a/frontend/src/app/features/bim/ifc_models/openproject-ifc-models.routes.ts b/frontend/src/app/features/bim/ifc_models/openproject-ifc-models.routes.ts
index 8c0f525b14..eb105fcd56 100644
--- a/frontend/src/app/features/bim/ifc_models/openproject-ifc-models.routes.ts
+++ b/frontend/src/app/features/bim/ifc_models/openproject-ifc-models.routes.ts
@@ -40,12 +40,13 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
   {
     name: 'bim',
     parent: 'optional_project',
-    url: '/bcf?query_props&models&viewpoint',
+    url: '/bcf?query_id&query_props&models&viewpoint',
     abstract: true,
     component: WorkPackagesBaseComponent,
     redirectTo: 'bim.partitioned',
     params: {
       // Use custom encoder/decoder that ensures validity of URL string
+      query_id: { type: 'query', dynamic: true },
       query_props: { type: 'opQueryString', dynamic: true },
       models: { type: 'opQueryString', dynamic: true },
       viewpoint: { type: 'int', dynamic: true },
diff --git a/frontend/src/app/features/work-packages/routing/work-packages-routes.ts b/frontend/src/app/features/work-packages/routing/work-packages-routes.ts
index 2d8e59d3b9..8a4135e5e6 100644
--- a/frontend/src/app/features/work-packages/routing/work-packages-routes.ts
+++ b/frontend/src/app/features/work-packages/routing/work-packages-routes.ts
@@ -133,6 +133,7 @@ export const WORK_PACKAGES_ROUTES:Ng2StateDeclaration[] = [
       bodyClasses: 'router--work-packages-partitioned-split-view',
       menuItem: menuItemClass,
       partition: '-left-only',
+      module: 'work-packages',
     },
   },
   ...makeSplitViewRoutes(
diff --git a/frontend/src/app/shared/components/dataset-inputs.decorator.spec.ts b/frontend/src/app/shared/components/dataset-inputs.decorator.spec.ts
new file mode 100644
index 0000000000..c9d08b9c72
--- /dev/null
+++ b/frontend/src/app/shared/components/dataset-inputs.decorator.spec.ts
@@ -0,0 +1,88 @@
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DebugElement,
+  ElementRef,
+  Input,
+  Type,
+} from '@angular/core';
+import { DatasetInputs } from 'core-app/shared/components/dataset-inputs.decorator';
+
+@Component({
+  selector: 'op-test-input',
+  template: '<op-test [foo]="bar"></op-test>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TestInputComponent {
+  bar = 'foo';
+}
+
+@Component({
+  selector: 'op-test-data',
+  template: `<op-test data-foo='"input from data"'></op-test>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TestDataComponent {
+}
+
+@DatasetInputs
+@Component({
+  selector: 'op-test',
+  template: '<span [textContent]="foo"></span>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TestComponent {
+  @Input() foo:string;
+
+  constructor(readonly elementRef:ElementRef<HTMLElement>) {}
+}
+
+fdescribe('DatasetInputs decorator', () => {
+  let fixture:ComponentFixture<unknown>;
+  let element:DebugElement;
+  let htmlElement:HTMLElement;
+
+  const setup = async (componentClass:Type<unknown>) => {
+    console.log("SETUP")
+    await TestBed.configureTestingModule({
+      declarations: [
+        TestComponent,
+        TestInputComponent,
+        TestDataComponent,
+      ],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(componentClass);
+    element = fixture.debugElement;
+    htmlElement = element.nativeElement as HTMLElement;
+
+    fixture.detectChanges();
+  };
+
+  describe('with an input', () => {
+    beforeEach(async () => {
+      await setup(TestInputComponent);
+    });
+
+    it('renders the input', () => {
+      expect(htmlElement.querySelector('op-test-input op-test span')?.textContent)
+        .toEqual('foo', 'Expected op-test with a span[textContent=foo]');
+    });
+  });
+
+  describe('with a data field', () => {
+    beforeEach(async () => {
+      await setup(TestDataComponent);
+    });
+
+    it('renders the input', () => {
+      expect(htmlElement.querySelector('op-test-input op-test span')?.textContent)
+        .toEqual('input from data', 'Expected op-test with a span[textContent=input from data]');
+    });
+  });
+});
diff --git a/frontend/src/app/shared/components/dataset-inputs.decorator.ts b/frontend/src/app/shared/components/dataset-inputs.decorator.ts
index 60a86d5f37..7244052899 100644
--- a/frontend/src/app/shared/components/dataset-inputs.decorator.ts
+++ b/frontend/src/app/shared/components/dataset-inputs.decorator.ts
@@ -60,6 +60,9 @@ export function DatasetInputs<T extends { new(...args:any[]):DatasetInputsDecora
       const declaredInputsParentKey = Object.keys(cstr)
         .find((key:string) => typeof (cstr[key] as ɵDirectiveDef<unknown>).declaredInputs === 'object');
 
+      console.log((cstr as any).propDecorators);
+      console.log(Object.keys(cstr));
+
       if (!declaredInputsParentKey) {
         throw new Error('Could not find declared inputs for component');
       }
diff --git a/frontend/src/app/shared/components/op-query-select/op-query-select.component.ts b/frontend/src/app/shared/components/op-query-select/op-query-select.component.ts
index 9f8f1a3e8a..c7f42de033 100644
--- a/frontend/src/app/shared/components/op-query-select/op-query-select.component.ts
+++ b/frontend/src/app/shared/components/op-query-select/op-query-select.component.ts
@@ -30,14 +30,20 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
+  Input,
   OnInit,
 } from '@angular/core';
 import { map } from 'rxjs/operators';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import {
+  BehaviorSubject,
+  combineLatest,
+  Observable,
+} from 'rxjs';
 import { States } from 'core-app/core/states/states.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { APIV3Service } from 'core-app/core/apiv3/api-v3.service';
-import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
+import { DatasetInputs } from 'core-app/shared/components/dataset-inputs.decorator';
 import { MainMenuNavigationService } from 'core-app/core/main-menu/main-menu-navigation.service';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { IOpSidemenuItem } from 'core-app/shared/components/sidemenu/sidemenu.component';
@@ -46,6 +52,7 @@ import { StaticQueriesService } from 'core-app/shared/components/op-query-select
 
 export const opQuerySelectSelector = 'op-query-select';
 
+@DatasetInputs
 @Component({
   selector: opQuerySelectSelector,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -64,6 +71,12 @@ export class QuerySelectComponent extends UntilDestroyedMixin implements OnInit
 
   public $queries:Observable<IOpSidemenuItem[]>;
 
+  @Input() menuItems:string[] = [];
+
+  @Input() projectIdentifier:string;
+
+  @Input() baseRoute:string;
+
   private $queryCategories = new BehaviorSubject<IOpSidemenuItem[]>([]);
 
   private $search = new BehaviorSubject<string>('');
@@ -71,10 +84,10 @@ export class QuerySelectComponent extends UntilDestroyedMixin implements OnInit
   private initialized = false;
 
   constructor(
+    readonly elementRef:ElementRef,
     readonly apiV3Service:APIV3Service,
     readonly I18n:I18nService,
     readonly states:States,
-    readonly CurrentProject:CurrentProjectService,
     readonly opStaticQueries:StaticQueriesService,
     readonly mainMenuService:MainMenuNavigationService,
     readonly cdRef:ChangeDetectorRef,
@@ -92,7 +105,7 @@ export class QuerySelectComponent extends UntilDestroyedMixin implements OnInit
     // When activating the work packages submenu,
     // either initially or through click on the toggle, load the results
     this.mainMenuService
-      .onActivate('work_packages', 'work_packages_query_select')
+      .onActivate(...this.menuItems)
       .subscribe(() => this.initializeAutocomplete());
 
     this.$queries = combineLatest(
@@ -147,7 +160,7 @@ export class QuerySelectComponent extends UntilDestroyedMixin implements OnInit
     // TODO: use global query store
     this.apiV3Service
       .queries
-      .filterNonHidden(this.CurrentProject.identifier)
+      .filterNonHidden(this.projectIdentifier)
       .pipe(this.untilDestroyed())
       .subscribe((queryCollection) => {
         queryCollection.elements.forEach((query) => {
@@ -159,22 +172,23 @@ export class QuerySelectComponent extends UntilDestroyedMixin implements OnInit
             cat = 'starred';
           }
 
-          categories[cat].push(QuerySelectComponent.toOpSideMenuItem(query));
+          categories[cat].push(this.toOpSideMenuItem(query));
         });
 
+        const staticQueries = this.opStaticQueries.getStaticQueries(this.baseRoute);
         this.$queryCategories.next([
           { title: this.text.scope_starred, children: categories.starred, collapsible: true },
-          { title: this.text.scope_default, children: this.opStaticQueries.all, collapsible: true },
+          { title: this.text.scope_default, children: staticQueries, collapsible: true },
           { title: this.text.scope_global, children: categories.public, collapsible: true },
           { title: this.text.scope_private, children: categories.private, collapsible: true },
         ]);
       });
   }
 
-  private static toOpSideMenuItem(query:QueryResource):IOpSidemenuItem {
+  private toOpSideMenuItem(query:QueryResource):IOpSidemenuItem {
     return {
       title: query.name,
-      uiSref: 'work-packages',
+      uiSref: this.baseRoute,
       uiParams: { query_id: query.id, query_props: '' },
     };
   }
diff --git a/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts b/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts
index c2d389ea26..62cc2297c2 100644
--- a/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts
+++ b/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts
@@ -60,32 +60,53 @@ export class StaticQueriesService {
     summary: this.I18n.t('js.work_packages.default_queries.summary'),
   };
 
-  public get all():IOpSidemenuItem[] {
+  public getStaticName(query:QueryResource):string {
+    if (this.$state.params.query_props) {
+      const queryProps = JSON.parse(this.$state.params.query_props);
+      delete queryProps.pp;
+      delete queryProps.pa;
+      const queryPropsString = JSON.stringify(queryProps);
+
+      // TODO: Get module route from query
+      const matched = this.getStaticQueries('work-packages').find((item) => {
+        const uiParams = item.uiParams as { query_id:string, query_props:string };
+        return uiParams && uiParams.query_props === queryPropsString;
+      });
+
+      if (matched) {
+        return matched.title;
+      }
+    }
+
+    // Try to detect the all open filter
+    if (query.filters.length === 1 // Only one filter
+      && query.filters[0].id === 'status' // that is status
+      && query.filters[0].operator.id === 'o') { // and is open
+      return this.text.all_open;
+    }
+
+    // Otherwise, fall back to work packages
+    return this.text.work_packages;
+  }
+
+  public getStaticQueries(module:string):IOpSidemenuItem[] {
     let items:IOpSidemenuItem[] = [
       {
         title: this.text.all_open,
-        uiSref: 'work-packages',
+        uiSref: module,
         uiParams: { query_id: '', query_props: '' },
       },
       {
         title: this.text.latest_activity,
-        uiSref: 'work-packages',
+        uiSref: module,
         uiParams: {
           query_id: '',
           query_props: '{"c":["id","subject","type","status","assignee","updatedAt"],"hi":false,"g":"","t":"updatedAt:desc","f":[{"n":"status","o":"o","v":[]}]}',
         },
       },
-      {
-        title: this.text.gantt,
-        uiSref: 'work-packages',
-        uiParams: {
-          query_id: '',
-          query_props: '{"c":["id","type","subject","status","startDate","dueDate"],"tv":true,"tzl":"auto","tll":"{\\"left\\":\\"startDate\\",\\"right\\":\\"dueDate\\",\\"farRight\\":\\"subject\\"}","hi":true,"g":"","t":"startDate:asc","f":[{"n":"status","o":"o","v":[]}]}',
-        },
-      },
       {
         title: this.text.recently_created,
-        uiSref: 'work-packages',
+        uiSref: module,
         uiParams: {
           query_id: '',
           query_props: '{"c":["id","subject","type","status","assignee","createdAt"],"hi":false,"g":"","t":"createdAt:desc","f":[{"n":"status","o":"o","v":[]}]}',
@@ -93,12 +114,23 @@ export class StaticQueriesService {
       },
     ];
 
-    const projectIdentifier = this.CurrentProject.identifier;
-    if (projectIdentifier) {
+    if (module === 'work-packages') {
       items.push({
-        title: this.text.summary,
-        href: `${this.PathHelper.projectWorkPackagesPath(projectIdentifier)}/report`,
+        title: this.text.gantt,
+        uiSref: module,
+        uiParams: {
+          query_id: '',
+          query_props: '{"c":["id","type","subject","status","startDate","dueDate"],"tv":true,"tzl":"auto","tll":"{\\"left\\":\\"startDate\\",\\"right\\":\\"dueDate\\",\\"farRight\\":\\"subject\\"}","hi":true,"g":"","t":"startDate:asc","f":[{"n":"status","o":"o","v":[]}]}',
+        },
       });
+
+      const projectIdentifier = this.CurrentProject.identifier;
+      if (projectIdentifier) {
+        items.push({
+          title: this.text.summary,
+          href: `${this.PathHelper.projectWorkPackagesPath(projectIdentifier)}/report`,
+        });
+      }
     }
 
     if (this.CurrentUser.isLoggedIn) {
@@ -106,7 +138,7 @@ export class StaticQueriesService {
         ...items,
         {
           title: this.text.created_by_me,
-          uiSref: 'work-packages',
+          uiSref: module,
           uiParams: {
             query_id: '',
             query_props: '{"c":["id","subject","type","status","assignee","updatedAt"],"hi":false,"g":"","t":"updatedAt:desc,id:asc","f":[{"n":"status","o":"o","v":[]},{"n":"author","o":"=","v":["me"]}]}',
@@ -114,7 +146,7 @@ export class StaticQueriesService {
         },
         {
           title: this.text.assigned_to_me,
-          uiSref: 'work-packages',
+          uiSref: module,
           uiParams: {
             query_id: '',
             query_props: '{"c":["id","subject","type","status","author","updatedAt"],"hi":false,"g":"","t":"updatedAt:desc,id:asc","f":[{"n":"status","o":"o","v":[]},{"n":"assigneeOrGroup","o":"=","v":["me"]}]}',
@@ -125,32 +157,4 @@ export class StaticQueriesService {
 
     return items;
   }
-
-  public getStaticName(query:QueryResource):string {
-    if (this.$state.params.query_props) {
-      const queryProps = JSON.parse(this.$state.params.query_props);
-      delete queryProps.pp;
-      delete queryProps.pa;
-      const queryPropsString = JSON.stringify(queryProps);
-
-      const matched = this.all.find((item) => {
-        const uiParams = item.uiParams as { query_id:string, query_props:string };
-        return uiParams && uiParams.query_props === queryPropsString;
-      });
-
-      if (matched) {
-        return matched.title;
-      }
-    }
-
-    // Try to detect the all open filter
-    if (query.filters.length === 1 // Only one filter
-      && query.filters[0].id === 'status' // that is status
-      && query.filters[0].operator.id === 'o') { // and is open
-      return this.text.all_open;
-    }
-
-    // Otherwise, fall back to work packages
-    return this.text.work_packages;
-  }
 }
diff --git a/lib/redmine/menu_manager/menu_helper.rb b/lib/redmine/menu_manager/menu_helper.rb
index f3948e837d..8796e2bf50 100644
--- a/lib/redmine/menu_manager/menu_helper.rb
+++ b/lib/redmine/menu_manager/menu_helper.rb
@@ -231,7 +231,10 @@ module Redmine::MenuManager::MenuHelper
 
   def render_single_node_or_partial(node, project)
     if node.partial
-      content_tag('li', render(partial: node.partial), class: "partial", data: { name: node.name })
+      content_tag('li',
+                  render(partial: node.partial, locals: { name: node.name, parent_name: node.parent.name }),
+                  class: "partial",
+                  data: { name: node.name })
     else
       content_tag('li', render_single_menu_node(node, project), data: { name: node.name })
     end
diff --git a/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb b/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
index f3ae4e2cf1..5bd67a1bbf 100644
--- a/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
+++ b/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
@@ -1 +1,13 @@
-<div class="op-ifc-viewer--tree-panel active" data-qa-selector="op-ifc-viewer--tree-panel"></div>
+<div class="op-ifc-viewer--sidemenu">
+  <%= content_tag 'op-query-select', '',
+                  data: {
+                    'project-identifier': (@project ? @project.identifier : '').to_json,
+                    'menu-items': [parent_name, name].to_json,
+                    'base-route': 'bim.partitioned.split'.to_json
+                  }
+  %>
+
+  <hr>
+
+  <div class="op-ifc-viewer--tree-panel active" data-qa-selector="op-ifc-viewer--tree-panel"></div>
+</div>

From fe8d6f446209940f9297e3bcf946ba9d136ef205 Mon Sep 17 00:00:00 2001
From: Eric Schubert <e.schubert@openproject.com>
Date: Mon, 22 Nov 2021 15:29:00 +0100
Subject: [PATCH 3/5] [#39972] Cleanup after rebase

---
 .../routing/work-packages-routes.ts           |  1 -
 .../dataset-inputs.decorator.spec.ts          | 88 -------------------
 .../components/dataset-inputs.decorator.ts    |  3 -
 3 files changed, 92 deletions(-)
 delete mode 100644 frontend/src/app/shared/components/dataset-inputs.decorator.spec.ts

diff --git a/frontend/src/app/features/work-packages/routing/work-packages-routes.ts b/frontend/src/app/features/work-packages/routing/work-packages-routes.ts
index 8a4135e5e6..2d8e59d3b9 100644
--- a/frontend/src/app/features/work-packages/routing/work-packages-routes.ts
+++ b/frontend/src/app/features/work-packages/routing/work-packages-routes.ts
@@ -133,7 +133,6 @@ export const WORK_PACKAGES_ROUTES:Ng2StateDeclaration[] = [
       bodyClasses: 'router--work-packages-partitioned-split-view',
       menuItem: menuItemClass,
       partition: '-left-only',
-      module: 'work-packages',
     },
   },
   ...makeSplitViewRoutes(
diff --git a/frontend/src/app/shared/components/dataset-inputs.decorator.spec.ts b/frontend/src/app/shared/components/dataset-inputs.decorator.spec.ts
deleted file mode 100644
index c9d08b9c72..0000000000
--- a/frontend/src/app/shared/components/dataset-inputs.decorator.spec.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  ComponentFixture,
-  TestBed,
-} from '@angular/core/testing';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  DebugElement,
-  ElementRef,
-  Input,
-  Type,
-} from '@angular/core';
-import { DatasetInputs } from 'core-app/shared/components/dataset-inputs.decorator';
-
-@Component({
-  selector: 'op-test-input',
-  template: '<op-test [foo]="bar"></op-test>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TestInputComponent {
-  bar = 'foo';
-}
-
-@Component({
-  selector: 'op-test-data',
-  template: `<op-test data-foo='"input from data"'></op-test>`,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TestDataComponent {
-}
-
-@DatasetInputs
-@Component({
-  selector: 'op-test',
-  template: '<span [textContent]="foo"></span>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TestComponent {
-  @Input() foo:string;
-
-  constructor(readonly elementRef:ElementRef<HTMLElement>) {}
-}
-
-fdescribe('DatasetInputs decorator', () => {
-  let fixture:ComponentFixture<unknown>;
-  let element:DebugElement;
-  let htmlElement:HTMLElement;
-
-  const setup = async (componentClass:Type<unknown>) => {
-    console.log("SETUP")
-    await TestBed.configureTestingModule({
-      declarations: [
-        TestComponent,
-        TestInputComponent,
-        TestDataComponent,
-      ],
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(componentClass);
-    element = fixture.debugElement;
-    htmlElement = element.nativeElement as HTMLElement;
-
-    fixture.detectChanges();
-  };
-
-  describe('with an input', () => {
-    beforeEach(async () => {
-      await setup(TestInputComponent);
-    });
-
-    it('renders the input', () => {
-      expect(htmlElement.querySelector('op-test-input op-test span')?.textContent)
-        .toEqual('foo', 'Expected op-test with a span[textContent=foo]');
-    });
-  });
-
-  describe('with a data field', () => {
-    beforeEach(async () => {
-      await setup(TestDataComponent);
-    });
-
-    it('renders the input', () => {
-      expect(htmlElement.querySelector('op-test-input op-test span')?.textContent)
-        .toEqual('input from data', 'Expected op-test with a span[textContent=input from data]');
-    });
-  });
-});
diff --git a/frontend/src/app/shared/components/dataset-inputs.decorator.ts b/frontend/src/app/shared/components/dataset-inputs.decorator.ts
index 7244052899..60a86d5f37 100644
--- a/frontend/src/app/shared/components/dataset-inputs.decorator.ts
+++ b/frontend/src/app/shared/components/dataset-inputs.decorator.ts
@@ -60,9 +60,6 @@ export function DatasetInputs<T extends { new(...args:any[]):DatasetInputsDecora
       const declaredInputsParentKey = Object.keys(cstr)
         .find((key:string) => typeof (cstr[key] as ɵDirectiveDef<unknown>).declaredInputs === 'object');
 
-      console.log((cstr as any).propDecorators);
-      console.log(Object.keys(cstr));
-
       if (!declaredInputsParentKey) {
         throw new Error('Could not find declared inputs for component');
       }

From 38f0611a807173d649fb25a2aa572f257a332f26 Mon Sep 17 00:00:00 2001
From: Eric Schubert <e.schubert@openproject.com>
Date: Mon, 22 Nov 2021 17:15:49 +0100
Subject: [PATCH 4/5] [#39772] removed unwanted update cycles for query title

---
 .../partitioned-query-space-page.component.ts | 42 ++++++-------------
 .../op-static-queries.service.ts              |  2 +-
 2 files changed, 14 insertions(+), 30 deletions(-)

diff --git a/frontend/src/app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.ts b/frontend/src/app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.ts
index d3c2ce3b7a..87047c8de4 100644
--- a/frontend/src/app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.ts
+++ b/frontend/src/app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.ts
@@ -100,9 +100,6 @@ export class PartitionedQuerySpacePageComponent extends WorkPackagesViewBase imp
   showToolbarSaveButton:boolean;
 
   /** Listener callbacks */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  unRegisterTitleListener:Function;
-
   // eslint-disable-next-line @typescript-eslint/ban-types
   removeTransitionSubscription:Function;
 
@@ -149,24 +146,20 @@ export class PartitionedQuerySpacePageComponent extends WorkPackagesViewBase imp
     // Load query on URL transitions
     this.queryParamListener
       .observe$
-      .pipe(
-        this.untilDestroyed(),
-      ).subscribe(() => {
-      /** Ensure we reload the query from the changed props */
+      .pipe(this.untilDestroyed())
+      .subscribe(() => {
+        /** Ensure we reload the query from the changed props */
         this.currentQuery = undefined;
-        this.refresh(true, true);
+        void this.refresh(true, true);
       });
 
-    // Update title on entering this state
-    this.unRegisterTitleListener = this.$transitions.onSuccess({}, () => {
-      this.updateTitle(this.querySpace.query.value);
-    });
-
-    this.querySpace.query.values$().pipe(
-      this.untilDestroyed(),
-    ).subscribe((query) => {
-      this.onQueryUpdated(query);
-    });
+    this.querySpace.query.values$()
+      .pipe(this.untilDestroyed())
+      .subscribe((query) => {
+        // Update the title whenever the query changes
+        this.updateTitle(query);
+        this.currentQuery = query;
+      });
   }
 
   /**
@@ -175,11 +168,11 @@ export class PartitionedQuerySpacePageComponent extends WorkPackagesViewBase imp
    *
    * @param state The current or entering state
    */
-  protected setPartition(state:Ng2StateDeclaration) {
+  protected setPartition(state:Ng2StateDeclaration):void {
     this.currentPartition = (state.data && state.data.partition) ? state.data.partition : '-split';
   }
 
-  protected setupInformationLoadedListener() {
+  protected setupInformationLoadedListener():void {
     this
       .querySpace
       .initialized
@@ -191,17 +184,8 @@ export class PartitionedQuerySpacePageComponent extends WorkPackagesViewBase imp
       });
   }
 
-  protected onQueryUpdated(query:QueryResource) {
-    // Update the title whenever the query changes
-    this.updateTitle(query);
-    this.currentQuery = query;
-
-    this.cdRef.detectChanges();
-  }
-
   ngOnDestroy():void {
     super.ngOnDestroy();
-    this.unRegisterTitleListener();
     this.removeTransitionSubscription();
     this.queryParamListener.removeQueryChangeListener();
   }
diff --git a/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts b/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts
index 62cc2297c2..2444b84ee2 100644
--- a/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts
+++ b/frontend/src/app/shared/components/op-query-select/op-static-queries.service.ts
@@ -62,7 +62,7 @@ export class StaticQueriesService {
 
   public getStaticName(query:QueryResource):string {
     if (this.$state.params.query_props) {
-      const queryProps = JSON.parse(this.$state.params.query_props);
+      const queryProps = JSON.parse(this.$state.params.query_props) as { pa:unknown, pp:unknown }&unknown;
       delete queryProps.pp;
       delete queryProps.pa;
       const queryPropsString = JSON.stringify(queryProps);

From ca9b2ff1f3363321e42f843c6dfea515efafaf1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Wed, 24 Nov 2021 14:21:46 +0100
Subject: [PATCH 5/5] Rewrite angular component calls with new helper

---
 app/views/work_packages/_menu_query_select.html.erb | 13 +++++++------
 .../bim/ifc_models/ifc_models/_panels.html.erb      | 13 +++++++------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/views/work_packages/_menu_query_select.html.erb b/app/views/work_packages/_menu_query_select.html.erb
index ca9ecc4d71..ca34e91ef0 100644
--- a/app/views/work_packages/_menu_query_select.html.erb
+++ b/app/views/work_packages/_menu_query_select.html.erb
@@ -1,7 +1,8 @@
-<%= content_tag 'op-query-select', '',
-                data: {
-                  'project-identifier': (@project ? @project.identifier : '').to_json,
-                  'menu-items': [parent_name, name].to_json,
-                  'base-route': 'work-packages'.to_json
-                }
+<%=
+  angular_component_tag 'op-query-select',
+                        inputs: {
+                          projectIdentifier: (@project ? @project.identifier : ''),
+                          menuItems: [parent_name, name],
+                          baseRoute: 'work-packages'
+                        }
 %>
diff --git a/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb b/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
index 5bd67a1bbf..3c0cc78bd0 100644
--- a/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
+++ b/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
@@ -1,10 +1,11 @@
 <div class="op-ifc-viewer--sidemenu">
-  <%= content_tag 'op-query-select', '',
-                  data: {
-                    'project-identifier': (@project ? @project.identifier : '').to_json,
-                    'menu-items': [parent_name, name].to_json,
-                    'base-route': 'bim.partitioned.split'.to_json
-                  }
+  <%=
+    angular_component_tag 'op-query-select',
+                          inputs: {
+                            projectIdentifier: (@project ? @project.identifier : ''),
+                            menuItems: [parent_name, name],
+                            baseRoute: 'bim.partitioned.split'
+                          }
   %>
 
   <hr>