@strapi/admin 4.5.4 → 4.6.0-alpha.1

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

@@ -20,7 +20,7 @@ import {
   fetchUserRoles,
 } from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
-import { getFullName, hashAdminUserEmail } from '../../utils';
+import { getFullName } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 
@@ -31,7 +31,6 @@ 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 },
@@ -72,15 +71,6 @@ 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 =
@@ -91,13 +81,12 @@ const AuthenticatedApp = () => {
   const appInfosValue = useMemo(() => {
     return {
       ...appInfos,
-      userId,
       latestStrapiReleaseTag: tag_name,
       setUserDisplayName,
       shouldUpdateStrapi,
       userDisplayName,
     };
-  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName, userId]);
+  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName]);
 
   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={icon && <FontAwesomeIcon icon={icon} />}
+            startIcon={<FontAwesomeIcon icon={icon} />}
             action={
               <Stack horizontal spacing={0} expanded={isOpen}>
                 {showDownIcon && (

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

@@ -8,9 +8,7 @@ import set from 'lodash/set';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Prompt, Redirect } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { Main } from '@strapi/design-system';
+import { Main } from '@strapi/design-system/Main';
 import {
   LoadingIndicatorPage,
   ContentManagerEditViewDataManagerContext,
@@ -22,13 +20,8 @@ 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,
@@ -68,9 +61,6 @@ const EditViewDataManagerProvider = ({
     publishConfirmation,
   } = reducerState;
 
-  const { setModifiedDataOnly } = useSelector(selectCrudReducer);
-  const reduxDispatch = useDispatch();
-
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
 
@@ -154,18 +144,8 @@ const EditViewDataManagerProvider = ({
 
   const { components } = allLayoutData;
 
-  const previousInitialValues = usePrev(initialValues);
-
   useEffect(() => {
-    /**
-     * 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)
-    ) {
+    if (initialValues && currentContentTypeLayout?.attributes) {
       /**
        * This will return an array of paths:
        * ['many_to_one', 'one_to_many', 'one_to_one']
@@ -199,25 +179,9 @@ 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,
-    setModifiedDataOnly,
-    reduxDispatch,
-    previousInitialValues,
-  ]);
+  }, [initialValues, currentContentTypeLayout, components]);
 
   const dispatchAddComponent = useCallback(
     (type) =>

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

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

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

@@ -55,15 +55,8 @@ 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) => {
-              return path.split(`${componentName}.`)[1];
-            });
+            }).map((path) => 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,7 +9,6 @@ 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();
@@ -19,8 +18,6 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
   );
   const fields = componentLayoutData.layouts.edit;
 
-  const { lazyComponentStore } = useLazyComponents();
-
   return (
     <Box
       background={isFromDynamicZone ? '' : 'neutral100'}
@@ -70,7 +67,6 @@ 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,13 +24,18 @@ import { RELATION_ITEM_HEIGHT } from './constants';
 import { usePrev } from '../../hooks';
 
 const LinkEllipsis = styled(Link)`
-  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inherit;
+`;
 
+const BoxEllipsis = styled(Box)`
   > span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: block;
+    display: inherit;
   }
 `;
 
@@ -317,7 +322,7 @@ const RelationInput = ({
                   }
                   style={style}
                 >
-                  <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+                  <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
                     <Tooltip description={mainField ?? `${id}`}>
                       {href ? (
                         <LinkEllipsis to={href} disabled={disabled}>
@@ -329,7 +334,7 @@ const RelationInput = ({
                         </Typography>
                       )}
                     </Tooltip>
-                  </Box>
+                  </BoxEllipsis>
 
                   {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,7 +21,6 @@ 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;
@@ -178,8 +177,6 @@ const DraggedItem = ({
   const accordionTitle = toString(displayedValue);
   const accordionHasError = hasErrors ? 'error' : undefined;
 
-  const { lazyComponentStore } = useLazyComponents();
-
   return (
     <Box ref={refs ? refs.dropRef : null}>
       {isDragging && <Preview />}
@@ -276,7 +273,6 @@ 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.get(getRequestUrl(`${slug}${searchToSend}`), {
+        const { data } = await axiosInstance(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.hasFocus()) {
+    if (value && !editorRef.current.state.focused) {
       editorRef.current.setValue(value);
     }
   }, [editorRef, value]);

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

@@ -1,69 +1,44 @@
-import { useCallback, useEffect, useState } from 'react';
+import { 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(Object.fromEntries(componentStore));
-  const [loading, setLoading] = useState(() => {
-    if (componentStore.size === 0 && componentUids.length > 0) {
-      return true;
-    }
-
-    return false;
-  });
+const useLazyComponents = (componentUids) => {
+  const [lazyComponentStore, setLazyComponentStore] = useState({});
+  const [loading, setLoading] = useState(true);
   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) => {
-        componentStore.set(uid, modules[index].default);
+        if (!Object.keys(lazyComponentStore).includes(uid)) {
+          setLazyComponentStore({ ...lazyComponentStore, [uid]: modules[index].default });
+        }
       });
-
-      setStore(Object.fromEntries(componentStore));
     };
 
-    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) => {
+    if (componentUids.length) {
+      const componentPromises = componentUids.map((uid) => {
         const customField = customFieldsRegistry.get(uid);
 
         return customField.components.Input();
       });
 
-      if (componentPromises.length > 0) {
-        lazyLoadComponents(newUids, componentPromises);
-      }
+      lazyLoadComponents(componentUids, componentPromises);
     }
-  }, [componentUids, customFieldsRegistry, loading]);
 
-  /**
-   * 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({});
-  }, []);
+    if (componentUids.length === Object.keys(lazyComponentStore).length) {
+      setLoading(false);
+    }
+  }, [componentUids, customFieldsRegistry, loading, lazyComponentStore]);
 
-  return { isLazyLoading: loading, lazyComponentStore, cleanup };
+  return { isLazyLoading: loading, lazyComponentStore };
 };
 
 export default useLazyComponents;

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

@@ -6,7 +6,6 @@ import {
   SET_DATA_STRUCTURES,
   SET_STATUS,
   SUBMIT_SUCCEEDED,
-  CLEAR_SET_MODIFIED_DATA_ONLY,
 } from './constants';
 
 export const getData = () => {
@@ -43,7 +42,3 @@ 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,5 +5,3 @@ 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,7 +8,6 @@ import produce from 'immer';
 // to do any of this.
 
 import {
-  CLEAR_SET_MODIFIED_DATA_ONLY,
   GET_DATA,
   GET_DATA_SUCCEEDED,
   INIT_FORM,
@@ -24,7 +23,6 @@ const crudInitialState = {
   isLoading: true,
   data: null,
   status: 'resolved',
-  setModifiedDataOnly: false,
 };
 
 const crudReducer = (state = crudInitialState, action) =>
@@ -38,7 +36,6 @@ 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: {
@@ -69,10 +66,6 @@ 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, wrapAxiosInstance } from '@strapi/helper-plugin';
+import { auth } from '@strapi/helper-plugin';
 
 const instance = axios.create({
   baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
@@ -33,6 +33,4 @@ instance.interceptors.response.use(
   }
 );
 
-const wrapper = wrapAxiosInstance(instance);
-
-export default wrapper;
+export default instance;

package/admin/src/hooks/index.js

@@ -10,4 +10,3 @@ 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/useSettingsMenu/init.js

@@ -24,6 +24,13 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
       id: 'permissions',
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
       links: [
+        {
+          intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
+          to: '/settings/audit-logs',
+          id: 'auditLogs',
+          isDisplayed: false,
+          permissions: adminPermissions.settings.auditLogs.main,
+        },
         {
           intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
           to: '/settings/roles',

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, useFetchClient } from '../../hooks';
+import { useConfigurations } from '../../hooks';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
@@ -35,12 +35,8 @@ function App() {
   const toggleNotification = useNotification();
   const { updateProjectSettings } = useConfigurations();
   const { formatMessage } = useIntl();
-  const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
-    isLoading: true,
-    hasAdmin: false,
-  });
+  const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
   const appInfo = useAppInfos();
-  const { get } = useFetchClient();
 
   const authRoutes = useMemo(() => {
     return makeUniqueRoutes(
@@ -84,29 +80,27 @@ function App() {
         } = await axios.get(`${strapi.backendURL}/admin/init`);
 
         updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
-        const deviceId = await getUID();
 
         if (uuid) {
           const {
             data: { data: 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,
-          });
+          } = await axios.get(`${strapi.backendURL}/admin/telemetry-properties`);
 
           setTelemetryProperties(properties);
 
           try {
-            await fetch('https://analytics.strapi.io/api/v2/track', {
+            const deviceId = await getUID();
+
+            await fetch('https://analytics.strapi.io/track', {
               method: 'POST',
               body: JSON.stringify({
-                // This event is anonymous
                 event: 'didInitializeAdministration',
-                userId: '',
+                uuid,
                 deviceId,
-                eventPropeties: {},
-                userProperties: { environment: appInfo.currentEnvironment },
-                groupProperties: { ...properties, projectId: uuid },
+                properties: {
+                  ...properties,
+                  environment: appInfo.currentEnvironment,
+                },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -117,7 +111,7 @@ function App() {
           }
         }
 
-        setState({ isLoading: false, hasAdmin, uuid, deviceId });
+        setState({ isLoading: false, hasAdmin, uuid });
       } catch (err) {
         toggleNotification({
           type: 'warning',
@@ -136,9 +130,8 @@ function App() {
     () => ({
       uuid,
       telemetryProperties,
-      deviceId,
     }),
-    [uuid, telemetryProperties, deviceId]
+    [uuid, telemetryProperties]
   );
 
   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: #4945ff;
+    fill: #8e75ff;
   }
   > path:nth-child(2) {
-    fill: #fff;
+    fill: #8e75ff;
   }
-  > path:nth-child(4) {
-    fill: #9593ff;
+  > path:nth-child(3) {
+    fill: #8e75ff;
   }
 `;
 

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

@@ -12,6 +12,7 @@ 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';
@@ -204,12 +205,12 @@ const ApiTokenCreateView = () => {
       if (err?.response?.data?.error?.message === MSG_ERROR_NAME_TAKEN) {
         toggleNotification({
           type: 'warning',
-          message: err.response.data.message || 'notification.error.tokennamenotunique',
+          message: get(err, 'response.data.message', 'notification.error.tokennamenotunique'),
         });
       } else {
         toggleNotification({
           type: 'warning',
-          message: err?.response?.data?.message || 'notification.error',
+          message: get(err, 'response.data.message', 'notification.error'),
         });
       }
       unlockApp();

package/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/DynamicTable/TableRows/CellValue.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import useFormatTimeStamp from '../../hooks/useFormatTimeStamp';
+
+const CellValue = ({ type, value }) => {
+  const formatTimeStamp = useFormatTimeStamp();
+
+  if (type === 'date') {
+    return formatTimeStamp(value);
+  }
+
+  return value || '-';
+};
+
+CellValue.propTypes = {
+  type: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+};
+
+export default CellValue;