feat: avatar with fallback icons component

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/avatars/AvatarWithFallback.test.tsx

@@ -12,7 +12,7 @@ describe('renderer/components/avatars/AvatarWithFallback.tsx', () => {
     alt: 'gitify-app',
     name: '@gitify-app',
     size: Size.MEDIUM,
-    isNonHuman: false,
+    userType: 'User',
   };
 
   it('should render avatar - human user', () => {
@@ -21,7 +21,23 @@ describe('renderer/components/avatars/AvatarWithFallback.tsx', () => {
   });
 
   it('should render avatar - non-human user', () => {
-    const tree = render(<AvatarWithFallback {...props} isNonHuman />);
+    const tree = render(
+      <AvatarWithFallback {...props} userType={'Organization'} />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders the fallback icon when no src url - human user', () => {
+    const tree = render(<AvatarWithFallback {...props} src={null} />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders the fallback icon when no src url - non human user', () => {
+    const tree = render(
+      <AvatarWithFallback {...props} src={null} userType="Bot" />,
+    );
+
     expect(tree).toMatchSnapshot();
   });
 
@@ -38,7 +54,7 @@ describe('renderer/components/avatars/AvatarWithFallback.tsx', () => {
   });
 
   it('renders the fallback icon when the image fails to load (isBroken = true) - non human user', () => {
-    render(<AvatarWithFallback {...props} isNonHuman />);
+    render(<AvatarWithFallback {...props} userType={'Bot'} />);
 
     // Find the avatar element by its alt text
     const avatar = screen.getByAltText('gitify-app') as HTMLImageElement;

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -5,32 +5,35 @@ import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react';
 import { Avatar, Stack, Text } from '@primer/react';
 
 import { type Link, Size } from '../../types';
+import type { UserType } from '../../typesGitHub';
+import { isNonHumanUser } from '../../utils/helpers';
 
 export interface IAvatarWithFallback {
-  src: Link;
-  alt: string;
+  src?: Link;
+  alt?: string;
   name?: string;
   size?: number;
-  isNonHuman?: boolean;
+  userType?: UserType;
 }
 
 export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
   src,
   alt,
   name,
   size = Size.MEDIUM,
-  isNonHuman = false,
+  userType = 'User',
 }) => {
   const [isBroken, setIsBroken] = useState(false);
 
+  const isNonHuman = isNonHumanUser(userType);
   return (
     <Stack
       direction="horizontal"
       align="center"
       gap="condensed"
       data-testid="avatar"
     >
-      {isBroken ? (
+      {!src || isBroken ? (
         isNonHuman ? (
           <MarkGithubIcon size={size} />
         ) : (

src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap

@@ -1,12 +1,10 @@
 import type { FC, MouseEvent } from 'react';
 
-import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react';
 import { Box, RelativeTime, Stack, Text } from '@primer/react';
 
-import { IconColor, Opacity, Size } from '../../types';
+import { Opacity, Size } from '../../types';
 import type { Notification } from '../../typesGitHub';
 import { cn } from '../../utils/cn';
-import { isNonHumanUser } from '../../utils/helpers';
 import { openUserProfile } from '../../utils/links';
 import { formatReason } from '../../utils/reason';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
@@ -43,18 +41,19 @@ export const NotificationFooter: FC<INotificationFooter> = ({
             src={notification.subject.user.avatar_url}
             alt={notification.subject.user.login}
             size={Size.SMALL}
-            isNonHuman={isNonHumanUser(notification.subject.user.type)}
+            userType={notification.subject.user.type}
           />
         </Box>
       ) : (
-        <>
-          {notification.subject.type === 'RepositoryDependabotAlertsThread' ||
-          notification.subject.type === 'RepositoryVulnerabilityAlert' ? (
-            <MarkGithubIcon size={Size.SMALL} />
-          ) : (
-            <FeedPersonIcon size={Size.SMALL} className={IconColor.GRAY} />
-          )}
-        </>
+        <AvatarWithFallback
+          size={Size.SMALL}
+          userType={
+            notification.subject.type === 'RepositoryDependabotAlertsThread' ||
+            notification.subject.type === 'RepositoryVulnerabilityAlert'
+              ? 'Bot'
+              : 'User'
+          }
+        />
       )}
 
       <Stack direction="horizontal" gap="none">