feat: [UIE-9181] - DBaaS - Display hostname in summary tables based on VPC configuration and refactor connection details

packages/manager/.changeset/pr-12939-added-1759348628476.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+ConnectionDetailsRow and ConnectionDetailsHostRows components to manage connection details table content ([#12939](https://github.com/linode/manager/pull/12939))

packages/manager/.changeset/pr-12939-changed-1759348579491.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+DBaaS - Host field in connection details table renders based on VPC configuration and host fields are synced between Details and Networking tabs ([#12939](https://github.com/linode/manager/pull/12939))

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

@@ -0,0 +1,186 @@
+import React from 'react';
+
+import { databaseFactory } from 'src/factories/databases';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ConnectionDetailsHostRows } from './ConnectionDetailsHostRows';
+
+import type { Database } from '@linode/api-v4/lib/databases';
+
+const DEFAULT_PRIMARY = 'private-db-mysql-default-primary.net';
+const DEFAULT_STANDBY = 'db-mysql-default-standby.net';
+
+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', () => {
+    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
+    }) as Database;
+
+    const { queryAllByText } = renderWithTheme(
+      <ConnectionDetailsHostRows database={database} />
+    );
+
+    expect(queryAllByText('Host')).toHaveLength(1);
+    expect(queryAllByText(DEFAULT_PRIMARY)).toHaveLength(1);
+
+    expect(queryAllByText('Read-only Host')).toHaveLength(1);
+  });
+
+  it('should display N/A for default DB with blank read-only Host field', () => {
+    const database = databaseFactory.build({
+      hosts: {
+        primary: DEFAULT_PRIMARY,
+        secondary: undefined,
+        standby: undefined,
+      },
+      platform: 'rdbms-default',
+    });
+
+    const { queryAllByText } = renderWithTheme(
+      <ConnectionDetailsHostRows database={database} />
+    );
+
+    expect(queryAllByText('N/A')).toHaveLength(1);
+  });
+
+  it('should display Host rows correctly for legacy db', () => {
+    const database = databaseFactory.build({
+      hosts: {
+        primary: LEGACY_PRIMARY,
+        secondary: LEGACY_SECONDARY,
+        standby: undefined,
+      },
+      id: 22,
+      platform: 'rdbms-legacy',
+      port: 3306,
+      ssl_connection: true,
+    }) as Database;
+
+    const { queryAllByText } = renderWithTheme(
+      <ConnectionDetailsHostRows database={database} />
+    );
+
+    expect(queryAllByText('Host')).toHaveLength(1);
+    expect(queryAllByText(LEGACY_PRIMARY)).toHaveLength(1);
+
+    expect(queryAllByText('Private Network Host')).toHaveLength(1);
+    expect(queryAllByText(LEGACY_SECONDARY)).toHaveLength(1);
+  });
+
+  it('should display provisioning text when hosts are not available', () => {
+    const database = databaseFactory.build({
+      hosts: undefined,
+      platform: 'rdbms-default',
+    }) as Database;
+
+    const { getByText } = renderWithTheme(
+      <ConnectionDetailsHostRows database={database} />
+    );
+
+    const hostNameProvisioningText = getByText(
+      'Your hostname will appear here once it is available.'
+    );
+
+    expect(hostNameProvisioningText).toBeInTheDocument();
+  });
+
+  it('should display Host when VPC is not configured', () => {
+    const privateStrIndex = DEFAULT_PRIMARY.indexOf('-');
+    const baseHostName = DEFAULT_PRIMARY.slice(privateStrIndex + 1);
+
+    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,
+        secondary: undefined,
+        standby: undefined,
+      },
+      platform: 'rdbms-default',
+      private_network: {
+        public_access: false,
+        subnet_id: 1,
+        vpc_id: 123,
+      },
+    }) as Database;
+
+    const { queryAllByText } = renderWithTheme(
+      <ConnectionDetailsHostRows database={database} />
+    );
+    expect(queryAllByText('Private Host')).toHaveLength(1);
+    expect(queryAllByText(DEFAULT_PRIMARY)).toHaveLength(1);
+  });
+
+  it('should display both Private Host and Public Host fields when VPC is configured with public access as true', () => {
+    const database = databaseFactory.build({
+      hosts: {
+        primary: DEFAULT_PRIMARY,
+        secondary: undefined,
+        standby: undefined,
+      },
+      platform: 'rdbms-default',
+      private_network: {
+        public_access: true,
+        subnet_id: 1,
+        vpc_id: 123,
+      },
+    }) as Database;
+
+    const { queryAllByText } = renderWithTheme(
+      <ConnectionDetailsHostRows database={database} />
+    );
+    // Verify that both Private Host and Public Host fields are rendered
+    expect(queryAllByText('Private Host')).toHaveLength(1);
+    expect(queryAllByText('Public Host')).toHaveLength(1);
+
+    // Verify that the Private hostname is rendered correctly
+    expect(queryAllByText(DEFAULT_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}`;
+    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} />
+    );
+
+    expect(queryAllByText('Read-only Host')).toHaveLength(1);
+    expect(queryAllByText(DEFAULT_STANDBY)).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,138 @@
+import { TooltipIcon, Typography } from '@linode/ui';
+import * as React from 'react';
+
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+
+import {
+  SUMMARY_HOST_TOOLTIP_COPY,
+  SUMMARY_PRIVATE_HOST_COPY,
+  SUMMARY_PRIVATE_HOST_LEGACY_COPY,
+} from '../constants';
+import { getReadOnlyHost, isLegacyDatabase } from '../utilities';
+import { ConnectionDetailsRow } from './ConnectionDetailsRow';
+import { useStyles } from './DatabaseSummary/DatabaseSummaryConnectionDetails.style';
+
+import type { Database } from '@linode/api-v4/lib/databases/types';
+
+interface ConnectionDetailsHostRowsProps {
+  database: Database;
+}
+
+/**
+ * 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 = (
+  props: ConnectionDetailsHostRowsProps
+) => {
+  const { database } = props;
+  const { classes } = useStyles();
+
+  const sxTooltipIcon = {
+    marginLeft: '4px',
+    padding: '0px',
+  };
+
+  const hostTooltipComponentProps = {
+    tooltip: {
+      style: {
+        minWidth: 285,
+      },
+    },
+  };
+
+  const isLegacy = isLegacyDatabase(database);
+  const hasVPC = Boolean(database?.private_network?.vpc_id);
+  const hasPublicVPC = hasVPC && database?.private_network?.public_access;
+
+  const getHostContent = (
+    mode: 'default' | 'private' | 'public' = '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}`;
+    }
+
+    if (primaryHostName) {
+      return (
+        <>
+          {primaryHostName}
+          <CopyTooltip
+            className={classes.inlineCopyToolTip}
+            text={primaryHostName}
+          />
+          {!isLegacy && (
+            <TooltipIcon
+              componentsProps={hostTooltipComponentProps}
+              status="info"
+              sxTooltipIcon={sxTooltipIcon}
+              text={
+                mode === 'private'
+                  ? SUMMARY_PRIVATE_HOST_COPY
+                  : SUMMARY_HOST_TOOLTIP_COPY
+              }
+            />
+          )}
+        </>
+      );
+    }
+
+    return (
+      <Typography>
+        <span className={classes.provisioningText}>
+          Your hostname will appear here once it is available.
+        </span>
+      </Typography>
+    );
+  };
+
+  const getReadOnlyHostContent = () => {
+    const defaultValue = isLegacy ? '-' : 'N/A';
+    const value = getReadOnlyHost(database) || defaultValue;
+    const hasHost = value !== '-' && value !== 'N/A';
+    return (
+      <>
+        {value}
+        {value && hasHost && (
+          <CopyTooltip className={classes.inlineCopyToolTip} text={value} />
+        )}
+        {isLegacy && (
+          <TooltipIcon
+            status="info"
+            sxTooltipIcon={sxTooltipIcon}
+            text={SUMMARY_PRIVATE_HOST_LEGACY_COPY}
+          />
+        )}
+        {!isLegacy && hasHost && (
+          <TooltipIcon
+            componentsProps={hostTooltipComponentProps}
+            status="info"
+            sxTooltipIcon={sxTooltipIcon}
+            text={SUMMARY_HOST_TOOLTIP_COPY}
+          />
+        )}
+      </>
+    );
+  };
+
+  return (
+    <>
+      <ConnectionDetailsRow label={hasVPC ? 'Private Host' : 'Host'}>
+        {getHostContent(hasVPC ? 'private' : 'default')}
+      </ConnectionDetailsRow>
+      {hasPublicVPC && (
+        <ConnectionDetailsRow label="Public Host">
+          {getHostContent('public')}
+        </ConnectionDetailsRow>
+      )}
+      <ConnectionDetailsRow
+        label={isLegacy ? 'Private Network Host' : 'Read-only Host'}
+      >
+        {getReadOnlyHostContent()}
+      </ConnectionDetailsRow>
+    </>
+  );
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ConnectionDetailsRow } from './ConnectionDetailsRow';
+
+describe('ConnectionDetailsRow', () => {
+  it('should render provided label and children', async () => {
+    const { getByText } = renderWithTheme(
+      <ConnectionDetailsRow label="Test Label">
+        <p>Test Children Prop</p>
+      </ConnectionDetailsRow>
+    );
+    const testLabel = getByText('Test Label');
+    const testChildrenProp = getByText('Test Children Prop');
+
+    expect(testLabel).toBeInTheDocument();
+    expect(testChildrenProp).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { Grid } from '@mui/material';
+import * as React from 'react';
+
+import {
+  StyledLabelTypography,
+  StyledValueGrid,
+} from './DatabaseSummary/DatabaseSummaryClusterConfiguration.style';
+
+interface ConnectionDetailsRowProps {
+  children: React.ReactNode;
+  label: string;
+}
+
+export const ConnectionDetailsRow = (props: ConnectionDetailsRowProps) => {
+  const { children, label } = props;
+  return (
+    <>
+      <Grid
+        size={{
+          md: 4,
+          xs: 3,
+        }}
+      >
+        <StyledLabelTypography>{label}</StyledLabelTypography>
+      </Grid>
+      <StyledValueGrid size={{ md: 8, xs: 9 }}>{children}</StyledValueGrid>
+    </>
+  );
+};