@strapi/admin 4.0.0-beta.12 → 4.0.0-beta.16

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

@@ -9,12 +9,13 @@ import PluginsInitializer from '../PluginsInitializer';
 import RBACProvider from '../RBACProvider';
 import { fetchAppInfo, fetchCurrentUserPermissions, fetchStrapiLatestRelease } from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
+import { getFullName } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 
 const AuthenticatedApp = () => {
   const userInfo = auth.getUserInfo();
-  const userName = get(userInfo, 'username') || `${userInfo.firstname} ${userInfo.lastname}`;
+  const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
   const { showReleaseNotification } = useConfigurations();
   const [

package/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js

@@ -10,7 +10,6 @@ import { Link } from '@strapi/design-system/Link';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { H1 } from '@strapi/design-system/Text';
 import { Typography } from '@strapi/design-system/Typography';
 import { Content, IconBox, Overlay } from './Overlay';
 
@@ -48,7 +47,9 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
         <Content size={6}>
           <Stack size={2}>
             <Flex justifyContent="center">
-              <H1>{formatMessage(title)}</H1>
+              <Typography as="h1" variant="alpha">
+                {formatMessage(title)}
+              </Typography>
             </Flex>
             <Flex justifyContent="center">
               <Typography as="h2" textColor="neutral600" fontSize={4} fontWeight="regular">

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

@@ -6,6 +6,7 @@ const loadCss = async () => {
     /* webpackChunkName: "fontawesome-css-all" */ '@fortawesome/fontawesome-free/css/all.css'
   );
   await import(/* webpackChunkName: "fontawesome-js" */ '@fortawesome/fontawesome-free/js/all.min');
+  await import(/* webpackChunkName: "cropper-css" */ 'cropperjs/dist/cropper.css');
 };
 
 loadCss();

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

@@ -15,7 +15,7 @@ import {
 } from '@strapi/design-system/MainNav';
 import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import Write from '@strapi/icons/Write';
 import Exit from '@strapi/icons/Exit';
@@ -144,20 +144,20 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
           <FocusTrap onEscape={handleToggleUserLinks}>
             <Stack size={0}>
               <LinkUser onClick={handleToggleUserLinks} to="/me">
-                <Text>
+                <Typography>
                   {formatMessage({
                     id: 'app.components.LeftMenu.profile',
                     defaultMessage: 'Profile',
                   })}
-                </Text>
+                </Typography>
               </LinkUser>
               <LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
-                <Text textColor="danger600">
+                <Typography textColor="danger600">
                   {formatMessage({
                     id: 'app.components.LeftMenu.logout',
                     defaultMessage: 'Logout',
                   })}
-                </Text>
+                </Typography>
                 <Exit />
               </LinkUser>
             </Stack>

package/admin/src/components/{UpgradePlanModal /index.js → UpgradePlanModal/index.js}

@@ -8,7 +8,7 @@ import { IconButton } from '@strapi/design-system/IconButton';
 import { LinkButton } from '@strapi/design-system/LinkButton';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text, H1 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import ExternalLink from '@strapi/icons/ExternalLink';
 import Cross from '@strapi/icons/Cross';
@@ -48,10 +48,6 @@ const UpgradeContainer = styled(Flex)`
   }
 `;
 
-const TextBold = styled(Text)`
-  font-weight: 700;
-`;
-
 const StackFlexStart = styled(Stack)`
   align-items: flex-start;
   max-width: ${400 / 16}rem;
@@ -82,26 +78,26 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
               <IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />
             </CloseButtonContainer>
             <StackFlexStart size={6}>
-              <TextBold textColor="primary600">
+              <Typography fontWeight="bold" textColor="primary600">
                 {formatMessage({
                   id: 'app.components.UpgradePlanModal.text-ce',
                   defaultMessage: 'COMMUNITY EDITION',
                 })}
-              </TextBold>
+              </Typography>
               <Stack size={2}>
-                <H1 as="h2" id="upgrade-plan">
+                <Typography variant="alpha" as="h2" id="upgrade-plan">
                   {formatMessage({
                     id: 'app.components.UpgradePlanModal.limit-reached',
                     defaultMessage: 'You have reached the limit',
                   })}
-                </H1>
-                <Text>
+                </Typography>
+                <Typography>
                   {formatMessage({
                     id: 'app.components.UpgradePlanModal.text-power',
                     defaultMessage:
                       'Unlock the full power of Strapi by upgrading your plan to the Enterprise Edition',
                   })}
-                </Text>
+                </Typography>
               </Stack>
               <LinkButton href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
                 {formatMessage({

package/admin/src/content-manager/components/AttributeFilter/hooks/useAllowedAttributes.js

@@ -2,16 +2,11 @@ import get from 'lodash/get';
 import { useRBACProvider, findMatchingPermissions } from '@strapi/helper-plugin';
 
 const NOT_ALLOWED_FILTERS = ['json', 'component', 'media', 'richtext', 'dynamiczone', 'password'];
+const TIMESTAMPS = ['createdAt', 'updatedAt'];
 
 const useAllowedAttributes = (contentType, slug) => {
   const { allPermissions } = useRBACProvider();
 
-  let timestamps = get(contentType, ['options', 'timestamps']);
-
-  if (!Array.isArray(timestamps)) {
-    timestamps = [];
-  }
-
   const readPermissionsForSlug = findMatchingPermissions(allPermissions, [
     {
       action: 'plugin::content-manager.explorer.read',
@@ -33,7 +28,7 @@ const useAllowedAttributes = (contentType, slug) => {
         return false;
       }
 
-      if (!readPermissionForAttr.includes(attr) && attr !== 'id' && !timestamps.includes(attr)) {
+      if (!readPermissionForAttr.includes(attr) && attr !== 'id' && !TIMESTAMPS.includes(attr)) {
         return false;
       }
 

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

@@ -6,7 +6,7 @@ import PlusCircle from '@strapi/icons/PlusCircle';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
 
@@ -23,45 +23,64 @@ const IconWrapper = styled.span`
   }
 `;
 
-const ComponentInitializer = ({ isReadOnly, onClick }) => {
+const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Box
-      as="button"
-      background="neutral100"
-      borderColor="neutral200"
-      disabled={isReadOnly}
-      hasRadius
-      onClick={onClick}
-      paddingTop={9}
-      paddingBottom={9}
-      type="button"
-    >
-      <Stack size={2}>
-        <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
-          <IconWrapper>
-            <PlusCircle />
-          </IconWrapper>
-        </Flex>
-        <Flex justifyContent="center">
-          <Text textColor="primary600" small bold>
-            {formatMessage({
-              id: getTrad('components.empty-repeatable'),
-              defaultMessage: 'No entry yet. Click on the button below to add one.',
-            })}
-          </Text>
-        </Flex>
-      </Stack>
-    </Box>
+    <>
+      <Box
+        as="button"
+        background="neutral100"
+        borderColor={error ? 'danger600' : 'neutral200'}
+        disabled={isReadOnly}
+        hasRadius
+        onClick={onClick}
+        paddingTop={9}
+        paddingBottom={9}
+        type="button"
+      >
+        <Stack size={2}>
+          <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
+            <IconWrapper>
+              <PlusCircle />
+            </IconWrapper>
+          </Flex>
+          <Flex justifyContent="center">
+            <Typography textColor="primary600" variant="pi" fontWeight="bold">
+              {formatMessage({
+                id: getTrad('components.empty-repeatable'),
+                defaultMessage: 'No entry yet. Click on the button below to add one.',
+              })}
+            </Typography>
+          </Flex>
+        </Stack>
+      </Box>
+      {error?.id && (
+        <Typography textColor="danger600" variant="pi">
+          {formatMessage(
+            {
+              id: error.id,
+              defaultMessage: error.defaultMessage,
+            },
+            error.values
+          )}
+        </Typography>
+      )}
+    </>
   );
 };
 
 ComponentInitializer.defaultProps = {
+  error: undefined,
   isReadOnly: false,
 };
 
 ComponentInitializer.propTypes = {
+  error: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }),
   isReadOnly: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
 };

package/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Flex } from '@strapi/design-system/Flex';
-import { TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 const Wrapper = styled(Flex)`
   position: relative;
