@strapi/admin 4.9.0 → 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/EditViewDataManagerProvider/reducer.js

@@ -220,9 +220,7 @@ const reducer = (state, action) =>
 
         const findAllRelationsAndReplaceWithEmptyArray = findAllAndReplace(
           components,
-          (value) => {
-            return value.type === 'relation';
-          },
+          (value) => value.type === 'relation',
           (_, { path }) => {
             if (state.modifiedData?.id === data.id && get(state.modifiedData, path)) {
               return get(state.modifiedData, path);

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/findAllAndReplace.js

@@ -26,11 +26,7 @@ const findAllAndReplaceSetup = (components, predicate = () => false, replacement
   /**
    * @type {<TData extends object = object>(data: TData, attributes: Attributes, options?: { ignoreFalseyValues?: boolean}) => TData}
    */
-  const findAllAndReplace = (
-    data,
-    attributes,
-    { ignoreFalseyValues = false, path = [], parent = attributes } = {}
-  ) => {
+  const findAllAndReplace = (data, attributes, { ignoreFalseyValues = false, path = [] } = {}) => {
     return Object.entries(attributes).reduce(
       (acc, [key, value]) => {
         if (
@@ -40,7 +36,7 @@ const findAllAndReplaceSetup = (components, predicate = () => false, replacement
           return acc;
         }
 
-        if (predicate(value, { path: [...path, key], parent })) {
+        if (predicate(value, { path: [...path, key], parent: acc })) {
           acc[key] =
             typeof replacement === 'function'
               ? replacement(acc[key], { path: [...path, key], parent: acc })
@@ -50,18 +46,16 @@ const findAllAndReplaceSetup = (components, predicate = () => false, replacement
         if (value.type === 'component') {
           const componentAttributes = components[value.component].attributes;
 
-          if (!value.repeatable && acc[key] && typeof acc[key] === 'object') {
+          if (!value.repeatable) {
             acc[key] = findAllAndReplace(acc[key], componentAttributes, {
               ignoreFalseyValues,
               path: [...path, key],
-              parent: attributes[key],
             });
           } else if (value.repeatable && Array.isArray(acc[key])) {
             acc[key] = acc[key].map((datum, index) => {
               const data = findAllAndReplace(datum, componentAttributes, {
                 ignoreFalseyValues,
                 path: [...path, key, index],
-                parent: attributes[key],
               });
 
               return data;
@@ -73,7 +67,6 @@ const findAllAndReplaceSetup = (components, predicate = () => false, replacement
             const data = findAllAndReplace(datum, componentAttributes, {
               ignoreFalseyValues,
               path: [...path, key, index],
-              parent: attributes[key],
             });
 
             return data;

package/admin/src/content-manager/components/InputUID/endActionStyle.js

@@ -1,5 +1,9 @@
 import styled, { keyframes } from 'styled-components';
-import { Flex, FieldAction } from '@strapi/design-system';
+import { Box, Flex, FieldAction } from '@strapi/design-system';
+
+export const EndActionWrapper = styled(Box)`
+  position: relative;
+`;
 
 export const FieldActionWrapper = styled(FieldAction)`
   svg {
@@ -18,13 +22,18 @@ export const FieldActionWrapper = styled(FieldAction)`
 `;
 
 export const TextValidation = styled(Flex)`
+  position: absolute;
+  right: ${({ theme }) => theme.spaces[6]};
+  width: 100px;
+  pointer-events: none;
+
   svg {
+    margin-right: ${({ theme }) => theme.spaces[1]};
     height: ${12 / 16}rem;
     width: ${12 / 16}rem;
-
     path {
-      fill: ${({ theme, available }) =>
-        available ? theme.colors.success600 : theme.colors.danger600};
+      fill: ${({ theme, notAvailable }) =>
+        !notAvailable ? theme.colors.success600 : theme.colors.danger600};
     }
   }
 `;

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

@@ -1,19 +1,19 @@
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import {
-  useCMEditViewDataManager,
-  useFetchClient,
-  useNotification,
-  useAPIErrorHandler,
-} from '@strapi/helper-plugin';
+import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { Flex, TextInput, Typography } from '@strapi/design-system';
+import get from 'lodash/get';
+import { TextInput, Typography } from '@strapi/design-system';
 import { Refresh, CheckCircle, ExclamationMarkCircle, Loader } from '@strapi/icons';
-
 import { getRequestUrl } from '../../utils';
 import useDebounce from './useDebounce';
 import UID_REGEX from './regex';
-import { FieldActionWrapper, TextValidation, LoadingWrapper } from './endActionStyle';
+import {
+  EndActionWrapper,
+  FieldActionWrapper,
+  TextValidation,
+  LoadingWrapper,
+} from './endActionStyle';
 
 const InputUID = ({
   attribute,
@@ -34,11 +34,9 @@ const InputUID = ({
   const [availability, setAvailability] = useState(null);
   const debouncedValue = useDebounce(value, 300);
   const generateUid = useRef();
-  const toggleNotification = useNotification();
-  const { formatAPIError } = useAPIErrorHandler();
   const initialValue = initialData[name];
   const { formatMessage } = useIntl();
-  const createdAtName = layout?.options?.timestamps ?? 0;
+  const createdAtName = get(layout, ['options', 'timestamps', 0]);
   const isCreation = !initialData[createdAtName];
   const debouncedTargetFieldValue = useDebounce(modifiedData[attribute.targetField], 300);
   const [isCustomized, setIsCustomized] = useState(false);
@@ -61,74 +59,72 @@ const InputUID = ({
 
   generateUid.current = async (shouldSetInitialValue = false) => {
     setIsLoading(true);
-
+    const requestURL = getRequestUrl('uid/generate');
     try {
       const {
         data: { data },
-      } = await post(getRequestUrl('uid/generate'), {
+      } = await post(requestURL, {
         contentTypeUID,
         field: name,
         data: modifiedData,
       });
-
       onChange({ target: { name, value: data, type: 'text' } }, shouldSetInitialValue);
       setIsLoading(false);
-    } catch (error) {
+    } catch (err) {
       setIsLoading(false);
-      toggleNotification({
-        type: 'warning',
-        message: formatAPIError(error),
-      });
     }
   };
 
   const checkAvailability = async () => {
+    setIsLoading(true);
+
+    const requestURL = getRequestUrl('uid/check-availability');
+
     if (!value) {
       return;
     }
 
-    setIsLoading(true);
-
     try {
-      const { data } = await post(getRequestUrl('uid/check-availability'), {
+      const { data } = await post(requestURL, {
         contentTypeUID,
         field: name,
         value: value ? value.trim() : '',
       });
 
-      setIsLoading(false);
       setAvailability(data);
-    } catch (error) {
+
+      setIsLoading(false);
+    } catch (err) {
       setIsLoading(false);
-      toggleNotification({
-        type: 'warning',
-        message: formatAPIError(error),
-      });
     }
   };
 
-  // FIXME: we need to find a better way to autofill the input when it is required.
+  // // FIXME: we need to find a better way to autofill the input when it is required.
   useEffect(() => {
     if (!value && attribute.required) {
       generateUid.current(true);
     }
-  }, [attribute.required, generateUid, value]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
-    if (debouncedValue?.trim().match(UID_REGEX) && debouncedValue !== initialValue) {
+    if (
+      debouncedValue &&
+      debouncedValue.trim().match(UID_REGEX) &&
+      debouncedValue !== initialValue
+    ) {
       checkAvailability();
     }
-
     if (!debouncedValue) {
       setAvailability(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialValue, debouncedValue]);
+  }, [debouncedValue, initialValue]);
 
   useEffect(() => {
     let timer;
 
-    if (availability?.isAvailable) {
+    if (availability && availability.isAvailable) {
       timer = setTimeout(() => {
         setAvailability(null);
       }, 4000);
@@ -180,70 +176,51 @@ const InputUID = ({
       disabled={disabled}
       error={error}
       endAction={
-        <Flex position="relative" gap={1}>
-          {availability && !regenerateLabel && (
-            <TextValidation
-              alignItems="center"
-              gap={1}
-              justifyContent="flex-end"
-              available={!!availability?.isAvailable}
-              data-not-here-outer
-              position="absolute"
-              pointerEvents="none"
-              right={6}
-              width="100px"
-            >
-              {availability?.isAvailable ? <CheckCircle /> : <ExclamationMarkCircle />}
-
-              <Typography
-                textColor={availability.isAvailable ? 'success600' : 'danger600'}
-                variant="pi"
-              >
-                {formatMessage(
-                  availability.isAvailable
-                    ? {
-                        id: 'content-manager.components.uid.available',
-                        defaultMessage: 'Available',
-                      }
-                    : {
-                        id: 'content-manager.components.uid.unavailable',
-                        defaultMessage: 'Unavailable',
-                      }
-                )}
+        <EndActionWrapper>
+          {availability && availability.isAvailable && !regenerateLabel && (
+            <TextValidation alignItems="center" justifyContent="flex-end">
+              <CheckCircle />
+              <Typography textColor="success600" variant="pi">
+                {formatMessage({
+                  id: 'content-manager.components.uid.available',
+                  defaultMessage: 'Available',
+                })}
               </Typography>
             </TextValidation>
           )}
-
-          {!disabled && (
-            <>
-              {regenerateLabel && (
-                <TextValidation alignItems="center" justifyContent="flex-end" gap={1}>
-                  <Typography textColor="primary600" variant="pi">
-                    {regenerateLabel}
-                  </Typography>
-                </TextValidation>
-              )}
-
-              <FieldActionWrapper
-                onClick={() => generateUid.current()}
-                label={formatMessage({
-                  id: 'content-manager.components.uid.regenerate',
-                  defaultMessage: 'Regenerate',
+          {availability && !availability.isAvailable && !regenerateLabel && (
+            <TextValidation notAvailable alignItems="center" justifyContent="flex-end">
+              <ExclamationMarkCircle />
+              <Typography textColor="danger600" variant="pi">
+                {formatMessage({
+                  id: 'content-manager.components.uid.unavailable',
+                  defaultMessage: 'Unavailable',
                 })}
-                onMouseEnter={handleGenerateMouseEnter}
-                onMouseLeave={handleGenerateMouseLeave}
-              >
-                {isLoading ? (
-                  <LoadingWrapper data-testid="loading-wrapper">
-                    <Loader />
-                  </LoadingWrapper>
-                ) : (
-                  <Refresh />
-                )}
-              </FieldActionWrapper>
-            </>
+              </Typography>
+            </TextValidation>
+          )}
+          {regenerateLabel && (
+            <TextValidation alignItems="center" justifyContent="flex-end">
+              <Typography textColor="primary600" variant="pi">
+                {regenerateLabel}
+              </Typography>
+            </TextValidation>
           )}
-        </Flex>
+          <FieldActionWrapper
+            onClick={() => generateUid.current()}
+            label="regenerate"
+            onMouseEnter={handleGenerateMouseEnter}
+            onMouseLeave={handleGenerateMouseLeave}
+          >
+            {isLoading ? (
+              <LoadingWrapper>
+                <Loader />
+              </LoadingWrapper>
+            ) : (
+              <Refresh />
+            )}
+          </FieldActionWrapper>
+        </EndActionWrapper>
       }
       hint={hint}
       label={label}