From 04ec8e758f33492c9f03ed8282422f5cc2dad048 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:34:11 +0200
Subject: [PATCH] fix(dashboard): Add safe zone around link Table rows (#8058)

**What**
- After adding Table rows as links there was an issue where clicking close to a Checkbox in a row would click the link. This PR adds a safe zone around the Checkboxes, so you don't end up navigating when trying to select a row.

![image](https://github.com/medusajs/medusa/assets/45367945/7091d6d5-665d-41c7-8b2b-63244fef73b2)

RESOLVES CORE-2566
---
 .../data-table-root/data-table-root.tsx       | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx b/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
index 99ebdf4674..4eb520bb6b 100644
--- a/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
+++ b/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
@@ -140,7 +140,7 @@ export const DataTableRoot = <TData,>({
                   <Table.Row
                     key={headerGroup.id}
                     className={clx({
-                      "border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
+                      "relative border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
                         hasActions,
                       "[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap":
                         hasSelect,
@@ -171,7 +171,7 @@ export const DataTableRoot = <TData,>({
                               : undefined,
                           }}
                           className={clx({
-                            "bg-ui-bg-base sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
+                            "bg-ui-bg-base sticky inset-y-0 left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyHeader,
                             "left-[68px]":
                               isStickyHeader && hasSelect && !isSelectHeader,
@@ -206,7 +206,7 @@ export const DataTableRoot = <TData,>({
                     key={row.id}
                     data-selected={row.getIsSelected()}
                     className={clx(
-                      "transition-fg group/row [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                      "transition-fg group/row group relative [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
                       "has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover",
                       {
                         "bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover": isOdd,
@@ -241,23 +241,27 @@ export const DataTableRoot = <TData,>({
                           ? row.depth * 14 + 24
                           : undefined
 
+                      const hasLeftOfsset =
+                        isStickyCell && hasSelect && !isSelectCell
+
                       const Inner = flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()
                       )
 
-                      const isTabableLink = index === 0 && !!to
+                      const isTabableLink = isFirstCell && !!to
+                      const shouldRenderAsLink = !!to && !isSelectCell
 
                       return (
                         <Table.Cell
                           key={cell.id}
                           className={clx({
-                            "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
+                            "!pl-0 !pr-0": shouldRenderAsLink,
+                            "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg group-has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky inset-y-0 left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyCell,
                             "bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover":
                               isOdd && isStickyCell,
-                            "left-[68px]":
-                              isStickyCell && hasSelect && !isSelectCell,
+                            "bottom-0 left-[68px] top-0": hasLeftOfsset,
                             "after:bg-ui-border-base":
                               showStickyBorder && isStickyCell && !isSelectCell,
                             "!bg-ui-bg-disabled !hover:bg-ui-bg-disabled":
@@ -269,14 +273,23 @@ export const DataTableRoot = <TData,>({
                               : undefined,
                           }}
                         >
-                          {to ? (
+                          {shouldRenderAsLink ? (
                             <Link
                               to={to}
-                              className="outline-none"
+                              className="size-full outline-none"
                               data-row-link
                               tabIndex={isTabableLink ? 0 : -1}
                             >
-                              {Inner}
+                              <div
+                                className={clx(
+                                  "flex size-full items-center pr-6",
+                                  {
+                                    "pl-6": isTabableLink && !hasLeftOfsset,
+                                  }
+                                )}
+                              >
+                                {Inner}
+                              </div>
                             </Link>
                           ) : (
                             Inner