jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): username null check

Browse source
This commit is contained in:
Shekar Siri 2024-07-03 13:34:03 +02:00
parent a2e9f2b165
commit 420cd95858
3 changed files with 109 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
View file

@ -102,7 +102,7 @@ export const CARD_LIST: CardType[] = [
title: 'Heatmaps',
key: HEATMAP,
cardType: HEATMAP,
metricOf: 'sessionCount',
metricOf: 'clickMapUrl',
category: CARD_CATEGORIES[0].key,
example: HeatmapsExample
},

187
frontend/app/mstore/types/IconProvider.tsx
View file

@ -1,126 +1,129 @@
import {Avatar, Icon} from "UI";
import React from "react";
import * as Flags from "country-flag-icons/react/3x2";
import {hashString} from "Types/session/session";
import { Avatar, Icon } from 'UI';
import React from 'react';
import * as Flags from 'country-flag-icons/react/3x2';
import { hashString } from 'Types/session/session';
interface IconProvider {
getIcon(name: string): React.ReactNode;
getIcon(obj: any): React.ReactNode;
}
class BrowserIconProvider implements IconProvider {
getIcon(name: string): React.ReactNode {
const s = name.toLowerCase();
let icon = 'color/browser/unknown'
if (s.includes('chrome')) {
icon = 'color/browser/chrome';
} else if (s.includes('firefox')) {
icon = 'color/browser/firefox';
} else if (s.includes('safari')) {
icon = 'color/browser/safari';
} else if (s.includes('edge')) {
icon = 'color/browser/edge';
} else if (s.includes('opera')) {
icon = 'color/browser/opera';
} else if (s.includes('ie')) {
icon = 'color/browser/ie';
}
return <Icon name={icon} size={24}/>
getIcon(obj: any): React.ReactNode {
const s = obj.name.toLowerCase();
let icon = 'color/browser/unknown';
if (s.includes('chrome')) {
icon = 'color/browser/chrome';
} else if (s.includes('firefox')) {
icon = 'color/browser/firefox';
} else if (s.includes('safari')) {
icon = 'color/browser/safari';
} else if (s.includes('edge')) {
icon = 'color/browser/edge';
} else if (s.includes('opera')) {
icon = 'color/browser/opera';
} else if (s.includes('ie')) {
icon = 'color/browser/ie';
}
return <Icon name={icon} size={24} />;
}
}
class CountryIconProvider implements IconProvider {
getIcon(name: string): React.ReactNode {
const s = name.toUpperCase();
if (Flags[s as keyof typeof Flags]) {
const FlagComponent = Flags[s as keyof typeof Flags];
return <FlagComponent style={{
width: 24,
height: 24
}}/>
}
return <Icon name='flag-na' size={24}/>
getIcon(obj: any): React.ReactNode {
const s = obj.name.toUpperCase();
if (Flags[s as keyof typeof Flags]) {
const FlagComponent = Flags[s as keyof typeof Flags];
return <FlagComponent style={{
width: 24,
height: 24
}} />;
}
return <Icon name="flag-na" size={24} />;
}
}
class IssueIconProvider implements IconProvider {
getIcon(name: string): React.ReactNode {
const s = name.toLowerCase();
let icon = 'color/issues/' + s; // TODO use this line
getIcon(obj: any): React.ReactNode {
const s = obj.name.toLowerCase();
let icon = 'color/issues/' + s; // TODO use this line
// if (s.includes('dead_click')) {
// icon = 'color/issues/dead_click';
// } else if (s.includes('click_rage')) {
// icon = 'color/issues/click_rage';
// } else if (s.includes('mouse_thrashing')) {
// icon = 'color/issues/mouse_thrashing';
// } else if (s.includes('bad_request')) {
// icon = 'color/issues/bad_request';
// } else if (s.includes('crash')) {
// icon = 'color/issues/crash';
// }
return <Icon name={icon} size={24}/>
}
// if (s.includes('dead_click')) {
// icon = 'color/issues/dead_click';
// } else if (s.includes('click_rage')) {
// icon = 'color/issues/click_rage';
// } else if (s.includes('mouse_thrashing')) {
// icon = 'color/issues/mouse_thrashing';
// } else if (s.includes('bad_request')) {
// icon = 'color/issues/bad_request';
// } else if (s.includes('crash')) {
// icon = 'color/issues/crash';
// }
// @ts-ignore
return <Icon name={icon} size={24} />;
}
}
class UrlIconProvider implements IconProvider {
getIcon(name: string): React.ReactNode {
return <Icon name="link-45deg" size={24}/>
}
getIcon(obj: any): React.ReactNode {
return <Icon name="link-45deg" size={24} />;
}
}
class DeviceIconProvider implements IconProvider {
getIcon(name: string): React.ReactNode {
const s = name.toLowerCase();
let icon = 'color/device/desktop'
if (s.includes('desktop')) {
icon = 'color/device/desktop';
} else if (
s.includes('mobile') || s.includes('iphone') || s === 'k' || s.includes('android') ||
s.includes('smartphone') || s.includes('phone') || s.includes('moto')
) {
icon = 'color/device/mobile';
} else if (s.includes('tablet')) {
icon = 'color/device/tablet';
} else {
icon = 'color/device/desktop';
}
return <Icon name={icon} size={24}/>
getIcon(obj: any): React.ReactNode {
const s = obj.name.toLowerCase();
let icon = 'color/device/desktop';
if (s.includes('desktop')) {
icon = 'color/device/desktop';
} else if (
s.includes('mobile') || s.includes('iphone') || s === 'k' || s.includes('android') ||
s.includes('smartphone') || s.includes('phone') || s.includes('moto')
) {
icon = 'color/device/mobile';
} else if (s.includes('tablet')) {
icon = 'color/device/tablet';
} else {
icon = 'color/device/desktop';
}
// @ts-ignore
return <Icon name={icon} size={24} />;
}
}
class OsIconProvider implements IconProvider {
getIcon(name: string): React.ReactNode {
const s = name.toLowerCase();
if (s.includes('windows')) {
return 'os/windows';
} else if (s.includes('mac')) {
return 'os/mac';
} else if (s.includes('linux')) {
return 'os/linux';
} else {
return 'os/unknown';
}
getIcon(obj: any): React.ReactNode {
const s = obj.name.toLowerCase();
if (s.includes('windows')) {
return 'os/windows';
} else if (s.includes('mac')) {
return 'os/mac';
} else if (s.includes('linux')) {
return 'os/linux';
} else {
return 'os/unknown';
}
}
}
class UserIconProvider implements IconProvider {
getIcon(name: string): React.ReactNode {
return <Avatar seed={hashString(name)}/>
}
getIcon(obj: any): React.ReactNode {
return <Avatar seed={hashString(obj.name || 'Anounymous')} />;
}
}
export {
BrowserIconProvider,
CountryIconProvider,
IssueIconProvider,
UrlIconProvider,
DeviceIconProvider,
OsIconProvider,
UserIconProvider
BrowserIconProvider,
CountryIconProvider,
IssueIconProvider,
UrlIconProvider,
DeviceIconProvider,
OsIconProvider,
UserIconProvider
};
export type {IconProvider};
export type { IconProvider };

16
frontend/app/mstore/types/sessionsCardData.ts
View file

@ -15,7 +15,7 @@ interface NameFormatter {
class BaseFormatter implements NameFormatter {
format(name: string): string {
return name.replace(/_/g, ' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))).trim();
return name?.replace(/_/g, ' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))).trim();
}
}
@ -40,6 +40,16 @@ class IssueFormatter extends BaseFormatter {
}
}
class UserNameFormatter extends BaseFormatter {
format(name: string): string {
if (name === null || name === undefined || name === '' || name === 'null' || name === 'undefined') {
return 'Anonymous';
}
return super.format(name);
}
}
export class SessionsByRow {
name: string;
displayName: string;
@ -53,7 +63,7 @@ export class SessionsByRow {
this.displayName = nameFormatter.format(json.name) || 'Unidentified';
this.sessionCount = numberWithCommas(json.sessionCount);
this.progress = Math.round((json.sessionCount / totalSessions) * 100);
this.icon = iconProvider.getIcon(json.name);
this.icon = iconProvider.getIcon(json);
return this;
}
@ -72,7 +82,7 @@ export class SessionsByRow {
case 'platform':
return { nameFormatter: new BaseFormatter(), iconProvider: new OsIconProvider() };
case 'userId':
return { nameFormatter: new BaseFormatter(), iconProvider: new UserIconProvider() };
return { nameFormatter: new UserNameFormatter(), iconProvider: new UserIconProvider() };
default:
return { nameFormatter: new BaseFormatter(), iconProvider: new DefaultIconProvider() };
}