Regression: Custom roles displaying ID instead of name on some admin screens (#24999)

* Regression: Custom roles displaying ID instead of name on admin screens

* fix: missing NewRolePage role name validation

* Update client/views/admin/users/AddUser.js

Co-authored-by: Douglas Fabris <devfabris@gmail.com>

* filter

* prettier

Co-authored-by: dougfabris <devfabris@gmail.com>

client/views/admin/permissions/NewRolePage.js

 import { Box, ButtonGroup, Button, Margins } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import React from 'react';
+import React, { useState } from 'react';
 
 import VerticalBar from '../../../components/VerticalBar';
 import { useRoute } from '../../../contexts/RouterContext';
@@ -14,6 +14,7 @@ const NewRolePage = () => {
 	const t = useTranslation();
 	const router = useRoute('admin-permissions');
 	const dispatchToastMessage = useToastMessageDispatch();
+	const [errors, setErrors] = useState();
 
 	const { values, handlers } = useForm({
 		name: '',
@@ -25,6 +26,10 @@ const NewRolePage = () => {
 	const saveRole = useEndpoint('POST', 'roles.create');
 
 	const handleSave = useMutableCallback(async () => {
+		if (values.name === '') {
+			return setErrors({ name: t('error-the-field-is-required', { field: t('Role') }) });
+		}
+
 		try {
 			await saveRole(values);
 			dispatchToastMessage({ type: 'success', message: t('Saved') });
@@ -39,7 +44,7 @@ const NewRolePage = () => {
 			<VerticalBar.ScrollableContent>
 				<Box w='full' alignSelf='center' mb='neg-x8'>
 					<Margins block='x8'>
-						<RoleForm values={values} handlers={handlers} />
+						<RoleForm values={values} handlers={handlers} errors={errors} />
 					</Margins>
 				</Box>
 			</VerticalBar.ScrollableContent>

client/views/admin/permissions/RoleForm.js

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 
 import { useTranslation } from '../../../contexts/TranslationContext';
 
-const RoleForm = ({ values, handlers, className, editing = false, isProtected = false }) => {
+const RoleForm = ({ values, handlers, className, errors, editing = false, isProtected = false }) => {
 	const t = useTranslation();
 
 	const { name, description, scope, mandatory2fa } = values;
@@ -25,6 +25,7 @@ const RoleForm = ({ values, handlers, className, editing = false, isProtected =
 				<Field.Row>
 					<TextInput disabled={editing} value={name} onChange={handleName} placeholder={t('Role')} />
 				</Field.Row>
+				<Field.Error>{errors?.name}</Field.Error>
 			</Field>
 			<Field className={className}>
 				<Field.Label>{t('Description')}</Field.Label>

client/views/admin/users/AddUser.js

@@ -100,7 +100,7 @@ export function AddUser({ roles, onReload, ...props }) {
 		}
 	});
 
-	const availableRoles = useMemo(() => roleData?.roles?.map(({ _id, description }) => [_id, description || _id]) ?? [], [roleData]);
+	const availableRoles = useMemo(() => roleData?.roles?.map(({ _id, description, name }) => [_id, description || name]) ?? [], [roleData]);
 
 	const append = useMemo(
 		() => (

client/views/admin/users/UserRow.js

@@ -2,6 +2,7 @@ import { Box, Table } from '@rocket.chat/fuselage';
 import { capitalize } from '@rocket.chat/string-helpers';
 import React from 'react';
 
+import { Roles } from '../../../../app/models/client';
 import UserAvatar from '../../../components/avatar/UserAvatar';
 import { useTranslation } from '../../../contexts/TranslationContext';
 
@@ -15,6 +16,11 @@ const UserRow = ({ emails, _id, username, name, roles, status, avatarETag, onCli
 	const t = useTranslation();
 
 	const statusText = active ? t(capitalize(status)) : t('Disabled');
+	const roleNames = (roles || [])
+		.map((roleId) => Roles.findOne(roleId, { fields: { name: 1 } })?.name)
+		.filter((roleName) => !!roleName)
+		.join(', ');
+
 	return (
 		<Table.Row onKeyDown={onClick(_id)} onClick={onClick(_id)} tabIndex={0} role='link' action qa-user-id={_id}>
 			<Table.Cell style={style}>
@@ -44,7 +50,7 @@ const UserRow = ({ emails, _id, username, name, roles, status, avatarETag, onCli
 				</Table.Cell>
 			)}
 			<Table.Cell style={style}>{emails && emails.length && emails[0].address}</Table.Cell>
-			{mediaQuery && <Table.Cell style={style}>{roles && roles.join(', ')}</Table.Cell>}
+			{mediaQuery && <Table.Cell style={style}>{roleNames}</Table.Cell>}
 			<Table.Cell fontScale='p2' color='hint' style={style}>
 				{statusText}
 			</Table.Cell>