@@ -22,7 +22,9 @@ const Wrapper = styled(Flex)`
 const FileWrapper = ({ children, ...props }) => {
   return (
     <Wrapper justifyContent="center" alignItems="center" as="span" {...props}>
-      <TableLabel textColor="neutral600">{children}</TableLabel>
+      <Typography variant="sigma" textColor="neutral600">
+        {children}
+      </Typography>
     </Wrapper>
   );
 };

package/admin/src/content-manager/components/DynamicTable/CellContent/Relation/PopoverContent.js

@@ -3,7 +3,7 @@ import { useQuery } from 'react-query';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Loader } from '@strapi/design-system/Loader';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { axiosInstance } from '../../../../../core/utils';
@@ -52,19 +52,19 @@ const PopoverContent = ({ fieldSchema, name, rowId, targetModel, queryInfos }) =
 
         return (
           <Box as="li" key={entry.id} padding={3}>
-            <Text>
+            <Typography>
               {value ? (
                 <CellValue type={fieldSchema.schema.type} value={entry[fieldSchema.name]} />
               ) : (
                 '-'
               )}
-            </Text>
+            </Typography>
           </Box>
         );
       })}
       {data?.pagination.total > 10 && (
         <Box as="li" padding={3}>
-          <Text>[...]</Text>
+          <Typography>[...]</Typography>
         </Box>
       )}
     </ul>

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

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@strapi/design-system/IconButton';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { Badge } from '@strapi/design-system/Badge';
 import { Flex } from '@strapi/design-system/Flex';
@@ -34,9 +34,9 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
 
   if (SINGLE_RELATIONS.includes(fieldSchema.relation)) {
     return (
-      <Text textColor="neutral800">
+      <Typography textColor="neutral800">
         <CellValue type={metadatas.mainField.schema.type} value={value[metadatas.mainField.name]} />
-      </Text>
+      </Typography>
     );
   }
 
@@ -46,7 +46,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
     <Flex {...stopPropagation}>
       <RelationCountBadge>{value.count}</RelationCountBadge>
       <Box paddingLeft={2}>
-        <Text textColor="neutral800">
+        <Typography textColor="neutral800">
           {formatMessage(
             {
               id: 'content-manager.containers.ListPage.items',
@@ -54,7 +54,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
             },
             { number: value.count }
           )}
-        </Text>
+        </Typography>
       </Box>
       {value.count > 0 && (
         <ActionWrapper>

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

@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import Media from './Media';
 import MultipleMedias from './MultipleMedias';
 import Relation from './Relation';
 import CellValue from './CellValue';
 
-const TextMaxWidth = styled(Text)`
+const TypographyMaxWidth = styled(Typography)`
   max-width: 300px;
 `;
 
 const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId }) => {
   if (content === null || content === undefined) {
-    return <Text textColor="neutral800">-</Text>;
+    return <Typography textColor="neutral800">-</Typography>;
   }
 
   if (fieldSchema.type === 'media' && !fieldSchema.multiple) {
@@ -38,9 +38,9 @@ const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId
   }
 
   return (
-    <TextMaxWidth ellipsis textColor="neutral800">
+    <TypographyMaxWidth ellipsis textColor="neutral800">
       <CellValue type={fieldSchema.type} value={content} />
-    </TextMaxWidth>
+    </TypographyMaxWidth>
   );
 };
 

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

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Trash from '@strapi/icons/Trash';
@@ -27,12 +27,12 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
       <DialogBody icon={<ExclamationMarkCircle />}>
         <Stack size={2}>
           <Flex justifyContent="center">
