Skip to content

Commit

Permalink
fix(Omnichannel): Use Correct components on ChatInfo (#32592)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MartinSchoeler
MartinSchoeler authored Jul 11, 2024
1 parent f2cb691 commit d7de0a9
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 86 deletions.
5 changes: 5 additions & 0 deletions .changeset/nervous-rockets-impress.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/meteor": patch
---

Fixes Missing line breaks on Omnichannel Room Info Panel
12 changes: 5 additions & 7 deletions apps/meteor/client/views/omnichannel/components/CustomField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@ import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
import { useQuery } from '@tanstack/react-query';
import React from 'react';

import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../components/InfoPanel';
import { FormSkeleton } from '../directory/components/FormSkeleton';
import Field from './Field';
import Info from './Info';
import Label from './Label';

type CustomFieldProps = {
id: string;
Expand All @@ -33,10 +31,10 @@ const CustomField = ({ id, value }: CustomFieldProps) => {
}

return (
<Field>
<Label>{label}</Label>
<Info>{value}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{label}</InfoPanelLabel>
<InfoPanelText>{value}</InfoPanelText>
</InfoPanelField>
);
};

Expand Down
81 changes: 41 additions & 40 deletions apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ChatInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,12 @@ import moment from 'moment';
import React, { useEffect, useMemo, useState } from 'react';

import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../../../components/Contextualbar';
import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../../components/InfoPanel';
import MarkdownText from '../../../../../components/MarkdownText';
import { useEndpointData } from '../../../../../hooks/useEndpointData';
import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime';
import { useFormatDuration } from '../../../../../hooks/useFormatDuration';
import CustomField from '../../../components/CustomField';
import Field from '../../../components/Field';
import Info from '../../../components/Info';
import Label from '../../../components/Label';
import { AgentField, SlaField, ContactField, SourceField } from '../../components';
import PriorityField from '../../components/PriorityField';
import { useOmnichannelRoomInfo } from '../../hooks/useOmnichannelRoomInfo';
Expand Down Expand Up @@ -105,66 +104,68 @@ function ChatInfo({ id, route }) {
{servedBy && <AgentField agent={servedBy} />}
{departmentId && <DepartmentField departmentId={departmentId} />}
{tags && tags.length > 0 && (
<Field>
<Label>{t('Tags')}</Label>
<Info>
<InfoPanelField>
<InfoPanelLabel>{t('Tags')}</InfoPanelLabel>
<InfoPanelText>
{tags.map((tag) => (
<Box key={tag} mie={4} display='inline'>
<Tag style={{ display: 'inline' }} disabled>
{tag}
</Tag>
</Box>
))}
</Info>
</Field>
</InfoPanelText>
</InfoPanelField>
)}
{topic && (
<Field>
<Label>{t('Topic')}</Label>
<Info>{topic}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Topic')}</InfoPanelLabel>
<InfoPanelText withTruncatedText={false}>
<MarkdownText variant='inline' content={topic} />
</InfoPanelText>
</InfoPanelField>
)}
{queueStartedAt && (
<Field>
<Label>{t('Queue_Time')}</Label>
<Info>{queueTime}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Queue_Time')}</InfoPanelLabel>
<InfoPanelText>{queueTime}</InfoPanelText>
</InfoPanelField>
)}
{closedAt && (
<Field>
<Label>{t('Chat_Duration')}</Label>
<Info>{moment(closedAt).from(moment(ts), true)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Chat_Duration')}</InfoPanelLabel>
<InfoPanelText>{moment(closedAt).from(moment(ts), true)}</InfoPanelText>
</InfoPanelField>
)}
{ts && (
<Field>
<Label>{t('Created_at')}</Label>
<Info>{formatDateAndTime(ts)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Created_at')}</InfoPanelLabel>
<InfoPanelText>{formatDateAndTime(ts)}</InfoPanelText>
</InfoPanelField>
)}
{closedAt && (
<Field>
<Label>{t('Closed_At')}</Label>
<Info>{formatDateAndTime(closedAt)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Closed_At')}</InfoPanelLabel>
<InfoPanelText>{formatDateAndTime(closedAt)}</InfoPanelText>
</InfoPanelField>
)}
{servedBy?.ts && (
<Field>
<Label>{t('Taken_at')}</Label>
<Info>{formatDateAndTime(servedBy.ts)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Taken_at')}</InfoPanelLabel>
<InfoPanelText>{formatDateAndTime(servedBy.ts)}</InfoPanelText>
</InfoPanelField>
)}
{metrics?.response?.avg && formatDuration(metrics.response.avg) && (
<Field>
<Label>{t('Avg_response_time')}</Label>
<Info>{formatDuration(metrics.response.avg)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Avg_response_time')}</InfoPanelLabel>
<InfoPanelText>{formatDuration(metrics.response.avg)}</InfoPanelText>
</InfoPanelField>
)}
{!waitingResponse && responseBy?.lastMessageTs && (
<Field>
<Label>{t('Inactivity_Time')}</Label>
<Info>{moment(responseBy.lastMessageTs).fromNow(true)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Inactivity_Time')}</InfoPanelLabel>
<InfoPanelText>{moment(responseBy.lastMessageTs).fromNow(true)}</InfoPanelText>
</InfoPanelField>
)}
{canViewCustomFields && customFieldEntries.map(([key, value]) => <CustomField key={key} id={key} value={value} />)}
{slaId && <SlaField id={slaId} />}
Expand Down
79 changes: 40 additions & 39 deletions apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ChatInfoDirectory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,12 @@ import React, { useEffect, useMemo, useState } from 'react';

import { hasPermission } from '../../../../../../app/authorization/client';
import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../../../components/Contextualbar';
import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../../components/InfoPanel';
import MarkdownText from '../../../../../components/MarkdownText';
import { useEndpointData } from '../../../../../hooks/useEndpointData';
import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime';
import { useFormatDuration } from '../../../../../hooks/useFormatDuration';
import CustomField from '../../../components/CustomField';
import Field from '../../../components/Field';
import Info from '../../../components/Info';
import Label from '../../../components/Label';
import { AgentField, ContactField, SlaField } from '../../components';
import PriorityField from '../../components/PriorityField';
import { formatQueuedAt } from '../../utils/formatQueuedAt';
Expand Down Expand Up @@ -101,66 +100,68 @@ function ChatInfoDirectory({ id, route = undefined, room }) {
{servedBy && <AgentField agent={servedBy} />}
{departmentId && <DepartmentField departmentId={departmentId} />}
{tags && tags.length > 0 && (
<Field>
<Label>{t('Tags')}</Label>
<Info>
<InfoPanelField>
<InfoPanelLabel>{t('Tags')}</InfoPanelLabel>
<InfoPanelText>
{tags.map((tag) => (
<Box key={tag} mie={4} display='inline'>
<Tag style={{ display: 'inline' }} disabled>
{tag}
</Tag>
</Box>
))}
</Info>
</Field>
</InfoPanelText>
</InfoPanelField>
)}
{topic && (
<Field>
<Label>{t('Topic')}</Label>
<Info>{topic}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Topic')}</InfoPanelLabel>
<InfoPanelText withTruncatedText={false}>
<MarkdownText variant='inline' content={topic} />
</InfoPanelText>
</InfoPanelField>
)}
{queueStartedAt && (
<Field>
<Label>{t('Queue_Time')}</Label>
<InfoPanelField>
<InfoPanelLabel>{t('Queue_Time')}</InfoPanelLabel>
{queueTime}
</Field>
</InfoPanelField>
)}
{closedAt && (
<Field>
<Label>{t('Chat_Duration')}</Label>
<Info>{moment(closedAt).from(moment(ts), true)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Chat_Duration')}</InfoPanelLabel>
<InfoPanelText>{moment(closedAt).from(moment(ts), true)}</InfoPanelText>
</InfoPanelField>
)}
{ts && (
<Field>
<Label>{t('Created_at')}</Label>
<Info>{formatDateAndTime(ts)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Created_at')}</InfoPanelLabel>
<InfoPanelText>{formatDateAndTime(ts)}</InfoPanelText>
</InfoPanelField>
)}
{closedAt && (
<Field>
<Label>{t('Closed_At')}</Label>
<Info>{formatDateAndTime(closedAt)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Closed_At')}</InfoPanelLabel>
<InfoPanelText>{formatDateAndTime(closedAt)}</InfoPanelText>
</InfoPanelField>
)}
{servedBy?.ts && (
<Field>
<Label>{t('Taken_at')}</Label>
<Info>{formatDateAndTime(servedBy.ts)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Taken_at')}</InfoPanelLabel>
<InfoPanelText>{formatDateAndTime(servedBy.ts)}</InfoPanelText>
</InfoPanelField>
)}
{metrics?.response?.avg && formatDuration(metrics.response.avg) && (
<Field>
<Label>{t('Avg_response_time')}</Label>
<Info>{formatDuration(metrics.response.avg)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Avg_response_time')}</InfoPanelLabel>
<InfoPanelText>{formatDuration(metrics.response.avg)}</InfoPanelText>
</InfoPanelField>
)}
{!waitingResponse && responseBy?.lastMessageTs && (
<Field>
<Label>{t('Inactivity_Time')}</Label>
<Info>{moment(responseBy.lastMessageTs).fromNow(true)}</Info>
</Field>
<InfoPanelField>
<InfoPanelLabel>{t('Inactivity_Time')}</InfoPanelLabel>
<InfoPanelText>{moment(responseBy.lastMessageTs).fromNow(true)}</InfoPanelText>
</InfoPanelField>
)}
{canViewCustomFields() &&
livechatData &&
Expand Down

0 comments on commit d7de0a9

Please sign in to comment.