Regression: Permissions missing on new Room Edit and Contact Edit form

app/authorization/server/startup.js

@@ -92,7 +92,7 @@ Meteor.startup(function() {
 		{ _id: 'call-management',                    roles: ['admin', 'owner', 'moderator'] },
 		{ _id: 'create-invite-links',                roles: ['admin', 'owner', 'moderator'] },
 		{ _id: 'view-l-room',                        roles: ['livechat-agent', 'livechat-manager', 'admin'] },
-		{ _id: 'view-livechat-manager',              roles: ['livechat-manager', 'admin'] },
+		{ _id: 'edit-omnichannel-contact',           roles: ['livechat-manager', 'admin', 'livechat-agent'] },
 		{ _id: 'view-livechat-rooms',                roles: ['livechat-manager', 'admin'] },
 		{ _id: 'close-livechat-room',                roles: ['livechat-agent', 'livechat-manager', 'admin'] },
 		{ _id: 'close-others-livechat-room',         roles: ['livechat-manager', 'admin'] },

app/livechat/client/tabBar.ts

@@ -7,6 +7,6 @@ addAction('room-info', {
 	id: 'room-info',
 	title: 'Room_Info',
 	icon: 'info-circled',
-	template: lazy(() => import('../../../client/omnichannel/directory/chats/contextualBar')),
+	template: lazy(() => import('../../../client/omnichannel/chats/contextualBar')),
 	order: 0,
 });

client/omnichannel/directory/chats/ChatTab.js → client/omnichannel/chats/ChatTab.js

@@ -4,13 +4,13 @@ import { Table, Tag, Box } from '@rocket.chat/fuselage';
 import moment from 'moment';
 import { Meteor } from 'meteor/meteor';
 
-import { useTranslation } from '../../../contexts/TranslationContext';
-import { useEndpointData } from '../../../hooks/useEndpointData';
-import GenericTable from '../../../components/GenericTable';
-import FilterByText from '../../../components/FilterByText';
-import { usePermission } from '../../../contexts/AuthorizationContext';
-import NotAuthorizedPage from '../../../components/NotAuthorizedPage';
-import { useRoute } from '../../../contexts/RouterContext';
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useEndpointData } from '../../hooks/useEndpointData';
+import GenericTable from '../../components/GenericTable';
+import FilterByText from '../../components/FilterByText';
+import { usePermission } from '../../contexts/AuthorizationContext';
+import NotAuthorizedPage from '../../components/NotAuthorizedPage';
+import { useRoute } from '../../contexts/RouterContext';
 
 
 const useQuery = ({ text, itemsPerPage, current }, [column, direction], userIdLoggedIn) => useMemo(() => ({

client/omnichannel/directory/chats/contextualBar/ChatInfo.js → client/omnichannel/chats/contextualBar/ChatInfo.js

@@ -4,17 +4,17 @@ import { Box, Margins, Tag, Avatar, Button, Icon, ButtonGroup } from '@rocket.ch
 import { css } from '@rocket.chat/css-in-js';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
-import VerticalBar from '../../../../components/VerticalBar';
-import UserCard from '../../../../components/UserCard';
-import { FormSkeleton } from '../../Skeleton';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
-import { useTranslation } from '../../../../contexts/TranslationContext';
-import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
-import { AsyncStatePhase } from '../../../../hooks/useAsyncState';
-import UserAvatar from '../../../../components/avatar/UserAvatar';
-import { UserStatus } from '../../../../components/UserStatus';
-import { roomTypes } from '../../../../../app/utils/client';
-import { useRoute } from '../../../../contexts/RouterContext';
+import VerticalBar from '../../../components/VerticalBar';
+import UserCard from '../../../components/UserCard';
+import { FormSkeleton } from '../../directory/Skeleton';
+import { useEndpointData } from '../../../hooks/useEndpointData';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
+import { AsyncStatePhase } from '../../../hooks/useAsyncState';
+import UserAvatar from '../../../components/avatar/UserAvatar';
+import { UserStatus } from '../../../components/UserStatus';
+import { roomTypes } from '../../../../app/utils/client';
+import { useRoute } from '../../../contexts/RouterContext';
 
 
 const wordBreak = css`
@@ -89,7 +89,7 @@ const AgentField = ({ agent }) => {
 	</>;
 };
 
-export function ChatInfo({ id, route }) {
+export function ChatInfo({ id, route, hasEditAccess }) {
 	const t = useTranslation();
 
 	const formatDateAndTime = useFormatDateAndTime();
@@ -100,6 +100,7 @@ export function ChatInfo({ id, route }) {
 
 	const onEditClick = useMutableCallback(() => routePath.push(
 		route ? {
+			tab: 'room-info',
 			context: 'edit',
 			id,
 		} : {
@@ -162,10 +163,10 @@ export function ChatInfo({ id, route }) {
 				</>}
 			</Margins>
 		</VerticalBar.ScrollableContent>
-		<VerticalBar.Footer>
+		{hasEditAccess && <VerticalBar.Footer>
 			<ButtonGroup stretch>
 				<Button onClick={onEditClick}><Icon name='pencil' size='x20'/> {t('Edit')}</Button>
 			</ButtonGroup>
-		</VerticalBar.Footer>
+		</VerticalBar.Footer>}
 	</>;
 }

client/omnichannel/directory/chats/contextualBar/ChatRoomEdit.js → client/omnichannel/chats/contextualBar/ChatRoomEdit.js

@@ -3,33 +3,33 @@ import { Field, TextInput, ButtonGroup, Button, Box } from '@rocket.chat/fuselag
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSubscription } from 'use-subscription';
 
-import { useTranslation } from '../../../../contexts/TranslationContext';
-import VerticalBar from '../../../../components/VerticalBar';
-import { useForm } from '../../../../hooks/useForm';
-import { useComponentDidUpdate } from '../../../../hooks/useComponentDidUpdate';
-// import { useEndpointAction } from '../../../../hooks/useEndpointAction';
-import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
-import { FormSkeleton } from '../../Skeleton';
-import { AsyncStatePhase } from '../../../../hooks/useAsyncState';
-import { isEmail } from '../../../../../app/utils';
-import { hasAtLeastOnePermission } from '../../../../../app/authorization';
-import CustomFieldsForm from '../../../../components/CustomFieldsForm';
-import { useMethod } from '../../../../contexts/ServerContext';
-import { formsSubscription } from '../../../../views/omnichannel/additionalForms';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import VerticalBar from '../../../components/VerticalBar';
+import { useForm } from '../../../hooks/useForm';
+import { useComponentDidUpdate } from '../../../hooks/useComponentDidUpdate';
+import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext';
+import { useEndpointData } from '../../../hooks/useEndpointData';
+import { FormSkeleton } from '../../directory/Skeleton';
+import { AsyncStatePhase } from '../../../hooks/useAsyncState';
+import { isEmail } from '../../../../app/utils';
+import { hasAtLeastOnePermission } from '../../../../app/authorization';
+import CustomFieldsForm from '../../../components/CustomFieldsForm';
+import { useMethod } from '../../../contexts/ServerContext';
+import { formsSubscription } from '../../../views/omnichannel/additionalForms';
+import { hasPermission } from '../../../../app/authorization/client';
 
 
 const initialValuesUser = {
 	name: '',
 	email: '',
 	phone: '',
-	livechatData: '',
+	livechatData: {},
 };
 
 const initialValuesRoom = {
 	topic: '',
 	tags: '',
-	livechatData: '',
+	livechatData: {},
 };
 
 
@@ -44,7 +44,7 @@ const getInitialValuesUser = (visitor) => {
 		name: (name || fname) ?? '',
 		email: visitorEmails ? visitorEmails[0].address : '',
 		phone: phone ? phone[0].phoneNumber : '',
-		livechatData: livechatData ?? '',
+		livechatData: livechatData ?? {},
 	};
 };
 
@@ -61,8 +61,7 @@ const getInitialValuesRoom = (room) => {
 	};
 };
 
-
-export function RoomEditWithData({ id, reload, close }) {
+export function RoomEditWithData({ id, reload, close, hasEditAccess }) {
 	const t = useTranslation();
 
 	const { value: roomData, phase: state, error } = useEndpointData(`rooms.info?roomId=${ id }`);
@@ -75,6 +74,9 @@ export function RoomEditWithData({ id, reload, close }) {
 		return <Box mbs='x16'>{t('Room_not_found')}</Box>;
 	}
 
+	if (!hasEditAccess) {
+		return <Box mbs='x16'>{t('Not_authorized')}</Box>;
+	}
 
 	return <VisitorData room={roomData} reload={reload} close={close} />;
 }
@@ -107,6 +109,7 @@ export function RoomEdit({ room, visitor, reload, close }) {
 	const { values, handlers } = useForm(getInitialValuesUser(visitor));
 	const { values: valuesRoom, handlers: handlersRoom } = useForm(getInitialValuesRoom(room));
 	const canViewCustomFields = () => hasAtLeastOnePermission(['view-livechat-room-customfields', 'edit-livechat-room-customfields']);
+	const canViewTags = hasPermission('manage-livechat-tags');
 
 	const {
 		handleName,
@@ -218,7 +221,7 @@ export function RoomEdit({ room, visitor, reload, close }) {
 		try {
 			saveRoom(userData, roomData);
 			dispatchToastMessage({ type: 'success', message: t('Saved') });
-			reload();
+			reload && reload();
 			close();
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
@@ -270,12 +273,12 @@ export function RoomEdit({ room, visitor, reload, close }) {
 					<TextInput flexGrow={1} value={topic} onChange={handleTopic} />
 				</Field.Row>
 			</Field>
-			<Field>
+			{ canViewTags && <Field>
 				<Field.Label mb='x4'>{t('Tags')}</Field.Label>
 				<Field.Row>
 					<Tags value={Object.values(tags)} handler={handleTags} />
 				</Field.Row>
-			</Field>
+			</Field>}
 		</VerticalBar.ScrollableContent>
 		<VerticalBar.Footer>
 			<ButtonGroup stretch>

client/omnichannel/chats/contextualBar/index.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Icon, Box } from '@rocket.chat/fuselage';
+
+import { ChatInfo } from './ChatInfo';
+import { RoomEditWithData } from './ChatRoomEdit';
+import VerticalBar from '../../../components/VerticalBar';
+import { useRoute, useRouteParameter } from '../../../contexts/RouterContext';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useUserSubscription } from '../../../contexts/UserContext';
+import { hasPermission } from '../../../../app/authorization/client';
+
+const PATH = 'live';
+
+const ChatsContextualBar = ({ id }) => {
+	const t = useTranslation();
+
+	const context = useRouteParameter('context');
+
+	const directoryRoute = useRoute(PATH);
+
+	const subscription = useUserSubscription(id);
+	const hasGlobalEditRoomPermission = hasPermission('save-others-livechat-room-info');
+
+	const hasEditAccess = !!subscription || hasGlobalEditRoomPermission;
+
+	const closeContextualBar = () => {
+		directoryRoute.push({ id });
+	};
+
+	const handleRoomEditBarCloseButtonClick = () => {
+		directoryRoute.push({ id, tab: 'room-info' });
+	};
+
+	return <>
+		<VerticalBar.Header>
+			<Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='info-circled' size='x20' /> {t('Room_Info')}</Box>
+			<VerticalBar.Close onClick={closeContextualBar} />
+		</VerticalBar.Header>
+		{context === 'edit' && hasEditAccess ? <RoomEditWithData id={id} close={handleRoomEditBarCloseButtonClick} hasEditAccess={hasEditAccess} /> : <ChatInfo route={PATH} id={id} hasEditAccess={hasEditAccess} />}
+	</>;
+};
+
+export default ({ rid }) => <ChatsContextualBar id={rid} />;

client/omnichannel/directory/contacts/ContactTab.js → client/omnichannel/contacts/ContactTab.js

@@ -2,14 +2,14 @@ import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { Table } from '@rocket.chat/fuselage';
 
-import { useTranslation } from '../../../contexts/TranslationContext';
-import { useEndpointData } from '../../../hooks/useEndpointData';
-import GenericTable from '../../../components/GenericTable';
-import FilterByText from '../../../components/FilterByText';
-import { useRoute } from '../../../contexts/RouterContext';
-import { useFormatDate } from '../../../hooks/useFormatDate';
-import { usePermission } from '../../../contexts/AuthorizationContext';
-import { NotAuthorizedPage } from '../../../components/NotAuthorizedPage';
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useEndpointData } from '../../hooks/useEndpointData';
+import GenericTable from '../../components/GenericTable';
+import FilterByText from '../../components/FilterByText';
+import { useRoute } from '../../contexts/RouterContext';
+import { useFormatDate } from '../../hooks/useFormatDate';
+import { usePermission } from '../../contexts/AuthorizationContext';
+import { NotAuthorizedPage } from '../../components/NotAuthorizedPage';
 
 
 const useQuery = ({ text, itemsPerPage, current }, [column, direction]) => useMemo(() => ({

client/omnichannel/directory/contacts/contextualBar/ContactForm.js → client/omnichannel/contacts/contextualBar/ContactForm.js

@@ -3,20 +3,20 @@ import { Field, TextInput, ButtonGroup, Button, Box } from '@rocket.chat/fuselag
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSubscription } from 'use-subscription';
 
-import { useTranslation } from '../../../../contexts/TranslationContext';
-import VerticalBar from '../../../../components/VerticalBar';
-import { useForm } from '../../../../hooks/useForm';
-import { isEmail } from '../../../../../app/utils';
-import { useComponentDidUpdate } from '../../../../hooks/useComponentDidUpdate';
-import { useEndpointAction } from '../../../../hooks/useEndpointAction';
-import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
-import { FormSkeleton } from '../../Skeleton';
-import CustomFieldsForm from '../../../../components/CustomFieldsForm';
-import { hasAtLeastOnePermission } from '../../../../../app/authorization';
-import { AsyncStatePhase } from '../../../../hooks/useAsyncState';
-import { formsSubscription } from '../../../../views/omnichannel/additionalForms';
-import { createToken } from '../../../../components/helpers';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import VerticalBar from '../../../components/VerticalBar';
+import { useForm } from '../../../hooks/useForm';
+import { isEmail } from '../../../../app/utils';
+import { useComponentDidUpdate } from '../../../hooks/useComponentDidUpdate';
+import { useEndpointAction } from '../../../hooks/useEndpointAction';
+import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext';
+import { useEndpointData } from '../../../hooks/useEndpointData';
+import { FormSkeleton } from '../../directory/Skeleton';
+import CustomFieldsForm from '../../../components/CustomFieldsForm';
+import { hasAtLeastOnePermission } from '../../../../app/authorization';
+import { AsyncStatePhase } from '../../../hooks/useAsyncState';
+import { formsSubscription } from '../../../views/omnichannel/additionalForms';
+import { createToken } from '../../../components/helpers';
 
 const initialValues = {
 	token: '',
@@ -38,12 +38,12 @@ const getInitialValues = (data) => {
 		name: name ?? '',
 		email: visitorEmails ? visitorEmails[0].address : '',
 		phone: phone ? phone[0].phoneNumber : '',
-		livechatData: livechatData ?? '',
+		livechatData: livechatData ?? {},
 		username: contactManager?.username ?? '',
 	};
 };
 
-export function ContactEditWithData({ id, reload, close }) {
+export function ContactEditWithData({ id, reload, close, hasEditAccess }) {
 	const t = useTranslation();
 	const { value: data, phase: state, error } = useEndpointData(`omnichannel/contact?contactId=${ id }`);
 
@@ -55,6 +55,10 @@ export function ContactEditWithData({ id, reload, close }) {
 		return <Box mbs='x16'>{t('Contact_not_found')}</Box>;
 	}
 
+	if (!hasEditAccess) {
+		return <Box mbs='x16'>{t('Not_authorized')}</Box>;
+	}
+
 	return <ContactNewEdit id={id} data={data} reload={reload} close={close} />;
 }
 
@@ -188,7 +192,7 @@ export function ContactNewEdit({ id, data, reload, close }) {
 		try {
 			await saveContact(payload);
 			dispatchToastMessage({ type: 'success', message: t('Saved') });
-			reload();
+			reload && reload();
 			close();
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });