upcoming: [UIE-10178] - Use new hostname endpoint in Database Summary and Network tab

packages/api-v4/.changeset/pr-13413-changed-1771602214397.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Export `HostEndpoint` and rename `private_access` to `public_access` ([#13413](https://github.com/linode/manager/pull/13413))

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

@@ -96,10 +96,10 @@ export type HostEndpointRole =
   | 'standby'
   | 'standby-connection-pool';
 
-interface HostEndpoint {
+export interface HostEndpoint {
   address: string;
   port: number;
-  private_access: boolean;
+  public_access: boolean;
   role: HostEndpointRole;
 }
 

packages/manager/.changeset/pr-13413-upcoming-features-1771602250906.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Use new hostname endpoint in Database Summary and Network tab ([#13413](https://github.com/linode/manager/pull/13413))

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

@@ -36,6 +36,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   },
   { flag: 'gecko2', label: 'Gecko' },
   { flag: 'generationalPlansv2', label: 'Generational compute plans' },
+  { flag: 'hostnameEndpoints', label: 'Hostname Endpoints' },
   { flag: 'limitsEvolution', label: 'Limits Evolution' },
   { flag: 'linodeDiskEncryption', label: 'Linode Disk Encryption (LDE)' },
   { flag: 'linodeInterfaces', label: 'Linode Interfaces' },

packages/manager/src/factories/databases.ts

@@ -179,7 +179,7 @@ export const databaseInstanceFactory =
               {
                 address: 'public-db-mysql-primary-0.b.linodeb.net',
                 role: 'primary',
-                private_access: false,
+                public_access: true,
                 port: 3306,
               },
             ],
@@ -191,7 +191,7 @@ export const databaseInstanceFactory =
               {
                 address: 'public-db-mysql-primary-0.b.linodeb.net',
                 role: 'primary',
-                private_access: false,
+                public_access: true,
                 port: 3306,
               },
             ],
@@ -253,7 +253,7 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
             {
               address: 'public-db-mysql-primary-0.b.linodeb.net',
               role: 'primary',
-              private_access: false,
+              public_access: true,
               port: 3306,
             },
           ],
@@ -265,7 +265,7 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
             {
               address: 'public-db-mysql-primary-0.b.linodeb.net',
               role: 'primary',
-              private_access: false,
+              public_access: true,
               port: 3306,
             },
           ],

packages/manager/src/featureFlags.ts

