diff --git a/packages/manager/.changeset/pr-10796-upcoming-features-1724152512210.md b/packages/manager/.changeset/pr-10796-upcoming-features-1724152512210.md new file mode 100644 index 00000000000..c3649a92a72 --- /dev/null +++ b/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)) diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTable.styles.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTable.styles.tsx new file mode 100644 index 00000000000..49feb92bdd8 --- /dev/null +++ b/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']), +})(({ addPaddingRight }) => ({ + '&&:last-child': { + 'padding-right': addPaddingRight ? '15px' : 0, + }, +})); + +export const StyledLabelCell = styled(TableCell)(() => ({ + width: '35%', +})); diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTable.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTable.tsx index 121dead1fc6..d39ecf5cb58 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTable.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTable.tsx @@ -1,14 +1,7 @@ -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'; @@ -16,9 +9,16 @@ 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 )} - {/* empty cell for kebab menu */} - + + Actions + @@ -96,7 +100,3 @@ export const AccessKeyTable = (props: AccessKeyTableProps) => { ); }; - -const StyledLabelCell = styled(TableCell)(() => ({ - width: '35%', -})); diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTableRow.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTableRow.tsx index 92ea578fb46..76eb64490bb 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTableRow.tsx +++ b/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 = ({ /> )} - + - + ); }; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx index ca4e0fbb6e5..14f0595acca 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx +++ b/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 ( - {label}: {s3Endpoint} + {label} + {endpointType && ` (${endpointType})`}: {s3Endpoint}  {storageKeyData?.regions?.length === 1 && ( )} diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.tsx index c6f22605603..96944066b59 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.tsx +++ b/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) => { - `${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) => ( - - ))} + {regions.map((region, index) => { + const endpointTypeLabel = region?.endpoint_type + ? ` (${region.endpoint_type})` + : ''; + + return ( + + ); + })} );