@strapi/admin 4.9.0 → 4.10.0-beta.0

package/admin/src/content-manager/pages/EditView/Information/index.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import propTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { Box, Divider, Flex, Typography } from '@strapi/design-system';
@@ -8,23 +8,44 @@ import { getTrad } from '../../../utils';
 import getUnits from './utils/getUnits';
 import { getFullName } from '../../../../utils';
 
+const Title = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Flex direction="column" alignItems="stretch" gap={2}>
+      <Typography variant="sigma" textColor="neutral600" id="additional-information">
+        {formatMessage({
+          id: getTrad('containers.Edit.information'),
+          defaultMessage: 'Information',
+        })}
+      </Typography>
+
+      <Box>
+        <Divider />
+      </Box>
+    </Flex>
+  );
+};
+
 const KeyValuePair = ({ label, value }) => {
   return (
     <Flex justifyContent="space-between">
-      <Typography as="dt" fontWeight="bold" textColor="neutral600">
+      <Typography as="dt" fontWeight="bold" textColor="neutral800" variant="pi">
         {label}
       </Typography>
-      <Typography as="dd">{value}</Typography>
+      <Typography as="dd" variant="pi" textColor="neutral600">
+        {value}
+      </Typography>
     </Flex>
   );
 };
 
 KeyValuePair.propTypes = {
-  label: propTypes.string.isRequired,
-  value: propTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
 };
 
