refactor: ActionManagerComponent.tsx and fix rare render race condition (#203)

Author: TMSchipper

admin/src/components/ActionManager/ActionManager.tsx

@@ -1,85 +1,79 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useIntl } from 'react-intl';
 import type { PanelComponent } from '@strapi/content-manager/strapi-admin';
-import { Box, Typography, Divider } from '@strapi/design-system';
-import Action from '../Action';
-import { getTrad } from '../../utils/getTrad';
-import { useSettings } from '../../hooks/useSettings';
 import {
 	unstable_useDocument as useDocument,
 	unstable_useContentManagerContext as useContentManagerContext,
 } from '@strapi/strapi/admin';
-import { Modules } from '@strapi/strapi';
+import { useSettings } from '../../hooks/useSettings';
+import Action from '../Action';
 
-const actionModes = ['publish', 'unpublish'];
+const actionModes: Array<'publish' | 'unpublish'> = ['publish', 'unpublish'];
 
-type Props = {
-	document: Modules.Documents.AnyDocument,
-	entity: ReturnType<typeof useContentManagerContext>,
-	locale: string | null,
-}
+const ActionManager: PanelComponent = () => {
+	const entity = useContentManagerContext();
+	const location = useLocation();
+	const params = new URLSearchParams(location.search);
+	const currentLocale = params.get('plugins[i18n][locale]');
 
-const ActionManagerComponent = ({ document, entity, locale }: Props) => {
-  return (
-    <>
-      {actionModes.map((mode, index) => (
-        <div className="actionButton" key={index}>
-          <Action
-            mode={mode}
-            key={mode + index}
-            documentId={document.documentId}
-            entitySlug={entity.model}
-            locale={locale}
-          />
-        </div>
-      ))}
-      <style>
-        {`
-          .actionButton {
-            width: 100%;
-          }
-        `}
-      </style>
-    </>
-  );
-};
+	// Fetch the document (draft/published) with the selected locale
+	const { document } = useDocument({
+		documentId: entity?.id,
+		model: entity?.model,
+		collectionType: entity?.collectionType,
+		params: { locale: currentLocale },
+	});
 
-const ActionManager: PanelComponent = () => {
-  const entity = useContentManagerContext();
-  const location = useLocation();
-  const params = new URLSearchParams(location.search);
-  const currentLocale = params.get('plugins[i18n][locale]');
+	// Load plugin settings (whitelist of content types)
+	const { getSettings } = useSettings();
+	const { isLoading, data, isRefetching } = getSettings();
 
-  const { document } = useDocument({
-    documentId: entity?.id,
-    model: entity?.model,
-    collectionType: entity?.collectionType,
-    params: {
-      locale: currentLocale,
-    },
-  });
+	// Local state to determine whether to show the panel based on settings
+	const [show, setShow] = useState<boolean>(true);
 
-  const { getSettings } = useSettings();
-  const { isLoading, data, isRefetching } = getSettings();
+	// When settings finish loading, update visibility based on whitelist
+	useEffect(() => {
+		if (!isLoading && !isRefetching) {
+			const allowedList = data?.contentTypes || [];
+			const isAllowed = allowedList.length === 0 || allowedList.includes(entity.slug);
+			setShow(isAllowed);
+		}
+	}, [isLoading, isRefetching, data?.contentTypes, entity.slug]);
 
-  if (!entity.hasDraftAndPublish || entity.isCreatingEntry) return null;
-  if (!document || !entity) return null;
+	// Only proceed for content types with Draft & Publish enabled,
+	// and not while creating a new entry
+	if (!entity.hasDraftAndPublish || entity.isCreatingEntry) {
+		return null;
+	}
 
-  const isEnabled =
-    !isLoading &&
-    !isRefetching &&
-    (
-      !data.contentTypes?.length ||
-      data.contentTypes?.includes(entity.slug)
-    );
+	// Wait until document and entity are loaded
+	if (!document || !entity) {
+		return null;
+	}
 
-  if (!isEnabled) return null;
+	// Only hide after settings have loaded and the type is not allowed
+	if (!isLoading && !isRefetching && !show) {
+		return null;
+	}
 
-  return {
-    title: "Publisher",
-    content: <ActionManagerComponent document={document} entity={entity} locale={currentLocale} />,
-  };
+	// Render the panel with both action buttons
+	return {
+		title: 'Publisher',
+		content: (
+			<>
+				{actionModes.map((mode) => (
+					<div key={mode} style={{ width: '100%'}}>
+						<Action
+							mode={mode}
+							documentId={document.documentId}
+							entitySlug={entity.model}
+							locale={currentLocale}
+						/>
+					</div>
+				))}
+			</>
+		),
+	};
 };
 
-export default ActionManager;
+export default ActionManager;