From 7232d30c0532bb291205ba47809e281b5f122da5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <8087692+remidej@users.noreply.github.com> Date: Fri, 29 Nov 2024 11:58:46 +0100 Subject: [PATCH] fix: document actions being rendered multiple times (#22283) --- .../admin/src/content-manager.ts | 20 ++++++++++++++++++- .../src/history/components/HistoryAction.tsx | 1 + .../EditView/components/DocumentActions.tsx | 12 ++++++++++- .../src/pages/EditView/components/Header.tsx | 5 ++++- .../src/pages/EditView/components/Panels.tsx | 2 +- .../ListView/components/TableActions.tsx | 4 +++- 6 files changed, 39 insertions(+), 5 deletions(-) diff --git a/packages/core/content-manager/admin/src/content-manager.ts b/packages/core/content-manager/admin/src/content-manager.ts index 9de463fa01..2f362c111a 100644 --- a/packages/core/content-manager/admin/src/content-manager.ts +++ b/packages/core/content-manager/admin/src/content-manager.ts @@ -3,6 +3,7 @@ import { INJECTION_ZONES } from './components/InjectionZone'; import { PLUGIN_ID } from './constants/plugin'; import { DEFAULT_ACTIONS, + type DocumentActionPosition, type DocumentActionDescription, } from './pages/EditView/components/DocumentActions'; import { @@ -94,6 +95,7 @@ interface DocumentActionComponent | 'publish' | 'unpublish' | 'update'; + position?: DocumentActionDescription['position']; } interface HeaderActionProps extends EditViewContext {} @@ -209,7 +211,23 @@ class ContentManagerPlugin { addDocumentHeaderAction: this.addDocumentHeaderAction.bind(this), addEditViewSidePanel: this.addEditViewSidePanel.bind(this), getBulkActions: () => this.bulkActions, - getDocumentActions: () => this.documentActions, + getDocumentActions: (position?: DocumentActionPosition) => { + /** + * When possible, pre-filter the actions by the components static position property. + * This avoids rendering the actions in multiple places where they weren't displayed, + * which wasn't visible but created issues with useEffect for instance. + * The response should still be filtered by the position, as the static property is new + * and not mandatory to avoid a breaking change. + */ + if (position) { + return this.documentActions.filter( + (action) => + action.position == undefined || [action.position].flat().includes(position) + ); + } + + return this.documentActions; + }, getEditViewSidePanels: () => this.editViewSidePanels, getHeaderActions: () => this.headerActions, }, diff --git a/packages/core/content-manager/admin/src/history/components/HistoryAction.tsx b/packages/core/content-manager/admin/src/history/components/HistoryAction.tsx index 4c0fcfbfc8..d8e160f2ad 100644 --- a/packages/core/content-manager/admin/src/history/components/HistoryAction.tsx +++ b/packages/core/content-manager/admin/src/history/components/HistoryAction.tsx @@ -57,5 +57,6 @@ const HistoryAction: DocumentActionComponent = ({ model, document }) => { }; HistoryAction.type = 'history'; +HistoryAction.position = 'header'; export { HistoryAction }; diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/DocumentActions.tsx b/packages/core/content-manager/admin/src/pages/EditView/components/DocumentActions.tsx index 9deeb3cead..aa993b163a 100644 --- a/packages/core/content-manager/admin/src/pages/EditView/components/DocumentActions.tsx +++ b/packages/core/content-manager/admin/src/pages/EditView/components/DocumentActions.tsx @@ -742,6 +742,7 @@ const PublishAction: DocumentActionComponent = ({ }; PublishAction.type = 'publish'; +PublishAction.position = 'panel'; const UpdateAction: DocumentActionComponent = ({ activeTab, @@ -878,6 +879,7 @@ const UpdateAction: DocumentActionComponent = ({ }; UpdateAction.type = 'update'; +UpdateAction.position = 'panel'; const UNPUBLISH_DRAFT_OPTIONS = { KEEP: 'keep', @@ -1028,6 +1030,7 @@ const UnpublishAction: DocumentActionComponent = ({ }; UnpublishAction.type = 'unpublish'; +UnpublishAction.position = 'panel'; const DiscardAction: DocumentActionComponent = ({ activeTab, @@ -1086,8 +1089,15 @@ const DiscardAction: DocumentActionComponent = ({ }; DiscardAction.type = 'discard'; +DiscardAction.position = 'panel'; const DEFAULT_ACTIONS = [PublishAction, UpdateAction, UnpublishAction, DiscardAction]; export { DocumentActions, DocumentActionsMenu, DocumentActionButton, DEFAULT_ACTIONS }; -export type { DocumentActionDescription, DialogOptions, NotificationOptions, ModalOptions }; +export type { + DocumentActionDescription, + DocumentActionPosition, + DialogOptions, + NotificationOptions, + ModalOptions, +}; diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/Header.tsx b/packages/core/content-manager/admin/src/pages/EditView/components/Header.tsx index 287ebb294c..d567fe3db2 100644 --- a/packages/core/content-manager/admin/src/pages/EditView/components/Header.tsx +++ b/packages/core/content-manager/admin/src/pages/EditView/components/Header.tsx @@ -167,7 +167,7 @@ const HeaderToolbar = () => { }} descriptions={( plugins['content-manager'].apis as ContentManagerPlugin['config']['apis'] - ).getDocumentActions()} + ).getDocumentActions('header')} > {(actions) => { const headerActions = actions.filter((action) => { @@ -470,6 +470,7 @@ const ConfigureTheViewAction: DocumentActionComponent = ({ collectionType, model }; ConfigureTheViewAction.type = 'configure-the-view'; +ConfigureTheViewAction.position = 'header'; const EditTheModelAction: DocumentActionComponent = ({ model }) => { const navigate = useNavigate(); @@ -489,6 +490,7 @@ const EditTheModelAction: DocumentActionComponent = ({ model }) => { }; EditTheModelAction.type = 'edit-the-model'; +EditTheModelAction.position = 'header'; const DeleteAction: DocumentActionComponent = ({ documentId, model, collectionType, document }) => { const navigate = useNavigate(); @@ -578,6 +580,7 @@ const DeleteAction: DocumentActionComponent = ({ documentId, model, collectionTy }; DeleteAction.type = 'delete'; +DeleteAction.position = ['header', 'table-row']; const DEFAULT_HEADER_ACTIONS = [EditTheModelAction, ConfigureTheViewAction, DeleteAction]; diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/Panels.tsx b/packages/core/content-manager/admin/src/pages/EditView/components/Panels.tsx index d9ddf1c8a6..376741afd3 100644 --- a/packages/core/content-manager/admin/src/pages/EditView/components/Panels.tsx +++ b/packages/core/content-manager/admin/src/pages/EditView/components/Panels.tsx @@ -115,7 +115,7 @@ const ActionsPanelContent = () => { props={props} descriptions={( plugins['content-manager'].apis as ContentManagerPlugin['config']['apis'] - ).getDocumentActions()} + ).getDocumentActions('panel')} > {(actions) => } diff --git a/packages/core/content-manager/admin/src/pages/ListView/components/TableActions.tsx b/packages/core/content-manager/admin/src/pages/ListView/components/TableActions.tsx index 6c0ab27c31..64eaeb2ea9 100644 --- a/packages/core/content-manager/admin/src/pages/ListView/components/TableActions.tsx +++ b/packages/core/content-manager/admin/src/pages/ListView/components/TableActions.tsx @@ -53,7 +53,7 @@ const TableActions = ({ document }: TableActionsProps) => { action.name !== 'PublishAction')} > @@ -125,6 +125,7 @@ const EditAction: DocumentActionComponent = ({ documentId }) => { }; EditAction.type = 'edit'; +EditAction.position = 'table-row'; /** * Because the icon system is completely broken, we have to do @@ -227,6 +228,7 @@ const CloneAction: DocumentActionComponent = ({ model, documentId }) => { }; CloneAction.type = 'clone'; +CloneAction.position = 'table-row'; /** * Because the icon system is completely broken, we have to do