@strapi/admin 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8 → 4.10.0-beta.0

package/admin/src/content-manager/components/DynamicTable/CellContent/PublicationState/PublicationState.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Status, Typography } from '@strapi/design-system';
+
+import { getTrad } from '../../../../utils';
+
+export function PublicationState({ isPublished }) {
+  const { formatMessage } = useIntl();
+  const variant = isPublished ? 'success' : 'secondary';
+
+  return (
+    <Status showBullet={false} variant={variant} size="S" width="min-content">
+      <Typography fontWeight="bold" textColor={`${variant}700`}>
+        {formatMessage({
+          id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
+          defaultMessage: isPublished ? 'Published' : 'Draft',
+        })}
+      </Typography>
+    </Status>
+  );
+}
+
+PublicationState.propTypes = {
+  isPublished: PropTypes.bool.isRequired,
+};

package/admin/src/content-manager/components/DynamicTable/CellContent/PublicationState/index.js

@@ -0,0 +1 @@
+export * from './PublicationState';

package/admin/src/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/ReviewWorkflowsStage.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@strapi/design-system';
+
+export function ReviewWorkflowsStage({ name }) {
+  return (
+    <Typography fontWeight="regular" textColor="neutral700">
+      {name}
+    </Typography>
+  );
+}
+
+ReviewWorkflowsStage.propTypes = {
+  name: PropTypes.string.isRequired,
+};

package/admin/src/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/index.js

@@ -0,0 +1 @@
+export * from './ReviewWorkflowsStage';

package/admin/src/content-manager/components/DynamicTable/index.js

@@ -3,9 +3,6 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin';
 import { useSelector } from 'react-redux';
-import styled from 'styled-components';
-
-import { Status, Typography } from '@strapi/design-system';
 
 import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';
@@ -13,10 +10,8 @@ import { getTrad } from '../../utils';
 import TableRows from './TableRows';
 import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll';
 import ConfirmDialogDelete from './ConfirmDialogDelete';
