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

package/dist/components/buckets/BucketOverview.js

@@ -1,209 +1,498 @@
 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 "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 { Body, Group, GroupContent, GroupName, Key, Row, Table, TableContainer, Value } from "../ui/Table.elements.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";
-const BucketOverview = ({ bucketName, onEmptyBucket, onDeleteBucket, onEditPolicy, renderDeleteButton, renderEmptyButton, isEmptyBucketDisabled = true, isDeleteBucketDisabled = false })=>{
-    const { getS3Config } = useDataBrowserContext();
-    const config = getS3Config();
+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');
+    return context;
+}
+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 })=>{
+    const contextValue = useMemo(()=>({
+            bucketName
+        }), [
+        bucketName
+    ]);
+    return /*#__PURE__*/ jsx(BucketOverviewContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(TableContainer, {
+            children: children
+        })
+    });
+};
+const Actions = /*#__PURE__*/ memo(({ onEmptyBucket, onDeleteBucket, renderEmptyButton, renderDeleteButton, isEmptyBucketDisabled = true, isDeleteBucketDisabled = false })=>{
+    const { bucketName } = useBucketOverviewContext();
+    return /*#__PURE__*/ jsxs(Box, {
+        display: "flex",
+        justifyContent: "flex-end",
+        paddingBottom: spacing.r16,
+        children: [
+            renderEmptyButton ? renderEmptyButton(bucketName) : /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Eraser"
+                }),
+                disabled: isEmptyBucketDisabled,
+                variant: "danger",
+                label: "Empty Bucket",
+                onClick: onEmptyBucket
+            }),
+            renderDeleteButton ? renderDeleteButton(bucketName) : /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Delete"
+                }),
+                disabled: isDeleteBucketDisabled,
+                variant: "danger",
+                label: "Delete Bucket",
+                onClick: onDeleteBucket
+            })
+        ]
+    });
+});
+Actions.displayName = 'BucketOverview.Actions';
+const Section = /*#__PURE__*/ memo(({ title, children })=>/*#__PURE__*/ jsxs(Group, {
+        children: [
+            /*#__PURE__*/ jsx(GroupName, {
+                children: title
+            }),
+            /*#__PURE__*/ jsx(GroupContent, {
+                children: children
+            })
+        ]
+    }));
+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 /*#__PURE__*/ jsxs(Row, {
+        children: [
+            /*#__PURE__*/ jsx(Key, {
+                children: label
+            }),
+            actions ? /*#__PURE__*/ jsxs(GroupValues, {
+                children: [
+                    renderValue(),
+                    actions
+                ]
+            }) : /*#__PURE__*/ jsx(Value, {
+                children: renderValue()
+            })
+        ]
+    });
+});
+Field.displayName = 'BucketOverview.Field';
+const Sections = /*#__PURE__*/ memo(({ children })=>/*#__PURE__*/ jsx(Table, {
+        children: /*#__PURE__*/ jsx(Body, {
+            children: children
+        })
+    }));
+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
     });
