upcoming: [M3-8305] - Display Endpoint Type alongside each endpoint hostname in Regions Column & Hostnames Drawers

packages/manager/.changeset/pr-10796-upcoming-features-1724152512210.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Display Endpoint Type alongside each endpoint hostname in Regions Column & Hostnames Drawers ([#10796](https://github.com/linode/manager/pull/10796))

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTable.tsx

@@ -1,8 +1,3 @@
-import {
-  ObjectStorageKey,
-  ObjectStorageKeyRegions,
-} from '@linode/api-v4/lib/object-storage';
-import { APIError } from '@linode/api-v4/lib/types';
 import { styled } from '@mui/material/styles';
 import React, { useState } from 'react';
 
@@ -16,9 +11,15 @@ import { useFlags } from 'src/hooks/useFlags';
 import { isFeatureEnabledV2 } from 'src/utilities/accountCapabilities';
 
 import { HostNamesDrawer } from '../HostNamesDrawer';
-import { OpenAccessDrawer } from '../types';
 import { AccessKeyTableBody } from './AccessKeyTableBody';
 
+import type { OpenAccessDrawer } from '../types';
+import type {
+  ObjectStorageKey,
+  ObjectStorageKeyRegions,
+} from '@linode/api-v4/lib/object-storage';
+import type { APIError } from '@linode/api-v4/lib/types';
+
 export interface AccessKeyTableProps {
   data: ObjectStorageKey[] | undefined;
   error: APIError[] | null | undefined;
@@ -69,8 +70,18 @@ export const AccessKeyTable = (props: AccessKeyTableProps) => {
                 Regions/S3 Hostnames
               </StyledLabelCell>
             )}
-            {/* empty cell for kebab menu */}
-            <TableCell />
+            <TableCell
+              sx={{
+                ...(isObjMultiClusterEnabled && {
+                  '&&:last-child': {
+                    paddingRight: '15px',
+                  },
+                }),
+              }}
+              data-qa-header-key
+            >
+              Actions
+            </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTableRow.tsx

@@ -1,7 +1,3 @@
-import {
-  ObjectStorageKey,
-  ObjectStorageKeyRegions,
-} from '@linode/api-v4/lib/object-storage';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
@@ -13,10 +9,15 @@ import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useFlags } from 'src/hooks/useFlags';
 import { isFeatureEnabledV2 } from 'src/utilities/accountCapabilities';
 
-import { OpenAccessDrawer } from '../types';
 import { AccessKeyActionMenu } from './AccessKeyActionMenu';
 import { HostNameTableCell } from './HostNameTableCell';
 
+import type { OpenAccessDrawer } from '../types';
+import type {
+  ObjectStorageKey,
+  ObjectStorageKeyRegions,
+} from '@linode/api-v4/lib/object-storage';
+
 type Props = {
   openDrawer: OpenAccessDrawer;
   openRevokeDialog: (storageKeyData: ObjectStorageKey) => void;
@@ -62,7 +63,15 @@ export const AccessKeyTableRow = ({
         />
       )}
 
-      <TableCell>
+      <TableCell
+        sx={{
+          ...(isObjMultiClusterEnabled && {
+            '&&:last-child': {
+              paddingRight: '15px',
+            },
+          }),
+        }}
+      >
         <AccessKeyActionMenu
           label={storageKeyData.label}
           objectStorageKey={storageKeyData}

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx

@@ -34,10 +34,12 @@ export const HostNameTableCell = ({
   }
   const label = regionsLookup[storageKeyData.regions[0].id]?.label;
   const s3Endpoint = storageKeyData?.regions[0]?.s3_endpoint;
+  const endpointType = storageKeyData?.regions[0]?.endpoint_type;
 
   return (
     <TableCell>
-      {label}: {s3Endpoint}
+      {label}
+      {endpointType && ` (${endpointType})`}: {s3Endpoint}&nbsp;
       {storageKeyData?.regions?.length === 1 && (
         <StyledCopyIcon text={s3Endpoint} />
       )}

packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.tsx

@@ -1,4 +1,3 @@
-import { ObjectStorageKeyRegions } from '@linode/api-v4';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
@@ -9,6 +8,8 @@ import { getRegionsByRegionId } from 'src/utilities/regions';
 
 import { CopyAllHostnames } from './CopyAllHostnames';
 
+import type { ObjectStorageKeyRegions } from '@linode/api-v4';
+
 interface Props {
   onClose: () => void;
   open: boolean;
@@ -30,10 +31,13 @@ export const HostNamesDrawer = (props: Props) => {
         <CopyAllHostnames
           text={
             regions
-              .map(
-                (region) =>
-                  `${regionsLookup[region.id]?.label}: ${region.s3_endpoint}`
-              )
+              .map((region) => {
+                const label = regionsLookup[region.id]?.label;
+                const endpointType = region.endpoint_type
+                  ? ` (${region.endpoint_type})`
+                  : '';
+                return `${label}${endpointType}: ${region.s3_endpoint}`;
+              })
               .join('\n') ?? ''
           }
         />
@@ -45,15 +49,23 @@ export const HostNamesDrawer = (props: Props) => {
           padding: theme.spacing(1),
         })}
       >
-        {regions.map((region, index) => (
-          <CopyableTextField
-            hideLabel
-            key={index}
-            label={`${region.id}: ${region.s3_endpoint}`}
-            sx={{ border: 'none', maxWidth: '100%' }}
-            value={`${regionsLookup[region.id]?.label}: ${region.s3_endpoint}`}
-          />
-        ))}
+        {regions.map((region, index) => {
+          const endpointTypeLabel = region?.endpoint_type
+            ? ` (${region.endpoint_type})`
+            : '';
+
+          return (
+            <CopyableTextField
+              value={`${regionsLookup[region.id]?.label}${endpointTypeLabel}: ${
+                region.s3_endpoint
+              }`}
+              hideLabel
+              key={index}
+              label={`${region.id}${endpointTypeLabel}: ${region.s3_endpoint}`}
+              sx={{ border: 'none', maxWidth: '100%' }}
+            />
+          );
+        })}
       </Box>
     </Drawer>
   );