Skip to content

feat: payload version item in admin settings menu#16514

Draft
denolfe wants to merge 16 commits intomainfrom
feat/payload-version-footer
Draft

feat: payload version item in admin settings menu#16514
denolfe wants to merge 16 commits intomainfrom
feat/payload-version-footer

Conversation

@denolfe
Copy link
Copy Markdown
Member

@denolfe denolfe commented May 6, 2026

Overview

Adds a "Payload v{version}" item to the admin settings menu (gear icon dropdown) on every Payload app. Clicking it opens a modal listing all installed Payload-related package versions with a copy button matching the payload info CLI format. Installs are opt-out via admin.versionInSettingsMenu: false.

Settings Menu
image
Modal

image

Key Changes

  • New Admin.versionInSettingsMenu opt-out flag and SanitizedAdmin.packageVersions map

    • versionInSettingsMenu?: boolean (defaults to true) on the user-facing Admin type.
    • packageVersions: Record<string, string> required on the sanitized admin shape, populated once at config sanitization. Named to avoid colliding with the existing Admin.dependencies (AdminDependencies, used by the import-map).
  • Auto-injection in sanitizeConfig

    • Calls sanitizeDependencies() once at boot, scanning the user's project for PAYLOAD_PACKAGE_LIST entries via the existing getDependencies utility. Falls back to a payload-only map if the scan throws.
    • Appends '@payloadcms/ui/rsc#PayloadVersionMenuItem' as the last entry in admin.components.settingsMenu unless the user opts out. The /rsc subpath matches the convention used by injectHierarchyButton.ts for server-only built-ins.
    • Subpath probes from the upstream package list (@payloadcms/next/utilities, @payloadcms/ui/shared) are stripped before display so the modal shows bare package names.
  • New PayloadVersionMenuItem server component in @payloadcms/ui

    • Reads payload.config.admin.packageVersions and forwards a serializable copy to a client trigger.
    • The client trigger renders a PopupList.Button with Payload v{version}, plus a Modal (slug payload-version-info) containing a <dl> of versions with payload pinned first, and the existing CopyToClipboard icon-button inline in the header.
    • Styled with vanilla CSS using v4 design tokens (--bg-default-default, --text-default-secondary, --spacer-N, --radius-medium, --font-family-mono).
  • Tests

    • Unit tests for sanitizeDependencies (always-payload, alphabetical sort, fallback on throw).
    • Sanitization tests covering auto-injection ordering, opt-out, and packageVersions.payload population.
    • formatForClipboard unit tests (payload-first ordering, empty-input handling).
    • Playwright e2e for the gear → version → modal → copy flow.

