Clena up

apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetail.tsx

@@ -1,5 +1,4 @@
 import { ArrowUpRight, BookOpen, Gauge, Settings } from 'lucide-react'
-import { useRouter } from 'next/router'
 import { Button, cn } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
@@ -17,7 +16,6 @@ import { UnknownInterface } from '@/components/ui/UnknownInterface'
 export const centeredContentClass = 'mx-auto w-full max-w-6xl px-6 xl:px-10'
 
 export const MarketplaceDetail = () => {
-  const router = useRouter()
   const {
     ref,
     activeRoute,
@@ -32,7 +30,6 @@ export const MarketplaceDetail = () => {
     integrationStatus,
     isInstalled,
     installActionType,
-    wrappersTabHref,
     isAvailableLoading,
     isInstalledLoading,
     isIntegrationStatusLoading,
@@ -84,14 +81,7 @@ export const MarketplaceDetail = () => {
           />
         )
       case 'add-wrapper':
-        return (
-          <AddWrapperButton
-            variant="primary"
-            onClick={() => {
-              if (wrappersTabHref) router.push(`${wrappersTabHref}?new=true`)
-            }}
-          />
-        )
+        return <AddWrapperButton variant="primary" />
       case 'installed':
         return (
           <Button variant="outline" disabled>

apps/studio/components/interfaces/Integrations/Wrappers/AddWrapperButton.tsx

@@ -1,4 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useParams } from 'common'
+import Link from 'next/link'
 import { useMemo } from 'react'
 
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
@@ -10,10 +12,11 @@ const WRAPPER_REQUIRED_EXTENSION_NAMES = ['wrappers', 'supabase_vault']
 
 interface AddWrapperButtonProps {
   variant?: 'default' | 'primary' | 'outline'
-  onClick: () => void
 }
 
-export const AddWrapperButton = ({ variant = 'default', onClick }: AddWrapperButtonProps) => {
+export const AddWrapperButton = ({ variant = 'default' }: AddWrapperButtonProps) => {
+  const { ref, id } = useParams()
+
   const { can: canCreateWrapper } = useAsyncCheckPermissions(
     PermissionAction.TENANT_SQL_ADMIN_WRITE,
     'wrappers'
@@ -33,20 +36,27 @@ export const AddWrapperButton = ({ variant = 'default', onClick }: AddWrapperBut
     [extensions]
   )
 
+  const label = needsExtensions ? 'Install wrapper' : 'Add new wrapper'
+
   return (
     <ButtonTooltip
+      asChild={canCreateWrapper}
       variant={variant}
-      onClick={onClick}
       disabled={!canCreateWrapper}
       tooltip={{
         content: {
+          side: 'bottom',
           text: !canCreateWrapper
             ? 'You need additional permissions to create a foreign data wrapper'
             : undefined,
         },
       }}
     >
-      {needsExtensions ? 'Install wrapper' : 'Add new wrapper'}
+      {canCreateWrapper ? (
+        <Link href={`/project/${ref}/integrations/${id}/wrappers?new=true`}>{label}</Link>
+      ) : (
+        label
+      )}
     </ButtonTooltip>
   )
 }

apps/studio/components/interfaces/Integrations/Wrappers/OverviewTab.tsx

@@ -6,6 +6,7 @@ import { Admonition } from 'ui-patterns/Admonition'
 import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
 import { RequiredExtensionsSection } from '../Integration/RequiredExtensionsSection'
 import { useAvailableIntegrations } from '../Landing/useAvailableIntegrations'
+import { AddWrapperButton } from './AddWrapperButton'
 import { WRAPPERS } from './Wrappers.constants'
 import { WrapperTable } from './WrapperTable'
 import { useIsMarketplaceEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
@@ -15,15 +16,11 @@ import { useDatabaseExtensionsQuery } from '@/data/database-extensions/database-
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 
 const WrapperOverviewContent = () => {
-  const { id, ref } = useParams()
-
   return (
     <div className="flex flex-col gap-y-5 max-w-5xl">
       <div className="flex items-center justify-between">
         <p>Recent wrappers</p>
-        <Button asChild variant="primary">
-          <Link href={`/project/${ref}/integrations/${id}/wrappers?new=true`}>Add new wrapper</Link>
-        </Button>
+        <AddWrapperButton variant="primary" />
       </div>
       <WrapperTable />
     </div>

apps/studio/components/interfaces/Integrations/Wrappers/WrappersTab.tsx

@@ -81,7 +81,7 @@ export const WrappersTab = () => {
             <p className="text-sm text-foreground-light">
               No {wrapperMeta.label} wrappers have been installed
             </p>
-            <AddWrapperButton onClick={() => setIsCreating(true)} />
+            <AddWrapperButton />
           </div>
         </div>
       ) : (
@@ -89,14 +89,14 @@ export const WrappersTab = () => {
           {!isMarketplaceEnabled && (
             <div className="max-w-5xl flex items-center gap-x-2 justify-end mb-4">
               <DocsButton href={wrapperMeta.docsUrl} />
-              <AddWrapperButton variant="primary" onClick={() => setIsCreating(true)} />
+              <AddWrapperButton variant="primary" />
             </div>
           )}
           <WrapperTable />
         </>
       )}
 
-      <Sheet open={!!isCreating} onOpenChange={handleOpenChange}>
+      <Sheet open={!!isCreating && canCreateWrapper} onOpenChange={handleOpenChange}>
         <SheetContent size="lg">
           {wrapperMeta && CreateWrapperSheetComponent && (
             <CreateWrapperSheetComponent