Fix link to wrappers integrations from database page (#30731)

* Fix link to wrappers integrations from database page

* Update next.config redirects for webhooks and wrappers

* Fix link to webhooks

* Move the search and selectedCategory into useQueryState.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx

@@ -1,9 +1,10 @@
+import { Search } from 'lucide-react'
+import { parseAsString, useQueryState } from 'nuqs'
+
 import AlertError from 'components/ui/AlertError'
 import NoSearchResults from 'components/ui/NoSearchResults'
-import { Search } from 'lucide-react'
-import { useState } from 'react'
 import { buttonVariants, cn, Tabs_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { IntegrationCard, IntegrationLoadingCard } from './IntegrationCard'
 import { useInstalledIntegrations } from './useInstalledIntegrations'
@@ -11,8 +12,14 @@ import { useInstalledIntegrations } from './useInstalledIntegrations'
 type IntegrationCategory = 'all' | 'wrapper' | 'postgres_extensions' | 'custom'
 
 export const AvailableIntegrations = () => {
-  const [search, setSearch] = useState('')
-  const [selectedCategory, setSelectedCategory] = useState<IntegrationCategory>('all')
+  const [selectedCategory, setSelectedCategory] = useQueryState(
+    'category',
+    parseAsString.withDefault('all').withOptions({ clearOnDefault: true })
+  )
+  const [search, setSearch] = useQueryState(
+    'search',
+    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
+  )
 
   const { availableIntegrations, installedIntegrations, error, isError, isLoading, isSuccess } =
     useInstalledIntegrations()

apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx

@@ -112,7 +112,7 @@ export const generateDatabaseMenu = (
         {
           name: 'Wrappers',
           key: 'wrappers',
-          url: `/project/${ref}/integrations/wrappers`,
+          url: `/project/${ref}/integrations?category=wrapper`,
           rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
           items: [],
         },
@@ -121,7 +121,7 @@ export const generateDatabaseMenu = (
               {
                 name: 'Webhooks',
                 key: 'hooks',
-                url: `/project/${ref}/integrations/hooks`,
+                url: `/project/${ref}/integrations/webhooks/overview`,
                 rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
                 items: [],
               },

apps/studio/next.config.js

@@ -402,12 +402,12 @@ const nextConfig = {
       {
         permanent: true,
         source: '/project/:ref/database/webhooks',
-        destination: '/project/:ref/integrations/webhooks',
+        destination: '/project/:ref/integrations/webhooks/overview',
       },
       {
         permanent: true,
         source: '/project/:ref/database/wrappers',
-        destination: '/project/:ref/integrations/wrappers',
+        destination: '/project/:ref/integrations?category=wrapper',
       },
       {
         permanent: true,