Design Decisions

  • Reuse the existing settingsMenu slot rather than introducing a new footer slot. The settings menu is the existing surface for admin-level utilities and already supports custom items; adding a new slot would expand the public component-config surface for a single built-in.
  • Compute versions once at sanitization, not per-render. The data is process-scoped (package versions don't change between requests), and storing them on the sanitized config means the server component has zero per-render filesystem I/O. The map is JSON-serializable so it crosses the RSC boundary intact.
  • Server-only component referenced via the /rsc subpath. Bare @payloadcms/ui resolves to the client bundle (per package.json#exports['.']), where server-only components aren't exported. The /rsc subpath is the established convention for built-ins that auto-inject a server component into a config slot.
  • Hardcoded English modal title. Adding general:payloadVersionInfo would require populating it in every supported language or running translateNewKeys against an OpenAI key. Punted as a follow-up; general:copy (already present) is the only translation key consumed.
  • Field renamed dependenciespackageVersions. Caught during implementation: Config['admin'].dependencies already exists for the import-map. Two same-named properties on the same object would clobber at runtime.

Overall Flow

sequenceDiagram
  participant User
  participant Admin as Admin UI
  participant Server as Settings Menu (RSC)
  participant Modal as Version Modal (client)
  participant Clipboard

  Note over Server: At boot, sanitizeConfig populates<br/>admin.packageVersions and<br/>appends version item to settingsMenu
  User->>Admin: Click gear icon
  Admin->>Server: Render settings menu items
  Server->>Modal: Pass packageVersions as serializable props
  User->>Modal: Click "Payload v{version}"
  Modal-->>User: Open with version list
  User->>Modal: Click copy
  Modal->>Clipboard: writeText(formatForClipboard)
Loading

denolfe added 15 commits May 6, 2026 11:13
…em injection

Server-only components must be referenced via the /rsc subpath, matching the
existing pattern in injectHierarchyButton.ts. The bare @payloadcms/ui entry
resolves to the client bundle, where PayloadVersionMenuItem is not exported,
causing 'getFromImportMap: PayloadComponent not found' at runtime.
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

📦 esbuild Bundle Analysis for payload

This analysis was generated by esbuild-bundle-analyzer. 🤖

Meta File Out File Size (raw) Note
packages/next/meta_index.json esbuild/index.js 989.29 KB ✅ No change
packages/payload/meta_index.json esbuild/index.js 1.41 MB ⚠️ +927 B (+0.1%)
packages/payload/meta_shared.json esbuild/exports/shared.js 190.50 KB ✅ No change
packages/richtext-lexical/meta_client.json esbuild/exports/client_optimized/index.js 287.28 KB ✅ No change
packages/ui/meta_client.json esbuild/exports/client_optimized/index.js 1.23 MB ⚠️ +1.57 KB (+0.1%)
packages/ui/meta_shared.json esbuild/exports/shared_optimized/index.js 16.32 KB ✅ No change
Largest paths These visualization shows top 20 largest paths in the bundle.

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ████████████████████▌ }}}$ 82.0%, 807.63 KB
dist/views/Version ${{\color{Goldenrod}{ █▎ }}}$ 5.2%, 51.49 KB
dist/views/Dashboard ${{\color{Goldenrod}{ ▌ }}}$ 2.2%, 21.38 KB
dist/views/Document ${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 16.66 KB
dist/views/List ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 15.24 KB
dist/elements/Nav ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 10.87 KB
dist/views/Root ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 9.90 KB
dist/views/Versions ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.17 KB
dist/views/API ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.13 KB
dist/views/Account ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 5.55 KB
dist/elements/DocumentHeader ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 4.71 KB
dist/views/Login ${{\color{Goldenrod}{ }}}$ 0.4%, 4.40 KB
dist/layouts/Root ${{\color{Goldenrod}{ }}}$ 0.3%, 3.41 KB
dist/views/ForgotPassword ${{\color{Goldenrod}{ }}}$ 0.3%, 3.13 KB
dist/views/CreateFirstUser ${{\color{Goldenrod}{ }}}$ 0.3%, 2.81 KB
dist/templates/Default ${{\color{Goldenrod}{ }}}$ 0.3%, 2.64 KB
dist/views/ResetPassword ${{\color{Goldenrod}{ }}}$ 0.2%, 2.40 KB
dist/views/Logout ${{\color{Goldenrod}{ }}}$ 0.2%, 1.94 KB
dist/views/Verify ${{\color{Goldenrod}{ }}}$ 0.1%, 1.29 KB
dist/views/NotFound ${{\color{Goldenrod}{ }}}$ 0.1%, 1.21 KB
(other) ${{\color{Goldenrod}{ ████▌ }}}$ 18.0%, 176.99 KB

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Path Size
../../node_modules ${{\color{Goldenrod}{ █████████████████ }}}$ 68.1%, 952.01 KB
dist/fields/hooks ${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 44.07 KB
dist/collections/operations ${{\color{Goldenrod}{ ▋ }}}$ 2.9%, 39.98 KB
dist/versions/migrations ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 18.50 KB
dist/auth/operations ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 15.63 KB
dist/fields/config ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 14.18 KB
dist/globals/operations ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 13.32 KB
dist/utilities/configToJSONSchema.js ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 13.13 KB
dist/queues/operations ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 12.65 KB
dist/fields/validations.js ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 10.57 KB
dist/collections/config ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 9.51 KB
dist/bin/generateImportMap ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 9.44 KB
dist/config/orderable ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 8.00 KB
dist/uploads/fetchAPI-multipart ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.80 KB
dist/index.js ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.79 KB
dist/hierarchy/utils ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 7.65 KB
dist/database/migrations ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 7.54 KB
dist/collections/endpoints ${{\color{Goldenrod}{ }}}$ 0.4%, 6.23 KB
dist/config/sanitize.js ${{\color{Goldenrod}{ }}}$ 0.4%, 5.60 KB
dist/auth/strategies ${{\color{Goldenrod}{ }}}$ 0.4%, 5.50 KB
(other) ${{\color{Goldenrod}{ ███████▉ }}}$ 31.9%, 445.85 KB

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ███████████████████▉ }}}$ 79.7%, 148.89 KB
dist/fields/validations.js ${{\color{Goldenrod}{ █▍ }}}$ 5.7%, 10.57 KB
dist/config/orderable ${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 3.13 KB
dist/fields/baseFields ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 2.79 KB
dist/utilities/deepCopyObject.js ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 2.54 KB
dist/auth/cookies.js ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.55 KB
dist/utilities/flattenTopLevelFields.js ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.42 KB
dist/fields/config ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 1.28 KB
dist/utilities/getVersionsConfig.js ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 1.04 KB
dist/utilities/flattenAllFields.js ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 943 B
dist/utilities/unflatten.js ${{\color{Goldenrod}{ }}}$ 0.4%, 779 B
dist/utilities/sanitizeUserDataForEmail.js ${{\color{Goldenrod}{ }}}$ 0.4%, 713 B
dist/utilities/getFieldPermissions.js ${{\color{Goldenrod}{ }}}$ 0.3%, 651 B
dist/collections/config ${{\color{Goldenrod}{ }}}$ 0.3%, 570 B
dist/bin/generateImportMap ${{\color{Goldenrod}{ }}}$ 0.3%, 561 B
dist/auth/sessions.js ${{\color{Goldenrod}{ }}}$ 0.3%, 525 B
dist/fields/getFieldPaths.js ${{\color{Goldenrod}{ }}}$ 0.3%, 485 B
dist/utilities/getSafeRedirect.js ${{\color{Goldenrod}{ }}}$ 0.2%, 423 B
dist/utilities/deepMerge.js ${{\color{Goldenrod}{ }}}$ 0.2%, 413 B
dist/errors/APIError.js ${{\color{Goldenrod}{ }}}$ 0.2%, 399 B
(other) ${{\color{Goldenrod}{ █████ }}}$ 20.3%, 37.91 KB

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path Size
dist/features/blocks ${{\color{Goldenrod}{ ███▏ }}}$ 12.8%, 36.44 KB
dist/lexical/plugins ${{\color{Goldenrod}{ ██▉ }}}$ 11.5%, 32.65 KB
dist/lexical/ui ${{\color{Goldenrod}{ ██▏ }}}$ 8.6%, 24.36 KB
dist/features/experimental_table ${{\color{Goldenrod}{ ██ }}}$ 8.3%, 23.70 KB
dist/packages/@lexical ${{\color{Goldenrod}{ █▋ }}}$ 6.7%, 18.99 KB
dist/features/link ${{\color{Goldenrod}{ █▋ }}}$ 6.5%, 18.53 KB
dist/features/toolbars ${{\color{Goldenrod}{ █▍ }}}$ 5.7%, 16.08 KB
dist/features/upload ${{\color{Goldenrod}{ █▏ }}}$ 4.8%, 13.77 KB
dist/features/textState ${{\color{Goldenrod}{ ▉ }}}$ 3.9%, 11.08 KB
dist/features/relationship ${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 9.03 KB
dist/lexical/utils ${{\color{Goldenrod}{ ▊ }}}$ 3.1%, 8.79 KB
dist/features/converters ${{\color{Goldenrod}{ ▋ }}}$ 2.9%, 8.36 KB
dist/features/debug ${{\color{Goldenrod}{ ▋ }}}$ 2.6%, 7.40 KB
dist/utilities/fieldsDrawer ${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 7.15 KB
dist/lexical/config ${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 5.08 KB
dist/features/lists ${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 5.00 KB
dist/features/format ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 3.46 KB
dist/lexical/LexicalEditor.js ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 3.23 KB
dist/field/Field.js ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 2.81 KB
dist/lexical/nodes ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 2.66 KB
(other) ${{\color{Goldenrod}{ █████████████████████▊ }}}$ 87.2%, 247.61 KB

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ███████████▊ }}}$ 47.3%, 578.99 KB
dist/elements/Hierarchy ${{\color{Goldenrod}{ ▉ }}}$ 3.6%, 44.28 KB
dist/elements/BulkUpload ${{\color{Goldenrod}{ ▌ }}}$ 2.3%, 28.21 KB
dist/views/HierarchyList ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 18.90 KB
dist/elements/Table ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 18.25 KB
dist/views/Edit ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 17.38 KB
dist/elements/WhereBuilder ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 17.36 KB
dist/forms/Form ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.91 KB
dist/fields/Relationship ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.82 KB
dist/fields/Upload ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 14.43 KB
dist/fields/Blocks ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 14.16 KB
dist/elements/QueryPresets ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 10.36 KB
dist/elements/PublishButton ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 9.07 KB
dist/elements/HTMLDiff ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB
dist/views/List ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.10 KB
dist/elements/ReactSelect ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.59 KB
dist/fields/Array ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.41 KB
dist/elements/LivePreview ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.04 KB
dist/elements/Upload ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.67 KB
dist/elements/RelationshipTable ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.28 KB
(other) ${{\color{Goldenrod}{ █████████████▏ }}}$ 52.7%, 645.32 KB

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Path Size
dist/graphics/Logo ${{\color{Goldenrod}{ █████ }}}$ 20.0%, 3.12 KB
../../node_modules ${{\color{Goldenrod}{ ████▎ }}}$ 17.0%, 2.65 KB
dist/graphics/Icon ${{\color{Goldenrod}{ ██▍ }}}$ 9.8%, 1.52 KB
dist/utilities/formatDocTitle ${{\color{Goldenrod}{ ██▏ }}}$ 8.5%, 1.32 KB
dist/providers/TableColumns ${{\color{Goldenrod}{ █▍ }}}$ 5.5%, 862 B
dist/utilities/groupNavItems.js ${{\color{Goldenrod}{ █▎ }}}$ 5.2%, 814 B
dist/utilities/getGlobalData.js ${{\color{Goldenrod}{ █▏ }}}$ 4.9%, 762 B
dist/utilities/api.js ${{\color{Goldenrod}{ █▏ }}}$ 4.8%, 756 B
dist/elements/Translation ${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 493 B
dist/utilities/handleTakeOver.js ${{\color{Goldenrod}{ ▋ }}}$ 2.8%, 440 B
dist/utilities/traverseForLocalizedFields.js ${{\color{Goldenrod}{ ▋ }}}$ 2.6%, 399 B
dist/elements/withMergedProps ${{\color{Goldenrod}{ ▌ }}}$ 2.2%, 339 B
dist/utilities/getVisibleEntities.js ${{\color{Goldenrod}{ ▌ }}}$ 2.1%, 329 B
dist/utilities/getNavGroups.js ${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 301 B
dist/elements/WithServerSideProps ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 232 B
dist/utilities/handleGoBack.js ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 180 B
dist/fields/mergeFieldStyles.js ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 159 B
dist/utilities/handleBackToDashboard.js ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 152 B
dist/forms/Form ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 147 B
dist/utilities/abortAndIgnore.js ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 146 B
(other) ${{\color{Goldenrod}{ ████████████████████ }}}$ 80.0%, 12.51 KB
Details

Next to the size is how much the size has increased or decreased compared with the base branch of this PR.

  • ‼️: Size increased by 20% or more. Special attention should be given to this.
  • ⚠️: Size increased in acceptable range (lower than 20%).
  • ✅: No change or even downsized.
  • 🗑️: The out file is deleted: not found in base branch.
  • 🆕: The out file is newly found: will be added to base branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant