@strapi/admin 4.9.0-alpha.0 → 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -2,13 +2,8 @@ import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import { IconButton } from '@strapi/design-system/IconButton';
-import Plus from '@strapi/icons/Plus';
+import { Box, Flex, Typography, SimpleMenu, MenuItem, IconButton } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import DraggableCard from './DraggableCard';
 import { getTrad } from '../../../utils';
 
@@ -75,7 +70,7 @@ const SortDisplayedFields = ({
         hasRadius
       >
         <ScrollableContainer size="1" paddingBottom={4} ref={scrollableContainerRef}>
-          <Stack horizontal spacing={3}>
+          <Flex gap={3}>
             {displayedFields.map((field, index) => (
               <DraggableCard
                 key={field}
@@ -89,7 +84,7 @@ const SortDisplayedFields = ({
                 setIsDraggingSibling={setIsDraggingSibling}
               />
             ))}
-          </Stack>
+          </Flex>
         </ScrollableContainer>
         <SelectContainer size="auto" paddingBottom={4}>
           <SimpleMenu

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

@@ -9,13 +9,16 @@ import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Button } from '@strapi/design-system/Button';
-import Check from '@strapi/icons/Check';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
+import {
+  Box,
+  Divider,
+  Layout,
+  HeaderLayout,
+  ContentLayout,
+  Main,
+  Button,
+} from '@strapi/design-system';
+import { Check, ArrowLeft } from '@strapi/icons';
 import { checkIfAttributeIsDisplayable, getTrad } from '../../utils';
 import ModelsContext from '../../contexts/ModelsContext';
 import { usePluginsQueryParams } from '../../hooks';

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

@@ -2,8 +2,7 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Box } from '@strapi/design-system/Box';
+import { Select, Option, Box } from '@strapi/design-system';
 import { useTracking } from '@strapi/helper-plugin';
 import { onChangeListHeaders } from '../actions';
 import { selectDisplayedHeaders } from '../selectors';

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box, Flex } from '@strapi/design-system';
 import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 const PaginationFooter = ({ pagination }) => {

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

@@ -24,16 +24,18 @@ import {
   useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Main } from '@strapi/design-system/Main';
-import { Box } from '@strapi/design-system/Box';
-import { ActionLayout, ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Button } from '@strapi/design-system/Button';
-
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Plus from '@strapi/icons/Plus';
-import Cog from '@strapi/icons/Cog';
+import {
+  IconButton,
+  Main,
+  Box,
+  ActionLayout,
+  ContentLayout,
+  HeaderLayout,
+  useNotifyAT,
+  Button,
+} from '@strapi/design-system';
+
+import { ArrowLeft, Plus, Cog } from '@strapi/icons';
 
 import DynamicTable from '../../components/DynamicTable';
 import AttributeFilter from '../../components/AttributeFilter';

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useFocusWhenNavigate, LinkButton } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
-import Plus from '@strapi/icons/Plus';
-import EmptyDocuments from '@strapi/icons/EmptyDocuments';
+import { Main, ContentLayout, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { Plus, EmptyDocuments } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFocusWhenNavigate, NoPermissions as NoPermissionsCompo } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { Main, ContentLayout, HeaderLayout } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 

package/admin/src/content-manager/utils/createDefaultForm.js

@@ -5,14 +5,6 @@ const createDefaultForm = (attributes, allComponentsSchema) => {
     const attribute = get(attributes, [current], {});
     const { default: defaultValue, component, type, required, min, repeatable } = attribute;
 
-    if (type === 'json') {
-      acc[current] = null;
-    }
-
-    if (type === 'json' && required === true) {
-      acc[current] = {};
-    }
-
     if (defaultValue !== undefined) {
       acc[current] = defaultValue;
     }

package/admin/src/hooks/index.js

@@ -10,3 +10,5 @@ export { default as usePermissionsDataManager } from './usePermissionsDataManage
 export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useThemeToggle } from './useThemeToggle';
 export { default as useRegenerate } from './useRegenerate';
+export { default as useLicenseLimit } from './useLicenseLimits';
+export { default as useLicenseLimitNotification } from './useLicenseLimitNotification';

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

@@ -0,0 +1,5 @@
+const useLicenseLimitNotification = () => {
+  return null;
+};
+
+export default useLicenseLimitNotification;

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

@@ -0,0 +1,3 @@
+const useLicenseLimits = () => {};
+
+export default useLicenseLimits;

package/admin/src/hooks/useMenu/reducer.js

@@ -1,8 +1,6 @@
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import Cog from '@strapi/icons/Cog';
-import Puzzle from '@strapi/icons/Puzzle';
-import ShoppingCart from '@strapi/icons/ShoppingCart';
+import { Cog, Puzzle, ShoppingCart } from '@strapi/icons';
 import adminPermissions from '../../permissions';
 
 const initialState = {

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

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { get } from 'lodash';
 import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 
-const useRegenerate = (id, onRegenerate) => {
+const useRegenerate = (url, id, onRegenerate) => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
   const { post } = useFetchClient();
@@ -13,7 +13,7 @@ const useRegenerate = (id, onRegenerate) => {
         data: {
           data: { accessKey },
         },
-      } = await post(`/admin/api-tokens/${id}/regenerate`);
+      } = await post(`${url}${id}/regenerate`);
       setIsLoadingConfirmation(false);
       onRegenerate(accessKey);
     } catch (error) {

package/admin/src/hooks/useSettingsMenu/utils/defaultGlobalLinks.js

@@ -22,6 +22,13 @@ const defaultGlobalLinks = [
     isDisplayed: false,
     permissions: adminPermissions.settings['api-tokens'].main,
   },
+  {
+    intlLabel: { id: 'Settings.transferTokens.title', defaultMessage: 'Transfer Tokens' },
+    to: '/settings/transfer-tokens?sort=name:ASC',
+    id: 'transfer-tokens',
+    isDisplayed: false,
+    permissions: adminPermissions.settings['transfer-tokens'].main,
+  },
 ];
 
 export default defaultGlobalLinks;

package/admin/src/index.js

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

package/admin/src/layouts/AppLayout/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { SkipToContent } from '@strapi/design-system/Main';
+import { Box, Flex, SkipToContent } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { SimpleMenu, MenuItem } from '@strapi/design-system';
 import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
 
 const LocaleToggle = () => {

package/admin/src/layouts/UnauthenticatedLayout/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box, Flex } from '@strapi/design-system';
 import LocaleToggle from './LocaleToggle';
 
 const Wrapper = styled(Box)`

package/admin/src/pages/Admin/Onboarding/index.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
+import { useAppInfos } from '@strapi/helper-plugin';
 import {
   Box,
   Button,
@@ -10,11 +11,10 @@ import {
   Icon,
   Portal,
   PopoverPrimitives,
-  Stack,
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Cross, Play, Question } from '@strapi/icons';
+import { Cross, Message, Play, Question } from '@strapi/icons';
 
 import onboardingPreview from '../../../assets/images/onboarding-preview.png';
 import { VIDEO_LINKS, DOCUMENTATION_LINKS, WATCH_MORE } from './constants';
@@ -78,11 +78,23 @@ const Onboarding = () => {
   const triggerRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
   const { formatMessage } = useIntl();
+  const { communityEdition } = useAppInfos();
 
   const handlePopoverVisibility = () => {
     setIsOpen((prev) => !prev);
   };
 
+  const docLinks = [
+    ...DOCUMENTATION_LINKS,
+    {
+      label: { id: 'Settings.application.get-help', defaultMessage: 'Get help' },
+      icon: Message,
+      href: communityEdition
+        ? 'https://discord.strapi.io'
+        : 'https://support.strapi.io/support/home',
+    },
+  ];
+
   return (
     <Box as="aside" position="fixed" bottom={2} right={2}>
       <HelperButton
@@ -179,9 +191,16 @@ const Onboarding = () => {
                   </Flex>
                 </VideoLinkWrapper>
               ))}
-              <Stack spacing={2} paddingLeft={5} paddingTop={2} paddingBottom={5}>
-                {DOCUMENTATION_LINKS.map(({ label, href, icon }) => (
-                  <Stack horizontal spacing={3} key={href}>
+              <Flex
+                direction="column"
+                alignItems="stretch"
+                gap={2}
+                paddingLeft={5}
+                paddingTop={2}
+                paddingBottom={5}
+              >
+                {docLinks.map(({ label, href, icon }) => (
+                  <Flex gap={3} key={href}>
                     <Icon as={icon} color="primary600" />
                     <TextLink
                       as="a"
@@ -193,9 +212,9 @@ const Onboarding = () => {
                     >
                       {formatMessage(label)}
                     </TextLink>
-                  </Stack>
+                  </Flex>
                 ))}
-              </Stack>
+              </Flex>
             </FocusTrap>
           </PopoverPrimitives.Content>
         </Portal>

package/admin/src/pages/App/index.js

@@ -17,7 +17,7 @@ import {
   useFetchClient,
 } from '@strapi/helper-plugin';
 import axios from 'axios';
-import { SkipToContent } from '@strapi/design-system/Main';
+import { SkipToContent } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
 import { createRoute, makeUniqueRoutes } from '../../utils';

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { FieldAction } from '@strapi/design-system/Field';
+import { FieldAction } from '@strapi/design-system';
 
 const FieldActionWrapper = styled(FieldAction)`
   svg {

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

@@ -2,13 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Form, Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Flex, Main, Button, TextInput, Typography } from '@strapi/design-system';
 import { Formik } from 'formik';
 import UnauthenticatedLayout, {
   Column,
@@ -59,7 +53,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   )}
                 </Column>
 
