[32983] Ensure wp-embedded-table-entry does not get bootstrapped twice

The embedded table entry was bootstrapped after the
`macro.embedded-table` was bootstrapped, causing the table to be
re-initialized with empty queryProps, thus loading the defaults

The test did not work correctly, since the applied filter was not
applied, but the test still succeeded since the work package was there.
I added a negative test for a filtered-out value

https://community.openproject.com/wp/32983

frontend/src/app/components/wp-table/embedded/embedded-tables-macro.component.ts

@@ -29,10 +29,10 @@
 import {Component, ElementRef} from "@angular/core";
 import {WorkPackageTableConfigurationObject} from "core-components/wp-table/wp-table-configuration";
 
-export const wpEmbeddedTableEntrySelector = 'macro.embedded-table';
+export const wpEmbeddedTableMacroSelector = 'macro.embedded-table';
 
 @Component({
-  selector: wpEmbeddedTableEntrySelector,
+  selector: wpEmbeddedTableMacroSelector,
   template: `
     <wp-embedded-table-entry [queryProps]="queryProps"
                              [configuration]="configuration">

frontend/src/app/components/wp-table/embedded/wp-embedded-base.component.ts

@@ -37,12 +37,12 @@ export abstract class WorkPackageEmbeddedBaseComponent extends WorkPackagesViewB
   @InjectField() cdRef:ChangeDetectorRef;
 
   ngOnInit() {
-    super.ngOnInit();
-
     this.configuration = new WorkPackageTableConfiguration(this.providedConfiguration);
     // Set embedded status in configuration
     this.configuration.isEmbedded = true;
     this.initialized = true;
+
+    super.ngOnInit();
   }
 
   ngAfterViewInit():void {

frontend/src/app/components/wp-table/embedded/wp-embedded-table.html

@@ -1,4 +1,5 @@
-<div class="work-packages-embedded-view--container loading-indicator--location"
+<div *ngIf="configuration"
+     class="work-packages-embedded-view--container loading-indicator--location"
      [ngClass]="{ '-hierarchy-disabled': !configuration.hierarchyToggleEnabled,
                   '-compact-tables': configuration.compactTableStyle,
                   '-external-height': externalHeight }"

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

@@ -2,7 +2,7 @@ import {OptionalBootstrapDefinition} from "core-app/globals/dynamic-bootstrapper
 import {appBaseSelector, ApplicationBaseComponent} from "core-app/modules/router/base/application-base.component";
 import {
   EmbeddedTablesMacroComponent,
-  wpEmbeddedTableEntrySelector
+  wpEmbeddedTableMacroSelector
 } from "core-components/wp-table/embedded/embedded-tables-macro.component";
 import {
   ColorsAutocompleter,
@@ -100,7 +100,6 @@ import {
   RemoteFieldUpdaterComponent,
   remoteFieldUpdaterSelector
 } from "core-app/modules/common/remote-field-updater/remote-field-updater.component";
-import {WorkPackageEmbeddedTableEntryComponent} from "core-components/wp-table/embedded/wp-embedded-table-entry.component";
 import {
   WorkPackageOverviewGraphComponent,
   wpOverviewGraphSelector
@@ -135,9 +134,8 @@ import {
 export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: appBaseSelector, cls: ApplicationBaseComponent },
   { selector: attributeHelpTextSelector, cls: AttributeHelpTextComponent },
-  { selector: wpEmbeddedTableEntrySelector, cls: EmbeddedTablesMacroComponent, embeddable: true },
+  { selector: wpEmbeddedTableMacroSelector, cls: EmbeddedTablesMacroComponent, embeddable: true },
   { selector: colorsAutocompleterSelector, cls: ColorsAutocompleter },
-  { selector: wpEmbeddedTableEntrySelector, cls: EmbeddedTablesMacroComponent, embeddable: true },
   { selector: zenModeComponentSelector, cls: ZenModeButtonComponent },
   { selector: attachmentsSelector, cls: AttachmentsComponent, embeddable: true },
   { selector: usersAutocompleterSelector, cls: UserAutocompleterComponent },
@@ -170,7 +168,6 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: enterpriseActiveSavedTrialSelector, cls: EEActiveSavedTrialComponent },
   { selector: projectMenuAutocompleteSelector, cls: ProjectMenuAutocompleteComponent },
   { selector: remoteFieldUpdaterSelector, cls: RemoteFieldUpdaterComponent },
-  { selector: wpEmbeddedTableEntrySelector, cls: WorkPackageEmbeddedTableEntryComponent },
   { selector: wpOverviewGraphSelector, cls: WorkPackageOverviewGraphComponent },
   { selector: wpQuerySelectSelector, cls: WorkPackageQuerySelectDropdownComponent },
 ];

spec/features/wysiwyg/macros/embedded_tables_spec.rb

@@ -32,9 +32,12 @@ describe 'Wysiwyg embedded work package tables',
          type: :feature, js: true do
   using_shared_fixtures :admin
   let(:user) { admin }
-  let(:project) { FactoryBot.create(:project, enabled_module_names: %w[wiki work_package_tracking]) }
+  let(:type_task) { FactoryBot.create :type_task }
+  let(:type_bug) { FactoryBot.create :type_bug }
+  let(:project) { FactoryBot.create(:project, types: [type_task, type_bug], enabled_module_names: %w[wiki work_package_tracking]) }
   let(:editor) { ::Components::WysiwygEditor.new }
-  let!(:work_package) { FactoryBot.create(:work_package, project: project) }
+  let!(:wp_task) { FactoryBot.create(:work_package, project: project, type: type_task) }
+  let!(:wp_bug) { FactoryBot.create(:work_package, project: project, type: type_bug) }
 
   let(:modal) { ::Components::WorkPackages::TableConfigurationModal.new }
   let(:filters) { ::Components::WorkPackages::TableConfiguration::Filters.new }
@@ -57,7 +60,7 @@ describe 'Wysiwyg embedded work package tables',
           modal.expect_open
           modal.switch_to 'Filters'
           filters.expect_filter_count 2
-          filters.add_filter_by('Type', 'is', work_package.type.name)
+          filters.add_filter_by('Type', 'is', type_task.name)
 
           modal.switch_to 'Columns'
           columns.assume_opened
@@ -92,7 +95,8 @@ describe 'Wysiwyg embedded work package tables',
           # Expect we can preview the table within ckeditor
           editor.within_enabled_preview do |preview_container|
             embedded_table = ::Pages::EmbeddedWorkPackagesTable.new preview_container
-            embedded_table.expect_work_package_listed work_package
+            embedded_table.expect_work_package_listed wp_task
+            embedded_table.ensure_work_package_not_listed! wp_bug
           end
         end
 
@@ -102,10 +106,11 @@ describe 'Wysiwyg embedded work package tables',
         expect(page).to have_selector('.flash.notice')
 
         embedded_table = ::Pages::EmbeddedWorkPackagesTable.new find('.wiki-content')
-        embedded_table.expect_work_package_listed work_package
+        embedded_table.expect_work_package_listed wp_task
+        embedded_table.ensure_work_package_not_listed! wp_bug
 
         # Clicking on work package ID redirects
-        full_view = embedded_table.open_full_screen_by_doubleclick work_package
+        full_view = embedded_table.open_full_screen_by_doubleclick wp_task
         full_view.ensure_page_loaded
       end
     end