feat(edit-content): implement Rules dialog component for Page content type (#35121)

## Summary

- Creates `DotEditContentSidebarRulesComponent` — a clickable card
(matching the Permissions pattern) that opens a Rules dialog
- Creates `DotRulesDialogComponent` — wraps the existing
`DotRuleEngineContainerComponent`, providing a component-level
`ActivatedRoute` stub to supply the `pageId`
- Adds both components inside the **settings tab (cog)** of the Edit
Content sidebar — Rules appears below Permissions, visible only when the
content type is `HTMLPAGE` (Page)
- Adds i18n key `edit.content.sidebar.rules.title=Rules` to
`Language.properties`

Closes #31679

## Acceptance Criteria

- [x] Rules button appears in the settings tab (same tab as Permissions)
- [x] Rules button is only visible for Page content types (`baseType ===
'HTMLPAGE'`)
- [x] Clicking the card opens `DotRulesDialogComponent` with the
existing Rules engine
- [x] Dialog uses `closable: true`, `closeOnEscape: false` (matches
Permissions pattern)
- [x] Keyboard accessible — responds to `Enter` and `Space`
- [x] Guards against double-open and empty identifier
- [x] Unit tests for both new components (21 tests)
- [x] Sidebar spec updated to cover Rules visibility conditions

## Test plan

- [ ] Open a **Page** contentlet in Edit Content → settings tab → verify
Rules card appears below Permissions
- [ ] Open a **non-Page** contentlet → verify Rules card does NOT appear
- [ ] Click the Rules card → verify the Rules dialog opens with the
correct page rules
- [ ] Verify ESC does not close the dialog (controlled close via X
button)
- [ ] Verify creating a new Page contentlet → Rules card does NOT appear
(only for existing)

## Visual Changes



https://github.com/user-attachments/assets/a08fd8e1-46b1-40d0-9927-c3cd8f3bde27

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: adrianjm-dotCMS

core-web/apps/dotcms-ui-e2e/CLAUDE.md

@@ -423,3 +423,6 @@ await page.waitForResponse(...);  // May miss the response
 11. **Direct URL navigation** — Don't go directly to `/content/new/{type}`. Use `goToNew()` which goes through the content listing (Dojo) first
 12. **Dojo widget IDs are fragile** — Never use `#dijit_form_DropDownButton_0`. Use role or class selectors instead
 13. **Multiple instances** — When a page has multiple relationship fields, pass `fieldVariable` to scope the helper to a specific field via `data-testid="field-{variable}"`
+14. **HTML page navigation** — HTML pages don't have `data-testid="title"`, so `goToContent()` (which waits for that field) hangs. Navigate directly with `page.goto('/dotAdmin/#/content/{inode}')` and wait for `dot-edit-content-sidebar` instead.
+15. **`hostFolder` for HTML pages** — The API rejects the string `'default'`. Resolve the default site via `GET /api/v1/site` and use `defaultSite.identifier` as `hostFolder`.
+16. **New editor for custom content types** — Navigating to `/dotAdmin/#/content/{inode}` shows the legacy editor unless the content type has `metadata: { CONTENT_EDITOR2_ENABLED: true }`. HTML pages have this enabled by default; custom types created in tests must set it explicitly.

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

@@ -2,25 +2,36 @@ import { APIRequestContext, expect } from '@playwright/test';
 import { admin1 } from '@utils/credentials';
 import { generateBase64Credentials } from '@utils/generateBase64Credential';
 
+import { getSites } from './sites';
+
 export interface Page {
     identifier: string;
     contentType: 'htmlpageasset';
     title: string;
     url: string;
-    hostFolder: 'default';
-    template: 'SYSTEM_TEMPLATE';
+    hostFolder: string;
+    template: string;
     friendlyName: string;
     cachettl: number;
     inode: string;
 }
 
-type CreatePage = Omit<Page, 'identifier' | 'inode'>;
+type CreatePage = Omit<Page, 'identifier' | 'inode' | 'hostFolder'>;
+
+export async function createPage(request: APIRequestContext, data: CreatePage): Promise<Page> {
+    const sites = await getSites(request);
+    const defaultSite = sites.find((site) => site.default && !site.systemHost);
+    if (!defaultSite) {
+        throw new Error('No default site found. Cannot create HTML page.');
+    }
 
-export async function createPage(request: APIRequestContext, data: CreatePage) {
     const endpoint = `/api/v1/workflow/actions/default/fire/PUBLISH?indexPolicy=WAIT_FOR`;
     const response = await request.post(endpoint, {
         data: {
-            contentlet: data
+            contentlet: {
+                ...data,
+                hostFolder: defaultSite.identifier
+            }
         },
         headers: {
             Authorization: generateBase64Credentials(admin1.username, admin1.password)
@@ -30,10 +41,18 @@ export async function createPage(request: APIRequestContext, data: CreatePage) {
     expect(response.status()).toBe(200);
 
     const responseData = await response.json();
-    const results = responseData.entity.results as Page[];
+    const results = responseData.entity.results;
     expect(results).toHaveLength(1);
+
+    // The API wraps the contentlet under its content type variable key
+    // e.g. results[0] = { "htmlpageasset": { identifier, inode, ... } }
     const key = Object.keys(results[0])[0];
-    return results[0][key as keyof Page];
+    const page = results[0][key] as Page;
+
+    expect(page.inode).toBeTruthy();
+    expect(page.identifier).toBeTruthy();
+
+    return page;
 }
 
 export async function executeAction(request: APIRequestContext, actionId: string, inode: string) {

core-web/apps/dotcms-ui-e2e/src/tests/edit-content/sidebar/settings-tab.spec.ts

@@ -0,0 +1,274 @@
+import { expect, test } from '@playwright/test';
+import { deleteContentlets } from '@requests/contentlets';
+import { ContentType, deleteContentType } from '@requests/contentType';
+import { createPage, Page as DotPage } from '@requests/pages';
+import { admin1 } from '@utils/credentials';
+import { generateBase64Credentials } from '@utils/generateBase64Credential';
+
+/**
+ * SystemWorkflow ID — standard across all dotCMS instances.
+ */
+const SYSTEM_WORKFLOW_ID = 'd61a59e1-a49c-46f2-a929-db2b4bfa88b2';
+
+type ContentTypeWithVariable = ContentType & { variable: string };
+
+/**
+ * Navigate to edit content for a given inode and click the Settings tab (tab index 3).
+ * Uses direct navigation instead of goToContent() because HTML pages don't have
+ * the data-testid="title" field that goToContent() waits for.
+ */
+async function navigateToSettingsTab(page: import('@playwright/test').Page, inode: string) {
+    await page.goto(`/dotAdmin/#/content/${inode}`);
+    await page.waitForLoadState('domcontentloaded');
+    // Wait for the edit content sidebar to confirm the editor has loaded
+    await page.locator('dot-edit-content-sidebar').waitFor({ state: 'visible', timeout: 15000 });
+
+    // Settings tab is the p-tab containing the cog icon (tab index 3)
+    const settingsTab = page.locator('p-tab:has(.pi-cog)');
+    await settingsTab.waitFor({ state: 'visible', timeout: 10000 });
+    await settingsTab.click();
+}
+
+// ─── Permissions Dialog ───────────────────────────────────────────────────────
+
+test.describe('Permissions Dialog', () => {
+    test.describe.configure({ mode: 'serial' });
+
+    let htmlPage: DotPage;
+
+    test.beforeAll(async ({ request }) => {
+        htmlPage = await createPage(request, {
+            contentType: 'htmlpageasset',
+            title: `E2E Permissions Test Page ${Date.now()}`,
+            url: `e2e-permissions-test-${Date.now()}`,
+            template: 'SYSTEM_TEMPLATE',
+            friendlyName: 'E2E Permissions Test Page',
+            cachettl: 0
+        });
+    });
+
+    test.afterAll(async ({ request }) => {
+        if (htmlPage?.identifier) {
+            await deleteContentlets(request, [htmlPage.identifier]);
+        }
+    });
+
+    test.describe('permissions card visibility', () => {
+        test('permissions card is visible in settings tab for any saved contentlet @critical', async ({
+            page
+        }) => {
+            await navigateToSettingsTab(page, htmlPage.inode);
+
+            await expect(page.getByTestId('permissions')).toBeAttached();
+            await expect(page.getByTestId('permissions-card')).toBeVisible();
+        });
+    });
+
+    test.describe('open permissions dialog', () => {
+        test('clicking the permissions card opens the permissions dialog @critical', async ({
+            page
+        }) => {
+            await navigateToSettingsTab(page, htmlPage.inode);
+
+            await expect(page.getByTestId('permissions-card')).toBeVisible();
+            await page.getByTestId('permissions-card').click();
+
+            await expect(page.locator('.p-dialog')).toBeVisible({ timeout: 10000 });
+            await expect(page.getByTestId('permissions-iframe')).toBeVisible({ timeout: 10000 });
+        });
+    });
+
+    test.describe('close permissions dialog', () => {
+        test('close button dismisses the permissions dialog @critical', async ({ page }) => {
+            await navigateToSettingsTab(page, htmlPage.inode);
+            await page.getByTestId('permissions-card').click();
+
+            await expect(page.locator('.p-dialog')).toBeVisible({ timeout: 10000 });
+            await page.locator('.p-dialog-header-close, .p-dialog-close-button').click();
+
+            await expect(page.locator('.p-dialog')).toBeHidden();
+            await expect(page.getByTestId('permissions-card')).toBeVisible();
+        });
+
+        test('escape key does NOT close the permissions dialog @smoke', async ({ page }) => {
+            await navigateToSettingsTab(page, htmlPage.inode);
+            await page.getByTestId('permissions-card').click();
+
+            await expect(page.locator('.p-dialog')).toBeVisible({ timeout: 10000 });
+            await page.keyboard.press('Escape');
+
+            // Dialog must remain open — closeOnEscape: false by design
+            await expect(page.locator('.p-dialog')).toBeVisible();
+            await expect(page.getByTestId('permissions-iframe')).toBeVisible();
+        });
+    });
+});
+
+// ─── Rules Dialog ─────────────────────────────────────────────────────────────
+
+test.describe('Rules Dialog', () => {
+    // Serial mode ensures beforeAll runs once and all tests share the same page instance
+    test.describe.configure({ mode: 'serial' });
+
+    let htmlPage: DotPage;
+
+    test.beforeAll(async ({ request }) => {
+        htmlPage = await createPage(request, {
+            contentType: 'htmlpageasset',
+            title: `E2E Rules Test Page ${Date.now()}`,
+            url: `e2e-rules-test-${Date.now()}`,
+            template: 'SYSTEM_TEMPLATE',
+            friendlyName: 'E2E Rules Test Page',
+            cachettl: 0
+        });
+    });
+
+    test.afterAll(async ({ request }) => {
+        if (htmlPage?.identifier) {
+            await deleteContentlets(request, [htmlPage.identifier]);
+        }
+    });
+
+    test.describe('rules card visibility', () => {
+        test('rules card is visible in settings tab for saved HTML Page @critical', async ({
+            page
+        }) => {
+            await navigateToSettingsTab(page, htmlPage.inode);
+
+            await expect(page.getByTestId('rules')).toBeAttached();
+            await expect(page.getByTestId('rules-card')).toBeVisible();
+        });
+    });
+
+    test.describe('open rules dialog', () => {
+        test('clicking the rules card opens the rules dialog @critical', async ({ page }) => {
+            await navigateToSettingsTab(page, htmlPage.inode);
+
+            await expect(page.getByTestId('rules-card')).toBeVisible();
+            await page.getByTestId('rules-card').click();
+
+            await expect(page.locator('.p-dialog')).toBeVisible({ timeout: 10000 });
+            await expect(page.getByTestId('rules-container')).toBeVisible({ timeout: 10000 });
+            await expect(page.getByTestId('rules-empty')).not.toBeAttached();
+        });
+    });
+
+    test.describe('close rules dialog', () => {
+        test('close button dismisses the rules dialog @critical', async ({ page }) => {
+            await navigateToSettingsTab(page, htmlPage.inode);
+            await page.getByTestId('rules-card').click();
+
+            await expect(page.locator('.p-dialog')).toBeVisible({ timeout: 10000 });
+            await page.locator('.p-dialog-header-close, .p-dialog-close-button').click();
+
+            await expect(page.locator('.p-dialog')).toBeHidden();
+            await expect(page.getByTestId('rules-card')).toBeVisible();
+        });
+
+        test('escape key does NOT close the rules dialog @smoke', async ({ page }) => {
+            await navigateToSettingsTab(page, htmlPage.inode);
+            await page.getByTestId('rules-card').click();
+
+            await expect(page.locator('.p-dialog')).toBeVisible({ timeout: 10000 });
+            await page.keyboard.press('Escape');
+
+            // Dialog must remain open — closeOnEscape: false by design
+            await expect(page.locator('.p-dialog')).toBeVisible();
+            await expect(page.getByTestId('rules-container')).toBeVisible();
+        });
+    });
+
+    test.describe('prevent duplicate dialogs', () => {
+        test('rapid repeated clicks open only one dialog @critical', async ({ page }) => {
+            await navigateToSettingsTab(page, htmlPage.inode);
+
+            const rulesCard = page.getByTestId('rules-card');
+            await expect(rulesCard).toBeVisible();
+
+            // After the first click, the dialog mask intercepts real pointer events on the card.
+            // Programmatic HTMLElement.click() still fires on the card (stress test for duplicate opens).
+            for (let i = 0; i < 3; i++) {
+                await rulesCard.evaluate((el) => (el as HTMLElement).click());
+            }
+
+            await expect(page.locator('.p-dialog')).toHaveCount(1, { timeout: 10000 });
+        });
+    });
+
+    test.describe('rules card not visible for non-Page content type', () => {
+        test.describe.configure({ mode: 'serial' });
+
+        let contentType: ContentTypeWithVariable;
+        let contentletInode: string;
+        let contentletIdentifier: string;
+
+        test.beforeEach(async ({ request }) => {
+            const suffix = Date.now();
+
+            // Create a simple (non-Page) content type with the new editor enabled.
+            // Avoids createFakeContentType which calls /api/v1/schemas (404).
+            const ctResponse = await request.post('/api/v1/contenttype', {
+                data: {
+                    clazz: 'com.dotcms.contenttype.model.type.ImmutableSimpleContentType',
+                    name: `RulesTestType${suffix}`,
+                    variable: `rulesCT${suffix}`,
+                    host: 'SYSTEM_HOST',
+                    folder: 'SYSTEM_FOLDER',
+                    metadata: { CONTENT_EDITOR2_ENABLED: true },
+                    workflow: [SYSTEM_WORKFLOW_ID],
+                    fields: [
+                        {
+                            clazz: 'com.dotcms.contenttype.model.field.ImmutableTextField',
+                            name: 'Title',
+                            variable: 'title',
+                            sortOrder: 1
+                        }
+                    ]
+                },
+                headers: {
+                    Authorization: generateBase64Credentials(admin1.username, admin1.password)
+                }
+            });
+            const ctData = await ctResponse.json();
+            contentType = (ctData.entity[0] ?? ctData.entity) as ContentTypeWithVariable;
+
+            const contentletResponse = await request.post(
+                '/api/v1/workflow/actions/default/fire/PUBLISH?indexPolicy=WAIT_FOR',
+                {
+                    data: {
+                        contentlet: {
+                            contentType: contentType.variable,
+                            title: `Rules Non-Page Test ${suffix}`
+                        }
+                    },
+                    headers: {
+                        Authorization: generateBase64Credentials(admin1.username, admin1.password)
+                    }
+                }
+            );
+            const contentletData = await contentletResponse.json();
+            const key = Object.keys(contentletData.entity.results[0])[0];
+            const contentlet = contentletData.entity.results[0][key];
+            contentletInode = contentlet.inode;
+            contentletIdentifier = contentlet.identifier;
+        });
+
+        test.afterEach(async ({ request }) => {
+            if (contentletIdentifier) {
+                await deleteContentlets(request, [contentletIdentifier]);
+            }
+            if (contentType?.id) {
+                await deleteContentType(request, contentType.id);
+            }
+        });
+
+        test('rules card is absent in settings tab for non-Page contentlet @critical', async ({
+            page
+        }) => {
+            await navigateToSettingsTab(page, contentletInode);
+
+            await expect(page.getByTestId('rules')).not.toBeAttached();
+            await expect(page.getByTestId('rules-card')).not.toBeAttached();
+        });
+    });
+});

core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-rules/components/rules-dialog/rules-dialog.component.html

@@ -0,0 +1,9 @@
+@if (identifier) {
+    <div data-testId="rules-container" class="w-full h-full">
+        <dot-rule-engine-container />
+    </div>
+} @else {
+    <div data-testId="rules-empty" class="flex align-items-center justify-content-center p-4">
+        No content selected
+    </div>
+}