@strapi/admin 4.6.0-beta.0 → 4.6.0-beta.1

package/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js

@@ -1,43 +1,31 @@
 import React from 'react';
-import get from 'lodash/get';
-import PropTypes from 'prop-types';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Box, Flex, Typography, Stack } from '@strapi/design-system';
+
+import { ComponentIcon } from '../../../components/ComponentIcon';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
 
-const CustomFlex = styled(Flex)`
-  border-radius: 50%;
-  svg {
-    & > * {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-    width: 12px;
-    height: 12px;
-  }
-`;
 const CustomLink = styled(Flex)`
   text-decoration: none;
+
+  &:focus,
   &:hover {
     ${({ theme }) => `
-      background: ${theme.colors.primary100};
-      svg {
-        & > * {
-          fill: ${theme.colors.primary600};
-        }
-      }
+      background-color: ${theme.colors.primary100};
+      border-color: ${theme.colors.primary200};
+
       ${Typography} {
           color: ${theme.colors.primary600};
       }
-      ${CustomFlex} {
-        background: ${theme.colors.primary200};
-      }
-      border-color: ${theme.colors.primary200};
     `}
+
+    /* > ComponentIcon */
+    > div:first-child {
+      background: ${({ theme }) => theme.colors.primary200};
+      color: ${({ theme }) => theme.colors.primary600};
+    }
   }
 `;
 
