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.styles.tsx

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material';
+
+import { TableCell } from 'src/components/TableCell';
+import { omittedProps } from 'src/utilities/omittedProps';
+
+import type { TableCellProps } from 'src/components/TableCell';
+
+interface StyledLastColumnCellProps extends TableCellProps {
+  addPaddingRight?: boolean;
+}
+export const StyledLastColumnCell = styled(TableCell, {
+  shouldForwardProp: omittedProps(['isObjMultiClusterEnabled']),
+})<StyledLastColumnCellProps>(({ addPaddingRight }) => ({
+  '&&:last-child': {
+    'padding-right': addPaddingRight ? '15px' : 0,
+  },
+}));
+
+export const StyledLabelCell = styled(TableCell)(() => ({
+  width: '35%',
+}));

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

@@ -1,24 +1,24 @@
-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';
 
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
-import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useFlags } from 'src/hooks/useFlags';
 import { isFeatureEnabledV2 } from 'src/utilities/accountCapabilities';
 
 import { HostNamesDrawer } from '../HostNamesDrawer';
-import { OpenAccessDrawer } from '../types';
+import { StyledLabelCell, StyledLastColumnCell } from './AccessKeyTable.styles';
 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 +69,12 @@ export const AccessKeyTable = (props: AccessKeyTableProps) => {
                 Regions/S3 Hostnames
               </StyledLabelCell>
             )}
-            {/* empty cell for kebab menu */}
-            <TableCell />
+            <StyledLastColumnCell
+              addPaddingRight={isObjMultiClusterEnabled}
+              data-qa-header-key
+            >
+              Actions
+            </StyledLastColumnCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -96,7 +100,3 @@ export const AccessKeyTable = (props: AccessKeyTableProps) => {
     </>
   );
 };
-
-const StyledLabelCell = styled(TableCell)(() => ({
-  width: '35%',
-}));

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,16 @@ 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 { StyledLastColumnCell } from './AccessKeyTable.styles';
 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,14 +64,14 @@ export const AccessKeyTableRow = ({
         />
       )}
 
-      <TableCell>
+      <StyledLastColumnCell addPaddingRight={isObjMultiClusterEnabled}>
         <AccessKeyActionMenu
           label={storageKeyData.label}
           objectStorageKey={storageKeyData}
           openDrawer={openDrawer}
           openRevokeDialog={openRevokeDialog}
         />
-      </TableCell>
+      </StyledLastColumnCell>
     </TableRow>
   );
 };

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>
   );