Issue 36702 asset picker

core-web/apps/dotcms-ui-e2e/playwright.config.ts

@@ -45,7 +45,14 @@ export default defineConfig({
     forbidOnly: !!process.env.CI,
     /* Retry on CI only */
     retries: process.env.CI ? 2 : 0,
-    /* Parallelize CI (2 workers); local keeps Playwright default. */
+    /*
+     * Parallelize CI (2 workers); local keeps Playwright default.
+     *
+     * Do NOT lower this to work around a crashing shard. The 1 -> 2 bump is a measured improvement
+     * from #36567 / PR #36647: the Playwright phase went from ~49m to a <30m target, so going back
+     * roughly doubles E2E time for every PR in the repo. If concurrency ever is proven to be the
+     * cause, that belongs in its own change against #36567, not smuggled into a feature PR.
+     */
     workers: process.env.CI ? 2 : undefined,
     timeout: 60000,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
@@ -66,7 +73,16 @@ export default defineConfig({
         trace: 'on-first-retry',
         screenshot: 'only-on-failure',
         video: 'retain-on-failure',
-        headless: headless
+        headless: headless,
+        launchOptions: {
+            /*
+             * Chromium puts its shared-memory allocations in /dev/shm, which a container gives 64MB
+             * of by default. Exhausting it crashes the browser process outright — a SIGSEGV with no
+             * Playwright output and no JUnit report, which is exactly how the CI shard died. This
+             * flag moves those allocations to regular temp files instead.
+             */
+            args: ['--disable-dev-shm-usage']
+        }
     },
     /* Run your local dev server before starting the tests */
     webServer:

core-web/apps/dotcms-ui-e2e/pom.xml

@@ -24,6 +24,18 @@
         <e2e.test.env>local</e2e.test.env>
         <e2e.frontend.dir>../../</e2e.frontend.dir>
         <e2e.playwright.args></e2e.playwright.args>
+        <!--
+            NODE_OPTIONS for the process that runs Playwright, raised from the default because the CI
+            shard was dying mid-run. Override per invocation while tuning, with
+            -De2e.node.options=... (note: XML comments cannot contain a double hyphen, so the flag
+            name is spelled without its leading dashes below).
+
+            This lifts V8's old-space ceiling and nothing else. It does NOT address a SIGSEGV or an
+            OOM-killed container: a JS heap exhaustion aborts with "Reached heap limit" and exit 134,
+            so for any other crash signature look at the memory the container has, not at this value.
+            max-old-space-size is the flag being set.
+        -->
+        <e2e.node.options>--max-old-space-size=4096</e2e.node.options>
         <e2e.test.cmd>nx run dotcms-ui-e2e:e2e --configuration=${e2e.test.env} -- ${e2e.playwright.args}</e2e.test.cmd>
         <e2e.post.test.cmd>exec sh -c "mkdir -p apps/dotcms-ui-e2e/target/playwright-reports &amp;&amp; cp apps/dotcms-ui-e2e/test-results/junit.xml apps/dotcms-ui-e2e/target/playwright-reports/junit.xml"</e2e.post.test.cmd>
         <tomcat.port>8080</tomcat.port>
@@ -90,6 +102,7 @@
                             <environmentVariables>
                                 <CI>true</CI>
                                 <CURRENT_ENV>${e2e.test.env}</CURRENT_ENV>
+                                <NODE_OPTIONS>${e2e.node.options}</NODE_OPTIONS>
                                 <PATH>${node.install.dir}:${env.PATH}</PATH>
                             </environmentVariables>
                         </configuration>

core-web/apps/dotcms-ui-e2e/src/requests/contentlets.ts

@@ -43,6 +43,48 @@ export async function createContentlet(
     return entity as Contentlet;
 }
 
+/**
+ * Creates a dotAsset contentlet from an in-memory file, in one multipart call.
+ *
+ * Mirrors what the product itself does (`DotUploadFileService.uploadDotAsset` →
+ * `DotWorkflowActionsFireService.newContentlet`): a `PUT .../fire/NEW` whose body carries the binary
+ * as the `file` part and the contentlet as a `json` part. Going through `/api/v1/temp` first would
+ * work too, but that endpoint fingerprints the caller (session + origin), so a single call is one
+ * less thing to get wrong from a test runner.
+ *
+ * `indexPolicy=WAIT_FOR` is what makes this usable for seeding — the asset is searchable by the time
+ * the request returns, so a test can open a picker and expect to find it.
+ *
+ * @param request - Playwright APIRequestContext
+ * @param file - The file to store, as `{ name, mimeType, buffer }`
+ * @param hostFolder - Site identifier or folder id the asset is created under
+ * @returns The created contentlet
+ */
+export async function createDotAsset(
+    request: APIRequestContext,
+    file: { name: string; mimeType: string; buffer: Buffer },
+    hostFolder: string
+): Promise<Contentlet> {
+    const endpoint = `/api/v1/workflow/actions/default/fire/NEW?indexPolicy=WAIT_FOR`;
+    const response = await request.put(endpoint, {
+        multipart: {
+            file: { name: file.name, mimeType: file.mimeType, buffer: file.buffer },
+            json: JSON.stringify({
+                contentlet: { contentType: 'dotAsset', file: file.name, hostFolder }
+            })
+        },
+        headers: {
+            Authorization: generateBase64Credentials(admin1.username, admin1.password)
+        }
+    });
+
+    expect(response.status()).toBe(200);
+
+    const responseData = await response.json();
+
+    return responseData.entity as Contentlet;
+}
+
 /**
  * Relates content via the relationship API.
  * Uses the PUBLISH workflow action to save content with relationship data.

core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/file-upload-fields/file-field/file-field.spec.ts

@@ -1,7 +1,9 @@
 import { faker } from '@faker-js/faker';
 import { NewEditContentFormPage } from '@pages';
 import { expect, test } from '@playwright/test';
+import { Contentlet, createDotAsset, deleteContentlets } from '@requests/contentlets';
 import { ContentType, createFakeContentType, deleteContentType } from '@requests/contentType';
+import { getDefaultSite } from '@requests/sites';
 import {
     createFakePayloadFileField,
     createFakePayloadTextField
@@ -10,7 +12,8 @@ import { uniqueSuffix } from '@utils/utils';
 
 import { FileField } from './helpers/file-field';
 
-import { E2E_IMPORT_URL, createTestTextFile } from '../helpers/file-test-data';
+import { AssetPickerDialog } from '../helpers/asset-picker-dialog';
+import { E2E_IMPORT_URL, createTestPngFile, createTestTextFile } from '../helpers/file-test-data';
 
 const FILE_FIELD_VARIABLE = 'fileField';
 const TEST_FILE = createTestTextFile();
@@ -118,6 +121,85 @@ test('import image URL shows Edit image button', async ({ page }) => {
     await field.expectEditButtonVisible();
 });
 
+test.describe('select an existing file through the AssetPicker', () => {
+    let seededAsset: Contentlet | null = null;
+    let assetName: string;
+
+    // Seeded per test through the REST API: the picker only reads it, but a unique file name per
+    // test is what lets the search find exactly this asset regardless of what else the environment
+    // happens to contain.
+    //
+    // An image on purpose: the preview renders text assets as an editable code block
+    // (`code-preview`) and everything else as thumbnail + metadata, so a .txt here would never
+    // produce the file name this test asserts on.
+    test.beforeEach(async ({ request }) => {
+        const site = await getDefaultSite(request);
+        seededAsset = await createDotAsset(
+            request,
+            createTestPngFile(`e2e-picker-${uniqueSuffix()}.png`),
+            site.identifier
+        );
+        assetName = seededAsset.title;
+    });
+
+    test.afterEach(async ({ request }) => {
+        if (seededAsset) {
+            await deleteContentlets(request, [seededAsset.identifier]);
+            seededAsset = null;
+        }
+    });
+
+    test('open the picker, select a file, and populate the field @critical', async ({ page }) => {
+        const formPage = new NewEditContentFormPage(page);
+        await formPage.goToNew(contentTypeVariable);
+
+        const field = new FileField(page, FILE_FIELD_VARIABLE);
+        await field.expectVisible();
+
+        const picker = new AssetPickerDialog(page);
+        await field.openSelectExistingDialog();
+        await picker.waitForVisible();
+
+        // Nothing picked yet, so there is nothing to confirm.
+        await picker.expectConfirmDisabled();
+
+        await picker.searchFor(assetName);
+        await picker.expectRowVisible(assetName);
+
+        // Clicking the title, not the row padding: the whole row is the selection target here.
+        await picker.selectRowByTitle(assetName);
+        await picker.expectRowSelected(assetName);
+        await picker.expectConfirmEnabled();
+
+        await picker.confirm();
+
+        await picker.expectClosed();
+        await field.expectPreviewVisible();
+        await field.expectThumbnailVisible();
+        await field.expectPreviewShowsFileName(assetName);
+    });
+
+    test('cancel the picker and leave the field untouched', async ({ page }) => {
+        const formPage = new NewEditContentFormPage(page);
+        await formPage.goToNew(contentTypeVariable);
+
+        const field = new FileField(page, FILE_FIELD_VARIABLE);
+        await field.expectVisible();
+
+        const picker = new AssetPickerDialog(page);
+        await field.openSelectExistingDialog();
+        await picker.waitForVisible();
+
+        await picker.searchFor(assetName);
+        await picker.selectRowByTitle(assetName);
+        await picker.cancel();
+
+        await picker.expectClosed();
+        // Highlighting a row and backing out must not populate the field.
+        await field.expectPreviewHidden();
+    });
+});
+
 test.describe('required file field', () => {
     let requiredContentType: ContentType;
     let requiredContentTypeVariable: string;

core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/file-upload-fields/file-field/helpers/file-field.ts

@@ -67,6 +67,23 @@ export class FileField {
         await this.expectPreviewVisible();
     }
 
+    /**
+     * Opens the AssetPicker ("Select Existing File/Image") and waits for its first result page.
+     *
+     * The picker searches as soon as it is configured, so waiting on that request is what tells us
+     * the list is ready to be asserted on rather than still empty.
+     */
+    async openSelectExistingDialog() {
+        const searchResponse = this.page.waitForResponse(
+            (response) =>
+                response.url().includes('/api/v1/drive/search') && response.status() === 200,
+            { timeout: 30000 }
+        );
+
+        await this.selectExistingFileBtn.getByRole('button').click();
+        await searchResponse;
+    }
+
     async expectPreviewVisible() {
         await expect(this.preview).toBeVisible({ timeout: 15000 });
     }

core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/file-upload-fields/helpers/asset-picker-dialog.ts

@@ -0,0 +1,113 @@
+import { type Locator, type Page, expect } from '@playwright/test';
+
+/**
+ * Locator helper for the AssetPicker dialog — the "Select Existing File/Image" modal opened from a
+ * File or Image field.
+ *
+ * The picker renders its own header (the dialog is opened with `showHeader: false`), so everything
+ * here is scoped to the picker root rather than to PrimeNG's chrome.
+ */
+export class AssetPickerDialog {
+    readonly root: Locator;
+    readonly title: Locator;
+    readonly closeButton: Locator;
+    readonly fullscreenButton: Locator;
+    readonly search: Locator;
+    readonly sidebar: Locator;
+    readonly treeSearch: Locator;
+    readonly list: Locator;
+    readonly rows: Locator;
+    readonly cancelButton: Locator;
+    readonly confirmButton: Locator;
+
+    constructor(private page: Page) {
+        this.root = page.getByTestId('asset-picker');
+        this.title = this.root.getByTestId('asset-picker-title');
+        this.closeButton = this.root.getByTestId('asset-picker-close-btn');
+        this.fullscreenButton = this.root.getByTestId('asset-picker-fullscreen-btn');
+        // Two search boxes are on screen at once, so each carries its own id — a shared one made
+        // every selector here ambiguous and was what broke this suite in CI.
+        this.search = this.root.getByTestId('asset-picker-search-input');
+        this.sidebar = this.root.getByTestId('asset-picker-sidebar');
+        this.treeSearch = this.root.getByTestId('asset-picker-tree-search-input');
+        this.list = this.root.getByTestId('asset-picker-list');
+        this.rows = this.list.getByTestId('item-row');
+        this.cancelButton = this.root.getByTestId('asset-picker-cancel');
+        this.confirmButton = this.root.getByTestId('asset-picker-confirm');
+    }
+
+    async waitForVisible(): Promise<void> {
+        await expect(this.root).toBeVisible({ timeout: 15000 });
+    }
+
+    async expectClosed(): Promise<void> {
+        await expect(this.root).toBeHidden({ timeout: 10000 });
+    }
+
+    async expectTitle(text: string): Promise<void> {
+        await expect(this.title).toHaveText(text);
+    }
+
+    /**
+     * Types a term into the asset search and waits for the results it produces.
+     *
+     * The search is debounced and widens the scope to the whole site, which is what makes it a
+     * reliable way to reach a seeded asset without depending on which folder the picker opened on.
+     */
+    async searchFor(term: string): Promise<void> {
+        const response = this.page.waitForResponse(
+            (res) => res.url().includes('/api/v1/drive/search') && res.status() === 200,
+            { timeout: 30000 }
+        );
+        await this.search.fill(term);
+        await response;
+    }
+
+    /** The row whose title cell contains `name`. */
+    row(name: string): Locator {
+        return this.rows.filter({ hasText: name });
+    }
+
+    async expectRowVisible(name: string): Promise<void> {
+        await expect(this.row(name)).toBeVisible({ timeout: 15000 });
+    }
+
+    /**
+     * Selects a row by clicking its title — the content, not the cell padding.
+     *
+     * Clicking the title specifically is the point: in the picker the whole row selects, whereas in
+     * Content Drive the title opens the item instead.
+     */
+    async selectRowByTitle(name: string): Promise<void> {
+        await this.row(name).getByTestId('item-title-text').click();
+    }
+
+    async expectRowSelected(name: string): Promise<void> {
+        await expect(this.row(name).getByRole('radio')).toBeChecked();
+    }
+
+    async expectConfirmEnabled(): Promise<void> {
+        await expect(this.confirmButton.getByRole('button')).toBeEnabled();
+    }
+
+    async expectConfirmDisabled(): Promise<void> {
+        await expect(this.confirmButton.getByRole('button')).toBeDisabled();
+    }
+
+    async confirm(): Promise<void> {
+        await this.confirmButton.getByRole('button').click();
+    }
+
+    async cancel(): Promise<void> {
+        await this.cancelButton.getByRole('button').click();
+    }
+
+    async close(): Promise<void> {
+        await this.closeButton.getByRole('button').click();
+    }
+
+    /** Rows offer no per-row actions here — a row exists to be picked, not managed. */
+    async expectNoRowActions(): Promise<void> {
+        await expect(this.list.getByTestId('kebab-menu-button')).toHaveCount(0);
+    }
+}