change(ui): add datetime tooltip

frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js

@@ -5,11 +5,10 @@ import { countries } from 'App/constants';
 import { useStore } from 'App/mstore';
 import { browserIcon, osIcon, deviceTypeIcon } from 'App/iconNames';
 import { formatTimeOrDate } from 'App/date';
-import { Avatar, TextEllipsis, SlideModal, Popup, CountryFlag, Icon } from 'UI';
+import { Avatar, TextEllipsis, CountryFlag, Icon } from 'UI';
 import cn from 'classnames';
 import { withRequest } from 'HOCs';
 import SessionInfoItem from '../../SessionInfoItem';
-import SessionList from '../Metadata/SessionList';
 import { Tooltip } from 'react-tippy';
 import { useModal } from 'App/components/Modal';
 import UserSessionsModal from 'Shared/UserSessionsModal';
@@ -18,7 +17,6 @@ function UserCard({ className, request, session, width, height, similarSessions,
     const { settingsStore } = useStore();
     const { timezone } = settingsStore.sessionSettings;
 
-    const [showUserSessions, setShowUserSessions] = useState(false);
     const {
         userBrowser,
         userDevice,
@@ -36,10 +34,6 @@ function UserCard({ className, request, session, width, height, similarSessions,
     } = session;
 
     const hasUserDetails = !!userId || !!userAnonymousId;
-    const showSimilarSessions = () => {
-        setShowUserSessions(true);
-        request({ key: !userId ? 'USERANONYMOUSID' : 'USERID', value: userId || userAnonymousId });
-    };
 
     const getDimension = (width, height) => {
         return width && height ? (
@@ -66,7 +60,15 @@ function UserCard({ className, request, session, width, height, similarSessions,
                     </TextEllipsis>
 
                     <div className="text-sm color-gray-medium flex items-center">
-                        <span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt, timezone)}</span>
+                        <span style={{ whiteSpace: 'nowrap' }}>
+                        <Tooltip
+                            title={`${formatTimeOrDate(startedAt, timezone, true)} ${timezone.label}`}
+                            className="w-fit !block"
+                        >
+                            {formatTimeOrDate(startedAt, timezone)}
+                        </Tooltip>
+
+                        </span>
                         <span className="mx-1 font-bold text-xl">&#183;</span>
                         <span>{countries[userCountry]}</span>
                         <span className="mx-1 font-bold text-xl">&#183;</span>

frontend/app/components/shared/SessionItem/SessionItem.tsx

@@ -12,6 +12,7 @@ import PlayLink from './PlayLink';
 import ErrorBars from './ErrorBars';
 import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from 'App/routes';
 import { capitalize } from 'App/utils';
+import { Tooltip } from 'react-tippy';
 
 const ASSIST_ROUTE = assistRoute();
 const ASSIST_LIVE_SESSION = liveSession();
@@ -58,7 +59,6 @@ interface Props {
 function SessionItem(props: RouteComponentProps & Props) {
     const { settingsStore } = useStore();
     const { timezone } = settingsStore.sessionSettings;
-    const [isIframe, setIsIframe] = React.useState(false);
 
     const {
         session,
@@ -132,7 +132,13 @@ function SessionItem(props: RouteComponentProps & Props) {
                     )}
                     <div style={{ width: compact ? '40%' : '20%' }} className="px-2 flex flex-col justify-between">
                         <div>
-                            <TextEllipsis text={formatTimeOrDate(startedAt, timezone)} popupProps={{ inverted: true, size: 'tiny' }} />
+                            {/* @ts-ignore */}
+                            <Tooltip
+                                title={`${formatTimeOrDate(startedAt, timezone, true)} ${timezone.label}`}
+                                className="w-fit !block"
+                            >
+                                <TextEllipsis text={formatTimeOrDate(startedAt, timezone)} popupProps={{ inverted: true, size: 'tiny' }} />
+                            </Tooltip>
                         </div>
                         <div className="flex items-center color-gray-medium py-1">
                             {!isAssist && (
@@ -203,4 +209,4 @@ function SessionItem(props: RouteComponentProps & Props) {
     );
 }
 
-export default withRouter<Props>(observer<Props>(SessionItem));
+export default withRouter(observer(SessionItem));

frontend/app/components/ui/Avatar/Avatar.js

@@ -4,7 +4,7 @@ import { avatarIconName } from 'App/iconNames';
 import stl from './avatar.module.css';
 import { Icon, Popup } from 'UI';
 
-const Avatar = ({ isActive = false, isAssist = false, className, width = '38px', height = '38px', iconSize = 26, seed }) => {
+const Avatar = ({ isActive = false, isAssist = false, width = '38px', height = '38px', iconSize = 26, seed }) => {
     var iconName = avatarIconName(seed);
     return (
         <Popup content={isActive ? 'Active user' : 'User might be inactive'} disabled={!isAssist}>

frontend/app/components/ui/CountryFlag/CountryFlag.js

@@ -4,7 +4,7 @@ import { countries } from 'App/constants';
 import { Icon } from 'UI';
 import stl from './countryFlag.module.css';
 
-const CountryFlag = React.memo(({ country, className, style = {}, label = false }) => {
+const CountryFlag = ({ country = '', className = '', style = {}, label = false }) => {
 	const knownCountry = !!country && country !== 'UN';
   	const countryFlag = knownCountry ? country.toLowerCase() : '';
   	const countryName = knownCountry ? countries[ country ] : 'Unknown Country';
@@ -22,8 +22,8 @@ const CountryFlag = React.memo(({ country, className, style = {}, label = false
 			{ knownCountry && label && <div className={ cn(stl.label, 'ml-1') }>{ countryName }</div> }
 		</div>
 	);
-})
+}
 
 CountryFlag.displayName = "CountryFlag";
 
-export default CountryFlag;
+export default React.memo(CountryFlag);

frontend/app/date.ts

@@ -77,12 +77,19 @@ export function formatDateTimeDefault(timestamp: number): string {
  * @param {Object} timezone fixed offset like UTC+6
  * @returns {String} formatted date (or time if its today)
  */
-export function formatTimeOrDate(timestamp: number, timezone: Timezone): string {
+export function formatTimeOrDate(timestamp: number, timezone: Timezone, isFull = false): string {
   var date = DateTime.fromMillis(timestamp)
   if (timezone) {
     if (timezone.value === 'UTC') date = date.toUTC();
     date = date.setZone(timezone.value)
   }
+
+  if (isFull) {
+    const strHead = date.toFormat('LLL dd, yyyy, ')
+    const strTail = date.toFormat('hh:mma').toLowerCase()
+    return strHead + strTail;
+  }
+
   if (isToday(date)) {
     return date.toFormat('hh:mma').toLowerCase()
   }

frontend/app/mstore/types/sessionSettings.ts

@@ -19,10 +19,9 @@ export const generateGMTZones = (): Timezone[] => {
     for (let i = 0; i < combinedArray.length; i++) {
         let symbol = i < 11 ? '-' : '+';
         let isUTC = i === 11;
-        let prefix = isUTC ? 'UTC / GMT' : 'GMT';
         let value = String(combinedArray[i]).padStart(2, '0');
 
-        let tz = `${prefix} ${symbol}${String(combinedArray[i]).padStart(2, '0')}:00`;
+        let tz = `UTC ${symbol}${String(combinedArray[i]).padStart(2, '0')}:00`;
 
         let dropdownValue = `UTC${symbol}${value}`;
         timezones.push({ label: tz, value: isUTC ? 'UTC' : dropdownValue });