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={ - + + + } /> @@ -393,24 +403,21 @@ export const Addons = () => { ? 'Dedicated IPv4 address is enabled' : 'Dedicated IPv4 address is not enabled'}

- 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, - }, - }} + - Change dedicated IPv4 address - + + 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) => ( @@ -288,6 +293,7 @@ const ProjectLinks = () => { {productRoutes.map((route, i) => ( @@ -326,33 +332,28 @@ const ProjectLinks = () => { : route } active={activeRoute === route.key} + disabled={!isProjectActive} onClick={handleApiClick} /> ) } else if (route.key === 'advisors') { return (
- {ActiveDot(errorLints, securityLints)} + {isProjectActive && ActiveDot(errorLints, securityLints)}
) - } else if (route.key === 'logs') { - return ( - - ) } else { return ( ) 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 && (
{installedIntegrationItems.map((item) => ( - + ))}
)} 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 {/* autoSaveId="project-layout" */} - {showProductMenu && productMenu && ( + {productMenu && ( )} - {showProductMenu && productMenu && sideBarIsOpen && ( + {productMenu && sideBarIsOpen && ( , 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 = ( - +
{name} {label !== undefined && ( {label} @@ -51,6 +41,10 @@ const ProductMenuItem = ({ ) + if (disabled) { + return
{menuItem}
+ } + 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 ( ) })} 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, + } }, } )