@strapi/admin 4.5.3 → 4.5.4

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

@@ -20,7 +20,7 @@ import {
   fetchUserRoles,
 } from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
-import { getFullName } from '../../utils';
+import { getFullName, hashAdminUserEmail } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 
@@ -31,6 +31,7 @@ const AuthenticatedApp = () => {
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
+  const [userId, setUserId] = useState(null);
   const { showReleaseNotification } = useConfigurations();
   const [
     { data: appInfos, status },
@@ -71,6 +72,15 @@ const AuthenticatedApp = () => {
     }
   }, [userRoles, appInfos]);
 
+  useEffect(() => {
+    const getUserId = async () => {
+      const userId = await hashAdminUserEmail(userInfo);
+      setUserId(userId);
+    };
+
+    getUserId();
+  }, [userInfo]);
+
   // We don't need to wait for the release query to be fetched before rendering the plugins
   // however, we need the appInfos and the permissions
   const shouldShowNotDependentQueriesLoader =
@@ -81,12 +91,13 @@ const AuthenticatedApp = () => {
   const appInfosValue = useMemo(() => {
     return {
       ...appInfos,
+      userId,
       latestStrapiReleaseTag: tag_name,
       setUserDisplayName,
       shouldUpdateStrapi,
       userDisplayName,
     };
-  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName]);
+  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName, userId]);
 
   if (shouldShowLoader) {
     return <LoadingIndicatorPage />;

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

@@ -111,7 +111,7 @@ const DynamicZoneComponent = ({
       <StyledBox hasRadius>
         <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
           <AccordionToggle
-            startIcon={<FontAwesomeIcon icon={icon} />}
+            startIcon={icon && <FontAwesomeIcon icon={icon} />}
             action={
               <Stack horizontal spacing={0} expanded={isOpen}>
                 {showDownIcon && (

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

@@ -8,7 +8,9 @@ import set from 'lodash/set';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Prompt, Redirect } from 'react-router-dom';
-import { Main } from '@strapi/design-system/Main';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Main } from '@strapi/design-system';
 import {
   LoadingIndicatorPage,
   ContentManagerEditViewDataManagerContext,
@@ -20,8 +22,13 @@ import {
 } from '@strapi/helper-plugin';
 
 import { getTrad, removeKeyInObject } from '../../utils';
+
+import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
+
 import reducer, { initialState } from './reducer';
 import { cleanData, createYupSchema, recursivelyFindPathsBasedOnCondition } from './utils';
+import { clearSetModifiedDataOnly } from '../../sharedReducers/crudReducer/actions';
+import { usePrev } from '../../hooks';
 
 const EditViewDataManagerProvider = ({
   allLayoutData,
@@ -61,6 +68,9 @@ const EditViewDataManagerProvider = ({
     publishConfirmation,
   } = reducerState;
 
+  const { setModifiedDataOnly } = useSelector(selectCrudReducer);
+  const reduxDispatch = useDispatch();
+
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
 
@@ -144,8 +154,18 @@ const EditViewDataManagerProvider = ({
 
   const { components } = allLayoutData;
 
+  const previousInitialValues = usePrev(initialValues);
+
   useEffect(() => {
-    if (initialValues && currentContentTypeLayout?.attributes) {
+    /**
+     * Only fire this effect if the initialValues are different
+     * otherwise it's a fruitless effort no matter what happens.
+     */
+    if (
+      initialValues &&
+      currentContentTypeLayout?.attributes &&
+      !isEqual(previousInitialValues, initialValues)
+    ) {
       /**
        * This will return an array of paths:
        * ['many_to_one', 'one_to_many', 'one_to_one']
@@ -179,9 +199,25 @@ const EditViewDataManagerProvider = ({
         componentPaths,
         repeatableComponentPaths,
         dynamicZonePaths,
+        setModifiedDataOnly,
       });
+
+      /**
+       * TODO: This should be moved to a side-effect e.g. thunks
+       * something to consider for V5
+       */
+      if (setModifiedDataOnly) {
+        reduxDispatch(clearSetModifiedDataOnly());
+      }
     }
-  }, [initialValues, currentContentTypeLayout, components]);
+  }, [
+    initialValues,
+    currentContentTypeLayout,
+    components,
+    setModifiedDataOnly,
+    reduxDispatch,
+    previousInitialValues,
+  ]);
 
   const dispatchAddComponent = useCallback(
     (type) =>

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

@@ -192,6 +192,7 @@ const reducer = (state, action) =>
           componentPaths = [],
           repeatableComponentPaths = [],
           dynamicZonePaths = [],
+          setModifiedDataOnly,
         } = action;
 
         /**
@@ -243,7 +244,10 @@ const reducer = (state, action) =>
             return acc;
           }, data);
 
-        draftState.initialData = mergeDataWithPreparedRelations;
+        if (!setModifiedDataOnly) {
+          draftState.initialData = mergeDataWithPreparedRelations;
+        }
+
         draftState.modifiedData = mergeDataWithPreparedRelations;
 
         draftState.formErrors = {};

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

@@ -55,8 +55,15 @@ const recursivelyFindPathsBasedOnConditionSetup = (components, predicate = () =>
                *
                * NOTE: we don't need to know the path to the `array` because it's about data shape not about the actual data
                */
-            }).map((path) => path.split(`${componentName}.`)[1]);
+            }).map((path) => {
+              return path.split(`${componentName}.`)[1];
+            });
           })
+          /**
+           * We filter because this will give you `dynamiczone.undefined` because the dynamic_zone component
+           * is not required to be returned in this circumstance.
+           */
+          .filter((path) => Boolean(path))
           .map((path) => `${key}.${path}`);
 
         acc = [...acc, attributesInDynamicComponents];

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

@@ -9,6 +9,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import { useContentTypeLayout } from '../../hooks';
 import FieldComponent from '../FieldComponent';
 import Inputs from '../Inputs';
+import useLazyComponents from '../../hooks/useLazyComponents';
 
 const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, name }) => {
   const { getComponentLayout } = useContentTypeLayout();
@@ -18,6 +19,8 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
   );
   const fields = componentLayoutData.layouts.edit;
 
+  const { lazyComponentStore } = useLazyComponents();
+
   return (
     <Box
       background={isFromDynamicZone ? '' : 'neutral100'}
@@ -67,6 +70,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
                       metadatas={metadatas}
                       queryInfos={queryInfos}
                       size={size}
+                      customFieldInputs={lazyComponentStore}
                     />
                   </GridItem>
                 );

package/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -24,18 +24,13 @@ import { RELATION_ITEM_HEIGHT } from './constants';
 import { usePrev } from '../../hooks';
 
 const LinkEllipsis = styled(Link)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inherit;
-`;
+  display: block;
 
-const BoxEllipsis = styled(Box)`
   > span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inherit;
+    display: block;
   }
 `;
 
@@ -322,7 +317,7 @@ const RelationInput = ({
                   }
                   style={style}
                 >
-                  <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+                  <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
                     <Tooltip description={mainField ?? `${id}`}>
                       {href ? (
                         <LinkEllipsis to={href} disabled={disabled}>
@@ -334,7 +329,7 @@ const RelationInput = ({
                         </Typography>
                       )}
                     </Tooltip>
-                  </BoxEllipsis>
+                  </Box>
 
                   {publicationState && (
                     <Status variant={statusColor} showBullet={false} size="S">

package/admin/src/content-manager/components/RelationInputDataManager/RelationInputDataManager.js

@@ -40,7 +40,7 @@ export const RelationInputDataManager = ({
   const { connectRelation, disconnectRelation, loadRelation, modifiedData, slug, initialData } =
     useCMEditViewDataManager();
 
-  const relationsFromModifiedData = get(modifiedData, name) ?? [];
+  const relationsFromModifiedData = get(modifiedData, name, []);
 
   const currentLastPage = Math.ceil(get(initialData, name, []).length / RELATIONS_TO_DISPLAY);
 

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -21,6 +21,7 @@ import Preview from './Preview';
 import DraggingSibling from './DraggingSibling';
 import { CustomIconButton } from './IconButtonCustoms';
 import { connect, select } from './utils';
+import useLazyComponents from '../../../hooks/useLazyComponents';
 
 const DragButton = styled.span`
   display: flex;
