From c836768d72f539d961ba97c99b6a609b3125b21f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 24 Oct 2023 18:15:02 +0200
Subject: [PATCH] fix(ui): userbrowser null check

---
 .../shared/SessionItem/SessionItem.tsx        | 102 +++++++++---------
 frontend/app/utils/index.ts                   |   2 +-
 2 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 014939e33..bf01f823d 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -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>
   );
diff --git a/frontend/app/utils/index.ts b/frontend/app/utils/index.ts
index 47b40aa70..6f57e6f29 100644
--- a/frontend/app/utils/index.ts
+++ b/frontend/app/utils/index.ts
@@ -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);
 }