Repository: gitify-app/gitify
Pull request #1291 (2024-06-20 04:04:07)

refactor: fix event prop on click and subtle ui tweaks


Patch:
diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index c4bb53aa..5295b7a0 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -3,7 +3,7 @@ import {
   ChevronLeftIcon,
   ChevronUpIcon,
 } from '@primer/octicons-react';
-import { type FC, useContext, useState } from 'react';
+import { type FC, type MouseEvent, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
 import { type Account, Size } from '../types';
 import type { Notification } from '../typesGitHub';
@@ -72,7 +72,11 @@ export const AccountNotifications: FC<IAccountNotifications> = (
             <button
               type="button"
               title="Open Profile"
-              onClick={() => openAccountProfile(account)}
+              onClick={(event: MouseEvent<HTMLElement>) => {
+                // Don't trigger onClick of parent element.
+                event.stopPropagation();
+                openAccountProfile(account);
+              }}
               className="opacity-80"
             >
               @{account.user.login}
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 457cb8e5..0d1d4ad0 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -149,8 +149,13 @@ export const NotificationRow: FC<INotificationRow> = ({
               />
             </span>
             <span
+              title={repoSlug}
               className="cursor-pointer truncate opacity-90"
-              onClick={() => openRepository(notification.repository)}
+              onClick={(event: MouseEvent<HTMLElement>) => {
+                // Don't trigger onClick of parent element.
+                event.stopPropagation();
+                openRepository(notification.repository);
+              }}
             >
               {repoSlug}
             </span>
diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx
index ccb95e8f..fa664c98 100644
--- a/src/components/RepositoryNotifications.tsx
+++ b/src/components/RepositoryNotifications.tsx
@@ -5,7 +5,13 @@ import {
   MarkGithubIcon,
   ReadIcon,
 } from '@primer/octicons-react';
-import { type FC, useCallback, useContext, useState } from 'react';
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useContext,
+  useState,
+} from 'react';
 import { AppContext } from '../context/App';
 import { Size } from '../types';
 import type { Notification } from '../typesGitHub';
@@ -65,7 +71,11 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           />
           <span
             className="cursor-pointer truncate opacity-90"
-            onClick={() => openRepository(repoNotifications[0].repository)}
+            onClick={(event: MouseEvent<HTMLElement>) => {
+              // Don't trigger onClick of parent element.
+              event.stopPropagation();
+              openRepository(repoNotifications[0].repository);
+            }}
           >
             {repoName}
           </span>


Test patch:
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index db8dd009..33f51f6e 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -107,6 +107,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </span>
             <span
               class="cursor-pointer truncate opacity-90"
+              title="gitify-app/notifications-test"
             >
               gitify-app/notifications-test
             </span>
@@ -303,6 +304,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </span>
             <span
               class="cursor-pointer truncate opacity-90"
+              title="gitify-app/notifications-test"
             >
               gitify-app/notifications-test
             </span>
@@ -521,6 +523,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </span>
           <span
             class="cursor-pointer truncate opacity-90"
+            title="gitify-app/notifications-test"
           >
             gitify-app/notifications-test
           </span>
@@ -717,6 +720,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </span>
           <span
             class="cursor-pointer truncate opacity-90"
+            title="gitify-app/notifications-test"
           >
             gitify-app/notifications-test
           </span>
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index afe75710..649fef6d 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -4679,6 +4679,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
             </span>
             <span
               class="cursor-pointer truncate opacity-90"
+              title="gitify-app/notifications-test"
             >
               gitify-app/notifications-test
             </span>
@@ -4878,6 +4879,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </span>
           <span
             class="cursor-pointer truncate opacity-90"
+            title="gitify-app/notifications-test"
           >
             gitify-app/notifications-test
           </span>