@@ -242,6 +242,7 @@ export interface Flags {
   gecko2: GeckoFeatureFlag;
   generationalPlansv2: GenerationalPlansFlag;
   gpuv2: GpuV2;
+  hostnameEndpoints: boolean;
   iam: BaseFeatureFlag;
   iamDelegation: BaseFeatureFlag;
   iamLimitedAvailabilityBadges: boolean;

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

@@ -0,0 +1,62 @@
+import { TooltipIcon } from '@linode/ui';
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+
+import {
+  SUMMARY_HOST_TOOLTIP_COPY,
+  SUMMARY_PRIVATE_HOST_COPY,
+} from '../constants';
+
+import type { HostEndpoint } from '@linode/api-v4/lib/databases/types';
+
+interface ConnectionDetailsHostDisplayProps {
+  host: HostEndpoint;
+}
+
+export const ConnectionDetailsHostDisplay = (
+  props: ConnectionDetailsHostDisplayProps
+) => {
+  const { host } = props;
+
+  return (
+    <>
+      {host?.address}
+      <StyledCopyTooltip text={host.address} />
+      <TooltipIcon
+        componentsProps={{
+          tooltip: {
+            style: {
+              minWidth: 285,
+            },
+          },
+        }}
+        status="info"
+        sxTooltipIcon={{
+          marginLeft: '4px',
+          padding: '0px',
+        }}
+        text={
+          !host?.public_access
+            ? SUMMARY_PRIVATE_HOST_COPY
+            : SUMMARY_HOST_TOOLTIP_COPY
+        }
+      />
+    </>
+  );
+};
+
+export const StyledCopyTooltip = styled(CopyTooltip, {
+  label: 'StyledCopyTooltip',
+})(({ theme }) => ({
+  '& svg': {
+    height: theme.spacingFunction(16),
+    width: theme.spacingFunction(16),
+  },
+  '&:hover': {
+    backgroundColor: 'transparent',
+  },
+  display: 'inline-flex',
+  marginLeft: theme.spacingFunction(4),
+}));

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

@@ -17,6 +17,10 @@
 const LEGACY_PRIMARY = 'db-mysql-legacy-primary.net';
 const LEGACY_SECONDARY = 'db-mysql-legacy-secondary.net';
 
+/**
+ * @TODO - delete this file after API releases hostname endpoint changes
+ */
+
 describe('ConnectionDetailsHostRows', () => {
   it('should display Host and Read-only Host fields for a default database with no VPC configured', () => {
     const database = databaseFactory.build({

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

@@ -26,6 +26,8 @@ interface ConnectionDetailsHostRowsProps {
 type HostContentMode = 'default' | 'private' | 'public';
 
 /**
+ * @deprecated Delete this file in favor of ConnectionDetailsHostRows2 after the API releases hostname endpoint changes.
+ *
  * 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 */
 export const ConnectionDetailsHostRows = (

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

@@ -0,0 +1,182 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { databaseFactory } from 'src/factories/databases';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ConnectionDetailsHostRows2 } from './ConnectionDetailsHostRows2';
+
+import type { Database } from '@linode/api-v4/lib/databases';
+
+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}`;
+
+describe('ConnectionDetailsHostRows2', () => {
+  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,
+        standby: DEFAULT_STANDBY,
+        endpoints: [
+          {
+            role: 'primary',
+            address: DEFAULT_PRIMARY,
+            port: 15847,
+            public_access: true,
+          },
+          {
+            role: 'standby',
+            address: DEFAULT_STANDBY,
+            port: 15847,
+            public_access: true,
+          },
+        ],
+      },
+      platform: 'rdbms-default',
+      private_network: null, // No VPC configured, so Host and Read-only Host fields render
+    }) as Database;
+
+    renderWithTheme(<ConnectionDetailsHostRows2 database={database} />);
+
+    expect(screen.getByText('Host')).toBeVisible();
+    expect(screen.getByText(DEFAULT_PRIMARY)).toBeVisible();
+
+    expect(screen.getByText('Read-only Host')).toBeVisible();
+    expect(screen.getByText(DEFAULT_STANDBY)).toBeVisible();
+  });
+
+  it('should display N/A for default DB with blank read-only Host field', () => {
+    const database = databaseFactory.build({
+      hosts: {
+        primary: DEFAULT_PRIMARY,
+        standby: undefined,
+        endpoints: [
+          {
+            role: 'primary',
+            address: DEFAULT_PRIMARY,
+            port: 15847,
+            public_access: true,
+          },
+        ],
+      },
+      platform: 'rdbms-default',
+    });
+
+    renderWithTheme(<ConnectionDetailsHostRows2 database={database} />);
+
+    expect(screen.getByText('N/A')).toBeVisible();
+  });
+
+  it('should display provisioning text when hosts are not available', () => {
+    const database = databaseFactory.build({
+      hosts: undefined,
+      platform: 'rdbms-default',
+    }) as Database;
+
+    const { getByText } = renderWithTheme(
+      <ConnectionDetailsHostRows2 database={database} />
+    );
+
+    const hostNameProvisioningText = getByText(
+      'Your hostname will appear here once it is available.'
+    );
+
+    expect(hostNameProvisioningText).toBeInTheDocument();
+  });
+
+  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: PRIVATE_PRIMARY,
+        standby: PRIVATE_STANDBY,
+        endpoints: [
+          {
+            role: 'primary',
+            address: PRIVATE_PRIMARY,
+            port: 15847,
+            public_access: false,
+          },
+          {
+            role: 'standby',
+            address: PRIVATE_STANDBY,
+            port: 15847,
+            public_access: false,
+          },
+        ],
+      },
+      platform: 'rdbms-default',
+      private_network: {
+        public_access: false,
+        subnet_id: 1,
+        vpc_id: 123,
+      }, // VPC configuration with public access set to false
+    }) as Database;
+
+    renderWithTheme(<ConnectionDetailsHostRows2 database={database} />);
+
+    expect(screen.getByText('Private Host')).toBeVisible();
+    expect(screen.getByText(PRIVATE_PRIMARY)).toBeVisible();
+    expect(screen.getByText('Private Read-only Host')).toBeVisible();
+    expect(screen.getByText(PRIVATE_STANDBY)).toBeVisible();
+  });
+
+  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: PRIVATE_PRIMARY,
+        standby: PRIVATE_STANDBY,
+        endpoints: [
+          {
+            role: 'primary',
+            address: `public-${DEFAULT_PRIMARY}`,
+            port: 15847,
+            public_access: true,
+          },
+          {
+            role: 'standby',
+            address: `public-${DEFAULT_STANDBY}`,
+            port: 15847,
+            public_access: true,
+          },
+          {
+            role: 'primary',
+            address: PRIVATE_PRIMARY,
+            port: 15847,
+            public_access: false,
+          },
+          {
+            role: 'standby',
+            address: PRIVATE_STANDBY,
+            port: 15847,
+            public_access: false,
+          },
+        ],
+      },
+      platform: 'rdbms-default',
+      private_network: {
+        public_access: true,
+        subnet_id: 1,
+        vpc_id: 123,
+      }, // VPC configuration with public access set to true
+    }) as Database;
+
+    renderWithTheme(<ConnectionDetailsHostRows2 database={database} />);
+
+    // Verify that Private and Public Host and Readonly-host fields are rendered
+    expect(screen.getByText('Private Host')).toBeVisible();
+    expect(screen.getByText('Public Host')).toBeVisible();
+    expect(screen.getByText('Private Read-only Host')).toBeVisible();
+    expect(screen.getByText('Public Read-only Host')).toBeVisible();
+
+    // Verify that the Private and Public hostname is rendered correctly
+    expect(screen.getByText(PRIVATE_PRIMARY)).toBeVisible();
+    expect(screen.getByText(`public-${DEFAULT_PRIMARY}`)).toBeVisible();
+
+    // Verify that the Private and Public read-only hostname is rendered correctly
+    expect(screen.getByText(PRIVATE_STANDBY)).toBeVisible();
+    expect(screen.getByText(`public-${DEFAULT_STANDBY}`)).toBeVisible();
+  });
+});