upcoming: [M3-8306] - Hide CORS and SSL for OBJ Gen2

packages/manager/.changeset/pr-10776-upcoming-features-1723515799181.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Hide CORS and SSL for OBJ Gen2 ([#10776](https://github.com/linode/manager/pull/10776))

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

@@ -57,6 +57,8 @@ export const AccessSelect = React.memo((props: Props) => {
   // State for dealing with the confirmation modal when selecting read/write.
   const { close: closeDialog, isOpen, open: openDialog } = useOpenClose();
   const label = capitalize(variant);
+  const isCorsEnabled =
+    variant === 'bucket' && endpointType !== 'E2' && endpointType !== 'E3';
 
   React.useEffect(() => {
     setUpdateAccessError('');
@@ -141,9 +143,6 @@ 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');
@@ -208,7 +207,19 @@ export const AccessSelect = React.memo((props: Props) => {
           </Link>
           .
         </Typography>
-      ) : null}
+      ) : (
+        // TODO: OBJGen2 - We need to handle link in upcoming PR
+        <Notice spacingBottom={0} spacingTop={16} variant="warning">
+          <Typography
+            sx={(theme) => ({
+              fontFamily: theme.font.bold,
+            })}
+          >
+            CORS (Cross Origin Sharing) is not available for endpoint types E2
+            and E3. <Link to="#">Learn more</Link>.
+          </Typography>
+        </Notice>
+      )}
 
       <ActionsPanel
         primaryButtonProps={{

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

@@ -10,7 +10,10 @@ import { Typography } from 'src/components/Typography';
 
 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 const StyledRootContainer = styled(Paper, {
   label: 'StyledRootContainer',
@@ -21,10 +24,11 @@ export const StyledRootContainer = styled(Paper, {
 interface Props {
   bucketName: string;
   clusterId: string;
+  endpointType?: ObjectStorageEndpointTypes;
 }
 
 export const BucketAccess = React.memo((props: Props) => {
-  const { bucketName, clusterId } = props;
+  const { bucketName, clusterId, endpointType } = props;
 
   return (
     <StyledRootContainer>
@@ -38,6 +42,7 @@ export const BucketAccess = React.memo((props: Props) => {
 
           return updateBucketAccess(clusterId, bucketName, payload);
         }}
+        endpointType={endpointType}
         getAccess={() => getBucketAccess(clusterId, bucketName)}
         name={bucketName}
         variant="bucket"

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

@@ -57,6 +57,8 @@ export const BucketDetailLanding = React.memo((props: Props) => {
   const { endpoint_type: endpointType } =
     bucketsData?.buckets.find(({ label }) => label === bucketName) ?? {};
 
+  const isSSLEnabled = endpointType !== 'E2' && endpointType === 'E3';
+
   const tabs = [
     {
       routeName: `${props.match.url}/objects`,
@@ -66,10 +68,14 @@ export const BucketDetailLanding = React.memo((props: Props) => {
       routeName: `${props.match.url}/access`,
       title: 'Access',
     },
-    {
-      routeName: `${props.match.url}/ssl`,
-      title: 'SSL/TLS',
-    },
+    ...(!isSSLEnabled
+      ? [
+          {
+            routeName: `${props.match.url}/ssl`,
+            title: 'SSL/TLS',
+          },
+        ]
+      : []),
   ];
 
   const [index, setIndex] = React.useState(
@@ -109,7 +115,11 @@ export const BucketDetailLanding = React.memo((props: Props) => {
               <ObjectList {...props} endpointType={endpointType} />
             </SafeTabPanel>
             <SafeTabPanel index={1}>
-              <BucketAccess bucketName={bucketName} clusterId={clusterId} />
+              <BucketAccess
+                bucketName={bucketName}
+                clusterId={clusterId}
+                endpointType={endpointType}
+              />
             </SafeTabPanel>
             <SafeTabPanel index={2}>
               <BucketSSL bucketName={bucketName} clusterId={clusterId} />

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

@@ -145,11 +145,11 @@ export const useObjectStorageBuckets = (enabled = true) => {
       ? allRegions?.filter((r) => r.capabilities.includes('Object Storage'))
       : undefined;
 
-  const queryEnabled = isObjectStorageGen2Enabled
-    ? Boolean(endpoints) && enabled
-    : isObjMultiClusterEnabled
-    ? Boolean(regions) && enabled
-    : Boolean(clusters) && enabled;
+  const queryEnabled =
+    enabled &&
+    ((isObjectStorageGen2Enabled && Boolean(endpoints)) ||
+      (isObjMultiClusterEnabled && Boolean(regions)) ||
+      Boolean(clusters));
 
   const queryFn = isObjectStorageGen2Enabled
     ? () => getAllBucketsFromEndpoints(endpoints)