fix: document actions being rendered multiple times (#22283)

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,
       },

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 };

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,
+};

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];
 

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) => <DocumentActions actions={actions} />}
       </DescriptionComponentRenderer>

packages/core/content-manager/admin/src/pages/ListView/components/TableActions.tsx

@@ -53,7 +53,7 @@ const TableActions = ({ document }: TableActionsProps) => {
     <DescriptionComponentRenderer
       props={props}
       descriptions={(plugins['content-manager'].apis as ContentManagerPlugin['config']['apis'])
-        .getDocumentActions()
+        .getDocumentActions('table-row')
         // We explicitly remove the PublishAction from description so we never render it and we don't make unnecessary requests.
         .filter((action) => 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