@strapi/admin 4.9.0-alpha.0 → 4.9.0-beta.2

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/AuthPage/reducer.js

@@ -1,5 +1,5 @@
 import produce from 'immer';
-import { set } from 'lodash';
+import set from 'lodash/set';
 /* eslint-disable consistent-return */
 
 const initialState = {

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>
   );
 };
 

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

@@ -2,28 +2,21 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Link } from '@strapi/design-system/v2/Link';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Typography, Box, Button, Flex } from '@strapi/design-system';
+import { Link } from '@strapi/design-system/v2';
+import { ArrowRight } from '@strapi/icons';
 
 const WordWrap = styled(Typography)`
   word-break: break-word;
 `;
 
-const StackCustom = styled(Stack)`
-  align-items: flex-start;
-`;
-
 const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
   const { formatMessage } = useIntl();
 
   return (
     <div>
       <Box paddingLeft={6} paddingBottom={10}>
-        <StackCustom spacing={5}>
+        <Flex direction="column" alignItems="flex-start" gap={5}>
           <Typography as="h1" variant="alpha">
             {hasCreatedContentType
               ? formatMessage({
@@ -63,7 +56,7 @@ const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
               })}
             </Button>
           )}
-        </StackCustom>
+        </Flex>
       </Box>
     </div>
   );

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

