@scality/data-browser-library 1.0.0-preview.9 → 1.0.1

package/dist/components/buckets/BucketOverview.js

@@ -1,37 +1,276 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ConstrainedText, Icon, Loader, spacing } from "@scality/core-ui";
+import { ConstrainedText, Icon, Loader, Stack, spacing } from "@scality/core-ui";
 import { Box, Button } from "@scality/core-ui/dist/next";
-import { createContext, useContext } from "react";
+import { createContext, memo, useContext, useMemo } from "react";
+import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useGetBucketAcl, useGetBucketCors, useGetBucketObjectLockConfiguration, useGetBucketPolicy, useGetBucketVersioning } from "../../hooks/index.js";
-import { useDataBrowserContext } from "../providers/DataBrowserProvider.js";
 import { isNotFoundError } from "../../utils/errorHandling.js";
+import { EditRetentionButton } from "../objects/ObjectLock/EditRetentionButton.js";
+import { useDataBrowserConfig } from "../providers/DataBrowserProvider.js";
 import { Body, Group, GroupContent, GroupName, GroupValues, Key, Row, Table, TableContainer, Value } from "../ui/Table.elements.js";
+import { BucketConfigEditButton } from "./BucketConfigEditButton.js";
 import { BucketLocation } from "./BucketLocation.js";