@@ -61,19 +49,11 @@ const DynamicZoneList = ({ components }) => {
           as={Link}
           to={`/content-manager/components/${componentUid}/configurations/edit`}
         >
-          <CustomFlex
-            width={`${32 / 16}rem`}
-            height={`${32 / 16}rem`}
-            background="neutral150"
-            justifyContent="center"
-            alignItems="center"
-            padding={2}
-          >
-            <FontAwesomeIcon icon={get(componentLayouts, [componentUid, 'info', 'icon'], '')} />
-          </CustomFlex>
+          <ComponentIcon />
+
           <Box paddingTop={1}>
             <Typography fontSize={1} textColor="neutral600" fontWeight="bold">
-              {get(componentLayouts, [componentUid, 'info', 'displayName'], '')}
+              {componentLayouts?.[componentUid]?.info?.displayName ?? ''}
             </Typography>
           </Box>
         </CustomLink>

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

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
+import { Box, Flex, FocusTrap, Typography, Icon, Stack } from '@strapi/design-system';
+import { Book, Cross, Information, Question } from '@strapi/icons';
+import { pxToRem } from '@strapi/helper-plugin';
+
 import { useConfigurations } from '../../../hooks';
 
 const OnboardingWrapper = styled(Box)`
@@ -14,52 +13,44 @@ const OnboardingWrapper = styled(Box)`
   right: ${({ theme }) => theme.spaces[2]};
 `;
 
-const Button = styled.button`
+const Button = styled(Box)`
   width: ${({ theme }) => theme.spaces[8]};
   height: ${({ theme }) => theme.spaces[8]};
   background: ${({ theme }) => theme.colors.primary600};
   box-shadow: ${({ theme }) => theme.shadows.tableShadow};
   border-radius: 50%;
-  svg {
-    color: ${({ theme }) => theme.colors.buttonNeutral0};
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.buttonNeutral0};
   }
 `;
 
 const LinksWrapper = styled(Box)`
-  position: absolute;
   bottom: ${({ theme }) => `${theme.spaces[9]}`};
+  min-width: ${200 / 16}rem;
+  position: absolute;
   right: 0;
-  width: ${200 / 16}rem;
 `;
 
-const StyledLink = styled.a`
-  display: flex;
-  align-items: center;
+const StyledLink = styled(Flex)`
   text-decoration: none;
-  padding: ${({ theme }) => theme.spaces[2]};
-  padding-left: ${({ theme }) => theme.spaces[5]};
 
-  svg {
-    color: ${({ theme }) => theme.colors.neutral600};
-    margin-right: ${({ theme }) => theme.spaces[2]};
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
   }
 
+  &:focus,
   &:hover {
     background: ${({ theme }) => theme.colors.neutral100};
-    color: ${({ theme }) => theme.colors.neutral500};
 
-    svg {
-      color: ${({ theme }) => theme.colors.neutral700};
+    svg path {
+      fill: ${({ theme }) => theme.colors.neutral700};
     }
 
     ${[Typography]} {
       color: ${({ theme }) => theme.colors.neutral700};
     }
   }
-
-  ${[Typography]} {
-    color: ${({ theme }) => theme.colors.neutral600};
-  }
 `;
 
 const Onboarding = () => {
@@ -71,9 +62,9 @@ const Onboarding = () => {
     return null;
   }
 
-  const staticLinks = [
+  const STATIC_LINKS = [
     {
-      icon: 'book',
+      Icon: <Book />,
       label: formatMessage({
         id: 'global.documentation',
         defaultMessage: 'Documentation',
@@ -81,7 +72,7 @@ const Onboarding = () => {
       destination: 'https://docs.strapi.io',
     },
     {
-      icon: 'file',
+      Icon: <Information />,
       label: formatMessage({ id: 'app.static.links.cheatsheet', defaultMessage: 'CheatSheet' }),
       destination: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
     },
@@ -94,37 +85,44 @@ const Onboarding = () => {
   return (
     <OnboardingWrapper as="aside">
       <Button
+        as="button"
         id="onboarding"
-        aria-label={formatMessage({
-          id: 'app.components.Onboarding.help.button',
-          defaultMessage: 'Help button',
-        })}
+        aria-label={formatMessage(
+          isOpen
+            ? {
+                id: 'app.components.Onboarding.help.button-close',
+                defaultMessage: 'Close help menu',
+              }
+            : {
+                id: 'app.components.Onboarding.help.button',
+                defaultMessage: 'Open help menu',
+              }
+        )}
         onClick={handleClick}
       >
-        {!isOpen && <FontAwesomeIcon icon={faQuestion} />}
-        {isOpen && <FontAwesomeIcon icon={faTimes} />}
+        <Icon as={isOpen ? Cross : Question} height={pxToRem(16)} width={pxToRem(16)} />
       </Button>
 
       {/* FIX ME - replace with popover when overflow popover is fixed 
        + when v4 mockups for onboarding component are ready */}
       {isOpen && (
         <FocusTrap onEscape={handleClick}>
-          <LinksWrapper
-            background="neutral0"
-            hasRadius
-            shadow="tableShadow"
-            paddingBottom={2}
-            paddingTop={2}
-          >
-            {staticLinks.map((link) => (
+          <LinksWrapper background="neutral0" hasRadius shadow="tableShadow" padding={2}>
+            {STATIC_LINKS.map((link) => (
               <StyledLink
+                as="a"
                 key={link.label}
                 rel="nofollow noreferrer noopener"
                 target="_blank"
                 href={link.destination}
+                padding={2}
+                hasRadius
+                alignItems="center"
               >
-                <FontAwesomeIcon icon={link.icon} />
-                <Typography>{link.label}</Typography>
+                <Stack horizontal spacing={2}>
+                  {link.Icon}
+                  <Typography color="neutral600">{link.label}</Typography>
+                </Stack>
               </StyledLink>
             ))}
           </LinksWrapper>

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

@@ -25,7 +25,7 @@ import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
 import { getUID } from './utils';
 import routes from './utils/routes';
-import { useConfigurations } from '../../hooks';
+import { useConfigurations, useFetchClient } from '../../hooks';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
@@ -35,8 +35,12 @@ function App() {
   const toggleNotification = useNotification();
   const { updateProjectSettings } = useConfigurations();
   const { formatMessage } = useIntl();
-  const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
+  const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
+    isLoading: true,
+    hasAdmin: false,
+  });
   const appInfo = useAppInfos();
+  const { get } = useFetchClient();
 
   const authRoutes = useMemo(() => {
     return makeUniqueRoutes(
@@ -80,27 +84,29 @@ function App() {
         } = await axios.get(`${strapi.backendURL}/admin/init`);
 
         updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
+        const deviceId = await getUID();
 
         if (uuid) {
           const {
             data: { data: properties },
-          } = await axios.get(`${strapi.backendURL}/admin/telemetry-properties`);
+          } = await get(`/admin/telemetry-properties`, {
+            // NOTE: needed because the interceptors of the fetchClient redirect to /login when receive a 401 and it would end up in an infinite loop when the user doesn't have a session.
+            validateStatus: (status) => status < 500,
+          });
 
           setTelemetryProperties(properties);
 
           try {
-            const deviceId = await getUID();
-
-            await fetch('https://analytics.strapi.io/track', {
+            await fetch('https://analytics.strapi.io/api/v2/track', {
               method: 'POST',
               body: JSON.stringify({
+                // This event is anonymous
                 event: 'didInitializeAdministration',
-                uuid,
+                userId: '',
                 deviceId,
-                properties: {
-                  ...properties,
-                  environment: appInfo.currentEnvironment,
-                },
+                eventPropeties: {},
+                userProperties: { environment: appInfo.currentEnvironment },
+                groupProperties: { ...properties, projectId: uuid },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -111,7 +117,7 @@ function App() {
           }
         }
 
-        setState({ isLoading: false, hasAdmin, uuid });
+        setState({ isLoading: false, hasAdmin, uuid, deviceId });
       } catch (err) {
         toggleNotification({
           type: 'warning',
@@ -130,8 +136,9 @@ function App() {
     () => ({
       uuid,
       telemetryProperties,
+      deviceId,
     }),
-    [uuid, telemetryProperties]
+    [uuid, telemetryProperties, deviceId]
   );
 
   if (isLoading) {

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

@@ -268,7 +268,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       required
                       label={formatMessage({
                         id: 'Auth.form.confirmPassword.label',
-                        defaultMessage: 'Confirmation Password',
+                        defaultMessage: 'Confirm Password',
                       })}
                       type={confirmPasswordShown ? 'text' : 'password'}
                     />

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

@@ -154,7 +154,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                     required
                     label={formatMessage({
                       id: 'Auth.form.confirmPassword.label',
-                      defaultMessage: 'Confirmation Password',
+                      defaultMessage: 'Confirm Password',
                     })}
                     type={confirmPasswordShown ? 'text' : 'password'}
                   />

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -12,7 +12,6 @@ import {
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
 import { Formik } from 'formik';
-import { get } from 'lodash';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { formatAPIErrors } from '../../../../../utils';
@@ -205,12 +204,12 @@ const ApiTokenCreateView = () => {
       if (err?.response?.data?.error?.message === MSG_ERROR_NAME_TAKEN) {
         toggleNotification({
           type: 'warning',
-          message: get(err, 'response.data.message', 'notification.error.tokennamenotunique'),
+          message: err.response.data.message || 'notification.error.tokennamenotunique',
         });
       } else {
         toggleNotification({
           type: 'warning',
-          message: get(err, 'response.data.message', 'notification.error'),
+          message: err?.response?.data?.message || 'notification.error',
         });
       }
       unlockApp();

package/admin/src/translations/en.json

@@ -11,7 +11,7 @@
   "Auth.form.button.login.strapi": "Log in via Strapi",
   "Auth.form.button.password-recovery": "Password Recovery",
   "Auth.form.button.register": "Let's start",
-  "Auth.form.confirmPassword.label": "Confirmation Password",
+  "Auth.form.confirmPassword.label": "Confirm Password",
   "Auth.form.currentPassword.label": "Current Password",
   "Auth.form.email.label": "Email",
   "Auth.form.email.placeholder": "e.g. kai@doe.com",
@@ -460,6 +460,7 @@
   "app.utils.select-filter": "Select filter",
   "app.utils.unpublish": "Unpublish",
   "clearLabel": "Clear",
+  "selectButtonTitle": "Select",
   "coming.soon": "This content is currently under construction and will be back in a few weeks!",
   "component.Input.error.validation.integer": "The value must be an integer",
   "components.AutoReloadBlocker.description": "Run Strapi with one of the following commands:",