fix(ui): userbrowser null check
This commit is contained in:
Shekar Siri
parent
32a6ae5d59
commit
c836768d72
2 changed files with 55 additions and 49 deletions
|
|
@ -15,7 +15,7 @@ import {
|
|||
liveSession,
|
||||
sessions as sessionsRoute,
|
||||
session as sessionRoute,
|
||||
isRoute,
|
||||
isRoute
|
||||
} from 'App/routes';
|
||||
import { capitalize } from 'App/utils';
|
||||
import { Duration } from 'luxon';
|
||||
|
|
@ -85,7 +85,7 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
onClick = null,
|
||||
compact = false,
|
||||
ignoreAssist = false,
|
||||
bookmarked = false,
|
||||
bookmarked = false
|
||||
} = props;
|
||||
|
||||
const {
|
||||
|
|
@ -108,7 +108,7 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
metadata,
|
||||
issueTypes,
|
||||
active,
|
||||
timezone: userTimezone,
|
||||
timezone: userTimezone
|
||||
} = session;
|
||||
|
||||
const location = props.location;
|
||||
|
|
@ -142,13 +142,13 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
}${sessionRoute(sessionId)}`;
|
||||
copy(sessionPath);
|
||||
toast.success('Session URL copied to clipboard');
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'trash',
|
||||
text: 'Remove',
|
||||
onClick: () => (props.toggleFavorite ? props.toggleFavorite(sessionId) : null),
|
||||
},
|
||||
onClick: () => (props.toggleFavorite ? props.toggleFavorite(sessionId) : null)
|
||||
}
|
||||
];
|
||||
}, []);
|
||||
|
||||
|
|
@ -160,22 +160,23 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
>
|
||||
<div
|
||||
className={cn(stl.sessionItem, 'flex flex-col py-2 px-4')}
|
||||
id="session-item"
|
||||
id='session-item'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-start">
|
||||
<div className='flex items-start'>
|
||||
<div className={cn('flex items-center w-full')}>
|
||||
{!compact && (
|
||||
<div className="flex items-center pr-2 shrink-0" style={{ width: '40%' }}>
|
||||
<div className='flex items-center pr-2 shrink-0' style={{ width: '40%' }}>
|
||||
<div>
|
||||
<Avatar isActive={active} seed={userNumericHash} isAssist={isAssist} />
|
||||
</div>
|
||||
<div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center shrink-0">
|
||||
<div
|
||||
className='flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center shrink-0'>
|
||||
<div
|
||||
className={cn('text-lg', {
|
||||
'color-teal cursor-pointer': !disableUser && hasUserId && !props.isDisabled,
|
||||
[stl.userName]: !disableUser && hasUserId && !props.isDisabled,
|
||||
'color-gray-medium': disableUser || !hasUserId,
|
||||
'color-gray-medium': disableUser || !hasUserId
|
||||
})}
|
||||
onClick={() =>
|
||||
!disableUser && !hasUserFilter && hasUserId
|
||||
|
|
@ -185,7 +186,7 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
>
|
||||
<TextEllipsis
|
||||
text={userDisplayName}
|
||||
maxWidth="200px"
|
||||
maxWidth='200px'
|
||||
popupProps={{ inverted: true, size: 'tiny' }}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -194,7 +195,7 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
)}
|
||||
<div
|
||||
style={{ width: compact ? '40%' : '20%' }}
|
||||
className="px-2 flex flex-col justify-between"
|
||||
className='px-2 flex flex-col justify-between'
|
||||
>
|
||||
<div>
|
||||
<Tooltip
|
||||
|
|
@ -212,7 +213,7 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
startedAt,
|
||||
{
|
||||
label: userTimezone.split('+').join(' +'),
|
||||
value: userTimezone.split(':')[0],
|
||||
value: userTimezone.split(':')[0]
|
||||
},
|
||||
true
|
||||
)}{' '}
|
||||
|
|
@ -221,36 +222,36 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
) : null}
|
||||
</div>
|
||||
}
|
||||
className="w-fit !block"
|
||||
className='w-fit !block'
|
||||
>
|
||||
<TextEllipsis
|
||||
text={formatTimeOrDate(
|
||||
startedAt,
|
||||
shownTimezone === 'user' && userTimezone
|
||||
? {
|
||||
label: userTimezone.split('+').join(' +'),
|
||||
value: userTimezone.split(':')[0],
|
||||
}
|
||||
label: userTimezone.split('+').join(' +'),
|
||||
value: userTimezone.split(':')[0]
|
||||
}
|
||||
: timezone
|
||||
)}
|
||||
popupProps={{ inverted: true, size: 'tiny' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="flex items-center color-gray-medium py-1">
|
||||
<div className='flex items-center color-gray-medium py-1'>
|
||||
{!isAssist && (
|
||||
<>
|
||||
<div className="color-gray-medium">
|
||||
<span className="mr-1">{eventsCount}</span>
|
||||
<div className='color-gray-medium'>
|
||||
<span className='mr-1'>{eventsCount}</span>
|
||||
<span>{eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event'}</span>
|
||||
</div>
|
||||
<Icon name="circle-fill" size={3} className="mx-4" />
|
||||
<Icon name='circle-fill' size={3} className='mx-4' />
|
||||
</>
|
||||
)}
|
||||
<div>{live ? <Counter startTime={startedAt} /> : formattedDuration}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
|
||||
<div style={{ width: '30%' }} className='px-2 flex flex-col justify-between'>
|
||||
<div style={{ height: '21px' }}>
|
||||
<CountryFlag
|
||||
userCity={userCity}
|
||||
|
|
@ -259,22 +260,27 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
showLabel={true}
|
||||
/>
|
||||
</div>
|
||||
<div className="color-gray-medium flex items-center py-1">
|
||||
<span className="capitalize" style={{ maxWidth: '70px' }}>
|
||||
<TextEllipsis
|
||||
text={capitalize(userBrowser)}
|
||||
popupProps={{ inverted: true, size: 'tiny' }}
|
||||
/>
|
||||
</span>
|
||||
<Icon name="circle-fill" size={3} className="mx-4" />
|
||||
<span className="capitalize" style={{ maxWidth: '70px' }}>
|
||||
<div className='color-gray-medium flex items-center py-1'>
|
||||
{userBrowser && (
|
||||
<>
|
||||
<span className='capitalize' style={{ maxWidth: '70px' }}>
|
||||
<TextEllipsis
|
||||
text={capitalize(userBrowser)}
|
||||
popupProps={{ inverted: true, size: 'tiny' }}
|
||||
/>
|
||||
</span>
|
||||
<Icon name='circle-fill' size={3} className='mx-4' />
|
||||
</>
|
||||
)}
|
||||
|
||||
<span className='capitalize' style={{ maxWidth: '70px' }}>
|
||||
<TextEllipsis
|
||||
text={capitalize(userOs)}
|
||||
popupProps={{ inverted: true, size: 'tiny' }}
|
||||
/>
|
||||
</span>
|
||||
<Icon name="circle-fill" size={3} className="mx-4" />
|
||||
<span className="capitalize" style={{ maxWidth: '70px' }}>
|
||||
<Icon name='circle-fill' size={3} className='mx-4' />
|
||||
<span className='capitalize' style={{ maxWidth: '70px' }}>
|
||||
<TextEllipsis
|
||||
text={capitalize(userDeviceType)}
|
||||
popupProps={{ inverted: true, size: 'tiny' }}
|
||||
|
|
@ -283,35 +289,35 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
</div>
|
||||
</div>
|
||||
{isSessions && (
|
||||
<div style={{ width: '10%' }} className="self-center px-2 flex items-center">
|
||||
<div style={{ width: '10%' }} className='self-center px-2 flex items-center'>
|
||||
<ErrorBars count={issueTypes.length} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className='flex items-center'>
|
||||
<div
|
||||
className={cn(
|
||||
stl.playLink,
|
||||
props.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
)}
|
||||
id="play-button"
|
||||
id='play-button'
|
||||
data-viewed={viewed}
|
||||
>
|
||||
{live && session.isCallActive && session.agentIds!.length > 0 ? (
|
||||
<div className="mr-4">
|
||||
<Label className="bg-gray-lightest p-1 px-2 rounded-lg">
|
||||
<span className="color-gray-medium text-xs" style={{ whiteSpace: 'nowrap' }}>
|
||||
<div className='mr-4'>
|
||||
<Label className='bg-gray-lightest p-1 px-2 rounded-lg'>
|
||||
<span className='color-gray-medium text-xs' style={{ whiteSpace: 'nowrap' }}>
|
||||
CALL IN PROGRESS
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
) : null}
|
||||
{isSessions && (
|
||||
<div className="mr-4 flex-shrink-0 w-24">
|
||||
<div className='mr-4 flex-shrink-0 w-24'>
|
||||
{isLastPlayed && (
|
||||
<Label className="bg-gray-lightest p-1 px-2 rounded-lg">
|
||||
<span className="color-gray-medium text-xs" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Label className='bg-gray-lightest p-1 px-2 rounded-lg'>
|
||||
<span className='color-gray-medium text-xs' style={{ whiteSpace: 'nowrap' }}>
|
||||
LAST PLAYED
|
||||
</span>
|
||||
</Label>
|
||||
|
|
@ -320,11 +326,11 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
)}
|
||||
{props.isAdd ? (
|
||||
<div
|
||||
className="rounded-full border-tealx p-2 border"
|
||||
className='rounded-full border-tealx p-2 border'
|
||||
onClick={() => (props.isDisabled ? null : props.onClick())}
|
||||
>
|
||||
<div className="bg-tealx rounded-full p-2">
|
||||
<Icon name="plus" size={16} color="white" />
|
||||
<div className='bg-tealx rounded-full p-2'>
|
||||
<Icon name='plus' size={16} color='white' />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -337,7 +343,7 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
queryParams={queryParams}
|
||||
/>
|
||||
{bookmarked && (
|
||||
<div className="ml-2 cursor-pointer">
|
||||
<div className='ml-2 cursor-pointer'>
|
||||
<ItemMenu bold items={menuItems} />
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -346,7 +352,7 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{_metaList.length > 0 && <SessionMetaList className="mt-4" metaList={_metaList} />}
|
||||
{_metaList.length > 0 && <SessionMetaList className='mt-4' metaList={_metaList} />}
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ export const camelCased = (val) =>
|
|||
});
|
||||
|
||||
export function capitalize(s: string) {
|
||||
if (s.length === 0) return s;
|
||||
if (!s || s.length === 0) return s;
|
||||
return s[0].toUpperCase() + s.slice(1);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue