From 67023be9b00a5e4fe521c77a10a184fe7623dc6f Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 7 Mar 2024 14:44:17 -0500 Subject: [PATCH 1/3] feat: add hover title text to icons --- src/components/NotificationRow.tsx | 10 ++++++++-- .../__snapshots__/NotificationRow.test.tsx.snap | 1 + src/utils/helpers.test.ts | 10 ++++++++++ src/utils/helpers.ts | 14 ++++++++++++++ 4 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index 44c049c0a..6b6259d7a 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -7,7 +7,7 @@ import { getNotificationTypeIcon, getNotificationTypeIconColor, } from '../utils/github-api'; -import { openInBrowser } from '../utils/helpers'; +import { formatForDisplay, openInBrowser } from '../utils/helpers'; import { Notification } from '../typesGithub'; import { AppContext } from '../context/App'; @@ -61,10 +61,16 @@ export const NotificationRow: React.FC = ({ const updatedAt = formatDistanceToNow(parseISO(notification.updated_at), { addSuffix: true, }); + const notificationTitle = formatForDisplay( + `${notification.subject.state ?? ''} ${notification.subject.type ?? ''}`, + ); return (
-
+
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap index 643122d32..13da2c7fc 100644 --- a/src/components/__snapshots__/NotificationRow.test.tsx.snap +++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap @@ -6,6 +6,7 @@ exports[`components/Notification.js should render itself & its children 1`] = ` >
{ `${mockedSingleNotification.repository.html_url}?${mockedNotificationReferrer}`, ); }); + + it('formatForDisplay', () => { + expect(formatForDisplay(null)).toBe(''); + expect(formatForDisplay('open PullRequest')).toBe('Open Pull Request'); + expect(formatForDisplay('OUTDATED Discussion')).toBe( + 'Outdated Discussion', + ); + expect(formatForDisplay('not_planned Issue')).toBe('Not Planned Issue'); + }); }); }); diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 322fb6286..25a102b7d 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -225,6 +225,20 @@ export async function generateGitHubWebUrl( return url; } +export function formatForDisplay(text: string) { + if (!text) { + return ''; + } + + return text + .replace(/([a-z])([A-Z])/g, '$1 $2') // Add space between lowercase character followed by an uppercase character + .replace(/_/g, ' ') // Replace underscores with spaces + .replace(/\w+/g, (word) => { + // Convert to proper case (capitalize first letter of each word) + return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); + }); +} + export async function openInBrowser( notification: Notification, accounts: AuthState, From 7f82474971d28dc8e5b5000230ade61d9cd64489 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 7 Mar 2024 14:47:03 -0500 Subject: [PATCH 2/3] feat: add hover title text to icons --- src/components/NotificationRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index 6b6259d7a..2e708565d 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -62,7 +62,7 @@ export const NotificationRow: React.FC = ({ addSuffix: true, }); const notificationTitle = formatForDisplay( - `${notification.subject.state ?? ''} ${notification.subject.type ?? ''}`, + `${notification.subject.state ?? ''} ${notification.subject.type}`, ); return ( From 50c9dafc7b969f2e7b01b9b4c3fd5217a7a8c0e9 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 7 Mar 2024 14:53:46 -0500 Subject: [PATCH 3/3] feat: add hover title text to icons --- src/components/NotificationRow.tsx | 7 ++++--- src/utils/helpers.test.ts | 11 ++++++++--- src/utils/helpers.ts | 3 ++- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index 2e708565d..58c790219 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -61,9 +61,10 @@ export const NotificationRow: React.FC = ({ const updatedAt = formatDistanceToNow(parseISO(notification.updated_at), { addSuffix: true, }); - const notificationTitle = formatForDisplay( - `${notification.subject.state ?? ''} ${notification.subject.type}`, - ); + const notificationTitle = formatForDisplay([ + notification.subject.state, + notification.subject.type, + ]); return (
diff --git a/src/utils/helpers.test.ts b/src/utils/helpers.test.ts index e93c34e58..ce5cd5198 100644 --- a/src/utils/helpers.test.ts +++ b/src/utils/helpers.test.ts @@ -562,11 +562,16 @@ describe('utils/helpers.ts', () => { it('formatForDisplay', () => { expect(formatForDisplay(null)).toBe(''); - expect(formatForDisplay('open PullRequest')).toBe('Open Pull Request'); - expect(formatForDisplay('OUTDATED Discussion')).toBe( + expect(formatForDisplay([])).toBe(''); + expect(formatForDisplay(['open', 'PullRequest'])).toBe( + 'Open Pull Request', + ); + expect(formatForDisplay(['OUTDATED', 'Discussion'])).toBe( 'Outdated Discussion', ); - expect(formatForDisplay('not_planned Issue')).toBe('Not Planned Issue'); + expect(formatForDisplay(['not_planned', 'Issue'])).toBe( + 'Not Planned Issue', + ); }); }); }); diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 25a102b7d..995e67563 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -225,12 +225,13 @@ export async function generateGitHubWebUrl( return url; } -export function formatForDisplay(text: string) { +export function formatForDisplay(text: string[]) { if (!text) { return ''; } return text + .join(' ') .replace(/([a-z])([A-Z])/g, '$1 $2') // Add space between lowercase character followed by an uppercase character .replace(/_/g, ' ') // Replace underscores with spaces .replace(/\w+/g, (word) => {