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

[smans-akamai]

Description 📝

This pull request updates the behavior for the hostname field that appears in the Connection Details tables in the Database Details Summary and Networking tabs. It also refactors these tables so that they're easier to manage via shared components.

This following changes were made in this pull request:

1. Refactoring the Connection Details tables that appear in the Database Summary and Networking tabs

• They now use shared components so they're easier to manage conditionally.
• The structure and usage is the same for the rows used in the two tables (ie. render a label and content). The content is the only part that varies and now that's passed down from the parent to a shared component or handled in it's own component entirely (More information on on this below)

2. Updating the logic for the Host field so that it displays different variations based on the Database Cluster VPC configuration.

• This can now be displayed as Host, Private Host, or Public Host based on the configuration.
• This is controlled by the new ConnectionDetailsHostRows shared component (See shared components list below)

3. For the Hostname fields, the display behavior is now synced.

• The information tooltip and copy icon that appear for these hostname fields in DatabaseSummary Connection Details table now also appear for those same fields in the Networking tab table.

The behavior for all fields except for the hostname fields should still be the same. The only change for them is that the row label and content is now passed down to the ConnectionDetailsRow component (For more info, see the shared components list below).

Shared components created in DBaaS for this PR:

• ConnectionDetailsRow - Displays the row label and content. The label and content are provided from the parent component.
• ConnectionDetailsHostRows - Responsible for displaying the different variations of the Hostname fields (ie Host, Private Host, Public Host) using the ConnectionDetailsRow

Changes 🔄

List any change(s) relevant to the reviewer.

• Refactoring the Connection Details tables that appear in the Database Summary and Networking tabs
• Updating the logic for the Host field so that it displays different variations based on the Database Cluster VPC configuration.
• For the Hostname fields, the behavior for these fields is now synced. The tooltip and copy icon that appear in the Summary tab also appear for those same field in the Networking connection details table.

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

10/07/25

Preview 📷

Note: The before and after screenshots in each scenario show the Connection details tables in the Database Details Summary and Networking tab.

Scenario 1: Database Cluster with No VPC Configured displays Host field
Summary:

Before	After

Networking:

Before	After

Scenario 2. Database Cluster with VPC configured and Public Access set to false displays Private Host field
Summary:

Before	After

Networking:

Before	After

Scenario 3. Database Cluster with VPC configured and Public Access set to true displays both the Private Host and Public Host fields
Summary:

Before	After

Networking:

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

• Have the databaseVpc feature flag enabled
• Have access to the Databases tab with the ability to create a Database Cluster
• Have VPC and subnets created for a region
• This should be tested using the staging environment and you'll need to make 3 database clusters for the different scenarios below.
• We'll also want to compare the tables in staging to your local with these 3 clusters so you'll need to have both running with to see staging data.
  Note 1: I'll provide mock data steps, so you can skip these if you prefer to use mock data.
  Note 2: If creating databases, I suggest giving these databases names to indicate the state so they're easy to distinguish (ie. database-with-vpc-public)
• Create a Database with no VPC configuration.
• Create a Database assigning a VPC/Subnet with the Enable public access field checkbox checked
• Create a Database assigning a VPC/Subnet with the Enable public access field checkbox unchecked

Reproduction steps

(How to reproduce the issue, if applicable)

• N/A

Verification steps

(How to verify changes)

Note: The Readonly Host field is always displayed so it rendering isn't part of these scenarios for the hostname field changes. Only whether the icons for it display in networking.

Note: You can use mock data to test the scenarios below. For mock data, you'll need to modify the database instance response to response to reflect each Database VPC configuration scenario. If you created the database clusters in staging, you can skip the mock data configuration steps.

Scenario 1. Database Cluster with No VPC Configured displays Host field

• For mock data, no changes are needed as the private_network property returned from the database instances request is null by default in the database.ts file on line 244 to:
• Access the details for this database cluster and view the Summary tab.
• Verify that, in the Connection Details table, the Host field is displayed above Read-only Host (See Before/After screenshots above)
• Access the Networking tab and, in the Manage Networking section connection details table.
• Verify that the Host field is displayed above Read-only Host.
• Verify that the info tooltip and copy icons are displayed to the right of both the Host and Read-only Host field values as they appear for those fields in the in the Summary tab.

Scenario 2. Database Cluster with VPC configured and Public Access set to false displays Private Host field

• Modify the mock data for a database instance by updating the private_network property in the database.ts file on line 244 to:

private_network: {
  vpc_id: 1,
  subnet_id: 1,
  public_access: false,
},

• Access the details for this database cluster and view the Summary tab.
• Verify that, in the Connection Details table, the Private Host field is displayed above Read-only Host (See Before/After screenshots above)
• Access the Networking tab and, in the Manage Networking section connection details table.
• Verify that the Private Host field is displayed displayed above Read-only Host.
• Verify that the info tooltip and copy icons are displayed to the right of both the Host and Read-only Host field values as they appear for those fields in the in the Summary tab.

Scenario 3. Database Cluster with VPC configured and Public Access set to true displays both the Private Host and Public Host fields

• Modify the mock data for a database instance by updating the private_network property in the database.ts file on line 244 to:

private_network: {
  vpc_id: 1,
  subnet_id: 1,
  public_access: true,
},

• Access the details for this database cluster and view the Summary tab.
• Verify that, in the Connection Details table, both the Private Host and Public Host fields are displayed above Read-only Host in that order (See Before/After screenshots above)
• Verify that for the Public Host field, the hostname value starts with public- instead of private- which is shown in the Private Host field hostname value.
• Access the Networking tab and, in the Manage Networking section connection details table.
• Verify that both the Private Host and Public Host fields are displayed above Read-only Host in that order.
• Verify that the info tooltip and copy icons are displayed to the right of both the Private Host, Public Host and Read-only Host field values as they appear for those fields in the in the Summary tab.

4. Verify that the other non host-name fields still behave the same way after the refactor

• Have local host running and set it to use staging data.
• Open the actual staging environment open in a separate tab.
• Using the database clusters created for the scenarios above, access the Database Details and view the Summary Tab for both windows.
• Verify that the fields for the Connection Details table in the Summary render the same way except for the Host, Private Host, and/or Public Host and Read-only Host fields where the display behavior has been updated in this PR.

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[bnussman-akamai]

Functionality is looking okay from my initial testing. I just have a few non-blocking changes. Will continue testing before giving my final ✅

[bnussman-akamai]

Non-blocking question: Do legacy databases even exist anymore? I was under the impression all Databases were migrated for all customers. The clean up of the legacy DBaaS code will be satisfying to see at some point

[smans-akamai]

@bnussman-akamai I'm not sure if they've been completely migrated from yet. We do have a clean up ticket for the legacy code though, UIE-8214. However that hasn't been pulled in yet. I'm also looking forward to when we get to clean up all this code in DBaaS.

If you want to make sure the legacy code is working, you can use the mock data and update the platform to `'rdbms-legacy' in the serverHandler. That's what I've been using to check since those can't be made anymore.

[bnussman-akamai]

Thanks!

[hana-akamai]

Functionality is looking good, left some cleanup comments

[linode-gh-bot]

Cloud Manager UI test results

🎉 832 passing tests on test run #6 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	832 Passing	11 Skipped	42m 26s