-import { BucketPolicyButton } from "./BucketPolicyButton.js";
-import { EditRetentionButton } from "../objects/ObjectLock/EditRetentionButton.js";
+const ERROR_NO_SUCH_BUCKET_POLICY = 'NoSuchBucketPolicy';
+const DEFAULT_PUBLIC_ACL_URI = 'http://acs.amazonaws.com/groups/global/AllUsers';
+const STATUS_PENDING = 'pending';
+const STATUS_ERROR = 'error';
+const VERSIONING_STATUS_ENABLED = 'Enabled';
+const OBJECT_LOCK_ENABLED = 'Enabled';
+const ErrorField = ()=>/*#__PURE__*/ jsxs(Stack, {
+        direction: "horizontal",
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                name: "Exclamation-circle",
+                color: "statusWarning"
+            }),
+            " Error"
+        ]
+    });
+const resolveFieldValue = (bucketName, config)=>{
+    if (void 0 !== config.slotOverride) return config.slotOverride;
+    if (config.renderOverride) return config.renderOverride(bucketName);
+    return config.defaultValue;
+};
+const buildCustomField = (fieldConfig, entityName)=>{
+    const RenderComponent = fieldConfig.render;
+    return {
+        id: fieldConfig.id,
+        label: fieldConfig.label || fieldConfig.id,
+        value: /*#__PURE__*/ jsx(RenderComponent, {
+            entityName: entityName
+        })
+    };
+};
+const mergeFieldsWithExtras = (defaultFields, extraFieldConfigs, entityName, fieldOrder)=>{
+    const fieldsMap = {
+        ...defaultFields
+    };
+    const extraFields = [];
+    extraFieldConfigs?.forEach((fieldConfig)=>{
+        const fieldItem = buildCustomField(fieldConfig, entityName);
+        if (fieldsMap[fieldConfig.id]) fieldsMap[fieldConfig.id] = fieldItem;
+        else extraFields.push(fieldItem);
+    });
+    return [
+        ...fieldOrder.map((key)=>fieldsMap[key]),
+        ...extraFields
+    ];
+};
+const createNameField = (bucketName, nameField, renderName)=>({
+        id: 'name',
+        label: 'Name',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: nameField,
+            renderOverride: renderName,
+            defaultValue: /*#__PURE__*/ jsx(ConstrainedText, {
+                text: bucketName,
+                lineClamp: 2
+            })
+        })
+    });
+const createVersioningField = (bucketName, versioningData, versioningStatus, versioningField, renderVersioning)=>{
+    let defaultValue = 'Inactive';
+    if (versioningStatus === STATUS_PENDING) defaultValue = /*#__PURE__*/ jsx(Loader, {});
+    else if (versioningStatus === STATUS_ERROR) defaultValue = /*#__PURE__*/ jsx(ErrorField, {});
+    else if (versioningData?.Status === VERSIONING_STATUS_ENABLED) defaultValue = 'Active';
+    return {
+        id: 'versioning',
+        label: 'Versioning',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: versioningField,
+            renderOverride: renderVersioning,
+            defaultValue
+        })
+    };
+};
+const createLocationField = (bucketName, locationField, renderLocation)=>({
+        id: 'location',
+        label: 'Location',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: locationField,
+            renderOverride: renderLocation,
+            defaultValue: /*#__PURE__*/ jsx(BucketLocation, {
+                bucketName: bucketName
+            })
+        })
+    });
+const createObjectLockField = (bucketName, objectLockStatus, isObjectLockNotConfigured, isObjectLockEnabled, objectLockField, renderObjectLock)=>{
+    let defaultValue;
+    defaultValue = objectLockStatus === STATUS_PENDING ? /*#__PURE__*/ jsx(Loader, {}) : objectLockStatus !== STATUS_ERROR || isObjectLockNotConfigured ? isObjectLockEnabled ? 'Enabled' : 'Disabled' : /*#__PURE__*/ jsx(ErrorField, {});
+    return {
+        id: 'objectLock',
+        label: 'Object-lock',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: objectLockField,
+            renderOverride: renderObjectLock,
+            defaultValue
+        })
+    };
+};
+const createDefaultRetentionField = (bucketName, objectLockData, objectLockStatus, defaultRetentionField, renderDefaultRetention)=>{
+    const defaultValue = objectLockStatus === STATUS_PENDING ? /*#__PURE__*/ jsx(Loader, {}) : getDefaultBucketRetention(objectLockData);
+    return {
+        id: 'defaultRetention',
+        label: 'Default Retention',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: defaultRetentionField,
+            renderOverride: renderDefaultRetention,
+            defaultValue
+        }),
+        actions: /*#__PURE__*/ jsx(EditRetentionButton, {
+            bucketName: bucketName
+        })
+    };
+};
+const createOwnerField = (bucketName, aclData, aclStatus, ownerField, renderOwner)=>{
+    let defaultValue = 'N/A';
+    if (aclStatus === STATUS_PENDING) defaultValue = /*#__PURE__*/ jsx(Loader, {});
+    else if (aclStatus === STATUS_ERROR) defaultValue = /*#__PURE__*/ jsx(ErrorField, {});
+    else if (aclData?.Owner?.DisplayName) defaultValue = aclData.Owner.DisplayName;
+    return {
+        id: 'owner',
+        label: 'Owner',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: ownerField,
+            renderOverride: renderOwner,
+            defaultValue
+        })
+    };
+};
+const createAclField = (bucketName, aclData, aclStatus, aclField, renderAcl)=>{
+    let defaultValue = 'N/A';
+    if (aclStatus === STATUS_PENDING) defaultValue = /*#__PURE__*/ jsx(Loader, {});
+    else if (aclStatus === STATUS_ERROR) defaultValue = /*#__PURE__*/ jsx(ErrorField, {});
+    else if (aclData?.Grants?.length) {
+        const count = aclData.Grants.length;
+        defaultValue = `${count} Grantee${1 !== count ? 's' : ''}`;
+    }
+    return {
+        id: 'acl',
+        label: 'ACL',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: aclField,
+            renderOverride: renderAcl,
+            defaultValue
+        })
+    };
+};
+const createCorsField = (bucketName, corsData, corsStatus, corsError, onEditCors, corsField, renderCors)=>{
+    let defaultValue;
+    const ERROR_NO_SUCH_CORS = 'NoSuchCORSConfiguration';
+    if (corsStatus === STATUS_ERROR && corsError?.name !== ERROR_NO_SUCH_CORS) defaultValue = /*#__PURE__*/ jsx(ErrorField, {});
+    else {
+        const hasCors = !!(corsData?.CORSRules && corsData.CORSRules.length > 0);
+        const handleEditCors = ()=>onEditCors?.(bucketName);
+        defaultValue = /*#__PURE__*/ jsxs(Box, {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: spacing.r8,
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    children: hasCors ? 'Yes' : 'No'
+                }),
+                /*#__PURE__*/ jsx(BucketConfigEditButton, {
+                    hasConfig: hasCors,
+                    isLoading: corsStatus === STATUS_PENDING,
+                    onEdit: handleEditCors,
+                    configName: "bucket CORS"
+                })
+            ]
+        });
+    }
+    return {
+        id: 'cors',
+        label: 'CORS',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: corsField,
+            renderOverride: renderCors ? (name)=>renderCors(name, onEditCors) : void 0,
+            defaultValue
+        })
+    };
+};
+const createPublicField = (bucketName, aclStatus, isPublic, publicField, renderPublic)=>{
+    const defaultValue = aclStatus === STATUS_PENDING ? /*#__PURE__*/ jsx(Loader, {}) : isPublic ? 'Yes' : 'No';
+    return {
+        id: 'public',
+        label: 'Public',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: publicField,
+            renderOverride: renderPublic,
+            defaultValue
+        })
+    };
+};
+const createBucketPolicyField = (bucketName, policyData, policyStatus, policyError, onEditPolicy, bucketPolicyField, renderBucketPolicy)=>{
+    let defaultValue;
+    if (policyStatus === STATUS_ERROR && policyError?.name !== ERROR_NO_SUCH_BUCKET_POLICY) defaultValue = /*#__PURE__*/ jsx(ErrorField, {});
+    else {
+        const hasPolicy = !!policyData?.Policy;
+        const handleEditPolicy = ()=>onEditPolicy?.(bucketName);
+        defaultValue = /*#__PURE__*/ jsxs(Box, {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: spacing.r8,
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    children: hasPolicy ? 'Configured' : 'Not configured'
+                }),
+                /*#__PURE__*/ jsx(BucketConfigEditButton, {
+                    hasConfig: hasPolicy,
+                    isLoading: policyStatus === STATUS_PENDING,
+                    onEdit: handleEditPolicy,
+                    configName: "bucket policy"
+                })
+            ]
+        });
+    }
+    return {
+        id: 'bucketPolicy',
+        label: 'Bucket Policy',
+        value: resolveFieldValue(bucketName, {
+            slotOverride: bucketPolicyField,
+            renderOverride: renderBucketPolicy ? (name)=>renderBucketPolicy(name, onEditPolicy) : void 0,
+            defaultValue
+        })
+    };
+};
 const BucketOverviewContext = /*#__PURE__*/ createContext(null);
 function useBucketOverviewContext() {
     const context = useContext(BucketOverviewContext);
-    if (!context) throw new Error("BucketOverview components must be used within BucketOverview");
+    if (!context) throw new Error('BucketOverview components must be used within BucketOverview');
     return context;
 }
