From 9f29cd06cc4774b7237fbf0c7b10289b2b1e56b0 Mon Sep 17 00:00:00 2001 From: murtaza98 Date: Thu, 28 Apr 2022 11:09:03 +0530 Subject: [PATCH 1/8] Regression: Misaligned username on Room Info card for omnichannel chats --- apps/meteor/client/components/UserCard/UserCardUsername.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/client/components/UserCard/UserCardUsername.tsx b/apps/meteor/client/components/UserCard/UserCardUsername.tsx index 674a9ce0139f..e777f98a3876 100644 --- a/apps/meteor/client/components/UserCard/UserCardUsername.tsx +++ b/apps/meteor/client/components/UserCard/UserCardUsername.tsx @@ -12,7 +12,7 @@ const UserCardUsername = ({ name, status = , ...props }: U Date: Fri, 29 Apr 2022 10:48:27 +0530 Subject: [PATCH 2/8] CR suggestion: revert earlier changes & fix omni-components with new user-card definitions --- .../components/UserCard/UserCardUsername.tsx | 2 +- .../directory/chats/contextualBar/AgentField.js | 14 ++++++++------ .../directory/chats/contextualBar/ContactField.js | 14 ++++++++------ .../contacts/contextualBar/ContactInfo.js | 14 ++++++++------ .../ee/client/omnichannel/ContactManagerInfo.js | 10 +++++++--- 5 files changed, 32 insertions(+), 22 deletions(-) diff --git a/apps/meteor/client/components/UserCard/UserCardUsername.tsx b/apps/meteor/client/components/UserCard/UserCardUsername.tsx index e777f98a3876..674a9ce0139f 100644 --- a/apps/meteor/client/components/UserCard/UserCardUsername.tsx +++ b/apps/meteor/client/components/UserCard/UserCardUsername.tsx @@ -12,7 +12,7 @@ const UserCardUsername = ({ name, status = , ...props }: U { - } /> - {username && name && ( - - ({username}) - - )} + + } /> + {username && ( + + ({username}) + + )} + ); diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js index 9a0820019e1d..a0f12ae67084 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js @@ -39,12 +39,14 @@ const ContactField = ({ contact, room }) => { - } /> - {username && name && ( - - ({username}) - - )} + + } /> + {username && ( + + ({username}) + + )} + ); diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js index 21f6bf43bac8..526c739c91a8 100644 --- a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js +++ b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js @@ -106,12 +106,14 @@ const ContactInfo = ({ id, rid, route }) => { - } /> - {username && name && ( - - ({username}) - - )} + + } /> + {username && ( + + ({username}) + + )} + )} diff --git a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js index 4324016577e9..4d364e7012b9 100644 --- a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js +++ b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js @@ -26,9 +26,13 @@ function ContactManagerInfo({ username }) { <> - } /> - - ({name}) + + } /> + {name && ( + + ({name}) + + )} From e72f23217679a99d6cc24c8ad5cae831206c364f Mon Sep 17 00:00:00 2001 From: murtaza98 Date: Mon, 9 May 2022 13:59:01 +0530 Subject: [PATCH 3/8] Remove usage of Usercard.Username component from omnichannel components --- .../AgentOrContactCardUsername.tsx | 31 +++++++++++++++++++ .../chats/contextualBar/AgentField.js | 16 +++++----- .../chats/contextualBar/ContactField.js | 16 +++++----- .../contacts/contextualBar/ContactInfo.js | 16 +++++----- .../client/omnichannel/ContactManagerInfo.js | 11 ++++--- 5 files changed, 58 insertions(+), 32 deletions(-) create mode 100644 apps/meteor/client/components/Omnichannel/AgentOrContactCardUsername.tsx diff --git a/apps/meteor/client/components/Omnichannel/AgentOrContactCardUsername.tsx b/apps/meteor/client/components/Omnichannel/AgentOrContactCardUsername.tsx new file mode 100644 index 000000000000..a9b3509a5ffa --- /dev/null +++ b/apps/meteor/client/components/Omnichannel/AgentOrContactCardUsername.tsx @@ -0,0 +1,31 @@ +import { Box } from '@rocket.chat/fuselage'; +import React, { ReactElement, ReactNode, ComponentProps } from 'react'; + +import * as UserStatus from '../UserStatus'; + +type AgentOrContactCardUsernameProps = ComponentProps & { + name: ReactNode; + status: ReactNode; +}; + +const AgentOrContactCardUsername = ({ name, status = , ...props }: AgentOrContactCardUsernameProps): ReactElement => ( + + {status}{' '} + + {name} + + +); + +export default AgentOrContactCardUsername; diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js index d8cc9983f78d..2df50475c75c 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js @@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; -import UserCard from '../../../../../components/UserCard'; +import AgentOrContactCardUsername from '../../../../../components/Omnichannel/AgentOrContactCardUsername'; import { UserStatus } from '../../../../../components/UserStatus'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; @@ -32,14 +32,12 @@ const AgentField = ({ agent, isSmall = false }) => { - - } /> - {username && ( - - ({username}) - - )} - + } /> + {username && ( + + ({username}) + + )} ); diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js index a0f12ae67084..81617b9374fc 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js @@ -2,7 +2,7 @@ import { Avatar, Box } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; -import UserCard from '../../../../../components/UserCard'; +import AgentOrContactCardUsername from '../../../../../components/Omnichannel/AgentOrContactCardUsername'; import { UserStatus } from '../../../../../components/UserStatus'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { AsyncStatePhase } from '../../../../../lib/asyncState'; @@ -39,14 +39,12 @@ const ContactField = ({ contact, room }) => { - - } /> - {username && ( - - ({username}) - - )} - + } /> + {username && ( + + ({username}) + + )} ); diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js index 526c739c91a8..5fdef617bd75 100644 --- a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js +++ b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js @@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'; import { hasPermission } from '../../../../../../app/authorization/client'; import ContactManagerInfo from '../../../../../../ee/client/omnichannel/ContactManagerInfo'; -import UserCard from '../../../../../components/UserCard/UserCard'; +import AgentOrContactCardUsername from '../../../../../components/Omnichannel/AgentOrContactCardUsername'; import { UserStatus } from '../../../../../components/UserStatus'; import VerticalBar from '../../../../../components/VerticalBar'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; @@ -106,14 +106,12 @@ const ContactInfo = ({ id, rid, route }) => { - - } /> - {username && ( - - ({username}) - - )} - + } /> + {username && ( + + ({username}) + + )} )} diff --git a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js index 4d364e7012b9..2cf76c6715c0 100644 --- a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js +++ b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js @@ -2,11 +2,12 @@ import { css } from '@rocket.chat/css-in-js'; import { Box } from '@rocket.chat/fuselage'; import React from 'react'; -import UserCard from '../../../client/components/UserCard'; +import AgentOrContactCardUsername from '../../../client/components/Omnichannel/AgentOrContactCardUsername'; import { UserStatus } from '../../../client/components/UserStatus'; import UserAvatar from '../../../client/components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../client/hooks/useAsyncState'; import { useEndpointData } from '../../../client/hooks/useEndpointData'; +import Info from '../../../client/views/omnichannel/components/Info'; const wordBreak = css` word-break: break-word; @@ -24,17 +25,17 @@ function ContactManagerInfo({ username }) { return ( <> - + - } /> + } /> {name && ( - + ({name}) )} - + ); } From 0f74e2074d751df8ebf46a7d26b9c4b753796ac1 Mon Sep 17 00:00:00 2001 From: murtaza98 Date: Tue, 10 May 2022 12:18:45 +0530 Subject: [PATCH 4/8] Forgot about this file in previous commit!! --- .../ee/client/omnichannel/ContactManagerInfo.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js index 2cf76c6715c0..351151dab7cc 100644 --- a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js +++ b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js @@ -25,16 +25,14 @@ function ContactManagerInfo({ username }) { return ( <> - + - - } /> - {name && ( - - ({name}) - - )} - + } /> + {name && ( + + ({name}) + + )} ); From 628d16595379400fa85c6511382c9f772fe41140 Mon Sep 17 00:00:00 2001 From: murtaza98 Date: Wed, 18 May 2022 20:08:32 +0530 Subject: [PATCH 5/8] Apply CR suggestions --- .../omnichannel/components}/AgentOrContactCardUsername.tsx | 2 +- .../omnichannel/directory/calls/contextualBar/VoipInfo.tsx | 4 ++-- .../omnichannel/directory/chats/contextualBar/AgentField.js | 2 +- .../omnichannel/directory/chats/contextualBar/ContactField.js | 2 +- .../directory/contacts/contextualBar/ContactInfo.js | 2 +- apps/meteor/ee/client/omnichannel/ContactManagerInfo.js | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) rename apps/meteor/client/{components/Omnichannel => views/omnichannel/components}/AgentOrContactCardUsername.tsx (91%) diff --git a/apps/meteor/client/components/Omnichannel/AgentOrContactCardUsername.tsx b/apps/meteor/client/views/omnichannel/components/AgentOrContactCardUsername.tsx similarity index 91% rename from apps/meteor/client/components/Omnichannel/AgentOrContactCardUsername.tsx rename to apps/meteor/client/views/omnichannel/components/AgentOrContactCardUsername.tsx index a9b3509a5ffa..30b86e944cce 100644 --- a/apps/meteor/client/components/Omnichannel/AgentOrContactCardUsername.tsx +++ b/apps/meteor/client/views/omnichannel/components/AgentOrContactCardUsername.tsx @@ -1,7 +1,7 @@ import { Box } from '@rocket.chat/fuselage'; import React, { ReactElement, ReactNode, ComponentProps } from 'react'; -import * as UserStatus from '../UserStatus'; +import * as UserStatus from '../../../components/UserStatus'; type AgentOrContactCardUsernameProps = ComponentProps & { name: ReactNode; diff --git a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx index 3408d9520de3..202650dc4e2e 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx @@ -4,11 +4,11 @@ import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import React, { ReactElement, useMemo } from 'react'; -import UserCard from '../../../../../components/UserCard'; import { UserStatus } from '../../../../../components/UserStatus'; import VerticalBar from '../../../../../components/VerticalBar'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; import InfoPanel from '../../../../InfoPanel'; +import AgentOrContactCardUsername from '../../../components/AgentOrContactCardUsername'; import AgentField from '../../chats/contextualBar/AgentField'; import { InfoField } from './InfoField'; @@ -54,7 +54,7 @@ export const VoipInfo = ({ room, onClickClose /* , onClickReport, onClickCall */ {t('Contact')} - } /> + } /> )} diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js index 2df50475c75c..5e5563eb9a96 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js @@ -2,11 +2,11 @@ import { Box } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; -import AgentOrContactCardUsername from '../../../../../components/Omnichannel/AgentOrContactCardUsername'; import { UserStatus } from '../../../../../components/UserStatus'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; +import AgentOrContactCardUsername from '../../../components/AgentOrContactCardUsername'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; import Label from '../../../components/Label'; diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js index 81617b9374fc..30415b5197fc 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js @@ -2,11 +2,11 @@ import { Avatar, Box } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; -import AgentOrContactCardUsername from '../../../../../components/Omnichannel/AgentOrContactCardUsername'; import { UserStatus } from '../../../../../components/UserStatus'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { AsyncStatePhase } from '../../../../../lib/asyncState'; import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator'; +import AgentOrContactCardUsername from '../../../components/AgentOrContactCardUsername'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; import Label from '../../../components/Label'; diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js index 5fdef617bd75..98863f351f4a 100644 --- a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js +++ b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js @@ -5,13 +5,13 @@ import React, { useEffect, useState } from 'react'; import { hasPermission } from '../../../../../../app/authorization/client'; import ContactManagerInfo from '../../../../../../ee/client/omnichannel/ContactManagerInfo'; -import AgentOrContactCardUsername from '../../../../../components/Omnichannel/AgentOrContactCardUsername'; import { UserStatus } from '../../../../../components/UserStatus'; import VerticalBar from '../../../../../components/VerticalBar'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { useFormatDate } from '../../../../../hooks/useFormatDate'; +import AgentOrContactCardUsername from '../../../components/AgentOrContactCardUsername'; import CustomField from '../../../components/CustomField'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; diff --git a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js index 351151dab7cc..70f097216804 100644 --- a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js +++ b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js @@ -2,11 +2,11 @@ import { css } from '@rocket.chat/css-in-js'; import { Box } from '@rocket.chat/fuselage'; import React from 'react'; -import AgentOrContactCardUsername from '../../../client/components/Omnichannel/AgentOrContactCardUsername'; import { UserStatus } from '../../../client/components/UserStatus'; import UserAvatar from '../../../client/components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../client/hooks/useAsyncState'; import { useEndpointData } from '../../../client/hooks/useEndpointData'; +import AgentOrContactCardUsername from '../../../client/views/omnichannel/components/AgentOrContactCardUsername'; import Info from '../../../client/views/omnichannel/components/Info'; const wordBreak = css` From d08c355dfa2b88864bd5b7c38059d8323039ab5b Mon Sep 17 00:00:00 2001 From: murtaza98 Date: Wed, 25 May 2022 21:48:24 +0530 Subject: [PATCH 6/8] CRS: Rename AgentOrContactCardUsername -> AgentOrContactDetails --- ...tOrContactCardUsername.tsx => AgentOrContactDetails.tsx} | 6 +++--- .../omnichannel/directory/calls/contextualBar/VoipInfo.tsx | 4 ++-- .../omnichannel/directory/chats/contextualBar/AgentField.js | 4 ++-- .../directory/chats/contextualBar/ContactField.js | 4 ++-- .../directory/contacts/contextualBar/ContactInfo.js | 4 ++-- apps/meteor/ee/client/omnichannel/ContactManagerInfo.js | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) rename apps/meteor/client/views/omnichannel/components/{AgentOrContactCardUsername.tsx => AgentOrContactDetails.tsx} (66%) diff --git a/apps/meteor/client/views/omnichannel/components/AgentOrContactCardUsername.tsx b/apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx similarity index 66% rename from apps/meteor/client/views/omnichannel/components/AgentOrContactCardUsername.tsx rename to apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx index 30b86e944cce..d2bf1251ce71 100644 --- a/apps/meteor/client/views/omnichannel/components/AgentOrContactCardUsername.tsx +++ b/apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx @@ -3,12 +3,12 @@ import React, { ReactElement, ReactNode, ComponentProps } from 'react'; import * as UserStatus from '../../../components/UserStatus'; -type AgentOrContactCardUsernameProps = ComponentProps & { +type AgentOrContactDetailsProps = ComponentProps & { name: ReactNode; status: ReactNode; }; -const AgentOrContactCardUsername = ({ name, status = , ...props }: AgentOrContactCardUsernameProps): ReactElement => ( +const AgentOrContactDetails = ({ name, status = , ...props }: AgentOrContactDetailsProps): ReactElement => ( , ... ); -export default AgentOrContactCardUsername; +export default AgentOrContactDetails; diff --git a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx index 202650dc4e2e..fc456c5c2983 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx @@ -8,7 +8,7 @@ import { UserStatus } from '../../../../../components/UserStatus'; import VerticalBar from '../../../../../components/VerticalBar'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; import InfoPanel from '../../../../InfoPanel'; -import AgentOrContactCardUsername from '../../../components/AgentOrContactCardUsername'; +import AgentOrContactDetails from '../../../components/AgentOrContactDetails'; import AgentField from '../../chats/contextualBar/AgentField'; import { InfoField } from './InfoField'; @@ -54,7 +54,7 @@ export const VoipInfo = ({ room, onClickClose /* , onClickReport, onClickCall */ {t('Contact')} - } /> + } /> )} diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js index 5e5563eb9a96..f26e3d10b4e4 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js @@ -6,7 +6,7 @@ import { UserStatus } from '../../../../../components/UserStatus'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; -import AgentOrContactCardUsername from '../../../components/AgentOrContactCardUsername'; +import AgentOrContactDetails from '../../../components/AgentOrContactDetails'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; import Label from '../../../components/Label'; @@ -32,7 +32,7 @@ const AgentField = ({ agent, isSmall = false }) => { - } /> + } /> {username && ( ({username}) diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js index 30415b5197fc..0dcdae010ffa 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js @@ -6,7 +6,7 @@ import { UserStatus } from '../../../../../components/UserStatus'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { AsyncStatePhase } from '../../../../../lib/asyncState'; import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator'; -import AgentOrContactCardUsername from '../../../components/AgentOrContactCardUsername'; +import AgentOrContactDetails from '../../../components/AgentOrContactDetails'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; import Label from '../../../components/Label'; @@ -39,7 +39,7 @@ const ContactField = ({ contact, room }) => { - } /> + } /> {username && ( ({username}) diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js index 98863f351f4a..929a8fedac3d 100644 --- a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js +++ b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js @@ -11,7 +11,7 @@ import UserAvatar from '../../../../../components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { useFormatDate } from '../../../../../hooks/useFormatDate'; -import AgentOrContactCardUsername from '../../../components/AgentOrContactCardUsername'; +import AgentOrContactDetails from '../../../components/AgentOrContactDetails'; import CustomField from '../../../components/CustomField'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; @@ -106,7 +106,7 @@ const ContactInfo = ({ id, rid, route }) => { - } /> + } /> {username && ( ({username}) diff --git a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js index 70f097216804..efc90ee7df5e 100644 --- a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js +++ b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js @@ -6,7 +6,7 @@ import { UserStatus } from '../../../client/components/UserStatus'; import UserAvatar from '../../../client/components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../client/hooks/useAsyncState'; import { useEndpointData } from '../../../client/hooks/useEndpointData'; -import AgentOrContactCardUsername from '../../../client/views/omnichannel/components/AgentOrContactCardUsername'; +import AgentOrContactDetails from '../../../client/views/omnichannel/components/AgentOrContactDetails'; import Info from '../../../client/views/omnichannel/components/Info'; const wordBreak = css` @@ -27,7 +27,7 @@ function ContactManagerInfo({ username }) { <> - } /> + } /> {name && ( ({name}) From 467465d56a2bef5c16c183d2150ad8201c2d6f30 Mon Sep 17 00:00:00 2001 From: murtaza98 Date: Tue, 28 Jun 2022 19:09:54 +0530 Subject: [PATCH 7/8] Work on review --- .../components/AgentOrContactDetails.tsx | 15 +++++++++++++-- .../directory/chats/contextualBar/AgentField.js | 13 ++++++------- .../directory/chats/contextualBar/ContactField.js | 7 +------ .../contacts/contextualBar/ContactInfo.js | 7 +------ .../ee/client/omnichannel/ContactManagerInfo.js | 8 +------- 5 files changed, 22 insertions(+), 28 deletions(-) diff --git a/apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx b/apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx index d2bf1251ce71..2615acfb01d2 100644 --- a/apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx +++ b/apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx @@ -4,11 +4,17 @@ import React, { ReactElement, ReactNode, ComponentProps } from 'react'; import * as UserStatus from '../../../components/UserStatus'; type AgentOrContactDetailsProps = ComponentProps & { - name: ReactNode; + name: string; status: ReactNode; + shortName?: string; }; -const AgentOrContactDetails = ({ name, status = , ...props }: AgentOrContactDetailsProps): ReactElement => ( +const AgentOrContactDetails = ({ + name, + shortName, + status = , + ...props +}: AgentOrContactDetailsProps): ReactElement => ( , ...props {name} + {shortName && ( + + ({shortName}) + + )} ); diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js index ae8056c68334..716456c7044f 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js @@ -1,4 +1,3 @@ -import { Box } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; @@ -35,12 +34,12 @@ const AgentField = ({ agent, isSmall = false }) => { - } /> - {username && ( - - ({username}) - - )} + } + /> ); diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js index 982f1abec08d..0409bd5dd71c 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js @@ -46,12 +46,7 @@ const ContactField = ({ contact, room }) => { - } /> - {username && ( - - ({username}) - - )} + } /> ); diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js index 7ba59842db7a..5219beafad67 100644 --- a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js +++ b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js @@ -113,12 +113,7 @@ const ContactInfo = ({ id, rid, route }) => { - } /> - {username && ( - - ({username}) - - )} + } /> )} diff --git a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js index 72adba0e11c1..9180a327047f 100644 --- a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js +++ b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js @@ -1,5 +1,4 @@ import { css } from '@rocket.chat/css-in-js'; -import { Box } from '@rocket.chat/fuselage'; import React, { useMemo } from 'react'; import { UserStatus } from '../../../client/components/UserStatus'; @@ -30,12 +29,7 @@ function ContactManagerInfo({ username }) { <> - } /> - {name && ( - - ({name}) - - )} + } /> ); From 41e364150d1c02dc42fd80af30eb19c67d58e386 Mon Sep 17 00:00:00 2001 From: murtaza98 Date: Tue, 28 Jun 2022 19:23:08 +0530 Subject: [PATCH 8/8] Rename AgentOrContactDetails -> AgentInfoDetails --- ...AgentOrContactDetails.tsx => AgentInfoDetails.tsx} | 11 +++-------- .../directory/calls/contextualBar/VoipInfo.tsx | 4 ++-- .../directory/chats/contextualBar/AgentField.js | 9 ++------- .../directory/chats/contextualBar/ContactField.js | 4 ++-- .../directory/contacts/contextualBar/ContactInfo.js | 4 ++-- .../ee/client/omnichannel/ContactManagerInfo.js | 4 ++-- 6 files changed, 13 insertions(+), 23 deletions(-) rename apps/meteor/client/views/omnichannel/components/{AgentOrContactDetails.tsx => AgentInfoDetails.tsx} (72%) diff --git a/apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx b/apps/meteor/client/views/omnichannel/components/AgentInfoDetails.tsx similarity index 72% rename from apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx rename to apps/meteor/client/views/omnichannel/components/AgentInfoDetails.tsx index 2615acfb01d2..538577bbe2cc 100644 --- a/apps/meteor/client/views/omnichannel/components/AgentOrContactDetails.tsx +++ b/apps/meteor/client/views/omnichannel/components/AgentInfoDetails.tsx @@ -3,18 +3,13 @@ import React, { ReactElement, ReactNode, ComponentProps } from 'react'; import * as UserStatus from '../../../components/UserStatus'; -type AgentOrContactDetailsProps = ComponentProps & { +type AgentInfoDetailsProps = ComponentProps & { name: string; status: ReactNode; shortName?: string; }; -const AgentOrContactDetails = ({ - name, - shortName, - status = , - ...props -}: AgentOrContactDetailsProps): ReactElement => ( +const AgentInfoDetails = ({ name, shortName, status = , ...props }: AgentInfoDetailsProps): ReactElement => ( ); -export default AgentOrContactDetails; +export default AgentInfoDetails; diff --git a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx index fc456c5c2983..0f241d5f8283 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx @@ -8,7 +8,7 @@ import { UserStatus } from '../../../../../components/UserStatus'; import VerticalBar from '../../../../../components/VerticalBar'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; import InfoPanel from '../../../../InfoPanel'; -import AgentOrContactDetails from '../../../components/AgentOrContactDetails'; +import AgentInfoDetails from '../../../components/AgentInfoDetails'; import AgentField from '../../chats/contextualBar/AgentField'; import { InfoField } from './InfoField'; @@ -54,7 +54,7 @@ export const VoipInfo = ({ room, onClickClose /* , onClickReport, onClickCall */ {t('Contact')} - } /> + } /> )} diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js index 716456c7044f..da67f9e559ea 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js @@ -5,7 +5,7 @@ import { UserStatus } from '../../../../../components/UserStatus'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; -import AgentOrContactDetails from '../../../components/AgentOrContactDetails'; +import AgentInfoDetails from '../../../components/AgentInfoDetails'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; import Label from '../../../components/Label'; @@ -34,12 +34,7 @@ const AgentField = ({ agent, isSmall = false }) => { - } - /> + } /> ); diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js index 0409bd5dd71c..8723ad109093 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js +++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js @@ -6,7 +6,7 @@ import { UserStatus } from '../../../../../components/UserStatus'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { AsyncStatePhase } from '../../../../../lib/asyncState'; import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator'; -import AgentOrContactDetails from '../../../components/AgentOrContactDetails'; +import AgentInfoDetails from '../../../components/AgentInfoDetails'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; import Label from '../../../components/Label'; @@ -46,7 +46,7 @@ const ContactField = ({ contact, room }) => { - } /> + } /> ); diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js index 5219beafad67..7a8abde93a1d 100644 --- a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js +++ b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js @@ -11,7 +11,7 @@ import UserAvatar from '../../../../../components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../../../hooks/useAsyncState'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { useFormatDate } from '../../../../../hooks/useFormatDate'; -import AgentOrContactDetails from '../../../components/AgentOrContactDetails'; +import AgentInfoDetails from '../../../components/AgentInfoDetails'; import CustomField from '../../../components/CustomField'; import Field from '../../../components/Field'; import Info from '../../../components/Info'; @@ -113,7 +113,7 @@ const ContactInfo = ({ id, rid, route }) => { - } /> + } /> )} diff --git a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js index 9180a327047f..6a25be2216bb 100644 --- a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js +++ b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js @@ -5,7 +5,7 @@ import { UserStatus } from '../../../client/components/UserStatus'; import UserAvatar from '../../../client/components/avatar/UserAvatar'; import { AsyncStatePhase } from '../../../client/hooks/useAsyncState'; import { useEndpointData } from '../../../client/hooks/useEndpointData'; -import AgentOrContactDetails from '../../../client/views/omnichannel/components/AgentOrContactDetails'; +import AgentInfoDetails from '../../../client/views/omnichannel/components/AgentInfoDetails'; import Info from '../../../client/views/omnichannel/components/Info'; const wordBreak = css` @@ -29,7 +29,7 @@ function ContactManagerInfo({ username }) { <> - } /> + } /> );