Merge pull request #12908 from smans-akamai/hotfix/UIE-9247

hotfix: [UIE-9247] - DBaaS - Display Beta chip for VPC fields and update related documentation link

Author: dwiley-akamai

packages/manager/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2025-09-25] - v1.151.1
+
+### Added:
+
+- DBaaS - Display Beta chip for VPC fields and update related documentation link
+
 ## [2025-09-23] - v1.151.0
 
 ### Added:

packages/manager/package.json

@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.151.0",
+  "version": "1.151.1",
   "private": true,
   "type": "module",
   "bugs": {

packages/manager/src/dev-tools/FeatureFlagTool.tsx

@@ -46,6 +46,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'databaseResize', label: 'Database Resize' },
   { flag: 'databaseAdvancedConfig', label: 'Database Advanced Config' },
   { flag: 'databaseVpc', label: 'Database VPC' },
+  { flag: 'databaseVpcBeta', label: 'Database VPC Beta' },
   { flag: 'databasePremium', label: 'Database Premium' },
   {
     flag: 'databaseRestrictPlanResize',

packages/manager/src/featureFlags.ts

@@ -168,6 +168,7 @@ export interface Flags {
   databaseRestrictPlanResize: boolean;
   databases: boolean;
   databaseVpc: boolean;
+  databaseVpcBeta: boolean;
   dbaasV2: BetaFeatureFlag;
   dbaasV2MonitorMetrics: BetaFeatureFlag;
   disableLargestGbPlans: boolean;

packages/manager/src/features/Databases/DatabaseCreate/DatabaseVPCSelector.tsx

@@ -1,6 +1,7 @@
 import { useAllVPCsQuery, useRegionQuery } from '@linode/queries';
 import {
   Autocomplete,
+  BetaChip,
   Box,
   Checkbox,
   Notice,
@@ -10,6 +11,7 @@ import {
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
+import { useFlags } from 'src/hooks/useFlags';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { MANAGE_NETWORKING_LEARN_MORE_LINK } from '../constants';
@@ -40,6 +42,7 @@ export const DatabaseVPCSelector = (props: DatabaseVPCSelectorProps) => {
     privateNetworkValues,
   } = props;
 
+  const flags = useFlags();
   const isCreate = mode === 'create';
   const { data: selectedRegion } = useRegionQuery(selectedRegionId);
   const regionSupportsVPCs = selectedRegion?.capabilities.includes('VPCs');
@@ -123,19 +126,24 @@ export const DatabaseVPCSelector = (props: DatabaseVPCSelectorProps) => {
 
   return (
     <>
-      <Typography
+      <Box
         sx={(theme: Theme) => ({
+          display: 'flex',
           marginTop: theme.spacingFunction(20),
           marginBottom: theme.spacingFunction(4),
         })}
-        variant="h3"
       >
-        Assign a VPC
-      </Typography>
+        <Typography variant="h3">Assign a VPC</Typography>
+        {flags.databaseVpcBeta && <BetaChip />}
+      </Box>
 
       <Typography>
         Assign this cluster to an existing VPC.{' '}
-        <Link to={MANAGE_NETWORKING_LEARN_MORE_LINK}>Learn more.</Link>
+        <Link
+          to={`${MANAGE_NETWORKING_LEARN_MORE_LINK + (flags.databaseVpcBeta ? '-beta' : '')}`}
+        >
+          Learn more.
+        </Link>
       </Typography>
       <Box style={{ display: 'flex' }}>
         <Autocomplete

packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworking.tsx

@@ -1,9 +1,19 @@
 import { useAllVPCsQuery } from '@linode/queries';
-import { Button, CircleProgress, ErrorState, Typography } from '@linode/ui';
+import {
+  BetaChip,
+  Button,
+  CircleProgress,
+  ErrorState,
+  Typography,
+} from '@linode/ui';
 import { Grid } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
+import { Link } from 'src/components/Link';
+import { useFlags } from 'src/hooks/useFlags';
+
+import { MANAGE_NETWORKING_LEARN_MORE_LINK } from '../../constants';
 import { getReadOnlyHost } from '../../utilities';
 import {
   StyledGridContainer,
@@ -41,6 +51,7 @@ export const DatabaseManageNetworking = ({ database }: Props) => {
     },
     sectionTitle: {
       marginBottom: '0.25rem',
+      display: 'flex',
     },
     sectionTitleAndText: {
       width: '100%',
@@ -59,6 +70,7 @@ export const DatabaseManageNetworking = ({ database }: Props) => {
     },
   }));
 
+  const flags = useFlags();
   const { classes } = useStyles();
   const [isManageNetworkingDrawerOpen, setIsManageNetworkingDrawerOpen] =
     React.useState(false);
@@ -118,9 +130,15 @@ export const DatabaseManageNetworking = ({ database }: Props) => {
         <div className={classes.sectionTitleAndText}>
           <div className={classes.sectionTitle}>
             <Typography variant="h3">Manage Networking</Typography>
+            {flags.databaseVpcBeta && <BetaChip />}
           </div>
           <Typography sx={{ maxWidth: '500px' }}>
-            Update access settings or the VPC assignment.
+            Update access settings or the VPC assignment.{' '}
+            <Link
+              to={`${MANAGE_NETWORKING_LEARN_MORE_LINK + (flags.databaseVpcBeta ? '-beta' : '')}`}
+            >
+              Learn more.
+            </Link>
             <br />
             Note that a change of VPC assignment settings can disrupt service
             availability. Avoid writing data to the database while a change is