feat: [UIE-9181] - DBaaS - Display read-only hostname in connection details tables based on VPC configuration

packages/api-v4/.changeset/pr-12976-changed-1760124143465.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+DatabaseHosts interface primary prop to optional ([#12976](https://github.com/linode/manager/pull/12976))

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

@@ -85,7 +85,7 @@ export interface DatabaseCredentials {
 }
 
 interface DatabaseHosts {
-  primary: string;
+  primary?: string;
   secondary?: string;
   standby?: string;
 }

packages/manager/.changeset/pr-12976-changed-1760124101690.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+DBaaS Connection details table Read-only Host field renders based on VPC configuration ([#12976](https://github.com/linode/manager/pull/12976))

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

@@ -3,26 +3,30 @@ import React from 'react';
 import { databaseFactory } from 'src/factories/databases';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
+import { convertPrivateToPublicHostname } from '../utilities';
 import { ConnectionDetailsHostRows } from './ConnectionDetailsHostRows';
 
 import type { Database } from '@linode/api-v4/lib/databases';
 
-const DEFAULT_PRIMARY = 'private-db-mysql-default-primary.net';
+const DEFAULT_PRIMARY = 'db-mysql-default-primary.net';
 const DEFAULT_STANDBY = 'db-mysql-default-standby.net';
 
+const PRIVATE_PRIMARY = `private-${DEFAULT_PRIMARY}`;
+const PRIVATE_STANDBY = `private-${DEFAULT_STANDBY}`;
+
 const LEGACY_PRIMARY = 'db-mysql-legacy-primary.net';
 const LEGACY_SECONDARY = 'db-mysql-legacy-secondary.net';
 
 describe('ConnectionDetailsHostRows', () => {
-  it('should display correctly for default database', () => {
+  it('should display Host and Read-only Host fields for a default database with no VPC configured', () => {
     const database = databaseFactory.build({
       hosts: {
         primary: DEFAULT_PRIMARY,
         secondary: undefined,
         standby: DEFAULT_STANDBY,
       },
       platform: 'rdbms-default',
-      private_network: null, // Added to test that Host field renders
+      private_network: null, // No VPC configured, so Host and Read-only Host fields render
     }) as Database;
 
     const { queryAllByText } = renderWithTheme(
@@ -33,6 +37,7 @@ describe('ConnectionDetailsHostRows', () => {
     expect(queryAllByText(DEFAULT_PRIMARY)).toHaveLength(1);
 
     expect(queryAllByText('Read-only Host')).toHaveLength(1);
+    expect(queryAllByText(DEFAULT_STANDBY)).toHaveLength(1);
   });
 
   it('should display N/A for default DB with blank read-only Host field', () => {
@@ -52,7 +57,7 @@ describe('ConnectionDetailsHostRows', () => {
     expect(queryAllByText('N/A')).toHaveLength(1);
   });
 
-  it('should display Host rows correctly for legacy db', () => {
+  it('should display Host and Private Network Host rows for legacy db', () => {
     const database = databaseFactory.build({
       hosts: {
         primary: LEGACY_PRIMARY,
@@ -93,94 +98,68 @@ describe('ConnectionDetailsHostRows', () => {
     expect(hostNameProvisioningText).toBeInTheDocument();
   });
 
-  it('should display Host when VPC is not configured', () => {
-    const privateStrIndex = DEFAULT_PRIMARY.indexOf('-');
-    const baseHostName = DEFAULT_PRIMARY.slice(privateStrIndex + 1);
-
+  it('should display Private variations of Host and Read-only fields when a VPC is configured with public access set to false', () => {
     const database = databaseFactory.build({
       hosts: {
-        primary: baseHostName,
-      },
-      platform: 'rdbms-default',
-      private_network: null, // VPC not configured
-    }) as Database;
-
-    const { queryAllByText } = renderWithTheme(
-      <ConnectionDetailsHostRows database={database} />
-    );
-
-    expect(queryAllByText('Host')).toHaveLength(1);
-    expect(queryAllByText(baseHostName)).toHaveLength(1);
-  });
-
-  it('should display Private Host field when VPC is configured with public access as false', () => {
-    const database = databaseFactory.build({
-      hosts: {
-        primary: DEFAULT_PRIMARY,
+        primary: PRIVATE_PRIMARY,
         secondary: undefined,
-        standby: undefined,
+        standby: PRIVATE_STANDBY,
       },
       platform: 'rdbms-default',
       private_network: {
         public_access: false,
         subnet_id: 1,
         vpc_id: 123,
-      },
+      }, // VPC configuration with public access set to false
     }) as Database;
 
     const { queryAllByText } = renderWithTheme(
       <ConnectionDetailsHostRows database={database} />
     );
     expect(queryAllByText('Private Host')).toHaveLength(1);
-    expect(queryAllByText(DEFAULT_PRIMARY)).toHaveLength(1);
+    expect(queryAllByText(PRIVATE_PRIMARY)).toHaveLength(1);
+    expect(queryAllByText('Private Read-only Host')).toHaveLength(1);
+    expect(queryAllByText(PRIVATE_STANDBY)).toHaveLength(1);
   });
 
-  it('should display both Private Host and Public Host fields when VPC is configured with public access as true', () => {
+  it('should display Private and Public variations of Host and Read-only Host fields when a VPC is configured with public access set to true', () => {
     const database = databaseFactory.build({
       hosts: {
-        primary: DEFAULT_PRIMARY,
+        primary: PRIVATE_PRIMARY,
         secondary: undefined,
-        standby: undefined,
+        standby: PRIVATE_STANDBY,
       },
       platform: 'rdbms-default',
       private_network: {
         public_access: true,
         subnet_id: 1,
         vpc_id: 123,
-      },
+      }, // VPC configuration with public access set to true
     }) as Database;
 
     const { queryAllByText } = renderWithTheme(
       <ConnectionDetailsHostRows database={database} />
     );
-    // Verify that both Private Host and Public Host fields are rendered
+    // Verify that Private and Public Host and Readonly-host fields are rendered
     expect(queryAllByText('Private Host')).toHaveLength(1);
     expect(queryAllByText('Public Host')).toHaveLength(1);
+    expect(queryAllByText('Private Read-only Host')).toHaveLength(1);
+    expect(queryAllByText('Public Read-only Host')).toHaveLength(1);
 
     // Verify that the Private hostname is rendered correctly
-    expect(queryAllByText(DEFAULT_PRIMARY)).toHaveLength(1);
+    expect(queryAllByText(PRIVATE_PRIMARY)).toHaveLength(1);
     // Verify that the Public hostname is rendered correctly
-    const privateStrIndex = DEFAULT_PRIMARY.indexOf('-');
-    const baseHostName = DEFAULT_PRIMARY.slice(privateStrIndex + 1);
-    const expectedPublicHostname = `public-${baseHostName}`;
+    const expectedPublicHostname = convertPrivateToPublicHostname(
+      database.hosts.primary!
+    );
     expect(queryAllByText(expectedPublicHostname)).toHaveLength(1);
-  });
 
-  it('should display Read-only Host when read-only host is available', () => {
-    const database = databaseFactory.build({
-      hosts: {
-        primary: DEFAULT_PRIMARY,
-        secondary: undefined,
-        standby: DEFAULT_STANDBY,
-      },
-      platform: 'rdbms-default',
-    }) as Database;
-
-    const { queryAllByText } = renderWithTheme(
-      <ConnectionDetailsHostRows database={database} />
+    // Verify that the Private hostname is rendered correctly
+    expect(queryAllByText(PRIVATE_PRIMARY)).toHaveLength(1);
+    // Verify that the Public hostname is rendered correctly
+    const expectedPublicReadOnlyHostname = convertPrivateToPublicHostname(
+      database.hosts.standby!
     );
-
-    expect(queryAllByText('Read-only Host')).toHaveLength(1);
-    expect(queryAllByText(DEFAULT_STANDBY)).toHaveLength(1);
+    expect(queryAllByText(expectedPublicReadOnlyHostname)).toHaveLength(1);
   });
 });

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

@@ -8,7 +8,11 @@
   SUMMARY_PRIVATE_HOST_COPY,
   SUMMARY_PRIVATE_HOST_LEGACY_COPY,
 } from '../constants';
-import { getReadOnlyHost, isLegacyDatabase } from '../utilities';
+import {
+  convertPrivateToPublicHostname,
+  getReadOnlyHost,
+  isLegacyDatabase,
+} from '../utilities';
 import { ConnectionDetailsRow } from './ConnectionDetailsRow';
 import { useStyles } from './DatabaseSummary/DatabaseSummaryConnectionDetails.style';
 
@@ -18,6 +22,8 @@
   database: Database;
 }
 
+type HostContentMode = 'default' | 'private' | 'public';
+
 /**
  * This component is responsible for conditionally rendering the Private Host, Public Host, and Read-only Host rows that get displayed in
  * the Connection Details tables that appear in the Database Summary and Networking tabs */
@@ -40,20 +46,15 @@
     },
   };
 
-  const isLegacy = isLegacyDatabase(database);
+  const isLegacy = isLegacyDatabase(database); // TODO (UIE-8214) POST GA - Remove legacy check and legacy content as it is no longer necessary
   const hasVPC = Boolean(database?.private_network?.vpc_id);
   const hasPublicVPC = hasVPC && database?.private_network?.public_access;
 
-  const getHostContent = (
-    mode: 'default' | 'private' | 'public' = 'default'
-  ) => {
+  const getHostContent = (mode: HostContentMode = 'default') => {
     let primaryHostName = database.hosts?.primary;
 
     if (mode === 'public' && primaryHostName) {
-      // Remove 'private-' substring at the beginning of the hostname and replace it with 'public-'
-      const privateStrIndex = database.hosts.primary.indexOf('-');
-      const baseHostName = database.hosts.primary.slice(privateStrIndex + 1);
-      primaryHostName = `public-${baseHostName}`;
+      primaryHostName = convertPrivateToPublicHostname(primaryHostName);
     }
 
     if (primaryHostName) {
@@ -89,15 +90,22 @@
     );
   };
 
-  const getReadOnlyHostContent = () => {
+  const getReadOnlyHostContent = (mode: HostContentMode = 'default') => {
     const defaultValue = isLegacy ? '-' : 'N/A';
-    const value = getReadOnlyHost(database) || defaultValue;
-    const hasHost = value !== '-' && value !== 'N/A';
+    const hostValue = getReadOnlyHost(database) || defaultValue;
+    const hasHost = hostValue !== '-' && hostValue !== 'N/A';
+    const displayedHost =
+      mode === 'public' && hasHost
+        ? convertPrivateToPublicHostname(hostValue)
+        : hostValue;
     return (
       <>
-        {value}
-        {value && hasHost && (
-          <CopyTooltip className={classes.inlineCopyToolTip} text={value} />
+        {displayedHost}
+        {displayedHost && hasHost && (
+          <CopyTooltip
+            className={classes.inlineCopyToolTip}
+            text={displayedHost}
+          />
         )}
         {isLegacy && (
           <TooltipIcon
@@ -111,13 +119,21 @@
             componentsProps={hostTooltipComponentProps}
             status="info"
             sxTooltipIcon={sxTooltipIcon}
-            text={SUMMARY_HOST_TOOLTIP_COPY}
+            text={
+              mode === 'private'
+                ? SUMMARY_PRIVATE_HOST_COPY
+                : SUMMARY_HOST_TOOLTIP_COPY
+            }
           />
         )}
       </>
     );
   };
 
+  const readonlyHostLabel = isLegacy
+    ? 'Private Network Host'
+    : 'Read-only Host';
+
   return (
     <>
       <ConnectionDetailsRow label={hasVPC ? 'Private Host' : 'Host'}>
@@ -129,10 +145,15 @@
         </ConnectionDetailsRow>
       )}
       <ConnectionDetailsRow
-        label={isLegacy ? 'Private Network Host' : 'Read-only Host'}
+        label={hasVPC ? 'Private Read-only Host' : readonlyHostLabel}
       >
-        {getReadOnlyHostContent()}
+        {getReadOnlyHostContent(hasVPC ? 'private' : 'default')}
       </ConnectionDetailsRow>
+      {hasPublicVPC && (
+        <ConnectionDetailsRow label="Public Read-only Host">
+          {getReadOnlyHostContent('public')}
+        </ConnectionDetailsRow>
+      )}
     </>
   );
 };

packages/manager/src/features/Databases/constants.ts

@@ -57,7 +57,7 @@ export const SUMMARY_HOST_TOOLTIP_COPY =
   'Use the IPv6 address (AAAA record) for this hostname to avoid network transfer charges when connecting to this database from Linodes within the same region.';
 
 export const SUMMARY_PRIVATE_HOST_COPY =
-  "The private hostname resolves to an internal IP address and can only be used to access the database cluster from other Linode instances within the same VPC. This connection is secured and doesn't incur transfer costs.";
+  "Private hostnames resolve to internal IP addresses and can only be used to access the database cluster from other Linode instances within the same VPC. This connection is secured and doesn't incur transfer costs.";
 
 export const SUMMARY_PRIVATE_HOST_LEGACY_COPY =
   'A private network host and a private IP can only be used to access a Database Cluster from Linodes in the same data center and will not incur transfer costs.';

packages/manager/src/features/Databases/utilities.test.ts

@@ -7,6 +7,7 @@
   databaseTypeFactory,
 } from 'src/factories';
 import {
+  convertPrivateToPublicHostname,
   getDatabasesDescription,
   getReadOnlyHost,
   hasPendingUpdates,
@@ -620,6 +621,7 @@
     expect(result).toBe(mockHosts.standby);
   });
 
+  // TODO (UIE-8214) POST GA - Remove this test as secondary is only present for legacy databases
   it('should return the secondary host from the database if standby is not present', () => {
     const db: Database = databaseFactory.build();
     const mockHosts = {
@@ -636,3 +638,12 @@
     expect(result).toBe('');
   });
 });
+
+describe('convertPrivateToPublicHostname', () => {
+  it('should return the public hostname url from private hostname', () => {
+    const baseHostname = 'primary.example.com';
+    const mockPrivateHost = `private-${baseHostname}`; // mock private hostname URL returned from backend
+    const result = convertPrivateToPublicHostname(mockPrivateHost);
+    expect(result).toBe(`public-${baseHostname}`);
+  });
+});

packages/manager/src/features/Databases/utilities.ts

@@ -249,5 +249,16 @@
   engines?: Pick<DatabaseEngine, 'engine' | 'version'>[]
 ) => engines?.filter((e) => e.engine === engine && e.version > version);
 
+// TODO (UIE-8214) POST GA - Remove reference to secondary from this function as it is only present for legacy databases
 export const getReadOnlyHost = (database: Database | undefined) =>
   database?.hosts?.standby ?? database?.hosts?.secondary ?? '';
+
+/** This function converts a private hostname string to public by replacing 'private-' at the beginning of the private hostname string with 'public-'.
+ * This is used to format the hostname string returned from the backend when a VPC is configured for a database cluster
+ * and the backend provides the hostname with 'private-' prepended.
+ */
+export const convertPrivateToPublicHostname = (host: string) => {
+  const privateStrIndex = host.indexOf('-');
+  const baseHostName = host.slice(privateStrIndex + 1);
+  return `public-${baseHostName}`;
+};

packages/manager/src/mocks/serverHandlers.ts

@@ -201,9 +201,17 @@ const makeMockDatabase = (params: PathParams): Database => {
   }
 
   if (database.platform === 'rdbms-default' && !!database.private_network) {
-    // When a database is configured with a VPC, the primary host is prepended with 'private-'
-    const privateHost = `private-${database.hosts.primary}`;
-    database.hosts.primary = privateHost;
+    // When a database is configured with a VPC, the primary and standby hostnames are prepended with 'private-' in the backend
+    const hasPrimary = Boolean(database.hosts?.primary);
+    const hasStandby = Boolean(database.hosts?.standby);
+    const primaryHost = hasPrimary
+      ? `private-${database.hosts.primary}`
+      : undefined;
+    const standbyHost = hasStandby
+      ? `private-${database.hosts.standby}`
+      : undefined;
+    database.hosts.primary = primaryHost;
+    database.hosts.standby = standbyHost;
   }
 
   return database;