Fix #25917: Template Builder file containers were saving with Identifier instead of Path

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-content-type/dot-palette-content-type.module.ts

@@ -2,14 +2,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { DotPaletteContentTypeComponent } from '@dotcms/app/portlets/dot-edit-page/components/dot-palette/dot-palette-content-type/dot-palette-content-type.component';
-import { DotIconModule, DotSpinnerModule } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotPipesModule } from '@dotcms/app/view/pipes/dot-pipes.module';
+import { DotIconModule, DotMessagePipe, DotSpinnerModule } from '@dotcms/ui';
 
 import { DotPaletteInputFilterModule } from '../dot-palette-input-filter/dot-palette-input-filter.module';
 
 @NgModule({
     imports: [
         CommonModule,
+        DotMessagePipe,
         DotPipesModule,
         DotIconModule,
         DotSpinnerModule,

core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-box/template-builder-box.component.spec.ts

@@ -11,7 +11,7 @@ import { ScrollPanelModule } from 'primeng/scrollpanel';
 
 import { DotContainersService, DotMessageService } from '@dotcms/data-access';
 import { DotMessagePipe } from '@dotcms/ui';
-import { DotContainersServiceMock, mockMatchMedia } from '@dotcms/utils-testing';
+import { containersMock, DotContainersServiceMock, mockMatchMedia } from '@dotcms/utils-testing';
 
 import { TemplateBuilderBoxComponent } from './template-builder-box.component';
 
@@ -127,14 +127,39 @@ describe('TemplateBuilderBoxComponent', () => {
 
     it('should trigger addContainer when click on plus button', () => {
         const addContainerMock = jest.spyOn(spectator.component.addContainer, 'emit');
-        const addButton = spectator.debugElement.query(By.css('.p-dropdown'));
+        const addButton = spectator.debugElement.query(
+            By.css('[data-testId="btn-plus"]>.p-dropdown') // The parent element is not listening to the click event
+        );
         spectator.click(addButton);
         const option = spectator.query('.p-dropdown-item');
 
         spectator.click(option);
         expect(addContainerMock).toHaveBeenCalled();
     });
 
+    it('should emit addContainer with a identifier as identifier when source is DB', () => {
+        const addContainerMock = jest.spyOn(spectator.component.addContainer, 'emit');
+
+        spectator.triggerEventHandler("[data-testId='btn-plus']", 'onChange', {
+            value: containersMock[0]
+        });
+
+        expect(addContainerMock).toHaveBeenCalledWith(containersMock[0]);
+    });
+
+    it('should emit addContainer with a path as identifier when source is FILE', () => {
+        const addContainerMock = jest.spyOn(spectator.component.addContainer, 'emit');
+
+        spectator.triggerEventHandler("[data-testId='btn-plus']", 'onChange', {
+            value: containersMock[2]
+        });
+
+        expect(addContainerMock).toHaveBeenCalledWith({
+            ...containersMock[2],
+            identifier: containersMock[2].path
+        });
+    });
+
     it('should trigger editClasses when click on palette button', () => {
         const editStyleMock = jest.spyOn(spectator.component.editClasses, 'emit');
         const paletteButton = spectator.query(byTestId('box-style-class-button'));

core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-box/template-builder-box.component.ts

@@ -18,7 +18,7 @@ import { DropdownModule } from 'primeng/dropdown';
 import { ScrollPanelModule } from 'primeng/scrollpanel';
 
 import { DotMessageService } from '@dotcms/data-access';
-import { DotContainer, DotContainerMap } from '@dotcms/dotcms-models';
+import { CONTAINER_SOURCE, DotContainer, DotContainerMap } from '@dotcms/dotcms-models';
 import { DotContainerOptionsDirective, DotMessagePipe } from '@dotcms/ui';
 
 import { DotTemplateBuilderContainer, TemplateBuilderBoxSize } from '../../models/models';
@@ -86,11 +86,24 @@ export class TemplateBuilderBoxComponent implements OnChanges {
     }
 
     onContainerSelect({ value }: { value: DotContainer }) {
-        this.addContainer.emit(value);
+        this.addContainer.emit({ ...value, identifier: this.getContainerReference(value) });
         this.formControl.setValue(null);
     }
 
     requestColumnDelete() {
         this.deleteColumn.emit();
     }
+
+    /**
+     * Based on the container source, it returns the identifier that should be used as reference.
+     *
+     * @param dotContainer
+     * @returns string
+     * @memberof TemplateBuilderBoxComponent
+     */
+    private getContainerReference(dotContainer: DotContainer): string {
+        return dotContainer.source === CONTAINER_SOURCE.FILE
+            ? dotContainer.path
+            : dotContainer.identifier;
+    }
 }

core-web/libs/template-builder/src/lib/components/template-builder/store/template-builder.store.spec.ts

@@ -39,14 +39,17 @@ describe('DotTemplateBuilderStore', () => {
         identifier: mockContainer.identifier
     };
 
-    const addContainer = () => {
+    const addContainer = (container = mockContainer) => {
         const parentRow = initialState[0];
 
         const columnToAddContainer: DotGridStackWidget = {
             ...parentRow.subGridOpts?.children[0],
             parentId: parentRow.id as string
         };
-        service.addContainer({ affectedColumn: columnToAddContainer, container: mockContainer });
+        service.addContainer({
+            affectedColumn: columnToAddContainer,
+            container
+        });
     };
 
     beforeEach(() => {

core-web/libs/utils-testing/src/lib/dot-containers.mock.ts

@@ -153,11 +153,13 @@ export const containersMockArray = [
 ];
 
 export const containersMock: DotContainer[] = containersMockArray.map(
-    ({ name, identifier, parentPermissionable }) => ({
+    ({ name, identifier, parentPermissionable, path, source }) => ({
         friendlyName: name,
         title: name,
         parentPermissionable: { hostname: parentPermissionable.hostname },
-        identifier: identifier
+        identifier: identifier,
+        source,
+        path
     })
 );