@strapi/admin 4.5.4 → 4.5.6

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

@@ -1,16 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
 
-const loadCss = async () => {
-  await import(/* webpackChunkName: "fontawesome-css" */ 'font-awesome/css/font-awesome.min.css');
-  await import(
-    /* 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();
-
 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/content-manager/components/ComponentIcon/ComponentIcon.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Flex } from '@strapi/design-system';
+
+const WIDTH_S = 5;
+const WIDTH_M = 8;
+
+const Wrapper = styled(Flex)`
+  border-radius: ${({ showBackground }) => (showBackground ? `50%` : 0)};
+  color: ${({ theme }) => theme.colors.neutral600};
+  height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
+  width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
+
+  svg {
+    height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
+    width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
+  }
+`;
+
+export function ComponentIcon({ showBackground = true, size = 'M' }) {
+  return (
+    <Wrapper
+      alignItems="center"
+      background={showBackground ? 'neutral200' : null}
+      justifyContent="center"
+      size={size}
+      showBackground={showBackground}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path
+          d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
+          fill="currentColor"
+        />
+      </svg>
+    </Wrapper>
+  );
+}
+
+ComponentIcon.defaultProps = {
+  showBackground: true,
+  size: 'M',
+};
+
+ComponentIcon.propTypes = {
+  showBackground: PropTypes.bool,
+  size: PropTypes.string,
+};

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

@@ -0,0 +1 @@
+export * from './ComponentIcon';

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

@@ -7,23 +7,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { Box } from '@strapi/design-system/Box';
 import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { pxToRem } from '@strapi/helper-plugin';
 
-const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
-  width: ${pxToRem(32)} !important;
-  height: ${pxToRem(32)} !important;
-  padding: ${pxToRem(9)};
-  border-radius: ${pxToRem(64)};
-  background: ${({ theme }) => theme.colors.neutral150};
-  path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
+import { ComponentIcon } from '../../ComponentIcon';
 
 const ComponentBox = styled(Box)`
   flex-shrink: 0;
@@ -35,46 +25,42 @@ const ComponentBox = styled(Box)`
   justify-content: center;
   align-items: center;
 
-  &.active,
+  &:focus,
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.primary200};
     background: ${({ theme }) => theme.colors.primary100};
 
-    ${StyledFontAwesomeIcon} {
-      background: ${({ theme }) => theme.colors.primary200};
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
     }
 
-    ${Typography} {
+    /* > Stack > ComponentIcon */
+    > div > div:first-child {
+      background: ${({ theme }) => theme.colors.primary200};
       color: ${({ theme }) => theme.colors.primary600};
     }
   }
 `;
 
-export default function ComponentCard({ children, icon, onClick }) {
+export default function ComponentCard({ children, onClick }) {
   return (
-    <button type="button" onClick={onClick}>
-      <ComponentBox borderRadius="borderRadius">
-        <Stack spacing={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
-          <StyledFontAwesomeIcon data-testid="component-card-icon" icon={icon} />
-          <Typography variant="pi" fontWeight="bold" textColor="neutral600">
-            {children}
-          </Typography>
-        </Stack>
-      </ComponentBox>
-    </button>
+    <ComponentBox as="button" type="button" onClick={onClick} hasRadius>
+      <Stack spacing={1} alignItems="center" justifyContent="center">
+        <ComponentIcon />
+
+        <Typography variant="pi" fontWeight="bold" textColor="neutral600">
+          {children}
+        </Typography>
+      </Stack>
+    </ComponentBox>
   );
 }
 
 ComponentCard.defaultProps = {
-  icon: 'dice-d6',
   onClick() {},
 };
 
 ComponentCard.propTypes = {
   children: PropTypes.node.isRequired,
-  icon: PropTypes.string,
   onClick: PropTypes.func,
 };

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

@@ -30,8 +30,8 @@ const ComponentCategory = ({ category, components, variant, isOpen, onAddCompone
       <AccordionContent>
         <Box paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>
           <Grid>
-            {components.map(({ componentUid, info: { displayName, icon } }) => (
-              <ComponentCard key={componentUid} icon={icon} onClick={onAddComponent(componentUid)}>
+            {components.map(({ componentUid, info: { displayName } }) => (
+              <ComponentCard key={componentUid} onClick={onAddComponent(componentUid)}>
                 {formatMessage({ id: displayName, defaultMessage: displayName })}
               </ComponentCard>
             ))}

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

@@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import get from 'lodash/get';
 
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
@@ -20,6 +19,7 @@ import ArrowUp from '@strapi/icons/ArrowUp';
 import { useContentTypeLayout } from '../../../hooks';
 import { getTrad } from '../../../utils';
 
+import { ComponentIcon } from '../../ComponentIcon';
 import FieldComponent from '../../FieldComponent';
 
 const IconButtonCustom = styled(IconButton)`
@@ -73,7 +73,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;
 
@@ -111,7 +111,7 @@ const DynamicZoneComponent = ({
       <StyledBox hasRadius>
         <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
           <AccordionToggle
-            startIcon={icon && <FontAwesomeIcon icon={icon} />}
+            startIcon={<ComponentIcon showBackground={false} size="S" />}
             action={
               <Stack horizontal spacing={0} expanded={isOpen}>
                 {showDownIcon && (

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

@@ -104,6 +104,11 @@ const reducer = (state, action) =>
           (value) => value.type === 'component' && value.repeatable
         )(componentLayoutData.attributes);
 
+        const nonRepeatableComponentPaths = recursivelyFindPathsBasedOnCondition(
+          allComponents,
+          (value) => value.type === 'component' && !value.repeatable
+        )(componentLayoutData.attributes);
+
         const componentDataStructure = relationPaths.reduce((acc, current) => {
           const [componentName] = current.split('.');
 
@@ -112,8 +117,21 @@ const reducer = (state, action) =>
            * has another repeatable component inside of it we
            * don't need to attach the array at this point because that will be
            * done again deeper in the nest.
+           *
+           * We also need to handle cases with single components nested within
+           * repeatables by checking that the relation path does not match a
+           * non-repeatable component path. This accounts for component
+           * structures such as:
+           * - outer_single_compo
+           *    - level_one_repeatable
+           *        - level_two_single_component
+           *            - level_three_repeatable
            */
-          if (!repeatableFields.includes(componentName)) {
+
+          if (
+            !repeatableFields.includes(componentName) &&
+            !nonRepeatableComponentPaths.includes(componentName)
+          ) {
             set(acc, current, []);
           }
 
@@ -128,7 +146,6 @@ const reducer = (state, action) =>
 
         break;
       }
-
       case 'LOAD_RELATION': {
         const initialDataPath = ['initialData', ...action.keys];
         const modifiedDataPath = ['modifiedData', ...action.keys];

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/InputJSON/FieldWrapper.js

@@ -3,12 +3,18 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Field } from '@strapi/design-system/Field';
 
-const FieldWrapper = ({ name, hint, error, children }) => {
+const FieldWrapper = ({ name, hint, error, children, required }) => {
   const { formatMessage } = useIntl();
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
 
   return (
-    <Field name={name} hint={hint && formatMessage(hint)} error={errorMessage} id={name}>
+    <Field
+      name={name}
+      hint={hint && formatMessage(hint)}
+      error={errorMessage}
+      id={name}
+      required={required}
+    >
       {children}
     </Field>
   );
@@ -17,6 +23,7 @@ const FieldWrapper = ({ name, hint, error, children }) => {
 FieldWrapper.defaultProps = {
   hint: undefined,
   error: '',
+  required: false,
 };
 
 FieldWrapper.propTypes = {
@@ -27,6 +34,7 @@ FieldWrapper.propTypes = {
   }),
   error: PropTypes.string,
   children: PropTypes.node.isRequired,
+  required: PropTypes.bool,
 };
 
 export default FieldWrapper;

package/admin/src/content-manager/components/InputJSON/Label.js

@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { FieldLabel } from '@strapi/design-system/Field';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
 
-const LabelAction = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-const Label = ({ intlLabel, labelAction, name, required }) => {
+const Label = ({ intlLabel, labelAction, name }) => {
   const { formatMessage } = useIntl();
   const label = intlLabel?.id
     ? formatMessage(
@@ -21,19 +12,13 @@ const Label = ({ intlLabel, labelAction, name, required }) => {
       )
     : name;
 
-  return (
-    <Flex>
-      <FieldLabel required={required}>{label}</FieldLabel>
-      {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-    </Flex>
-  );
+  return <FieldLabel action={labelAction}>{label}</FieldLabel>;
 };
 
 Label.defaultProps = {
   id: undefined,
   intlLabel: undefined,
   labelAction: undefined,
-  required: false,
 };
 
 Label.propTypes = {
@@ -45,7 +30,6 @@ Label.propTypes = {
   }),
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
 };
 
 export default Label;

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

@@ -157,13 +157,17 @@ class InputJSON extends React.Component {
     }
 
     return (
-      <FieldWrapper name={this.props.name} hint={this.props.description} error={this.props.error}>
+      <FieldWrapper
+        name={this.props.name}
+        hint={this.props.description}
+        error={this.props.error}
+        required={this.props.required}
+      >
         <Stack spacing={1}>
           <Label
             intlLabel={this.props.intlLabel}
-            labelAction={this.props.labelAction}
             name={this.props.name}
-            required={this.props.required}
+            labelAction={this.props.labelAction}
           />
           <StyledBox error={this.props.error}>
             <EditorWrapper disabled={this.props.disabled}>

package/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -226,15 +226,13 @@ const RelationInput = ({
   }, [previewRelationsLength, relations]);
 
   return (
-    <Field error={error} name={name} hint={description} id={id}>
+    <Field error={error} name={name} hint={description} id={id} required={required}>
       <Relation
         totalNumberOfRelations={totalNumberOfRelations}
         size={size}
         search={
           <>
-            <FieldLabel action={labelAction} required={required}>
-              {label}
-            </FieldLabel>
+            <FieldLabel action={labelAction}>{label}</FieldLabel>
             <ReactSelect
               // position fixed doesn't update position on scroll
               // react select doesn't update menu position on options change

package/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js

@@ -8,7 +8,6 @@ import { Flex } from '@strapi/design-system/Flex';
 import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
 
 const AccordionFooter = styled(Box)`
-  overflow: hidden;
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
   border-left: 1px solid ${({ theme }) => theme.colors.neutral200};

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

@@ -54,9 +54,7 @@ const RepeatableComponent = ({
     [componentUid, getComponentLayout]
   );
 
-  const nextTempKey = useMemo(() => {
-    return getMaxTempKey(componentValue || []) + 1;
-  }, [componentValue]);
+  const nextTempKey = useMemo(() => getMaxTempKey(componentValue || []) + 1, [componentValue]);
 
   const componentErrorKeys = getComponentErrorKeys(name, formErrors);
 

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -22,7 +22,9 @@ import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
 const matchByTitle = (links, search) =>
-  matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] });
+  search
+    ? matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] })
+    : sortBy(links, (object) => object.title.toLowerCase());
 
 const LeftMenu = () => {
   const [search, setSearch] = useState('');
@@ -52,9 +54,7 @@ const LeftMenu = () => {
         defaultMessage: 'Collection Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlCollectionTypeLinks, search), (object) =>
-        object.title.toLowerCase()
-      ),
+      links: matchByTitle(intlCollectionTypeLinks, search),
     },
     {
       id: 'singleTypes',
@@ -63,9 +63,7 @@ const LeftMenu = () => {
         defaultMessage: 'Single Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlSingleTypeLinks, search), (object) =>
-        object.title.toLowerCase()
-      ),
+      links: matchByTitle(intlSingleTypeLinks, search),
     },
   ];
 

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/pages/EditView/Header/index.js

@@ -74,7 +74,7 @@ const Header = ({
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
           </Button>
         )}
-        <Button disabled={!didChangeData} isLoading={status === 'submit-pending'} type="submit">
+        <Button disabled={!didChangeData} loading={status === 'submit-pending'} type="submit">
           {formatMessage({
             id: getTrad('containers.Edit.submit'),
             defaultMessage: 'Save',

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

@@ -5,6 +5,7 @@ import isEqual from 'lodash/isEqual';
 import upperFirst from 'lodash/upperFirst';
 import pick from 'lodash/pick';
 import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
@@ -35,12 +36,12 @@ const ListSettingsView = ({ layout, slug }) => {
 
   const [showWarningSubmit, setWarningSubmit] = useState(false);
   const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);
-  const [isModalFormOpen, setIsModalFormOpen] = useState(false);
-  const toggleModalForm = () => setIsModalFormOpen((prevState) => !prevState);
   const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
     init(initialState, layout)
   );
   const { fieldToEdit, fieldForm, initialData, modifiedData } = reducerState;
+  const isModalFormOpen = !isEmpty(fieldForm);
+
   const { attributes } = layout;
   const displayedFields = modifiedData.layouts.list;
 
@@ -110,19 +111,16 @@ const ListSettingsView = ({ layout, slug }) => {
       type: 'SET_FIELD_TO_EDIT',
       fieldToEdit,
     });
-    toggleModalForm();
   };
 
   const handleCloseModal = () => {
     dispatch({
       type: 'UNSET_FIELD_TO_EDIT',
     });
-    toggleModalForm();
   };
 
   const handleSubmitFieldEdit = (e) => {
     e.preventDefault();
-    toggleModalForm();
     dispatch({
       type: 'SUBMIT_FIELD_FORM',
     });