refactor: Implement Structural Injection Pattern for Portal Containers (#8566)

Author: tobiu

apps/portal/view/news/release/MainContainer.mjs

@@ -19,19 +19,18 @@ class MainContainer extends SharedContainer {
          * @reactive
          */
         cls: ['portal-release-maincontainer'],
-        /**
-         * @member {String} buttonTextField='id'
-         */
-        buttonTextField: 'id',
-        /**
-         * @member {Neo.component.Base} contentComponent=ContentComponent
-         */
-        contentComponent: ContentComponent,
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          * @reactive
          */
         controller: Controller,
+        /**
+         * @member {Object} pageContainerConfig
+         */
+        pageContainerConfig: {
+            buttonTextField : 'id',
+            contentComponent: ContentComponent
+        },
         /**
          * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
          * @reactive

apps/portal/view/news/tickets/MainContainer.mjs

@@ -20,23 +20,19 @@ class MainContainer extends SharedContainer {
          * @reactive
          */
         cls: ['portal-tickets-maincontainer'],
-        /**
-         * @member {String} buttonTextField='id'
-         */
-        buttonTextField: 'id',
-        /**
-         * @member {Neo.component.Base} contentComponent=CanvasWrapper
-         */
-        contentComponent: CanvasWrapper,
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          * @reactive
          */
         controller: Controller,
         /**
-         * @member {Neo.component.Base} pageContainerModule=PageContainer
+         * @member {Object} pageContainerConfig
          */
-        pageContainerModule: PageContainer,
+        pageContainerConfig: {
+            module          : PageContainer,
+            buttonTextField : 'id',
+            contentComponent: CanvasWrapper
+        },
         /**
          * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
          * @reactive

apps/portal/view/shared/content/Container.mjs

@@ -22,15 +22,6 @@ class MainContainer extends Container {
          */
         baseCls: ['portal-shared-content-container', 'neo-container'],
         /**
-         * @member {String} buttonTextField='name'
-         */
-        buttonTextField: 'name',
-        /**
-         * @member {Neo.component.Base|null} contentComponent=null
-         */
-        contentComponent: null,
-        /**
-         * Default items configuration using the Proxy Config Pattern
          * @member {Object} contentItems_
          */
         contentItems_: {
@@ -69,10 +60,7 @@ class MainContainer extends Container {
                     weight      : 20
                 },
                 pageContainer: {
-                    module          : '@config:pageContainerModule',
-                    buttonTextField : '@config:buttonTextField',
-                    contentComponent: '@config:contentComponent',
-                    weight          : 30
+                    weight: 30
                 },
                 sections: {
                     module   : SectionsContainer,
@@ -87,13 +75,29 @@ class MainContainer extends Container {
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
-         * @member {Neo.component.Base} pageContainerModule=PageContainer
+         * Configuration for the PageContainer item.
+         * Subclasses override this to swap the module or configure the content.
+         * @member {Object} pageContainerConfig_
+         * @reactive
          */
-        pageContainerModule: PageContainer,
+        pageContainerConfig_: {
+            [isDescriptor]: true,
+            merge         : 'deep',
+            value         : {
+                module          : PageContainer,
+                buttonTextField : 'name',
+                contentComponent: null
+            }
+        },
         /**
-         * @member {Object|null} treeConfig=null
+         * @member {Object|null} treeConfig_=null
+         * @reactive
          */
-        treeConfig: null
+        treeConfig_: {
+            [isDescriptor]: true,
+            merge         : 'deep',
+            value         : null
+        }
     }
 
     /**
@@ -104,10 +108,14 @@ class MainContainer extends Container {
         let me = this;
 
         if (value) {
-            // Manually merge treeConfig if it exists
             if (me.treeConfig && value.sideNav?.items?.tree) {
                 Neo.assignDefaults(value.sideNav.items.tree, me.treeConfig);
             }
+
+            if (me.pageContainerConfig && value.pageContainer) {
+                Neo.assignDefaults(value.pageContainer, me.pageContainerConfig);
+            }
+
             me.items = value;
         }
     }

apps/portal/view/shared/content/PageContainer.mjs

@@ -43,7 +43,6 @@ class PageContainer extends Container {
             merge         : 'deep',
             value         : {
                 content: {
-                    module   : '@config:contentComponent',
                     reference: 'content',
                     weight   : 10,
                     listeners: {
@@ -98,20 +97,13 @@ class PageContainer extends Container {
      */
     afterSetContentItems(value, oldValue) {
         if (value) {
+            if (value.content) {
+                value.content.module = this.contentComponent || Component;
+            }
             this.items = value;
         }
     }
 
-    /**
-     * Ensure contentComponent falls back to the default Component if null is passed
-     * @param {Neo.component.Base|null} value
-     * @param {Neo.component.Base|null} oldValue
-     * @returns {Neo.component.Base}
-     */
-    beforeSetContentComponent(value, oldValue) {
-        return value || Component;
-    }
-
     /**
      * Convenience shortcut
      * @member {Neo.button.Base} nextPageButton

test/playwright/unit/container/ItemsMerging.spec.mjs

@@ -228,4 +228,79 @@ test.describe('Container Items Merging', () => {
         expect(merged.flags.active).toBe(true);
         expect(merged.flags.highlighted).toBe(true);
     });
+
+    test('Structural Injection Pattern: Should inject separate config into items via afterSetContentItems', () => {
+        // 1. Define Base Container
+        class BaseContainer extends Container {
+            static config = {
+                className: 'Neo.test.BaseInjectionContainer',
+                // The Skeleton
+                contentItems_: {
+                    [isDescriptor]: true,
+                    merge         : 'deep',
+                    value         : {
+                        mainArea: {
+                            ntype : 'component',
+                            weight: 10,
+                            // Default props
+                            cls   : ['main-area']
+                        }
+                    }
+                },
+                // The Configuration Object to Inject
+                mainAreaConfig_: {
+                    [isDescriptor]: true,
+                    merge         : 'deep',
+                    value         : {
+                        text: 'Base Text',
+                        style: {
+                            color: 'red'
+                        }
+                    }
+                }
+            }
+
+            afterSetContentItems(value) {
+                if (value) {
+                    // Injection Logic
+                    if (this.mainAreaConfig && value.mainArea) {
+                        Neo.assignDefaults(value.mainArea, this.mainAreaConfig);
+                    }
+                    this.items = value;
+                }
+            }
+        }
+        BaseContainer = Neo.setupClass(BaseContainer);
+
+        // 2. Define Subclass overriding the injected config
+        class SubContainer extends BaseContainer {
+            static config = {
+                className: 'Neo.test.SubInjectionContainer',
+                // Override the config object, NOT the item directly
+                mainAreaConfig: {
+                    text: 'Sub Text',
+                    style: {
+                        fontSize: '20px'
+                    },
+                    extraProp: 'foo'
+                }
+            }
+        }
+        SubContainer = Neo.setupClass(SubContainer);
+
+        // 3. Create Instance
+        const instance = Neo.create(SubContainer);
+        const mainItem = instance.items[0];
+
+        // 4. Assertions
+        // Check Skeleton properties
+        expect(mainItem.reference).toBe('mainArea');
+        expect(mainItem.cls).toEqual(['main-area']);
+
+        // Check Injected & Merged properties
+        expect(mainItem.text).toBe('Sub Text'); // Overridden
+        expect(mainItem.style.color).toBe('red'); // Inherited from Base mainAreaConfig
+        expect(mainItem.style.fontSize).toBe('20px'); // Added in Sub mainAreaConfig
+        expect(mainItem.extraProp).toBe('foo'); // Added
+    });
 });