@strapi/admin 4.10.0-beta.0 → 4.10.0

package/.eslintignore

@@ -0,0 +1,4 @@
+node_modules/
+.eslintrc.js
+build/
+admin/src/plugins.js

package/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  overrides: [
+    {
+      files: ['admin/**/*', 'ee/admin/**/*'],
+      extends: ['custom/front'],
+    },
+    {
+      files: ['**/*'],
+      excludedFiles: ['admin/**/*', 'ee/admin/**/*'],
+      extends: ['custom/back'],
+    },
+  ],
+};

package/admin/src/components/LanguageProvider/index.js

@@ -35,7 +35,7 @@ const LanguageProvider = ({ children, localeNames, messages }) => {
 
   return (
     <IntlProvider locale={locale} defaultLocale="en" messages={appMessages} textComponent="span">
-      <LocalesProvider changeLocale={changeLocale} localeNames={localeNames} messages={appMessages}>
+      <LocalesProvider changeLocale={changeLocale} localeNames={localeNames}>
         {children}
       </LocalesProvider>
     </IntlProvider>

package/admin/src/components/LocalesProvider/__mocks__/useLocalesProvider.js

@@ -0,0 +1,7 @@
+export default function useLocalesProvider() {
+  return {
+    changeLocale() {},
+    localeNames: { en: 'English' },
+    messages: ['test'],
+  };
+}

package/admin/src/components/LocalesProvider/index.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LocalesProviderContext from './context';
 
-const LocalesProvider = ({ changeLocale, children, localeNames, messages }) => {
+const LocalesProvider = ({ changeLocale, children, localeNames }) => {
   return (
-    <LocalesProviderContext.Provider value={{ changeLocale, localeNames, messages }}>
+    <LocalesProviderContext.Provider value={{ changeLocale, localeNames }}>
       {children}
     </LocalesProviderContext.Provider>
   );
@@ -14,7 +14,6 @@ LocalesProvider.propTypes = {
   changeLocale: PropTypes.func.isRequired,
   children: PropTypes.element.isRequired,
   localeNames: PropTypes.object.isRequired,
-  messages: PropTypes.object.isRequired,
 };
 
 export default LocalesProvider;

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

@@ -222,6 +222,8 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
         trackUsageRef.current('didDeleteEntry', trackerProperty);
 
+        replace(redirectionLink);
+
         return Promise.resolve(data);
       } catch (err) {
         trackUsageRef.current('didNotDeleteEntry', { error: err, ...trackerProperty });
@@ -229,13 +231,9 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         return Promise.reject(err);
       }
     },
-    [id, slug, toggleNotification, del]
+    [id, slug, toggleNotification, del, redirectionLink, replace]
   );
 
-  const onDeleteSucceeded = useCallback(() => {
-    replace(redirectionLink);
-  }, [redirectionLink, replace]);
-
   const onPost = useCallback(
     async (body, trackerProperty) => {
       const endPoint = `${getRequestUrl(`collection-types/${slug}`)}${rawQuery}`;
@@ -409,7 +407,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     isCreatingEntry,
     isLoadingForData: isLoading,
     onDelete,
-    onDeleteSucceeded,
     onPost,
     onPublish,
     onDraftRelationCheck,

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

@@ -0,0 +1,2 @@
+// Overwritten in EE
+export default () => null;

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

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin';
 import { useSelector } from 'react-redux';
 
+import getReviewWorkflowsColumn from 'ee_else_ce/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/getTableColumn';
 import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';
 import { getTrad } from '../../utils';
@@ -11,7 +12,6 @@ import TableRows from './TableRows';
 import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll';
 import ConfirmDialogDelete from './ConfirmDialogDelete';
 import { PublicationState } from './CellContent/PublicationState/PublicationState';
-import { ReviewWorkflowsStage } from './CellContent/ReviewWorkflowsStage';
 
 const DynamicTable = ({
   canCreate,
@@ -27,7 +27,6 @@ const DynamicTable = ({
 }) => {
   const { runHookWaterfall } = useStrapiApp();
   const hasDraftAndPublish = layout.contentType.options?.draftAndPublish ?? false;
-  const hasReviewWorkflows = layout.contentType.options?.reviewWorkflows ?? false;
   const { formatMessage } = useIntl();
   const displayedHeaders = useSelector(selectDisplayedHeaders);
 
@@ -74,36 +73,19 @@ const DynamicTable = ({
       });
     }
 
-    if (hasReviewWorkflows) {
-      formattedHeaders.push({
-        key: '__strapi_reviewWorkflows_stage_temp_key__',
-        name: 'strapi_reviewWorkflows_stage',
-        fieldSchema: {
-          type: 'custom',
-        },
-        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} />;
-        },
-      });
+    // this should not exist. Ideally we would use registerHook() similar to what has been done
+    // in the i18n plugin. In order to do that review-workflows should have been a plugin. In
+    // a future iteration we need to find a better pattern.
+
+    // In CE this will return null - in EE a column definition including the custom formatting component.
+    const reviewWorkflowColumn = getReviewWorkflowsColumn(layout);
+
+    if (reviewWorkflowColumn) {
+      formattedHeaders.push(reviewWorkflowColumn);
     }
 
     return formattedHeaders;
-  }, [
-    runHookWaterfall,
-    displayedHeaders,
-    layout,
-    hasDraftAndPublish,
-    hasReviewWorkflows,
-    formatMessage,
-  ]);
+  }, [runHookWaterfall, displayedHeaders, layout, hasDraftAndPublish, formatMessage]);
 
   return (
     <Table

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -186,11 +186,15 @@ const reducer = (state, action) =>
         const newRelations = [...modifiedDataRelations];
 
         if (action.type === 'REORDER_RELATION') {
-          const [newKey] = generateNKeysBetween(
-            modifiedDataRelations[newIndex - 1]?.__temp_key__,
-            modifiedDataRelations[newIndex]?.__temp_key__,
-            1
-          );
+          const startKey =
+            oldIndex > newIndex
+              ? modifiedDataRelations[newIndex - 1]?.__temp_key__
+              : modifiedDataRelations[newIndex]?.__temp_key__;
+          const endKey =
+            oldIndex > newIndex
+              ? modifiedDataRelations[newIndex]?.__temp_key__
+              : modifiedDataRelations[newIndex + 1]?.__temp_key__;
+          const [newKey] = generateNKeysBetween(startKey, endKey, 1);
 
           newRelations.splice(oldIndex, 1);
           newRelations.splice(newIndex, 0, { ...currentItem, __temp_key__: newKey });
@@ -220,7 +224,9 @@ const reducer = (state, action) =>
 
         const findAllRelationsAndReplaceWithEmptyArray = findAllAndReplace(
           components,
-          (value) => value.type === 'relation',
+          (value) => {
+            return 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,7 +26,11 @@ 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 = [] } = {}) => {
+  const findAllAndReplace = (
+    data,
+    attributes,
+    { ignoreFalseyValues = false, path = [], parent = attributes } = {}
+  ) => {
     return Object.entries(attributes).reduce(
       (acc, [key, value]) => {
         if (
@@ -36,7 +40,7 @@ const findAllAndReplaceSetup = (components, predicate = () => false, replacement
           return acc;
         }
 
-        if (predicate(value, { path: [...path, key], parent: acc })) {
+        if (predicate(value, { path: [...path, key], parent })) {
           acc[key] =
             typeof replacement === 'function'
               ? replacement(acc[key], { path: [...path, key], parent: acc })
@@ -46,16 +50,18 @@ const findAllAndReplaceSetup = (components, predicate = () => false, replacement
         if (value.type === 'component') {
           const componentAttributes = components[value.component].attributes;
 
-          if (!value.repeatable) {
+          if (!value.repeatable && acc[key] && typeof acc[key] === 'object') {
             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;
@@ -67,6 +73,7 @@ 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,9 +1,5 @@
 import styled, { keyframes } from 'styled-components';
-import { Box, Flex, FieldAction } from '@strapi/design-system';
-
-export const EndActionWrapper = styled(Box)`
-  position: relative;
-`;
+import { Flex, FieldAction } from '@strapi/design-system';
 
 export const FieldActionWrapper = styled(FieldAction)`
   svg {
@@ -22,18 +18,13 @@ 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, notAvailable }) =>
-        !notAvailable ? theme.colors.success600 : theme.colors.danger600};
+      fill: ${({ theme, available }) =>
+        available ? 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 } from '@strapi/helper-plugin';
+import {
+  useCMEditViewDataManager,
+  useFetchClient,
+  useNotification,
+  useAPIErrorHandler,
+} from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import get from 'lodash/get';
-import { TextInput, Typography } from '@strapi/design-system';
+import { Flex, TextInput, Typography } from '@strapi/design-system';
 import { Refresh, CheckCircle, ExclamationMarkCircle, Loader } from '@strapi/icons';
+
 import { getRequestUrl } from '../../utils';
-import useDebounce from './useDebounce';
+import useDebounce from '../../../hooks/useDebounce';
 import UID_REGEX from './regex';
-import {
-  EndActionWrapper,
-  FieldActionWrapper,
-  TextValidation,
-  LoadingWrapper,
-} from './endActionStyle';
+import { FieldActionWrapper, TextValidation, LoadingWrapper } from './endActionStyle';
 
 const InputUID = ({
   attribute,
@@ -34,9 +34,11 @@ 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 = get(layout, ['options', 'timestamps', 0]);
+  const createdAtName = layout?.options?.timestamps ?? 0;
   const isCreation = !initialData[createdAtName];
   const debouncedTargetFieldValue = useDebounce(modifiedData[attribute.targetField], 300);
   const [isCustomized, setIsCustomized] = useState(false);
@@ -59,72 +61,74 @@ const InputUID = ({
 
   generateUid.current = async (shouldSetInitialValue = false) => {
     setIsLoading(true);
-    const requestURL = getRequestUrl('uid/generate');
+
     try {
       const {
         data: { data },
-      } = await post(requestURL, {
+      } = await post(getRequestUrl('uid/generate'), {
         contentTypeUID,
         field: name,
         data: modifiedData,
       });
+
       onChange({ target: { name, value: data, type: 'text' } }, shouldSetInitialValue);
       setIsLoading(false);
-    } catch (err) {
+    } catch (error) {
       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(requestURL, {
+      const { data } = await post(getRequestUrl('uid/check-availability'), {
         contentTypeUID,
         field: name,
         value: value ? value.trim() : '',
       });
 
-      setAvailability(data);
-
       setIsLoading(false);
-    } catch (err) {
+      setAvailability(data);
+    } catch (error) {
       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);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [attribute.required, generateUid, value]);
 
   useEffect(() => {
-    if (
-      debouncedValue &&
-      debouncedValue.trim().match(UID_REGEX) &&
-      debouncedValue !== initialValue
-    ) {
+    if (debouncedValue?.trim().match(UID_REGEX) && debouncedValue !== initialValue) {
       checkAvailability();
     }
+
     if (!debouncedValue) {
       setAvailability(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue, initialValue]);
+  }, [initialValue, debouncedValue]);
 
   useEffect(() => {
     let timer;
 
-    if (availability && availability.isAvailable) {
+    if (availability?.isAvailable) {
       timer = setTimeout(() => {
         setAvailability(null);
       }, 4000);
@@ -176,51 +180,70 @@ const InputUID = ({
       disabled={disabled}
       error={error}
       endAction={
-        <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',
-                })}
+        <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',
+                      }
+                )}
               </Typography>
             </TextValidation>
           )}
-          {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',
+
+          {!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',
                 })}
-              </Typography>
-            </TextValidation>
-          )}
-          {regenerateLabel && (
-            <TextValidation alignItems="center" justifyContent="flex-end">
-              <Typography textColor="primary600" variant="pi">
-                {regenerateLabel}
-              </Typography>
-            </TextValidation>
+                onMouseEnter={handleGenerateMouseEnter}
+                onMouseLeave={handleGenerateMouseLeave}
+              >
+                {isLoading ? (
+                  <LoadingWrapper data-testid="loading-wrapper">
+                    <Loader />
+                  </LoadingWrapper>
+                ) : (
+                  <Refresh />
+                )}
+              </FieldActionWrapper>
+            </>
           )}
-          <FieldActionWrapper
-            onClick={() => generateUid.current()}
-            label="regenerate"
-            onMouseEnter={handleGenerateMouseEnter}
-            onMouseLeave={handleGenerateMouseLeave}
-          >
-            {isLoading ? (
-              <LoadingWrapper>
-                <Loader />
-              </LoadingWrapper>
-            ) : (
-              <Refresh />
-            )}
-          </FieldActionWrapper>
-        </EndActionWrapper>
+        </Flex>
       }
       hint={hint}
       label={label}

package/admin/src/content-manager/components/RepeatableComponent/components/Component.js

@@ -97,11 +97,17 @@ const DraggedItem = ({
   const accordionRef = useRef(null);
   const { formatMessage } = useIntl();
 
-  const [parentFieldName] = componentFieldName.split('.');
+  /**
+   * The last item in the fieldName array will be the index of this component.
+   * Drag and drop should be isolated to the parent component so nested repeatable
+   * components are not affected by the drag and drop of the parent component in
+   * their own re-ordering context.
+   */
+  const componentKey = componentFieldName.split('.').slice(0, -1).join('.');
 
   const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =
     useDragAndDrop(!isReadOnly, {
-      type: `${ItemTypes.COMPONENT}_${parentFieldName}`,
+      type: `${ItemTypes.COMPONENT}_${componentKey}`,
       index,
       item: {
         displayedValue,

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

@@ -172,6 +172,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
         trackUsageRef.current('didDeleteEntry', trackerProperty);
 
+        setIsCreatingEntry(true);
+        dispatch(initForm(rawQuery, true));
+
         return Promise.resolve(data);
       } catch (err) {
         trackUsageRef.current('didNotDeleteEntry', { error: err, ...trackerProperty });
@@ -181,15 +184,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [del, slug, displayErrors, toggleNotification, searchToSend]
+    [del, slug, displayErrors, toggleNotification, searchToSend, dispatch, rawQuery]
   );
 
-  const onDeleteSucceeded = useCallback(() => {
-    setIsCreatingEntry(true);
-
-    dispatch(initForm(rawQuery, true));
-  }, [dispatch, rawQuery]);
-
   const onPost = useCallback(
     async (body, trackerProperty) => {
       const endPoint = getRequestUrl(`${slug}${rawQuery}`);
@@ -370,7 +367,6 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     isCreatingEntry,
     isLoadingForData: isLoading,
     onDelete,
-    onDeleteSucceeded,
     onPost,
     onDraftRelationCheck,
     onPublish,