@strapi/admin 4.0.0-beta.13 → 4.0.0-beta.17

package/admin/src/pages/AuthPage/utils/forms.js

@@ -59,7 +59,7 @@ const forms = {
     fieldsToOmit: ['userInfo.confirmPassword', 'userInfo.news', 'userInfo.email'],
     schema: yup.object().shape({
       firstname: yup.string().required(translatedErrors.required),
-      lastname: yup.string().required(translatedErrors.required),
+      lastname: yup.string(),
       password: yup
         .string()
         .min(8, translatedErrors.minLength)
@@ -83,7 +83,7 @@ const forms = {
     fieldsToOmit: ['confirmPassword', 'news'],
     schema: yup.object().shape({
       firstname: yup.string().required(translatedErrors.required),
-      lastname: yup.string().required(translatedErrors.required),
+      lastname: yup.string(),
       password: yup
         .string()
         .min(8, translatedErrors.minLength)

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

@@ -2,14 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Subtitle, H1 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Link } from '@strapi/design-system/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';
 
-const WordWrap = styled(Subtitle)`
+const WordWrap = styled(Typography)`
   word-break: break-word;
 `;
 
@@ -24,7 +24,7 @@ const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
     <div>
       <Box paddingLeft={6} paddingBottom={10}>
         <StackCustom size={5}>
-          <H1>
+          <Typography as="h1" variant="alpha">
             {hasCreatedContentType
               ? formatMessage({
                   id: 'app.components.HomePage.welcome.again',
@@ -34,8 +34,8 @@ const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
                   id: 'app.components.HomePage.welcome',
                   defaultMessage: 'Welcome on board!',
                 })}
-          </H1>
-          <WordWrap textColor="neutral600">
+          </Typography>
+          <WordWrap textColor="neutral600" variant="epsilon">
             {hasCreatedContentType
               ? formatMessage({
                   id: 'app.components.HomePage.welcomeBlock.content.again',

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { H3, Text } from '@strapi/design-system/Text';
+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';
@@ -138,10 +138,6 @@ const GridGap = styled(Grid)`
   column-gap: ${({ theme }) => theme.spaces[4]};
 `;
 
-const WordWrap = styled(Text)`
-  word-break: break-word;
-`;
-
 const SocialLinks = () => {
   const { formatMessage } = useIntl();
 
@@ -160,19 +156,19 @@ const SocialLinks = () => {
       <Box paddingBottom={7}>
         <Stack size={5}>
           <Stack size={3}>
-            <H3 as="h2" id="join-the-community">
+            <Typography variant="delta" as="h2" id="join-the-community">
               {formatMessage({
                 id: 'app.components.HomePage.community',
                 defaultMessage: 'Join the community',
               })}
-            </H3>
-            <WordWrap textColor="neutral600">
+            </Typography>
+            <Typography textColor="neutral600">
               {formatMessage({
                 id: 'app.components.HomePage.community.content',
                 defaultMessage:
                   'Discuss with team members, contributors and developers on different channels',
               })}
-            </WordWrap>
+            </Typography>
           </Stack>
           <Link
             href="https://portal.productboard.com/strapi/1-roadmap/tabs/2-under-consideration"

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

@@ -0,0 +1,111 @@
+import React from 'react';
+import { useQuery } from 'react-query';
+import { useIntl } from 'react-intl';
+import { LoadingIndicatorPage, useNotification, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Main } from '@strapi/design-system/Main';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { Typography } from '@strapi/design-system/Typography';
+import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
+import { fetchPlugins } from './utils/api';
+
+const Plugins = () => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
+  const { notifyStatus } = useNotifyAT();
+  const toggleNotification = useNotification();
+
+  const title = formatMessage({
+    id: 'app.components.ListPluginsPage.title',
+    defaultMessage: 'Plugins',
+  });
+
+  const notifyLoad = () => {
+    notifyStatus(
+      formatMessage(
+        {
+          id: 'app.utils.notify.data-loaded',
+          defaultMessage: 'The {target} has loaded',
+        },
+        { target: title }
+      )
+    );
+  };
+
+  const { status, data } = useQuery('list-plugins', () => fetchPlugins(notifyLoad), {
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+
+  const isLoading = status !== 'success' && status !== 'error';
+
+  if (isLoading) {
+    return (
+      <Layout>
+        <Main aria-busy>
+          <LoadingIndicatorPage />
+        </Main>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <Main>
+        <HeaderLayout
+          title={title}
+          subtitle={formatMessage({
+            id: 'app.components.ListPluginsPage.description',
+            defaultMessage: 'List of the installed plugins in the project.',
+          })}
+        />
+        <ContentLayout>
+          <Table colCount={2} rowCount={data?.plugins.length + 1}>
+            <Thead>
+              <Tr>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({
+                      id: 'Settings.roles.list.header.name',
+                      defaultMessage: 'Name',
+                    })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({
+                      id: 'Settings.roles.list.header.description',
+                      defaultMessage: 'description',
+                    })}
+                  </Typography>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {data.plugins.map(({ name, displayName, description }) => {
+                return (
+                  <Tr key={name}>
+                    <Td>
+                      <Typography textColor="neutral800" variant="omega" fontWeight="bold">
+                        {displayName}
+                      </Typography>
+                    </Td>
+                    <Td>
+                      <Typography textColor="neutral800">{description}</Typography>
+                    </Td>
+                  </Tr>
+                );
+              })}
+            </Tbody>
+          </Table>
+        </ContentLayout>
+      </Main>
+    </Layout>
+  );
+};
+
+export default Plugins;

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

@@ -1,34 +1,13 @@
 import React from 'react';
-import { CheckPagePermissions, NoContent } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+
 import adminPermissions from '../../permissions';
+import Plugins from './Plugins';
 
 const InstalledPluginsPage = () => {
-  const { formatMessage } = useIntl();
-
   return (
     <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
-      <Layout>
-        <Main>
-          <HeaderLayout
-            title={formatMessage({
-              id: 'app.components.ListPluginsPage.helmet.title',
-              defaultMessage: 'List plugins',
-            })}
-          />
-          <ContentLayout>
-            <NoContent
-              content={{
-                id: 'coming.soon',
-                defaultMessage:
-                  'This content is currently under construction and will be back in a few weeks!',
-              }}
-            />
-          </ContentLayout>
-        </Main>
-      </Layout>
+      <Plugins />
     </CheckPagePermissions>
   );
 };

package/admin/src/pages/InstalledPluginsPage/utils/api.js

@@ -0,0 +1,11 @@
+import { axiosInstance } from '../../../core/utils';
+
+const fetchPlugins = async notify => {
+  const { data } = await axiosInstance.get('/admin/plugins');
+
+  notify();
+
+  return data;
+};
+
+export { fetchPlugins };

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

@@ -17,7 +17,7 @@ import pick from 'lodash/pick';
 import omit from 'lodash/omit';
 import { Helmet } from 'react-helmet';
 import { Main } from '@strapi/design-system/Main';
-import { H3 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { Button } from '@strapi/design-system/Button';
@@ -33,6 +33,7 @@ import Check from '@strapi/icons/Check';
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
 import { fetchUser, putUser } from './utils/api';
 import schema from './utils/schema';
+import { getFullName } from '../../utils';
 
 const PasswordInput = styled(TextInput)`
   ::-ms-reveal {
@@ -87,7 +88,7 @@ const ProfilePage = () => {
       await queryClient.invalidateQueries('user');
 
       auth.setUserInfo(data);
-      const userDisplayName = data.username || `${data.firstname} ${data.lastname}`;
+      const userDisplayName = data.username || getFullName(data.firstname, data.lastname);
       setUserDisplayName(userDisplayName);
       changeLocale(data.preferedLanguage);
 
@@ -172,7 +173,7 @@ const ProfilePage = () => {
           return (
             <Form>
               <HeaderLayout
-                title={data.username || `${data.firstname} ${data.lastname}`}
+                title={data.username || getFullName(data.firstname, data.lastname)}
                 primaryAction={
                   <Button startIcon={<Check />} loading={isSubmitting} type="submit">
                     {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
@@ -192,12 +193,12 @@ const ProfilePage = () => {
                       paddingRight={7}
                     >
                       <Stack size={4}>
-                        <H3 as="h2">
+                        <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'Settings.profile.form.section.profile.title',
                             defaultMessage: 'Profile',
                           })}
-                        </H3>
+                        </Typography>
                         <Grid gap={5}>
                           <GridItem s={12} col={6}>
                             <GenericInput
@@ -261,12 +262,12 @@ const ProfilePage = () => {
                       paddingRight={7}
                     >
                       <Stack size={4}>
-                        <H3 as="h2">
+                        <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'Settings.profile.form.section.password.title',
                             defaultMessage: 'Change password',
                           })}
-                        </H3>
+                        </Typography>
 
                         <Grid gap={5}>
                           <GridItem s={12} col={6}>
@@ -408,12 +409,12 @@ const ProfilePage = () => {
                       paddingRight={7}
                     >
                       <Stack size={4}>
-                        <H3 as="h2">
+                        <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'Settings.profile.form.section.experience.title',
                             defaultMessage: 'Experience',
                           })}
-                        </H3>
+                        </Typography>
                         <Grid gap={5}>
                           <GridItem s={12} col={6}>
                             <Select

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

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useIntl } from 'react-intl';
-import { ContentBox, useNotification } from '@strapi/helper-plugin';
+import { ContentBox, useNotification, useTracking } from '@strapi/helper-plugin';
 import { IconButton } from '@strapi/design-system/IconButton';
 import Duplicate from '@strapi/icons/Duplicate';
 import PropTypes from 'prop-types';
@@ -10,6 +10,8 @@ import Key from '@strapi/icons/Key';
 const HeaderContentBox = ({ apiToken }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
 
   return (
     <ContentBox
@@ -18,6 +20,7 @@ const HeaderContentBox = ({ apiToken }) => {
           <span style={{ alignSelf: 'start' }}>
             <CopyToClipboard
               onCopy={() => {
+                trackUsageRef('didCopyTokenKey');
                 toggleNotification({
                   type: 'success',
                   message: { id: 'Settings.apiTokens.notification.copied' },

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import {
   SettingsPageTitle,
@@ -6,6 +6,7 @@ import {
   Form,
   useOverlayBlocker,
   useNotification,
+  useTracking,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
@@ -37,6 +38,8 @@ const ApiTokenCreateView = () => {
   const { lockApp, unlockApp } = useOverlayBlocker();
   const toggleNotification = useNotification();
   const history = useHistory();
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
 
   const {
     params: { id },
@@ -44,6 +47,10 @@ const ApiTokenCreateView = () => {
 
   const isCreating = id === 'create';
 
+  useEffect(() => {
+    trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList');
+  }, [isCreating]);
+
   if (history.location.state?.apiToken.accessKey) {
     apiToken = history.location.state.apiToken;
   }
@@ -73,6 +80,7 @@ const ApiTokenCreateView = () => {
   }
 
   const handleSubmit = async (body, actions) => {
+    trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken');
     lockApp();
 
     try {
@@ -89,6 +97,10 @@ const ApiTokenCreateView = () => {
         message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),
       });
 
+      trackUsageRef.current(isCreating ? 'didCreateToken' : 'didEditToken', {
+        type: apiToken.type,
+      });
+
       if (isCreating) {
         history.replace(`/settings/api-tokens/${response.id}`, { apiToken: response });
       }

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DeleteButton/index.js

@@ -2,17 +2,21 @@ import React from 'react';
 import Trash from '@strapi/icons/Trash';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Box } from '@strapi/design-system/Box';
-import { stopPropagation } from '@strapi/helper-plugin';
+import { stopPropagation, useTracking } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 
 const DeleteButton = ({ tokenName, onClickDelete }) => {
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
 
   return (
     <Box paddingLeft={1} {...stopPropagation}>
       <IconButton
-        onClick={onClickDelete}
+        onClick={() => {
+          trackUsage('willDeleteToken');
+          onClickDelete();
+        }}
         label={formatMessage(
           {
             id: 'app.component.table.delete',

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/index.js

@@ -2,7 +2,13 @@ import React from 'react';
 import { Typography } from '@strapi/design-system/Typography';
 import { Tbody, Tr, Td } from '@strapi/design-system/Table';
 import { Flex } from '@strapi/design-system/Flex';
-import { RelativeTime, useQueryParams, onRowClick, pxToRem } from '@strapi/helper-plugin';
+import {
+  RelativeTime,
+  useQueryParams,
+  onRowClick,
+  pxToRem,
+  useTracking,
+} from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
@@ -17,6 +23,7 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
     push,
     location: { pathname },
   } = useHistory();
+  const { trackUsage } = useTracking();
 
   const apiTokens = rows.sort((a, b) => {
     const comparaison = a.name.localeCompare(b.name);
@@ -31,7 +38,10 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
           <Tr
             key={apiToken.id}
             {...onRowClick({
-              fn: () => push(`${pathname}/${apiToken.id}`),
+              fn: () => {
+                trackUsage('willEditTokenFromList');
+                push(`${pathname}/${apiToken.id}`);
+              },
               condition: canUpdate,
             })}
           >

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

@@ -8,6 +8,7 @@ import {
   useRBAC,
   NoContent,
   DynamicTable,
+  useTracking,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
@@ -31,6 +32,7 @@ const ApiTokenListView = () => {
     allowedActions: { canCreate, canDelete, canUpdate, canRead },
   } = useRBAC(adminPermissions.settings['api-tokens']);
   const { push } = useHistory();
+  const { trackUsage } = useTracking();
 
   useEffect(() => {
     push({ search: qs.stringify({ sort: 'name:ASC' }, { encode: false }) });
@@ -39,10 +41,13 @@ const ApiTokenListView = () => {
   const { data: apiTokens, status, isFetching } = useQuery(
     ['api-tokens'],
     async () => {
+      trackUsage('willAccessTokenList');
       const {
         data: { data },
       } = await axiosInstance.get(`/admin/api-tokens`);
 
+      trackUsage('didAccessTokenList', { number: data.length });
+
       return data;
     },
     {
@@ -67,6 +72,7 @@ const ApiTokenListView = () => {
     {
       onSuccess: async () => {
         await queryClient.invalidateQueries(['api-tokens']);
+        trackUsage('didDeleteToken');
       },
       onError: err => {
         if (err?.response?.data?.data) {
@@ -100,6 +106,7 @@ const ApiTokenListView = () => {
               data-testid="create-api-token-button"
               startIcon={<Plus />}
               size="L"
+              onClick={() => trackUsage('willAddTokenFromList')}
               to="/settings/api-tokens/create"
             >
               {formatMessage({

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js

@@ -20,7 +20,7 @@ import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import RoleRow from './components/RoleRow';
 import EmptyRole from './components/EmptyRole';
-import UpgradePlanModal from '../../../../../components/UpgradePlanModal ';
+import UpgradePlanModal from '../../../../../components/UpgradePlanModal';
 import { useRolesList } from '../../../../../hooks';
 
 const useSortedRoles = () => {

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -29,7 +29,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Check from '@strapi/icons/Check';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
-import { formatAPIErrors } from '../../../../../utils';
+import { formatAPIErrors, getFullName } from '../../../../../utils';
 import { fetchUser, putUser } from './utils/api';
 import layout from './utils/layout';
 import { editValidation } from '../utils/validations/users';
@@ -89,7 +89,7 @@ const EditPage = ({ canUpdate }) => {
       if (id.toString() === userInfos.id.toString()) {
         auth.setUserInfo(data);
 
-        const userDisplayName = get(body, 'username') || `${body.firstname} ${body.lastname}`;
+        const userDisplayName = get(body, 'username') || getFullName(body.firstname, body.lastname);
 
         setUserDisplayName(userDisplayName);
       }
@@ -131,7 +131,7 @@ const EditPage = ({ canUpdate }) => {
   }, {});
 
   const headerLabelName =
-    initialData.username || `${initialData.firstname} ${initialData.lastname}`;
+    initialData.username || getFullName(initialData.firstname, initialData.lastname);
 
   const title = formatMessage(headerLabel, { name: headerLabelName });
 

package/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -11,6 +11,7 @@ import Trash from '@strapi/icons/Trash';
 import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { stopPropagation, onRowClick } from '@strapi/helper-plugin';
+import { getFullName } from '../../../../../../../utils';
 
 const TableRows = ({
   canDelete,
@@ -49,7 +50,7 @@ const TableRows = ({
                       id: 'app.component.table.select.one-entry',
                       defaultMessage: `Select {target}`,
                     },
-                    { target: `${data.firstname} ${data.lastname}` }
+                    { target: getFullName(data.firstname, data.lastname) }
                   )}
                   checked={isChecked}
                   onChange={() => {
@@ -77,7 +78,7 @@ const TableRows = ({
                     onClick={() => push(`${pathname}/${data.id}`)}
                     label={formatMessage(
                       { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
-                      { target: `${data.firstname} ${data.lastname}` }
+                      { target: getFullName(data.firstname, data.lastname) }
                     )}
                     noBorder
                     icon={<Pencil />}
@@ -89,7 +90,7 @@ const TableRows = ({
                         onClick={() => onClickDelete(data.id)}
                         label={formatMessage(
                           { id: 'app.component.table.delete', defaultMessage: 'Delete {target}' },
-                          { target: `${data.firstname} ${data.lastname}` }
+                          { target: getFullName(data.firstname, data.lastname) }
                         )}
                         noBorder
                         icon={<Trash />}

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -67,6 +67,8 @@ const ModalForm = ({ queryName, onToggle }) => {
     try {
       await postMutation.mutateAsync(body);
     } catch (err) {
+      unlockApp();
+
       if (err?.response?.data.message === 'Email already taken') {
         setErrors({ email: err.response.data.message });
       }

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/schema.js

@@ -3,7 +3,7 @@ import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = yup.object().shape({
   firstname: yup.string().required(translatedErrors.required),
-  lastname: yup.string().required(translatedErrors.required),
+  lastname: yup.string(),
   email: yup
     .string()
     .email(translatedErrors.email)

package/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/index.js

@@ -6,7 +6,7 @@ import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 const PaginationFooter = ({ pagination }) => {
   return (
-    <Box paddingTop={6}>
+    <Box paddingTop={4}>
       <Flex alignItems="flex-end" justifyContent="space-between">
         <PageSizeURLQuery />
         <PaginationURLQuery pagination={pagination} />

package/admin/src/pages/SettingsPage/pages/Users/utils/validations/users/edit.js

@@ -1,9 +1,9 @@
 import * as yup from 'yup';
-import profileValidation from './profile';
+import { commonUserSchema } from './profile';
 import rolesValidation from './roles';
 
 const schema = yup.object().shape({
-  ...profileValidation,
+  ...commonUserSchema,
   isActive: yup.bool(),
   ...rolesValidation,
 });

package/admin/src/pages/SettingsPage/pages/Users/utils/validations/users/profile.js

@@ -1,9 +1,9 @@
 import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
 
-const schema = {
+export const commonUserSchema = {
   firstname: yup.mixed().required(translatedErrors.required),
-  lastname: yup.mixed().required(translatedErrors.required),
+  lastname: yup.mixed(),
   email: yup
     .string()
     .email(translatedErrors.email)
@@ -23,6 +23,10 @@ const schema = {
     .when('password', (password, passSchema) => {
       return password ? passSchema.required(translatedErrors.required) : passSchema;
     }),
+};
+
+const schema = {
+  ...commonUserSchema,
   currentPassword: yup
     .string()
     .when(['password', 'confirmPassword'], (password, confirmPassword, passSchema) => {