fix url query breaking active tab (#25953)

* fix

* rm unused arg

* forwardRef NavMenuItem

apps/studio/components/layouts/OrganizationLayout.tsx

@@ -9,10 +9,12 @@ import { ScaffoldContainer, ScaffoldDivider, ScaffoldHeader, ScaffoldTitle } fro
 import SettingsLayout from './SettingsLayout/SettingsLayout'
 import Link from 'next/link'
 import { useOrgSubscriptionQuery } from '../../data/subscriptions/org-subscription-query'
+import { useCurrentPath } from 'hooks/misc/useCurrentPath'
 
 const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
   const selectedOrganization = useSelectedOrganization()
   const router = useRouter()
+  const currentPath = useCurrentPath()
   const { slug } = useParams()
 
   const invoicesEnabledOnProfileLevel = useIsFeatureEnabled('billing:invoices')
@@ -80,7 +82,7 @@ const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
           </ScaffoldTitle>
           <NavMenu className="border-none" aria-label="Organization menu navigation">
             {filteredNavMenuItems.map((item) => (
-              <NavMenuItem key={item.label} active={item.href === router.asPath}>
+              <NavMenuItem key={item.label} active={currentPath === item.href}>
                 <Link href={item.href}>{item.label}</Link>
               </NavMenuItem>
             ))}

apps/studio/hooks/misc/useCurrentPath.tsx

@@ -0,0 +1,14 @@
+import { useRouter } from 'next/router'
+
+export const useCurrentPath = () => {
+  const router = useRouter()
+
+  if (!router.isReady) {
+    return ''
+  }
+
+  const pathWithQuery = router.asPath
+  const currentPath = pathWithQuery.split('?')[0]
+
+  return currentPath
+}

packages/ui/src/components/NavMenu/index.tsx

@@ -20,24 +20,26 @@ export const NavMenu = forwardRef<HTMLDivElement, NavMenuProps>(
   }
 )
 
-export const NavMenuItem = ({
-  children,
-  className,
-  active,
-  ...props
-}: PropsWithChildren<{
-  className?: string
-  active: boolean
-}>) => (
-  <li
-    aria-selected={active ? 'true' : 'false'}
-    data-state={active ? 'active' : 'inactive'}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent *:py-1.5',
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </li>
+export const NavMenuItem = forwardRef(
+  ({
+    children,
+    className,
+    active,
+    ...props
+  }: PropsWithChildren<{
+    className?: string
+    active: boolean
+  }>) => (
+    <li
+      aria-selected={active ? 'true' : 'false'}
+      data-state={active ? 'active' : 'inactive'}
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent *:py-1.5',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </li>
+  )
 )