Regression: User edit form missing fields (#17699)

client/admin/users/EditUser.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useCallback } from 'react';
-import { Box, Skeleton, Field, Margins, Button } from '@rocket.chat/fuselage';
+import { Box, Field, Margins, Button } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
@@ -9,21 +9,15 @@ import { useRoute } from '../../contexts/RouterContext';
 import UserAvatarEditor from '../../components/basic/avatar/UserAvatarEditor';
 import { useForm } from '../../hooks/useForm';
 import UserForm from './UserForm';
+import { FormSkeleton } from './Skeleton';
 
-export function EditUserWithData({ userId, ...props }) {
+export function EditUserWithData({ uid, ...props }) {
 	const t = useTranslation();
 	const { data: roleData, state: roleState, error: roleError } = useEndpointDataExperimental('roles.list', '') || {};
-	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId }), [userId]));
+	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId: uid }), [uid]));
 
 	if ([state, roleState].includes(ENDPOINT_STATES.LOADING)) {
-		return <Box w='full' pb='x24' {...props}>
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8' />
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8'/>
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8'/>
-		</Box>;
+		return <FormSkeleton/>;
 	}
 
 	if (error || roleError) {
@@ -36,11 +30,12 @@ export function EditUserWithData({ userId, ...props }) {
 const getInitialValue = (data) => ({
 	roles: data.roles,
 	name: data.name ?? '',
+	password: '',
 	username: data.username,
 	status: data.status,
 	bio: data.bio ?? '',
 	email: (data.emails && data.emails[0].address) || '',
-	emailVerified: (data.emails && data.emails[0].verified) || false,
+	verified: (data.emails && data.emails[0].verified) || false,
 	setRandomPassword: false,
 	requirePasswordChange: data.setRandomPassword || false,
 	customFields: data.customFields ?? {},

client/admin/users/Skeleton.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+
+export const FormSkeleton = (props) => <Box w='full' pb='x24' {...props}>
+	<Skeleton mbe='x8' />
+	<Skeleton mbe='x4'/>
+	<Skeleton mbe='x4'/>
+	<Skeleton mbe='x8'/>
+	<Skeleton mbe='x4'/>
+	<Skeleton mbe='x8'/>
+</Box>;

client/admin/users/UserInfo.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { Box, Avatar, Margins, Skeleton, Chip, Tag } from '@rocket.chat/fuselage';
+import { Box, Avatar, Margins, Chip, Tag } from '@rocket.chat/fuselage';
 import moment from 'moment';
 
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
@@ -9,6 +9,7 @@ import { DateFormat } from '../../../app/lib';
 import { UserInfoActions } from './UserInfoActions';
 import MarkdownText from '../../components/basic/MarkdownText';
 import VerticalBar from '../../components/basic/VerticalBar';
+import { FormSkeleton } from './Skeleton';
 
 const useTimezoneClock = (utcOffset = 0, updateInterval) => {
 	const [time, setTime] = useState();
@@ -28,23 +29,16 @@ const UTCClock = ({ utcOffset, ...props }) => {
 	return <Box {...props}>{time} UTC {utcOffset}</Box>;
 };
 
-export function UserInfoWithData({ userId, ...props }) {
+export function UserInfoWithData({ uid, ...props }) {
 	const t = useTranslation();
 	const [cache, setCache] = useState();
 
 	const onChange = () => setCache(new Date());
 
-	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId }), [userId, cache]));
+	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId: uid }), [uid, cache]));
 
 	if (state === ENDPOINT_STATES.LOADING) {
-		return <Box w='full' pb='x24'>
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8' />
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8'/>
-			<Skeleton mbe='x4'/>
-			<Skeleton mbe='x8'/>
-		</Box>;
+		return <FormSkeleton/>;
 	}
 
 	if (error) {
@@ -65,17 +59,17 @@ export function UserInfo({ data, onChange, ...props }) {
 	const avatarUrl = roomTypes.getConfig('d').getAvatarPath({ name: data.username || data.name, type: 'd', _id: data._id });
 
 	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} {...props}>
-		<Box display='flex' flexDirection='column' alignItems='center'>
-			<Margins block='x2'>
+		<Box display='flex' flexDirection='column' alignItems='center' withTruncatedText>
+			<Margins block='x2' inline='auto'>
 				<Avatar size={'x120'} title={data.username} url={avatarUrl}/>
-				<Box fontScale='h1'>{data.name || data.username}</Box>
-				{!!data.name && <Box fontScale='p1' color='hint'>@{data.username}</Box>}
-				<Box fontScale='p1' color='hint'>{data.status}</Box>
+				<Box fontScale='h1' withTruncatedText>{data.name || data.username}</Box>
+				{!!data.name && <Box fontScale='p1' color='hint' withTruncatedText>@{data.username}</Box>}
+				<Box fontScale='p1' color='hint' withTruncatedText>{data.status}</Box>
 			</Margins>
 		</Box>
 
 		<UserInfoActions isActive={data.active} isAdmin={data.roles.includes('admin')} _id={data._id} username={data.username} onChange={onChange}/>
-		<Box display='flex' flexDirection='column' w='full' backgroundColor='neutral-200' p='x16'>
+		<Box display='flex' flexDirection='column' w='full' backgroundColor='neutral-200' p='x16' withTruncatedText>
 			<Margins blockEnd='x4'>
 				{data.bio && data.bio.trim().length > 0 && <MarkdownText fontScale='s1'>{data.bio}</MarkdownText>}
 				{!!data.roles.length && <>
@@ -89,7 +83,7 @@ export function UserInfo({ data, onChange, ...props }) {
 
 				{data.emails && <> <Box fontScale='micro' color='hint'>{t('Email')}</Box>
 					<Box display='flex' flexDirection='row' alignItems='center'>
-						<Box fontScale='s1'>{data.emails[0].address}</Box>
+						<Box fontScale='s1' withTruncatedText>{data.emails[0].address}</Box>
 						<Margins inline='x4'>
 							{data.emails[0].verified && <Tag variant='primary'>{t('Verified')}</Tag>}
 							{data.emails[0].verified || <Tag disabled>{t('Not_verified')}</Tag>}

client/admin/users/UsersPage.js

@@ -56,8 +56,8 @@ function UsersPage() {
 				<VerticalBar.Close onClick={handleVerticalBarCloseButtonClick} />
 			</VerticalBar.Header>
 			<VerticalBar.Content>
-				{context === 'info' && <UserInfoWithData userId={id}/>}
-				{context === 'edit' && <EditUserWithData userId={id}/>}
+				{context === 'info' && <UserInfoWithData uid={id}/>}
+				{context === 'edit' && <EditUserWithData uid={id}/>}
 				{context === 'new' && <AddUser/>}
 				{context === 'invite' && <InviteUsers/>}
 			</VerticalBar.Content>

client/components/basic/VerticalBar.js

@@ -10,6 +10,7 @@ function VerticalBar({ children, ...props }) {
 
 	return <Box
 		display='flex'
+		flexDirection='column'
 		flexShrink={0}
 		width={mobile ? 'full' : 'x380'}
 		height='full'
@@ -23,6 +24,8 @@ function VerticalBar({ children, ...props }) {
 			display='flex'
 			flexDirection='column'
 			flexGrow={1}
+			flexShrink={1}
+			withTruncatedText
 		>
 			{children}
 		</Tile>