@strapi/admin 4.2.0-alpha.O → 4.2.0-beta.2

package/admin/src/app.js

@@ -1,6 +1,9 @@
+const config = {
+  locales: ['fr'],
+};
+const bootstrap = () => {};
+
 export default {
-  config: {
-    locales: ['fr'],
-  },
-  bootstrap() {},
+  config,
+  bootstrap,
 };

package/admin/src/assets/images/icon_made-by-strapi.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="4" fill="#4945FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8075 7.625H9.03058V11.1792H12.2533C12.4977 11.1792 12.6958 11.3773 12.6958 11.6216V14.8444H16.25V8.06746C16.25 7.82309 16.0519 7.625 15.8075 7.625Z" fill="white"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M9.0308 7.625V11.1792H6.01073C5.81364 11.1792 5.71494 10.9409 5.8543 10.8015L9.0308 7.625ZM13.0735 18.0209C12.9342 18.1603 12.6959 18.0616 12.6959 17.8645V14.8444H16.25L13.0735 18.0209ZM12.4746 11.1792H9.03058V14.4019C9.03058 14.6463 9.22868 14.8444 9.47304 14.8444H12.6958V11.4004C12.6958 11.2782 12.5968 11.1792 12.4746 11.1792Z" fill="#DAD9FF"/>
+</svg>

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

@@ -0,0 +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"/>
+</svg>

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

@@ -1,6 +1,12 @@
 import React, { useMemo, useState, useEffect, useRef } from 'react';
 //  TODO: DS add loader
-import { auth, LoadingIndicatorPage, AppInfosContext, useGuidedTour } from '@strapi/helper-plugin';
+import {
+  auth,
+  LoadingIndicatorPage,
+  AppInfosContext,
+  useGuidedTour,
+  useNotification,
+} from '@strapi/helper-plugin';
 import { useQueries } from 'react-query';
 import get from 'lodash/get';
 import packageJSON from '../../../../package.json';