-                <Stack spacing={6}>
+                <Flex direction="column" alignItems="stretch" gap={6}>
                   <TextInput
                     error={
                       errors.email
@@ -85,7 +79,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                       defaultMessage: 'Send Email',
                     })}
                   </Button>
-                </Stack>
+                </Flex>
               </Form>
             )}
           </Formik>

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Main, Flex, Typography } from '@strapi/design-system';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -1,15 +1,7 @@
 import React, { useState } from 'react';
 import { Form, Link } from '@strapi/helper-plugin';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Eye from '@strapi/icons/Eye';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Typography } from '@strapi/design-system/Typography';
+import { EyeStriked, Eye } from '@strapi/icons';
+import { Box, Main, Flex, Button, TextInput, Checkbox, Typography } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -74,7 +66,7 @@ const Login = ({ onSubmit, schema, children }) => {
                 )}
               </Column>
 
-              <Stack spacing={6}>
+              <Flex direction="column" alignItems="stretch" gap={6}>
                 <TextInput
                   error={
                     errors.email
@@ -150,7 +142,7 @@ const Login = ({ onSubmit, schema, children }) => {
                 <Button fullWidth type="submit">
                   {formatMessage({ id: 'Auth.form.button.login', defaultMessage: 'Login' })}
                 </Button>
-              </Stack>
+              </Flex>
             </Form>
           )}
         </Formik>

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useQuery, Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Main, Flex, Typography } from '@strapi/design-system';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

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

