@strapi/admin 4.5.0-beta.0 → 4.5.1

package/admin/src/StrapiApp.js

@@ -10,8 +10,7 @@ import { basename, createHook } from './core/utils';
 import configureStore from './core/store/configureStore';
 import { customFields, Plugin } from './core/apis';
 import App from './pages/App';
-import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
-import MenuLogo from './assets/images/logo_strapi_menu.png';
+import Logo from './assets/images/logo-strapi-2022.svg';
 import Providers from './components/Providers';
 import languageNativeNames from './translations/languageNativeNames';
 import {
@@ -21,7 +20,7 @@ import {
   MUTATE_SINGLE_TYPES_LINKS,
 } from './exposedHooks';
 import injectionZones from './injectionZones';
-import favicon from './favicon.ico';
+import favicon from './favicon.png';
 import localStorageKey from './components/LanguageProvider/utils/localStorageKey';
 
 class StrapiApp {
@@ -29,10 +28,10 @@ class StrapiApp {
     this.customConfigurations = adminConfig.config;
     this.customBootstrapConfiguration = adminConfig.bootstrap;
     this.configurations = {
-      authLogo: AuthLogo,
+      authLogo: Logo,
       head: { favicon },
       locales: ['en'],
-      menuLogo: MenuLogo,
+      menuLogo: Logo,
       notifications: { releases: true },
       themes: { light: lightTheme, dark: darkTheme },
       translations: {},
@@ -227,7 +226,19 @@ class StrapiApp {
     }
 
     if (this.customConfigurations?.theme) {
-      merge(this.configurations.themes.light, this.customConfigurations.theme);
+      const darkTheme = this.customConfigurations.theme.dark;
+      const lightTheme = this.customConfigurations.theme.light;
+
+      if (!darkTheme && !lightTheme) {
+        console.warn(
+          `[deprecated] In future versions, Strapi will stop supporting this theme customization syntax. The theme configuration accepts a light and a dark key to customize each theme separately. See https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#theme-extension.`
+        );
+        merge(this.configurations.themes.light, this.customConfigurations.theme);
+      }
+
+      if (lightTheme) merge(this.configurations.themes.light, lightTheme);
+
+      if (darkTheme) merge(this.configurations.themes.dark, darkTheme);
     }
 
     if (this.customConfigurations?.notifications?.releases !== undefined) {

package/admin/src/assets/images/icon_offline-cloud.svg

@@ -1,5 +1,5 @@
 <svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="87" height="87" rx="43.5" fill="#F0F0FF"/>
-<path d="M34.0469 39.2969H30C27.4479 39.2969 25.2604 40.2448 23.4375 42.1406C21.6146 43.9635 20.7031 46.151 20.7031 48.7031C20.7031 51.2552 21.6146 53.4427 23.4375 55.2656C25.2604 57.0885 27.4479 58 30 58H52.75L34.0469 39.2969ZM23 28.25L25.9531 25.2969L65 64.3438L62.0469 67.2969L57.3438 62.7031H30C26.1354 62.7031 22.8177 61.3542 20.0469 58.6562C17.349 55.8854 16 52.5677 16 48.7031C16 44.9115 17.3125 41.6667 19.9375 38.9688C22.5625 36.2708 25.7344 34.849 29.4531 34.7031L23 28.25ZM61.1719 39.4062C64.1615 39.625 66.7135 40.8646 68.8281 43.125C70.9427 45.3125 72 47.9375 72 51C72 55.0104 70.3594 58.1823 67.0781 60.5156L63.6875 57.125C66.0938 55.8125 67.2969 53.7708 67.2969 51C67.2969 49.1042 66.6042 47.4635 65.2188 46.0781C63.8333 44.6927 62.1927 44 60.2969 44H56.7969V42.7969C56.7969 39.224 55.5573 36.1979 53.0781 33.7188C50.599 31.2396 47.5729 30 44 30C41.9583 30 39.9896 30.474 38.0938 31.4219L34.5938 28.0312C37.4375 26.2083 40.5729 25.2969 44 25.2969C47.9375 25.2969 51.5833 26.6823 54.9375 29.4531C58.3646 32.224 60.4427 35.5417 61.1719 39.4062Z" fill="#4945FF"/>
-<rect x="0.5" y="0.5" width="87" height="87" rx="43.5" stroke="#D9D8FF"/>
+    <rect x=".5" y=".5" width="87" height="87" rx="43.5" fill="#F0F0FF"/>
+    <path d="M34 39.3h-4c-2.6 0-4.7 1-6.6 2.8a9 9 0 0 0-2.7 6.6 9 9 0 0 0 2.7 6.6A9 9 0 0 0 30 58h22.8L34 39.3Zm-11-11 3-3 39 39-3 3-4.7-4.6H30a13.8 13.8 0 0 1-14-14c0-3.8 1.3-7 4-9.7 2.6-2.7 5.7-4.2 9.5-4.3L23 28.2Zm38.2 11.1c3 .2 5.5 1.5 7.6 3.7A11 11 0 0 1 72 51c0 4-1.6 7.2-5 9.5l-3.3-3.4a6.5 6.5 0 0 0 3.6-6.1c0-1.9-.7-3.5-2-5-1.5-1.3-3.1-2-5-2h-3.5v-1.2c0-3.6-1.2-6.6-3.7-9a13 13 0 0 0-15-2.3L34.6 28a17 17 0 0 1 20.3 1.5c3.5 2.7 5.5 6 6.3 10Z" fill="#4945FF"/>
+    <rect x=".5" y=".5" width="87" height="87" rx="43.5" stroke="#D9D8FF"/>
 </svg>

package/admin/src/assets/images/logo-strapi-2022.svg

@@ -0,0 +1,7 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M39 282c0-118 0-176.9 36.6-213.5C112.2 32 171.1 32 288.9 32h221.2c117.8 0 176.7 0 213.3 36.6C760 105.2 760 164.1 760 281.9v221.2c0 117.8 0 176.7-36.6 213.3C686.8 753 627.9 753 510.1 753H288.9c-117.8 0-176.7 0-213.3-36.6C39 679.8 39 620.9 39 503.1V281.9Z" fill="#4945FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M536.4 250.7H293.7v123.8h123.8v123.7h123.8V255.5c0-2.6-2.2-4.8-4.9-4.8Z" fill="#fff"/>
+    <path fill="#fff" d="M412.7 374.5h4.8v4.8h-4.8z"/>
+    <path d="M293.8 374.5h119c2.6 0 4.8 2.1 4.8 4.8v119h-119a4.8 4.8 0 0 1-4.8-4.9v-119Z" fill="#9593FF"/>
+    <path d="M417.5 498.2h123.8L421.6 618a2.4 2.4 0 0 1-4-1.7v-118ZM293.8 374.5h-118a2.4 2.4 0 0 1-1.7-4.1l119.7-119.7v123.8Z" fill="#9593FF"/>
+</svg>

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

@@ -32,7 +32,7 @@ const CellValue = ({ type, value }) => {
     formattedValue = formatNumber(value, {
       // Should be kept in sync with the corresponding value
       // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53
-      maximumFractionDigits: 21,
+      maximumFractionDigits: 20,
     });
   }
 

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

@@ -31,9 +31,10 @@ const fetchRelation = async (endPoint, notifyStatus) => {
 const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, contentType }) => {
   const { formatMessage } = useIntl();
   const { notifyStatus } = useNotifyAT();
-  const relationFetchEndpoint = useMemo(() => {
-    return getRequestUrl(`collection-types/${contentType.uid}/${entityId}/${name.split('.')[0]}`);
-  }, [entityId, name, contentType]);
+  const relationFetchEndpoint = useMemo(
+    () => getRequestUrl(`relations/${contentType.uid}/${entityId}/${name.split('.')[0]}`),
+    [entityId, name, contentType]
+  );
   const [isOpen, setIsOpen] = useState(false);
 
   const Label = (
@@ -106,7 +107,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
                   defaultMessage: 'This relation contains more entities than displayed',
                 })}
               >
-                <Typography>...</Typography>
+                <Typography>…</Typography>
               </MenuItem>
             )}
           </>

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Typography } from '@strapi/design-system/Typography';
+import { Tooltip } from '@strapi/design-system/Tooltip';
 import Media from './Media';
 import MultipleMedias from './MultipleMedias';
 import RelationMultiple from './RelationMultiple';
