diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx
new file mode 100644
index 00000000000..92c072ca4e9
--- /dev/null
+++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx
@@ -0,0 +1,115 @@
+import '@testing-library/jest-dom';
+import { waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { regionFactory } from 'src/factories';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
+import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
+
+import { HostNameTableCell } from './HostNameTableCell';
+
+const storageKeyData = {
+ access_key: 'test_key',
+ bucket_access: null,
+ id: 12345,
+ label: 'this is regular key',
+ limited: false,
+ regions: [
+ {
+ id: 'us-east',
+ s3_endpoint: 'alpha.test.com',
+ },
+ ],
+ secret_key: '[test]',
+};
+
+describe('HostNameTableCell', () => {
+ it('should render "None" when there are no regions', () => {
+ const { getByText } = renderWithThemeAndHookFormContext({
+ component: (
+
+ ),
+ });
+
+ expect(getByText('None')).toBeInTheDocument();
+ });
+
+ test('should render "Regions/S3 Hostnames" cell when there are regions', async () => {
+ const region = regionFactory.build({
+ capabilities: ['Object Storage'],
+ id: 'us-east',
+ label: 'Newark, NJ',
+ });
+
+ server.use(
+ http.get('*/v4/regions', () => {
+ return HttpResponse.json(makeResourcePage([region]));
+ })
+ );
+ const { findByText } = renderWithThemeAndHookFormContext({
+ component: (
+
+ ),
+ });
+
+ const hostname = await findByText('Newark, NJ: alpha.test.com');
+
+ await waitFor(() => expect(hostname).toBeInTheDocument());
+ });
+ test('should render all "Regions/S3 Hostnames" in the cell when there are multiple regions', async () => {
+ const region = regionFactory.build({
+ capabilities: ['Object Storage'],
+ id: 'us-east',
+ label: 'Newark, NJ',
+ });
+
+ server.use(
+ http.get('*/v4/regions', () => {
+ return HttpResponse.json(makeResourcePage([region]));
+ })
+ );
+ const { findByText } = renderWithThemeAndHookFormContext({
+ component: (
+
+ ),
+ });
+ const hostname = await findByText('Newark, NJ: alpha.test.com');
+ const moreButton = await findByText(/and\s+1\s+more\.\.\./);
+ await waitFor(() => expect(hostname).toBeInTheDocument());
+
+ await expect(moreButton).toBeInTheDocument();
+ });
+});
diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx
index e5fb3ce88db..644e2558d5d 100644
--- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx
+++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx
@@ -1,7 +1,3 @@
-import {
- ObjectStorageKey,
- RegionS3EndpointAndID,
-} from '@linode/api-v4/lib/object-storage';
import { styled } from '@mui/material/styles';
import React from 'react';
@@ -11,6 +7,11 @@ import { TableCell } from 'src/components/TableCell';
import { useRegionsQuery } from 'src/queries/regions/regions';
import { getRegionsByRegionId } from 'src/utilities/regions';
+import type {
+ ObjectStorageKey,
+ RegionS3EndpointAndID,
+} from '@linode/api-v4/lib/object-storage';
+
type Props = {
setHostNames: (hostNames: RegionS3EndpointAndID[]) => void;
setShowHostNamesDrawers: (show: boolean) => void;
@@ -31,14 +32,14 @@ export const HostNameTableCell = ({
if (!regionsLookup || !regionsData || !regions || regions.length === 0) {
return None;
}
+ const label = regionsLookup[storageKeyData.regions[0].id]?.label;
+ const s3endPoint = storageKeyData?.regions[0]?.s3_endpoint;
return (
- {`${regionsLookup[storageKeyData.regions[0].id].label}: ${
- storageKeyData?.regions[0]?.s3_endpoint
- } `}
+ {`${label}: ${s3endPoint} `}
{storageKeyData?.regions?.length === 1 && (
-
+
)}
{storageKeyData.regions.length > 1 && (