diff --git a/packages/core/admin/admin/src/components/AuthenticatedApp/index.js b/packages/core/admin/admin/src/components/AuthenticatedApp/index.js index e1a99b58d7..53507f3753 100644 --- a/packages/core/admin/admin/src/components/AuthenticatedApp/index.js +++ b/packages/core/admin/admin/src/components/AuthenticatedApp/index.js @@ -1,7 +1,8 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; // TODO: DS add loader -import { LoadingIndicatorPage, AppInfosContext } from '@strapi/helper-plugin'; +import { auth, LoadingIndicatorPage, AppInfosContext } from '@strapi/helper-plugin'; import { useQueries } from 'react-query'; +import get from 'lodash/get'; import packageJSON from '../../../../package.json'; import { useConfigurations } from '../../hooks'; import PluginsInitializer from '../PluginsInitializer'; @@ -12,6 +13,9 @@ import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion'; const strapiVersion = packageJSON.version; const AuthenticatedApp = () => { + const userInfo = auth.getUserInfo(); + const userName = get(userInfo, 'username', `${userInfo.firstname} ${userInfo.lastname}`); + const [userDisplayName, setUserDisplayName] = useState(userName); const { showReleaseNotification } = useConfigurations(); const [ { data: appInfos, status }, @@ -54,7 +58,13 @@ const AuthenticatedApp = () => { return ( diff --git a/packages/core/admin/admin/src/components/AuthenticatedApp/tests/index.test.js b/packages/core/admin/admin/src/components/AuthenticatedApp/tests/index.test.js index 243716ab47..ac926dc340 100644 --- a/packages/core/admin/admin/src/components/AuthenticatedApp/tests/index.test.js +++ b/packages/core/admin/admin/src/components/AuthenticatedApp/tests/index.test.js @@ -9,6 +9,11 @@ import AuthenticatedApp from '..'; const strapiVersion = packageJSON.version; +jest.mock('@strapi/helper-plugin', () => ({ + ...jest.requireActual('@strapi/helper-plugin'), + auth: { getUserInfo: () => ({ firstname: 'kai', lastname: 'doe' }) }, +})); + jest.mock('../utils/api', () => ({ fetchStrapiLatestRelease: jest.fn(), fetchAppInfo: jest.fn(), diff --git a/packages/core/admin/admin/src/components/LeftMenu/index.js b/packages/core/admin/admin/src/components/LeftMenu/index.js index f96797d1ea..928358008f 100644 --- a/packages/core/admin/admin/src/components/LeftMenu/index.js +++ b/packages/core/admin/admin/src/components/LeftMenu/index.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import get from 'lodash/get'; + import { useHistory } from 'react-router-dom'; import { MainNav, @@ -16,23 +16,14 @@ import { Button, } from '@strapi/parts'; import ContentIcon from '@strapi/icons/ContentIcon'; -import { auth, usePersistentState } from '@strapi/helper-plugin'; +import { auth, usePersistentState, useAppInfos } from '@strapi/helper-plugin'; import useConfigurations from '../../hooks/useConfigurations'; const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => { const { menuLogo } = useConfigurations(); const { push } = useHistory(); const [condensed, setCondensed] = usePersistentState('navbar-condensed', false); - - const userInfo = auth.getUserInfo(); - - let displayName; - - if (userInfo && userInfo.firstname && userInfo.lastname) { - displayName = `${userInfo.firstname} ${userInfo.lastname}`; - } else { - displayName = get(userInfo, 'username', ''); - } + const { userDisplayName } = useAppInfos(); return ( @@ -81,7 +72,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => { - {displayName} + {userDisplayName} setCondensed(s => !s)}> diff --git a/packages/core/admin/admin/src/pages/Users/EditPage/index.js b/packages/core/admin/admin/src/pages/Users/EditPage/index.js index 23c2e8b008..b4d33f99ed 100644 --- a/packages/core/admin/admin/src/pages/Users/EditPage/index.js +++ b/packages/core/admin/admin/src/pages/Users/EditPage/index.js @@ -3,12 +3,14 @@ import { useRouteMatch, useHistory } from 'react-router-dom'; import { useIntl } from 'react-intl'; import PropTypes from 'prop-types'; import pick from 'lodash/pick'; +import get from 'lodash/get'; import { CustomContentLayout, Form, GenericInput, SettingsPageTitle, - // auth, + auth, + useAppInfos, useFocusWhenNavigate, useNotification, useOverlayBlocker, @@ -24,6 +26,7 @@ import { Main } from '@strapi/parts/Main'; import { Stack } from '@strapi/parts/Stack'; import { CheckIcon } from '@strapi/icons'; import MagicLink from 'ee_else_ce/pages/Users/components/MagicLink'; +import { formatAPIErrors } from '../../../utils'; import { fetchUser, putUser } from './utils/api'; import layout from './utils/layout'; import { editValidation } from '../utils/validations/users'; @@ -37,6 +40,7 @@ const EditPage = ({ canUpdate }) => { params: { id }, } = useRouteMatch('/settings/users/:id'); const { push } = useHistory(); + const { setUserDisplayName } = useAppInfos(); const toggleNotification = useNotification(); const { lockApp, unlockApp } = useOverlayBlocker(); @@ -65,15 +69,35 @@ const EditPage = ({ canUpdate }) => { }, }); - const handleSubmit = async body => { + const handleSubmit = async (body, actions) => { lockApp(); try { - await putUser(id, body); + const data = await putUser(id, body); + + const userInfos = auth.getUserInfo(); + + // The user is updating himself + if (id.toString() === userInfos.id.toString()) { + auth.setUserInfo(data); + + const userDisplayName = get(body, 'username', `${body.firstname} ${body.lastname}`); + + setUserDisplayName(userDisplayName); + } } catch (err) { + // FIXME when API errors are ready + const errors = formatAPIErrors(err.response.data); + const fieldsErrors = Object.keys(errors).reduce((acc, current) => { + acc[current] = errors[current].id; + + return acc; + }, {}); + + actions.setErrors(fieldsErrors); toggleNotification({ type: 'warning', - message: data.message, + message: get(err, 'response.data.message', 'notification.error'), }); }