@strapi/admin 4.6.0-beta.1 → 4.6.0

package/.browserslistrc

@@ -0,0 +1,3 @@
+last 3 major versions
+Firefox ESR
+last 2 Opera versions

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

@@ -1,45 +1,48 @@
-import React, { useMemo, useReducer, useRef } from 'react';
+import React, { useCallback, useMemo, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { ConfigurationsContext } from '../../contexts';
 import reducer, { initialState } from './reducer';
 
 const ConfigurationsProvider = ({
   children,
-  authLogo,
+  authLogo: defaultAuthLogo,
   menuLogo: defaultMenuLogo,
   showReleaseNotification,
   showTutorials,
 }) => {
-  const [{ menuLogo }, dispatch] = useReducer(reducer, initialState);
+  const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState);
 
-  const updateProjectSettings = ({ menuLogo }) => {
-    return dispatch({
-      type: 'UPDATE_PROJECT_SETTINGS',
-      values: {
-        menuLogo: menuLogo || defaultMenuLogo,
-      },
-    });
-  };
-
-  const updateProjectSettingsRef = useRef(updateProjectSettings);
+  const updateProjectSettings = useCallback(
+    ({ menuLogo, authLogo }) => {
+      return dispatch({
+        type: 'UPDATE_PROJECT_SETTINGS',
+        values: {
+          menuLogo: menuLogo || defaultMenuLogo,
+          authLogo: authLogo || defaultAuthLogo,
+        },
+      });
+    },
+    [defaultAuthLogo, defaultMenuLogo]
+  );
 
   const configurationValue = useMemo(() => {
     return {
       logos: {
         menu: { custom: menuLogo, default: defaultMenuLogo },
-        auth: { custom: null, default: authLogo },
+        auth: { custom: authLogo, default: defaultAuthLogo },
       },
-      updateProjectSettings: updateProjectSettingsRef.current,
+      updateProjectSettings,
       showReleaseNotification,
       showTutorials,
     };
   }, [
-    authLogo,
     menuLogo,
+    defaultMenuLogo,
+    authLogo,
+    defaultAuthLogo,
+    updateProjectSettings,
     showReleaseNotification,
     showTutorials,
-    updateProjectSettingsRef,
-    defaultMenuLogo,
   ]);
 
   return (

package/admin/src/components/ConfigurationsProvider/reducer.js

@@ -9,6 +9,7 @@ import produce from 'immer';
 
 const initialState = {
   menuLogo: null,
+  authLogo: null,
 };
 
 const reducer = (state = initialState, action) =>

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

@@ -1,11 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
 
-const loadCss = async () => {
-  await import(/* webpackChunkName: "cropper-css" */ 'cropperjs/dist/cropper.css');
-};
-
-loadCss();
-
 const GlobalStyle = createGlobalStyle`
   body {
     background: ${({ theme }) => theme.colors.neutral100};

package/admin/src/components/GuidedTour/Modal/components/Content.js

@@ -8,6 +8,9 @@ import { useIntl } from 'react-intl';
 
 const LiStyled = styled.li`
   list-style: disc;
+  &::marker {
+    color: ${({ theme }) => theme.colors.neutral800};
+  }
 `;
 
 const Content = ({ id, defaultMessage }) => {
@@ -19,13 +22,15 @@ const Content = ({ id, defaultMessage }) => {
         { id, defaultMessage },
         {
           documentationLink: (children) => (
-            <a
+            <Typography
+              as="a"
+              textColor="primary600"
               target="_blank"
               rel="noopener noreferrer"
               href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"
             >
               {children}
-            </a>
+            </Typography>
           ),
           b: (children) => <Typography fontWeight="semiBold">{children}</Typography>,
           p: (children) => <Typography>{children}</Typography>,

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

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { NavLink as RouterNavLink, useLocation } from 'react-router-dom';
+import { NavLink as RouterNavLink, useLocation, useHistory } from 'react-router-dom';
 import { Divider } from '@strapi/design-system/Divider';
 import {
   MainNav,
@@ -12,6 +12,7 @@ import {
   NavSection,
   NavUser,
   NavCondense,
+  NavFooter,
 } from '@strapi/design-system/v2/MainNav';
 import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
@@ -20,7 +21,8 @@ import { Stack } from '@strapi/design-system/Stack';
 import Write from '@strapi/icons/Write';
 import Exit from '@strapi/icons/Exit';
 import { auth, usePersistentState, useAppInfos, useTracking } from '@strapi/helper-plugin';
-import useConfigurations from '../../hooks/useConfigurations';
+import { useConfigurations } from '../../hooks';
+import { axiosInstance } from '../../core/utils';
 
 const LinkUserWrapper = styled(Box)`
   width: ${150 / 16}rem;
@@ -61,6 +63,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
+  const history = useHistory();
 
   const initials = userDisplayName
     .split(' ')
@@ -70,9 +73,11 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
 
   const handleToggleUserLinks = () => setUserLinksVisible((prev) => !prev);
 
-  const handleLogout = () => {
+  const handleLogout = async () => {
+    await axiosInstance.post('/admin/logout');
     auth.clearAppStorage();
     handleToggleUserLinks();
+    history.push('/auth/login');
   };
 
   const handleBlur = (e) => {
@@ -179,57 +184,59 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         ) : null}
       </NavSections>
 
-      <NavUser
-        id="main-nav-user-button"
-        ref={buttonRef}
-        onClick={handleToggleUserLinks}
-        initials={initials}
-      >
-        {userDisplayName}
-      </NavUser>
-      {userLinksVisible && (
-        <LinkUserWrapper
-          onBlur={handleBlur}
-          padding={1}
-          shadow="tableShadow"
-          background="neutral0"
-          hasRadius
+      <NavFooter>
+        <NavUser
+          id="main-nav-user-button"
+          ref={buttonRef}
+          onClick={handleToggleUserLinks}
+          initials={initials}
         >
-          <FocusTrap onEscape={handleToggleUserLinks}>
-            <Stack spacing={0}>
-              <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
-                <Typography>
-                  {formatMessage({
-                    id: 'global.profile',
-                    defaultMessage: 'Profile',
-                  })}
-                </Typography>
-              </LinkUser>
-              <LinkUser tabIndex={0} onClick={handleLogout} logout="logout" to="/auth/login">
-                <Typography textColor="danger600">
-                  {formatMessage({
-                    id: 'app.components.LeftMenu.logout',
-                    defaultMessage: 'Logout',
-                  })}
-                </Typography>
-                <Exit />
-              </LinkUser>
-            </Stack>
-          </FocusTrap>
-        </LinkUserWrapper>
-      )}
-
-      <NavCondense onClick={() => setCondensed((s) => !s)}>
-        {condensed
-          ? formatMessage({
-              id: 'app.components.LeftMenu.expand',
-              defaultMessage: 'Expand the navbar',
-            })
-          : formatMessage({
-              id: 'app.components.LeftMenu.collapse',
-              defaultMessage: 'Collapse the navbar',
-            })}
-      </NavCondense>
+          {userDisplayName}
+        </NavUser>
+        {userLinksVisible && (
+          <LinkUserWrapper
+            onBlur={handleBlur}
+            padding={1}
+            shadow="tableShadow"
+            background="neutral0"
+            hasRadius
+          >
+            <FocusTrap onEscape={handleToggleUserLinks}>
+              <Stack spacing={0}>
+                <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
+                  <Typography>
+                    {formatMessage({
+                      id: 'global.profile',
+                      defaultMessage: 'Profile',
+                    })}
+                  </Typography>
+                </LinkUser>
+                <LinkUser tabIndex={0} onClick={handleLogout} logout="logout" to="/auth/login">
+                  <Typography textColor="danger600">
+                    {formatMessage({
+                      id: 'app.components.LeftMenu.logout',
+                      defaultMessage: 'Logout',
+                    })}
+                  </Typography>
+                  <Exit />
+                </LinkUser>
+              </Stack>
+            </FocusTrap>
+          </LinkUserWrapper>
+        )}
+
+        <NavCondense onClick={() => setCondensed((s) => !s)}>
+          {condensed
+            ? formatMessage({
+                id: 'app.components.LeftMenu.expand',
+                defaultMessage: 'Expand the navbar',
+              })
+            : formatMessage({
+                id: 'app.components.LeftMenu.collapse',
+                defaultMessage: 'Collapse the navbar',
+              })}
+        </NavCondense>
+      </NavFooter>
     </MainNav>
   );
 };

