@strapi/admin 4.6.0-alpha.1 → 4.6.0-beta.1

package/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js

@@ -1,43 +1,31 @@
 import React from 'react';
-import get from 'lodash/get';
-import PropTypes from 'prop-types';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Box, Flex, Typography, Stack } from '@strapi/design-system';
+
+import { ComponentIcon } from '../../../components/ComponentIcon';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
 
-const CustomFlex = styled(Flex)`
-  border-radius: 50%;
-  svg {
-    & > * {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-    width: 12px;
-    height: 12px;
-  }
-`;
 const CustomLink = styled(Flex)`
   text-decoration: none;
+
+  &:focus,
   &:hover {
     ${({ theme }) => `
-      background: ${theme.colors.primary100};
-      svg {
-        & > * {
-          fill: ${theme.colors.primary600};
-        }
-      }
+      background-color: ${theme.colors.primary100};
+      border-color: ${theme.colors.primary200};
+
       ${Typography} {
           color: ${theme.colors.primary600};
       }
-      ${CustomFlex} {
-        background: ${theme.colors.primary200};
-      }
-      border-color: ${theme.colors.primary200};
     `}
+
+    /* > ComponentIcon */
+    > div:first-child {
+      background: ${({ theme }) => theme.colors.primary200};
+      color: ${({ theme }) => theme.colors.primary600};
+    }
   }
 `;
 
@@ -61,19 +49,11 @@ const DynamicZoneList = ({ components }) => {
           as={Link}
           to={`/content-manager/components/${componentUid}/configurations/edit`}
         >
-          <CustomFlex
-            width={`${32 / 16}rem`}
-            height={`${32 / 16}rem`}
-            background="neutral150"
-            justifyContent="center"
-            alignItems="center"
-            padding={2}
-          >
-            <FontAwesomeIcon icon={get(componentLayouts, [componentUid, 'info', 'icon'], '')} />
-          </CustomFlex>
+          <ComponentIcon />
+
           <Box paddingTop={1}>
             <Typography fontSize={1} textColor="neutral600" fontWeight="bold">
-              {get(componentLayouts, [componentUid, 'info', 'displayName'], '')}
+              {componentLayouts?.[componentUid]?.info?.displayName ?? ''}
             </Typography>
           </Box>
         </CustomLink>

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/content-manager/utils/ItemTypes.js

@@ -1,7 +1,7 @@
 export default {
   COMPONENT: 'component',
   EDIT_FIELD: 'editField',
-  EDIT_RELATION: 'editRelation',
   FIELD: 'field',
+  DYNAMIC_ZONE: 'dynamicZone',
   RELATION: 'relation',
 };

package/admin/src/content-manager/utils/composeRefs.js

@@ -0,0 +1,28 @@
+/**
+ * @typedef PossibleRef<T>
+ * @type {React.Ref<T> | undefined;}
+ *
+ * @typedef setRef
+ * @type {<T>(ref: PossibleRef<T>, value: T) => React.RefCallback<T>}
+ */
+
+/**
+ * @type {setRef}
+ */
+const setRef = (ref, value) => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+};
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ *
+ * @type {<T>(...refs: PossibleRef<T>[]) => (node: T) => void}
+ */
+export const composeRefs = (...refs) => {
+  return (node) => refs.forEach((ref) => setRef(ref, node));
+};

package/admin/src/content-manager/utils/getMaxTempKey.js

@@ -5,7 +5,7 @@ const getMaxTempKey = (arr) => {
 
   return Math.max.apply(
     Math,
-    arr.map((o) => o.__temp_key__)
+    arr.map((o) => o.__temp_key__ ?? o.id)
   );
 };
 

package/admin/src/content-manager/utils/index.js

@@ -1,13 +1,20 @@
 export { default as arrayMoveItem } from './arrayMoveItem';
+
 export { default as checkIfAttributeIsDisplayable } from './checkIfAttributeIsDisplayable';
+export { composeRefs } from './composeRefs';
 export { default as createDefaultForm } from './createDefaultForm';
+
 export { default as formatLayoutToApi } from './formatLayoutToApi';
+
 export { default as generatePermissionsObject } from './generatePermissionsObject';
 export { default as getFieldName } from './getFieldName';
 export { default as getMaxTempKey } from './getMaxTempKey';
 export { default as getRequestUrl } from './getRequestUrl';
 export { default as getTrad } from './getTrad';
+
 export { default as ItemTypes } from './ItemTypes';
+
 export { default as mergeMetasWithSchema } from './mergeMetasWithSchema';
+
 export { default as removeKeyInObject } from './removeKeyInObject';
 export { default as removePasswordFieldsFromData } from './removePasswordFieldsFromData';

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/hooks/useSettingsMenu/init.js

@@ -24,13 +24,6 @@ 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/Admin/Onboarding/index.js

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
+import { Box, Flex, FocusTrap, Typography, Icon, Stack } from '@strapi/design-system';
+import { Book, Cross, Information, Question } from '@strapi/icons';
+import { pxToRem } from '@strapi/helper-plugin';
+
 import { useConfigurations } from '../../../hooks';
 
 const OnboardingWrapper = styled(Box)`
@@ -14,52 +13,44 @@ const OnboardingWrapper = styled(Box)`
   right: ${({ theme }) => theme.spaces[2]};
 `;
 
-const Button = styled.button`
+const Button = styled(Box)`
   width: ${({ theme }) => theme.spaces[8]};
   height: ${({ theme }) => theme.spaces[8]};
   background: ${({ theme }) => theme.colors.primary600};
   box-shadow: ${({ theme }) => theme.shadows.tableShadow};
   border-radius: 50%;
-  svg {
-    color: ${({ theme }) => theme.colors.buttonNeutral0};
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.buttonNeutral0};
   }
 `;
 
 const LinksWrapper = styled(Box)`
-  position: absolute;
   bottom: ${({ theme }) => `${theme.spaces[9]}`};
+  min-width: ${200 / 16}rem;
+  position: absolute;
   right: 0;
-  width: ${200 / 16}rem;
 `;
 
