SUP-19876: Fix the regression of missing content staging status icons

cms-integration-tests/cms/content-packages/Full/metadata.json

@@ -0,0 +1,5 @@
+{
+  "name" : "Full",
+  "timestamp" : 1782394919,
+  "id" : ""
+}

cms-integration-tests/compose.yml

@@ -82,6 +82,7 @@ services:
       - ./cms/commands:/cms/scheduler-commands
       - ./cms/conf:/cms/conf
       - ./cms/packages:/cms/packages:x
+      - ./cms/content-packages:/cms/content-packages
       - ./cms/logs:/cms/logs:x
 
     healthcheck:

cms-oss-changelog/src/changelog/entries/2026/06/8813.SUP-19876.bugfix

@@ -0,0 +1 @@
+Editor User Interface: The regression of missing item status icons in Content Staging mode has been fixed. 

cms-ui/apps/editor-ui/e2e/list-loading.spec.ts

@@ -1,6 +1,7 @@
-import { AccessControlledType, GcmsPermission, Node, PageCopyResponse, User } from '@gentics/cms-models';
+import { AccessControlledType, GcmsPermission, Node, PageCopyResponse, User, Variant } from '@gentics/cms-models';
 import {
     createClient,
+    isVariant,
     EntityImporter,
     FOLDER_T,
     GroupImportData,
@@ -20,6 +21,8 @@ import {
     setupUserDataRerouting,
     TestSize,
     UserImportData,
+    openContext,
+    clickModalAction,
 } from '@gentics/e2e-utils';
 import { expect, Locator, Page, test } from '@playwright/test';
 import { AUTH } from './common';
@@ -297,4 +300,52 @@ test.describe('List Loading', () => {
             }
         });
     });
+
+    test.describe('Content Staging', () => {
+        test.skip(() => !isVariant(Variant.ENTERPRISE), 'Requires Enterpise features');
+
+        test.beforeEach(async ({ page }) => {
+            // Pagination data may be loaded from the server stored user-data
+            // This will simply return empty data for the user
+            await setupUserDataRerouting(page);
+
+            await navigateToApp(page);
+            await loginWithForm(page, AUTH.admin);
+            await selectNode(page, IMPORTER.get(NODE_FULL)!.id);
+        });
+
+        test('should load content under staging mode, displaying items\' staging status', {
+            annotation: [{
+                type: 'ticket',
+                description: 'SUP-19876',
+            }],
+        }, async ({ page }) => {
+            const actionMenu = await openContext(page.locator('gtx-actions-selector > [data-context-id="actions-menu"]'));
+            await actionMenu.locator('.action-buttons-dropdown-content button[data-action-id="content-staging"]').click();
+
+            const modal = page.locator('gtx-content-staging-modal');
+            await modal.locator('gtx-content-package-list gtx-contents-list-item gtx-checkbox label').click();
+            await clickModalAction(modal, 'confirm');
+
+            // Expect the leave content-staging mode button to be visible
+            await page.locator('gtx-button.staging-mode-leaver').isVisible();
+
+            const folderList = findList(page, 'folder');
+            const folderItems = await folderList.locator('item-list-row').all();
+            for (const item of folderItems) {
+                const status = item.locator('.status-label.staging');
+                await expect(status).toBeVisible();
+                await expect(status).not.toContainClass('included');
+            }
+
+            const pageList = findList(page, 'page');
+            const pageItems = await pageList.locator('item-list-row').all();
+            for (const item of pageItems) {
+                const status = item.locator('.status-label.staging');
+                await expect(status).toBeVisible();
+                await expect(status).not.toContainClass('included');
+            }
+        });
+
+    });
 });

cms-ui/apps/editor-ui/src/app/core/components/content-staging-modal/content-staging-modal.component.html

@@ -16,6 +16,7 @@ <h5>{{ 'modal.select_content_package_title' | i18n }}</h5>
         <gtx-button
             type="secondary"
             flat
+            data-action="close"
             (click)="closeFn()"
         >{{ 'modal.close' | i18n }}</gtx-button>
     </ng-container>
@@ -24,11 +25,13 @@ <h5>{{ 'modal.select_content_package_title' | i18n }}</h5>
         <gtx-button
             type="secondary"
             flat
+            data-action="cancel"
             (click)="closeFn()"
         >{{ 'modal.cancel' | i18n }}</gtx-button>
 
         <gtx-button
             type="primary"
+            data-action="confirm"
             (click)="updatePackageInState()"
         >{{ (activePackage ? 'modal.confirm_content_package_select' : 'modal.leave_content_staging_mode') | i18n }}</gtx-button>
     </ng-template>

cms-ui/apps/editor-ui/src/app/list-view/components/grid-item/grid-item.component.html

@@ -85,6 +85,12 @@
                     <i class="material-icons" [attr.translate]="'no'">open_in_new</i>
                 </gtx-button>
             </a>
+            <item-status-label *ngIf="uiMode === UIMode.STAGING"
+                 [item]="item"
+                 [activeNodeId]="activeNode?.id"
+                 [uiMode]="uiMode"
+                 [stagingMap]="stagingMap"
+             ></item-status-label>
             <file-status-label *ngIf="uiMode === UIMode.EDIT" [item]="item"></file-status-label>
         </div>
     </div>

cms-ui/apps/editor-ui/src/app/shared/components/item-list-row/item-list-row.component.html

@@ -79,9 +79,8 @@
                     ></a>
                 </ng-template>
 
-                <ng-container *ngIf="uiMode === UIMode.EDIT && item">
+                <ng-container *ngIf="item">
                     <item-status-label
-                        *ngIf="item.type === 'page' || item.type === 'form'"
                         [item]="item"
                         [nodeLanguages]="nodeLanguages"
                         [activeNodeId]="activeNode?.id"
@@ -90,7 +89,7 @@
                     ></item-status-label>
 
                     <file-status-label
-                        *ngIf="item.type === 'image' || item.type === 'file'"
+                        *ngIf="(item.type === 'image' || item.type === 'file') && uiMode === UIMode.EDIT"
                         [item]="item"
                     ></file-status-label>
                 </ng-container>

cms-ui/apps/editor-ui/src/app/shared/components/item-status-label/item-status-label.component.html

@@ -80,7 +80,7 @@
 </gtx-dropdown-list>
 
 <ng-template #stagingLabel let-included="included">
-    <div class="status-label" [class.included]="included">
+    <div class="status-label staging" [class.included]="included">
         <icon>{{ included ? 'check' : 'close' }}</icon>
         {{ (included ? 'common.staging_status_included' : 'common.staging_status_excluded') | i18n }}
     </div>