package/admin/src/components/Notifications/Notification/index.js

@@ -6,7 +6,7 @@ import { Link } from '@strapi/design-system/v2/Link';
 
 const Notification = ({ dispatch, notification }) => {
   const { formatMessage } = useIntl();
-  const { message, link, type, id, onClose, timeout, blockTransition } = notification;
+  const { message, link, type, id, onClose, timeout, blockTransition, title } = notification;
 
   const formattedMessage = (msg) =>
     typeof msg === 'string' ? msg : formatMessage(msg, msg.values);
@@ -37,6 +37,7 @@ const Notification = ({ dispatch, notification }) => {
   let variant;
   let alertTitle;
 
+  // TODO break out this logic into separate file
   if (type === 'info') {
     variant = 'default';
     alertTitle = formatMessage({
@@ -44,17 +45,29 @@ const Notification = ({ dispatch, notification }) => {
       defaultMessage: 'Information:',
     });
   } else if (type === 'warning') {
+    // type should be renamed to danger in the future, but it might introduce changes if done now
+    variant = 'danger';
+    alertTitle = formatMessage({
+      id: 'notification.warning.title',
+      defaultMessage: 'Warning:',
+    });
+  } else if (type === 'softWarning') {
+    // type should be renamed to just warning in the future
+    variant = 'warning';
     alertTitle = formatMessage({
       id: 'notification.warning.title',
       defaultMessage: 'Warning:',
     });
-    variant = 'danger';
   } else {
+    variant = 'success';
     alertTitle = formatMessage({
       id: 'notification.success.title',
       defaultMessage: 'Success:',
     });
-    variant = 'success';
+  }
+
+  if (title) {
+    alertTitle = typeof title === 'string' ? title : formatMessage(title);
   }
 
   return (
@@ -77,6 +90,7 @@ const Notification = ({ dispatch, notification }) => {
       {formattedMessage({
         id: message?.id || message,
         defaultMessage: message?.defaultMessage || message?.id || message,
+        values: message?.values,
       })}
     </Alert>
   );
@@ -124,6 +138,14 @@ Notification.propTypes = {
     onClose: PropTypes.func,
     timeout: PropTypes.number,
     blockTransition: PropTypes.bool,
+    title: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        defaultMessage: PropTypes.string,
+        values: PropTypes.object,
+      }),
+    ]),
   }),
 };
 

