Skip to content

Commit 70957b0

Browse files
jacobsfletchjacobsfletch
authored
fix!: properly cases custom collection components (#6948)
## Description Properties within the Custom Collection Components config were not properly cased. In the Payload Config, there are places where we expose _an array_ of Custom Components to render. These properties should be cased in `camelCase` to indicate that its type is _**not**_ a component, but rather, it's an _**array**_ of components. This is how all other arrays are already cased throughout the config, therefore these components break exiting convention. The `CapitalCase` convention is reserved for _components themselves_, however, fixing this introduces a breaking change. Here's how to migrate: Old: ```ts { // ... admin: { components: { AfterList: [], AfterListTable: [], BeforeList: [], BeforeListTable: [], } } } ``` New: ```ts { // ... admin: { components: { afterList: [], afterListTable: [], beforeList: [], beforeListTable: [], } } } ``` The docs were also out of date for the Root-level Custom Components. These components are documented in CaptalCase but are in fact cased correctly in Payload. This PR fixes that. - [x] I have read and understand the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository. ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) - [x] This change requires a documentation update ## Checklist: - [x] Existing test suite passes locally with my changes - [x] I have made corresponding changes to the documentation
1 parent 4375a33 commit 70957b0

File tree

4 files changed

+22
-22
lines changed

4 files changed

+22
-22
lines changed

‎docs/admin/components.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ The following options are available:
5252
| Path | Description |
5353
|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
5454
| **`Nav`** | Contains the sidebar / mobile menu in its entirety. |
55-
| **`BeforeNavLinks`** | An array of Custom Components to inject into the built-in Nav, _before_ the links themselves. |
56-
| **`AfterNavLinks`** | An array of Custom Components to inject into the built-in Nav, _after_ the links. |
57-
| **`BeforeDashboard`** | An array of Custom Components to inject into the built-in Dashboard, _before_ the default dashboard contents. |
58-
| **`AfterDashboard`** | An array of Custom Components to inject into the built-in Dashboard, _after_ the default dashboard contents. |
59-
| **`BeforeLogin`** | An array of Custom Components to inject into the built-in Login, _before_ the default login form. |
60-
| **`AfterLogin`** | An array of Custom Components to inject into the built-in Login, _after_ the default login form. |
55+
| **`beforeNavLinks`** | An array of Custom Components to inject into the built-in Nav, _before_ the links themselves. |
56+
| **`afterNavLinks`** | An array of Custom Components to inject into the built-in Nav, _after_ the links. |
57+
| **`beforeDashboard`** | An array of Custom Components to inject into the built-in Dashboard, _before_ the default dashboard contents. |
58+
| **`afterDashboard`** | An array of Custom Components to inject into the built-in Dashboard, _after_ the default dashboard contents. |
59+
| **`beforeLogin`** | An array of Custom Components to inject into the built-in Login, _before_ the default login form. |
60+
| **`afterLogin`** | An array of Custom Components to inject into the built-in Login, _after_ the default login form. |
6161
| **`logout.Button`** | The button displayed in the sidebar that logs the user out. |
6262
| **`graphics.Icon`** | The simplified logo used in contexts like the the `Nav` component. |
6363
| **`graphics.Logo`** | The full logo used in contexts like the `Login` view. |
@@ -140,10 +140,10 @@ The following options are available:
140140

141141
| Path | Description |
142142
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
143-
| **`BeforeList`** | Array of components to inject _before_ the built-in List view |
144-
| **`BeforeListTable`** | Array of components to inject _before_ the built-in List view's table |
145-
| **`AfterList`** | Array of components to inject _after_ the built-in List view |
146-
| **`AfterListTable`** | Array of components to inject _after_ the built-in List view's table |
143+
| **`beforeList`** | An array of components to inject _before_ the built-in List View |
144+
| **`beforeListTable`** | An array of components to inject _before_ the built-in List View's table |
145+
| **`afterList`** | An array of components to inject _after_ the built-in List View |
146+
| **`afterListTable`** | An array of components to inject _after_ the built-in List View's table |
147147
| **`edit.SaveButton`** | Replace the default `Save` button with a Custom Component. Drafts must be disabled |
148148
| **`edit.SaveDraftButton`** | Replace the default `Save Draft` button with a Custom Component. Drafts must be enabled and autosave must be disabled. |
149149
| **`edit.PublishButton`** | Replace the default `Publish` button with a Custom Component. Drafts must be enabled. |

‎packages/payload/src/collections/config/schema.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ const collectionSchema = joi.object().keys({
2121
}),
2222
admin: joi.object({
2323
components: joi.object({
24-
AfterList: joi.array().items(componentSchema),
25-
AfterListTable: joi.array().items(componentSchema),
26-
BeforeList: joi.array().items(componentSchema),
27-
BeforeListTable: joi.array().items(componentSchema),
24+
afterList: joi.array().items(componentSchema),
25+
afterListTable: joi.array().items(componentSchema),
26+
beforeList: joi.array().items(componentSchema),
27+
beforeListTable: joi.array().items(componentSchema),
2828
edit: joi.object({
2929
Description: componentSchema,
3030
PreviewButton: componentSchema,

‎packages/payload/src/collections/config/types.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -225,10 +225,10 @@ export type CollectionAdminOptions = {
225225
* Custom admin components
226226
*/
227227
components?: {
228-
AfterList?: CustomComponent[]
229-
AfterListTable?: CustomComponent[]
230-
BeforeList?: CustomComponent[]
231-
BeforeListTable?: CustomComponent[]
228+
afterList?: CustomComponent[]
229+
afterListTable?: CustomComponent[]
230+
beforeList?: CustomComponent[]
231+
beforeListTable?: CustomComponent[]
232232
/**
233233
* Components within the edit view
234234
*/

‎packages/ui/src/providers/ComponentMap/buildComponentMap/collections.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,31 +106,31 @@ export const mapCollections = (args: {
106106

107107
const Upload = UploadComponent ? <WithServerSideProps Component={UploadComponent} /> : undefined
108108

109-
const beforeList = collectionConfig?.admin?.components?.BeforeList
109+
const beforeList = collectionConfig?.admin?.components?.beforeList
110110

111111
const BeforeList =
112112
(beforeList &&
113113
Array.isArray(beforeList) &&
114114
beforeList?.map((Component) => <WithServerSideProps Component={Component} />)) ||
115115
null
116116

117-
const beforeListTable = collectionConfig?.admin?.components?.BeforeListTable
117+
const beforeListTable = collectionConfig?.admin?.components?.beforeListTable
118118

119119
const BeforeListTable =
120120
(beforeListTable &&
121121
Array.isArray(beforeListTable) &&
122122
beforeListTable?.map((Component) => <WithServerSideProps Component={Component} />)) ||
123123
null
124124

125-
const afterList = collectionConfig?.admin?.components?.AfterList
125+
const afterList = collectionConfig?.admin?.components?.afterList
126126

127127
const AfterList =
128128
(afterList &&
129129
Array.isArray(afterList) &&
130130
afterList?.map((Component) => <WithServerSideProps Component={Component} />)) ||
131131
null
132132

133-
const afterListTable = collectionConfig?.admin?.components?.AfterListTable
133+
const afterListTable = collectionConfig?.admin?.components?.afterListTable
134134

135135
const AfterListTable =
136136
(afterListTable &&

0 commit comments

Comments
 (0)