@camunda/e2e-test-suite 0.0.1443 → 0.0.1444

package/dist/pages/SM-8.11/ModelerHomePage.js

@@ -0,0 +1,956 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelerHomePage = void 0;
+const test_1 = require("@playwright/test");
+const expectLocatorWithRetry_1 = require("../../utils/assertionHelpers/expectLocatorWithRetry");
+const randomName_1 = require("../../utils/randomName");
+const NavigationPage_1 = require("./NavigationPage");
+const ProcessApplicationPage_1 = require("./ProcessApplicationPage");
+class ModelerHomePage {
+    page;
+    defaultFolderName = 'Cross Component Test Project';
+    // Since camunda/camunda-hub#25831 files and folders cannot sit at a
+    // workspace ("project" in today's UI) root -- only process applications and
+    // IDP applications can. The container is therefore entered lazily, at the
+    // point a resource is created, and remembered for the lifetime of this page
+    // object (one instance per test, see fixtures/SM-8.11.ts). Specs that only
+    // need the workspace itself never trigger the hop.
+    processApplicationPage;
+    // Load-bearing: hub renders no process-application breadcrumb on a diagram
+    // page at container root, so the remembered URL -- not a breadcrumb click --
+    // is how we get back. Hub's own Playwright suite does the same.
+    processApplicationUrl;
+    processApplicationName;
+    // Flag-on (workspaces-enabled) state. Under camunda-hub#27903 the c8-e2e
+    // "project folder" maps to a Workspace and the "process application" to a
+    // Project: `/` redirects to the `/workspaces` overview, a Workspace holds a
+    // projects listing at `/workspaces/{wsId}/projects`, and a Project (the
+    // resource container) lives one level deeper. These remember the shared
+    // Workspace's projects-listing URL and the overview URL so returns don't
+    // re-walk the hierarchy from the root each time.
+    workspaceProjectsUrl;
+    workspacesOverviewUrl;
+    modelerPageBanner;
+    createNewProjectButton;
+    // /workspaces overview controls (flag-on). The "Create workspace" CTA is
+    // always present there (empty-state button, or the toolbar's own once a
+    // workspace exists); each existing workspace renders an "Open workspace {name}"
+    // tile. See the hub team's HomePage/CreateWorkspacePage page objects.
+    createWorkspaceButton;
+    workspaceOpenButton;
+    noWorkspacesHeading;
+    // Router 404: a flag-off deployment has no `/workspaces` route.
+    noRouteMatchMessage;
+    workspaceWizardHeading;
+    workspaceNameInput;
+    workspaceDescriptionInput;
+    workspaceWizardSubmit;
+    workspaceMembersHeading;
+    workspaceEnvironmentsHeading;
+    projectNameInput;
+    workspaceWizardNameInput;
+    workspaceWizardSubmitButton;
+    workspaceWizardMembersStep;
+    workspaceWizardEnvironmentsStep;
+    moreActionsButton;
+    renameMenuItem;
+    renameInput;
+    renameSubmitButton;
+    chooseBpmnTemplateButton;
+    diagramTypeDropdown;
+    bpmnTemplateOption;
+    formTemplateOption;
+    projectBreadcrumb;
+    workspaceBreadcrumb;
+    openOrganizationsButton;
+    manageButton;
+    crossComponentProjectFolder;
+    homeBreadcrumb;
+    formNameInput;
+    formEditorCanvas;
+    rows;
+    licenseKeyTagNonProduction;
+    licenseKeyTagNonCommercial;
+    licenseKeyTagProduction;
+    licenseKeyTagCommercial;
+    uploadFilesButton;
+    messageBanner;
+    closeButton;
+    modalCloseButton;
+    constructor(page) {
+        this.page = page;
+        this.processApplicationPage = new ProcessApplicationPage_1.ProcessApplicationPage(page);
+        // Matches every Modeler shell -- see NavigationPage.modelerPageBanner for
+        // why the Design System branch excludes the /login href and why both the
+        // pre-rebrand "Camunda Modeler home" and post-rebrand "Camunda Hub home"
+        // aria-labels are matched.
+        this.modelerPageBanner = page
+            .getByRole('link', { name: 'Camunda Hub home' })
+            .or(page.getByRole('link', { name: 'Camunda Modeler home' }))
+            .and(page.locator(':not([href$="/login"])'))
+            .or(page.locator('a').filter({ hasText: 'Camunda logoModeler' }))
+            .first();
+        this.createNewProjectButton = page
+            .getByRole('button', {
+            name: 'Create new project',
+        })
+            .or(page.getByRole('button', {
+            name: 'New project',
+        }))
+            .or(page.getByRole('button', {
+            name: 'Create project',
+            exact: true,
+        }))
+            .or(page.getByRole('button', {
+            name: 'Create workspace',
+            exact: true,
+        }));
+        this.projectNameInput = page.locator('[data-test="editable-input"]');
+        // The Design System shell no longer creates an empty project and renames it
+        // inline; "Create workspace" opens a two-step wizard (General -> Members)
+        // that names the workspace up front. The name lives on the General step, and
+        // the submit button keeps this test id across both steps ("Next" on General,
+        // "Create workspace" on Members).
+        this.workspaceWizardNameInput = page.locator('#workspace-name');
+        this.workspaceWizardSubmitButton = page.locator('[data-test="workspace-wizard-submit"]');
+        this.workspaceWizardMembersStep = page.locator('[data-test="step-members"]');
+        this.workspaceWizardEnvironmentsStep = page.locator('[data-test="step-environments"]');
+        // The rename kebab sits beside the breadcrumb in the app header. The
+        // editor's action bar is a <header> too, so it also carries the banner
+        // role -- getByRole('banner') alone matches three headers in the editor
+        // and pulls in "Additional actions" and "Browse more actions". Only the
+        // app header holds the breadcrumb nav, so filter on that. The kebab's own
+        // name is shell-dependent ("More actions" today, "<segment label> actions"
+        // once the design system derives it from the label), so match either.
+        this.moreActionsButton = page
+            .getByRole('banner')
+            .filter({ has: page.getByRole('navigation') })
+            .getByRole('button', { name: /actions$/i });
+        this.renameMenuItem = page.getByRole('menuitem', { name: 'Rename' });
+        this.renameInput = page.locator('[data-test="rename-input"]');
+        this.renameSubmitButton = page.locator('[data-test="rename-submit"]');
+        this.chooseBpmnTemplateButton = page.getByRole('button', {
+            name: 'Choose BPMN template',
+        });
+        this.diagramTypeDropdown = page.locator('[data-test="diagram-dropdown"]');
+        // Matched on the test id alone: hub's design-system variant of the create
+        // menu renders "BPMN diagram" (lowercase d), so a text filter breaks the
+        // day that variant ships.
+        this.bpmnTemplateOption = page.locator('[data-test="create-bpmn-diagram"]');
+        this.formTemplateOption = page.locator('[data-test="create-form"]');
+        // The Design System shell drops the breadcrumb-project hook. Its context
+        // breadcrumb is org / project / entity, so the project crumb is the second
+        // item -- scoped to the breadcrumb nav, never a bare nth() on the page.
+        this.projectBreadcrumb = page
+            .locator('[data-test="breadcrumb-project"]')
+            .or(page
+            .locator('nav[aria-label="Context navigation"] [data-slot="nav-breadcrumb-item"]')
+            .nth(1)
+            .getByRole('button')
+            .first())
+            .first();
+        // Kept separate from projectBreadcrumb, which now means "the container my
+        // resources live in". When hub's workspaces terminology flag flips,
+        // breadcrumb-project comes to denote the process application, so the
+        // workspace level needs its own name from the start. Carries the same
+        // Design System fallback as projectBreadcrumb: under that shell neither
+        // test-id hook exists, and the workspace level is the project crumb.
+        this.workspaceBreadcrumb = page
+            .locator('[data-test="breadcrumb-project"]')
+            .or(page.locator('[data-test="breadcrumb-workspace"]'))
+            .or(page
+            .locator('nav[aria-label="Context navigation"] [data-slot="nav-breadcrumb-item"]')
+            .nth(1)
+            .getByRole('button')
+            .first())
+            .first();
+        this.openOrganizationsButton = page.getByLabel('Open Organizations');
+        this.manageButton = page.getByRole('button', { name: 'Manage' });
+        // A grid tile opens the workspace through a button, a list-view row
+        // through a link.
+        this.crossComponentProjectFolder = page
+            .getByRole('button', { name: `Open workspace ${this.defaultFolderName}` })
+            .or(page.getByRole('link', {
+            name: `Open workspace ${this.defaultFolderName}`,
+        }))
+            .or(page.getByTitle(this.defaultFolderName, { exact: true }))
+            .first();
+        // The Design System shell drops the breadcrumb-home hook and labels the
+        // same crumb "My organisation".
+        this.homeBreadcrumb = page
+            .locator('[data-test="breadcrumb-home"]')
+            .or(page.getByRole('button', { name: 'My organisation' }))
+            .first();
+        this.formNameInput = page.locator('[data-test="editable-input"]');
+        // form-js labels its editor region "Form Definition" on both shells (see
+        // FormJsPage.formEditor). Unlike the app header, it mounts only once the
+        // editor itself has rendered, which makes it the ready signal enterFormName
+        // gates on.
+        this.formEditorCanvas = page.getByLabel('Form Definition').first();
+        this.rows = page.getByRole('row');
+        this.licenseKeyTagNonProduction = page
+            .getByText('Non-production license')
+            .first();
+        this.licenseKeyTagNonCommercial = page.getByText('Non-commercial license');
+        this.licenseKeyTagProduction = page.getByText('Production license').first();
+        this.licenseKeyTagCommercial = page.getByText('Commercial license');
+        this.uploadFilesButton = page.getByRole('menuitem', { name: 'Upload files' });
+        this.messageBanner = page.locator('[data-test="close-top-banner"]');
+        // The "New features" release modal is a Carbon ComposedModal. When it opens
+        // over another always-rendered modal its wrapper carries aria-hidden="true",
+        // which drops its buttons from the accessibility tree -- getByRole then never
+        // matches and the modal is never dismissed, deadlocking waitForModelerReady.
+        // Fall back to a CSS `button` locator (which ignores the accessibility tree)
+        // so the visible-but-aria-hidden dismiss control is still found and clicked.
+        this.closeButton = page
+            .getByRole('button', { name: 'Got it - Dismiss' })
+            .or(page.locator('button').filter({ hasText: 'Got it - Dismiss' }))
+            .first();
+        this.modalCloseButton = page.locator('.cds--modal.is-visible .cds--modal-close');
+        // exact:true — the Workspaces overview "Create workspace" split button has a
+        // sibling options chevron whose name would otherwise substring-match.
+        this.createWorkspaceButton = page.getByRole('button', {
+            name: 'Create workspace',
+        });
+        this.workspaceOpenButton = page
+            .getByRole('button', { name: /^open workspace /i })
+            .first();
+        this.noWorkspacesHeading = page.getByRole('heading', {
+            name: /no workspaces/i,
+        });
+        this.noRouteMatchMessage = page.getByText(/no match for the current location/i);
+        // Create-workspace wizard (`/workspaces/create`). Its single primary button
+        // relabels itself "Next" -> "Create workspace" as the step changes, so it is
+        // located by the stable data-test hook rather than its changing name.
+        this.workspaceWizardHeading = page.getByRole('heading', {
+            name: 'New workspace',
+        });
+        this.workspaceNameInput = page.getByLabel('Workspace name');
+        this.workspaceDescriptionInput = page.getByLabel('Description');
+        this.workspaceWizardSubmit = page.locator('[data-test="workspace-wizard-submit"]');
+        this.workspaceMembersHeading = page.getByRole('heading', {
+            name: /workspace members/i,
+        });
+        this.workspaceEnvironmentsHeading = page.getByRole('heading', {
+            name: /assign environments/i,
+        });
+    }
+    async clickCreateNewProjectButton() {
+        await (0, expectLocatorWithRetry_1.expectLocatorWithRetry)(this.page, this.createNewProjectButton, {
+            totalTimeout: 30000,
+        });
+        // Modals (WhatsNew, "BPMN conditional events", etc.) render lazily after
+        // page load and intercept clicks on the button underneath. Dismiss them.
+        await this.closeButton
+            .waitFor({ state: 'visible', timeout: 5000 })
+            .then(() => this.closeButton.click())
+            .catch(() => { });
+        await this.modalCloseButton
+            .waitFor({ state: 'visible', timeout: 2000 })
+            .then(() => this.modalCloseButton.click())
+            .catch(() => { });
+        await this.createNewProjectButton.click();
+    }
+    // The Carbon shell renames a project through an inline editable input on the
+    // project page. The Design System shell renders the name as a plain span and
+    // moved renaming behind "More actions" > "Rename", which opens a dialog. Wait
+    // for whichever affordance the deployed shell offers, then use that one --
+    // both images are still in circulation.
+    async enterNewProjectName(name) {
+        await this.projectNameInput
+            .or(this.moreActionsButton)
+            .or(this.workspaceWizardNameInput)
+            .first()
+            .waitFor({ state: 'visible', timeout: 30000 });
+        // Design System shell: "Create workspace" opens the creation wizard, which
+        // names the workspace on its first step, so there is no post-creation rename
+        // to perform. Check this before the inline branch — the wizard replaces it.
+        if (await this.workspaceWizardNameInput.isVisible()) {
+            await this.createWorkspaceViaWizard(name);
+            return;
+        }
+        // Inline first: when the Carbon shell renders it, it is the whole flow.
+        if (await this.projectNameInput.isVisible()) {
+            await this.projectNameInput.click({ timeout: 60000 });
+            await this.projectNameInput.fill(name);
+            await this.projectNameInput.press('Enter');
+            return;
+        }
+        await this.renameViaMoreActions(name);
+    }
+    // Drives hub's workspace-creation wizard. Environments-enabled builds add an
+    // optional third step after Members; older builds create on the second submit.
+    async createWorkspaceViaWizard(name) {
+        await this.workspaceWizardNameInput.fill(name);
+        await this.workspaceWizardSubmitButton.click({ timeout: 60000 });
+        await (0, test_1.expect)(this.workspaceWizardMembersStep).toHaveAttribute('data-state', 'active', { timeout: 30000 });
+        await this.workspaceWizardSubmitButton.click({ timeout: 60000 });
+        await this.finishWorkspaceWizard();
+    }
+    async finishWorkspaceWizard() {
+        const needsEnvironmentSubmit = await Promise.race([
+            this.page
+                .waitForURL(/\/workspaces?\/[^/]+\/projects/, { timeout: 120000 })
+                .then(() => false),
+            (0, test_1.expect)(this.workspaceWizardEnvironmentsStep)
+                .toHaveAttribute('data-state', 'active', { timeout: 120000 })
+                .then(() => true),
+        ]);
+        if (needsEnvironmentSubmit) {
+            await this.workspaceWizardSubmitButton.click({ timeout: 60000 });
+            await this.page.waitForURL(/\/workspaces?\/[^/]+\/projects/, {
+                timeout: 120000,
+            });
+        }
+    }
+    // Wait for the Modeler project workspace to become interactive. The caller
+    // arrives here via goToModeler(), which has already loaded and authenticated
+    // the app shell (banner visible). The nav banner mounts before the project
+    // list, which renders after an API round-trip, so gate on an actionable
+    // element — the "Create new project" button or an existing project folder —
+    // rather than the banner, which otherwise lets the caller proceed against a
+    // half-loaded shell and time out clicking "Create new project".
+    //
+    // Deliberately does NOT reload: a raw page.reload() drops the authenticated
+    // SPA state (goToModeler handles the OAuth redirect flow; reload does not),
+    // which lands on a blank page and makes the workspace element unreachable for
+    // the rest of the timeout. Transient upstream 50x is already absorbed by
+    // goToModeler's gateway-error re-navigation before we get here.
+    async waitForModelerReady(timeoutMs = 120000) {
+        // Flag-on: `/` redirects to the `/workspaces` overview, which renders the
+        // "Create workspace" CTA (always present) plus an "Open workspace ..." tile
+        // per existing workspace — the legacy "Create new project" button never
+        // renders there, which is what used to time out. Gate on those overview
+        // markers, the projects-listing "Create project" CTA (landed on directly
+        // after creating a workspace, or after opening one that has no projects
+        // yet -- neither overview marker renders there), and the legacy flag-off
+        // home markers, so the wait resolves whichever shell the deployment
+        // renders. .first(): several can be present at once (e.g. the CTA and a
+        // tile), and waitFor() requires a single match.
+        const workspaceElement = this.createWorkspaceButton
+            .or(this.workspaceOpenButton)
+            .or(this.createNewProjectButton)
+            .or(this.crossComponentProjectFolder)
+            .or(this.processApplicationPage.createProcessApplicationButton)
+            .first();
+        // The "New features" release modal renders lazily over the Modeler home,
+        // and under the Design System shell the project list -- the "Create new
+        // project" button and any existing folder included -- does not mount until
+        // the modal is dismissed. Gating on the workspace element alone therefore
+        // deadlocks: it never appears while the modal is up, and the dismissal in
+        // clickMessageBanner/clickCreateNewProjectButton only runs after this wait.
+        // Dismiss the modal on each poll until the workspace element mounts.
+        try {
+            await (0, test_1.expect)(async () => {
+                await this.clickMessageBanner();
+                await (0, test_1.expect)(workspaceElement).toBeVisible({ timeout: 5000 });
+            }).toPass({ timeout: timeoutMs, intervals: [1000, 2000, 5000] });
+        }
+        catch (error) {
+            // Re-label the timeout with the real cause; "element(s) not found" reads
+            // as a slow-loading project list. Outside the poll because toPass()
+            // retries thrown errors.
+            if (await this.noRouteMatchMessage.isVisible().catch(() => false)) {
+                throw new Error(`Web Modeler served a router 404 ("No match for the current location") for ${this.page.url()}. ` +
+                    'The route does not exist in this deployment -- e.g. /workspaces on a ' +
+                    'build where the Workspaces feature flag (workspacesEnabled) is off.');
+            }
+            throw error;
+        }
+    }
+    // `credentials`: the identity already logged in on this page (e.g. the RBA/
+    // multi-tenancy test user a preceding goToModeler(undefined, credentials)
+    // authenticated as). Only needed if that identity is not the default
+    // Identity first user -- pass it through so a flag-off fallback re-navigation
+    // doesn't silently switch principals mid-test.
+    async createCrossComponentProjectFolder(credentials) {
+        // Kept name: opens (creating if absent) the shared Workspace this suite puts
+        // every test's Project inside, leaving the browser on the Workspace's
+        // projects listing. The flag-off era created a top-level project folder here;
+        // under flag-on that folder maps to a Workspace.
+        await this.ensureWorkspaceOpen(credentials);
+    }
+    // Only an org admin can assign Environments to a workspace (Hub 8.10), so a
+    // workspace created by a plain Member has nothing to deploy to until one does.
+    // Call while this page is inside that workspace: assigns an Environment as the
+    // default Identity first user (an org admin) in a separate browser context,
+    // leaving this page's session untouched.
+    async assignWorkspaceEnvironmentAsOrgAdmin(browser) {
+        const workspaceUrl = this.page.url();
+        const context = await browser.newContext({
+            baseURL: new URL(workspaceUrl).origin,
+        });
+        try {
+            const adminPage = await context.newPage();
+            await new NavigationPage_1.NavigationPage(adminPage).goToModeler();
+            await new ProcessApplicationPage_1.ProcessApplicationPage(adminPage).assignEnvironmentToWorkspace(workspaceUrl, process.env.MODELER_CLUSTER_NAME);
+        }
+        finally {
+            await context.close();
+        }
+        // This page loaded the workspace before the admin assigned the
+        // Environment in the other session, so Hub still holds the empty
+        // environment list and Deploy & run has no target until it refetches.
+        await this.page.reload({ waitUntil: 'domcontentloaded' });
+        this.processApplicationPage.markWorkspaceEnvironmentAssignedByAdmin(workspaceUrl);
+    }
+    async clickCrossComponentProjectFolder(credentials) {
+        // Kept name: callers use this to (re-)enter the shared Workspace's projects
+        // listing after leaving Modeler. Creates the Workspace if it is somehow
+        // absent (e.g. a fresh cluster where the setup spec did not run first).
+        await this.ensureWorkspaceOpen(credentials);
+    }
+    // Ensures the shared "Cross Component Test Project" Workspace is open and the
+    // browser is on its projects listing (`/workspaces/{wsId}/projects`), where the
+    // per-test Project is later created. Retries the whole navigation+login on a
+    // transient web-modeler 500 rather than a bare reload, which would drop the
+    // authenticated SPA state and land on the empty login form.
+    //
+    // `credentials` must be the identity already active on `page` (the caller's
+    // own goToModeler login), not a new one to log in as: the flag-off branch
+    // re-navigates mid-flow, and NavigationPage.goToModeler() defaults to the
+    // first Identity user when credentials are omitted, which would silently
+    // swap principals for RBA/multi-tenancy callers that authenticated as a
+    // specific test user before calling this.
+    async ensureWorkspaceOpen(credentials) {
+        const maxAttempts = 3;
+        const retryWaitMs = 5000;
+        for (let attempt = 0; attempt < maxAttempts; attempt++) {
+            try {
+                // Go straight to the Workspaces overview rather than waiting on the
+                // post-login landing: after the OIDC callback the app briefly sits on
+                // Home (or /login-callback), which is not the workspace listing and on
+                // some builds does not auto-redirect to /workspaces. Navigating here
+                // explicitly is robust whether or not the root redirect fires.
+                await this.gotoWorkspacesOverview();
+                // Flag-off serves a router 404 here, not Home as this fallback once
+                // assumed. Neither the overview nor the legacy markers can render on a
+                // no-match page, so checking readiness first burned the full 120s and
+                // threw, leaving the flag-off branch below unreachable.
+                const routed404 = await this.becameVisible(this.noRouteMatchMessage, 5000);
+                // Still confirm an overview marker: waitForModelerReady() also accepts
+                // the legacy Home markers, so "no 404" alone is not proof of flag-on.
+                let flagOn = false;
+                if (!routed404) {
+                    await this.waitForModelerReady();
+                    await this.clickMessageBanner();
+                    flagOn = await this.becameVisible(this.createWorkspaceButton.or(this.workspaceOpenButton).first(), 30000);
+                }
+                if (!flagOn) {
+                    // Legacy flag-off deployment (e.g. a pre-upgrade version in a
+                    // migration flow): the shared folder IS the top-level project. Must
+                    // re-navigate — the legacy markers never appear on the 404 page.
+                    // Pass through the caller's credentials so this doesn't fall back to
+                    // the default Identity user mid-test (see the credentials note above).
+                    await new NavigationPage_1.NavigationPage(this.page).goToModeler(undefined, credentials);
+                    await this.waitForModelerReady();
+                    await this.clickMessageBanner();
+                    await this.openOrCreateLegacyFolder();
+                    return;
+                }
+                // On the flag-on overview. Remember it for clickHomeBreadcrumb().
+                this.workspacesOverviewUrl = this.page.url();
+                const workspaceExists = await this.crossComponentProjectFolder
+                    .isVisible()
+                    .catch(() => false);
+                if (!workspaceExists) {
+                    // Creating the workspace lands the creator (a Workspace Admin) on its
+                    // projects listing directly, so there is no tile to open afterwards.
+                    await this.createWorkspace(this.defaultFolderName);
+                    return;
+                }
+                await this.openWorkspaceTile();
+                return;
+            }
+            catch (error) {
+                if (attempt < maxAttempts - 1) {
+                    console.log(`ensureWorkspaceOpen attempt ${attempt + 1} failed. Re-authenticating and retrying...`);
+                    try {
+                        await new NavigationPage_1.NavigationPage(this.page).goToModeler();
+                    }
+                    catch (navError) {
+                        console.log(`Re-navigation to Modeler failed: ${navError}`);
+                    }
+                    await this.page.waitForTimeout(retryWaitMs);
+                }
+                else {
+                    throw error;
+                }
+            }
+        }
+    }
+    // Navigates to the Workspaces overview by resolving it against the Modeler app
+    // root in the current URL, so it works whether Modeler is served under
+    // `/modeler` (Self-Managed combined ingress) or at the app root.
+    async gotoWorkspacesOverview() {
+        const current = new URL(this.page.url());
+        const appRootMatch = current.pathname.match(/^(.*\/modeler)(?:\/|$)/);
+        const appRoot = appRootMatch ? appRootMatch[1] : '';
+        await this.page.goto(`${current.origin}${appRoot}/workspaces`, {
+            waitUntil: 'domcontentloaded',
+        });
+    }
+    // Walks the create-workspace wizard (`/workspaces/create`): fill the general
+    // step, advance through any optional steps, and submit with the creator only
+    // (the creator is pre-added as Workspace Admin, satisfying the "at least one
+    // admin" guard). On success the hub routes the role-holding creator straight
+    // to the new workspace's projects listing, not back to the `/workspaces`
+    // overview, so gate on that landing (singular or plural route).
+    async createWorkspace(name) {
+        await (0, test_1.expect)(this.createWorkspaceButton).toBeVisible({ timeout: 60000 });
+        await this.createWorkspaceButton.click({ timeout: 60000 });
+        await (0, test_1.expect)(this.workspaceWizardHeading).toBeVisible({ timeout: 60000 });
+        await this.workspaceNameInput.fill(name);
+        await this.workspaceDescriptionInput
+            .fill('Created by the cross-component E2E suite.')
+            .catch(() => { });
+        await this.submitWorkspaceWizard();
+        await this.page.waitForURL(/\/workspaces?\/[^/]+\/projects/, {
+            timeout: 120000,
+        });
+        await this.waitForModelerReady();
+        this.workspaceProjectsUrl = this.page.url();
+        await this.clickMessageBanner();
+    }
+    // Advances the create-workspace wizard from the (already filled) General step
+    // to workspace creation. The wizard renders a variable number of steps:
+    // General is always present, while Members and Environments each render only
+    // for an org admin with the feature enabled (see camunda-hub
+    // CreateWorkspace.tsx / buildSteps). Its single primary submit button
+    // (`data-test=workspace-wizard-submit`) reads "Next" on every step except the
+    // last, where it reads "Create workspace". Advance while it reads "Next" —
+    // gating each click on the currently visible step section being replaced so a
+    // fast re-read cannot click the same "Next" twice — then submit to create.
+    // Only one step section renders at a time, so the visible-section list doubles
+    // as a per-step marker.
+    async submitWorkspaceWizard() {
+        const submit = this.workspaceWizardSubmit.first();
+        const stepSections = [
+            this.workspaceNameInput,
+            this.workspaceMembersHeading,
+            this.workspaceEnvironmentsHeading,
+        ];
+        const createsWorkspace = async () => /create workspace/i.test(((await submit.textContent()) ?? '').trim());
+        for (let step = 0; step < stepSections.length; step++) {
+            await (0, test_1.expect)(submit).toBeEnabled({ timeout: 60000 });
+            if (await createsWorkspace()) {
+                break;
+            }
+            let current;
+            for (const section of stepSections) {
+                if (await section.isVisible().catch(() => false)) {
+                    current = section;
+                    break;
+                }
+            }
+            await submit.click({ timeout: 30000 });
+            if (current) {
+                await current.waitFor({ state: 'hidden', timeout: 60000 });
+            }
+        }
+        await (0, test_1.expect)(submit).toHaveText(/create workspace/i, { timeout: 60000 });
+        await submit.click({ timeout: 30000 });
+    }
+    // Opens the shared Workspace's tile and waits until its projects listing has
+    // loaded, remembering that URL for later returns via clickWorkspaceBreadcrumb.
+    async openWorkspaceTile() {
+        await (0, test_1.expect)(this.crossComponentProjectFolder).toBeVisible({
+            timeout: 90000,
+        });
+        await this.dismissModals();
+        // Click the tile's "Open workspace" button specifically: the card also
+        // carries a plain title element (and a "Manage workspace" button) that the
+        // crossComponentProjectFolder .or(title) locator can resolve to first, and
+        // clicking those does not navigate to the projects listing.
+        const openButton = this.page.getByRole('button', {
+            name: `Open workspace ${this.defaultFolderName}`,
+        });
+        const target = (await openButton
+            .first()
+            .isVisible()
+            .catch(() => false))
+            ? openButton.first()
+            : this.crossComponentProjectFolder;
+        await target.click({ timeout: 60000 });
+        // Optional `s`: camunda-hub#28928 renames the in-workspace projects listing
+        // from singular `/workspace/{id}/projects` to plural `/workspaces/{id}/projects`
+        // with no redirect, and that PR is unmerged — so this suite runs against both
+        // (released/main hub still serves singular, the #28928 branch serves plural).
+        // Gate on either so the wait resolves whichever route the hub under test serves.
+        await this.page.waitForURL(/\/workspaces?\/[^/]+\/projects/, {
+            timeout: 120000,
+        });
+        this.workspaceProjectsUrl = this.page.url();
+        await this.clickMessageBanner();
+    }
+    // Legacy flag-off flow, kept for pre-upgrade UIs in migration specs: the shared
+    // folder is the top-level project, created inline via "Create new project".
+    async openOrCreateLegacyFolder() {
+        if (await this.crossComponentProjectFolder.isVisible().catch(() => false)) {
+            await this.dismissModals();
+            await this.crossComponentProjectFolder.click({ timeout: 60000 });
+            await this.clickMessageBanner();
+            return;
+        }
+        await this.clickCreateNewProjectButton();
+        await this.enterNewProjectName(this.defaultFolderName);
+        await (0, test_1.expect)(this.page.getByRole('heading', { name: this.defaultFolderName })).toBeVisible({ timeout: 10000 });
+    }
+    // Dismisses the lazily-rendered "New features" / conditional-events modals that
+    // can intercept a click on the workspace tile or create controls.
+    async dismissModals() {
+        await this.closeButton
+            .waitFor({ state: 'visible', timeout: 5000 })
+            .then(() => this.closeButton.click())
+            .catch(() => { });
+        await this.modalCloseButton
+            .waitFor({ state: 'visible', timeout: 2000 })
+            .then(() => this.modalCloseButton.click())
+            .catch(() => { });
+    }
+    // Opens a resource where this test put it. Several specs leave Modeler
+    // entirely (to Optimize, to Operate) and come back via
+    // clickCrossComponentProjectFolder(), which lands at workspace root -- the
+    // resource is one level down, so re-enter the container first.
+    async clickProcessDiagram(name) {
+        await this.ensureInResourceContainer();
+        // A Design System table row opens through a link laid over the row, which
+        // sits on top of the title text and takes its clicks -- so click the link.
+        // The link comes before the title in DOM order, so `first()` picks it
+        // whenever it exists; the title stays as the fallback for the classic table.
+        const row = this.rows.filter({ hasText: name });
+        const process = row
+            .getByRole('link', { name })
+            .or(row.getByTitle(name))
+            .first();
+        await (0, test_1.expect)(process).toBeVisible({ timeout: 90000 });
+        await process.click();
+    }
+    async clickHomeBreadcrumb() {
+        // Flag-on: "home" for Modeler is the `/workspaces` overview (the top of the
+        // hierarchy), remembered when the Workspace was opened.
+        if (this.workspacesOverviewUrl) {
+            await this.page.goto(this.workspacesOverviewUrl, {
+                waitUntil: 'domcontentloaded',
+            });
+            await this.waitForModelerReady();
+            return;
+        }
+        try {
+            await this.homeBreadcrumb.click({ timeout: 60000 });
+        }
+        catch (error) {
+            await this.page
+                .getByText('Home', { exact: true })
+                .first()
+                .click({ timeout: 60000 });
+        }
+    }
+    async clickChooseBpmnTemplateButton() {
+        await this.chooseBpmnTemplateButton.click();
+    }
+    // Opens the create menu inside this test's process application. The menu at
+    // workspace root no longer offers BPMN, Form or Upload -- those resources
+    // cannot live there -- so the container is entered first. Callers are
+    // unchanged, which is why the ~150 existing spec call sites need no edit.
+    async clickDiagramTypeDropdown() {
+        await this.enterResourceContainer();
+        const dropdown = this.processApplicationPage.createNewDropdown;
+        // Recovery must re-navigate to the container's absolute URL, not blindly
+        // page.reload(). Flag-on Modeler runs a silent Keycloak token refresh that
+        // routes through /modeler/login -> /modeler/login-callback and, once the
+        // deep link is lost, lands on the /modeler/workspaces overview -- which has
+        // no "Create new" menu. A page.reload() there just reloads /workspaces, so
+        // the dropdown never reappears and every "create a diagram" flow times out.
+        // Re-entering via processApplicationUrl (goto) puts us back on the Project
+        // detail where the menu renders, matching the goto-based recovery used by
+        // returnToResourceContainer() elsewhere in this page object.
+        await (0, expectLocatorWithRetry_1.expectLocatorWithRetry)(this.page, dropdown, {
+            totalTimeout: 180000,
+            maxRetries: 6,
+            postAction: async () => {
+                if (this.processApplicationUrl) {
+                    await this.page.goto(this.processApplicationUrl, {
+                        waitUntil: 'domcontentloaded',
+                    });
+                    await this.clickMessageBanner();
+                }
+                else {
+                    await this.page.reload();
+                }
+            },
+        });
+        await dropdown.click();
+    }
+    async clickBpmnTemplateOption() {
+        await (0, test_1.expect)(this.bpmnTemplateOption).toBeVisible({ timeout: 60000 });
+        await this.bpmnTemplateOption.click({ timeout: 60000 });
+    }
+    async clickFormOption() {
+        await this.formTemplateOption.click();
+    }
+    // Same shell split as enterNewProjectName: the Design System form editor has
+    // no inline editable input and renames through the breadcrumb's "More
+    // actions" > "Rename" dialog.
+    async enterFormName(name) {
+        // Wait for the form editor itself before probing rename affordances. The
+        // project page also renders a "More actions" button, so the or() gate below
+        // is satisfied while the caller's navigation is still in flight -- which
+        // renamed the PROJECT to the form's name instead of the form. The Carbon
+        // shell could not hit this: editable-input existed only inside the editor,
+        // so the gate implicitly waited for navigation.
+        //
+        // waitForURL is not enough on its own: the URL flips to /forms/ before the
+        // editor mounts, and the app header -- kebab included -- is already painted
+        // by then, still showing the process application as the deepest crumb. The
+        // canvas mounts together with the entity crumb, so gate on it rather than
+        // on the header, which is present either way.
+        await this.page.waitForURL(/\/forms\//, { timeout: 60000 });
+        // The URL flips before the editor mounts, and the app header re-renders as
+        // it does. Renaming in that window finds the kebab but loses the menu it
+        // opens, so wait for the editor canvas first. Soft: on a shell that labels
+        // the canvas differently the retry in renameViaMoreActions still covers us.
+        await this.becameVisible(this.formEditorCanvas, 60000);
+        await this.formNameInput
+            .or(this.formEditorCanvas)
+            .first()
+            .waitFor({ state: 'visible', timeout: 30000 });
+        if (await this.formNameInput.isVisible()) {
+            await this.formNameInput.click({ timeout: 60000 });
+            await this.formNameInput.fill(name);
+            await this.formNameInput.press('Enter');
+            return;
+        }
+        await this.renameViaMoreActions(name);
+    }
+    // Today the shell renders one kebab for the whole breadcrumb; camunda-hub
+    // #28045 gives every segment its own, so take the LAST -- the entity being
+    // edited is the deepest crumb. With one kebab last() is that same button.
+    //
+    // The header's license tags sit in an ml-auto flex sibling that overlaps the
+    // kebab once they render, so a mouse click lands on the tag instead. Open the
+    // menu from the keyboard -- same control, reached the way a keyboard user
+    // reaches it, and unaffected by what paints over it.
+    //
+    // The header keeps re-rendering for a while after the editor mounts (the
+    // breadcrumb swap, then the license tags arriving in that ml-auto sibling),
+    // and each re-render unmounts the open menu: the nightly trace shows "Rename"
+    // resolving, reporting "element is not stable", then "element was detached
+    // from the DOM". Reopen the menu and try again rather than racing a single
+    // open; the last attempt throws so a genuinely missing menu still fails.
+    // A freshly created entity's file data lands after the editor has already
+    // painted, and the header re-renders when it does -- which unmounts the open
+    // Radix menu mid-click ("element was detached from the DOM, retrying") and
+    // leaves it closed for the rest of the click's budget. Open the menu and pick
+    // Rename as one retried unit so a remount costs an iteration instead of the
+    // test. Escape first: the trigger toggles, so an attempt that left the menu
+    // open would otherwise have the next Enter close it again.
+    async renameViaMoreActions(name) {
+        await this.waitForEntityCrumb();
+        const entityActions = this.moreActionsButton.last();
+        // The header keeps settling after the editor paints: the license tags
+        // mount into the ml-auto sibling and the breadcrumb label swaps from its
+        // placeholder to the persisted entity name. Either re-render shifts and
+        // then unmounts the open Radix menu ("element is not stable", then
+        // "element was detached from the DOM"), and the menu item never comes
+        // back because the menu itself closed. Re-open the menu on each attempt
+        // rather than clicking into one that may already be gone.
+        await (0, test_1.expect)(async () => {
+            if (await this.renameMenuItem.isVisible()) {
+                await this.page.keyboard.press('Escape');
+                await (0, test_1.expect)(this.renameMenuItem).toBeHidden({ timeout: 5000 });
+            }
+            await entityActions.focus();
+            await entityActions.press('Enter');
+            await this.renameMenuItem.click({ timeout: 15000 });
+            await (0, test_1.expect)(this.renameInput).toBeVisible({ timeout: 10000 });
+        }).toPass({ timeout: 120000, intervals: [1000, 2000, 5000] });
+        await this.renameInput.fill(name);
+        await this.renameSubmitButton.click();
+        await (0, test_1.expect)(this.renameInput).toBeHidden({ timeout: 10000 });
+    }
+    // The breadcrumb is built up progressively: on a freshly created resource the
+    // container is briefly the deepest crumb and owns the only kebab, and the
+    // entity crumb is appended a render later. Reopening the menu is not enough
+    // on its own -- an attempt that lands inside that window opens the
+    // CONTAINER's menu, so "Rename" there renames the process application
+    // instead of the entity, and the entity crumb's arrival re-renders the
+    // breadcrumb and unmounts the menu mid-click. Wait for the deepest kebab to
+    // stop being the container's. Shells that label the kebab generically
+    // ("More actions") never match a container label, so this is a no-op there.
+    async waitForEntityCrumb() {
+        if (!this.processApplicationName) {
+            return;
+        }
+        const containerActions = `${this.processApplicationName} actions`;
+        await test_1.expect
+            .poll(async () => (await this.moreActionsButton
+            .last()
+            .getAttribute('aria-label')
+            .catch(() => null)) ?? '', { timeout: 30000 })
+            .not.toBe(containerActions);
+    }
+    // Kept under its original name because it is what ~10 call sites already
+    // mean: "go back to where my resources live". That is now the process
+    // application, not the workspace root.
+    async clickProjectBreadcrumb() {
+        await this.returnToResourceContainer();
+    }
+    // The workspace ("project") level itself, for the surfaces that genuinely
+    // live there -- collaborators, IDP applications, published element
+    // templates. Under flag-on this is the Workspace's projects listing.
+    async clickWorkspaceBreadcrumb() {
+        if (this.workspaceProjectsUrl) {
+            await this.page.goto(this.workspaceProjectsUrl, {
+                waitUntil: 'domcontentloaded',
+            });
+            await this.processApplicationPage.createProcessApplicationButton
+                .waitFor({ state: 'visible', timeout: 90000 })
+                .catch(() => { });
+            await this.clickMessageBanner();
+            return;
+        }
+        await this.workspaceBreadcrumb.click({ timeout: 60000 });
+    }
+    // Creates, once per test, the process application that holds this test's
+    // resources, and leaves the browser inside it. Idempotent: called again while
+    // already in the container it is a no-op, so a spec that creates several
+    // resources in a row pays for the container once.
+    //
+    // One container per test rather than one shared with the seeded workspace:
+    // deploying is process-application-wide, so a shared container would let one
+    // spec's deploy pick up every other spec's half-modelled diagram.
+    async enterResourceContainer(name) {
+        if (this.processApplicationUrl) {
+            const stillInside = await this.becameVisible(this.processApplicationPage.breadcrumb, 5000);
+            if (!stillInside) {
+                await this.returnToResourceContainer();
+            }
+            return;
+        }
+        this.processApplicationName =
+            name ??
+                (await (0, randomName_1.randomNameAgregator)('Cross Component Process Application'));
+        console.log(`Creating process application ${this.processApplicationName} inside ${this.defaultFolderName}`);
+        await this.clickCreateProcessApplication();
+        await this.processApplicationPage.nameNewProcessApplication(this.processApplicationName);
+        this.processApplicationUrl = this.page.url();
+        this.processApplicationPage.rememberResourceContainer(this.processApplicationUrl);
+        // Under workspaces-enabled, a freshly created process application has no
+        // cluster assigned to its development stage: Deploy (and Play's "Configure
+        // environment") render a "Clusters not configured for stages" warning and
+        // stay disabled until one is. Assign it once here, right after the
+        // container is created, so every later deploy/run/play/connector/form flow
+        // in this test finds a usable cluster instead of independently reproducing
+        // this connection step (or failing on the warning). ensureStageCluster()
+        // memoizes per test, so runProcessInstance()'s own call is a no-op after
+        // this.
+        await this.processApplicationPage.ensureStageCluster(process.env.MODELER_CLUSTER_NAME);
+    }
+    // Which control creates a process application depends on the hub version
+    // under test. Since camunda/camunda-hub#25831 it is a plain primary button on
+    // the workspace root, and the "Create new" menu explicitly hides the item
+    // (hideProcessApplication) because a process application is no longer just
+    // another resource. Before that change the menu item was the only way in.
+    // Race both entry points so neither version pays a full timeout, then use
+    // whichever one rendered.
+    async clickCreateProcessApplication() {
+        const button = this.processApplicationPage.createProcessApplicationButton;
+        const rootLoaded = await this.becameVisible(button.or(this.diagramTypeDropdown).first(), 60000);
+        if (!rootLoaded) {
+            await this.page.reload();
+        }
+        // Short: the joint probe above already settled which branch rendered, and
+        // hub renders exactly one of them (EntityTable renders the toolbar's create
+        // menu OR the empty state, never both), so this only confirms which.
+        if (await this.becameVisible(button, 5000)) {
+            await this.processApplicationPage.clickCreateProcessApplicationButton();
+            return;
+        }
+        await this.diagramTypeDropdown.click({ timeout: 60000 });
+        await this.processApplicationPage.clickCreateProcessApplicationOption();
+    }
+    // Re-enters this test's container if it already has one, without creating
+    // one: opening an existing resource must not have the side effect of
+    // creating a container for a spec that never asked for it.
+    async ensureInResourceContainer() {
+        if (!this.processApplicationUrl) {
+            return;
+        }
+        await this.enterResourceContainer();
+    }
+    // Navigates back to this test's process application by the remembered URL
+    // rather than by a breadcrumb click: hub renders no process-application
+    // breadcrumb on a diagram page at container root, and the breadcrumb that
+    // does exist on the container page doubles as its rename control. Hub's own
+    // Playwright suite navigates back the same way.
+    async returnToResourceContainer() {
+        if (!this.processApplicationUrl) {
+            await this.clickWorkspaceBreadcrumb();
+            return;
+        }
+        await this.page.goto(this.processApplicationUrl, {
+            waitUntil: 'domcontentloaded',
+        });
+        await this.processApplicationPage.waitForProcessApplication();
+        await this.clickMessageBanner();
+    }
+    // Single seam for "give me an empty BPMN diagram in this test's container".
+    // A process application always ships an auto-created main process; this adds
+    // a new diagram rather than adopting that one, so every existing modelling
+    // assertion keeps its current subject.
+    async startBlankBpmnDiagram() {
+        await this.clickDiagramTypeDropdown();
+        await this.clickBpmnTemplateOption();
+    }
+    async clickOpenOrganizationsButton() {
+        await this.openOrganizationsButton.click({ timeout: 30000 });
+    }
+    async clickManageButton() {
+        await this.manageButton.click({ timeout: 30000 });
+    }
+    async clickUploadFilesButton() {
+        await this.uploadFilesButton.click({ timeout: 60000 });
+    }
+    // Dismisses both Modeler overlays that can sit over the project list.
+    async clickMessageBanner() {
+        // Maintenance/downtime banner
+        if (await this.overlayBecameVisible(this.messageBanner)) {
+            try {
+                await this.messageBanner.click();
+            }
+            catch {
+                // Banner dismissed itself between the probe and the click
+            }
+        }
+        // "New features" modal, dismissed after the banner rather than through an
+        // .or() chain: that chain stopped at whichever overlay matched first,
+        // leaving the other one on top to intercept the caller's next click.
+        if (await this.overlayBecameVisible(this.closeButton)) {
+            try {
+                await this.closeButton.click();
+            }
+            catch {
+                // Modal dismissed itself between the probe and the click
+            }
+        }
+    }
+    // Boolean visibility probe. waitFor rather than isVisible, which resolves
+    // immediately and would report a false negative on a still-rendering page.
+    async becameVisible(locator, timeout) {
+        return locator
+            .waitFor({ state: 'visible', timeout })
+            .then(() => true)
+            .catch(() => false);
+    }
+    // Probe with waitFor, not isVisible: the "New features" modal renders lazily
+    // after page load, and isVisible resolves immediately — Playwright ignores
+    // its timeout option — so it misses an overlay that has yet to paint.
+    async overlayBecameVisible(overlay) {
+        return overlay
+            .waitFor({ state: 'visible', timeout: 2000 })
+            .then(() => true)
+            .catch(() => false);
+    }
+}
+exports.ModelerHomePage = ModelerHomePage;