Operator guideENcmspagesdetail

CMS / Pages / Detail

Full page editor for draft content, publish/delete flow, visibility settings, and older-version switching.

Reader view

Clean portal guidance

This page keeps the operator explanation, field and action descriptions, and screenshots visible without exposing repo paths, raw sidecars, or editorial-only implementation details.

Narrative content

Page body

What this page does

This page opens the full page editor for one page key and is the main operator workspace for updating localized content, adjusting visibility, and publishing the current draft.

What operators manage here

  • Header identity: page key, editable name, operational state, and content status.
  • Language tabs and page sections for localized content.
  • Country restrictions and allowed-country targeting.
  • Preview mode switching between desktop and mobile iframe layouts.
  • Older versions that can be switched back into the current draft.
  • Lifecycle actions such as publish, align, translate, duplicate, URLs editing, and delete.

Common confusion

  • Delete removes the page and related content history entirely.
  • Publish promotes the current draft content and archives the previous published version.
  • State changes page availability, while Status tracks the publication lifecycle of content.
  • There is no visible Save Draft button. Draft persistence happens automatically through debounced autosave when operators change editable fields or page content.
  • Translate fills other languages from the primary language, while Force Translate overwrites non-primary languages.
  • Choose a Past Version is not a compare-only history viewer. Selecting a row immediately copies that archived content into the current draft through the normal page update route.
  • Duplicate is not a single backend clone endpoint. The helper first creates a new page shell, then copies the current page content and settings into the new key.
  • Content align warns that manually added non-primary language sections will be lost before the alignment request runs.

Editor-only helper surfaces

  • URLs opens a separate modal for page URLs with its own validation and debounced save flow.
  • Duplicate opens the same page-creation modal used on the page list, then copies the current content into the newly created page.
  • Add section inserts a new default content section into the current language layout.
  • The right sidebar exposes per-section controls for Type, Section name (optional), Visibility, Access Tags, Device Visibility, and section-level Delete / Duplicate / move actions.
  • Preview can switch between desktop and mobile framing without changing saved content.
  • Choose a Past Version shows archived timestamps and can label rows as Published or Current version.

How saving actually works

  • Name uses Formik submit-on-change plus a one-second debounced page update.
  • State and Layout bypass the form debounce and save immediately through direct update calls.
  • Exclude Countries and Included Countries submit immediately after the operator changes the selection, then go through the same debounced page update path.
  • Section edits, section ordering, and layout-grid edits rebuild the current language pageContent, save it, and force the preview iframe to reload.
  • Language tabs and the desktop/mobile preview toggle are local FE state only and do not write to the backend.
Calculation notes

Calculations

calculation

Mixed save model

Verification
verified_backend_and_core
Logic
`Name` uses `getFormikCommonFieldProps(..., true)` and Formik submit, then the FE debounces `PUT /api/core/pages/:pageKey` by one second., `Exclude Countries` and `Included Countries` call `formik.handleSubmit()` immediately after selection, but still save through the same debounced update path., `State` and `Layout` bypass the debounce helper and call the page update mutation directly., Section edits, add/remove/duplicate, and layout-grid changes rebuild the localized `pageContent` payload and save it through the page update flow.
calculation

Preview and language local state

Verification
verified_fe_only
Logic
Language tabs and the desktop/mobile preview toggle are local FE state only., The FE forces the preview iframe to reload by rotating a local `hash` after successful update, translate, align, or section-change operations., Changing the preview frame does not persist any page setting by itself.
calculation

Older version restore

Verification
verified_backend_and_core
Logic
Selecting `Choose a Past Version` sends `switchTo` through `PUT /api/core/pages/:pageKey`., `edit-page.ts` ensures a draft exists first; if no draft exists, it creates one from the published content before applying the selected version., The selected historical content replaces the current draft snapshot instead of opening a compare-only history view.
calculation

Duplicate is create-then-copy

Verification
verified_backend_and_core
Logic
`Duplicate` opens `CreatePageModal`, which first calls `POST /api/core/pages` with the new `pageKey` and `pageName`., After create succeeds, `duplicateExistingPage` calls the page update route with the new key plus the current `pageContent` and `pageContentSettings`., The FE then redirects the operator to `/cms/pages/:pageKey` for the new page.
calculation

Content align warning

Verification
verified_fe_only
Logic
`Content align` is gated by a browser confirm dialog., The confirmation explicitly warns that sections manually added to non-primary language pages will be lost., Only confirmed aligns call `POST /api/core/pages/:pageKey/align`.
calculation