-const Information = () => {
+const Body = () => {
   const { formatMessage, formatRelativeTime } = useIntl();
   const { initialData, isCreatingEntry } = useCMEditViewDataManager();
   const currentTime = useRef(Date.now());
@@ -49,57 +70,60 @@ const Information = () => {
   const created = getFieldInfo('createdAt', 'createdBy');
 
   return (
-    <Flex direction="column" alignItems="stretch" gap={2}>
-      <Typography variant="sigma" textColor="neutral600" id="additional-information">
-        {formatMessage({
-          id: getTrad('containers.Edit.information'),
-          defaultMessage: 'Information',
-        })}
-      </Typography>
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      <Flex direction="column" alignItems="stretch" gap={2} as="dl">
+        <KeyValuePair
+          label={formatMessage({
+            id: getTrad('containers.Edit.information.created'),
+            defaultMessage: 'Created',
+          })}
+          value={created.at}
+        />
 
-      <Box paddingBottom={4}>
-        <Divider />
-      </Box>
+        <KeyValuePair
+          label={formatMessage({
+            id: getTrad('containers.Edit.information.by'),
+            defaultMessage: 'By',
+          })}
+          value={created.by}
+        />
+      </Flex>
 
-      <Flex direction="column" alignItems="stretch" gap={4}>
-        <Flex direction="column" alignItems="stretch" gap={2} as="dl">
-          <KeyValuePair
-            label={formatMessage({
-              id: getTrad('containers.Edit.information.created'),
-              defaultMessage: 'Created',
-            })}
-            value={created.at}
-          />
-
-          <KeyValuePair
-            label={formatMessage({
-              id: getTrad('containers.Edit.information.by'),
-              defaultMessage: 'By',
-            })}
-            value={created.by}
-          />
-        </Flex>
-
-        <Flex direction="column" alignItems="stretch" gap={2} as="dl">
-          <KeyValuePair
-            label={formatMessage({
-              id: getTrad('containers.Edit.information.lastUpdate'),
-              defaultMessage: 'Last update',
-            })}
-            value={updated.at}
-          />
-
-          <KeyValuePair
-            label={formatMessage({
-              id: getTrad('containers.Edit.information.by'),
-              defaultMessage: 'By',
-            })}
-            value={updated.by}
-          />
-        </Flex>
+      <Flex direction="column" alignItems="stretch" gap={2} as="dl">
+        <KeyValuePair
+          label={formatMessage({
+            id: getTrad('containers.Edit.information.lastUpdate'),
+            defaultMessage: 'Last update',
+          })}
+          value={updated.at}
+        />
+
+        <KeyValuePair
+          label={formatMessage({
+            id: getTrad('containers.Edit.information.by'),
+            defaultMessage: 'By',
+          })}
+          value={updated.by}
+        />
       </Flex>
     </Flex>
   );
 };
 
-export default Information;
+const Root = ({ children }) => {
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      {children}
+    </Flex>
+  );
+};
+
+Root.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export default {
+  Root,
+  Title,
+  Body,
+};

package/admin/src/content-manager/pages/EditView/InformationBox/InformationBoxCE.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import Information from '../Information';
+
+// This component is overwritten by the EE counterpart
+export function InformationBoxCE() {
+  return (
+    <Information.Root>
+      <Information.Title />
+      <Information.Body />
+    </Information.Root>
+  );
+}

package/admin/src/content-manager/pages/EditView/InformationBox/index.js

@@ -0,0 +1,3 @@
+import { InformationBoxCE } from './InformationBoxCE';
+
+export default InformationBoxCE;

package/admin/src/content-manager/pages/EditView/index.js

@@ -8,19 +8,18 @@ import {
   LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { ContentLayout, Box, Grid, GridItem, Main, Flex } from '@strapi/design-system';
+import { ContentLayout, Box, Flex, Grid, GridItem, Main } from '@strapi/design-system';
 import { Pencil, Layer } from '@strapi/icons';
+import InformationBox from 'ee_else_ce/content-manager/pages/EditView/InformationBox';
 import { InjectionZone } from '../../../shared/components';
 import permissions from '../../../permissions';
 import DynamicZone from '../../components/DynamicZone';
-
 import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
 import EditViewDataManagerProvider from '../../components/EditViewDataManagerProvider';
 import SingleTypeFormWrapper from '../../components/SingleTypeFormWrapper';
 import { getTrad } from '../../utils';
 import useLazyComponents from '../../hooks/useLazyComponents';
 import DraftAndPublishBadge from './DraftAndPublishBadge';
-import Information from './Information';
 import Header from './Header';
 import { getFieldsActionMatchingPermissions } from './utils';
 import DeleteLink from './DeleteLink';
@@ -180,7 +179,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                         paddingTop={6}
                         shadow="tableShadow"
                       >
-                        <Information />
+                        <InformationBox />
                         <InjectionZone area="contentManager.editView.informations" />
                       </Box>
                       <Box as="aside" aria-labelledby="links">

package/admin/src/content-manager/pages/ListView/index.js

@@ -6,7 +6,6 @@ import isEqual from 'react-fast-compare';
 import { bindActionCreators, compose } from 'redux';
 import { useIntl } from 'react-intl';
 import { useHistory, useLocation, Link as ReactRouterLink } from 'react-router-dom';
-import get from 'lodash/get';
 import { stringify } from 'qs';
 import axios from 'axios';
 
@@ -74,12 +73,11 @@ function ListView({
   slug,
 }) {
   const { total } = pagination;
+  const { contentType } = layout;
   const {
-    contentType: {
-      metadatas,
-      settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
-    },
-  } = layout;
+    metadatas,
+    settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
+  } = contentType;
 
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
@@ -98,8 +96,7 @@ function ListView({
   const { pathname } = useLocation();
   const { push } = useHistory();
   const { formatMessage } = useIntl();
-  const contentType = layout.contentType;
-  const hasDraftAndPublish = get(contentType, 'options.draftAndPublish', false);
+  const hasDraftAndPublish = contentType.options?.draftAndPublish ?? false;
   const fetchClient = useFetchClient();
   const { post, del } = fetchClient;
 
@@ -137,7 +134,7 @@ function ListView({
           return;
         }
 
-        const resStatus = get(err, 'response.status', null);
+        const resStatus = err?.response?.status ?? null;
 
         if (resStatus === 403) {
           await fetchPermissionsRef.current();

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

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

package/admin/src/index.js

@@ -13,6 +13,7 @@ window.strapi = {
   features: {
     SSO: 'sso',
     AUDIT_LOGS: 'audit-logs',
+    REVIEW_WORKFLOWS: 'review-workflows',
   },
   projectType: 'Community',
 };

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
+import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -13,7 +14,6 @@ import {
   useTracking,
   getYupInnerErrors,
   Link,
-  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 import {
   Box,
@@ -27,10 +27,17 @@ import {
   Typography,
 } from '@strapi/design-system';
 import { EyeStriked, Eye } from '@strapi/icons';
-import UnauthenticatedLayout, { LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
+import UnauthenticatedLayout, {
+  Column,
+  LayoutContent,
+} from '../../../../layouts/UnauthenticatedLayout';
 import Logo from '../../../../components/UnauthenticatedLogo';
 import FieldActionWrapper from '../FieldActionWrapper';
 
+const CenteredBox = styled(Box)`
+  text-align: center;
+`;
+
 const A = styled.a`
   color: ${({ theme }) => theme.colors.primary600};
 `;
@@ -51,8 +58,6 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const query = useQuery();
-  const { formatAPIError } = useAPIErrorHandler();
-
   const registrationToken = query.get('registrationToken');
 
   useEffect(() => {
@@ -68,17 +73,17 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
           if (data) {
             setUserInfo(data);
           }
-        } catch (error) {
-          const message = formatAPIError(error);
+        } catch (err) {
+          const errorMessage = get(err, ['response', 'data', 'message'], 'An error occurred');
 
           toggleNotification({
             type: 'warning',
-            message,
+            message: errorMessage,
           });
 
           // Redirect to the oops page in case of an invalid token
           // @alexandrebodin @JAB I am not sure it is the wanted behavior
-          push(`/auth/oops?info=${encodeURIComponent(message)}`);
+          push(`/auth/oops?info=${encodeURIComponent(errorMessage)}`);
         }
       };
 
@@ -87,20 +92,6 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [registrationToken]);
 
-  function normalizeData(data) {
-    return Object.entries(data).reduce((acc, [key, value]) => {
-      let normalizedvalue = value;
-
-      if (!['password', 'confirmPassword'].includes(key) && typeof value === 'string') {
-        normalizedvalue = normalizedvalue.trim();
-      }
-
-      acc[key] = normalizedvalue;
-
-      return acc;
-    }, {});
-  }
-
   return (
     <UnauthenticatedLayout>
       <LayoutContent>
@@ -116,10 +107,8 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
             news: false,
           }}
           onSubmit={async (data, formik) => {
-            const normalizedData = normalizeData(data);
-
             try {
-              await schema.validate(normalizedData, { abortEarly: false });
+              await schema.validate(data, { abortEarly: false });
 
               if (submitCount > 0 && authType === 'register-admin') {
                 trackUsage('didSubmitWithErrorsFirstAdmin', { count: submitCount.toString() });
@@ -128,11 +117,11 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
               if (registrationToken) {
                 // We need to pass the registration token in the url param to the api in order to submit another admin user
                 onSubmit(
-                  { userInfo: omit(normalizedData, ['registrationToken']), registrationToken },
+                  { userInfo: omit(data, ['registrationToken']), registrationToken },
                   formik
                 );
               } else {
-                onSubmit(normalizedData, formik);
+                onSubmit(data, formik);
               }
             } catch (err) {
               const errors = getYupInnerErrors(err);
@@ -149,26 +138,27 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
             return (
               <Form noValidate>
                 <Main>
-                  <Flex direction="column" alignItems="stretch" gap={3}>
+                  <Column>
                     <Logo />
-
-                    <Typography as="h1" variant="alpha" textAlign="center">
-                      {formatMessage({
-                        id: 'Auth.form.welcome.title',
-                        defaultMessage: 'Welcome to Strapi!',
-                      })}
-                    </Typography>
-
-                    <Typography variant="epsilon" textColor="neutral600" textAlign="center">
-                      {formatMessage({
-                        id: 'Auth.form.register.subtitle',
-                        defaultMessage:
-                          'Credentials are only used to authenticate in Strapi. All saved data will be stored in your database.',
-                      })}
-                    </Typography>
-                  </Flex>
-
-                  <Flex direction="column" alignItems="stretch" gap={6} marginTop={7}>
+                    <Box paddingTop={6} paddingBottom={1}>
+                      <Typography as="h1" variant="alpha">
+                        {formatMessage({
+                          id: 'Auth.form.welcome.title',
+                          defaultMessage: 'Welcome to Strapi!',
+                        })}
+                      </Typography>
+                    </Box>
+                    <CenteredBox paddingBottom={7}>
+                      <Typography variant="epsilon" textColor="neutral600">
+                        {formatMessage({
+                          id: 'Auth.form.register.subtitle',
+                          defaultMessage:
+                            'Credentials are only used to authenticate in Strapi. All saved data will be stored in your database.',
+                        })}
+                      </Typography>
+                    </CenteredBox>
+                  </Column>
+                  <Flex direction="column" alignItems="stretch" gap={6}>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput
@@ -214,6 +204,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       value={values.password}
                       error={errors.password ? formatMessage(errors.password) : undefined}
                       endAction={
+                        // eslint-disable-next-line react/jsx-wrap-multilines
                         <FieldActionWrapper
                           onClick={(e) => {
                             e.preventDefault();
@@ -254,6 +245,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         errors.confirmPassword ? formatMessage(errors.confirmPassword) : undefined
                       }
                       endAction={
+                        // eslint-disable-next-line react/jsx-wrap-multilines
                         <FieldActionWrapper
                           onClick={(e) => {
                             e.preventDefault();

package/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js

@@ -15,7 +15,6 @@ const FormHead = ({
   isSubmitting,
   backUrl,
   regenerateUrl,
-  onErrorRegenerate,
 }) => {
   const { formatMessage } = useIntl();
   const handleRegenerate = (newKey) => {
@@ -36,7 +35,6 @@ const FormHead = ({
                 backUrl={regenerateUrl}
                 onRegenerate={handleRegenerate}
                 idToRegenerate={token?.id}
-                onError={onErrorRegenerate}
               />
             )}
             <Button
@@ -97,12 +95,10 @@ FormHead.propTypes = {
     label: PropTypes.string,
   }).isRequired,
   regenerateUrl: PropTypes.string.isRequired,
-  onErrorRegenerate: PropTypes.func,
 };
 
 FormHead.defaultProps = {
   token: undefined,
-  onErrorRegenerate: undefined,
 };
 
 export default FormHead;

package/admin/src/pages/SettingsPage/components/Tokens/Regenerate/index.js

@@ -6,14 +6,13 @@ import { Refresh } from '@strapi/icons';
 import { ConfirmDialog } from '@strapi/helper-plugin';
 import { useRegenerate } from '../../../../../hooks';
 
-export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl, onError }) => {
+export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl }) => {
   const { formatMessage } = useIntl();
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const { regenerateData, isLoadingConfirmation } = useRegenerate(
     backUrl,
     idToRegenerate,
-    onRegenerate,
-    onError
+    onRegenerate
   );
   const handleConfirmRegeneration = async () => {
     regenerateData();
@@ -63,13 +62,12 @@ export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl, onError }) =
   );
 };
 
-Regenerate.defaultProps = { onRegenerate() {}, onError: undefined };
+Regenerate.defaultProps = { onRegenerate() {} };
 
 Regenerate.propTypes = {
   onRegenerate: PropTypes.func,
   idToRegenerate: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   backUrl: PropTypes.string.isRequired,
-  onError: PropTypes.func,
 };
 
 export default Regenerate;

package/admin/src/pages/SettingsPage/components/Tokens/TokenTypeSelect/index.js

@@ -4,21 +4,21 @@ import { useIntl } from 'react-intl';
 
 import { Select, Option } from '@strapi/design-system';
 
-const TokenTypeSelect = ({ name, errors, values, onChange, canEditInputs, options, label }) => {
+const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, label }) => {
   const { formatMessage } = useIntl();
 
   return (
     <Select
-      name={name}
+      name="type"
       label={formatMessage({
         id: label.id,
         defaultMessage: label.defaultMessage,
       })}
-      value={values && values[name]}
+      value={values?.type}
       error={
-        errors[name]
+        errors.type
           ? formatMessage(
-              errors[name]?.id ? errors[name] : { id: errors[name], defaultMessage: errors[name] }
+              errors.type?.id ? errors.type : { id: errors.type, defaultMessage: errors.type }
             )
           : null
       }
@@ -38,7 +38,6 @@ const TokenTypeSelect = ({ name, errors, values, onChange, canEditInputs, option
 };
 
 TokenTypeSelect.propTypes = {
-  name: PropTypes.string,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.shape({
@@ -63,7 +62,6 @@ TokenTypeSelect.propTypes = {
 };
 
 TokenTypeSelect.defaultProps = {
-  name: 'type',
   errors: {},
   options: [],
 };

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/FormTransferTokenContainer/index.js

@@ -5,7 +5,6 @@ import { Box, Grid, GridItem, Flex, Typography } from '@strapi/design-system';
 import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
 import TokenName from '../../../../../components/Tokens/TokenName';
 import TokenDescription from '../../../../../components/Tokens/TokenDescription';
-import TokenTypeSelect from '../../../../../components/Tokens/TokenTypeSelect';
 
 const FormTransferTokenContainer = ({
   errors,
@@ -17,30 +16,6 @@ const FormTransferTokenContainer = ({
 }) => {
   const { formatMessage } = useIntl();
 
-  const typeOptions = [
-    {
-      value: 'push',
-      label: {
-        id: 'Settings.transferTokens.types.push',
-        defaultMessage: 'Push',
-      },
-    },
-    {
-      value: 'pull',
-      label: {
-        id: 'Settings.transferTokens.types.pull',
-        defaultMessage: 'Pull',
-      },
-    },
-    {
-      value: 'push-pull',
-      label: {
-        id: 'Settings.transferTokens.types.push-pull',
-        defaultMessage: 'Full Access',
-      },
-    },
-  ];
-
   return (
     <Box
       background="neutral0"
@@ -84,22 +59,6 @@ const FormTransferTokenContainer = ({
               token={transferToken}
             />
           </GridItem>
-          <GridItem key="permissions" col={6} xs={12}>
-            <TokenTypeSelect
-              name="permissions"
-              values={values}
-              errors={errors}
-              label={{
-                id: 'Settings.tokens.form.type',
-                defaultMessage: 'Token type',
-              }}
-              onChange={(value) => {
-                onChange({ target: { name: 'permissions', value } });
-              }}
-              options={typeOptions}
-              canEditInputs={canEditInputs}
-            />
-          </GridItem>
         </Grid>
       </Flex>
     </Box>