Add labels to wrappers and vault menu options

studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts

@@ -20,14 +20,12 @@ export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => {
           key: 'triggers',
           url: `/project/${ref}/database/triggers`,
           items: [],
-          isPreview: false,
         },
         {
           name: 'Functions',
           key: 'functions',
           url: `/project/${ref}/database/functions`,
           items: [],
-          isPreview: false,
         },
         {
           name: 'Extensions',
@@ -35,16 +33,6 @@ export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => {
           url: `/project/${ref}/database/extensions`,
           items: [],
         },
-        ...(foreignDataWrappersEnabled
-          ? [
-              {
-                name: 'Wrappers',
-                key: 'wrappers',
-                url: `/project/${ref}/database/wrappers`,
-                items: [],
-              },
-            ]
-          : []),
         { name: 'Roles', key: 'roles', url: `/project/${ref}/database/roles`, items: [] },
         {
           name: 'Replication',
@@ -59,7 +47,18 @@ export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => {
                 key: 'hooks',
                 url: `/project/${ref}/database/hooks`,
                 items: [],
-                isPreview: true,
+                label: 'ALPHA',
+              },
+            ]
+          : []),
+        ...(foreignDataWrappersEnabled
+          ? [
+              {
+                name: 'Wrappers',
+                key: 'wrappers',
+                url: `/project/${ref}/database/wrappers`,
+                items: [],
+                label: 'ALPHA',
               },
             ]
           : []),

studio/components/layouts/SettingsLayout/SettingsMenu.utils.ts

@@ -58,6 +58,7 @@ export const generateSettingsMenu = (ref: string, project?: ProjectBase): Produc
                 key: 'vault',
                 url: isProjectBuilding ? buildingUrl : `/project/${ref}/settings/vault/secrets`,
                 items: [],
+                label: 'BETA',
               },
             ]
           : []),

studio/components/ui/ProductMenu/ProductMenu.tsx

@@ -37,7 +37,7 @@ const ProductMenu: FC<Props> = ({ page, menu }) => {
                       isActive={page === item.key}
                       isExternal={item.isExternal}
                       target={item.isExternal ? '_blank' : '_self'}
-                      isPreview={item.isPreview}
+                      label={item.label}
                     />
                   ))}
                 </div>

studio/components/ui/ProductMenu/ProductMenu.types.ts

@@ -14,5 +14,5 @@ export interface ProductMenuGroupItem {
   icon?: ReactNode
   isExternal?: boolean
   disabled?: boolean
-  isPreview?: boolean
+  label?: string
 }

studio/components/ui/ProductMenu/ProductMenuItem.tsx

@@ -13,7 +13,7 @@ interface Props {
   onClick?: () => void
   textClassName?: string
   hoverText?: string
-  isPreview?: boolean
+  label?: string
 }
 
 const ProductMenuItem: FC<Props> = ({
@@ -27,7 +27,7 @@ const ProductMenuItem: FC<Props> = ({
   onClick,
   textClassName = '',
   hoverText = '',
-  isPreview = false,
+  label,
 }) => {
   const menuItem = (
     <Menu.Item icon={icon} rounded active={isActive} onClick={onClick}>
@@ -37,8 +37,8 @@ const ProductMenuItem: FC<Props> = ({
           className={'flex items-center gap-2 truncate ' + textClassName}
         >
           {name}{' '}
-          {isPreview && (
-            <span className="uppercase text-orange-800 text-xs font-normal">Alpha</span>
+          {label !== undefined && (
+            <span className="text-orange-800 text-xs font-normal">{label}</span>
           )}
         </span>
         {action}