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
This commit is contained in:
Kasper Fabricius Kristensen
2024-10-09 13:16:47 +02:00
committed by GitHub
parent 3298cd3fd2
commit 35e69d32f2
2 changed files with 8 additions and 32 deletions

View File

@@ -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>
)}

View File

@@ -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", {