@@ -15,17 +15,18 @@ import {
   getYupInnerErrors,
   Link,
 } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Typography } from '@strapi/design-system/Typography';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Eye from '@strapi/icons/Eye';
+import {
+  Box,
+  Main,
+  Flex,
+  Button,
+  TextInput,
+  Checkbox,
+  Grid,
+  GridItem,
+  Typography,
+} from '@strapi/design-system';
+import { EyeStriked, Eye } from '@strapi/icons';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,
@@ -157,7 +158,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       </Typography>
                     </CenteredBox>
                   </Column>
-                  <Stack spacing={6}>
+                  <Flex direction="column" alignItems="stretch" gap={6}>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput
@@ -312,7 +313,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         defaultMessage: "Let's start",
                       })}
                     </Button>
-                  </Stack>
+                  </Flex>
                 </Main>
               </Form>
             );

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

@@ -4,15 +4,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Formik } from 'formik';
 import { Form, Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Typography } from '@strapi/design-system/Typography';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Eye from '@strapi/icons/Eye';
+import { Box, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
+import { EyeStriked, Eye } from '@strapi/icons';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,
@@ -72,7 +65,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   )}
                 </Column>
 
-                <Stack spacing={6}>
+                <Flex direction="column" alignItems="stretch" gap={6}>
                   <PasswordInput
                     name="password"
                     onChange={handleChange}
