chore(edit-ema) #27301 Add functionality for empty containers (#27342)

* Finished implementation. Pending resolve issus on tests

* Fixed and added tests on Sdk React: Container and EditEma: ContentletTools

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html

@@ -4,13 +4,18 @@
     data-testId="add-top-button"
     icon="pi pi-plus"></p-button>
 <p-button
+    *ngIf="!isContainerEmpty"
     [ngStyle]="getBottomButtonPosition()"
     (click)="setPositionFlag('after'); menu.toggle($event)"
     data-testId="add-bottom-button"
     icon="pi pi-plus"></p-button>
 <p-menu #menu [model]="items" [popup]="true" appendTo="body"></p-menu>
 
-<div class="actions" [ngStyle]="getActionPosition()" data-testId="actions">
+<div
+    class="actions"
+    *ngIf="!isContainerEmpty"
+    [ngStyle]="getActionPosition()"
+    data-testId="actions">
     <p-button
         (click)="delete.emit(contentlet.payload)"
         data-testId="delete-button"

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.spec.ts

@@ -227,4 +227,35 @@ describe('EmaContentletToolsComponent', () => {
             });
         });
     });
+
+    describe('empty container', () => {
+        beforeEach(
+            () =>
+                (spectator = createComponent({
+                    props: {
+                        contentlet: {
+                            ...contentletAreaMock,
+                            width: 180,
+                            payload: {
+                                contentlet: {
+                                    identifier: 'TEMP_EMPTY_CONTENTLET',
+                                    inode: 'Fake inode',
+                                    title: 'Fake title'
+                                },
+                                container: undefined,
+                                language_id: '1',
+                                pageContainers: [],
+                                pageId: '1'
+                            }
+                        }
+                    }
+                }))
+        );
+
+        it('should render only add button', () => {
+            expect(spectator.query(byTestId('add-top-button'))).toBeDefined();
+            expect(spectator.query(byTestId('add-bottom-button'))).toBeNull();
+            expect(spectator.query(byTestId('actions'))).toBeNull();
+        });
+    });
 });

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.ts

@@ -154,4 +154,15 @@ export class EmaContentletToolsComponent {
             zIndex: '1'
         };
     }
+
+    /**
+     *
+     * Checks if the container is empty, based on the identifier
+     * @readonly
+     * @type {boolean}
+     * @memberof EmaContentletToolsComponent
+     */
+    get isContainerEmpty(): boolean {
+        return this.contentlet.payload.contentlet.identifier === 'TEMP_EMPTY_CONTENTLET';
+    }
 }

core-web/libs/sdk/react/src/lib/components/Container/Container.spec.tsx

@@ -9,28 +9,54 @@ import { MockContextRender, mockPageContext } from '../../mocks/mockPageContext'
 describe('Container', () => {
     // Mock data for your context and container
 
-    const mockContainerRef = {
-        identifier: 'container-1',
-        uuid: '1',
-        containers: []
-    };
-
-    it('renders NoContent component for unsupported content types', () => {
-        const updatedContext = {
-            ...mockPageContext,
-            components: {},
-            isInsideEditor: true
+    describe('with contentlets', () => {
+        const mockContainerRef = {
+            identifier: 'container-1',
+            uuid: '1',
+            containers: []
         };
 
-        render(
-            <MockContextRender mockContext={updatedContext}>
-                <Container containerRef={mockContainerRef} />
-            </MockContextRender>
-        );
-
-        expect(screen.getByTestId('no-component')).toHaveTextContent(
-            'No Component for content-type-1'
-        );
+        it('renders NoContent component for unsupported content types', () => {
+            const updatedContext = {
+                ...mockPageContext,
+                components: {},
+                isInsideEditor: true
+            };
+
+            render(
+                <MockContextRender mockContext={updatedContext}>
+                    <Container containerRef={mockContainerRef} />
+                </MockContextRender>
+            );
+
+            expect(screen.getByTestId('no-component')).toHaveTextContent(
+                'No Component for content-type-1'
+            );
+        });
+
+        describe('without contentlets', () => {
+            const mockContainerRef = {
+                identifier: 'container-2',
+                uuid: '2',
+                containers: []
+            };
+            it('renders EmptyContainer component', () => {
+                const updatedContext = {
+                    ...mockPageContext,
+                    components: {},
+                    isInsideEditor: true
+                };
+                render(
+                    <MockContextRender mockContext={updatedContext}>
+                        <Container containerRef={mockContainerRef} />
+                    </MockContextRender>
+                );
+
+                expect(screen.getByTestId('empty-container')).toHaveTextContent(
+                    'This container is empty.'
+                );
+            });
+        });
     });
 
     // Add tests for pointer events, dynamic component rendering, and other scenarios...

core-web/libs/sdk/react/src/lib/components/Container/Container.tsx

@@ -6,6 +6,32 @@ import { PageContext } from '../../contexts/PageContext';
 import { getContainersData } from '../../utils/utils';
 import { PageProviderContext } from '../PageProvider/PageProvider';
 
+const FAKE_CONTENLET = {
+    identifier: 'TEMP_EMPTY_CONTENTLET',
+    title: 'TEMP_EMPTY_CONTENTLET',
+    contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
+    inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
+    widgetTitle: 'TEMP_EMPTY_CONTENTLET'
+};
+
+function EmptyContainer() {
+    return (
+        <div
+            data-testid="empty-container"
+            style={{
+                width: '100%',
+                backgroundColor: '#d1d4db',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                color: '#fff',
+                height: '10rem'
+            }}>
+            This container is empty.
+        </div>
+    );
+}
+
 function NoContent({ contentType }: { readonly contentType: string }) {
     return <div data-testid="no-component">No Component for {contentType}</div>;
 }
@@ -26,7 +52,9 @@ export function Container({ containerRef }: ContainerProps) {
         containerRef
     );
 
-    const contentletsId = contentlets.map((contentlet) => contentlet.identifier);
+    const updatedContentlets = contentlets.length > 0 ? contentlets : [FAKE_CONTENLET];
+
+    const contentletsId = updatedContentlets.map((contentlet) => contentlet.identifier);
 
     const container = {
         acceptTypes,
@@ -71,8 +99,13 @@ export function Container({ containerRef }: ContainerProps) {
         });
     }
 
-    const renderContentlets = contentlets.map((contentlet) => {
-        const Component = components[contentlet.contentType] || NoContent;
+    const renderContentlets = updatedContentlets.map((contentlet) => {
+        const ContentTypeComponent = components[contentlet.contentType] || NoContent;
+
+        const Component =
+            contentlet.identifier === 'TEMP_EMPTY_CONTENTLET'
+                ? EmptyContainer
+                : ContentTypeComponent;
 
         const contentletPayload = {
             container,

core-web/libs/sdk/react/src/lib/mocks/mockPageContext.tsx

@@ -47,6 +47,21 @@ export const mockPageContext: PageProviderContext = {
                     }
                 ]
             }
+        },
+        'container-2': {
+            container: {
+                path: 'path/to/container',
+                identifier: 'container-2',
+                maxContentlets: 100
+            },
+            containerStructures: [
+                {
+                    contentTypeVar: 'content-type-2'
+                }
+            ],
+            contentlets: {
+                'uuid-2': []
+            }
         }
     },
     page: { identifier: 'page-1', title: 'Hello Page' },