@@ -177,6 +178,8 @@ const DraggedItem = ({
   const accordionTitle = toString(displayedValue);
   const accordionHasError = hasErrors ? 'error' : undefined;
 
+  const { lazyComponentStore } = useLazyComponents();
+
   return (
     <Box ref={refs ? refs.dropRef : null}>
       {isDragging && <Preview />}
@@ -273,6 +276,7 @@ const DraggedItem = ({
                             // onBlur={hasErrors ? checkFormErrors : null}
                             queryInfos={queryInfos}
                             size={size}
+                            customFieldInputs={lazyComponentStore}
                           />
                         </GridItem>
                       );

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

@@ -103,7 +103,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       setIsCreatingEntry(true);
 
       try {
-        const { data } = await axiosInstance(getRequestUrl(`${slug}${searchToSend}`), {
+        const { data } = await axiosInstance.get(getRequestUrl(`${slug}${searchToSend}`), {
           cancelToken: source.token,
         });
 

package/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -43,7 +43,7 @@ const Editor = ({
   }, [editorRef, textareaRef, name, placeholder]);
 
   useEffect(() => {
-    if (value && !editorRef.current.state.focused) {
+    if (value && !editorRef.current.hasFocus()) {
       editorRef.current.setValue(value);
     }
   }, [editorRef, value]);

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

@@ -1,44 +1,69 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useCustomFields } from '@strapi/helper-plugin';
 
+const componentStore = new Map();
+
 /**
  * @description
  * A hook to lazy load custom field components
  * @param {Array.<string>} componentUids - The uids to look up components
  * @returns object
  */
-const useLazyComponents = (componentUids) => {
-  const [lazyComponentStore, setLazyComponentStore] = useState({});
-  const [loading, setLoading] = useState(true);
+const useLazyComponents = (componentUids = []) => {
+  const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));
+  const [loading, setLoading] = useState(() => {
+    if (componentStore.size === 0 && componentUids.length > 0) {
+      return true;
+    }
+
+    return false;
+  });
   const customFieldsRegistry = useCustomFields();
 
   useEffect(() => {
+    const setStore = (store) => {
+      setLazyComponentStore(store);
+      setLoading(false);
+    };
+
     const lazyLoadComponents = async (uids, components) => {
       const modules = await Promise.all(components);
 
       uids.forEach((uid, index) => {
-        if (!Object.keys(lazyComponentStore).includes(uid)) {
-          setLazyComponentStore({ ...lazyComponentStore, [uid]: modules[index].default });
-        }
+        componentStore.set(uid, modules[index].default);
       });
+
+      setStore(Object.fromEntries(componentStore));
     };
 
-    if (componentUids.length) {
-      const componentPromises = componentUids.map((uid) => {
+    if (componentUids.length && loading) {
+      /**
+       * These uids are not in the component store therefore we need to get the components
+       */
+      const newUids = componentUids.filter((uid) => !componentStore.get(uid));
+
+      const componentPromises = newUids.map((uid) => {
         const customField = customFieldsRegistry.get(uid);
 
         return customField.components.Input();
       });
 
-      lazyLoadComponents(componentUids, componentPromises);
+      if (componentPromises.length > 0) {
+        lazyLoadComponents(newUids, componentPromises);
+      }
     }
+  }, [componentUids, customFieldsRegistry, loading]);
 
-    if (componentUids.length === Object.keys(lazyComponentStore).length) {
-      setLoading(false);
-    }
-  }, [componentUids, customFieldsRegistry, loading, lazyComponentStore]);
+  /**
+   * Wrap this in a callback so it can be used in
+   * effects to cleanup the cached store if required
+   */
+  const cleanup = useCallback(() => {
+    componentStore.clear();
+    setLazyComponentStore({});
+  }, []);
 
-  return { isLazyLoading: loading, lazyComponentStore };
+  return { isLazyLoading: loading, lazyComponentStore, cleanup };
 };
 
 export default useLazyComponents;

package/admin/src/content-manager/sharedReducers/crudReducer/actions.js

@@ -6,6 +6,7 @@ import {
   SET_DATA_STRUCTURES,
   SET_STATUS,
   SUBMIT_SUCCEEDED,
+  CLEAR_SET_MODIFIED_DATA_ONLY,
 } from './constants';
 
 export const getData = () => {
@@ -42,3 +43,7 @@ export const submitSucceeded = (data) => ({
   type: SUBMIT_SUCCEEDED,
   data,
 });
+
+export const clearSetModifiedDataOnly = () => ({
+  type: CLEAR_SET_MODIFIED_DATA_ONLY,
+});

package/admin/src/content-manager/sharedReducers/crudReducer/constants.js

@@ -5,3 +5,5 @@ export const RESET_PROPS = 'ContentManager/CrudReducer/RESET_PROPS';
 export const SET_DATA_STRUCTURES = 'ContentManager/CrudReducer/SET_DATA_STRUCTURES';
 export const SET_STATUS = 'ContentManager/CrudReducer/SET_STATUS';
 export const SUBMIT_SUCCEEDED = 'ContentManager/CrudReducer/SUBMIT_SUCCEEDED';
+export const CLEAR_SET_MODIFIED_DATA_ONLY =
+  'ContentManager/CrudReducer/CLEAR_SET_MODIFIED_DATA_ONLY';

package/admin/src/content-manager/sharedReducers/crudReducer/reducer.js

@@ -8,6 +8,7 @@ import produce from 'immer';
 // to do any of this.
 
 import {
+  CLEAR_SET_MODIFIED_DATA_ONLY,
   GET_DATA,
   GET_DATA_SUCCEEDED,
   INIT_FORM,
@@ -23,6 +24,7 @@ const crudInitialState = {
   isLoading: true,
   data: null,
   status: 'resolved',
+  setModifiedDataOnly: false,
 };
 
 const crudReducer = (state = crudInitialState, action) =>
@@ -36,6 +38,7 @@ const crudReducer = (state = crudInitialState, action) =>
       case GET_DATA_SUCCEEDED: {
         draftState.isLoading = false;
         draftState.data = action.data;
+        draftState.setModifiedDataOnly = action.setModifiedDataOnly ?? false;
         break;
       }
       case INIT_FORM: {
@@ -66,6 +69,10 @@ const crudReducer = (state = crudInitialState, action) =>
         draftState.data = action.data;
         break;
       }
+      case CLEAR_SET_MODIFIED_DATA_ONLY: {
+        draftState.setModifiedDataOnly = false;
+        break;
+      }
       default:
         return draftState;
     }

package/admin/src/core/utils/axiosInstance.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { auth } from '@strapi/helper-plugin';
+import { auth, wrapAxiosInstance } from '@strapi/helper-plugin';
 
 const instance = axios.create({
   baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
@@ -33,4 +33,6 @@ instance.interceptors.response.use(
   }
 );
 
-export default instance;
+const wrapper = wrapAxiosInstance(instance);
+
+export default wrapper;

package/admin/src/hooks/index.js

@@ -10,3 +10,4 @@ export { default as usePermissionsDataManager } from './usePermissionsDataManage
 export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useThemeToggle } from './useThemeToggle';
 export { default as useRegenerate } from './useRegenerate';
+export { default as useFetchClient } from './useFetchClient';

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

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { getFetchClient } from '../../utils/getFetchClient';
+
+const useFetchClient = () => {
+  const controller = useRef(null);
+
+  if (controller.current === null) {
+    controller.current = new AbortController();
+  }
+  useEffect(() => {
+    return () => {
+      controller.current.abort();
+    };
+  }, []);
+
+  const defaultOptions = {
+    signal: controller.current.signal,
+  };
+
+  return getFetchClient(defaultOptions);
+};
+
+export default useFetchClient;

package/admin/src/pages/App/index.js

@@ -25,7 +25,7 @@ import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
 import { getUID } from './utils';
 import routes from './utils/routes';
-import { useConfigurations } from '../../hooks';
+import { useConfigurations, useFetchClient } from '../../hooks';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
@@ -35,8 +35,12 @@ function App() {
   const toggleNotification = useNotification();
   const { updateProjectSettings } = useConfigurations();
   const { formatMessage } = useIntl();
-  const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
+  const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
+    isLoading: true,
+    hasAdmin: false,
+  });
   const appInfo = useAppInfos();
+  const { get } = useFetchClient();
 
   const authRoutes = useMemo(() => {
     return makeUniqueRoutes(
@@ -80,27 +84,29 @@ function App() {
         } = await axios.get(`${strapi.backendURL}/admin/init`);
 
         updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
+        const deviceId = await getUID();
 
         if (uuid) {
           const {
             data: { data: properties },
-          } = await axios.get(`${strapi.backendURL}/admin/telemetry-properties`);
+          } = await get(`/admin/telemetry-properties`, {
+            // NOTE: needed because the interceptors of the fetchClient redirect to /login when receive a 401 and it would end up in an infinite loop when the user doesn't have a session.
+            validateStatus: (status) => status < 500,
+          });
 
           setTelemetryProperties(properties);
 
           try {
-            const deviceId = await getUID();
-
-            await fetch('https://analytics.strapi.io/track', {
+            await fetch('https://analytics.strapi.io/api/v2/track', {
               method: 'POST',
               body: JSON.stringify({
+                // This event is anonymous
                 event: 'didInitializeAdministration',
-                uuid,
+                userId: '',
                 deviceId,
-                properties: {
-                  ...properties,
-                  environment: appInfo.currentEnvironment,
-                },
+                eventPropeties: {},
+                userProperties: { environment: appInfo.currentEnvironment },
+                groupProperties: { ...properties, projectId: uuid },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -111,7 +117,7 @@ function App() {
           }
         }
 
-        setState({ isLoading: false, hasAdmin, uuid });
+        setState({ isLoading: false, hasAdmin, uuid, deviceId });
       } catch (err) {
         toggleNotification({
           type: 'warning',
@@ -130,8 +136,9 @@ function App() {
     () => ({
       uuid,
       telemetryProperties,
+      deviceId,
     }),
-    [uuid, telemetryProperties]
+    [uuid, telemetryProperties, deviceId]
   );
 
   if (isLoading) {

package/admin/src/pages/HomePage/SocialLinks.js

@@ -33,13 +33,13 @@ const StyledReddit = styled(Reddit)`
 `;
 const StyledStrapi = styled(Strapi)`
   > path:first-child {
-    fill: #8e75ff;
+    fill: #4945ff;
   }
   > path:nth-child(2) {
-    fill: #8e75ff;
+    fill: #fff;
   }
-  > path:nth-child(3) {
-    fill: #8e75ff;
+  > path:nth-child(4) {
+    fill: #9593ff;
   }
 `;
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -12,7 +12,6 @@ import {
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
 import { Formik } from 'formik';
-import { get } from 'lodash';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { formatAPIErrors } from '../../../../../utils';
@@ -205,12 +204,12 @@ const ApiTokenCreateView = () => {
       if (err?.response?.data?.error?.message === MSG_ERROR_NAME_TAKEN) {
         toggleNotification({
           type: 'warning',
-          message: get(err, 'response.data.message', 'notification.error.tokennamenotunique'),
+          message: err.response.data.message || 'notification.error.tokennamenotunique',
         });
       } else {
         toggleNotification({
           type: 'warning',
-          message: get(err, 'response.data.message', 'notification.error'),
+          message: err?.response?.data?.message || 'notification.error',
         });
       }
       unlockApp();

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -34,27 +34,32 @@ const ModalForm = ({ queryName, onToggle }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
-  const postMutation = useMutation((body) => axiosInstance.post('/admin/users', body), {
-    async onSuccess({ data }) {
-      setRegistrationToken(data.data.registrationToken);
-      await queryClient.invalidateQueries(queryName);
-      goNext();
-      setIsSubmitting(false);
+  const postMutation = useMutation(
+    (body) => {
+      return axiosInstance.post('/admin/users', body);
     },
-    onError(err) {
-      setIsSubmitting(false);
+    {
+      async onSuccess({ data }) {
+        setRegistrationToken(data.data.registrationToken);
+        await queryClient.invalidateQueries(queryName);
+        goNext();
+        setIsSubmitting(false);
+      },
+      onError(err) {
+        setIsSubmitting(false);
 
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error', defaultMessage: 'An error occured' },
+        });
 
-      throw err;
-    },
-    onSettled() {
-      unlockApp();
-    },
-  });
+        throw err;
+      },
+      onSettled() {
+        unlockApp();
+      },
+    }
+  );
 
   const headerTitle = formatMessage({
     id: 'Settings.permissions.users.create',