@@ -164,7 +157,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                       defaultMessage: 'Change password',
                     })}
                   </Button>
-                </Stack>
+                </Flex>
               </Form>
             )}
           </Formik>

package/admin/src/pages/HomePage/CloudBox.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { useTracking, pxToRem } from '@strapi/helper-plugin';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import cloudIconBackgroundImage from './assets/strapi-cloud-background.png';
+import cloudIcon from './assets/strapi-cloud-icon.svg';
+import cloudFlagsImage from './assets/strapi-cloud-flags.svg';
+
+const BlockLink = styled.a`
+  text-decoration: none;
+`;
+
+const CloudCustomWrapper = styled(Box)`
+  background-image: url(${({ backgroundImage }) => backgroundImage});
+`;
+
+const CloudIconWrapper = styled(Flex)`
+  background: rgba(255, 255, 255, 0.3);
+`;
+
+const CloudBox = () => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  return (
+    <BlockLink
+      href="https://cloud.strapi.io"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      onClick={() => {
+        trackUsage('didClickOnTryStrapiCloudSection');
+      }}
+    >
+      <Flex
+        shadow="tableShadow"
+        hasRadius
+        padding={6}
+        background="neutral0"
+        position="relative"
+        gap={6}
+      >
+        <CloudCustomWrapper backgroundImage={cloudIconBackgroundImage} hasRadius padding={3}>
+          <CloudIconWrapper
+            width={pxToRem(32)}
+            height={pxToRem(32)}
+            justifyContent="center"
+            hasRadius
+            alignItems="center"
+          >
+            <img
+              src={cloudIcon}
+              alt={formatMessage({
+                id: 'app.components.BlockLink.cloud',
+                defaultMessage: 'Strapi Cloud',
+              })}
+            />
+          </CloudIconWrapper>
+        </CloudCustomWrapper>
+        <Flex gap={1} direction="column" alignItems="start">
+          <Flex>
+            <Typography fontWeight="semiBold" variant="pi">
+              {formatMessage({
+                id: 'app.components.BlockLink.cloud',
+                defaultMessage: 'Strapi Cloud',
+              })}
+            </Typography>
+          </Flex>
+          <Typography textColor="neutral600">
+            {formatMessage({
+              id: 'app.components.BlockLink.cloud.content',
+              defaultMessage:
+                'A fully composable, and collaborative platform to boost your team velocity.',
+            })}
+          </Typography>
+          <Box src={cloudFlagsImage} position="absolute" top={0} right={0} as="img" />
+        </Flex>
+      </Flex>
+    </BlockLink>
+  );
+};
+
+export default CloudBox;

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -2,11 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { ContentBox, useTracking } from '@strapi/helper-plugin';
-import { Stack } from '@strapi/design-system/Stack';
-import InformationSquare from '@strapi/icons/InformationSquare';
-import CodeSquare from '@strapi/icons/CodeSquare';
-import PlaySquare from '@strapi/icons/PlaySquare';
-import FeatherSquare from '@strapi/icons/FeatherSquare';
+import { Flex } from '@strapi/design-system';
+import { InformationSquare, CodeSquare, PlaySquare, FeatherSquare } from '@strapi/icons';
+import CloudBox from './CloudBox';
 
 const BlockLink = styled.a`
   text-decoration: none;
@@ -21,7 +19,8 @@ const ContentBlocks = () => {
   };
 
   return (
-    <Stack spacing={5}>
+    <Flex direction="column" alignItems="stretch" gap={5}>
+      <CloudBox />
       <BlockLink
         href="https://strapi.io/resource-center"
         target="_blank"
@@ -98,7 +97,7 @@ const ContentBlocks = () => {
           iconBackground="alternative100"
         />
       </BlockLink>
-    </Stack>
+    </Flex>
   );
 };