From 164dcf3e92a87301ae25d25fe31757ae29b5aec2 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 27 Jan 2026 15:28:23 +0800
Subject: [PATCH] Adjust disabled state while project is paused (#42096)

* Adjust disabled state while project is INACTIVE

* merge master, unlock add ons page if paused
---
 .../interfaces/Settings/Addons/Addons.tsx     | 51 +++++++++++--------
 apps/studio/components/interfaces/Sidebar.tsx | 21 ++++----
 .../layouts/Integrations/layout.tsx           | 11 +---
 .../layouts/ProjectLayout/index.tsx           | 12 ++---
 .../SettingsMenu.utils.tsx                    | 10 ++++
 .../ui/ProductMenu/ProductMenuItem.tsx        | 36 +++++--------
 .../components/ui/ProductMenu/index.tsx       |  9 +---
 apps/studio/components/ui/ui.types.ts         |  1 -
 apps/studio/hooks/misc/useSelectedProject.ts  |  5 +-
 9 files changed, 75 insertions(+), 81 deletions(-)

diff --git a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx
index d3c260980c1..ac705165304 100644
--- a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx
@@ -250,11 +250,21 @@ export const Addons = () => {
                       title="Compute size has moved"
                       description="Compute size is now managed alongside Disk configuration on the new Compute and Disk page."
                       actions={
-                        <Button type="default" asChild>
-                          <Link href={`/project/${projectRef}/settings/compute-and-disk`}>
-                            Go to Compute and Disk
-                          </Link>
-                        </Button>
+                        <ProjectUpdateDisabledTooltip
+                          projectUpdateDisabled={projectUpdateDisabled}
+                          projectNotActive={!isProjectActive}
+                        >
+                          <Button
+                            asChild
+                            type="default"
+                            className="pointer-events-auto"
+                            disabled={projectUpdateDisabled || !isProjectActive}
+                          >
+                            <Link href={`/project/${projectRef}/settings/compute-and-disk`}>
+                              Go to Compute and Disk
+                            </Link>
+                          </Button>
+                        </ProjectUpdateDisabledTooltip>
                       }
                     />
 
@@ -393,24 +403,21 @@ export const Addons = () => {
                             ? 'Dedicated IPv4 address is enabled'
                             : 'Dedicated IPv4 address is not enabled'}
                         </p>
-                        <ButtonTooltip
-                          type="default"
-                          className="mt-2 pointer-events-auto"
-                          onClick={() => setPanel('ipv4')}
-                          disabled={
-                            !isProjectActive || projectUpdateDisabled || !(canUpdateIPv4 || ipv4)
-                          }
-                          tooltip={{
-                            content: {
-                              side: 'bottom',
-                              text: !(canUpdateIPv4 || ipv4)
-                                ? 'Temporarily disabled while we are migrating to IPv6, please check back later.'
-                                : undefined,
-                            },
-                          }}
+                        <ProjectUpdateDisabledTooltip
+                          projectUpdateDisabled={projectUpdateDisabled}
+                          projectNotActive={!isProjectActive}
                         >
-                          Change dedicated IPv4 address
-                        </ButtonTooltip>
+                          <Button
+                            type="default"
+                            className="mt-2 pointer-events-auto"
+                            onClick={() => setPanel('ipv4')}
+                            disabled={
+                              !isProjectActive || projectUpdateDisabled || !(canUpdateIPv4 || ipv4)
+                            }
+                          >
+                            Change dedicated IPv4 address
+                          </Button>
+                        </ProjectUpdateDisabledTooltip>
                       </div>
                     </div>
                   </ScaffoldSectionContent>
diff --git a/apps/studio/components/interfaces/Sidebar.tsx b/apps/studio/components/interfaces/Sidebar.tsx
index 757995ea243..321c961d158 100644
--- a/apps/studio/components/interfaces/Sidebar.tsx
+++ b/apps/studio/components/interfaces/Sidebar.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ComponentProps, ComponentPropsWithoutRef, FC, ReactNode, useEffect } from 'react'
 
+import { PROJECT_STATUS } from '@/lib/constants'
 import { LOCAL_STORAGE_KEYS, useFlag, useIsMFAEnabled, useParams } from 'common'
 import {
   generateOtherRoutes,
@@ -42,6 +43,7 @@ import {
   Sidebar as SidebarPrimitive,
   useSidebar,
 } from 'ui'
+import { Route } from '../ui/ui.types'
 import {
   useIsAPIDocsSidePanelEnabled,
   useUnifiedLogsPreview,
@@ -162,7 +164,7 @@ export function SideBarNavLink({
   disabled,
   ...props
 }: {
-  route: any
+  route: Route
   active?: boolean
   disabled?: boolean
   onClick?: () => void
@@ -228,6 +230,8 @@ const ProjectLinks = () => {
   const showReports = useIsFeatureEnabled('reports:all')
   const { mutate: sendEvent } = useSendEventMutation()
 
+  const isProjectActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
+
   const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled()
   const { isEnabled: isUnifiedLogsEnabled } = useUnifiedLogsPreview()
 
@@ -278,6 +282,7 @@ const ProjectLinks = () => {
         {toolRoutes.map((route, i) => (
           <SideBarNavLink
             key={`tools-routes-${i}`}
+            disabled={!isProjectActive}
             route={route}
             active={activeRoute === route.key}
           />
@@ -288,6 +293,7 @@ const ProjectLinks = () => {
         {productRoutes.map((route, i) => (
           <SideBarNavLink
             key={`product-routes-${i}`}
+            disabled={route.key !== 'functions' && !isProjectActive}
             route={route}
             active={activeRoute === route.key}
           />
@@ -326,33 +332,28 @@ const ProjectLinks = () => {
                     : route
                 }
                 active={activeRoute === route.key}
+                disabled={!isProjectActive}
                 onClick={handleApiClick}
               />
             )
           } else if (route.key === 'advisors') {
             return (
               <div className="relative" key={route.key}>
-                {ActiveDot(errorLints, securityLints)}
+                {isProjectActive && ActiveDot(errorLints, securityLints)}
                 <SideBarNavLink
                   key={`other-routes-${i}`}
                   route={route}
+                  disabled={!isProjectActive}
                   active={activeRoute === route.key}
                 />
               </div>
             )
-          } else if (route.key === 'logs') {
-            return (
-              <SideBarNavLink
-                key={`other-routes-${i}`}
-                route={route}
-                active={activeRoute === route.key}
-              />
-            )
           } else {
             return (
               <SideBarNavLink
                 key={`other-routes-${i}`}
                 route={route}
+                disabled={!isProjectActive}
                 active={activeRoute === route.key}
               />
             )
diff --git a/apps/studio/components/layouts/Integrations/layout.tsx b/apps/studio/components/layouts/Integrations/layout.tsx
index e3e3fad3f16..06110b1ce80 100644
--- a/apps/studio/components/layouts/Integrations/layout.tsx
+++ b/apps/studio/components/layouts/Integrations/layout.tsx
@@ -6,7 +6,7 @@ import { ProjectLayout } from 'components/layouts/ProjectLayout'
 import AlertError from 'components/ui/AlertError'
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
-import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem'
+import { ProductMenuItem } from 'components/ui/ProductMenu/ProductMenuItem'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { withAuth } from 'hooks/misc/withAuth'
@@ -88,14 +88,7 @@ const IntegrationsLayout = ({ children }: PropsWithChildren) => {
             {isSuccess && (
               <div>
                 {installedIntegrationItems.map((item) => (
-                  <ProductMenuItem
-                    key={item.key}
-                    url={item.url}
-                    name={item.name}
-                    icon={item.icon}
-                    isActive={page === item.key}
-                    label={item.label}
-                  />
+                  <ProductMenuItem key={item.key} isActive={page === item.key} item={item} />
                 ))}
               </div>
             )}
diff --git a/apps/studio/components/layouts/ProjectLayout/index.tsx b/apps/studio/components/layouts/ProjectLayout/index.tsx
index fc28847f15c..ebb3bc5e1cb 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.tsx
@@ -47,6 +47,7 @@ const routesToIgnoreDBConnection = [
   '/project/[ref]/database/backups/scheduled',
   '/project/[ref]/database/backups/pitr',
   '/project/[ref]/settings/addons',
+  '/project/[ref]/functions',
 ]
 
 const routesToIgnorePostgrestConnection = [
@@ -103,13 +104,6 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
     const organizationName = selectedOrganization?.name
 
     const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE
-    const showProductMenu = selectedProject
-      ? selectedProject.status === PROJECT_STATUS.ACTIVE_HEALTHY ||
-        (selectedProject.status === PROJECT_STATUS.COMING_UP &&
-          router.pathname.includes('/project/[ref]/settings')) ||
-        router.pathname.includes('/project/[ref]/branches') ||
-        router.pathname.includes('/project/[ref]/functions')
-      : true
 
     const ignorePausedState =
       router.pathname === '/project/[ref]' ||
@@ -140,7 +134,7 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
         <div className="flex flex-row h-full w-full">
           {/*  autoSaveId="project-layout" */}
           <ResizablePanelGroup direction="horizontal">
-            {showProductMenu && productMenu && (
+            {productMenu && (
               <ResizablePanel
                 order={1}
                 minSize={sidebarMinSizePercentage}
@@ -180,7 +174,7 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
                 )}
               </ResizablePanel>
             )}
-            {showProductMenu && productMenu && sideBarIsOpen && (
+            {productMenu && sideBarIsOpen && (
               <ResizableHandle
                 withHandle
                 disabled={resizableSidebar ? false : true}
diff --git a/apps/studio/components/layouts/ProjectSettingsLayout/SettingsMenu.utils.tsx b/apps/studio/components/layouts/ProjectSettingsLayout/SettingsMenu.utils.tsx
index e12cbc824a6..41f0be4aa73 100644
--- a/apps/studio/components/layouts/ProjectSettingsLayout/SettingsMenu.utils.tsx
+++ b/apps/studio/components/layouts/ProjectSettingsLayout/SettingsMenu.utils.tsx
@@ -35,6 +35,8 @@ export const generateSettingsMenu = (
       },
     ]
   }
+
+  const isProjectActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
   const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
   const buildingUrl = `/project/${ref}`
 
@@ -60,12 +62,14 @@ export const generateSettingsMenu = (
           key: 'compute-and-disk',
           url: `/project/${ref}/settings/compute-and-disk`,
           items: [],
+          disabled: !isProjectActive,
         },
         {
           name: 'Infrastructure',
           key: 'infrastructure',
           url: isProjectBuilding ? buildingUrl : `/project/${ref}/settings/infrastructure`,
           items: [],
+          disabled: !isProjectActive,
         },
 
         {
@@ -73,6 +77,7 @@ export const generateSettingsMenu = (
           key: 'integrations',
           url: `/project/${ref}/settings/integrations`,
           items: [],
+          disabled: !isProjectActive,
         },
 
         {
@@ -80,12 +85,14 @@ export const generateSettingsMenu = (
           key: 'api',
           url: isProjectBuilding ? buildingUrl : `/project/${ref}/settings/api`,
           items: [],
+          disabled: !isProjectActive,
         },
         {
           name: 'API Keys',
           key: 'api-keys',
           url: `/project/${ref}/settings/api-keys/new`,
           items: [],
+          disabled: !isProjectActive,
         },
         {
           name: 'JWT Keys',
@@ -94,6 +101,7 @@ export const generateSettingsMenu = (
             ? `/project/${ref}/settings/jwt`
             : `/project/${ref}/settings/jwt/signing-keys`,
           items: [],
+          disabled: !isProjectActive,
         },
 
         {
@@ -101,6 +109,7 @@ export const generateSettingsMenu = (
           key: `log-drains`,
           url: `/project/${ref}/settings/log-drains`,
           items: [],
+          disabled: !isProjectActive,
         },
         {
           name: 'Add Ons',
@@ -115,6 +124,7 @@ export const generateSettingsMenu = (
           items: [],
           rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
           label: 'Beta',
+          disabled: !isProjectActive,
         },
       ],
     },
diff --git a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
index 9c848e74e9b..2c56aaae93e 100644
--- a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
+++ b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
@@ -1,36 +1,26 @@
 import Link from 'next/link'
-import { ReactNode } from 'react'
 import { Badge, Button, Menu } from 'ui'
+import { ProductMenuGroupItem } from './ProductMenu.types'
 
 interface ProductMenuItemProps {
-  name: string | ReactNode
+  item: ProductMenuGroupItem
   isActive: boolean
-  isExternal?: boolean
-  icon?: ReactNode
-  rightIcon?: ReactNode
-  url?: string
   target?: '_blank' | '_self'
-  onClick?: () => void
-  textClassName?: string
   hoverText?: string
-  label?: string
+  onClick?: () => void
 }
 
-const ProductMenuItem = ({
-  name = '',
+export const ProductMenuItem = ({
+  item,
   isActive,
-  isExternal,
-  icon,
-  rightIcon,
-  url = '',
   target = '_self',
-  onClick,
-  textClassName = '',
   hoverText = '',
-  label,
+  onClick,
 }: ProductMenuItemProps) => {
+  const { name = '', url = '', icon, rightIcon, isExternal, label, disabled } = item
+
   const menuItem = (
-    <Menu.Item icon={icon} rounded active={isActive} onClick={onClick}>
+    <Menu.Item icon={icon} active={isActive} onClick={onClick}>
       <div className="flex w-full items-center justify-between gap-1">
         <div
           className="flex items-center gap-1 min-w-0 flex-1"
@@ -39,8 +29,8 @@ const ProductMenuItem = ({
           <span className="truncate flex-1 min-w-0">{name}</span>
           {label !== undefined && (
             <Badge
-              variant={label.toLowerCase() === 'new' ? 'success' : 'warning'}
               className="flex-shrink-0"
+              variant={label.toLowerCase() === 'new' ? 'success' : 'warning'}
             >
               {label}
             </Badge>
@@ -51,6 +41,10 @@ const ProductMenuItem = ({
     </Menu.Item>
   )
 
+  if (disabled) {
+    return <div className="opacity-50 pointer-events-none">{menuItem}</div>
+  }
+
   if (url) {
     if (isExternal) {
       return (
@@ -71,5 +65,3 @@ const ProductMenuItem = ({
 
   return menuItem
 }
-
-export default ProductMenuItem
diff --git a/apps/studio/components/ui/ProductMenu/index.tsx b/apps/studio/components/ui/ProductMenu/index.tsx
index 4f5612f7ee7..3ffec73783d 100644
--- a/apps/studio/components/ui/ProductMenu/index.tsx
+++ b/apps/studio/components/ui/ProductMenu/index.tsx
@@ -1,7 +1,7 @@
 import { Badge, Menu } from 'ui'
 
 import type { ProductMenuGroup } from './ProductMenu.types'
-import ProductMenuItem from './ProductMenuItem'
+import { ProductMenuItem } from './ProductMenuItem'
 
 interface ProductMenuProps {
   page?: string
@@ -35,14 +35,9 @@ export const ProductMenu = ({ page, menu }: ProductMenuProps) => {
                     return (
                       <ProductMenuItem
                         key={item.key}
-                        url={item.url}
-                        name={item.name}
-                        icon={item.icon}
-                        rightIcon={item.rightIcon}
+                        item={item}
                         isActive={isActive}
-                        isExternal={item.isExternal}
                         target={item.isExternal ? '_blank' : '_self'}
-                        label={item.label}
                       />
                     )
                   })}
diff --git a/apps/studio/components/ui/ui.types.ts b/apps/studio/components/ui/ui.types.ts
index be8f3f20a6f..a65fe787d60 100644
--- a/apps/studio/components/ui/ui.types.ts
+++ b/apps/studio/components/ui/ui.types.ts
@@ -7,6 +7,5 @@ export interface Route {
   link?: string
   disabled?: boolean
   linkElement?: ReactNode
-
   items?: any | Route[]
 }
diff --git a/apps/studio/hooks/misc/useSelectedProject.ts b/apps/studio/hooks/misc/useSelectedProject.ts
index 22ffd7df475..9829532f968 100644
--- a/apps/studio/hooks/misc/useSelectedProject.ts
+++ b/apps/studio/hooks/misc/useSelectedProject.ts
@@ -10,7 +10,10 @@ export function useSelectedProjectQuery({ enabled = true } = {}) {
     {
       enabled,
       select: (data) => {
-        return { ...data, parentRef: data.parent_project_ref ?? data.ref }
+        return {
+          ...data,
+          parentRef: data.parent_project_ref ?? data.ref,
+        }
       },
     }
   )