-    const { data: aclData, status: aclStatus } = useGetBucketAcl({
+    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: fields.map((field)=>/*#__PURE__*/ jsx(Field, {
+                label: field.label,
+                actions: field.actions,
+                children: field.value
+            }, field.id))
+    });
+});
+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 { data: corsData, status: corsStatus } = useGetBucketCors({
+    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: fields.map((field)=>/*#__PURE__*/ jsx(Field, {
+                label: field.label,
+                actions: field.actions,
+                children: field.value
+            }, field.id))
+    });
+});
+DataProtectionSection.displayName = 'BucketOverview.DataProtectionSection';
+const PermissionsSection = /*#__PURE__*/ memo(({ onEditPolicy, onEditCors, ownerField, aclField, corsField, publicField, bucketPolicyField, renderOwner, renderAcl, renderCors, renderPublic, renderBucketPolicy })=>{
+    const { bucketName } = useBucketOverviewContext();
+    const { extraBucketOverviewPermissions } = useDataBrowserUICustomization();
+    const config = useDataBrowserConfig();
+    const { data: aclData, status: aclStatus } = useGetBucketAcl({
         Bucket: bucketName
     });
-    const { data: objectLockData, status: objectLockStatus } = useGetBucketObjectLockConfiguration({
+    const { data: corsData, status: corsStatus, error: corsError } = useGetBucketCors({
         Bucket: bucketName
     });
     const { data: policyData, error: policyError, status: policyStatus } = useGetBucketPolicy({
         Bucket: bucketName
     });
-    return /*#__PURE__*/ jsxs(TableContainer, {
-        children: [
-            /*#__PURE__*/ jsxs(Box, {
-                display: "flex",
-                justifyContent: "flex-end",
-                paddingBottom: spacing.r16,
-                children: [
-                    renderEmptyButton ? renderEmptyButton(bucketName) : /*#__PURE__*/ jsx(Button, {
-                        icon: /*#__PURE__*/ jsx(Icon, {
-                            name: "Eraser"
-                        }),
-                        disabled: isEmptyBucketDisabled,
-                        variant: "danger",
-                        label: "Empty Bucket",
-                        onClick: onEmptyBucket,
-                        style: {
-                            marginRight: "1rem"
-                        }
-                    }),
-                    renderDeleteButton ? renderDeleteButton(bucketName) : /*#__PURE__*/ jsx(Button, {
-                        icon: /*#__PURE__*/ jsx(Icon, {
-                            name: "Delete"
-                        }),
-                        disabled: isDeleteBucketDisabled,
-                        variant: "danger",
-                        label: "Delete Bucket",
-                        onClick: onDeleteBucket
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Table, {
-                children: /*#__PURE__*/ jsxs(Body, {
-                    children: [
-                        /*#__PURE__*/ jsxs(Group, {
-                            children: [
-                                /*#__PURE__*/ jsx(GroupName, {
-                                    children: "General"
-                                }),
-                                /*#__PURE__*/ jsxs(GroupContent, {
-                                    children: [
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(Key, {
-                                                    children: "Name"
-                                                }),
-                                                /*#__PURE__*/ jsx(Value, {
-                                                    width: "15rem",
-                                                    children: /*#__PURE__*/ jsx(ConstrainedText, {
-                                                        text: bucketName,
-                                                        lineClamp: 2
-                                                    })
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(Key, {
-                                                    children: "Versioning"
-                                                }),
-                                                /*#__PURE__*/ jsx(Value, {
-                                                    children: "pending" === versioningStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === versioningStatus ? "Error" : versioningData?.Status === "Enabled" ? "Active" : "Inactive"
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(Key, {
-                                                    children: "Location"
-                                                }),
-                                                /*#__PURE__*/ jsx(Value, {
-                                                    children: /*#__PURE__*/ jsx(BucketLocation, {
-                                                        bucketName: bucketName
-                                                    })
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxs(Group, {
-                            children: [
-                                /*#__PURE__*/ jsx(GroupName, {
-                                    children: "Data protection"
-                                }),
-                                /*#__PURE__*/ jsx(GroupContent, {
-                                    children: /*#__PURE__*/ jsxs(Row, {
-                                        children: [
-                                            /*#__PURE__*/ jsx(Key, {
-                                                children: "Object-lock"
-                                            }),
-                                            /*#__PURE__*/ jsx(Value, {
-                                                children: "pending" === objectLockStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === objectLockStatus ? "Disabled" : objectLockData?.ObjectLockConfiguration?.ObjectLockEnabled === "Enabled" ? "Enabled" : "Disabled"
-                                            })
-                                        ]
-                                    })
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxs(Group, {
-                            children: [
-                                /*#__PURE__*/ jsx(GroupName, {
-                                    children: "Permissions"
-                                }),
-                                /*#__PURE__*/ jsxs(GroupContent, {
-                                    children: [
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(Key, {
-                                                    children: "Owner"
-                                                }),
-                                                /*#__PURE__*/ jsx(Value, {
-                                                    children: "pending" === aclStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === aclStatus ? "Error" : aclData?.Owner?.DisplayName || "N/A"
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(Key, {
-                                                    children: "ACL"
-                                                }),
-                                                /*#__PURE__*/ jsx(Value, {
-                                                    children: "pending" === aclStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === aclStatus ? "Error" : aclData?.Grants?.length ? `${aclData.Grants.length} Grantee${1 !== aclData.Grants.length ? "s" : ""}` : "N/A"
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(Key, {
-                                                    children: "CORS"
-                                                }),
-                                                /*#__PURE__*/ jsx(Value, {
-                                                    children: "pending" === corsStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === corsStatus ? "No" : corsData?.CORSRules && corsData.CORSRules.length > 0 ? "Yes" : "No"
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(Key, {
-                                                    children: "Public"
-                                                }),
-                                                /*#__PURE__*/ jsx(Value, {
-                                                    children: "pending" === aclStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === aclStatus ? "No" : aclData?.Grants ? aclData.Grants.find((grant)=>grant.Grantee?.URI === (config.publicAclIndicator || "http://acs.amazonaws.com/groups/global/AllUsers")) ? "Yes" : "No" : "No"
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(Key, {
-                                                    children: "Bucket Policy"
-                                                }),
-                                                /*#__PURE__*/ jsx(Value, {
-                                                    children: "error" === policyStatus && policyError?.name !== "NoSuchBucketPolicy" ? "Error" : /*#__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)
-                                                            })
-                                                        ]
-                                                    })
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                })
-            })
-        ]
+    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: fields.map((field)=>/*#__PURE__*/ jsx(Field, {
+                label: field.label,
+                actions: field.actions,
+                children: field.value
+            }, field.id))
     });
-};
-export { BucketOverview };
+});
+PermissionsSection.displayName = 'BucketOverview.PermissionsSection';
+const BucketOverview = BucketOverviewRoot;
+BucketOverview.Actions = Actions;
+BucketOverview.Sections = Sections;
+BucketOverview.Section = Section;
+BucketOverview.Field = Field;
+BucketOverview.GeneralSection = GeneralSection;
+BucketOverview.DataProtectionSection = DataProtectionSection;
+BucketOverview.PermissionsSection = PermissionsSection;
+export { BucketOverview, BucketOverviewContext, Field as BucketOverviewField, Section as BucketOverviewSection, useBucketOverviewContext };