feat: [M3-8953] - Object Storage Gen2 Updates and Improvements

packages/api-v4/src/object-storage/buckets.ts

@@ -262,6 +262,11 @@ export const updateBucketAccess = (
     setData(params, UpdateBucketAccessSchema)
   );
 
+/**
+ * getObjectStorageEndpoints
+ *
+ * Returns a list of Object Storage Endpoints.
+ */
 export const getObjectStorageEndpoints = ({ filter, params }: RequestOptions) =>
   Request<Page<ObjectStorageEndpoint>>(
     setMethod('GET'),

packages/manager/.changeset/pr-11355-upcoming-features-1733237339445.md

@@ -0,0 +1,6 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Updates Regions/S3 Hostnames interface to match new design guidelines with
+improved visualization of multiple storage regions. ([#11355](https://github.com/linode/manager/pull/11355))

packages/manager/cypress/e2e/core/objectStorage/bucket-details.spec.ts

@@ -0,0 +1,54 @@
+import { mockGetAccount } from 'support/intercepts/account';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
+import { ui } from 'support/ui';
+import {
+  accountFactory,
+  objectStorageBucketFactory,
+  regionFactory,
+} from 'src/factories';
+import { randomLabel } from 'support/util/random';
+
+describe('Object Storage Gen 1 Bucket Details Tabs', () => {
+  beforeEach(() => {
+    mockAppendFeatureFlags({
+      objMultiCluster: true,
+      objectStorageGen2: { enabled: false },
+    }).as('getFeatureFlags');
+    mockGetAccount(
+      accountFactory.build({
+        capabilities: ['Object Storage', 'Object Storage Access Key Regions'],
+      })
+    ).as('getAccount');
+  });
+
+  const mockRegion = regionFactory.build({
+    capabilities: ['Object Storage'],
+  });
+
+  const mockBucket = objectStorageBucketFactory.build({
+    label: randomLabel(),
+    region: mockRegion.id,
+  });
+
+  describe('Properties tab without required capabilities', () => {
+    it(`confirms the Properties tab does not exist for users without 'Object Storage Endpoint Types' capability`, () => {
+      const { region, label } = mockBucket;
+
+      cy.visitWithLogin(
+        `/object-storage/buckets/${region}/${label}/properties`
+      );
+
+      cy.wait(['@getFeatureFlags', '@getAccount']);
+
+      // Confirm that expected tabs are visible.
+      ui.tabList.findTabByTitle('Objects').should('be.visible');
+      ui.tabList.findTabByTitle('Access').should('be.visible');
+      ui.tabList.findTabByTitle('SSL/TLS').should('be.visible');
+
+      // Confirm that "Properties" tab is absent.
+      cy.findByText('Properties').should('not.exist');
+
+      // TODO Confirm "Not Found" notice is present.
+    });
+  });
+});

packages/manager/cypress/e2e/core/objectStorageGen2/bucket-access-keys-gen2.spec.ts

@@ -59,12 +59,12 @@ describe('Object Storage gen2 access keys tests', () => {
     cy.findByText(mockAccessKey1.label).should('be.visible');
     cy.findByText(mockAccessKey2.label).should('be.visible');
     cy.findByText('US, Newark, NJ (E3): us-east.com').should('be.visible');
-    cy.findByText('US, Atlanta, GA (E3): us-southeast.com').should(
-      'be.visible'
-    );
 
-    // confirm endpoint types are present in the drawer
-    cy.findByText('and 3 more...').should('be.visible').click();
+    // Using contains since the text includes additional information, i.e. '| +2 regions | Show All'
+    cy.contains('US, Atlanta, GA (E3): us-southeast.com').should('be.visible');
+    cy.contains('+3 regions').should('be.visible');
+    cy.findByText('Show All').should('be.visible').click();
+
     ui.drawer
       .findByTitle('Regions / S3 Hostnames')
       .should('be.visible')

packages/manager/cypress/e2e/core/objectStorageGen2/bucket-create-gen2.spec.ts

@@ -233,9 +233,6 @@ describe('Object Storage Gen2 create bucket tests', () => {
           .click();
       });
 
-    // Wait for the newly 'created' mocked bucket to appear
-    cy.wait(['@getBuckets']);
-
     // Confirm request body has expected data
     cy.wait('@createBucket').then((xhr) => {
       const requestPayload = xhr.request.body;
@@ -356,9 +353,6 @@ describe('Object Storage Gen2 create bucket tests', () => {
           .click();
       });
 
-    // Wait for the newly 'created' mocked bucket to appear
-    cy.wait(['@getBuckets']);
-
     // Confirm request body has expected data
     cy.wait('@createBucket').then((xhr) => {
       const requestPayload = xhr.request.body;
@@ -483,9 +477,6 @@ describe('Object Storage Gen2 create bucket tests', () => {
           .click();
       });
 
-    // Wait for the newly 'created' mocked bucket to appear
-    cy.wait(['@getBuckets']);
-
     // Confirm request body has expected data
     cy.wait('@createBucket').then((xhr) => {
       const requestPayload = xhr.request.body;
@@ -608,9 +599,6 @@ describe('Object Storage Gen2 create bucket tests', () => {
           .click();
       });
 
-    // Wait for the newly 'created' mocked bucket to appear
-    cy.wait(['@getBuckets']);
-
     // Confirm request body has expected data
     cy.wait('@createBucket').then((xhr) => {
       const requestPayload = xhr.request.body;

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

@@ -27,28 +27,39 @@ export const HostNameTableCell = (props: Props) => {
   if (!regionsLookup || !regionsData || !regions || regions.length === 0) {
     return <TableCell>None</TableCell>;
   }
-  const label = regionsLookup[storageKeyData.regions[0].id]?.label;
-  const s3Endpoint = storageKeyData?.regions[0]?.s3_endpoint;
-  const endpointType = storageKeyData?.regions[0]?.endpoint_type;
+  const formatEndpoint = (region: ObjectStorageKeyRegions) => {
+    const label = regionsLookup[region.id]?.label;
+    const endpointType = region.endpoint_type
+      ? ` (${region.endpoint_type})`
+      : '';
+    return `${label}${endpointType}: ${region.s3_endpoint}`;
+  };
+
+  const firstRegion = regions[0];
+  const formattedFirstEndpoint = formatEndpoint(firstRegion);
+  const allEndpoints = regions.map(formatEndpoint).join('\n');
 
   return (
     <TableCell>
-      {label}
-      {endpointType && ` (${endpointType})`}: {s3Endpoint}&nbsp;
-      {storageKeyData?.regions?.length === 1 && (
-        <StyledCopyIcon text={s3Endpoint} />
+      {formattedFirstEndpoint}&nbsp;
+      {regions.length === 1 && (
+        <StyledCopyIcon text={firstRegion.s3_endpoint} />
       )}
-      {storageKeyData.regions.length > 1 && (
-        <StyledLinkButton
-          onClick={() => {
-            setHostNames(storageKeyData.regions);
-            setShowHostNamesDrawers(true);
-          }}
-          type="button"
-        >
-          and {storageKeyData.regions.length - 1} more...
-        </StyledLinkButton>
+      {regions.length > 1 && (
+        <>
+          | +{regions.length - 1} regions |&nbsp;
+          <StyledLinkButton
+            onClick={() => {
+              setHostNames(regions);
+              setShowHostNamesDrawers(true);
+            }}
+            type="button"
+          >
+            Show All
+          </StyledLinkButton>
+        </>
       )}
+      <StyledCopyIcon text={allEndpoints} />
     </TableCell>
   );
 };
@@ -59,5 +70,5 @@ const StyledCopyIcon = styled(CopyTooltip)(({ theme }) => ({
     top: 1,
     width: 12,
   },
-  marginLeft: theme.spacing(),
+  marginLeft: theme.spacing(0.5),
 }));

packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx

@@ -47,10 +47,10 @@ export const AccessSelect = React.memo((props: Props) => {
 
   const { close: closeDialog, isOpen, open: openDialog } = useOpenClose();
   const label = capitalize(variant);
+
+  // CORS is only available at a bucket level, not at an object level.
   const isCorsAvailable =
-    (variant === 'bucket' || variant === 'object') &&
-    endpointType !== 'E2' &&
-    endpointType !== 'E3';
+    variant === 'bucket' && endpointType !== 'E2' && endpointType !== 'E3';
 
   const {
     data: bucketAccessData,

packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx

@@ -64,7 +64,7 @@ export const BucketDetailLanding = React.memo((props: Props) => {
 
   const { endpoint_type } = bucket ?? {};
 
-  const isSSLEnabled = endpoint_type !== 'E2' && endpoint_type !== 'E3';
+  const isGen2Endpoint = endpoint_type === 'E2' || endpoint_type === 'E3';
 
   const tabs = [
     {
@@ -75,15 +75,15 @@ export const BucketDetailLanding = React.memo((props: Props) => {
       routeName: `${props.match.url}/access`,
       title: 'Access',
     },
-    ...(flags.objectStorageGen2?.enabled
+    ...(isObjectStorageGen2Enabled
       ? [
           {
             routeName: `${props.match.url}/properties`,
             title: 'Properties',
           },
         ]
       : []),
-    ...(isSSLEnabled
+    ...(!isGen2Endpoint
       ? [
           {
             routeName: `${props.match.url}/ssl`,
@@ -136,7 +136,7 @@ export const BucketDetailLanding = React.memo((props: Props) => {
                 endpointType={endpoint_type}
               />
             </SafeTabPanel>
-            {flags.objectStorageGen2?.enabled && bucket && (
+            {isObjectStorageGen2Enabled && bucket && (
               <SafeTabPanel index={2}>
                 <BucketProperties bucket={bucket} />
               </SafeTabPanel>

packages/manager/src/queries/object-storage/requests.ts

@@ -166,13 +166,29 @@ export const getAllBucketsFromEndpoints = async (
     return { buckets: [], errors: [] };
   }
 
+  // Initialize a Map to group endpoints by region for better error handling and flexibility.
+  const endpointsByRegion = new Map<string, ObjectStorageEndpoint[]>();
+
+  for (const endpoint of endpoints) {
+    const existingEndpoint = endpointsByRegion.get(endpoint.region) || [];
+
+    // Update the Map with the current endpoint, maintaining all endpoints per region.
+    endpointsByRegion.set(endpoint.region, [...existingEndpoint, endpoint]);
+  }
+
   const results = await Promise.all(
-    endpoints.map((endpoint) =>
+    Array.from(endpointsByRegion.entries()).map(([region, regionEndpoints]) =>
       getAll<ObjectStorageBucket>((params) =>
-        getBucketsInRegion(endpoint.region, params)
+        getBucketsInRegion(region, params)
       )()
-        .then((data) => ({ buckets: data.data, endpoint }))
-        .catch((error) => ({ endpoint, error }))
+        .then((data) => ({
+          buckets: data.data,
+          endpoints: regionEndpoints,
+        }))
+        .catch((error) => ({
+          endpoints: regionEndpoints,
+          error,
+        }))
     )
   );
 
@@ -183,7 +199,10 @@ export const getAllBucketsFromEndpoints = async (
     if ('buckets' in result) {
       buckets.push(...result.buckets);
     } else {
-      errors.push({ endpoint: result.endpoint, error: result.error });
+      // For each endpoint in the region, log the error to provide detailed error information.
+      result.endpoints.forEach((endpoint) => {
+        errors.push({ endpoint, error: result.error });
+      });
     }
   });