Repository: gitify-app/gitify
Pull request #1511 (2024-09-04 09:54:17)

fix: account header quick links
event propagation was playing up when clicking on the header issues and PR quick links.

Also made account avatar part of the open profile button


Patch:
diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 6ed8afa8..fff642df 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -93,14 +93,6 @@ export const AccountNotifications: FC<IAccountNotifications> = (
           onClick={toggleAccountNotifications}
         >
           <div className="flex">
-            <div className="mr-2 flex items-center justify-center">
-              <AvatarIcon
-                title={account.user.login}
-                url={account.user.avatar}
-                size={Size.SMALL}
-                defaultIcon={FeedPersonIcon}
-              />
-            </div>
             <button
               type="button"
               title="Open Profile"
@@ -110,7 +102,15 @@ export const AccountNotifications: FC<IAccountNotifications> = (
                 openAccountProfile(account);
               }}
             >
-              @{account.user.login}
+              <div className="flex">
+                <AvatarIcon
+                  title={account.user.login}
+                  url={account.user.avatar}
+                  size={Size.SMALL}
+                  defaultIcon={FeedPersonIcon}
+                />
+                <span className="ml-2">@{account.user.login}</span>
+              </div>
             </button>
           </div>
           <HoverGroup>
@@ -119,13 +119,21 @@ export const AccountNotifications: FC<IAccountNotifications> = (
               title="My Issues"
               icon={IssueOpenedIcon}
               size={Size.SMALL}
-              onClick={() => openGitHubIssues(account.hostname)}
+              onClick={(event: MouseEvent<HTMLElement>) => {
+                // Don't trigger onClick of parent element.
+                event.stopPropagation();
+                openGitHubIssues(account.hostname);
+              }}
             />
             <InteractionButton
               title="My Pull Requests"
               icon={GitPullRequestIcon}
               size={Size.SMALL}
-              onClick={() => openGitHubPulls(account.hostname)}
+              onClick={(event: MouseEvent<HTMLElement>) => {
+                // Don't trigger onClick of parent element.
+                event.stopPropagation();
+                openGitHubPulls(account.hostname);
+              }}
             />
             <InteractionButton
               title={toggleAccountNotificationsLabel}


Test patch:
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index bffdd00c..c05944d2 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -11,21 +11,25 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
         <div
           class="flex"
         >
-          <div
-            class="mr-2 flex items-center justify-center"
-          >
-            <img
-              alt="octocat's avatar"
-              class="rounded-full object-cover size-5"
-              src="https://avatars.githubusercontent.com/u/583231?v=4"
-            />
-          </div>
           <button
             title="Open Profile"
             type="button"
           >
-            @
-            octocat
+            <div
+              class="flex"
+            >
+              <img
+                alt="octocat's avatar"
+                class="rounded-full object-cover size-5"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              />
+              <span
+                class="ml-2"
+              >
+                @
+                octocat
+              </span>
+            </div>
           </button>
         </div>
         <div
@@ -153,21 +157,25 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
       <div
         class="flex"
       >
-        <div
-          class="mr-2 flex items-center justify-center"
-        >
-          <img
-            alt="octocat's avatar"
-            class="rounded-full object-cover size-5"
-            src="https://avatars.githubusercontent.com/u/583231?v=4"
-          />
-        </div>
         <button
           title="Open Profile"
           type="button"
         >
-          @
-          octocat
+          <div
+            class="flex"
+          >
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
+            <span
+              class="ml-2"
+            >
+              @
+              octocat
+            </span>
+          </div>
         </button>
       </div>
       <div
@@ -352,21 +360,25 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
         <div
           class="flex"
         >
-          <div
-            class="mr-2 flex items-center justify-center"
-          >
-            <img
-              alt="octocat's avatar"
-              class="rounded-full object-cover size-5"
-              src="https://avatars.githubusercontent.com/u/583231?v=4"
-            />
-          </div>
           <button
             title="Open Profile"
             type="button"
           >
-            @
-            octocat
+            <div
+              class="flex"
+            >
+              <img
+                alt="octocat's avatar"
+                class="rounded-full object-cover size-5"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              />
+              <span
+                class="ml-2"
+              >
+                @
+                octocat
+              </span>
+            </div>
           </button>
         </div>
         <div
@@ -834,21 +846,25 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
       <div
         class="flex"
       >
-        <div
-          class="mr-2 flex items-center justify-center"
-        >
-          <img
-            alt="octocat's avatar"
-            class="rounded-full object-cover size-5"
-            src="https://avatars.githubusercontent.com/u/583231?v=4"
-          />
-        </div>
         <button
           title="Open Profile"
           type="button"
         >
-          @
-          octocat
+          <div
+            class="flex"
+          >
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
+            <span
+              class="ml-2"
+            >
+              @
+              octocat
+            </span>
+          </div>
         </button>
       </div>
       <div
@@ -1373,21 +1389,25 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
         <div
           class="flex"
         >
-          <div
-            class="mr-2 flex items-center justify-center"
-          >
-            <img
-              alt="octocat's avatar"
-              class="rounded-full object-cover size-5"
-              src="https://avatars.githubusercontent.com/u/583231?v=4"
-            />
-          </div>
           <button
             title="Open Profile"
             type="button"
           >
-            @
-            octocat
+            <div
+              class="flex"
+            >
+              <img
+                alt="octocat's avatar"
+                class="rounded-full object-cover size-5"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              />
+              <span
+                class="ml-2"
+              >
+                @
+                octocat
+              </span>
+            </div>
           </button>
         </div>
         <div
@@ -1492,21 +1512,25 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
       <div
         class="flex"
       >
-        <div
-          class="mr-2 flex items-center justify-center"
-        >
-          <img
-            alt="octocat's avatar"
-            class="rounded-full object-cover size-5"
-            src="https://avatars.githubusercontent.com/u/583231?v=4"
-          />
-        </div>
         <button
           title="Open Profile"
           type="button"
         >
-          @
-          octocat
+          <div
+            class="flex"
+          >
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
+            <span
+              class="ml-2"
+            >
+              @
+              octocat
+            </span>
+          </div>
         </button>
       </div>
       <div
@@ -1668,21 +1692,25 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
         <div
           class="flex"
         >
-          <div
-            class="mr-2 flex items-center justify-center"
-          >
-            <img
-              alt="octocat's avatar"
-              class="rounded-full object-cover size-5"
-              src="https://avatars.githubusercontent.com/u/583231?v=4"
-            />
-          </div>
           <button
             title="Open Profile"
             type="button"
           >
-            @
-            octocat
+            <div
+              class="flex"
+            >
+              <img
+                alt="octocat's avatar"
+                class="rounded-full object-cover size-5"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              />
+              <span
+                class="ml-2"
+              >
+                @
+                octocat
+              </span>
+            </div>
           </button>
         </div>
         <div
@@ -1805,21 +1833,25 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
       <div
         class="flex"
       >
-        <div
-          class="mr-2 flex items-center justify-center"
-        >
-          <img
-            alt="octocat's avatar"
-            class="rounded-full object-cover size-5"
-            src="https://avatars.githubusercontent.com/u/583231?v=4"
-          />
-        </div>
         <button
           title="Open Profile"
           type="button"
         >
-          @
-          octocat
+          <div
+            class="flex"
+          >
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
+            <span
+              class="ml-2"
+            >
+              @
+              octocat
+            </span>
+          </div>
         </button>
       </div>
       <div
@@ -1999,21 +2031,25 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
         <div
           class="flex"
         >
-          <div
-            class="mr-2 flex items-center justify-center"
-          >
-            <img
-              alt="octocat's avatar"
-              class="rounded-full object-cover size-5"
-              src="https://avatars.githubusercontent.com/u/583231?v=4"
-            />
-          </div>
           <button
             title="Open Profile"
             type="button"
           >
-            @
-            octocat
+            <div
+              class="flex"
+            >
+              <img
+                alt="octocat's avatar"
+                class="rounded-full object-cover size-5"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              />
+              <span
+                class="ml-2"
+              >
+                @
+                octocat
+              </span>
+            </div>
           </button>
         </div>
         <div
@@ -2114,21 +2150,25 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
         <div
           class="flex"
         >
-          <div
-            class="mr-2 flex items-center justify-center"
-          >
-            <img
-              alt="octocat's avatar"
-              class="rounded-full object-cover size-5"
-              src="https://avatars.githubusercontent.com/u/583231?v=4"
-            />
-          </div>
           <button
             title="Open Profile"
             type="button"
           >
-            @
-            octocat
+            <div
+              class="flex"
+            >
+              <img
+                alt="octocat's avatar"
+                class="rounded-full object-cover size-5"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              />
+              <span
+                class="ml-2"
+              >
+                @
+                octocat
+              </span>
+            </div>
           </button>
         </div>
         <div
@@ -2233,21 +2273,25 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
       <div
         class="flex"
       >
-        <div
-          class="mr-2 flex items-center justify-center"
-        >
-          <img
-            alt="octocat's avatar"
-            class="rounded-full object-cover size-5"
-            src="https://avatars.githubusercontent.com/u/583231?v=4"
-          />
-        </div>
         <button
           title="Open Profile"
           type="button"
         >
-          @
-          octocat
+          <div
+            class="flex"
+          >
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
+            <span
+              class="ml-2"
+            >
+              @
+              octocat
+            </span>
+          </div>
         </button>
       </div>
       <div