From e78834e9464bcc3880a645c9c2471f77dec7fdac Mon Sep 17 00:00:00 2001
From: James Gatz <jamesgatzos@gmail.com>
Date: Tue, 19 Dec 2023 12:08:08 +0100
Subject: [PATCH] fix clickable area for links inside breadcrumbs (#6934)

---
 packages/insomnia/src/ui/routes/debug.tsx     | 15 +++++++--------
 packages/insomnia/src/ui/routes/design.tsx    | 15 +++++++--------
 packages/insomnia/src/ui/routes/unit-test.tsx |  9 ++++-----
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx
index 18e807506..b64fb26df 100644
--- a/packages/insomnia/src/ui/routes/debug.tsx
+++ b/packages/insomnia/src/ui/routes/debug.tsx
@@ -10,7 +10,6 @@ import {
   GridList,
   GridListItem,
   Input,
-  Link,
   ListBox,
   ListBoxItem,
   Menu,
@@ -641,13 +640,13 @@ export const Debug: FC = () => {
           <div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
             <Breadcrumbs className='flex flex-wrap list-none items-center m-0 p-0 gap-2 pb-[--padding-sm] border-b border-solid border-[--hl-sm] font-bold w-full'>
               <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
-                <Link data-testid="project" className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-                  <NavLink
-                    to={`/organization/${organizationId}/project/${activeProject._id}`}
-                  >
-                    <Icon className='text-xs' icon="chevron-left" />
-                  </NavLink>
-                </Link>
+                <NavLink
+                  data-testid="project"
+                  className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  to={`/organization/${organizationId}/project/${activeProject._id}`}
+                >
+                  <Icon className='text-xs' icon="chevron-left" />
+                </NavLink>
                 <span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />
               </Breadcrumb>
               <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
diff --git a/packages/insomnia/src/ui/routes/design.tsx b/packages/insomnia/src/ui/routes/design.tsx
index 7d69a8d6b..0880c9915 100644
--- a/packages/insomnia/src/ui/routes/design.tsx
+++ b/packages/insomnia/src/ui/routes/design.tsx
@@ -20,7 +20,6 @@ import {
   GridList,
   GridListItem,
   Heading,
-  Link,
   ListBox,
   ListBoxItem,
   Menu,
@@ -397,13 +396,13 @@ const Design: FC = () => {
           <div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
             <Breadcrumbs className='flex flex-wrap list-none items-center m-0 p-0 gap-2 pb-[--padding-sm] border-b border-solid border-[--hl-sm] font-bold w-full'>
               <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
-                <Link data-testid="project" className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-                  <NavLink
-                    to={`/organization/${organizationId}/project/${activeProject._id}`}
-                  >
-                    <Icon className='text-xs' icon="chevron-left" />
-                  </NavLink>
-                </Link>
+                <NavLink
+                  data-testid="project"
+                  className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  to={`/organization/${organizationId}/project/${activeProject._id}`}
+                >
+                  <Icon className='text-xs' icon="chevron-left" />
+                </NavLink>
                 <span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />
               </Breadcrumb>
               <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
diff --git a/packages/insomnia/src/ui/routes/unit-test.tsx b/packages/insomnia/src/ui/routes/unit-test.tsx
index 71e0abdd5..b62b8e03d 100644
--- a/packages/insomnia/src/ui/routes/unit-test.tsx
+++ b/packages/insomnia/src/ui/routes/unit-test.tsx
@@ -6,7 +6,6 @@ import {
   Button,
   GridList,
   Heading,
-  Link,
   ListBox,
   ListBoxItem,
   Menu,
@@ -185,17 +184,17 @@ const TestRoute: FC = () => {
           <div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
             <Breadcrumbs className='flex flex-wrap list-none items-center m-0 p-0 gap-2 pb-[--padding-sm] border-b border-solid border-[--hl-sm] font-bold w-full'>
               <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
-              <Link data-testid="project" className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
                 <NavLink
+                  data-testid="project"
+                  className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
                   to={`/organization/${organizationId}/project/${activeProject._id}`}
                 >
                   <Icon className='text-xs' icon="chevron-left" />
                 </NavLink>
-              </Link>
-              <span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />
+                <span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />
               </Breadcrumb>
               <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
-              <WorkspaceDropdown />
+                <WorkspaceDropdown />
               </Breadcrumb>
             </Breadcrumbs>
             <div className="flex w-full items-center gap-2 justify-between">