@@ -55,6 +56,15 @@ const CellContent = ({ content, fieldSchema, metadatas, name, rowId, contentType
 
       return <SingleComponent value={content} metadatas={metadatas} />;
 
+    case 'string':
+      return (
+        <Tooltip description={content}>
+          <TypographyMaxWidth ellipsis textColor="neutral800">
+            <CellValue type={type} value={content} />
+          </TypographyMaxWidth>
+        </Tooltip>
+      );
+
     default:
       return (
         <TypographyMaxWidth ellipsis textColor="neutral800">

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

@@ -3,15 +3,22 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin';
 import { useSelector } from 'react-redux';
-import isEmpty from 'lodash/isEmpty';
+import styled from 'styled-components';
+
+import { Status } from '@strapi/design-system/Status';
+import { Typography } from '@strapi/design-system/Typography';
+
 import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';
 import { getTrad } from '../../utils';
-import State from '../State';
 import TableRows from './TableRows';
 import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll';
 import ConfirmDialogDelete from './ConfirmDialogDelete';
 
+const StyledStatus = styled(Status)`
+  width: min-content;
+`;
+
 const DynamicTable = ({
   canCreate,
   canDelete,
@@ -87,9 +94,19 @@ const DynamicTable = ({
           sortable: true,
         },
         cellFormatter(cellData) {
-          const isPublished = !isEmpty(cellData.publishedAt);
+          const isPublished = cellData.publishedAt;
+          const variant = isPublished ? 'success' : 'secondary';
 
-          return <State isPublished={isPublished} />;
+          return (
+            <StyledStatus showBullet={false} variant={variant} size="S">
+              <Typography fontWeight="bold" textColor={`${variant}700`}>
+                {formatMessage({
+                  id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
+                  defaultMessage: isPublished ? 'Published' : 'Draft',
+                })}
+              </Typography>
+            </StyledStatus>
+          );
         },
       },
     ];

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

@@ -13,7 +13,8 @@ import { BaseButton } from '@strapi/design-system/BaseButton';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
-import { getTrad } from '../../../../utils';
+
+import { getTrad } from '../../../utils';
 
 const StyledAddIcon = styled(PlusCircle)`
   transform: ${({ $isOpen }) => ($isOpen ? 'rotate(45deg)' : 'rotate(0deg)')};
@@ -142,17 +143,22 @@ const AddComponentButton = ({
 };
 
 AddComponentButton.defaultProps = {
+  hasError: false,
+  hasMaxError: false,
+  hasMinError: false,
+  isDisabled: false,
+  isOpen: false,
   label: '',
   missingComponentNumber: 0,
 };
 
 AddComponentButton.propTypes = {
   label: PropTypes.string,
-  hasError: PropTypes.bool.isRequired,
-  hasMaxError: PropTypes.bool.isRequired,
-  hasMinError: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  isOpen: PropTypes.bool.isRequired,
+  hasError: PropTypes.bool,
+  hasMaxError: PropTypes.bool,
+  hasMinError: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isOpen: PropTypes.bool,
   missingComponentNumber: PropTypes.number,
   name: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,

package/admin/src/content-manager/components/DynamicZone/components/{ComponentPicker/Category/ComponentCard/index.js → ComponentCard.js}

@@ -6,13 +6,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';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
 
 const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
   width: ${pxToRem(32)} !important;
@@ -53,19 +53,14 @@ const ComponentBox = styled(Box)`
   }
 `;
 
-function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
-  const { formatMessage } = useIntl();
-  const handleClick = () => {
-    onClick(componentUid);
-  };
-
+export default function ComponentCard({ children, icon, onClick }) {
   return (
-    <button type="button" onClick={handleClick}>
+    <button type="button" onClick={onClick}>
       <ComponentBox borderRadius="borderRadius">
         <Stack spacing={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
-          <StyledFontAwesomeIcon icon={icon} />
+          <StyledFontAwesomeIcon data-testid="component-card-icon" icon={icon} />
           <Typography variant="pi" fontWeight="bold" textColor="neutral600">
-            {formatMessage(intlLabel)}
+            {children}
           </Typography>
         </Stack>
       </ComponentBox>
@@ -79,13 +74,7 @@ ComponentCard.defaultProps = {
 };
 
 ComponentCard.propTypes = {
-  componentUid: PropTypes.string.isRequired,
-  intlLabel: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }).isRequired,
+  children: PropTypes.node.isRequired,
   icon: PropTypes.string,
   onClick: PropTypes.func,
 };
-
-export default ComponentCard;

package/admin/src/content-manager/components/DynamicZone/components/{ComponentPicker/Category/index.js → ComponentCategory.js}

@@ -4,6 +4,7 @@ import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-sys
 import { Box } from '@strapi/design-system/Box';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
+
 import ComponentCard from './ComponentCard';
 
 const Grid = styled.div`
@@ -12,7 +13,7 @@ const Grid = styled.div`
   grid-gap: ${({ theme }) => theme.spaces[1]};
 `;
 
-const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggle }) => {
+const ComponentCategory = ({ category, components, variant, isOpen, onAddComponent, onToggle }) => {
   const { formatMessage } = useIntl();
 
   const handleToggle = () => {
@@ -22,24 +23,18 @@ const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggl
   return (
     <Accordion expanded={isOpen} onToggle={handleToggle} size="S">
       <AccordionToggle
-        variant={isOdd ? 'primary' : 'secondary'}
+        variant={variant}
         title={formatMessage({ id: category, defaultMessage: category })}
         togglePosition="left"
       />
       <AccordionContent>
         <Box paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>
           <Grid>
-            {components.map(({ componentUid, info: { displayName, icon } }) => {
-              return (
-                <ComponentCard
-                  key={componentUid}
-                  componentUid={componentUid}
-                  intlLabel={{ id: displayName, defaultMessage: displayName }}
-                  icon={icon}
-                  onClick={onAddComponent}
-                />
-              );
-            })}
+            {components.map(({ componentUid, info: { displayName, icon } }) => (
+              <ComponentCard key={componentUid} icon={icon} onClick={onAddComponent(componentUid)}>
+                {formatMessage({ id: displayName, defaultMessage: displayName })}
+              </ComponentCard>
+            ))}
           </Grid>
         </Box>
       </AccordionContent>
@@ -47,13 +42,19 @@ const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggl
   );
 };
 
-Category.propTypes = {
+ComponentCategory.defaultProps = {
+  components: [],
+  isOpen: false,
+  variant: 'primary',
+};
+
+ComponentCategory.propTypes = {
   category: PropTypes.string.isRequired,
-  components: PropTypes.array.isRequired,
-  isOdd: PropTypes.bool.isRequired,
-  isOpen: PropTypes.bool.isRequired,
+  components: PropTypes.array,
+  isOpen: PropTypes.bool,
   onAddComponent: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['primary', 'secondary']),
 };
 
-export default Category;
+export default ComponentCategory;

package/admin/src/content-manager/components/DynamicZone/components/{ComponentPicker/index.js → ComponentPicker.js}

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import groupBy from 'lodash/groupBy';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -6,9 +6,11 @@ import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
-import { getTrad } from '../../../../utils';
-import { useContentTypeLayout } from '../../../../hooks';
-import Category from './Category';
+
+import { getTrad } from '../../../utils';
+import { useContentTypeLayout } from '../../../hooks';
+
+import ComponentCategory from './ComponentCategory';
 
 const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   const { formatMessage } = useIntl();
@@ -32,27 +34,22 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   }, [components, getComponentLayout]);
 
   useEffect(() => {
-    if (isOpen && dynamicComponentCategories.length) {
+    if (isOpen && dynamicComponentCategories.length > 0) {
       setCategoryToOpen(dynamicComponentCategories[0].category);
     }
   }, [isOpen, dynamicComponentCategories]);
 
-  const handleAddComponentToDz = useCallback(
-    (componentUid) => {
-      onClickAddComponent(componentUid);
-      setCategoryToOpen('');
-    },
-    [onClickAddComponent]
-  );
-
-  const handleClickToggle = useCallback(
-    (categoryName) => {
-      const nextCategoryToOpen = categoryToOpen === categoryName ? '' : categoryName;
+  const handleAddComponentToDz = (componentUid) => () => {
+    onClickAddComponent(componentUid);
+    setCategoryToOpen('');
+  };
 
-      setCategoryToOpen(nextCategoryToOpen);
-    },
-    [categoryToOpen]
-  );
+  /**
+   * @type {(categoryName: string) => void}
+   */
+  const handleClickToggle = (categoryName) => {
+    setCategoryToOpen((currentCat) => (currentCat === categoryName ? '' : categoryName));
+  };
 
   if (!isOpen) {
     return null;
@@ -80,21 +77,17 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
         </Flex>
         <Box paddingTop={2}>
           <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
-            {dynamicComponentCategories.map(({ category, components }, index) => {
-              return (
-                <Category
-                  key={category}
-                  category={category}
-                  components={components}
-                  isOdd={index % 2 === 1}
-                  isOpen={category === categoryToOpen}
-                  // TODO?
-                  // isFirst={index === 0}
-                  onAddComponent={handleAddComponentToDz}
-                  onToggle={handleClickToggle}
-                />
-              );
-            })}
+            {dynamicComponentCategories.map(({ category, components }, index) => (
+              <ComponentCategory
+                key={category}
+                category={category}
+                components={components}
+                onAddComponent={handleAddComponentToDz}
+                isOpen={category === categoryToOpen}
+                onToggle={handleClickToggle}
+                variant={index % 2 === 1 ? 'primary' : 'secondary'}
+              />
+            ))}
           </KeyboardNavigable>
         </Box>
       </Box>
@@ -102,10 +95,15 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   );
 };
 
+ComponentPicker.defaultProps = {
+  components: [],
+  isOpen: false,
+};
+
 ComponentPicker.propTypes = {
-  components: PropTypes.array.isRequired,
-  isOpen: PropTypes.bool.isRequired,
+  components: PropTypes.array,
+  isOpen: PropTypes.bool,
   onClickAddComponent: PropTypes.func.isRequired,
 };
 
-export default memo(ComponentPicker);
+export default ComponentPicker;

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

@@ -0,0 +1,195 @@
+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';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import { Stack } from '@strapi/design-system/Stack';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+import Trash from '@strapi/icons/Trash';
+import ArrowDown from '@strapi/icons/ArrowDown';
+import ArrowUp from '@strapi/icons/ArrowUp';
+
+import { useContentTypeLayout } from '../../../hooks';
+import { getTrad } from '../../../utils';
+
+import FieldComponent from '../../FieldComponent';
+
+const IconButtonCustom = styled(IconButton)`
+  background-color: transparent;
+
+  svg path {
+    fill: ${({ theme, expanded }) =>
+      expanded ? theme.colors.primary600 : theme.colors.neutral600};
+  }
+`;
+
+const StyledBox = styled(Box)`
+  > div:first-child {
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  }
+`;
+
+const AccordionContentRadius = styled(Box)`
+  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
+`;
+
+const Rectangle = styled(Box)`
+  width: ${({ theme }) => theme.spaces[2]};
+  height: ${({ theme }) => theme.spaces[4]};
+`;
+
+const DynamicZoneComponent = ({
+  componentUid,
+  formErrors,
+  index,
+  isFieldAllowed,
+  onMoveComponentDownClick,
+  onMoveComponentUpClick,
+  name,
+  onRemoveComponentClick,
+  showDownIcon,
+  showUpIcon,
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const { formatMessage } = useIntl();
+  const { getComponentLayout } = useContentTypeLayout();
+  const { modifiedData } = useCMEditViewDataManager();
+  const { icon, friendlyName, mainValue } = useMemo(() => {
+    const componentLayoutData = getComponentLayout(componentUid);
+
+    const {
+      info: { icon, displayName },
+    } = componentLayoutData;
+
+    const mainFieldKey = get(componentLayoutData, ['settings', 'mainField'], 'id');
+
+    const mainField = get(modifiedData, [name, index, mainFieldKey]) ?? '';
+
+    const displayedValue = mainFieldKey === 'id' ? '' : mainField.trim();
+
+    const mainValue = displayedValue.length > 0 ? ` - ${displayedValue}` : displayedValue;
+
+    return { friendlyName: displayName, icon, mainValue };
+  }, [componentUid, getComponentLayout, modifiedData, name, index]);
+
+  const fieldsErrors = Object.keys(formErrors).filter((errorKey) => {
+    const errorKeysArray = errorKey.split('.');
+
+    if (`${errorKeysArray[0]}.${errorKeysArray[1]}` === `${name}.${index}`) {
+      return true;
+    }
+
+    return false;
+  });
+
+  let errorMessage;
+
+  if (fieldsErrors.length > 0) {
+    errorMessage = formatMessage({
+      id: getTrad('components.DynamicZone.error-message'),
+      defaultMessage: 'The component contains error(s)',
+    });
+  }
+
+  const handleToggle = () => {
+    setIsOpen((s) => !s);
+  };
+
+  return (
+    <Box>
+      <Flex justifyContent="center">
+        <Rectangle background="neutral200" />
+      </Flex>
+      <StyledBox hasRadius>
+        <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
+          <AccordionToggle
+            startIcon={<FontAwesomeIcon icon={icon} />}
+            action={
+              <Stack horizontal spacing={0} expanded={isOpen}>
+                {showDownIcon && (
+                  <IconButtonCustom
+                    noBorder
+                    label={formatMessage({
+                      id: getTrad('components.DynamicZone.move-down-label'),
+                      defaultMessage: 'Move component down',
+                    })}
+                    onClick={onMoveComponentDownClick}
+                    icon={<ArrowDown />}
+                  />
+                )}
+                {showUpIcon && (
+                  <IconButtonCustom
+                    noBorder
+                    label={formatMessage({
+                      id: getTrad('components.DynamicZone.move-up-label'),
+                      defaultMessage: 'Move component up',
+                    })}
+                    onClick={onMoveComponentUpClick}
+                    icon={<ArrowUp />}
+                  />
+                )}
+                {isFieldAllowed && (
+                  <IconButtonCustom
+                    noBorder
+                    label={formatMessage(
+                      {
+                        id: getTrad('components.DynamicZone.delete-label'),
+                        defaultMessage: 'Delete {name}',
+                      },
+                      { name: friendlyName }
+                    )}
+                    onClick={onRemoveComponentClick}
+                    icon={<Trash />}
+                  />
+                )}
+              </Stack>
+            }
+            title={`${friendlyName}${mainValue}`}
+            togglePosition="left"
+          />
+          <AccordionContent>
+            <AccordionContentRadius background="neutral0">
+              <FieldComponent
+                componentUid={componentUid}
+                icon={icon}
+                name={`${name}.${index}`}
+                isFromDynamicZone
+              />
+            </AccordionContentRadius>
+          </AccordionContent>
+        </Accordion>
+      </StyledBox>
+    </Box>
+  );
+};
+
+DynamicZoneComponent.defaultProps = {
+  formErrors: {},
+  index: 0,
+  isFieldAllowed: true,
+  showDownIcon: true,
+  showUpIcon: true,
+};
+
+DynamicZoneComponent.propTypes = {
+  componentUid: PropTypes.string.isRequired,
+  formErrors: PropTypes.object,
+  index: PropTypes.number,
+  isFieldAllowed: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onMoveComponentDownClick: PropTypes.func.isRequired,
+  onMoveComponentUpClick: PropTypes.func.isRequired,
+  onRemoveComponentClick: PropTypes.func.isRequired,
+  showDownIcon: PropTypes.bool,
+  showUpIcon: PropTypes.bool,
+};
+
+export default DynamicZoneComponent;