@@ -20,6 +26,7 @@ const strapiVersion = packageJSON.version;
 
 const AuthenticatedApp = () => {
   const { setGuidedTourVisibility } = useGuidedTour();
+  const toggleNotification = useNotification();
   const setGuidedTourVisibilityRef = useRef(setGuidedTourVisibility);
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
@@ -34,7 +41,7 @@ const AuthenticatedApp = () => {
     { queryKey: 'app-infos', queryFn: fetchAppInfo },
     {
       queryKey: 'strapi-release',
-      queryFn: fetchStrapiLatestRelease,
+      queryFn: () => fetchStrapiLatestRelease(toggleNotification),
       enabled: showReleaseNotification,
       initialData: strapiVersion,
     },

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -1,15 +1,34 @@
 import axios from 'axios';
+import checkLatestStrapiVersion from './checkLatestStrapiVersion';
 import { axiosInstance } from '../../../core/utils';
 import packageJSON from '../../../../../package.json';
 
 const strapiVersion = packageJSON.version;
+const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
 
-const fetchStrapiLatestRelease = async () => {
+const fetchStrapiLatestRelease = async toggleNotification => {
   try {
     const {
       data: { tag_name },
     } = await axios.get('https://api.github.com/repos/strapi/strapi/releases/latest');
 
+    const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tag_name);
+
+    if (shouldUpdateStrapi && showUpdateNotif) {
+      toggleNotification({
+        type: 'info',
+        message: { id: 'notification.version.update.message' },
+        link: {
+          url: `https://github.com/strapi/strapi/releases/tag/${tag_name}`,
+          label: {
+            id: 'global.see-more',
+          },
+        },
+        blockTransition: true,
+        onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
+      });
+    }
+
     return tag_name;
   } catch (err) {
     // Don't throw an error

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

@@ -78,7 +78,7 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
                 rel="noopener noreferrer nofollow"
               >
                 {formatMessage({
-                  id: 'app.components.BlockLink.documentation',
+                  id: 'global.documentation',
                   defaultMessage: 'Read the documentation',
                 })}
               </Link>

package/admin/src/components/GuidedTour/Homepage/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useGuidedTour } from '@strapi/helper-plugin';
+import { useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
@@ -14,12 +14,17 @@ import layout from '../layout';
 const GuidedTourHomepage = () => {
   const { guidedTourState, setSkipped } = useGuidedTour();
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
 
   const sections = Object.entries(layout).map(([key, val]) => ({
     key,
     title: val.home.title,
     content: (
-      <LinkButton to={val.home.cta.target} endIcon={<ArrowRight />}>
+      <LinkButton
+        onClick={() => trackUsage(val.home.trackingEvent)}
+        to={val.home.cta.target}
+        endIcon={<ArrowRight />}
+      >
         {formatMessage(val.home.cta.title)}
       </LinkButton>
     ),
@@ -32,6 +37,11 @@ const GuidedTourHomepage = () => {
 
   const activeSection = enrichedSections.find(section => !section.isDone)?.key;
 
+  const handleSkip = () => {
+    setSkipped(true);
+    trackUsage('didSkipGuidedtour');
+  };
+
   return (
     <Box
       hasRadius
@@ -52,7 +62,7 @@ const GuidedTourHomepage = () => {
         <StepperHomepage sections={sections} currentSectionKey={activeSection} />
       </Stack>
       <Flex justifyContent="flex-end">
-        <Button variant="tertiary" onClick={() => setSkipped(true)}>
+        <Button variant="tertiary" onClick={handleSkip}>
           {formatMessage({ id: 'app.components.GuidedTour.skip', defaultMessage: 'Skip the tour' })}
         </Button>
       </Flex>

package/admin/src/components/GuidedTour/Modal/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useReducer } from 'react';
 import at from 'lodash/at';
-import { useGuidedTour } from '@strapi/helper-plugin';
+import { useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import layout from '../layout';
 import Modal from './components/Modal';
 import reducer, { initialState } from './reducer';
@@ -20,6 +20,7 @@ const GuidedTourModal = () => {
     { stepContent, sectionIndex, stepIndex, hasSectionAfter, hasStepAfter },
     dispatch,
   ] = useReducer(reducer, initialState);
+  const { trackUsage } = useTracking();
 
   useEffect(() => {
     if (!currentStep) {
@@ -56,6 +57,7 @@ const GuidedTourModal = () => {
 
   const handleCtaClick = () => {
     setStepState(currentStep, true);
+    trackUsage(stepContent.trackingEvent);
 
     setCurrentStep(null);
   };
@@ -63,6 +65,7 @@ const GuidedTourModal = () => {
   const handleSkip = () => {
     setSkipped(true);
     setCurrentStep(null);
+    trackUsage('didSkipGuidedtour');
   };
 
   if (isVisible && stepContent) {

package/admin/src/components/GuidedTour/layout.js

@@ -13,6 +13,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/plugins/content-type-builder',
       },
+      trackingEvent: 'didClickGuidedTourHomepageContentTypeBuilder',
     },
     create: {
       title: {
@@ -31,6 +32,7 @@ const layout = {
         },
         type: 'CLOSE',
       },
+      trackingEvent: 'didClickGuidedTourStep1CollectionType',
     },
     success: {
       title: {
@@ -49,6 +51,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/content-manager',
       },
+      trackingEvent: 'didCreateGuidedTourCollectionType',
     },
   },
   contentManager: {
@@ -65,6 +68,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/content-manager',
       },
+      trackingEvent: 'didClickGuidedTourHomepageContentManager',
     },
     create: {
       title: {
@@ -83,6 +87,7 @@ const layout = {
         },
         type: 'CLOSE',
       },
+      trackingEvent: 'didClickGuidedTourStep2ContentManager',
     },
     success: {
       title: {
@@ -101,6 +106,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/settings/api-tokens',
       },
+      trackingEvent: 'didCreateGuidedTourEntry',
     },
   },
   apiTokens: {
@@ -117,6 +123,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/settings/api-tokens',
       },
+      trackingEvent: 'didClickGuidedTourHomepageApiTokens',
     },
     create: {
       title: {
@@ -135,6 +142,7 @@ const layout = {
         },
         type: 'CLOSE',
       },
+      trackingEvent: 'didClickGuidedTourStep3ApiTokens',
     },
     success: {
       title: {
@@ -146,6 +154,7 @@ const layout = {
         defaultMessage:
           "<p>See content in action by making an HTTP request:</p><ul><li><p>To this URL: <light>https://'<'YOUR_DOMAIN'>'/api/'<'YOUR_CT'>'</light></p></li><li><p>With the header: <light>Authorization: bearer '<'YOUR_API_TOKEN'>'</light></p></li></ul><p>For more ways to interact with content, see the <documentationLink>documentation</documentationLink>.</p>",
       },
+      trackingEvent: 'didGenerateGuidedTourApiTokens',
     },
   },
 };

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

@@ -100,7 +100,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
 
       <NavSections>
         <NavLink to="/content-manager" icon={<Write />}>
-          {formatMessage({ id: 'content-manager.plugin.name', defaultMessage: 'Content manager' })}
+          {formatMessage({ id: 'global.content-manager', defaultMessage: 'Content manager' })}
         </NavLink>
 
         {pluginsSectionLinks.length > 0 ? (
@@ -160,7 +160,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
               <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
                 <Typography>
                   {formatMessage({
-                    id: 'app.components.LeftMenu.profile',
+                    id: 'global.profile',
                     defaultMessage: 'Profile',
                   })}
                 </Typography>

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

@@ -8,28 +8,34 @@
  */
 
 import React, { memo } from 'react';
-import { Redirect, Route } from 'react-router-dom';
+import { Redirect, Route, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { auth } from '@strapi/helper-plugin';
 
 /* eslint-disable react/jsx-curly-newline */
 
-const PrivateRoute = ({ component: Component, path, ...rest }) => (
-  <Route
-    path={path}
-    render={props =>
-      auth.getToken() !== null ? (
-        <Component {...rest} {...props} />
-      ) : (
-        <Redirect
-          to={{
-            pathname: '/auth/login',
-          }}
-        />
-      )
-    }
-  />
-);
+const PrivateRoute = ({ component: Component, path, ...rest }) => {
+  const { pathname, search } = useLocation();
+
+  return (
+    <Route
+      path={path}
+      render={props =>
+        auth.getToken() !== null ? (
+          <Component {...rest} {...props} />
+        ) : (
+          <Redirect
+            to={{
+              pathname: '/auth/login',
+              search:
+                pathname !== '/' && `?redirectTo=${encodeURIComponent(`${pathname}${search}`)}`,
+            }}
+          />
+        )
+      }
+    />
+  );
+};
 
 PrivateRoute.propTypes = {
   component: PropTypes.any.isRequired,

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

@@ -203,8 +203,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const displayErrors = useCallback(
     err => {
       const errorPayload = err.response.data;
-      console.error(errorPayload);
-
       let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
 
       // TODO handle errors correctly when back-end ready
@@ -272,10 +270,14 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         dispatch(setStatus('resolved'));
 
         replace(`/content-manager/collectionType/${slug}/${data.id}${rawQuery}`);
+
+        return Promise.resolve(data);
       } catch (err) {
-        trackUsageRef.current('didNotCreateEntry', { error: err, trackerProperty });
         displayErrors(err);
+        trackUsageRef.current('didNotCreateEntry', { error: err, trackerProperty });
         dispatch(setStatus('resolved'));
+
+        return Promise.reject(err);
       }
     },
     [
@@ -308,9 +310,13 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         type: 'success',
         message: { id: getTrad('success.record.publish') },
       });
+
+      return Promise.resolve(data);
     } catch (err) {
       displayErrors(err);
       dispatch(setStatus('resolved'));
+
+      return Promise.reject(err);
     }
   }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification]);
 
@@ -334,11 +340,15 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         dispatch(submitSucceeded(cleanReceivedData(data)));
 
         dispatch(setStatus('resolved'));
+
+        return Promise.resolve(data);
       } catch (err) {
         trackUsageRef.current('didNotEditEntry', { error: err, trackerProperty });
         displayErrors(err);
 
         dispatch(setStatus('resolved'));
+
+        return Promise.reject(err);
       }
     },
     [cleanReceivedData, displayErrors, slug, id, dispatch, toggleNotification]
@@ -362,9 +372,13 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       dispatch(submitSucceeded(cleanReceivedData(data)));
       dispatch(setStatus('resolved'));
+
+      return Promise.resolve(data);
     } catch (err) {
       dispatch(setStatus('resolved'));
       displayErrors(err);
+
+      return Promise.reject(err);
     }
   }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification]);
 

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

@@ -57,10 +57,13 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
       </Box>
       {error?.id && (
         <Typography textColor="danger600" variant="pi">
-          {formatMessage({
-            id: error.id,
-            defaultMessage: error.id,
-          })}
+          {formatMessage(
+            {
+              id: error.id,
+              defaultMessage: error.id,
+            },
+            { ...error.values }
+          )}
         </Typography>
       )}
     </>
@@ -75,6 +78,8 @@ ComponentInitializer.defaultProps = {
 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/RelationMultiple/index.js

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useQuery } from 'react-query';
+import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system/Typography';
+import { Box } from '@strapi/design-system/Box';
+import { Badge } from '@strapi/design-system/Badge';
+import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { Loader } from '@strapi/design-system/Loader';
+import styled from 'styled-components';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { stopPropagation } from '@strapi/helper-plugin';
+import CellValue from '../CellValue';
+import { axiosInstance } from '../../../../../core/utils';
+import { getRequestUrl, getTrad } from '../../../../utils';
+
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 500px;
+`;
+
+const fetchRelation = async (endPoint, notifyStatus) => {
+  const {
+    data: { results, pagination },
+  } = await axiosInstance.get(endPoint);
+
+  notifyStatus();
+
+  return { results, pagination };
+};
+
+const RelationMultiple = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) => {
+  const { formatMessage } = useIntl();
+  const { notifyStatus } = useNotifyAT();
+  const requestURL = getRequestUrl(`${queryInfos.endPoint}/${rowId}/${name.split('.')[0]}`);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const Label = (
+    <>
+      <Badge>{value.count}</Badge>{' '}
+      {formatMessage(
+        {
+          id: 'content-manager.containers.ListPage.items',
+          defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+        },
+        { number: value.count }
+      )}
+    </>
+  );
+
+  const notify = () => {
+    const message = formatMessage({
+      id: getTrad('DynamicTable.relation-loaded'),
+      defaultMessage: 'Relations have been loaded',
+    });
+    notifyStatus(message);
+  };
+
+  const { data, status } = useQuery(
+    [fieldSchema.targetModel, rowId],
+    () => fetchRelation(requestURL, notify),
+    {
+      enabled: isOpen,
+      staleTime: 0,
+    }
+  );
+
+  return (
+    <Box {...stopPropagation}>
+      <SimpleMenu
+        label={Label}
+        size="S"
+        onOpen={() => setIsOpen(true)}
+        onClose={() => setIsOpen(false)}
+      >
+        {status !== 'success' && (
+          <MenuItem aria-disabled>
+            <Loader small>
+              {formatMessage({
+                id: getTrad('DynamicTable.relation-loading'),
+                defaultMessage: 'Relations are loading',
+              })}
+            </Loader>
+          </MenuItem>
+        )}
+
+        {status === 'success' && (
+          <>
+            {data?.results.map(entry => (
+              <MenuItem key={entry.id} aria-disabled>
+                <TypographyMaxWidth ellipsis>
+                  <CellValue
+                    type={metadatas.mainField.schema.type}
+                    value={entry[metadatas.mainField.name] || entry.id}
+                  />
+                </TypographyMaxWidth>
+              </MenuItem>
+            ))}
+
+            {data?.pagination.total > 10 && (
+              <MenuItem
+                aria-disabled
+                aria-label={formatMessage({
+                  id: getTrad('DynamicTable.relation-more'),
+                  defaultMessage: 'This relation contains more entities than displayed',
+                })}
+              >
+                <Typography>...</Typography>
+              </MenuItem>
+            )}
+          </>
+        )}
+      </SimpleMenu>
+    </Box>
+  );
+};
+
+RelationMultiple.propTypes = {
+  fieldSchema: PropTypes.shape({
+    relation: PropTypes.string,
+    targetModel: PropTypes.string,
+    type: PropTypes.string.isRequired,
+  }).isRequired,
+  metadatas: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      schema: PropTypes.shape({ type: PropTypes.string.isRequired }).isRequired,
+    }),
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  queryInfos: PropTypes.shape({ endPoint: PropTypes.string.isRequired }).isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export default RelationMultiple;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@strapi/design-system/Typography';
+import styled from 'styled-components';
+import CellValue from '../CellValue';
+
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 500px;
+`;
+
+const RelationSingle = ({ metadatas, value }) => {
+  return (
+    <TypographyMaxWidth textColor="neutral800" ellipsis>
+      <CellValue
+        type={metadatas.mainField.schema.type}
+        value={value[metadatas.mainField.name] || value.id}
+      />
+    </TypographyMaxWidth>
+  );
+};
+
+RelationSingle.propTypes = {
+  metadatas: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      schema: PropTypes.shape({ type: PropTypes.string.isRequired }).isRequired,
+    }),
+  }).isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export default RelationSingle;

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { Badge } from '@strapi/design-system/Badge';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { stopPropagation } from '@strapi/helper-plugin';
+
+import CellValue from '../CellValue';
+
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 500px;
+`;
+
+const RepeatableComponentCell = ({ value, metadatas }) => {
+  const { formatMessage } = useIntl();
+  const {
+    mainField: { type: mainFieldType, name: mainFieldName },
+  } = metadatas;
+
+  const Label = (
+    <>
+      <Badge>{value.length}</Badge>{' '}
+      {formatMessage(
+        {
+          id: 'content-manager.containers.ListPage.items',
+          defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+        },
+        { number: value.length }
+      )}
+    </>
+  );
+
+  return (
+    <Box {...stopPropagation}>
+      <SimpleMenu label={Label} size="S">
+        {value.map(item => (
+          <MenuItem key={item.id} aria-disabled>
+            <TypographyMaxWidth ellipsis>
+              <CellValue type={mainFieldType} value={item[mainFieldName] || item.id} />
+            </TypographyMaxWidth>
+          </MenuItem>
+        ))}
+      </SimpleMenu>
+    </Box>
+  );
+};
+
+RepeatableComponentCell.propTypes = {
+  metadatas: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  }).isRequired,
+  value: PropTypes.array.isRequired,
+};
+
+export default RepeatableComponentCell;