-const StyledLink = styled.a`
-  display: flex;
-  align-items: center;
+const StyledLink = styled(Flex)`
   text-decoration: none;
-  padding: ${({ theme }) => theme.spaces[2]};
-  padding-left: ${({ theme }) => theme.spaces[5]};
 
-  svg {
-    color: ${({ theme }) => theme.colors.neutral600};
-    margin-right: ${({ theme }) => theme.spaces[2]};
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
   }
 
+  &:focus,
   &:hover {
     background: ${({ theme }) => theme.colors.neutral100};
-    color: ${({ theme }) => theme.colors.neutral500};
 
-    svg {
-      color: ${({ theme }) => theme.colors.neutral700};
+    svg path {
+      fill: ${({ theme }) => theme.colors.neutral700};
     }
 
     ${[Typography]} {
       color: ${({ theme }) => theme.colors.neutral700};
     }
   }
-
-  ${[Typography]} {
-    color: ${({ theme }) => theme.colors.neutral600};
-  }
 `;
 
 const Onboarding = () => {
@@ -71,9 +62,9 @@ const Onboarding = () => {
     return null;
   }
 
-  const staticLinks = [
+  const STATIC_LINKS = [
     {
-      icon: 'book',
+      Icon: <Book />,
       label: formatMessage({
         id: 'global.documentation',
         defaultMessage: 'Documentation',
@@ -81,7 +72,7 @@ const Onboarding = () => {
       destination: 'https://docs.strapi.io',
     },
     {
-      icon: 'file',
+      Icon: <Information />,
       label: formatMessage({ id: 'app.static.links.cheatsheet', defaultMessage: 'CheatSheet' }),
       destination: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
     },
@@ -94,37 +85,44 @@ const Onboarding = () => {
   return (
     <OnboardingWrapper as="aside">
       <Button
+        as="button"
         id="onboarding"
-        aria-label={formatMessage({
-          id: 'app.components.Onboarding.help.button',
-          defaultMessage: 'Help button',
-        })}
+        aria-label={formatMessage(
+          isOpen
+            ? {
+                id: 'app.components.Onboarding.help.button-close',
+                defaultMessage: 'Close help menu',
+              }
+            : {
+                id: 'app.components.Onboarding.help.button',
+                defaultMessage: 'Open help menu',
+              }
+        )}
         onClick={handleClick}
       >
-        {!isOpen && <FontAwesomeIcon icon={faQuestion} />}
-        {isOpen && <FontAwesomeIcon icon={faTimes} />}
+        <Icon as={isOpen ? Cross : Question} height={pxToRem(16)} width={pxToRem(16)} />
       </Button>
 
       {/* FIX ME - replace with popover when overflow popover is fixed 
        + when v4 mockups for onboarding component are ready */}
       {isOpen && (
         <FocusTrap onEscape={handleClick}>
-          <LinksWrapper
-            background="neutral0"
-            hasRadius
-            shadow="tableShadow"
-            paddingBottom={2}
-            paddingTop={2}
-          >
-            {staticLinks.map((link) => (
+          <LinksWrapper background="neutral0" hasRadius shadow="tableShadow" padding={2}>
+            {STATIC_LINKS.map((link) => (
               <StyledLink
+                as="a"
                 key={link.label}
                 rel="nofollow noreferrer noopener"
                 target="_blank"
                 href={link.destination}
+                padding={2}
+                hasRadius
+                alignItems="center"
               >
-                <FontAwesomeIcon icon={link.icon} />
-                <Typography>{link.label}</Typography>
+                <Stack horizontal spacing={2}>
+                  {link.Icon}
+                  <Typography color="neutral600">{link.label}</Typography>
+                </Stack>
               </StyledLink>
             ))}
           </LinksWrapper>

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/AuthPage/components/Register/index.js

@@ -268,7 +268,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       required
                       label={formatMessage({
                         id: 'Auth.form.confirmPassword.label',
-                        defaultMessage: 'Confirmation Password',
+                        defaultMessage: 'Confirm Password',
                       })}
                       type={confirmPasswordShown ? 'text' : 'password'}
                     />

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -154,7 +154,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                     required
                     label={formatMessage({
                       id: 'Auth.form.confirmPassword.label',
-                      defaultMessage: 'Confirmation Password',
+                      defaultMessage: 'Confirm Password',
                     })}
                     type={confirmPasswordShown ? 'text' : 'password'}
                   />

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',

package/admin/src/pages/SettingsPage/utils/defaultRoutes.js

@@ -57,17 +57,6 @@ const defaultRoutes = [
     to: '/settings/users/:id',
     exact: true,
   },
-  {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "admin-audit-logs" */ '../pages/AuditLogs/ProtectedListPage'
-      );
-
-      return component;
-    },
-    to: '/settings/audit-logs',
-    exact: true,
-  },
   {
     async Component() {
       const component = await import(

package/admin/src/permissions/defaultPermissions.js

@@ -34,10 +34,6 @@ const permissions = {
     uninstall: [{ action: 'admin::marketplace.plugins.uninstall', subject: null }],
   },
   settings: {
-    auditLogs: {
-      // Note:update to admin::auditLogs permissions when set in BE
-      main: [{ action: 'admin::roles.create', subject: null }],
-    },
     roles: {
       main: [
         { action: 'admin::roles.create', subject: null },