-
-const StyledStatus = styled(Status)`
-  width: min-content;
-`;
+import { PublicationState } from './CellContent/PublicationState/PublicationState';
+import { ReviewWorkflowsStage } from './CellContent/ReviewWorkflowsStage';
 
 const DynamicTable = ({
   canCreate,
@@ -31,7 +26,8 @@ const DynamicTable = ({
   rows,
 }) => {
   const { runHookWaterfall } = useStrapiApp();
-  const hasDraftAndPublish = layout.contentType.options.draftAndPublish || false;
+  const hasDraftAndPublish = layout.contentType.options?.draftAndPublish ?? false;
+  const hasReviewWorkflows = layout.contentType.options?.reviewWorkflows ?? false;
   const { formatMessage } = useIntl();
   const displayedHeaders = useSelector(selectDisplayedHeaders);
 
@@ -42,43 +38,23 @@ const DynamicTable = ({
     });
 
     const formattedHeaders = headers.displayedHeaders.map((header) => {
-      const { metadatas } = header;
-
-      if (header.fieldSchema.type === 'relation') {
-        const sortFieldValue = `${header.name}.${header.metadatas.mainField.name}`;
-
-        return {
-          ...header,
-          metadatas: {
-            ...metadatas,
-            label: formatMessage({
-              id: getTrad(`containers.ListPage.table-headers.${header.name}`),
-              defaultMessage: metadatas.label,
-            }),
-          },
-          name: sortFieldValue,
-        };
-      }
+      const { fieldSchema, metadatas, name } = header;
 
       return {
         ...header,
         metadatas: {
           ...metadatas,
           label: formatMessage({
-            id: getTrad(`containers.ListPage.table-headers.${header.name}`),
+            id: getTrad(`containers.ListPage.table-headers.${name}`),
             defaultMessage: metadatas.label,
           }),
         },
+        name: fieldSchema.type === 'relation' ? `${name}.${metadatas.mainField.name}` : name,
       };
     });
 
-    if (!hasDraftAndPublish) {
-      return formattedHeaders;
-    }
-
-    return [
-      ...formattedHeaders,
-      {
+    if (hasDraftAndPublish) {
+      formattedHeaders.push({
         key: '__published_at_temp_key__',
         name: 'publishedAt',
         fieldSchema: {
@@ -92,24 +68,42 @@ const DynamicTable = ({
           searchable: false,
           sortable: true,
         },
-        cellFormatter(cellData) {
-          const isPublished = cellData.publishedAt;
-          const variant = isPublished ? 'success' : 'secondary';
+        cellFormatter({ publishedAt }) {
+          return <PublicationState isPublished={!!publishedAt} />;
+        },
+      });
+    }
 
-          return (
-            <StyledStatus 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>
-            </StyledStatus>
-          );
+    if (hasReviewWorkflows) {
+      formattedHeaders.push({
+        key: '__strapi_reviewWorkflows_stage_temp_key__',
+        name: 'strapi_reviewWorkflows_stage',
+        fieldSchema: {
+          type: 'custom',
         },
-      },
-    ];
-  }, [runHookWaterfall, displayedHeaders, layout, hasDraftAndPublish, formatMessage]);
+        metadatas: {
+          label: formatMessage({
+            id: getTrad(`containers.ListPage.table-headers.reviewWorkflows.stage`),
+            defaultMessage: 'Review stage',
+          }),
+          searchable: false,
+          sortable: false,
+        },
+        cellFormatter({ strapi_reviewWorkflows_stage }) {
+          return <ReviewWorkflowsStage name={strapi_reviewWorkflows_stage.name} />;
+        },
+      });
+    }
+
+    return formattedHeaders;
+  }, [
+    runHookWaterfall,
+    displayedHeaders,
+    layout,
+    hasDraftAndPublish,
+    hasReviewWorkflows,
+    formatMessage,
+  ]);
 
   return (
     <Table

package/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js

@@ -41,6 +41,8 @@ const IconButtonCustom = styled(IconButton)`
   }
 `;
 
+// TODO: Delete once https://github.com/strapi/design-system/pull/858
+// is merged and released.
 const StyledBox = styled(Box)`
   > div:first-child {
     box-shadow: ${({ theme }) => theme.shadows.tableShadow};

package/admin/src/content-manager/components/DynamicZone/utils/select.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect(name) {

package/admin/src/content-manager/components/FieldComponent/utils/select.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { get, take } from 'lodash';
+import get from 'lodash/get';
+import take from 'lodash/take';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 import { getFieldName } from '../../../utils';

package/admin/src/content-manager/components/Inputs/utils/getInputType.js

@@ -1,4 +1,4 @@
-import { toLower } from 'lodash';
+import toLower from 'lodash/toLower';
 
 const getInputType = (type = '') => {
   switch (toLower(type)) {

package/admin/src/content-manager/components/Inputs/utils/select.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect(keys) {

package/admin/src/content-manager/hooks/useContentTypeLayout/index.js

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { get } from 'lodash';
 import { useSelector } from 'react-redux';
 import selectLayout from '../../pages/EditViewLayoutManager/selectors';
 
@@ -8,7 +7,7 @@ const useContentTypeLayout = () => {
 
   const getComponentLayout = useCallback(
     (componentUid) => {
-      return get(currentLayout, ['components', componentUid], {});
+      return currentLayout?.components?.[componentUid] ?? {};
     },
     [currentLayout]
   );

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -1,4 +1,7 @@
-import { cloneDeep, get, set } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import set from 'lodash/set';
+
 import { mergeMetasWithSchema } from '../../../utils';
 
 const getRelationModel = (targetModel, models) => models.find((model) => model.uid === targetModel);

package/admin/src/content-manager/pages/CollectionTypeRecursivePath/index.js

@@ -1,7 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
-import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import { LoadingIndicatorPage, CheckPagePermissions } from '@strapi/helper-plugin';
 import permissions from '../../../permissions';
@@ -43,7 +42,7 @@ const CollectionTypeRecursivePath = ({
     return { rawContentTypeLayout, rawComponentsLayouts };
   }, [layout]);
 
-  const uid = get(layout, ['contentType', 'uid'], null);
+  const uid = layout?.contentType?.uid ?? null;
 
   // This statement is needed in order to prevent the CollectionTypeFormWrapper effects clean up phase to be run twice.
   // What can happen is that when navigating from one entry to another the cleanup phase of the fetch data effect is run twice : once when

package/admin/src/content-manager/pages/EditSettingsView/init.js

@@ -1,4 +1,6 @@
-import { cloneDeep, set } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import set from 'lodash/set';
+
 import { createLayout, formatLayout } from './utils/layout';
 
 const init = (initialState, mainLayout, components) => {

package/admin/src/content-manager/pages/EditSettingsView/utils/createPossibleMainFieldsForModelsAndComponents.js

@@ -1,8 +1,6 @@
-import { get } from 'lodash';
-
 const createPossibleMainFieldsForModelsAndComponents = (array) => {
   return array.reduce((acc, current) => {
-    const attributes = get(current, ['attributes'], {});
+    const attributes = current?.attributes ?? {};
     const possibleMainFields = Object.keys(attributes).filter((attr) => {
       return ![
         'boolean',
@@ -14,7 +12,7 @@ const createPossibleMainFieldsForModelsAndComponents = (array) => {
         'relation',
         'text',
         'richtext',
-      ].includes(get(attributes, [attr, 'type'], ''));
+      ].includes(attributes?.[attr]?.type ?? '');
     });
 
     acc[current.uid] = possibleMainFields;

package/admin/src/content-manager/pages/EditView/DeleteLink/utils/select.js

@@ -1,4 +1,4 @@
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect() {

package/admin/src/content-manager/pages/EditView/Information/index.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import propTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { Box, Divider, Flex, Typography } from '@strapi/design-system';
@@ -8,23 +8,44 @@ import { getTrad } from '../../../utils';
 import getUnits from './utils/getUnits';
 import { getFullName } from '../../../../utils';
 
+const Title = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Flex direction="column" alignItems="stretch" gap={2}>
+      <Typography variant="sigma" textColor="neutral600" id="additional-information">
+        {formatMessage({
+          id: getTrad('containers.Edit.information'),
+          defaultMessage: 'Information',
+        })}
+      </Typography>
+
+      <Box>
+        <Divider />
+      </Box>
+    </Flex>
+  );
+};
+
 const KeyValuePair = ({ label, value }) => {
   return (
     <Flex justifyContent="space-between">
-      <Typography as="dt" fontWeight="bold" textColor="neutral600">
+      <Typography as="dt" fontWeight="bold" textColor="neutral800" variant="pi">
         {label}
       </Typography>
-      <Typography as="dd">{value}</Typography>
+      <Typography as="dd" variant="pi" textColor="neutral600">
+        {value}
+      </Typography>
     </Flex>
   );
 };
 
 KeyValuePair.propTypes = {
-  label: propTypes.string.isRequired,
-  value: propTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
 };
 
-const Information = () => {
+const Body = () => {
   const { formatMessage, formatRelativeTime } = useIntl();
   const { initialData, isCreatingEntry } = useCMEditViewDataManager();
   const currentTime = useRef(Date.now());
@@ -49,57 +70,60 @@ const Information = () => {
   const created = getFieldInfo('createdAt', 'createdBy');
 
   return (
-    <Flex direction="column" alignItems="stretch" gap={2}>
-      <Typography variant="sigma" textColor="neutral600" id="additional-information">
-        {formatMessage({
-          id: getTrad('containers.Edit.information'),
-          defaultMessage: 'Information',
-        })}
-      </Typography>
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      <Flex direction="column" alignItems="stretch" gap={2} as="dl">
+        <KeyValuePair
+          label={formatMessage({
+            id: getTrad('containers.Edit.information.created'),
+            defaultMessage: 'Created',
+          })}
+          value={created.at}
+        />
 
-      <Box paddingBottom={4}>
-        <Divider />
-      </Box>
+        <KeyValuePair
+          label={formatMessage({
+            id: getTrad('containers.Edit.information.by'),
+            defaultMessage: 'By',
+          })}
+          value={created.by}
+        />
+      </Flex>
 
-      <Flex direction="column" alignItems="stretch" gap={4}>
-        <Flex direction="column" alignItems="stretch" gap={2} as="dl">
-          <KeyValuePair
-            label={formatMessage({
-              id: getTrad('containers.Edit.information.created'),
-              defaultMessage: 'Created',
-            })}
-            value={created.at}
-          />
-
-          <KeyValuePair
-            label={formatMessage({
-              id: getTrad('containers.Edit.information.by'),
-              defaultMessage: 'By',
-            })}
-            value={created.by}
-          />
-        </Flex>
-
-        <Flex direction="column" alignItems="stretch" gap={2} as="dl">
-          <KeyValuePair
-            label={formatMessage({
-              id: getTrad('containers.Edit.information.lastUpdate'),
-              defaultMessage: 'Last update',
-            })}
-            value={updated.at}
-          />
-
-          <KeyValuePair
-            label={formatMessage({
-              id: getTrad('containers.Edit.information.by'),
-              defaultMessage: 'By',
-            })}
-            value={updated.by}
-          />
-        </Flex>
+      <Flex direction="column" alignItems="stretch" gap={2} as="dl">
+        <KeyValuePair
+          label={formatMessage({
+            id: getTrad('containers.Edit.information.lastUpdate'),
+            defaultMessage: 'Last update',
+          })}
+          value={updated.at}
+        />
+
+        <KeyValuePair
+          label={formatMessage({
+            id: getTrad('containers.Edit.information.by'),
+            defaultMessage: 'By',
+          })}
+          value={updated.by}
+        />
       </Flex>
     </Flex>
   );
 };
 
-export default Information;
+const Root = ({ children }) => {
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      {children}
+    </Flex>
+  );
+};
+
+Root.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export default {
+  Root,
+  Title,
+  Body,
+};

package/admin/src/content-manager/pages/EditView/InformationBox/InformationBoxCE.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import Information from '../Information';
+
+// This component is overwritten by the EE counterpart
+export function InformationBoxCE() {
+  return (
+    <Information.Root>
+      <Information.Title />
+      <Information.Body />
+    </Information.Root>
+  );
+}

package/admin/src/content-manager/pages/EditView/InformationBox/index.js

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

package/admin/src/content-manager/pages/EditView/index.js

@@ -8,19 +8,18 @@ import {
   LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { ContentLayout, Box, Grid, GridItem, Main, Flex } from '@strapi/design-system';
+import { ContentLayout, Box, Flex, Grid, GridItem, Main } from '@strapi/design-system';
 import { Pencil, Layer } from '@strapi/icons';
+import InformationBox from 'ee_else_ce/content-manager/pages/EditView/InformationBox';
 import { InjectionZone } from '../../../shared/components';
 import permissions from '../../../permissions';
 import DynamicZone from '../../components/DynamicZone';
-
 import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
 import EditViewDataManagerProvider from '../../components/EditViewDataManagerProvider';
 import SingleTypeFormWrapper from '../../components/SingleTypeFormWrapper';
 import { getTrad } from '../../utils';
 import useLazyComponents from '../../hooks/useLazyComponents';
 import DraftAndPublishBadge from './DraftAndPublishBadge';
-import Information from './Information';
 import Header from './Header';
 import { getFieldsActionMatchingPermissions } from './utils';
 import DeleteLink from './DeleteLink';
@@ -180,7 +179,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                         paddingTop={6}
                         shadow="tableShadow"
                       >
-                        <Information />
+                        <InformationBox />
                         <InjectionZone area="contentManager.editView.informations" />
                       </Box>
                       <Box as="aside" aria-labelledby="links">

package/admin/src/content-manager/pages/EditView/utils/createAttributesLayout.js

@@ -1,4 +1,5 @@
-import { get, isEmpty } from 'lodash';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 
 const createAttributesLayout = (currentContentTypeLayoutData) => {
   if (!currentContentTypeLayoutData.layouts) {

package/admin/src/content-manager/pages/EditView/utils/getFieldsActionMatchingPermissions.js

@@ -1,4 +1,5 @@
-import { uniq, flatMap } from 'lodash';
+import uniq from 'lodash/uniq';
+import flatMap from 'lodash/flatMap';
 import { findMatchingPermissions } from '@strapi/helper-plugin';
 
 const getFieldsActionMatchingPermissions = (userPermissions, slug) => {

package/admin/src/content-manager/pages/ListView/index.js

@@ -6,7 +6,6 @@ import isEqual from 'react-fast-compare';
 import { bindActionCreators, compose } from 'redux';
 import { useIntl } from 'react-intl';
 import { useHistory, useLocation, Link as ReactRouterLink } from 'react-router-dom';
-import get from 'lodash/get';
 import { stringify } from 'qs';
 import axios from 'axios';
 
@@ -74,12 +73,11 @@ function ListView({
   slug,
 }) {
   const { total } = pagination;
+  const { contentType } = layout;
   const {
-    contentType: {
-      metadatas,
-      settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
-    },
-  } = layout;
+    metadatas,
+    settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
+  } = contentType;
 
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
@@ -98,8 +96,7 @@ function ListView({
   const { pathname } = useLocation();
   const { push } = useHistory();
   const { formatMessage } = useIntl();
-  const contentType = layout.contentType;
-  const hasDraftAndPublish = get(contentType, 'options.draftAndPublish', false);
+  const hasDraftAndPublish = contentType.options?.draftAndPublish ?? false;
   const fetchClient = useFetchClient();
   const { post, del } = fetchClient;
 
@@ -137,7 +134,7 @@ function ListView({
           return;
         }
 
-        const resStatus = get(err, 'response.status', null);
+        const resStatus = err?.response?.status ?? null;
 
         if (resStatus === 403) {
           await fetchPermissionsRef.current();

package/admin/src/content-manager/utils/checkIfAttributeIsDisplayable.js

@@ -1,4 +1,4 @@
-import { toLower } from 'lodash';
+import toLower from 'lodash/toLower';
 
 const checkIfAttributeIsDisplayable = (attribute) => {
   const type = attribute.type;

package/admin/src/content-manager/utils/createDefaultForm.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import get from 'lodash/get';
 
 const createDefaultForm = (attributes, allComponentsSchema) => {
   return Object.keys(attributes).reduce((acc, current) => {
@@ -10,7 +10,7 @@ const createDefaultForm = (attributes, allComponentsSchema) => {
     }
 
     if (type === 'component') {
-      const currentComponentSchema = get(allComponentsSchema, [component, 'attributes'], {});
+      const currentComponentSchema = allComponentsSchema?.[component]?.attributes ?? {};
       const currentComponentDefaultForm = createDefaultForm(
         currentComponentSchema,
         allComponentsSchema

package/admin/src/content-manager/utils/formatLayoutToApi.js

@@ -1,4 +1,5 @@
-import { omit, get } from 'lodash';
+import get from 'lodash/get';
+import omit from 'lodash/omit';
 
 const formatLayoutToApi = ({ layouts, metadatas, ...rest }) => {
   const list = layouts.list.map((obj) => {

package/admin/src/content-manager/utils/getFieldName.js

@@ -1,4 +1,4 @@
-import { isNaN } from 'lodash';
+import isNaN from 'lodash/isNaN';
 
 const getFieldName = (stringName) =>
   stringName.split('.').filter((string) => isNaN(parseInt(string, 10)));

package/admin/src/content-manager/utils/mergeMetasWithSchema.js

@@ -1,4 +1,4 @@
-import { set } from 'lodash';
+import set from 'lodash/set';
 
 const mergeMetasWithSchema = (data, schemas, mainSchemaKey) => {
   const findSchema = (refUid) => schemas.find((obj) => obj.uid === refUid);

package/admin/src/content-manager/utils/paths.js

@@ -1,7 +1,7 @@
 /**
  * This file is for all helpers related to `paths` in the CM.
  */
-import { get } from 'lodash';
+import get from 'lodash/get';
 
 /**
  * This is typically used in circumstances where there are re-orderable pieces e.g. Dynamic Zones

package/admin/src/content-manager/utils/removePasswordFieldsFromData.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { getType, getOtherInfos } from '@strapi/helper-plugin';
 
 const removePasswordFieldsFromData = (data, contentTypeSchema, componentSchema) => {