Content types control panel #269

Summary

A new Content types control panel for Aurora at /controlpanel/content-types.
It brings together what the classic Content Settings control panel (@@content-controlpanel) and the Volto Dexterity Content Types control panel do today.
The type is the unit: a list of types, plus one page per type with the tabs Settings, Workflow, Fields, Behaviors and Layout.

It is built so the same screens can run in Volto without changes.

Design

Content Types Control Panel.html

Scope

• Type list: search and filters, a row menu that opens any tab, a bulk bar (change workflow, export, delete), an inline Addable switch, and a site defaults strip (default workflow, defaults for new types).
• Add type dialog: name, a short name derived from the name, description, and "start from a copy of an existing type".
• Type page:
  • one URL per tab: /controlpanel/content-types/{type}/{settings|workflow|fields|behaviors|layout}
  • one save per type: edits from all tabs collect in a sticky save bar, and tabs with unsaved edits show a dot
  • a dialog when leaving with unsaved edits
• Settings: addable, allowed contents (all / only selected / nothing), shown in search results, usable as a folder's default page, comments, versioning.
• Workflow: explains the current workflow. A three-step Change workflow dialog (choose, map states, review) suggests mappings that keep visibility, shows item counts per state, and runs the change as a job. The same flow works for several types at once and for the site default.
• Workflow state colors: every state has a color, so the list, the Workflow tab, the change dialog and other UI (e.g. the contents view) show states consistently. Colors are one of the six Quanta color families (gray, blue, teal, green, yellow, red), so themes and dark mode can style them. The first that applies wins: the app's configuration, the color the backend sets on the state, defaults for Plone's core states, then a color derived from who can see items in the state, so custom workflows get one too.
• Fields: fieldsets and fields, reordered by drag or keyboard. Fields that come from behaviors are shown locked, with a link to the behavior. Custom fields are edited in a side drawer.
• Behaviors: behaviors that add fields form an ordered list, those that don't form a separate unordered group, and a live preview shows the edit form. The add dialog explains conflicts (included behaviors, pairs, deprecated ones).
• Layout: default blocks for new items. Aurora's editor is Plate, not the Volto blocks editor, so this tab needs its own design. It starts as a placeholder.
• Redirects: /controlpanel/dexterity-types[/:id[/schema|/layout]] redirects to the matching new route.

Architecture

• @plone/controlpanels must not import react-router, any i18n library, @plone/client, @plone/cmsui or @plone/components. A lint rule will enforce this.
• Navigation uses the react-aria-components RouterProvider.
• Translations and toasts come from a provider.
• Like the other add-ons, the package ships its TypeScript source; the app compiles it. For Volto it will also ship precompiled CSS with the Tailwind utilities it and Quanta use, so Volto needs no Tailwind setup.
• Widgets are resolved from the registry with the FormWidgetProps contract from Define and enforce the form widget contract (forms ↔ widgets) #243. The resolution order in cmsui's Field.tsx moves to @plone/helpers so both packages share it. Volto widgets will be updated to the same contract (a separate bugfix).
• Anything the current plone.restapi can't do sits behind a capability flag. The UI ships against today's backend and turns features on as the backend gains them.
• A MockDriver with fixtures from a real site runs the screens in Storybook and tests, so UI work doesn't wait for the backend.

Phases

Merge order: #273 (React Aria 1.22) → #271 (phase 0) → #275 (Quanta alignment) → phases 2 and on, each a PR on top of the previous one.

• 0. (Add the @plone/controlpanels package with the content types driver #271) Scaffold @plone/controlpanels: the driver interface and types, capability flags, MockDriver and fixtures, the provider (router, t, notify), Storybook, and the dependency lint rule
• 1. Quanta controls: part of Align @plone/quanta with React Aria's Tailwind starter #275 (Quanta follows React Aria's Tailwind starter). Update React Aria Components to 1.22 #273 updates React Aria Components to 1.22
• 2. Type list and add dialog, the Aurora route and redirects, and AuroraDriver list/create/delete on the existing endpoints
• 3. The type page (tabs, per-type edit store, save bar, leave dialog) and the Settings tab
• 4. The Fields tab and field editor drawer; in @plone/client, add replacing a whole schema (PUT /@types/{type}) and deleting a field
• 5. The Behaviors tab and behavior metadata config (groups, included behaviors, pairs, deprecated)
• 6. The Workflow tab and the change dialog, including several types at once and the site default
• 7. The Layout tab: a design for Plate-based default layouts
• 8. Turn on the capability flags in AuroraDriver as the plone.restapi endpoints land (see below)
• 9. Volto port: a VoltoDriver and routes, with Volto widgets on the FormWidgetProps contract

Backend

plone.restapi has no API for per-type content settings, workflow assignment, behavior order or behavior metadata.
Proposal: plone/plone.restapi#2061

Endpoints proposed there: @types-settings, @workflows, @workflow-assignments, behaviors as an ordered list with what each one adds, and an acceptance test server.

Related

• Type behaviors and build content types from them #272: typed behaviors in @plone/types. The control panel uses plain behavior names until it lands.