@strapi/admin 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8 → 4.9.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/LocalesProvider/__mocks__/useLocalesProvider.js

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

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/EditViewDataManagerProvider/reducer.js

@@ -220,7 +220,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/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/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 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/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/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/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) => {

package/admin/src/hooks/useConfigurations/__mocks__/index.js

@@ -0,0 +1,7 @@
+export default function () {
+  return {
+    logos: {
+      auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+    },
+  };
+}

package/admin/src/hooks/useRegenerate/index.js

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import { get } from 'lodash';
-import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { useFetchClient, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
 
-const useRegenerate = (url, id, onRegenerate) => {
+const useRegenerate = (url, id, onRegenerate, onError) => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
   const { post } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
 
   const regenerateData = async () => {
     try {
@@ -18,10 +18,15 @@ const useRegenerate = (url, id, onRegenerate) => {
       onRegenerate(accessKey);
     } catch (error) {
       setIsLoadingConfirmation(false);
-      toggleNotification({
-        type: 'warning',
-        message: get(error, 'response.data.message', 'notification.error'),
-      });
+
+      if (onError) {
+        onError(error);
+      } else {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      }
     }
   };
 

package/admin/src/hooks/useSettingsForm/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useReducer } from 'react';
 import { request, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
-import { get, has, omit } from 'lodash';
+import omit from 'lodash/omit';
 import { checkFormValidity, formatAPIErrors } from '../../utils';
 import { initialState, reducer } from './reducer';
 import init from './init';
@@ -102,9 +102,9 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
           message: { id: 'notification.success.saved' },
         });
       } catch (err) {
-        const data = get(err, 'response.payload', { data: {} });
+        const data = err?.response?.payload ?? { data: {} };
 
-        if (has(data, 'data') && typeof data.data === 'string') {
+        if (!!data?.data && typeof data.data === 'string') {
           toggleNotification({
             type: 'warning',
             message: data.data,

package/admin/src/hooks/useSettingsForm/reducer.js

@@ -1,6 +1,8 @@
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import { pick, set, unset } from 'lodash';
+import pick from 'lodash/pick';
+import set from 'lodash/set';
+import unset from 'lodash/unset';
 
 const initialState = {
   fieldsToPick: [],

package/admin/src/hooks/useSettingsMenu/reducer.js

@@ -1,5 +1,5 @@
 import produce from 'immer';
-import { set } from 'lodash';
+import set from 'lodash/set';
 
 const initialState = {
   menu: [],