package/admin/src/components/Notifications/reducer.js

@@ -23,6 +23,7 @@ const notificationReducer = (state = initialState, action) =>
           timeout: get(action, ['config', 'timeout'], 2500),
           blockTransition: get(action, ['config', 'blockTransition'], false),
           onClose: get(action, ['config', 'onClose'], null),
+          title: get(action, ['config', 'title'], null),
         });
         draftState.notifId = state.notifId + 1;
         break;

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

@@ -11,7 +11,7 @@ const Logo = () => {
     logos: { auth },
   } = useConfigurations();
 
-  return <Img src={auth.default} aria-hidden alt="" />;
+  return <Img src={auth?.custom ?? auth.default} aria-hidden alt="" />;
 };
 
 export default Logo;

package/admin/src/content-manager/components/DragLayer/RelationDragPreview.js

@@ -43,12 +43,14 @@ export const RelationDragPreview = ({ status, displayedValue, width }) => {
           <IconButton noBorder>
             <Drag />
           </IconButton>
-          <ChildrenWrapper justifyContent="space-between">
-            <LinkEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
-              <Typography textColor="primary600" ellipsis>
-                {displayedValue}
-              </Typography>
-            </LinkEllipsis>
+          <ChildrenWrapper maxWidth="100%" justifyContent="space-between">
+            <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+              <LinkEllipsis>
+                <Typography textColor="primary600" ellipsis>
+                  {displayedValue}
+                </Typography>
+              </LinkEllipsis>
+            </Box>
             {status && (
               <Status variant={statusColor} showBullet={false} size="S">
                 <Typography fontWeight="bold" textColor={`${statusColor}700`}>

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

@@ -65,6 +65,10 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
     {
       enabled: isOpen,
       staleTime: 0,
+      select: (data) => ({
+        ...data,
+        results: data.results.reverse(),
+      }),
     }
   );
 

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

@@ -98,7 +98,7 @@ const DynamicZoneComponent = ({
 
     const mainField = get(modifiedData, [name, index, mainFieldKey]) ?? '';
 
-    const displayedValue = mainFieldKey === 'id' ? '' : mainField.trim();
+    const displayedValue = mainFieldKey === 'id' ? '' : String(mainField).trim();
 
     const mainValue = displayedValue.length > 0 ? ` - ${displayedValue}` : displayedValue;
 

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

@@ -21,7 +21,7 @@ import {
   getAPIInnerErrors,
 } from '@strapi/helper-plugin';
 
-import { getTrad, removeKeyInObject } from '../../utils';
+import { getTrad } from '../../utils';
 
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
 
@@ -261,10 +261,11 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const relationLoad = useCallback(({ target: { name, value } }) => {
+  const relationLoad = useCallback(({ target: { initialDataPath, modifiedDataPath, value } }) => {
     dispatch({
       type: 'LOAD_RELATION',
-      keys: name.split('.'),
+      modifiedDataPath,
+      initialDataPath,
       value,
     });
   }, []);
@@ -360,11 +361,9 @@ const EditViewDataManagerProvider = ({
 
   const createFormData = useCallback(
     (modifiedData, initialData) => {
-      // First we need to remove the added keys needed for the dnd
-      const preparedData = removeKeyInObject(cloneDeep(modifiedData), '__temp_key__');
       // Then we need to apply our helper
       const cleanedData = cleanData(
-        { browserState: preparedData, serverState: initialData },
+        { browserState: modifiedData, serverState: initialData },
         currentContentTypeLayout,
         allLayoutData.components
       );

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

@@ -6,6 +6,8 @@ import take from 'lodash/take';
 import cloneDeep from 'lodash/cloneDeep';
 import uniqBy from 'lodash/uniqBy';
 import merge from 'lodash/merge';
+import castArray from 'lodash/castArray';
+import isNil from 'lodash/isNil';
 
 import {
   findLeafByPathAndReplace,
@@ -148,22 +150,33 @@ const reducer = (state, action) =>
         break;
       }
       case 'LOAD_RELATION': {
-        const initialDataPath = ['initialData', ...action.keys];
-        const modifiedDataPath = ['modifiedData', ...action.keys];
-        const { value } = action;
+        const { initialDataPath, modifiedDataPath, value } = action;
 
         const initialDataRelations = get(state, initialDataPath);
         const modifiedDataRelations = get(state, modifiedDataPath);
 
-        set(draftState, initialDataPath, uniqBy([...value, ...initialDataRelations], 'id'));
+        /**
+         * Check if the values we're loading are already in initial
+         * data if they are then we don't need to load them at all
+         */
+        const valuesToLoad = value.filter((relation) => {
+          return !initialDataRelations.some((initialDataRelation) => {
+            return initialDataRelation.id === relation.id;
+          });
+        });
+
+        set(draftState, initialDataPath, uniqBy([...valuesToLoad, ...initialDataRelations], 'id'));
 
         /**
          * We need to set the value also on modifiedData, because initialData
          * and modifiedData need to stay in sync, so that the CM can compare
          * both states, to render the dirty UI state
          */
-
-        set(draftState, modifiedDataPath, uniqBy([...value, ...modifiedDataRelations], 'id'));
+        set(
+          draftState,
+          modifiedDataPath,
+          uniqBy([...valuesToLoad, ...modifiedDataRelations], 'id')
+        );
 
         break;
       }
@@ -247,6 +260,17 @@ const reducer = (state, action) =>
           .reduce((acc, currentPaths) => {
             const [componentName] = currentPaths;
 
+            const existingComponents = castArray(acc[componentName] || []);
+            existingComponents.reduce((result, currentEntry) => {
+              if (!isNil(get(currentEntry, [`__temp_key__`]))) {
+                return result;
+              }
+
+              set(currentEntry, [`__temp_key__`], getMaxTempKey(result) + 1);
+
+              return result;
+            }, existingComponents);
+
             if (state.modifiedData && get(state.modifiedData, componentName)) {
               /**
                * this will be null on initial load, however subsequent calls

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

@@ -1,6 +1,7 @@
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
+import { getInitialDataPathUsingTempKeys } from '../../../utils/paths';
 
 /* eslint-disable indent */
 
@@ -12,6 +13,8 @@ import isObject from 'lodash/isObject';
  * @returns
  */
 const cleanData = ({ browserState, serverState }, currentSchema, componentsSchema) => {
+  const rootServerState = serverState;
+  const rootBrowserState = browserState;
   const getType = (schema, attrName) => get(schema, ['attributes', attrName, 'type'], '');
   const getOtherInfos = (schema, arr) => get(schema, ['attributes', ...arr], '');
 
@@ -20,10 +23,12 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
    * @param {object} browserState – the modifiedData from REDUX
    * @param {object} serverState – the initialData from REDUX
    * @param {*} schema
+   * @param {string} pathToParent - the path to the parent of the current entry
    * @returns
    */
-  const recursiveCleanData = (browserState, serverState, schema) => {
+  const recursiveCleanData = (browserState, serverState, schema, pathToParent) => {
     return Object.keys(browserState).reduce((acc, current) => {
+      const path = pathToParent ? `${pathToParent}.${current}` : current;
       const attrType = getType(schema, current);
 
       // This is the field value
@@ -61,7 +66,8 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
                   const subCleanedData = recursiveCleanData(
                     data,
                     (oldValue ?? [])[index],
-                    componentsSchema[component]
+                    componentsSchema[component],
+                    `${path}.${index}`
                   );
 
                   return subCleanedData;
@@ -69,20 +75,25 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
               : value;
           } else {
             cleanedData = value
-              ? recursiveCleanData(value, oldValue, componentsSchema[component])
+              ? recursiveCleanData(value, oldValue, componentsSchema[component], path)
               : value;
           }
 
           break;
 
         case 'relation': {
+          const trueInitialDataPath = getInitialDataPathUsingTempKeys(
+            rootServerState,
+            rootBrowserState
+          )(path).join('.');
+
           /**
            * Because of how repeatable components work when you dig into them the server
            * will have no object to compare too therefore no relation array will be setup
            * because the component has not been initialised, therefore we can safely assume
            * it needs to be added and provide a default empty array.
            */
-          let actualOldValue = oldValue ?? [];
+          let actualOldValue = get(rootServerState, trueInitialDataPath, []);
 
           const valuesWithPositions = value.map((relation, index, allRelations) => {
             const nextRelation = allRelations[index + 1];
@@ -141,7 +152,8 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
             const subCleanedData = recursiveCleanData(
               componentData,
               (oldValue ?? [])[index],
-              componentsSchema[componentData.__component]
+              componentsSchema[componentData.__component],
+              `${path}.${index}`
             );
 
             return subCleanedData;
@@ -157,7 +169,7 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
     }, {});
   };
 
-  return recursiveCleanData(browserState, serverState, currentSchema);
+  return recursiveCleanData(browserState, serverState, currentSchema, '');
 };
 
 // TODO: check which parts are still needed: I suspect the

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

@@ -24,7 +24,8 @@ export const findLeafByPathAndReplace = (endpath, replaceWith) => {
      * and the current path is not undefined in the accumulator
      * then we assume it's a leaf and we can replace it.
      */
-    if (endpath === curr && acc[curr] !== undefined) {
+
+    if (ind === currentArr.length - 1 && endpath === curr && acc[curr] !== undefined) {
       set(acc, curr, replaceWith);
 
       return acc;

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

@@ -284,7 +284,8 @@ const createYupSchemaAttribute = (type, validations, options) => {
                   }
 
                   if (type === 'boolean') {
-                    return value !== null;
+                    // Boolean value can be undefined/unset in modifiedData when generated in a new component
+                    return value !== null && value !== undefined;
                   }
 
                   if (type === 'date' || type === 'datetime') {

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

@@ -4,20 +4,22 @@ import PropTypes from 'prop-types';
 import size from 'lodash/size';
 import isEqual from 'react-fast-compare';
 import { useIntl } from 'react-intl';
+
 import { NotAllowedInput } from '@strapi/helper-plugin';
 import Trash from '@strapi/icons/Trash';
 import { Box } from '@strapi/design-system/Box';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
-import { getTrad } from '../../utils';
-import ComponentInitializer from '../ComponentInitializer';
-import NonRepeatableComponent from '../NonRepeatableComponent';
-import RepeatableComponent from '../RepeatableComponent';
+
 import connect from './utils/connect';
 import select from './utils/select';
 import Label from './Label';
+import ComponentInitializer from '../ComponentInitializer';
+import NonRepeatableComponent from '../NonRepeatableComponent';
+import RepeatableComponent from '../RepeatableComponent';
 import { useContentTypeLayout } from '../../hooks';
+import { getTrad } from '../../utils';
 
 const FieldComponent = ({
   addNonRepeatableComponentToField,