Chore: Remove cellFormatter callback and inline columns in list-view

Author: Gustav Hansen

packages/core/admin/admin/src/content-manager/pages/ListView/components/TableRows/index.js

@@ -1,22 +1,36 @@
 import React from 'react';
 
-import { BaseCheckbox, IconButton, Tbody, Td, Tr, Flex } from '@strapi/design-system';
+import {
+  BaseCheckbox,
+  IconButton,
+  Tbody,
+  Td,
+  Tr,
+  Flex,
+  lightTheme,
+  Status,
+  Typography,
+} from '@strapi/design-system';
 import { useTracking, useFetchClient, useAPIErrorHandler } from '@strapi/helper-plugin';
 import { Trash, Duplicate, Pencil } from '@strapi/icons';
 import { AxiosError } from 'axios';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
+import { useEnterprise } from '../../../../../hooks/useEnterprise';
 import { getFullName } from '../../../../../utils';
 import { usePluginsQueryParams } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import CellContent from '../CellContent';
 
+const REVIEW_WORKFLOW_COLUMNS_CE = () => null;
+
 export const TableRows = ({
   canCreate,
   canDelete,
   contentType,
+  features: { hasDraftAndPublish, hasReviewWorkflows },
   headers,
   entriesToDelete,
   onClickDelete,
@@ -33,6 +47,18 @@ export const TableRows = ({
   const { trackUsage } = useTracking();
   const pluginsQueryParams = usePluginsQueryParams();
   const { formatAPIError } = useAPIErrorHandler(getTrad);
+  const ReviewWorkflowsStage = useEnterprise(
+    REVIEW_WORKFLOW_COLUMNS_CE,
+    async () =>
+      (
+        await import(
+          '../../../../../../../ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn'
+        )
+      ).ReviewWorkflowsStageEE,
+    {
+      enabled: hasReviewWorkflows,
+    }
+  );
 
   /**
    *
@@ -74,6 +100,11 @@ export const TableRows = ({
     }
   };
 
+  // block rendering until the review stage component is fully loaded in EE
+  if (!ReviewWorkflowsStage) {
+    return null;
+  }
+
   /**
    * Table Cells with actions e.g edit, delete, duplicate have `stopPropagation`
    * to prevent the row from being selected.
@@ -113,20 +144,59 @@ export const TableRows = ({
                 />
               </Td>
             )}
+
             {headers.map(({ key, cellFormatter, name, ...rest }) => {
+              if (hasDraftAndPublish && name === 'publishedAt') {
+                return (
+                  <Td key={key}>
+                    <Status
+                      width="min-content"
+                      showBullet={false}
+                      variant={data.publishedAt ? 'success' : 'secondary'}
+                      size="S"
+                    >
+                      <Typography
+                        fontWeight="bold"
+                        textColor={`${data.publishedAt ? 'success' : 'secondary'}700`}
+                      >
+                        {formatMessage({
+                          id: getTrad(
+                            `containers.List.${data.publishedAt ? 'published' : 'draft'}`
+                          ),
+                          defaultMessage: data.publishedAt ? 'Published' : 'Draft',
+                        })}
+                      </Typography>
+                    </Status>
+                  </Td>
+                );
+              }
+
+              if (hasReviewWorkflows && name === 'strapi_reviewWorkflows_stage') {
+                return (
+                  <Td key={key}>
+                    {data.strapi_reviewWorkflows_stage ? (
+                      <ReviewWorkflowsStage
+                        color={
+                          data.strapi_reviewWorkflows_stage.color ?? lightTheme.colors.primary600
+                        }
+                        name={data.strapi_reviewWorkflows_stage.name}
+                      />
+                    ) : (
+                      <Typography textColor="neutral800">-</Typography>
+                    )}
+                  </Td>
+                );
+              }
+
               return (
                 <Td key={key}>
-                  {typeof cellFormatter === 'function' ? (
-                    cellFormatter(data, { key, name, ...rest })
-                  ) : (
-                    <CellContent
-                      content={data[name.split('.')[0]]}
-                      name={name}
-                      contentType={contentType}
-                      {...rest}
-                      rowId={data.id}
-                    />
-                  )}
+                  <CellContent
+                    content={data[name.split('.')[0]]}
+                    name={name}
+                    contentType={contentType}
+                    {...rest}
+                    rowId={data.id}
+                  />
                 </Td>
               );
             })}
@@ -212,6 +282,10 @@ TableRows.propTypes = {
     uid: PropTypes.string.isRequired,
   }).isRequired,
   entriesToDelete: PropTypes.array,
+  features: PropTypes.shape({
+    hasDraftAndPublish: PropTypes.bool.isRequired,
+    hasReviewWorkflows: PropTypes.bool.isRequired,
+  }).isRequired,
   headers: PropTypes.array.isRequired,
   onClickDelete: PropTypes.func,
   onSelectRow: PropTypes.func,

packages/core/admin/admin/src/content-manager/pages/ListView/index.js

@@ -10,8 +10,6 @@ import {
   HeaderLayout,
   useNotifyAT,
   Flex,
-  Typography,
-  Status,
 } from '@strapi/design-system';
 import {
   NoPermissions,
@@ -109,8 +107,11 @@ function ListView({
   const { pathname } = useLocation();
   const { push } = useHistory();
   const { formatMessage } = useIntl();
-  const hasDraftAndPublish = options?.draftAndPublish || false;
   const fetchClient = useFetchClient();
+
+  const hasDraftAndPublish = options?.draftAndPublish ?? false;
+  const hasReviewWorkflows = options?.reviewWorkflows ?? false;
+
   const reviewWorkflowColumns = useEnterprise(
     REVIEW_WORKFLOW_COLUMNS_CE,
     async () =>
@@ -418,27 +419,17 @@ function ListView({
           searchable: false,
           sortable: true,
         },
-        // eslint-disable-next-line react/no-unstable-nested-components
-        cellFormatter(cellData) {
-          const isPublished = cellData.publishedAt;
-          const variant = isPublished ? 'success' : 'secondary';
-
-          return (
-            <Status width="min-content" showBullet={false} variant={variant} size="S">
-              <Typography fontWeight="bold" textColor={`${variant}700`}>
-                {formatMessage({
-                  id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
-                  defaultMessage: isPublished ? 'Published' : 'Draft',
-                })}
-              </Typography>
-            </Status>
-          );
-        },
       });
     }
 
     if (reviewWorkflowColumns) {
-      reviewWorkflowColumns.metadatas.label = formatMessage(reviewWorkflowColumns.metadatas.label);
+      // Make sure the column header label is translated
+      if (typeof reviewWorkflowColumns.metadatas.label !== 'string') {
+        reviewWorkflowColumns.metadatas.label = formatMessage(
+          reviewWorkflowColumns.metadatas.label
+        );
+      }
+
       formattedHeaders.push(reviewWorkflowColumns);
     }
 
@@ -593,6 +584,10 @@ function ListView({
                 canCreate={canCreate}
                 canDelete={canDelete}
                 contentType={contentType}
+                features={{
+                  hasDraftAndPublish,
+                  hasReviewWorkflows,
+                }}
                 headers={tableHeaders}
                 rows={data}
                 withBulkActions

packages/core/admin/ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/constants.js

@@ -1,11 +1,4 @@
-import React from 'react';
-
-import { Typography } from '@strapi/design-system';
-
 import getTrad from '../../../../../../admin/src/content-manager/utils/getTrad';
-import { STAGE_COLOR_DEFAULT } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/constants';
-
-import ReviewWorkflowsStage from '.';
 
 export const REVIEW_WORKFLOW_COLUMNS_EE = {
   key: '__strapi_reviewWorkflows_stage_temp_key__',
@@ -28,15 +21,4 @@ export const REVIEW_WORKFLOW_COLUMNS_EE = {
       },
     },
   },
-  cellFormatter({ strapi_reviewWorkflows_stage }) {
-    // if entities are created e.g. through lifecycle methods
-    // they may not have a stage assigned
-    if (!strapi_reviewWorkflows_stage) {
-      return <Typography textColor="neutral800">-</Typography>;
-    }
-
-    const { color, name } = strapi_reviewWorkflows_stage;
-
-    return <ReviewWorkflowsStage color={color ?? STAGE_COLOR_DEFAULT} name={name} />;
-  },
 };

packages/core/admin/ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/index.js

@@ -1,3 +1 @@
-import { ReviewWorkflowsStageEE } from './ReviewWorkflowsStageEE';
-
-export default ReviewWorkflowsStageEE;
+export * from './ReviewWorkflowsStageEE';

packages/core/admin/ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/tests/ReviewWorkflowsStage.test.js

@@ -4,12 +4,12 @@ import { lightTheme, ThemeProvider } from '@strapi/design-system';
 import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 
-import ReviewWorkflowsStage from '..';
+import { ReviewWorkflowsStageEE } from '..';
 
 const ComponentFixture = (props) => (
   <ThemeProvider theme={lightTheme}>
     <IntlProvider locale="en" messages={{}}>
-      <ReviewWorkflowsStage {...props} />
+      <ReviewWorkflowsStageEE {...props} />
     </IntlProvider>
   </ThemeProvider>
 );