-            <Text id="confirm-description">
+            <Typography id="confirm-description">
               {formatMessage({
                 id: 'components.popUpWarning.message',
                 defaultMessage: 'Are you sure you want to delete this?',
               })}
-            </Text>
+            </Typography>
           </Flex>
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />

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

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Trash from '@strapi/icons/Trash';
@@ -28,12 +28,12 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
       <DialogBody icon={<ExclamationMarkCircle />}>
         <Stack size={2}>
           <Flex justifyContent="center">
-            <Text id="confirm-description">
+            <Typography id="confirm-description">
               {formatMessage({
                 id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
                 defaultMessage: 'Are you sure you want to delete these entries?',
               })}
-            </Text>
+            </Typography>
           </Flex>
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />

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

@@ -13,6 +13,7 @@ import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { usePluginsQueryParams } from '../../../hooks';
 import CellContent from '../CellContent';
+import { getFullName } from '../../../../utils';
 
 const TableRows = ({
   canCreate,
@@ -51,7 +52,7 @@ const TableRows = ({
             key={data.id}
             {...onRowClick({
               fn: () => {
-                trackUsage('willEditEntryFromButton');
+                trackUsage('willEditEntryFromList');
                 push({
                   pathname: `${pathname}/${data.id}`,
                   state: { from: pathname },
@@ -69,7 +70,7 @@ const TableRows = ({
                       id: 'app.component.table.select.one-entry',
                       defaultMessage: `Select {target}`,
                     },
-                    { target: `${data.firstname} ${data.lastname}` }
+                    { target: getFullName(data.firstname, data.lastname) }
                   )}
                   checked={isChecked}
                   onChange={() => {
@@ -141,7 +142,11 @@ const TableRows = ({
                   {canDelete && (
                     <Box paddingLeft={1}>
                       <IconButton
-                        onClick={() => onClickDelete(data.id)}
+                        onClick={() => {
+                          trackUsage('willDeleteEntryFromList');
+
+                          onClickDelete(data.id);
+                        }}
                         label={formatMessage(
                           { id: 'app.component.table.delete', defaultMessage: 'Delete {target}' },
                           { target: itemLineText }

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

@@ -81,6 +81,7 @@ const DynamicTable = ({
       headers={tableHeaders}
       onConfirmDelete={onConfirmDelete}
       onConfirmDeleteAll={onConfirmDeleteAll}
+      onOpenDeleteAllModalTrackedEvent="willBulkDeleteEntries"
       rows={rows}
       withBulkActions
       withMainAction={canDelete && isBulkable}
@@ -108,7 +109,6 @@ DynamicTable.propTypes = {
     contentType: PropTypes.shape({
       attributes: PropTypes.object.isRequired,
       metadatas: PropTypes.object.isRequired,
-      info: PropTypes.shape({ label: PropTypes.string.isRequired }).isRequired,
       layouts: PropTypes.shape({
         list: PropTypes.array.isRequired,
         editRelations: PropTypes.array,

package/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/index.js

@@ -12,7 +12,7 @@ import PlusCircle from '@strapi/icons/PlusCircle';
 import { BaseButton } from '@strapi/design-system/BaseButton';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text, ButtonText } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../../../utils';
 
 const StyledAddIcon = styled(PlusCircle)`
@@ -29,8 +29,12 @@ const StyledAddIcon = styled(PlusCircle)`
 
 const StyledButton = styled(BaseButton)`
   border-radius: 26px;
+  border-color: ${({ theme }) => theme.colors.neutral150};
   background: ${({ theme }) => theme.colors.neutral0};
-  padding: ${({ theme }) => theme.spaces[3]};
+  padding-top: ${({ theme }) => theme.spaces[3]};
+  padding-right: ${({ theme }) => theme.spaces[4]};
+  padding-bottom: ${({ theme }) => theme.spaces[3]};
+  padding-left: ${({ theme }) => theme.spaces[4]};
 
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 
@@ -43,7 +47,7 @@ const StyledButton = styled(BaseButton)`
   }
   &:hover {
     color: ${({ theme }) => theme.colors.primary600} !important;
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600} !important;
     }
 
@@ -57,7 +61,7 @@ const StyledButton = styled(BaseButton)`
     }
   }
   &:active {
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600};
     }
     ${StyledAddIcon} {
@@ -124,9 +128,13 @@ const AddComponentButton = ({
               <BoxFullHeight aria-hidden paddingRight={2}>
                 <StyledAddIcon $isOpen={isOpen} $hasError={hasError && !isOpen} />
               </BoxFullHeight>
-              <ButtonText textColor={hasError && !isOpen ? 'danger600' : 'neutral500'} small>
+              <Typography
+                variant="pi"
+                fontWeight="bold"
+                textColor={hasError && !isOpen ? 'danger600' : 'neutral500'}
+              >
                 {buttonLabel}
-              </ButtonText>
+              </Typography>
             </Flex>
           </StyledButton>
         </Box>

package/admin/src/content-manager/components/DynamicZone/components/Component/Rectangle.js

@@ -11,7 +11,7 @@ const StyledBox = styled(Box)`
 const Rectangle = () => {
   return (
     <Flex justifyContent="center">
-      <StyledBox background="primary200" />
+      <StyledBox background="neutral200" />
     </Flex>
   );
 };