-function getDefaultBucketRetention(objectLockData) {
-    if (!objectLockData?.ObjectLockConfiguration?.Rule?.DefaultRetention || !objectLockData.ObjectLockConfiguration.Rule.DefaultRetention.Days && !objectLockData.ObjectLockConfiguration.Rule.DefaultRetention.Years) return "Inactive";
-    const defaultRetention = objectLockData.ObjectLockConfiguration.Rule.DefaultRetention;
-    const retentionPeriod = defaultRetention.Days ? `${defaultRetention.Days} ${1 === defaultRetention.Days ? "day" : "days"}` : defaultRetention.Years ? `${defaultRetention.Years} ${1 === defaultRetention.Years ? "year" : "years"}` : "";
-    const mode = defaultRetention.Mode || "GOVERNANCE";
+const getDefaultBucketRetention = (objectLockData)=>{
+    const defaultRetention = objectLockData?.ObjectLockConfiguration?.Rule?.DefaultRetention;
+    if (!defaultRetention || !defaultRetention.Days && !defaultRetention.Years) return 'Inactive';
+    let retentionPeriod = '';
+    if (defaultRetention.Days) {
+        const unit = 1 === defaultRetention.Days ? 'day' : 'days';
+        retentionPeriod = `${defaultRetention.Days} ${unit}`;
+    } else if (defaultRetention.Years) {
+        const unit = 1 === defaultRetention.Years ? 'year' : 'years';
+        retentionPeriod = `${defaultRetention.Years} ${unit}`;
+    }
+    const mode = defaultRetention.Mode || 'GOVERNANCE';
     const capitalizedMode = mode.charAt(0).toUpperCase() + mode.slice(1).toLowerCase();
     return `${capitalizedMode} - ${retentionPeriod}`;
-}
-const BucketOverviewRoot = ({ bucketName, children })=>/*#__PURE__*/ jsx(BucketOverviewContext.Provider, {
-        value: {
+};
+const BucketOverviewRoot = ({ bucketName, children })=>{
+    const contextValue = useMemo(()=>({
             bucketName
-        },
+        }), [
+        bucketName
+    ]);
+    return /*#__PURE__*/ jsx(BucketOverviewContext.Provider, {
+        value: contextValue,
         children: /*#__PURE__*/ jsx(TableContainer, {
             children: children
         })
     });
-const Actions = ({ onEmptyBucket, onDeleteBucket, renderEmptyButton, renderDeleteButton, isEmptyBucketDisabled = true, isDeleteBucketDisabled = false })=>{
+};
+const Actions = /*#__PURE__*/ memo(({ onEmptyBucket, onDeleteBucket, renderEmptyButton, renderDeleteButton, isEmptyBucketDisabled = true, isDeleteBucketDisabled = false })=>{
     const { bucketName } = useBucketOverviewContext();
     return /*#__PURE__*/ jsxs(Box, {
         display: "flex",
@@ -45,10 +284,7 @@ const Actions = ({ onEmptyBucket, onDeleteBucket, renderEmptyButton, renderDelet
                 disabled: isEmptyBucketDisabled,
                 variant: "danger",
                 label: "Empty Bucket",
-                onClick: onEmptyBucket,
-                style: {
-                    marginRight: "1rem"
-                }
+                onClick: onEmptyBucket
             }),
             renderDeleteButton ? renderDeleteButton(bucketName) : /*#__PURE__*/ jsx(Button, {
                 icon: /*#__PURE__*/ jsx(Icon, {
@@ -61,8 +297,9 @@ const Actions = ({ onEmptyBucket, onDeleteBucket, renderEmptyButton, renderDelet
             })
         ]
     });
-};
-const Section = ({ title, children })=>/*#__PURE__*/ jsxs(Group, {
+});
+Actions.displayName = 'BucketOverview.Actions';
+const Section = /*#__PURE__*/ memo(({ title, children })=>/*#__PURE__*/ jsxs(Group, {
         children: [
             /*#__PURE__*/ jsx(GroupName, {
                 children: title
@@ -71,12 +308,13 @@ const Section = ({ title, children })=>/*#__PURE__*/ jsxs(Group, {
                 children: children
             })
         ]
-    });
-const Field = ({ label, value, loading, error, errorMessage = "Error", children, actions })=>{
+    }));
+Section.displayName = 'BucketOverview.Section';
+const Field = /*#__PURE__*/ memo(({ label, value, loading, error, errorMessage = 'Error', children, actions })=>{
     const renderValue = ()=>{
         if (loading) return /*#__PURE__*/ jsx(Loader, {});
         if (error) return errorMessage;
-        return children || value || "N/A";
+        return children || value || 'N/A';
     };
     return /*#__PURE__*/ jsxs(Row, {
         children: [
@@ -93,193 +331,162 @@ const Field = ({ label, value, loading, error, errorMessage = "Error", children,
             })
         ]
     });
-};
-const Sections = ({ children })=>/*#__PURE__*/ jsx(Table, {
+});
+Field.displayName = 'BucketOverview.Field';
+const Sections = /*#__PURE__*/ memo(({ children })=>/*#__PURE__*/ jsx(Table, {
         children: /*#__PURE__*/ jsx(Body, {
             children: children
         })
-    });
-const GeneralSection = ({ nameField, versioningField, locationField, renderName, renderVersioning, renderLocation })=>{
+    }));
+Sections.displayName = 'BucketOverview.Sections';
+const GeneralSection = /*#__PURE__*/ memo(({ nameField, versioningField, locationField, renderName, renderVersioning, renderLocation })=>{
     const { bucketName } = useBucketOverviewContext();
+    const { extraBucketOverviewGeneral } = useDataBrowserUICustomization();
     const { data: versioningData, status: versioningStatus } = useGetBucketVersioning({
         Bucket: bucketName
     });
-    return /*#__PURE__*/ jsxs(Section, {
+    const fields = useMemo(()=>{
+        const defaultFields = {
+            name: createNameField(bucketName, nameField, renderName),
+            versioning: createVersioningField(bucketName, versioningData, versioningStatus, versioningField, renderVersioning),
+            location: createLocationField(bucketName, locationField, renderLocation)
+        };
+        return mergeFieldsWithExtras(defaultFields, extraBucketOverviewGeneral, bucketName, [
+            'name',
+            'versioning',
+            'location'
+        ]);
+    }, [
+        bucketName,
+        extraBucketOverviewGeneral,
+        nameField,
+        versioningField,
+        locationField,
+        renderName,
+        renderVersioning,
+        renderLocation,
+        versioningData,
+        versioningStatus
+    ]);
+    return /*#__PURE__*/ jsx(Section, {
         title: "General",
-        children: [
-            nameField ? /*#__PURE__*/ jsx(Field, {
-                label: "Name",
-                children: nameField
-            }) : renderName ? /*#__PURE__*/ jsx(Field, {
-                label: "Name",
-                children: renderName(bucketName)
-            }) : /*#__PURE__*/ jsx(Field, {
-                label: "Name",
-                value: /*#__PURE__*/ jsx(ConstrainedText, {
-                    text: bucketName,
-                    lineClamp: 2
-                })
-            }),
-            versioningField ? /*#__PURE__*/ jsx(Field, {
-                label: "Versioning",
-                children: versioningField
-            }) : renderVersioning ? /*#__PURE__*/ jsx(Field, {
-                label: "Versioning",
-                children: renderVersioning(bucketName)
-            }) : /*#__PURE__*/ jsx(Field, {
-                label: "Versioning",
-                loading: "pending" === versioningStatus,
-                error: "error" === versioningStatus,
-                value: versioningData?.Status === "Enabled" ? "Active" : "Inactive"
-            }),
-            locationField ? /*#__PURE__*/ jsx(Field, {
-                label: "Location",
-                children: locationField
-            }) : renderLocation ? /*#__PURE__*/ jsx(Field, {
-                label: "Location",
-                children: renderLocation(bucketName)
-            }) : /*#__PURE__*/ jsx(Field, {
-                label: "Location",
-                value: /*#__PURE__*/ jsx(BucketLocation, {
-                    bucketName: bucketName
-                })
-            })
-        ]
+        children: fields.map((field)=>/*#__PURE__*/ jsx(Field, {
+                label: field.label,
+                actions: field.actions,
+                children: field.value
+            }, field.id))
     });
-};
-const DataProtectionSection = ({ objectLockField, defaultRetentionField, renderObjectLock, renderDefaultRetention })=>{
+});
+GeneralSection.displayName = 'BucketOverview.GeneralSection';
+const DataProtectionSection = /*#__PURE__*/ memo(({ objectLockField, defaultRetentionField, renderObjectLock, renderDefaultRetention })=>{
     const { bucketName } = useBucketOverviewContext();
+    const { extraBucketOverviewDataProtection } = useDataBrowserUICustomization();
     const { data: objectLockData, status: objectLockStatus, error: objectLockError } = useGetBucketObjectLockConfiguration({
         Bucket: bucketName
     });
-    const isObjectLockNotConfigured = "error" === objectLockStatus && isNotFoundError(objectLockError);
-    const isObjectLockEnabled = objectLockData?.ObjectLockConfiguration?.ObjectLockEnabled === "Enabled";
-    return /*#__PURE__*/ jsxs(Section, {
+    const isObjectLockNotConfigured = objectLockStatus === STATUS_ERROR && isNotFoundError(objectLockError);
+    const isObjectLockEnabled = objectLockData?.ObjectLockConfiguration?.ObjectLockEnabled === OBJECT_LOCK_ENABLED;
+    const fields = useMemo(()=>{
+        const defaultFields = {
+            objectLock: createObjectLockField(bucketName, objectLockStatus, isObjectLockNotConfigured, isObjectLockEnabled, objectLockField, renderObjectLock),
+            defaultRetention: createDefaultRetentionField(bucketName, objectLockData, objectLockStatus, defaultRetentionField, renderDefaultRetention)
+        };
+        const fieldOrder = isObjectLockEnabled ? [
+            'objectLock',
+            'defaultRetention'
+        ] : [
+            'objectLock'
+        ];
+        return mergeFieldsWithExtras(defaultFields, extraBucketOverviewDataProtection, bucketName, fieldOrder);
+    }, [
+        bucketName,
+        extraBucketOverviewDataProtection,
+        objectLockField,
+        defaultRetentionField,
+        renderObjectLock,
+        renderDefaultRetention,
+        objectLockData,
+        objectLockStatus,
+        isObjectLockNotConfigured,
+        isObjectLockEnabled
+    ]);
+    return /*#__PURE__*/ jsx(Section, {
         title: "Data protection",
-        children: [
-            objectLockField ? /*#__PURE__*/ jsx(Field, {
-                label: "Object-lock",
-                children: objectLockField
-            }) : renderObjectLock ? /*#__PURE__*/ jsx(Field, {
-                label: "Object-lock",
-                children: renderObjectLock(bucketName)
-            }) : /*#__PURE__*/ jsx(Field, {
-                label: "Object-lock",
-                loading: "pending" === objectLockStatus,
-                error: "error" === objectLockStatus && !isObjectLockNotConfigured,
-                value: isObjectLockEnabled ? "Enabled" : "Disabled"
-            }),
-            !defaultRetentionField && !renderDefaultRetention && isObjectLockEnabled && /*#__PURE__*/ jsx(Field, {
-                label: "Default Retention",
-                loading: "pending" === objectLockStatus,
-                value: getDefaultBucketRetention(objectLockData),
-                actions: /*#__PURE__*/ jsx(EditRetentionButton, {
-                    bucketName: bucketName
-                })
-            }),
-            defaultRetentionField && /*#__PURE__*/ jsx(Field, {
-                label: "Default Retention",
-                children: defaultRetentionField
-            }),
-            renderDefaultRetention && /*#__PURE__*/ jsx(Field, {
-                label: "Default Retention",
-                children: renderDefaultRetention(bucketName)
-            })
-        ]
+        children: fields.map((field)=>/*#__PURE__*/ jsx(Field, {
+                label: field.label,
+                actions: field.actions,
+                children: field.value
+            }, field.id))
     });
-};
-const PermissionsSection = ({ onEditPolicy, ownerField, aclField, corsField, publicField, bucketPolicyField, renderOwner, renderAcl, renderCors, renderPublic, renderBucketPolicy })=>{
+});
+DataProtectionSection.displayName = 'BucketOverview.DataProtectionSection';
+const PermissionsSection = /*#__PURE__*/ memo(({ onEditPolicy, onEditCors, ownerField, aclField, corsField, publicField, bucketPolicyField, renderOwner, renderAcl, renderCors, renderPublic, renderBucketPolicy })=>{
     const { bucketName } = useBucketOverviewContext();
-    const { getS3Config } = useDataBrowserContext();
-    const config = getS3Config();
+    const { extraBucketOverviewPermissions } = useDataBrowserUICustomization();
+    const config = useDataBrowserConfig();
     const { data: aclData, status: aclStatus } = useGetBucketAcl({
         Bucket: bucketName
     });
-    const { data: corsData, status: corsStatus } = useGetBucketCors({
+    const { data: corsData, status: corsStatus, error: corsError } = useGetBucketCors({
         Bucket: bucketName
     });
     const { data: policyData, error: policyError, status: policyStatus } = useGetBucketPolicy({
         Bucket: bucketName
     });
-    const isPublic = aclData?.Grants?.find((grant)=>grant.Grantee?.URI === (config.publicAclIndicator || "http://acs.amazonaws.com/groups/global/AllUsers"));
-    return /*#__PURE__*/ jsxs(Section, {
+    const isPublic = useMemo(()=>aclData?.Grants?.some((grant)=>grant.Grantee?.URI === (config.publicAclIndicator || DEFAULT_PUBLIC_ACL_URI)) ?? false, [
+        aclData?.Grants,
+        config.publicAclIndicator
+    ]);
+    const fields = useMemo(()=>{
+        const defaultFields = {
+            owner: createOwnerField(bucketName, aclData, aclStatus, ownerField, renderOwner),
+            acl: createAclField(bucketName, aclData, aclStatus, aclField, renderAcl),
+            cors: createCorsField(bucketName, corsData, corsStatus, corsError, onEditCors, corsField, renderCors),
+            public: createPublicField(bucketName, aclStatus, isPublic, publicField, renderPublic),
+            bucketPolicy: createBucketPolicyField(bucketName, policyData, policyStatus, policyError, onEditPolicy, bucketPolicyField, renderBucketPolicy)
+        };
+        return mergeFieldsWithExtras(defaultFields, extraBucketOverviewPermissions, bucketName, [
+            'owner',
+            'acl',
+            'cors',
+            'public',
+            'bucketPolicy'
+        ]);
+    }, [
+        bucketName,
+        extraBucketOverviewPermissions,
+        ownerField,
+        aclField,
+        corsField,
+        publicField,
+        bucketPolicyField,
+        renderOwner,
+        renderAcl,
+        renderCors,
+        renderPublic,
+        renderBucketPolicy,
+        onEditPolicy,
+        onEditCors,
+        aclData,
+        aclStatus,
+        corsData,
+        corsStatus,
+        corsError,
+        policyData,
+        policyError,
+        policyStatus,
+        isPublic
+    ]);
+    return /*#__PURE__*/ jsx(Section, {
         title: "Permissions",
-        children: [
-            ownerField ? /*#__PURE__*/ jsx(Field, {
-                label: "Owner",
-                children: ownerField
-            }) : renderOwner ? /*#__PURE__*/ jsx(Field, {
-                label: "Owner",
-                children: renderOwner(bucketName)
-            }) : /*#__PURE__*/ jsx(Field, {
-                label: "Owner",
-                loading: "pending" === aclStatus,
-                error: "error" === aclStatus,
-                value: aclData?.Owner?.DisplayName || "N/A"
-            }),
-            aclField ? /*#__PURE__*/ jsx(Field, {
-                label: "ACL",
-                children: aclField
-            }) : renderAcl ? /*#__PURE__*/ jsx(Field, {
-                label: "ACL",
-                children: renderAcl(bucketName)
-            }) : /*#__PURE__*/ jsx(Field, {
-                label: "ACL",
-                loading: "pending" === aclStatus,
-                error: "error" === aclStatus,
-                value: aclData?.Grants?.length ? `${aclData.Grants.length} Grantee${1 !== aclData.Grants.length ? "s" : ""}` : "N/A"
-            }),
-            corsField ? /*#__PURE__*/ jsx(Field, {
-                label: "CORS",
-                children: corsField
-            }) : renderCors ? /*#__PURE__*/ jsx(Field, {
-                label: "CORS",
-                children: renderCors(bucketName)
-            }) : /*#__PURE__*/ jsx(Field, {
-                label: "CORS",
-                loading: "pending" === corsStatus,
-                value: corsData?.CORSRules && corsData.CORSRules.length > 0 ? "Yes" : "No"
-            }),
-            publicField ? /*#__PURE__*/ jsx(Field, {
-                label: "Public",
-                children: publicField
-            }) : renderPublic ? /*#__PURE__*/ jsx(Field, {
-                label: "Public",
-                children: renderPublic(bucketName)
-            }) : /*#__PURE__*/ jsx(Field, {
-                label: "Public",
-                loading: "pending" === aclStatus,
-                value: isPublic ? "Yes" : "No"
-            }),
-            bucketPolicyField ? /*#__PURE__*/ jsx(Field, {
-                label: "Bucket Policy",
-                children: bucketPolicyField
-            }) : renderBucketPolicy ? /*#__PURE__*/ jsx(Field, {
-                label: "Bucket Policy",
-                children: renderBucketPolicy(bucketName, onEditPolicy)
-            }) : /*#__PURE__*/ jsx(Field, {
-                label: "Bucket Policy",
-                error: "error" === policyStatus && policyError?.name !== "NoSuchBucketPolicy",
-                children: /*#__PURE__*/ jsxs(Box, {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    gap: spacing.r8,
-                    children: [
-                        /*#__PURE__*/ jsx("span", {
-                            children: policyData?.Policy ? "Configured" : "Not configured"
-                        }),
-                        /*#__PURE__*/ jsx(BucketPolicyButton, {
-                            hasPolicy: !!policyData?.Policy,
-                            isLoading: "pending" === policyStatus,
-                            onEdit: ()=>onEditPolicy?.(bucketName)
-                        })
-                    ]
-                })
-            })
-        ]
+        children: fields.map((field)=>/*#__PURE__*/ jsx(Field, {
+                label: field.label,
+                actions: field.actions,
+                children: field.value
+            }, field.id))
     });
-};
+});
+PermissionsSection.displayName = 'BucketOverview.PermissionsSection';
 const BucketOverview = BucketOverviewRoot;
 BucketOverview.Actions = Actions;
 BucketOverview.Sections = Sections;
@@ -288,4 +495,4 @@ BucketOverview.Field = Field;
 BucketOverview.GeneralSection = GeneralSection;
 BucketOverview.DataProtectionSection = DataProtectionSection;
 BucketOverview.PermissionsSection = PermissionsSection;
-export { BucketOverview, Field as BucketOverviewField, Section as BucketOverviewSection };
+export { BucketOverview, BucketOverviewContext, Field as BucketOverviewField, Section as BucketOverviewSection, useBucketOverviewContext };