From 35e69d32f27aedbbc66aa9a25538c41c1d0618b3 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:16:47 +0200
Subject: [PATCH] fix(dashboard): Remove token copy from badge (#9508)

**What**
- Removes the <Copy /> wrapper from the Token badge in API key tables.
- The usage of copy spawned to issues: the click was being propagated despite stopping propagation causing navigation to the API keys detail page, the Copy acts as a <a /> tag when it's a child of a <Link />, escaping react-router-dom and doing a "hard" navigate to the next page.

Fixes CC-576
---
 .../api-key-general-section.tsx               | 12 +++-----
 .../use-api-key-management-table-columns.tsx  | 28 +++----------------
 2 files changed, 8 insertions(+), 32 deletions(-)

diff --git a/packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-general-section/api-key-general-section.tsx b/packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-general-section/api-key-general-section.tsx
index 89e8fa9db1..2658b586d8 100644
--- a/packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-general-section/api-key-general-section.tsx
+++ b/packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-general-section/api-key-general-section.tsx
@@ -154,15 +154,11 @@ export const ApiKeyGeneralSection = ({ apiKey }: ApiKeyGeneralSectionProps) => {
           {t("fields.key")}
         </Text>
         {apiKey.type === "secret" ? (
-          <Badge size="2xsmall" className="w-fit">
-            {prettifyRedactedToken(apiKey.redacted)}
-          </Badge>
+          <Badge size="2xsmall">{prettifyRedactedToken(apiKey.redacted)}</Badge>
         ) : (
-          <Copy asChild content={apiKey.token}>
-            <Badge size="2xsmall" className="w-fit max-w-40 cursor-pointer">
-              <Text size="xsmall" leading="compact" className="truncate">
-                {prettifyRedactedToken(apiKey.redacted)}
-              </Text>
+          <Copy asChild content={apiKey.token} className="cursor-pointer">
+            <Badge size="2xsmall" className="text-ui-tag-neutral-text">
+              {prettifyRedactedToken(apiKey.redacted)}
             </Badge>
           </Copy>
         )}
diff --git a/packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/use-api-key-management-table-columns.tsx b/packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/use-api-key-management-table-columns.tsx
index d0f2a833c5..fc7aaac47a 100644
--- a/packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/use-api-key-management-table-columns.tsx
+++ b/packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/use-api-key-management-table-columns.tsx
@@ -1,7 +1,7 @@
 import { AdminApiKeyResponse } from "@medusajs/types"
-import { Badge, Copy, Text } from "@medusajs/ui"
+import { Badge } from "@medusajs/ui"
 import { createColumnHelper } from "@tanstack/react-table"
-import { MouseEvent, useMemo } from "react"
+import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
 import { DateCell } from "../../../../../components/table/table-cells/common/date-cell"
@@ -31,29 +31,9 @@ export const useApiKeyManagementTableColumns = () => {
       }),
       columnHelper.accessor("redacted", {
         header: "Token",
-        cell: ({ getValue, row }) => {
+        cell: ({ getValue }) => {
           const token = getValue()
-          const isSecret = row.original.type === "secret"
-
-          if (isSecret) {
-            return <Badge size="2xsmall">{prettifyRedactedToken(token)}</Badge>
-          }
-
-          const clickHandler = (e: MouseEvent) => e.stopPropagation()
-
-          return (
-            <Badge size="2xsmall" className="max-w-40" onClick={clickHandler}>
-              <Copy
-                content={row.original.token}
-                className="text-ui-fg-subtle"
-                asChild
-              >
-                <Text size="xsmall" leading="compact" className="truncate">
-                  {prettifyRedactedToken(token)}
-                </Text>
-              </Copy>
-            </Badge>
-          )
+          return <Badge size="2xsmall">{prettifyRedactedToken(token)}</Badge>
         },
       }),
       columnHelper.accessor("type", {