feat: [UIE-8002] - DBaaS 2.0 Landing Page (#10823)

* feat: [UIE-8054] - DBaaS enhancements 1

* UIE-8002 feat(DBaaS): New/Existing Customer Landing Page

* UIE-8002 feat(DBaaS): Landing Page with feature flag

* Added changeset: Add Landing Page for V2

* Added changeset: Add Landing Page and update Empty-State Landing page for DBaaS V2

* feat: [UIE-8002] - Review fix: refactoring and variable renaming

* feat: [UIE-8002] - Review fix: change capability for region select

---------

Co-authored-by: Conal Ryan <corya@akamai.com>

packages/api-v4/src/account/types.ts

@@ -72,7 +72,7 @@ export type AccountCapability =
   | 'LKE HA Control Planes'
   | 'Machine Images'
   | 'Managed Databases'
-  | 'Managed Databases V2'
+  | 'Managed Databases Beta'
   | 'NodeBalancers'
   | 'Object Storage Access Key Regions'
   | 'Object Storage Endpoint Types'

packages/api-v4/src/databases/types.ts

@@ -151,6 +151,7 @@ export interface BaseDatabase {
    * A key/value object where the key is an IP address and the value is a member type.
    */
   members: Record<string, MemberType>;
+  platform?: string;
 }
 
 export interface MySQLDatabase extends BaseDatabase {

packages/api-v4/src/regions/types.ts

@@ -13,7 +13,7 @@ export type Capabilities =
   | 'Kubernetes'
   | 'Linodes'
   | 'Managed Databases'
-  | 'Managed Databases V2'
+  | 'Managed Databases Beta'
   | 'Metadata'
   | 'NodeBalancers'
   | 'Object Storage'

packages/manager/.changeset/pr-10823-upcoming-features-1724867496417.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Landing Page and update Empty-State Landing page for DBaaS V2 ([#10823](https://github.com/linode/manager/pull/10823))

packages/manager/src/__data__/regionsData.ts

@@ -98,7 +98,6 @@ export const regions: Region[] = [
       'Vlans',
       'VPCs',
       'Managed Databases',
-      'Managed Databases V2',
       'Metadata',
       'Premium Plans',
       'Placement Group',
@@ -130,7 +129,6 @@ export const regions: Region[] = [
       'Vlans',
       'VPCs',
       'Managed Databases',
-      'Managed Databases V2',
       'Metadata',
       'Premium Plans',
     ],
@@ -486,7 +484,6 @@ export const regions: Region[] = [
       'VPCs',
       'Block Storage Migrations',
       'Managed Databases',
-      'Managed Databases V2',
       'Placement Group',
     ],
     country: 'us',
@@ -514,7 +511,6 @@ export const regions: Region[] = [
       'Cloud Firewall',
       'Block Storage Migrations',
       'Managed Databases',
-      'Managed Databases V2',
       'Placement Group',
     ],
     country: 'us',
@@ -546,7 +542,6 @@ export const regions: Region[] = [
       'VPCs',
       'Block Storage Migrations',
       'Managed Databases',
-      'Managed Databases V2',
       'Placement Group',
     ],
     country: 'us',

packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts

@@ -11,6 +11,7 @@ export interface linkAnalyticsEvent {
 
 export interface ResourcesHeaders {
   description: string;
+  logo?: React.ReactNode;
   subtitle: string;
   title: string;
 }

packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx

@@ -111,7 +111,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
     wide = false,
     youtubeLinkData,
   } = props;
-  const { description, subtitle, title } = headers;
+  const { description, logo, subtitle, title } = headers;
 
   return (
     <Placeholder
@@ -171,6 +171,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
       subtitle={subtitle}
       title={title}
     >
+      {logo}
       <Typography variant="subtitle1">{description}</Typography>
     </Placeholder>
   );

packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx

@@ -89,7 +89,7 @@ describe('PrimaryNav', () => {
 
   it('should show Databases menu item if the user has the account capability V2 Beta', async () => {
     const account = accountFactory.build({
-      capabilities: ['Managed Databases V2'],
+      capabilities: ['Managed Databases Beta'],
     });
 
     server.use(
@@ -121,7 +121,7 @@ describe('PrimaryNav', () => {
 
   it('should show Databases menu item if the user has the account capability V2', async () => {
     const account = accountFactory.build({
-      capabilities: ['Managed Databases V2'],
+      capabilities: ['Managed Databases Beta'],
     });
 
     server.use(
@@ -152,7 +152,7 @@ describe('PrimaryNav', () => {
 
   it('should show Databases menu item if the user has the account capability V2', async () => {
     const account = accountFactory.build({
-      capabilities: ['Managed Databases V2'],
+      capabilities: ['Managed Databases Beta'],
     });
 
     server.use(

packages/manager/src/factories/account.ts

@@ -46,6 +46,7 @@ export const accountFactory = Factory.Sync.makeFactory<Account>({
     'LKE HA Control Planes',
     'Machine Images',
     'Managed Databases',
+    'Managed Databases Beta',
     'NodeBalancers',
     'Object Storage Access Key Regions',
     'Object Storage Endpoint Types',

packages/manager/src/factories/databases.ts

@@ -163,7 +163,7 @@ export const databaseTypeFactory = Factory.Sync.makeFactory<DatabaseType>({
       },
     ],
   },
-  id: Factory.each((i) => `g6-standard-${i}`),
+  id: Factory.each((i) => possibleTypes[i % possibleTypes.length]),
   label: Factory.each((i) => `Linode ${i} GB`),
   memory: Factory.each((i) => i * 2048),
   vcpus: Factory.each((i) => i * 2),
@@ -190,7 +190,9 @@ export const databaseInstanceFactory = Factory.Sync.makeFactory<DatabaseInstance
     members: {
       '2.2.2.2': 'primary',
     },
-    platform: Factory.each((i) => (adb10(i) ? 'adb10' : 'adb20')),
+    platform: Factory.each((i) =>
+      adb10(i) ? 'rdbms-legacy' : 'rdbms-default'
+    ),
     region: Factory.each((i) => possibleRegions[i % possibleRegions.length]),
     status: Factory.each((i) => possibleStatuses[i % possibleStatuses.length]),
     type: Factory.each((i) => possibleTypes[i % possibleTypes.length]),

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

@@ -39,7 +39,7 @@ describe('Database Create', () => {
     const standardTypes = [
       databaseTypeFactory.build({
         class: 'nanode',
-        id: 'g6-standard-0',
+        id: 'g6-nanode-1',
         label: `Nanode 1 GB`,
         memory: 1024,
       }),
@@ -117,7 +117,7 @@ describe('Database Create', () => {
     server.use(
       http.get('*/account', () => {
         const account = accountFactory.build({
-          capabilities: ['Managed Databases V2'],
+          capabilities: ['Managed Databases Beta'],
         });
         return HttpResponse.json(account);
       })

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

@@ -64,9 +64,6 @@ import type { Item } from 'src/components/EnhancedSelect/Select';
 import type { PlanSelectionType } from 'src/features/components/PlansPanel/types';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
 
-const V1 = 'Managed Databases';
-const V2 = `Managed Databases V2`;
-
 const useStyles = makeStyles()((theme: Theme) => ({
   btnCtn: {
     alignItems: 'center',
@@ -342,7 +339,7 @@ const DatabaseCreate = () => {
     return dbtypes.map((type) => {
       const { label } = type;
       const formattedLabel = formatStorageUnits(label);
-      const singleNodePricing = type.engines[selectedEngine].find(
+      const singleNodePricing = type.engines[selectedEngine]?.find(
         (cluster) => cluster.quantity === 1
       );
       const price = singleNodePricing?.price ?? {
@@ -448,13 +445,13 @@ const DatabaseCreate = () => {
     const engineType = values.engine.split('/')[0] as Engine;
 
     setNodePricing({
-      double: type.engines[engineType].find(
+      double: type.engines[engineType]?.find(
         (cluster: DatabaseClusterSizeObject) => cluster.quantity === 2
       )?.price,
-      multi: type.engines[engineType].find(
+      multi: type.engines[engineType]?.find(
         (cluster: DatabaseClusterSizeObject) => cluster.quantity === 3
       )?.price,
-      single: type.engines[engineType].find(
+      single: type.engines[engineType]?.find(
         (cluster: DatabaseClusterSizeObject) => cluster.quantity === 1
       )?.price,
     });
@@ -544,7 +541,7 @@ const DatabaseCreate = () => {
         </Grid>
         <Grid>
           <RegionSelect
-            currentCapability={isDatabasesV2Enabled ? V2 : V1}
+            currentCapability="Managed Databases"
             disableClearable
             errorText={errors.region}
             onChange={(e, region) => setFieldValue('region', region.id)}

packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx

@@ -65,7 +65,7 @@ describe('database resize', () => {
   });
 
   describe('On rendering of page', () => {
-    const examplePlanType = 'g6-standard-60';
+    const examplePlanType = 'g6-dedicated-50';
     const dedicatedTypes = databaseTypeFactory.buildList(7, {
       class: 'dedicated',
     });

packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx

@@ -1,50 +1,51 @@
 import React from 'react';
+
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Typography } from 'src/components/Typography';
 import { capitalize } from 'src/utilities/capitalize';
-import { Event } from '@linode/api-v4';
-import {
+
+import type { Event } from '@linode/api-v4';
+import type {
   Database,
   DatabaseInstance,
   DatabaseStatus,
 } from '@linode/api-v4/lib/databases/types';
-import { Status, StatusIcon } from 'src/components/StatusIcon/StatusIcon';
+import type { Status } from 'src/components/StatusIcon/StatusIcon';
 
 export const databaseStatusMap: Record<DatabaseStatus, Status> = {
   active: 'active',
   degraded: 'inactive',
   failed: 'error',
   provisioning: 'other',
+  resizing: 'other',
   restoring: 'other',
   resuming: 'other',
   suspended: 'error',
   suspending: 'other',
-  resizing: 'other',
 };
 interface Props {
-  events: Event[] | undefined;
   database: Database | DatabaseInstance;
+  events: Event[] | undefined;
 }
 export const DatabaseStatusDisplay = (props: Props) => {
-  const { events, database } = props;
+  const { database, events } = props;
   const recentEvent = events?.find(
     (event: Event) =>
       event.entity?.id === database.id && event.entity?.type === 'database'
   );
 
   let progress: number | undefined;
-  if (recentEvent?.action === 'database_resize') {
-    progress = recentEvent?.percent_complete ?? 0;
-  }
-
   let displayedStatus;
+
   if (
-    recentEvent?.status === 'started' ||
-    recentEvent?.status === 'scheduled'
+    recentEvent?.action === 'database_resize' &&
+    (recentEvent?.status === 'started' || recentEvent?.status === 'scheduled')
   ) {
+    progress = recentEvent?.percent_complete ?? 0;
     displayedStatus = (
       <>
         <StatusIcon status="other" />
-        <Typography variant="body1" sx={{ display: 'inline-block' }}>
+        <Typography sx={{ display: 'inline-block' }} variant="body1">
           {`Resizing ${progress ? `(${progress}%)` : '(0%)'}`}
         </Typography>
       </>