upcoming: [M3-8304] - Add Endpoint Type Column & Disable CORS for Gen2 Buckets

packages/manager/.changeset/pr-10771-upcoming-features-1723731588900.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Endpoint Type Column & Disable CORS for Gen2 Buckets ([#10771](https://github.com/linode/manager/pull/10771))

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

@@ -20,11 +20,13 @@ import { copy } from './AccessSelect.data';
 import type {
   ACLType,
   ObjectStorageBucketAccess,
+  ObjectStorageEndpointTypes,
   ObjectStorageObjectACL,
 } from '@linode/api-v4/lib/object-storage';
 import type { Theme } from '@mui/material/styles';
 
 export interface Props {
+  endpointType?: ObjectStorageEndpointTypes;
   getAccess: () => Promise<ObjectStorageBucketAccess | ObjectStorageObjectACL>;
   name: string;
   updateAccess: (acl: ACLType, cors_enabled?: boolean) => Promise<{}>;
@@ -38,7 +40,7 @@ function isUpdateObjectStorageBucketAccessPayload(
 }
 
 export const AccessSelect = React.memo((props: Props) => {
-  const { getAccess, name, updateAccess, variant } = props;
+  const { endpointType, getAccess, name, updateAccess, variant } = props;
   // Access data for this Object (from the API).
   const [aclData, setACLData] = React.useState<ACLType | null>(null);
   const [corsData, setCORSData] = React.useState(true);
@@ -139,6 +141,9 @@ export const AccessSelect = React.memo((props: Props) => {
     ? 'CORS Enabled'
     : 'CORS Disabled';
 
+  const isCorsEnabled =
+    variant === 'bucket' && endpointType !== 'E2' && endpointType !== 'E3';
+
   const selectedOption =
     _options.find((thisOption) => thisOption.value === selectedACL) ??
     _options.find((thisOption) => thisOption.value === 'private');
@@ -180,7 +185,7 @@ export const AccessSelect = React.memo((props: Props) => {
         ) : null}
       </div>
 
-      {variant === 'bucket' ? (
+      {isCorsEnabled ? (
         <FormControlLabel
           control={
             <Toggle
@@ -194,7 +199,7 @@ export const AccessSelect = React.memo((props: Props) => {
         />
       ) : null}
 
-      {variant === 'bucket' ? (
+      {isCorsEnabled ? (
         <Typography>
           Whether Cross-Origin Resource Sharing is enabled for all origins. For
           more fine-grained control of CORS, please use another{' '}

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

@@ -56,6 +56,7 @@ import ObjectTableContent from './ObjectTableContent';
 
 import type {
   ObjectStorageClusterID,
+  ObjectStorageEndpointTypes,
   ObjectStorageObject,
   ObjectStorageObjectList,
 } from '@linode/api-v4';
@@ -64,8 +65,12 @@ interface MatchParams {
   bucketName: string;
   clusterId: ObjectStorageClusterID;
 }
+interface Props {
+  endpointType: ObjectStorageEndpointTypes;
+}
 
-export const BucketDetail = () => {
+export const BucketDetail = (props: Props) => {
+  const { endpointType } = props;
   /**
    * @note If `Object Storage Access Key Regions` is enabled, clusterId will actually contain
    * the bucket's region id
@@ -473,6 +478,7 @@ export const BucketDetail = () => {
         bucketName={bucketName}
         clusterId={clusterId}
         displayName={selectedObject?.name}
+        endpointType={endpointType}
         lastModified={selectedObject?.last_modified}
         name={selectedObject?.name}
         onClose={closeObjectDetailsDrawer}

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

@@ -17,12 +17,16 @@ import { readableBytes } from 'src/utilities/unitConversions';
 
 import { AccessSelect } from './AccessSelect';
 
-import type { ACLType } from '@linode/api-v4/lib/object-storage';
+import type {
+  ACLType,
+  ObjectStorageEndpointTypes,
+} from '@linode/api-v4/lib/object-storage';
 
 export interface ObjectDetailsDrawerProps {
   bucketName: string;
   clusterId: string;
   displayName?: string;
+  endpointType?: ObjectStorageEndpointTypes;
   lastModified?: null | string;
   name?: string;
   onClose: () => void;
@@ -38,6 +42,7 @@ export const ObjectDetailsDrawer = React.memo(
       bucketName,
       clusterId,
       displayName,
+      endpointType,
       lastModified,
       name,
       onClose,
@@ -55,6 +60,9 @@ export const ObjectDetailsDrawer = React.memo(
       }
     } catch {}
 
+    const isAccessSelectEnabled =
+      open && name && endpointType !== 'E2' && endpointType !== 'E3';
+
     return (
       <Drawer
         onClose={onClose}
@@ -81,7 +89,7 @@ export const ObjectDetailsDrawer = React.memo(
           </StyledLinkContainer>
         ) : null}
 
-        {open && name ? (
+        {isAccessSelectEnabled ? (
           <>
             <Divider spacingBottom={16} spacingTop={16} />
             <AccessSelect

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

@@ -1,6 +1,5 @@
-import { ObjectStorageClusterID } from '@linode/api-v4/lib/object-storage';
 import * as React from 'react';
-import { RouteComponentProps, matchPath } from 'react-router-dom';
+import { matchPath } from 'react-router-dom';
 
 import { LandingHeader } from 'src/components/LandingHeader';
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
@@ -9,10 +8,16 @@ import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
+import { useFlags } from 'src/hooks/useFlags';
+import { useAccount } from 'src/queries/account/account';
+import { useObjectStorageBuckets } from 'src/queries/object-storage/queries';
+import { isFeatureEnabledV2 } from 'src/utilities/accountCapabilities';
 
 import { BucketAccess } from './BucketAccess';
 
+import type { ObjectStorageClusterID } from '@linode/api-v4/lib/object-storage';
 import type { ComponentType, LazyExoticComponent } from 'react';
+import type { RouteComponentProps } from 'react-router-dom';
 
 const ObjectList: LazyExoticComponent<ComponentType<any>> = React.lazy(() =>
   import('./BucketDetail').then((module) => ({ default: module.BucketDetail }))
@@ -31,11 +36,27 @@ interface MatchProps {
 type Props = RouteComponentProps<MatchProps>;
 
 export const BucketDetailLanding = React.memo((props: Props) => {
+  const { data: account } = useAccount();
+  const flags = useFlags();
+
+  const isObjectStorageGen2Enabled = isFeatureEnabledV2(
+    'Object Storage Endpoint Types',
+    Boolean(flags.objectStorageGen2?.enabled),
+    account?.capabilities ?? []
+  );
+
+  const { data: bucketsData } = useObjectStorageBuckets(
+    isObjectStorageGen2Enabled
+  );
+
   const matches = (p: string) => {
     return Boolean(matchPath(p, { path: props.location.pathname }));
   };
   const { bucketName, clusterId } = props.match.params;
 
+  const { endpoint_type: endpointType } =
+    bucketsData?.buckets.find(({ label }) => label === bucketName) ?? {};
+
   const tabs = [
     {
       routeName: `${props.match.url}/objects`,
@@ -85,7 +106,7 @@ export const BucketDetailLanding = React.memo((props: Props) => {
         <React.Suspense fallback={<SuspenseLoader />}>
           <TabPanels>
             <SafeTabPanel index={0}>
-              <ObjectList {...props} />
+              <ObjectList {...props} endpointType={endpointType} />
             </SafeTabPanel>
             <SafeTabPanel index={1}>
               <BucketAccess bucketName={bucketName} clusterId={clusterId} />

packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx

@@ -24,12 +24,16 @@ import { readableBytes } from 'src/utilities/unitConversions';
 import { AccessSelect } from '../BucketDetail/AccessSelect';
 
 import type { Region } from '@linode/api-v4';
-import type { ACLType } from '@linode/api-v4/lib/object-storage';
+import type {
+  ACLType,
+  ObjectStorageEndpointTypes,
+} from '@linode/api-v4/lib/object-storage';
 export interface BucketDetailsDrawerProps {
   bucketLabel?: string;
   bucketRegion?: Region;
   cluster?: string;
   created?: string;
+  endpointType?: ObjectStorageEndpointTypes;
   hostname?: string;
   objectsNumber?: number;
   onClose: () => void;
@@ -44,6 +48,7 @@ export const BucketDetailsDrawer = React.memo(
       bucketRegion,
       cluster,
       created,
+      endpointType,
       hostname,
       objectsNumber,
       onClose,
@@ -89,6 +94,11 @@ export const BucketDetailsDrawer = React.memo(
             Created: {formattedCreated}
           </Typography>
         ) : null}
+        {Boolean(endpointType) && (
+          <Typography data-testid="endpointType" variant="subtitle2">
+            Endpoint Type: {endpointType}
+          </Typography>
+        )}
         {isObjMultiClusterEnabled ? (
           <Typography data-testid="cluster" variant="subtitle2">
             {bucketRegion?.label}
@@ -155,6 +165,7 @@ export const BucketDetailsDrawer = React.memo(
                 payload
               );
             }}
+            endpointType={endpointType}
             name={bucketLabel}
             variant="bucket"
           />

packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx

@@ -238,6 +238,7 @@ export const BucketLanding = () => {
         bucketLabel={bucketForDetails?.label}
         cluster={bucketForDetails?.cluster}
         created={bucketForDetails?.created}
+        endpointType={bucketForDetails?.endpoint_type}
         hostname={bucketForDetails?.hostname}
         objectsNumber={bucketForDetails?.objects}
         onClose={closeBucketDetailDrawer}

packages/manager/src/features/ObjectStorage/BucketLanding/BucketTable.tsx

@@ -1,4 +1,3 @@
-import { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage';
 import * as React from 'react';
 
 import { Hidden } from 'src/components/Hidden';
@@ -13,6 +12,8 @@ import { TableSortCell } from 'src/components/TableSortCell';
 
 import { BucketTableRow } from './BucketTableRow';
 
+import type { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage';
+
 interface Props {
   data: ObjectStorageBucket[];
   handleClickDetails: (bucket: ObjectStorageBucket) => void;
@@ -32,6 +33,8 @@ export const BucketTable = (props: Props) => {
     orderBy,
   } = props;
 
+  const isEndpointTypeAvailable = Boolean(data[0]?.endpoint_type);
+
   return (
     <Paginate data={data} pageSize={25}>
       {({
@@ -66,6 +69,19 @@ export const BucketTable = (props: Props) => {
                     Region
                   </TableSortCell>
                 </Hidden>
+                {isEndpointTypeAvailable && (
+                  <Hidden lgDown>
+                    <TableSortCell
+                      active={orderBy === 'endpointType'}
+                      data-qa-created
+                      direction={order}
+                      handleClick={handleOrderChange}
+                      label="endpointType"
+                    >
+                      Endpoint Type
+                    </TableSortCell>
+                  </Hidden>
+                )}
                 <Hidden lgDown>
                   <TableSortCell
                     active={orderBy === 'created'}

packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx

@@ -1,4 +1,3 @@
-import { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
@@ -24,6 +23,8 @@ import {
   StyledBucketSizeCell,
 } from './BucketTableRow.styles';
 
+import type { ObjectStorageBucket } from '@linode/api-v4/lib/object-storage';
+
 export interface BucketTableRowProps extends ObjectStorageBucket {
   onDetails: () => void;
   onRemove: () => void;
@@ -33,6 +34,7 @@ export const BucketTableRow = (props: BucketTableRowProps) => {
   const {
     cluster,
     created,
+    endpoint_type,
     hostname,
     label,
     objects,
@@ -62,6 +64,9 @@ export const BucketTableRow = (props: BucketTableRowProps) => {
 
   const regionsLookup = regions && getRegionsByRegionId(regions);
 
+  const isLegacy = endpoint_type === 'E0';
+  const typeLabel = isLegacy ? 'Legacy' : 'Standard';
+
   return (
     <StyledBucketRow data-qa-bucket-cell={label} key={label}>
       <TableCell>
@@ -92,6 +97,15 @@ export const BucketTableRow = (props: BucketTableRowProps) => {
           </Typography>
         </StyledBucketRegionCell>
       </Hidden>
+      {Boolean(endpoint_type) && (
+        <Hidden lgDown>
+          <TableCell>
+            <Typography data-qa-size variant="body1">
+              {typeLabel} ({endpoint_type})
+            </Typography>
+          </TableCell>
+        </Hidden>
+      )}
       <Hidden lgDown>
         <TableCell>
           <DateTimeDisplay data-qa-created value={created} />