ISSUE-139957: fixing components init and update

Author: marekpelc-pega

scripts/dxcomponents/components-manager.js

@@ -48,21 +48,4 @@ export class ComponentsManager {
         const ComponentClass = getComponentFromMap(type);
         return new ComponentClass(this, ...args);
     }
-
-    /**
-     * Creates or updates a component.
-     * @param component - component to update, or null/undefined to create a new one
-     * @param type - type of component to create
-     * @param args - arguments to pass to the component's constructor
-     * @param init - if true, calls the component's init() method after creation
-     * @returns created or updated component
-     */
-    upsert(component, type, args = []) {
-        if (component) {
-            component.update(...args);
-            return component;
-        } else {
-            return this.create(type, args);
-        }
-    }
 }

scripts/dxcomponents/components/containers/assignment.component.js

@@ -127,12 +127,12 @@ export class AssignmentComponent extends BaseComponent {
             this.arSecondaryButtons$,
             this.onActionButtonClick,
         ];
-        this.assignmentCardComponent = this.componentsManager.upsert(
-            this.assignmentCardComponent,
-            "AssignmentCard",
-            assignmentCardArgs
-        );
-        this.assignmentCardComponent.init();
+        if (this.assignmentCardComponent) {
+            this.assignmentCardComponent.update(...assignmentCardArgs);
+        } else {
+            this.assignmentCardComponent = this.componentsManager.create("AssignmentCard", assignmentCardArgs);
+            this.assignmentCardComponent.init();
+        }
         this.loading = this.newPConn.getLoadingStatus();
         this.sendPropsUpdate();
     }

scripts/dxcomponents/components/containers/root-container.component.js

@@ -103,12 +103,12 @@ export class RootContainerComponent extends BaseComponent {
             options,
         };
         const viewContainerPConn = PCore.createPConnect(viewContConfig).getPConnect();
-        this.#viewContainerComponent = this.componentsManager.upsert(
-            this.#viewContainerComponent,
-            viewContainerPConn.meta.type,
-            [viewContainerPConn]
-        );
-        this.#viewContainerComponent.init();
+        if (this.#viewContainerComponent) {
+            this.#viewContainerComponent.update(viewContainerPConn)
+        } else {
+            this.#viewContainerComponent = this.componentsManager.create(viewContainerPConn.meta.type, [viewContainerPConn])
+            this.#viewContainerComponent.init();
+        }
     }
 
     #configureModalContainer() {
@@ -123,12 +123,12 @@ export class RootContainerComponent extends BaseComponent {
         });
 
         const modalViewContainerPConn = configObjModal.getPConnect();
-        this.#modalViewContainerComponent = this.componentsManager.upsert(
-            this.#modalViewContainerComponent,
-            modalViewContainerPConn.meta.type,
-            [modalViewContainerPConn]
-        );
-        this.#modalViewContainerComponent.init();
+        if (this.#modalViewContainerComponent) {
+            this.#modalViewContainerComponent.update(modalViewContainerPConn)
+        } else {
+            this.#modalViewContainerComponent = this.componentsManager.create(modalViewContainerPConn.meta.type, [modalViewContainerPConn])
+            this.#modalViewContainerComponent.init();
+        }
         if (this.compId !== "1") {
             console.error(TAG, "RootComponent id must be '1' to match root container on consumer side");
             return;

scripts/dxcomponents/components/containers/templates/field-group-template.component.js

@@ -99,8 +99,14 @@ export class FieldGroupTemplateComponent extends BaseComponent {
                     lookForChildInConfig,
                     evaluateAllowRowAction(allowRowEdit, item)
                 ).getPConnect();
-                const newComponent = this.componentsManager.upsert(oldComponent, newPConn.meta.type, [newPConn]);
-                newComponent.init();
+                let newComponent;
+                if (oldComponent) {
+                    oldComponent.update(newPConn)
+                    newComponent = oldComponent;
+                } else {
+                    newComponent = this.componentsManager.create(newPConn.meta.type, [newPConn]);
+                    newComponent.init();
+                }
                 updatedItems.push({
                     id: index,
                     name:

scripts/dxcomponents/components/containers/templates/simple-table-manual.component.js

@@ -244,7 +244,14 @@ export class SimpleTableManualComponent extends BaseComponent {
                     };
                     const cellPConn = PCore.createPConnect(config).getPConnect();
                     const oldComponent = editableRow?.cells?.[cellIndex]?.component;
-                    const newComponent = this.componentsManager.upsert(oldComponent, cellPConn.meta.type, [cellPConn]);
+                    let newComponent;
+                    if (oldComponent) {
+                        oldComponent.update(cellPConn)
+                        newComponent = oldComponent
+                    } else {
+                        newComponent = this.componentsManager.create(cellPConn.meta.type, [cellPConn])
+                        newComponent.init();
+                    }
                     newEditableCells.push({ component: newComponent })
                 }
             });

scripts/dxcomponents/components/containers/templates/simple-table.component.js

@@ -69,17 +69,22 @@ export class SimpleTableComponent extends BaseComponent {
         }
         if (multiRecordDisplayAs === "fieldGroup") {
             const fieldGroupProps = { ...configProps, contextClass };
-            this.childComponent = this.componentsManager.upsert(this.childComponent, "FieldGroupTemplate", [
-                this.pConn,
-                fieldGroupProps,
-            ]);
-            this.childComponent.init();
+            if (this.childComponent) {
+                this.childComponent.update(this.pConn, fieldGroupProps)
+            } else {
+                this.childComponent = this.componentsManager.create("FieldGroupTemplate", [this.pConn, fieldGroupProps]);
+                this.childComponent.init();
+            }
             this.#sendPropsUpdate();
         } else if (fieldMetadata && fieldMetadata.type === 'Page List' && fieldMetadata.dataRetrievalType === 'refer') {
             console.warn(TAG, 'Displaying ListView in SimpleTable is not supported yet.');
         } else {
-            this.childComponent = this.componentsManager.upsert(this.childComponent, "SimpleTableManual", [this.pConn]);
-            this.childComponent.init();
+            if (this.childComponent) {
+                this.childComponent.update(this.pConn);
+            } else {
+                this.childComponent = this.componentsManager.create("SimpleTableManual", [this.pConn]);
+                this.childComponent.init();
+            }
             this.#sendPropsUpdate();
         }
     }

scripts/dxcomponents/components/containers/view.component.js

@@ -116,8 +116,12 @@ export class ViewComponent extends ContainerBaseComponent {
             this.destroyChildren();
         }
 
-        this.childrenComponents[0] = this.componentsManager.upsert(this.childrenComponents[0], template, [this.pConn]);
-        this.childrenComponents[0].init();
+        if (this.childrenComponents[0]) {
+            this.childrenComponents[0].update(this.pConn);
+        } else {
+            this.childrenComponents[0] = this.componentsManager.create(template, [this.pConn]);
+            this.childrenComponents[0].init();
+        }
     }
 
     #evaluateVisibility(pConn, referenceContext) {