Force Translate confirmation

Verification
verified_backend_and_core
Logic
`Force Translate` does not call the translate route immediately., The FE opens a confirmation dialog warning that all non-primary language content will be overwritten., Confirmed force-translate calls `POST /api/core/pages/:pageKey/translate` with `force: true` and `isDeeplService: true`.
calculation

URLs modal validation

Verification
verified_backend_and_core
Logic
The `URLs` helper modal keeps its own form state and saves through a one-second debounced `PUT /api/core/urls`., Empty URLs, URLs without a leading `/`, and duplicate URL values are blocked in the FE before the save request is sent., Successful URL save closes the modal; row deletion can call `DELETE /api/core/urls/:urlId` immediately before the modal-level save.
Field dictionary

Fields

field

Key

Immutable page identifier used by routes and content references.

Data Type
string
field

Name

Operator-facing page name editable from the header.

Data Type
string
Editable
true
field

State

Operational status of the page record.

Data Type
enum
Editable
true
field

Status

Lifecycle status of the current page content snapshot.

Data Type
enum
field

Layout

Page layout preset applied to the current page content settings.

Data Type
enum
Editable
true
field

Language Tabs

Switches the editor between localized page variants.

Data Type
tabs
field

Preview Mode

Chooses whether the embedded preview is rendered in desktop or mobile framing.

Data Type
enum
Caveats
This toggle changes only local FE framing and does not write a persisted page setting.
field

Excluded Countries

Blocks the page in the selected countries.

Data Type
string[]
Editable
true
field

Included Countries

Limits the page to the selected countries only.

Data Type
string[]
Editable
true
field

Choose a Past Version

Historic archived versions that can be restored into the current draft.

Data Type
version-list
Caveats
Selecting a row applies that version into the draft immediately; it is not a compare-only history viewer., Dropdown rows can display `Published` or `Current version` chips next to the timestamp.
field

Page Sections

Structured page sections edited per language in the main content area.

Data Type
object
Editable
true
field

Type

Section-type selector in the right sidebar for the currently selected page section.

Data Type
enum
Editable
true
field

Section name (optional)

Optional operator-facing identifier for the selected section.

Data Type
string
Editable
true
field

Visibility

Controls whether the selected section is visible or hidden on the page.

Data Type
enum
Editable
true
field

Include Tags

Access-tag rule requiring matching tags for the selected section.

Data Type
string[]
Editable
true
field

Exclude Tags

Access-tag rule that suppresses the selected section for matching tags.

Data Type
string[]
Editable
true
field

Show on Desktop

Device-visibility switch controlling whether the selected section appears on desktop layouts.

Data Type
boolean
Editable
true
field

Show on Mobile

Device-visibility switch controlling whether the selected section appears on mobile layouts.

Data Type
boolean
Editable
true
Operational notes

Notes

item

FE page-editor route, section-sidebar controls, older-version switching, and header helper actions are confirmed against the current `PageEditor`.

item

`Name` uses submit-on-change plus the page-level debounce helper; `State` and `Layout` call direct updates instead of waiting for the debounce cycle.

item

`Choose a Past Version` writes `switchTo` through `edit-page.ts`, which creates a draft from published content first when no draft exists.

item

`Duplicate` is a create-then-copy helper: `CreatePageModal` calls `POST /api/core/pages`, then `duplicateExistingPage` copies the current `pageContent` and `pageContentSettings` into the new key.

item

`URLs` is a nested helper modal with its own `GET /api/core/urls`, `PUT /api/core/urls`, and `DELETE /api/core/urls/:urlId` lifecycle and FE-side duplicate/leading-slash validation.

item

The current FE has no visible `Save Draft` button. Draft persistence happens through debounced autosave, direct update calls, and helper-specific modal saves.

Related references

Related pages

pageCMS / Pages

CMS page workspace for inventory, draft editing, publish/delete actions, and page visibility settings.

pageCMS / Pages / Form

Create-page modal for the initial page key and page name.

pageCMS / Pages / List

CMS page inventory grid with operator filters, untranslated-language stats, and create-page entrypoints.

pageActivity Tag Rules / Detail

Rule inspection page with backend identity, conditions, timestamps, impact estimate, run action, delete action, and recent application history.

pageAffiliate Payment Settings / Detail

Saved affiliate payment-setting detail page for reviewing one configured record.

pageAffiliate Settings / Detail

Saved affiliate detail workspace for reviewing one affiliate and opening report actions.