From 1d58007606fa7e34007f2a56a3ca653d2cd3404d Mon Sep 17 00:00:00 2001 From: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com> Date: Thu, 4 May 2023 16:04:06 -0400 Subject: [PATCH] feat: custom admin buttons (#2618) Co-authored-by: Dan Ribbens --- docs/admin/components.mdx | 30 +++++++++---------- .../components/views/Account/Default.tsx | 4 +-- .../views/collections/Edit/Default.tsx | 12 ++++---- src/collections/config/schema.ts | 2 +- src/collections/config/types.ts | 5 +++- test/versions/collections/Drafts.ts | 2 +- 6 files changed, 28 insertions(+), 27 deletions(-) diff --git a/docs/admin/components.mdx b/docs/admin/components.mdx index 5cb70a3120..fb96ae48b6 100644 --- a/docs/admin/components.mdx +++ b/docs/admin/components.mdx @@ -77,14 +77,14 @@ _For more examples regarding how to customize components, look at the following You can override components on a Collection-by-Collection basis via each Collection's `admin` property. -| Path | Description | -| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | -| **`views.Edit`** | Used while a document within this Collection is being edited. | -| **`views.List`** | The `List` view is used to render a paginated, filterable table of Documents in this Collection. | -| **`elements.SaveButton`** | Replace the default `Save` button with a custom component. Drafts must be disabled | -| **`elements.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. | -| **`elements.PublishButton`** | Replace the default `Publish` button with a custom component. Drafts must be enabled. | -| **`elements.PreviewButton`** | Replace the default `Preview` button with a custom component. | +| Path | Description | +| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- | +| **`views.Edit`** | Used while a document within this Collection is being edited. | +| **`views.List`** | The `List` view is used to render a paginated, filterable table of Documents in this Collection. | +| **`edit.SaveButton`** | Replace the default `Save` button with a custom component. Drafts must be disabled | +| **`edit.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. | +| **`edit.PublishButton`** | Replace the default `Publish` button with a custom component. Drafts must be enabled. | +| **`edit.PreviewButton`** | Replace the default `Preview` button with a custom component. | #### Examples @@ -140,13 +140,13 @@ export const CustomPreviewButton: CustomPreviewButtonProps = ({ As with Collections, You can override components on a global-by-global basis via their `admin` property. -| Path | Description | -| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | -| **`views.Edit`** | Used while this Global is being edited. | -| **`elements.SaveButton`** | Replace the default `Save` button with a custom component. Drafts must be disabled | -| **`elements.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. | -| **`elements.PublishButton`** | Replace the default `Publish` button with a custom component. Drafts must be enabled. | -| **`elements.PreviewButton`** | Replace the default `Preview` button with a custom component. | +| Path | Description | +| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- | +| **`views.Edit`** | Used while this Global is being edited. | +| **`edit.SaveButton`** | Replace the default `Save` button with a custom component. Drafts must be disabled | +| **`edit.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. | +| **`edit.PublishButton`** | Replace the default `Publish` button with a custom component. Drafts must be enabled. | +| **`edit.PreviewButton`** | Replace the default `Preview` button with a custom component. | ### Fields diff --git a/src/admin/components/views/Account/Default.tsx b/src/admin/components/views/Account/Default.tsx index 72dbf3fa65..cd1a9fdeb4 100644 --- a/src/admin/components/views/Account/Default.tsx +++ b/src/admin/components/views/Account/Default.tsx @@ -147,12 +147,12 @@ const DefaultAccount: React.FC = (props) => { {(preview && (!collection.versions?.drafts || collection.versions?.drafts?.autosave)) && ( )} {hasSavePermission && ( )} diff --git a/src/admin/components/views/collections/Edit/Default.tsx b/src/admin/components/views/collections/Edit/Default.tsx index cd5038758a..2d7ed5d16e 100644 --- a/src/admin/components/views/collections/Edit/Default.tsx +++ b/src/admin/components/views/collections/Edit/Default.tsx @@ -216,7 +216,7 @@ const DefaultEditView: React.FC = (props) => { {(isEditing && preview && (!collection.versions?.drafts || collection.versions?.drafts?.autosave)) && ( )} @@ -225,17 +225,15 @@ const DefaultEditView: React.FC = (props) => { {collection.versions?.drafts ? ( {!collection.versions.drafts.autosave && ( - + )} ) : ( - + )} )} @@ -245,7 +243,7 @@ const DefaultEditView: React.FC = (props) => { {(isEditing && preview && (collection.versions?.drafts && !collection.versions?.drafts?.autosave)) && ( )} diff --git a/src/collections/config/schema.ts b/src/collections/config/schema.ts index 2ebb6389fb..32a2430f87 100644 --- a/src/collections/config/schema.ts +++ b/src/collections/config/schema.ts @@ -62,7 +62,7 @@ const collectionSchema = joi.object().keys({ List: componentSchema, Edit: componentSchema, }), - elements: joi.object({ + edit: joi.object({ SaveButton: componentSchema, PublishButton: componentSchema, SaveDraftButton: componentSchema, diff --git a/src/collections/config/types.ts b/src/collections/config/types.ts index 638909e99d..cd158e1ca6 100644 --- a/src/collections/config/types.ts +++ b/src/collections/config/types.ts @@ -194,7 +194,10 @@ export type CollectionAdminOptions = { * Custom admin components */ components?: { - elements?: { + /** + * Components within the edit view + */ + edit?: { /** * Replaces the "Save" button * + drafts must be disabled diff --git a/test/versions/collections/Drafts.ts b/test/versions/collections/Drafts.ts index d6f414fa27..b388245f46 100644 --- a/test/versions/collections/Drafts.ts +++ b/test/versions/collections/Drafts.ts @@ -9,7 +9,7 @@ const DraftPosts: CollectionConfig = { defaultColumns: ['title', 'description', 'createdAt', '_status'], preview: () => 'https://payloadcms.com', components: { - elements: { + edit: { PublishButton: CustomPublishButton, }, },