From d5341f37f915243971a2fdff6cec0eb7be6ca1d5 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Fri, 9 Oct 2026 17:23:37 +1100
Subject: [PATCH] chore(studio): use standard Badge for deprecated extensions
 (#51461)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

The deprecated indicator next to extensions like `pgjwt` on Database →
Extensions was a `ButtonTooltip` styled to look like a badge
(`variant="warning"`, triangle icon, `rounded-full`). That adds another
one-off badge-like control instead of using the shared `Badge`.

## Solution

Replace it with a warning `Badge` plus the same tooltip content (when
the extension will be removed).

| Before | After |
| --- | --- |
| <img width="356" height="114" alt="CleanShot 2026-10-09 at 10 38
08@2x"
src="https://github.com/user-attachments/assets/98a2356e-203e-4946-b399-63a53ea9804f"
/> | <img width="312" height="116" alt="CleanShot 2026-10-09 at 10 43
08@2x"
src="https://github.com/user-attachments/assets/ee9ff91d-79f6-4a50-b508-ebe602497cfe"
/> |

## Review instructions

1. Open Studio → Database → Extensions.
2. Find `pgjwt` (or another deprecated extension).
3. Confirm a warning `Deprecated` badge appears next to the name (no
triangle icon / pill button).
4. Hover (or focus) the badge and confirm the removal tooltip still
shows.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
---
 .../Database/Extensions/ExtensionRow.tsx      | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
index 99d18c684a9..2441c6da39a 100644
--- a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
@@ -1,16 +1,24 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { AlertTriangle, Book, Github, Loader2 } from 'lucide-react'
+import { Book, Github, Loader2 } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
 import { extensions } from 'shared-data'
 import { toast } from 'sonner'
-import { Button, Switch, TableCell, TableRow, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import {
+  Badge,
+  Button,
+  Switch,
+  TableCell,
+  TableRow,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
 
 import { EnableExtensionModal } from './EnableExtensionModal'
 import { EXTENSION_DISABLE_WARNINGS } from './Extensions.constants'
-import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 import { useDatabaseExtensionDisableMutation } from '@/data/database-extensions/database-extension-disable-mutation'
 import { DatabaseExtension } from '@/data/database-extensions/database-extensions-query'
 import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
@@ -67,18 +75,17 @@ export const ExtensionRow = ({ extension }: ExtensionRowProps) => {
               {extension.name}
             </span>
             {extensionMeta?.deprecated && extensionMeta?.deprecated.length > 0 && (
-              <ButtonTooltip
-                variant="warning"
-                icon={<AlertTriangle />}
-                className="rounded-full"
-                tooltip={{
-                  content: {
-                    text: `The extension is deprecated and will be removed in ${extensionMeta.deprecated.join(', ')}.`,
-                  },
-                }}
-              >
-                Deprecated
-              </ButtonTooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge variant="warning" className="cursor-default" tabIndex={0}>
+                    Deprecated
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  The extension is deprecated and will be removed in{' '}
+                  {extensionMeta.deprecated.join(', ')}
+                </TooltipContent>
+              </Tooltip>
             )}
           </div>
         </TableCell>