Refactor ApiKeysTableRow and utils for improved API key ID handling

- Integrated the getApiKeyIdBadgeLabel function into the ApiKeysTableRow for better ID display.
- Updated ApiKeyAddedCell to handle undefined createdBy email more gracefully.
- Enhanced tooltip interactions for improved user experience.

These changes streamline the API key management interface and enhance the clarity of API key information.

Author: sarimrmalik

src/features/dashboard/settings/keys/api-keys-table-row.tsx

@@ -18,7 +18,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/ui/primitives/tooltip'
-import { getLastUsedLabel } from './api-keys-utils'
+import { getApiKeyIdBadgeLabel, getLastUsedLabel } from './api-keys-utils'
 import { DeleteApiKeyDialog } from './delete-api-key-dialog'
 
 interface ApiKeysTableRowProps {
@@ -63,11 +63,6 @@ const ApiKeyNameCell = ({ name }: ApiKeyNameCellProps) => (
   </TableCell>
 )
 
-const getApiKeyIdBadgeLabel = (id: string) => {
-  if (id.length <= 10) return id
-  return `${id.slice(0, 6)}...${id.slice(-4)}`
-}
-
 const ApiKeyIdBadge = ({ id }: ApiKeyIdBadgeProps) => {
   const posthog = usePostHog()
   const { toast } = useToast()
@@ -115,7 +110,7 @@ const ApiKeyLastUsedCell = ({
     {lastUsedAt ? (
       <Tooltip>
         <TooltipTrigger asChild>
-          <span className="cursor-default border-b border-dotted border-fg-tertiary/40">
+          <span className="cursor-default">
             {lastUsedLabel}
           </span>
         </TooltipTrigger>
@@ -135,48 +130,52 @@ const ApiKeyAddedCell = ({
   isCliKey,
   keyName,
   onDelete,
-}: ApiKeyAddedCellProps) => (
-  <TableCell className="pl-3 pr-0 py-2 text-left text-sm text-fg-tertiary">
-    <div className="flex items-center gap-6 justify-between">
-      <span className="block w-[92px] shrink-0 whitespace-nowrap">
-        {addedDate}
-      </span>
-      <div className="flex items-center gap-6">
-        {isCliKey ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="text-fg-tertiary flex size-5 shrink-0 items-center justify-center">
-                <E2BLogo className="size-5" />
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="top">Added through E2B CLI</TooltipContent>
-          </Tooltip>
-        ) : createdBy ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="shrink-0">
-                <UserAvatar email={createdBy.email} />
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="top">{createdBy.email}</TooltipContent>
-          </Tooltip>
-        ) : (
-          <span className="size-5 shrink-0" aria-hidden />
-        )}
-        <Button
-          type="button"
-          variant="ghost"
-          size="slate"
-          className="text-fg-tertiary hover:text-fg shrink-0 active:translate-y-0"
-          aria-label={`Delete ${keyName ?? 'API key'}`}
-          onClick={onDelete}
-        >
-          <TrashIcon className="size-4" />
-        </Button>
+}: ApiKeyAddedCellProps) => {
+  const createdByEmail = createdBy?.email?.trim() || 'Unknown user'
+
+  return (
+    <TableCell className="pl-3 pr-0 py-2 text-left text-sm text-fg-tertiary">
+      <div className="flex items-center gap-6 justify-between">
+        <span className="block w-[92px] shrink-0 whitespace-nowrap">
+          {addedDate}
+        </span>
+        <div className="flex items-center gap-6">
+          {isCliKey ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="text-fg-tertiary flex size-5 shrink-0 items-center justify-center">
+                  <E2BLogo className="size-5" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="top">Added through E2B CLI</TooltipContent>
+            </Tooltip>
+          ) : createdBy ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="cursor-default shrink-0">
+                  <UserAvatar email={createdByEmail} />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="top">{createdByEmail}</TooltipContent>
+            </Tooltip>
+          ) : (
+            <span className="size-5 shrink-0" aria-hidden />
+          )}
+          <Button
+            type="button"
+            variant="ghost"
+            size="slate"
+            className="text-fg-tertiary hover:text-fg shrink-0 active:translate-y-0"
+            aria-label={`Delete ${keyName ?? 'API key'}`}
+            onClick={onDelete}
+          >
+            <TrashIcon className="size-4" />
+          </Button>
+        </div>
       </div>
-    </div>
-  </TableCell>
-)
+    </TableCell>
+  )
+}
 
 export const ApiKeysTableRow = ({ apiKey, teamSlug }: ApiKeysTableRowProps) => {
   const [deleteOpen, setDeleteOpen] = useState(false)

src/features/dashboard/settings/keys/api-keys-utils.ts

@@ -8,6 +8,12 @@ export const getMaskedIdSearchString = (apiKey: TeamAPIKey): string => {
   return `${prefix}${maskedValuePrefix}...${maskedValueSuffix}`.toLowerCase()
 }
 
+/** Builds the visible ID badge label; e.g. `"e2b_c28e178eecf2"` -> `"e2b_c2...ecf2"` */
+export const getApiKeyIdBadgeLabel = (id: string): string => {
+  if (id.length <= 10) return id
+  return `${id.slice(0, 6)}...${id.slice(-4)}`
+}
+
 /** Returns true when the key name or masked id contains the trimmed query (case-insensitive). */
 export const matchesApiKeySearch = (
   apiKey: TeamAPIKey,
@@ -16,6 +22,8 @@ export const matchesApiKeySearch = (
   const q = query.trim().toLowerCase()
   if (!q) return true
   if (apiKey.name.toLowerCase().includes(q)) return true
+  if (apiKey.id.toLowerCase().includes(q)) return true
+  if (getApiKeyIdBadgeLabel(apiKey.id).toLowerCase().includes(q)) return true
   return getMaskedIdSearchString(apiKey).includes(q)
 }