@@ -6,19 +6,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { LinkButton } from '@strapi/design-system/v2/LinkButton';
-import { Link } from '@strapi/design-system/v2/Link';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import Github from '@strapi/icons/Github';
-import Discord from '@strapi/icons/Discord';
-import Reddit from '@strapi/icons/Reddit';
-import Strapi from '@strapi/icons/Strapi';
-import Twitter from '@strapi/icons/Twitter';
-import Discourse from '@strapi/icons/Discourse';
+import { useAppInfos } from '@strapi/helper-plugin';
+import { Typography, Box, Flex, Grid, GridItem } from '@strapi/design-system';
+import { Link, LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, Github, Discord, Reddit, Strapi, Twitter, Discourse } from '@strapi/icons';
 
 const StyledDiscord = styled(Discord)`
   path {
@@ -72,43 +63,46 @@ const StyledDiscourse = styled(Discourse)`
 
 const socialLinks = [
   {
-    name: 'Github',
+    name: { id: 'app.components.HomePage.community.links.github', defaultMessage: 'Github' },
     link: 'https://github.com/strapi/strapi/',
     icon: <Github fill="#7289DA" />,
     alt: 'github',
   },
   {
-    name: 'Discord',
+    name: { id: 'app.components.HomePage.community.links.discord', defaultMessage: 'Discord' },
     link: 'https://discord.strapi.io/',
     icon: <StyledDiscord />,
     alt: 'discord',
   },
   {
-    name: 'Reddit',
+    name: { id: 'app.components.HomePage.community.links.reddit', defaultMessage: 'Reddit' },
     link: 'https://www.reddit.com/r/Strapi/',
     icon: <StyledReddit />,
     alt: 'reddit',
   },
   {
-    name: 'Twitter',
+    name: { id: 'app.components.HomePage.community.links.twitter', defaultMessage: 'Twitter' },
     link: 'https://twitter.com/strapijs',
     icon: <StyledTwitter />,
     alt: 'twitter',
   },
   {
-    name: 'Forum',
+    name: { id: 'app.components.HomePage.community.links.forum', defaultMessage: 'Forum' },
     link: 'https://forum.strapi.io',
     icon: <StyledDiscourse />,
     alt: 'forum',
   },
   {
-    name: 'Blog',
+    name: { id: 'app.components.HomePage.community.links.blog', defaultMessage: 'Blog' },
     link: 'https://strapi.io/blog?utm_source=referral&utm_medium=admin&utm_campaign=career%20page',
     icon: <StyledStrapi />,
     alt: 'blog',
   },
   {
-    name: 'We are hiring!',
+    name: {
+      id: 'app.components.HomePage.community.links.career',
+      defaultMessage: 'We are hiring!',
+    },
     link: 'https://strapi.io/careers?utm_source=referral&utm_medium=admin&utm_campaign=blog',
     icon: <StyledStrapi />,
     alt: 'career',
@@ -137,6 +131,21 @@ const GridGap = styled(Grid)`
 
 const SocialLinks = () => {
   const { formatMessage } = useIntl();
+  const { communityEdition } = useAppInfos();
+
+  const socialLinksExtended = [
+    ...socialLinks,
+    {
+      icon: <StyledStrapi />,
+      link: communityEdition
+        ? 'https://discord.strapi.io'
+        : 'https://support.strapi.io/support/home',
+      name: {
+        id: 'Settings.application.get-help',
+        defaultMessage: 'Get help',
+      },
+    },
+  ];
 
   return (
     <Box
@@ -151,8 +160,8 @@ const SocialLinks = () => {
       shadow="tableShadow"
     >
       <Box paddingBottom={7}>
-        <Stack spacing={5}>
-          <Stack spacing={3}>
+        <Flex direction="column" alignItems="stretch" gap={5}>
+          <Flex direction="column" alignItems="stretch" gap={3}>
             <Typography variant="delta" as="h2" id="join-the-community">
               {formatMessage({
                 id: 'app.components.HomePage.community',
@@ -166,27 +175,21 @@ const SocialLinks = () => {
                   'Discuss with team members, contributors and developers on different channels',
               })}
             </Typography>
-          </Stack>
+          </Flex>
           <Link href="https://feedback.strapi.io/" isExternal endIcon={<ExternalLink />}>
             {formatMessage({
               id: 'app.components.HomePage.roadmap',
               defaultMessage: 'See our road map',
             })}
           </Link>
-        </Stack>
+        </Flex>
       </Box>
       <GridGap>
-        {socialLinks.map((socialLink) => {
+        {socialLinksExtended.map(({ icon, link, name }) => {
           return (
-            <GridItem col={6} s={12} key={socialLink.name}>
-              <LinkCustom
-                size="L"
-                startIcon={socialLink.icon}
-                variant="tertiary"
-                href={socialLink.link}
-                isExternal
-              >
-                {socialLink.name}
+            <GridItem col={6} s={12} key={name}>
+              <LinkCustom size="L" startIcon={icon} variant="tertiary" href={link} isExternal>
+                {formatMessage(name)}
               </LinkCustom>
             </GridItem>
           );

package/admin/src/pages/HomePage/assets/strapi-cloud-flags.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" fill="none" viewBox="29.41 44 149.09 50.35"><path stroke="#EAEAEF" d="M30.5 44.5c37 27 47.5 38 147.499 32"/><g filter="url(#a)"><path fill="#F29D41" d="m129.467 94.085 8.148-14.142a.598.598 0 0 0-.403-.887 75.099 75.099 0 0 0-3.045-.536c-1.875-.274-2.936-.44-4.837-.505-1.838-.064-2.873.01-4.698.153a64.05 64.05 0 0 0-2.692.293.597.597 0 0 0-.462.851l7.042 14.737c.186.388.732.41.947.036Z"/></g><g filter="url(#b)"><path fill="#F29D41" d="m46.99 75.52 13.813-8.697a.597.597 0 0 0 .058-.971 75.191 75.191 0 0 0-2.442-1.897c-1.53-1.119-2.39-1.761-4.04-2.707-1.595-.915-2.545-1.334-4.226-2.06a64.09 64.09 0 0 0-2.516-.999.597.597 0 0 0-.806.537l-.66 16.319a.535.535 0 0 0 .82.474Z"/></g><g filter="url(#c)"><path fill="#5CB176" d="m29.41 63.51 2.102-16.186a.597.597 0 0 1 .858-.46c.748.371 1.905.954 2.745 1.42 1.657.92 2.602 1.433 4.152 2.534 1.5 1.064 2.278 1.75 3.642 2.972a64.026 64.026 0 0 1 1.962 1.865c.291.286.214.771-.149.957l-14.538 7.443a.535.535 0 0 1-.774-.545Z"/></g><mask id="d" width="17" height="19" x="29" y="46" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#5CB176" d="m29.412 63.51 2.101-16.186a.597.597 0 0 1 .858-.46c.749.371 1.905.954 2.746 1.42 1.657.92 2.601 1.433 4.152 2.534 1.5 1.064 2.278 1.75 3.642 2.972a64.148 64.148 0 0 1 1.962 1.865c.29.286.214.771-.15.957l-14.537 7.443a.535.535 0 0 1-.774-.545Z"/></mask><g stroke="#fff" stroke-linecap="round" stroke-width=".661" mask="url(#d)"><path d="M39.755 51.218c-1.05 1.558-4.606 4.788-10.44 5.247M36.415 47.816c-1.05 1.558-4.606 4.789-10.44 5.247M42.97 53.97c-1.457 1.908-6.341 5.902-14.216 6.619M42.15 58.499c-1.645 1.748-5.29 4.033-13.197 3.939"/></g><g filter="url(#e)"><path fill="#7B79FF" d="m169.813 92.983 5.927-15.208a.598.598 0 0 0-.531-.815 75.213 75.213 0 0 0-3.091-.072c-1.895.01-2.969.007-4.859.228-1.826.214-2.838.442-4.621.859-.815.19-1.893.488-2.617.694a.596.596 0 0 0-.328.91l9.178 13.51a.536.536 0 0 0 .942-.106Z"/></g><g filter="url(#f)"><path fill="#7B79FF" d="m87.001 90.853-4.466-15.699a.597.597 0 0 1 .606-.761c.835.045 2.127.123 3.084.22 1.886.19 2.956.287 4.816.685 1.797.385 2.784.709 4.519 1.291.794.267 1.839.665 2.54.938.38.148.501.624.24.938L87.929 91.048a.535.535 0 0 1-.927-.195Z"/></g><g filter="url(#g)"><path fill="#EE5E52" d="m66.153 85.122 12.355-10.665a.597.597 0 0 0-.087-.97 75.353 75.353 0 0 0-2.698-1.51c-1.68-.877-2.627-1.383-4.4-2.072-1.714-.666-2.716-.938-4.486-1.404a64.083 64.083 0 0 0-2.638-.611.597.597 0 0 0-.716.651l1.788 16.234a.535.535 0 0 0 .882.347Z"/></g><circle cx="70.793" cy="74.511" r=".992" fill="#fff" transform="rotate(8.553 70.793 74.51)"/><circle cx="65.574" cy="78.63" r=".992" fill="#fff" transform="rotate(8.553 65.574 78.63)"/><circle cx="65.408" cy="74.519" r=".992" fill="#fff" transform="rotate(8.553 65.408 74.519)"/><circle cx="67.834" cy="81.943" r=".992" fill="#fff" transform="rotate(8.553 67.834 81.943)"/><circle cx="67.259" cy="69.875" r=".992" fill="#fff" transform="rotate(8.553 67.259 69.875)"/><circle cx="74.691" cy="72.834" r=".992" fill="#fff" transform="rotate(8.553 74.69 72.834)"/><circle cx="71.171" cy="78.968" r=".992" fill="#fff" transform="rotate(8.553 71.171 78.968)"/><g filter="url(#h)"><path fill="#EE5E52" d="m149.911 93.824 6.521-14.963a.598.598 0 0 0-.499-.836 75.255 75.255 0 0 0-3.086-.193c-1.894-.064-2.967-.11-4.863.037-1.833.141-2.854.33-4.651.676-.823.158-1.912.414-2.643.59a.596.596 0 0 0-.364.898l8.64 13.86a.535.535 0 0 0 .945-.07Z"/></g><circle cx="149.5" cy="82.25" r=".992" fill="#fff" transform="rotate(-17.098 149.5 82.25)"/><circle cx="146.579" cy="88.222" r=".992" fill="#fff" transform="rotate(-17.098 146.579 88.222)"/><circle cx="144.65" cy="84.588" r=".992" fill="#fff" transform="rotate(-17.098 144.65 84.588)"/><circle cx="150.049" cy="90.231" r=".992" fill="#fff" transform="rotate(-17.098 150.049 90.231)"/><circle cx="144.306" cy="79.6" r=".992" fill="#fff" transform="rotate(-17.098 144.306 79.6)"/><circle cx="152.287" cy="79.051" r=".992" fill="#fff" transform="rotate(-17.098 152.287 79.05)"/><circle cx="151.77" cy="86.103" r=".992" fill="#fff" transform="rotate(-17.098 151.77 86.103)"/><g filter="url(#i)"><path fill="#5CB176" d="m109.171 93.4 8.86-13.707a.598.598 0 0 0-.357-.906c-.811-.2-2.07-.503-3.013-.69-1.859-.37-2.911-.59-4.806-.753-1.831-.157-2.869-.136-4.699-.086-.837.023-1.953.098-2.703.154a.597.597 0 0 0-.505.827l6.279 15.077c.166.398.71.447.944.084Z"/></g><mask id="j" width="18" height="17" x="101" y="77" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#5CB176" d="m109.17 93.4 8.86-13.707a.598.598 0 0 0-.357-.905c-.811-.201-2.07-.504-3.013-.692-1.859-.37-2.911-.589-4.806-.751-1.831-.158-2.869-.137-4.699-.087-.837.023-1.953.099-2.703.154a.597.597 0 0 0-.505.827l6.279 15.077c.166.398.71.447.944.085Z"/></mask><g stroke="#fff" stroke-linecap="round" stroke-width=".661" mask="url(#j)"><path d="M109.225 77.335c-.207 1.867.418 6.632 4.573 10.753M113.972 76.9c-.207 1.867.418 6.631 4.573 10.753M104.992 77.357c-.121 2.397 1.023 8.602 6.568 14.24M102.69 81.343c.125 2.397 1.429 6.497 7.522 11.537"/></g><defs><filter id="a" width="21.565" height="21.649" x="118.775" y="76.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="b" width="20.201" height="22.741" x="43.526" y="56.167" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="c" width="20.932" height="22.602" x="26.761" y="44.818" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="e" width="21.482" height="21.724" x="156.944" y="74.904" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="f" width="21.256" height="22.139" x="79.868" y="72.409" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="g" width="20.526" height="22.664" x="60.835" y="65.893" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="h" width="21.537" height="21.662" x="137.59" y="75.788" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter><filter id="i" width="21.515" height="21.712" x="99.257" y="75.238" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".661"/><feGaussianBlur stdDeviation="1.322"/><feColorMatrix values="0 0 0 0 0.129412 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_12_39"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_12_39" result="shape"/></filter></defs></svg>

package/admin/src/pages/HomePage/assets/strapi-cloud-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="15" fill="none"><path fill="#fff" fill-rule="evenodd" d="M4.39453 13.8298C1.93859 13.6455 0 11.468 0 8.80884 0 6.0289 2.11876 3.7753 4.73238 3.7753c.46775 0 .91964.07218 1.34638.20664C7.21234 1.62909 9.66469 0 12.5073 0c2.5102 0 4.7161 1.27036 5.9782 3.18766a4.54297 4.54297 0 0 1 .6132-.04144C21.8056 3.14622 24 5.54066 24 8.49436c0 2.89194-2.1036 5.24784-4.7323 5.34504v.0031l-1.8948.278a38.18054 38.18054 0 0 1-11.08354 0l-1.89483-.278v-.0127Z" clip-rule="evenodd"/></svg>

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

@@ -9,10 +9,8 @@ import styled from 'styled-components';
 import { Helmet } from 'react-helmet';
 import { useHistory } from 'react-router-dom';
 import { LoadingIndicatorPage, useGuidedTour } from '@strapi/helper-plugin';
-import { Layout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Layout, Main, Box, Grid, GridItem } from '@strapi/design-system';
+import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
 import cornerOrnamentPath from './assets/corner-ornament.svg';
 import { useModels } from '../../hooks';
 import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';
@@ -35,6 +33,7 @@ const HomePage = () => {
   // Temporary until we develop the menu API
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
   const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
+  useLicenseLimitNotification();
 
   const showGuidedTour =
     !isGuidedTourCompleted(guidedTourState) && isGuidedTourVisible && !isSkipped;

package/admin/src/pages/InstalledPluginsPage/Plugins.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { LoadingIndicatorPage, useFocusWhenNavigate } from '@strapi/helper-plugin';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Typography } from '@strapi/design-system/Typography';
-import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
+import {
+  useNotifyAT,
+  Layout,
+  HeaderLayout,
+  ContentLayout,
+  Main,
+  Typography,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Td,
+  Th,
+} from '@strapi/design-system';
 import useFetchEnabledPlugins from '../../hooks/useFetchEnabledPlugins';
 
 const Plugins = () => {

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

@@ -6,11 +6,8 @@
  */
 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 EmptyPictures from '@strapi/icons/EmptyPictures';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Main, ContentLayout, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { EmptyPictures, ArrowRight } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 
 const InternalErrorPage = () => {

package/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/EmptyNpmPackageGrid.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { GridLayout } from '@strapi/design-system/Layout';
+import { Box, GridLayout } from '@strapi/design-system';
 
 const EmptyPluginCard = styled(Box)`
   background: ${({ theme }) =>

package/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Icon } from '@strapi/design-system/Icon';
-import EmptyStateDocument from '@strapi/icons/EmptyDocuments';
+import { Typography, Box, Flex, Icon } from '@strapi/design-system';
+import { EmptyStateDocument } from '@strapi/icons';
 import { EmptyNpmPackageGrid } from './EmptyNpmPackageGrid';
 
 const EmptyNpmPackageSearch = ({ content }) => {

package/admin/src/pages/MarketplacePage/components/MissingPluginBanner/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { ContentBox, useTracking } from '@strapi/helper-plugin';
-import GlassesSquare from '@strapi/icons/GlassesSquare';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import { Icon } from '@strapi/design-system/Icon';
+import { GlassesSquare, ExternalLink } from '@strapi/icons';
+import { Icon } from '@strapi/design-system';
 
 const MissingPluginBanner = () => {
   const { formatMessage } = useIntl();

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/CardButton.js

@@ -2,10 +2,8 @@ import React from 'react';
 import semver from 'semver';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Tooltip } from '@strapi/design-system/Tooltip';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import Duplicate from '@strapi/icons/Duplicate';
+import { Tooltip, Button, Box } from '@strapi/design-system';
+import { Duplicate } from '@strapi/icons';
 
 const TooltipButton = ({ description, installMessage, disabled, handleCopy, pluginName }) => (
   <Tooltip data-testid={`tooltip-${pluginName}`} description={description}>