@strapi/admin 4.0.0-beta.14 → 4.0.0-beta.15

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

@@ -9,12 +9,13 @@ import PluginsInitializer from '../PluginsInitializer';
 import RBACProvider from '../RBACProvider';
 import { fetchAppInfo, fetchCurrentUserPermissions, fetchStrapiLatestRelease } from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
+import { getFullName } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 
 const AuthenticatedApp = () => {
   const userInfo = auth.getUserInfo();
-  const userName = get(userInfo, 'username') || `${userInfo.firstname} ${userInfo.lastname}`;
+  const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
   const { showReleaseNotification } = useConfigurations();
   const [

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

@@ -13,6 +13,7 @@ import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { usePluginsQueryParams } from '../../../hooks';
 import CellContent from '../CellContent';
+import { getFullName } from '../../../../utils';
 
 const TableRows = ({
   canCreate,
@@ -69,7 +70,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={() => {

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

@@ -518,7 +518,9 @@ const EditViewDataManagerProvider = ({
               when={!isEqual(modifiedData, initialData)}
               message={formatMessage({ id: 'global.prompt.unsaved' })}
             />
-            <form onSubmit={handleSubmit}>{children}</form>
+            <form noValidate onSubmit={handleSubmit}>
+              {children}
+            </form>
           </>
         )}
       </>

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -300,7 +300,7 @@ const createYupSchemaAttribute = (type, validations, options) => {
                       return !isEmpty(value);
                     }
 
-                    return !isEmpty(value.toString());
+                    return !isEmpty(value?.toString());
                   }
 
                   return !isEmpty(value);

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

@@ -5,6 +5,7 @@ import isEmpty from 'lodash/isEmpty';
 import Select, { createFilter } from 'react-select';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
+import { Typography } from '@strapi/design-system/Typography';
 import ListItem from './ListItem';
 
 function SelectMany({
@@ -26,6 +27,7 @@ function SelectMany({
   styles,
   targetModel,
   value,
+  description,
 }) {
   const { formatMessage } = useIntl();
 
@@ -37,7 +39,7 @@ function SelectMany({
   };
 
   return (
-    <>
+    <Stack size={1}>
       <Select
         components={components}
         isDisabled={isDisabled}
@@ -95,11 +97,17 @@ function SelectMany({
           })}
         </Stack>
       </Box>
-    </>
+      {description && (
+        <Typography variant="pi" textColor="neutral600">
+          {description}
+        </Typography>
+      )}
+    </Stack>
   );
 }
 
 SelectMany.defaultProps = {
+  description: '',
   components: {},
   placeholder: null,
   searchToPersist: null,
@@ -133,6 +141,7 @@ SelectMany.propTypes = {
   styles: PropTypes.object.isRequired,
   targetModel: PropTypes.string.isRequired,
   value: PropTypes.array,
+  description: PropTypes.string,
 };
 
 export default memo(SelectMany);

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

@@ -1,6 +1,8 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { Stack } from '@strapi/design-system/Stack';
+import { Typography } from '@strapi/design-system/Typography';
 import get from 'lodash/get';
 import isNull from 'lodash/isNull';
 import Select from 'react-select';
@@ -21,36 +23,46 @@ function SelectOne({
   placeholder,
   styles,
   value,
+  description,
 }) {
   const { formatMessage } = useIntl();
 
   return (
-    <Select
-      components={{
-        ...components,
-        SingleValue,
-      }}
-      id={name}
-      isClearable
-      isDisabled={isDisabled}
-      isLoading={isLoading}
-      mainField={mainField}
-      options={options}
-      onChange={onChange}
-      onInputChange={onInputChange}
-      onMenuClose={onMenuClose}
-      onMenuOpen={onMenuOpen}
-      onMenuScrollToBottom={onMenuScrollToBottom}
-      placeholder={formatMessage(
-        placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+    <Stack size={1}>
+      <Select
+        components={{
+          ...components,
+          SingleValue,
+        }}
+        id={name}
+        isClearable
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        mainField={mainField}
+        options={options}
+        onChange={onChange}
+        onInputChange={onInputChange}
+        onMenuClose={onMenuClose}
+        onMenuOpen={onMenuOpen}
+        onMenuScrollToBottom={onMenuScrollToBottom}
+        placeholder={formatMessage(
+          placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+        )}
+        styles={styles}
+        value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}
+      />
+
+      {description && (
+        <Typography variant="pi" textColor="neutral600">
+          {description}
+        </Typography>
       )}
-      styles={styles}
-      value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}
-    />
+    </Stack>
   );
 }
 
 SelectOne.defaultProps = {
+  description: '',
   components: {},
   placeholder: null,
   value: null,
@@ -79,6 +91,7 @@ SelectOne.propTypes = {
   }),
   styles: PropTypes.object.isRequired,
   value: PropTypes.object,
+  description: PropTypes.string,
 };
 
 export default memo(SelectOne);

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

@@ -50,7 +50,7 @@ const buildParams = (query, paramsToKeep) => {
   }, {});
 };
 function SelectWrapper({
-  // description,
+  description,
   editable,
   labelAction,
   intlLabel,
@@ -316,6 +316,7 @@ function SelectWrapper({
         styles={styles}
         targetModel={targetModel}
         value={value}
+        description={description}
       />
     </Stack>
   );
@@ -390,7 +391,7 @@ function SelectWrapper({
 
 SelectWrapper.defaultProps = {
   editable: true,
-  // description: '',
+  description: '',
   labelAction: null,
   isFieldAllowed: true,
   placeholder: null,
@@ -398,11 +399,7 @@ SelectWrapper.defaultProps = {
 
 SelectWrapper.propTypes = {
   editable: PropTypes.bool,
-  // description: PropTypes.shape({
-  //   id: PropTypes.string.isRequired,
-  //   defaultMessage: PropTypes.string.isRequired,
-  //   values: PropTypes.object,
-  // }),
+  description: PropTypes.string,
   intlLabel: PropTypes.shape({
     id: PropTypes.string.isRequired,
     defaultMessage: PropTypes.string.isRequired,

package/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -31,13 +31,14 @@ const Editor = ({
       },
       readOnly: false,
       smartIndent: false,
+      placeholder,
     });
 
     CodeMirror.commands.newlineAndIndentContinueMarkdownList = newlineAndIndentContinueMarkdownList;
     editorRef.current.on('change', doc => {
       onChangeRef.current({ target: { name, value: doc.getValue(), type: 'wysiwyg' } });
     });
-  }, [editorRef, textareaRef, name]);
+  }, [editorRef, textareaRef, name, placeholder]);
 
   useEffect(() => {
     if (value && !editorRef.current.state.focused) {
@@ -65,7 +66,7 @@ const Editor = ({
   return (
     <EditorAndPreviewWrapper>
       <EditorStylesContainer disabled={disabled || isPreviewMode}>
-        <textarea ref={textareaRef} placeholder={placeholder} />
+        <textarea ref={textareaRef} />
       </EditorStylesContainer>
       {isPreviewMode && <PreviewWysiwyg data={value} />}
     </EditorAndPreviewWrapper>

package/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -5,6 +5,9 @@ import styled from 'styled-components';
 export const EditorStylesContainer = styled.div`
   cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
   /* BASICS */
+  .CodeMirror-placeholder {
+    color: ${({ theme }) => theme.colors.neutral600} !important;
+  }
 
   .CodeMirror {
     /* Set height, width, borders, and global font properties here */
@@ -12,6 +15,8 @@ export const EditorStylesContainer = styled.div`
     height: 290px;
     color: ${({ theme }) => theme.colors.neutral800};
     direction: ltr;
+    font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+      'Open Sans', 'Helvetica Neue', sans-serif;
   }
 
   /* PADDING */
@@ -331,8 +336,6 @@ export const EditorStylesContainer = styled.div`
   }
 
   span {
-    font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
     color: ${({ theme }) => theme.colors.neutral800} !important;
   }
 `;

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -10,7 +10,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import Bold from '@strapi/icons/Bold';
 import Italic from '@strapi/icons/Italic';
 import Underline from '@strapi/icons/Underline';
-import Strikethrough from '@strapi/icons/StrikeThrough';
+import Strikethrough from '@strapi/icons/Strikethrough';
 import BulletList from '@strapi/icons/BulletList';
 import NumberList from '@strapi/icons/NumberList';
 import Code from '@strapi/icons/Code';

package/admin/src/content-manager/pages/EditView/Informations/index.js

@@ -8,6 +8,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
 import { getTrad } from '../../../utils';
 import getUnits from './utils/getUnits';
+import { getFullName } from '../../../../utils';
 
 const Informations = () => {
   const { formatMessage, formatRelativeTime } = useIntl();
@@ -17,7 +18,7 @@ const Informations = () => {
   const updatedByFirstname = initialData.updatedBy?.firstname || '';
   const updatedByLastname = initialData.updatedBy?.lastname || '';
   const updatedByUsername = initialData.updatedBy?.username;
-  const updatedBy = updatedByUsername || `${updatedByFirstname} ${updatedByLastname}`;
+  const updatedBy = updatedByUsername || getFullName(updatedByFirstname, updatedByLastname);
   const currentTime = useRef(Date.now());
   const timestamp = initialData[updatedAt]
     ? new Date(initialData[updatedAt]).getTime()
@@ -28,7 +29,7 @@ const Informations = () => {
 
   return (
     <Box>
-      <Typography variant="sigma" textColor="neutral600">
+      <Typography variant="sigma" textColor="neutral600" id="additional-informations">
         {formatMessage({
           id: getTrad('containers.Edit.information'),
           defaultMessage: 'Information',

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

@@ -252,7 +252,7 @@ const EditView = ({
                       {displayedRelationsLength > 0 && (
                         <Box
                           as="aside"
-                          aria-labelledby="additional-informations"
+                          aria-labelledby="relations-title"
                           background="neutral0"
                           borderColor="neutral150"
                           hasRadius
@@ -262,7 +262,7 @@ const EditView = ({
                           paddingTop={6}
                           shadow="tableShadow"
                         >
-                          <Typography variant="sigma" textColor="neutral600">
+                          <Typography variant="sigma" textColor="neutral600" id="relations-title">
                             {formatMessage(
                               {
                                 id: getTrad('containers.Edit.relations'),
@@ -283,10 +283,7 @@ const EditView = ({
                                     {...fieldSchema}
                                     {...metadatas}
                                     key={name}
-                                    description={{
-                                      id: metadatas.description,
-                                      defaultMessage: metadatas.description,
-                                    }}
+                                    description={metadatas.description}
                                     intlLabel={{
                                       id: metadatas.label,
                                       defaultMessage: metadatas.label,

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

@@ -155,15 +155,6 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                     <GridItem col={6}>
                       <TextInput
                         name="lastname"
-                        error={
-                          errors.lastname
-                            ? formatMessage({
-                                id: errors.lastname,
-                                defaultMessage: 'This value is required.',
-                              })
-                            : undefined
-                        }
-                        required
                         value={values.lastname}
                         onChange={handleChange}
                         label={formatMessage({

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/ProfilePage/index.js

@@ -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' })}

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