From c275519b8edddcf4dd9f2822530addc165c0ed24 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 23 Jan 2025 07:34:55 -0500 Subject: [PATCH 1/2] feat: avatar with fallback icons component Signed-off-by: Adam Setch --- .../avatars/AvatarWithFallback.test.tsx | 51 ++++ .../components/avatars/AvatarWithFallback.tsx | 51 ++++ .../AvatarWithFallback.test.tsx.snap | 289 ++++++++++++++++++ .../components/fields/RadioGroup.test.tsx | 2 + .../notifications/AccountNotifications.tsx | 13 +- .../notifications/NotificationFooter.tsx | 17 +- .../notifications/NotificationHeader.tsx | 21 +- .../notifications/RepositoryNotifications.tsx | 22 +- .../AccountNotifications.test.tsx.snap | 160 ++++++---- .../NotificationFooter.test.tsx.snap | 280 ++++++++++++----- .../NotificationHeader.test.tsx.snap | 12 +- .../NotificationRow.test.tsx.snap | 222 ++++++++++---- .../RepositoryNotifications.test.tsx.snap | 21 +- src/renderer/routes/Accounts.tsx | 20 +- .../__snapshots__/Accounts.test.tsx.snap | 54 ++-- 15 files changed, 949 insertions(+), 286 deletions(-) create mode 100644 src/renderer/components/avatars/AvatarWithFallback.test.tsx create mode 100644 src/renderer/components/avatars/AvatarWithFallback.tsx create mode 100644 src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap diff --git a/src/renderer/components/avatars/AvatarWithFallback.test.tsx b/src/renderer/components/avatars/AvatarWithFallback.test.tsx new file mode 100644 index 000000000..40114d53f --- /dev/null +++ b/src/renderer/components/avatars/AvatarWithFallback.test.tsx @@ -0,0 +1,51 @@ +import { render, screen } from '@testing-library/react'; + +import { type Link, Size } from '../../types'; +import { + AvatarWithFallback, + type IAvatarWithFallback, +} from './AvatarWithFallback'; + +describe('renderer/components/avatars/AvatarWithFallback.tsx', () => { + const props: IAvatarWithFallback = { + src: 'https://avatars.githubusercontent.com/u/133795385?s=200&v=4' as Link, + alt: 'gitify-app', + name: '@gitify-app', + size: Size.MEDIUM, + isNonHuman: false, + }; + + it('should render avatar - human user', () => { + const tree = render(); + expect(tree).toMatchSnapshot(); + }); + + it('should render avatar - non-human user', () => { + const tree = render(); + expect(tree).toMatchSnapshot(); + }); + + it('renders the fallback icon when the image fails to load (isBroken = true) - human user', () => { + render(); + + // Find the avatar element by its alt text + const avatar = screen.getByAltText('gitify-app') as HTMLImageElement; + + // Simulate an error event on the image element + avatar.dispatchEvent(new Event('error')); + + expect(screen.getByTestId('avatar')).toMatchSnapshot(); + }); + + it('renders the fallback icon when the image fails to load (isBroken = true) - non human user', () => { + render(); + + // Find the avatar element by its alt text + const avatar = screen.getByAltText('gitify-app') as HTMLImageElement; + + // Simulate an error event on the image element + avatar.dispatchEvent(new Event('error')); + + expect(screen.getByTestId('avatar')).toMatchSnapshot(); + }); +}); diff --git a/src/renderer/components/avatars/AvatarWithFallback.tsx b/src/renderer/components/avatars/AvatarWithFallback.tsx new file mode 100644 index 000000000..3474d1c2a --- /dev/null +++ b/src/renderer/components/avatars/AvatarWithFallback.tsx @@ -0,0 +1,51 @@ +import type React from 'react'; +import { useState } from 'react'; + +import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react'; +import { Avatar, Stack, Text } from '@primer/react'; + +import { type Link, Size } from '../../types'; + +export interface IAvatarWithFallback { + src: Link; + alt: string; + name?: string; + size?: number; + isNonHuman?: boolean; +} + +export const AvatarWithFallback: React.FC = ({ + src, + alt, + name, + size = Size.MEDIUM, + isNonHuman = false, +}) => { + const [isBroken, setIsBroken] = useState(false); + + return ( + + {isBroken ? ( + isNonHuman ? ( + + ) : ( + + ) + ) : ( + setIsBroken(true)} + /> + )} + {name && {name}} + + ); +}; diff --git a/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap b/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap new file mode 100644 index 000000000..e4608fd08 --- /dev/null +++ b/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap @@ -0,0 +1,289 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback icon when the image fails to load (isBroken = true) - human user 1`] = ` +
+ gitify-app + + @gitify-app + +
+`; + +exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback icon when the image fails to load (isBroken = true) - non human user 1`] = ` +
+ gitify-app + + @gitify-app + +
+`; + +exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar - human user 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ gitify-app + + @gitify-app + +
+
+ , + "container":
+
+ gitify-app + + @gitify-app + +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar - non-human user 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ gitify-app + + @gitify-app + +
+
+ , + "container":
+
+ gitify-app + + @gitify-app + +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/src/renderer/components/fields/RadioGroup.test.tsx b/src/renderer/components/fields/RadioGroup.test.tsx index 67c3a8719..b55091935 100644 --- a/src/renderer/components/fields/RadioGroup.test.tsx +++ b/src/renderer/components/fields/RadioGroup.test.tsx @@ -27,7 +27,9 @@ describe('renderer/components/fields/RadioGroup.tsx', () => { it('should check that NProgress is getting called in getDerivedStateFromProps (loading)', () => { render(); + fireEvent.click(screen.getByLabelText('Value 1')); + expect(props.onChange).toHaveBeenCalledTimes(1); }); }); diff --git a/src/renderer/components/notifications/AccountNotifications.tsx b/src/renderer/components/notifications/AccountNotifications.tsx index c42452c66..db2f0fabc 100644 --- a/src/renderer/components/notifications/AccountNotifications.tsx +++ b/src/renderer/components/notifications/AccountNotifications.tsx @@ -1,7 +1,7 @@ import { type FC, type MouseEvent, useContext, useMemo, useState } from 'react'; import { GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react'; -import { Avatar, Button, IconButton, Stack, Text } from '@primer/react'; +import { Button, IconButton } from '@primer/react'; import { AppContext } from '../../context/App'; import { type Account, type GitifyError, Size } from '../../types'; @@ -15,6 +15,7 @@ import { } from '../../utils/links'; import { AllRead } from '../AllRead'; import { Oops } from '../Oops'; +import { AvatarWithFallback } from '../avatars/AvatarWithFallback'; import { HoverGroup } from '../primitives/HoverGroup'; import { NotificationRow } from './NotificationRow'; import { RepositoryNotifications } from './RepositoryNotifications'; @@ -87,10 +88,12 @@ export const AccountNotifications: FC = ( }} data-testid="account-profile" > - - - @{account.user.login} - + diff --git a/src/renderer/components/notifications/NotificationFooter.tsx b/src/renderer/components/notifications/NotificationFooter.tsx index 445799075..9dd33c4dc 100644 --- a/src/renderer/components/notifications/NotificationFooter.tsx +++ b/src/renderer/components/notifications/NotificationFooter.tsx @@ -1,7 +1,7 @@ import type { FC, MouseEvent } from 'react'; import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react'; -import { Avatar, RelativeTime, Stack, Text } from '@primer/react'; +import { Box, RelativeTime, Stack, Text } from '@primer/react'; import { IconColor, Opacity, Size } from '../../types'; import type { Notification } from '../../typesGitHub'; @@ -9,6 +9,7 @@ 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'; import { MetricGroup } from '../metrics/MetricGroup'; interface INotificationFooter { @@ -29,18 +30,22 @@ export const NotificationFooter: FC = ({ className={cn('text-xs', Opacity.MEDIUM)} > {notification.subject.user ? ( - ) => { // Don't trigger onClick of parent element. event.stopPropagation(); openUserProfile(notification.subject.user); }} data-testid="view-profile" - /> + > + + ) : ( <> {notification.subject.type === 'RepositoryDependabotAlertsThread' || diff --git a/src/renderer/components/notifications/NotificationHeader.tsx b/src/renderer/components/notifications/NotificationHeader.tsx index c28052cf0..9e6c663ea 100644 --- a/src/renderer/components/notifications/NotificationHeader.tsx +++ b/src/renderer/components/notifications/NotificationHeader.tsx @@ -1,11 +1,13 @@ import { type FC, type MouseEvent, useContext } from 'react'; -import { Avatar, Stack, Tooltip } from '@primer/react'; +import { Box, Tooltip } from '@primer/react'; import { AppContext } from '../../context/App'; import { Size } from '../../types'; import type { Notification } from '../../typesGitHub'; +import { isNonHumanUser } from '../../utils/helpers'; import { openRepository } from '../../utils/links'; +import { AvatarWithFallback } from '../avatars/AvatarWithFallback'; interface INotificationHeader { notification: Notification; @@ -16,7 +18,6 @@ export const NotificationHeader: FC = ({ }: INotificationHeader) => { const { settings } = useContext(AppContext); - const repoAvatarUrl = notification.repository.owner.avatar_url; const repoSlug = notification.repository.full_name; const groupByDate = settings.groupBy === 'DATE'; @@ -24,7 +25,8 @@ export const NotificationHeader: FC = ({ return ( groupByDate && ( -
) => { // Don't trigger onClick of parent element. event.stopPropagation(); @@ -32,11 +34,14 @@ export const NotificationHeader: FC = ({ }} data-testid="view-repository" > - - - {repoSlug} - -
+ + ) ); diff --git a/src/renderer/components/notifications/RepositoryNotifications.tsx b/src/renderer/components/notifications/RepositoryNotifications.tsx index d0e997c1c..5f6893036 100644 --- a/src/renderer/components/notifications/RepositoryNotifications.tsx +++ b/src/renderer/components/notifications/RepositoryNotifications.tsx @@ -1,5 +1,5 @@ import { CheckIcon, ReadIcon } from '@primer/octicons-react'; -import { Avatar, Button, IconButton, Stack, Text } from '@primer/react'; +import { Button, IconButton } from '@primer/react'; import { type FC, type MouseEvent, useContext, useState } from 'react'; import { AppContext } from '../../context/App'; @@ -9,6 +9,7 @@ import { cn } from '../../utils/cn'; import { isMarkAsDoneFeatureSupported } from '../../utils/features'; import { getChevronDetails, isNonHumanUser } from '../../utils/helpers'; import { openRepository } from '../../utils/links'; +import { AvatarWithFallback } from '../avatars/AvatarWithFallback'; import { HoverGroup } from '../primitives/HoverGroup'; import { NotificationRow } from './NotificationRow'; @@ -65,16 +66,15 @@ export const RepositoryNotifications: FC = ({ openRepository(repoNotifications[0].repository); }} > - - - {repoName} - + diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap index 57c103815..fc559a56b 100644 --- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap @@ -33,10 +33,11 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende data-gap="condensed" data-justify="start" data-padding="none" + data-testid="avatar" data-wrap="nowrap" > - @ - octocat + @octocat @@ -284,10 +284,11 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende data-gap="condensed" data-justify="start" data-padding="none" + data-testid="avatar" data-wrap="nowrap" > - @ - octocat + @octocat @@ -592,10 +592,11 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende data-gap="condensed" data-justify="start" data-padding="none" + data-testid="avatar" data-wrap="nowrap" > - @ - octocat + @octocat @@ -807,6 +807,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende role="tooltip" >
gitify-app/notifications-test @@ -859,18 +861,33 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende data-padding="none" data-wrap="wrap" > - + > +
+ gitify-app +
+
@@ -3673,10 +3711,11 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl data-gap="condensed" data-justify="start" data-padding="none" + data-testid="avatar" data-wrap="nowrap" > - @ - octocat + @octocat
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap index 022d35715..39a2e048b 100644 --- a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap +++ b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap @@ -14,18 +14,33 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert data-padding="none" data-wrap="wrap" > - + > +
+ gitify-app +
+
- + > +
+ gitify-app +
+
- + > +
+ gitify-app +
+
- + > +
+ gitify-app +
+
- + > +
+ gitify-app +
+
- + > +
+ gitify-app +
+
- + > +
+ gitify-app +
+
- + > +
+ gitify-app +
+
@@ -3320,10 +3320,11 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre data-gap="condensed" data-justify="start" data-padding="none" + data-testid="avatar" data-wrap="nowrap" > - @ - octocat + @octocat From a0958dfdeb7c921eef5af8050c5f1ed5ba80fa22 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 23 Jan 2025 08:15:26 -0500 Subject: [PATCH 2/2] feat: avatar with fallback icons component Signed-off-by: Adam Setch --- .../avatars/AvatarWithFallback.test.tsx | 22 +- .../components/avatars/AvatarWithFallback.tsx | 13 +- .../AvatarWithFallback.test.tsx.snap | 254 ++++++++++++++++++ .../notifications/NotificationFooter.tsx | 23 +- .../notifications/NotificationHeader.tsx | 3 +- .../notifications/RepositoryNotifications.tsx | 6 +- .../AccountNotifications.test.tsx.snap | 82 +++--- .../NotificationFooter.test.tsx.snap | 82 +++--- .../RepositoryNotifications.test.tsx.snap | 105 +++++--- 9 files changed, 469 insertions(+), 121 deletions(-) diff --git a/src/renderer/components/avatars/AvatarWithFallback.test.tsx b/src/renderer/components/avatars/AvatarWithFallback.test.tsx index 40114d53f..b94762e47 100644 --- a/src/renderer/components/avatars/AvatarWithFallback.test.tsx +++ b/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(); + const tree = render( + , + ); + expect(tree).toMatchSnapshot(); + }); + + it('renders the fallback icon when no src url - human user', () => { + const tree = render(); + + expect(tree).toMatchSnapshot(); + }); + + it('renders the fallback icon when no src url - non human user', () => { + const tree = render( + , + ); + 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(); + render(); // Find the avatar element by its alt text const avatar = screen.getByAltText('gitify-app') as HTMLImageElement; diff --git a/src/renderer/components/avatars/AvatarWithFallback.tsx b/src/renderer/components/avatars/AvatarWithFallback.tsx index 3474d1c2a..8610c922e 100644 --- a/src/renderer/components/avatars/AvatarWithFallback.tsx +++ b/src/renderer/components/avatars/AvatarWithFallback.tsx @@ -5,13 +5,15 @@ 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 = ({ @@ -19,10 +21,11 @@ export const AvatarWithFallback: React.FC = ({ alt, name, size = Size.MEDIUM, - isNonHuman = false, + userType = 'User', }) => { const [isBroken, setIsBroken] = useState(false); + const isNonHuman = isNonHumanUser(userType); return ( = ({ gap="condensed" data-testid="avatar" > - {isBroken ? ( + {!src || isBroken ? ( isNonHuman ? ( ) : ( diff --git a/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap b/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap index e4608fd08..16d16b195 100644 --- a/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap +++ b/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap @@ -1,5 +1,259 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback icon when no src url - human user 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ + + @gitify-app + +
+
+ , + "container":
+
+ + + @gitify-app + +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback icon when no src url - non human user 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ + + @gitify-app + +
+
+ , + "container":
+
+ + + @gitify-app + +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback icon when the image fails to load (isBroken = true) - human user 1`] = `
= ({ 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} /> ) : ( - <> - {notification.subject.type === 'RepositoryDependabotAlertsThread' || - notification.subject.type === 'RepositoryVulnerabilityAlert' ? ( - - ) : ( - - )} - + )} diff --git a/src/renderer/components/notifications/NotificationHeader.tsx b/src/renderer/components/notifications/NotificationHeader.tsx index 9e6c663ea..7604e84b2 100644 --- a/src/renderer/components/notifications/NotificationHeader.tsx +++ b/src/renderer/components/notifications/NotificationHeader.tsx @@ -5,7 +5,6 @@ import { Box, Tooltip } from '@primer/react'; import { AppContext } from '../../context/App'; import { Size } from '../../types'; import type { Notification } from '../../typesGitHub'; -import { isNonHumanUser } from '../../utils/helpers'; import { openRepository } from '../../utils/links'; import { AvatarWithFallback } from '../avatars/AvatarWithFallback'; @@ -39,7 +38,7 @@ export const NotificationHeader: FC = ({ alt={repoSlug} name={repoSlug} size={Size.SMALL} - isNonHuman={isNonHumanUser(notification.repository.owner.type)} + userType={notification.repository.owner.type} /> diff --git a/src/renderer/components/notifications/RepositoryNotifications.tsx b/src/renderer/components/notifications/RepositoryNotifications.tsx index 5f6893036..1714f6a52 100644 --- a/src/renderer/components/notifications/RepositoryNotifications.tsx +++ b/src/renderer/components/notifications/RepositoryNotifications.tsx @@ -7,7 +7,7 @@ import { Opacity, Size } from '../../types'; import type { Notification } from '../../typesGitHub'; import { cn } from '../../utils/cn'; import { isMarkAsDoneFeatureSupported } from '../../utils/features'; -import { getChevronDetails, isNonHumanUser } from '../../utils/helpers'; +import { getChevronDetails } from '../../utils/helpers'; import { openRepository } from '../../utils/links'; import { AvatarWithFallback } from '../avatars/AvatarWithFallback'; import { HoverGroup } from '../primitives/HoverGroup'; @@ -71,9 +71,7 @@ export const RepositoryNotifications: FC = ({ alt={repoName} name={repoName} size={Size.LARGE} - isNonHuman={isNonHumanUser( - repoNotifications[0].repository.owner.type, - )} + userType={repoNotifications[0].repository.owner.type} />
diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap index fc559a56b..f0f0e6623 100644 --- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap @@ -1213,22 +1213,33 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende data-padding="none" data-wrap="wrap" > - + +
- + +
- + +
- + +
- + > + + @@ -702,15 +709,22 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to data-testid="avatar" data-wrap="nowrap" > - + > + + @@ -906,15 +920,22 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to data-testid="avatar" data-wrap="nowrap" > - + > + + @@ -1167,15 +1188,22 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us data-testid="avatar" data-wrap="nowrap" > - + > + + @@ -1371,15 +1399,22 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us data-testid="avatar" data-wrap="nowrap" > - + > + +