@scality/data-browser-library 1.0.0-preview.11 → 1.0.0-preview.13

package/dist/components/buckets/BucketOverview.js

@@ -1,37 +1,254 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ConstrainedText, Icon, Loader, spacing } from "@scality/core-ui";
+import { createContext, memo, useContext, useMemo } from "react";
+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 { 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 { useDataBrowserContext } from "../providers/DataBrowserProvider.js";
 import { Body, Group, GroupContent, GroupName, GroupValues, Key, Row, Table, TableContainer, Value } from "../ui/Table.elements.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, corsField, renderCors)=>{
+    let defaultValue = "No";
+    if (corsStatus === STATUS_PENDING) defaultValue = /*#__PURE__*/ jsx(Loader, {});
+    else if (corsData?.CORSRules && corsData.CORSRules.length > 0) defaultValue = "Yes";
+    return {
+        id: "cors",
+        label: "CORS",
+        value: resolveFieldValue(bucketName, {
+            slotOverride: corsField,
+            renderOverride: renderCors,
+            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(BucketPolicyButton, {
+                    hasPolicy: hasPolicy,
+                    isLoading: policyStatus === STATUS_PENDING,
+                    onEdit: handleEditPolicy
+                })
+            ]
+        });
+    }
+    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;
 }
-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 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 +262,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 +275,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,8 +286,9 @@ 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;
@@ -93,103 +309,98 @@ 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, ownerField, aclField, corsField, publicField, bucketPolicyField, renderOwner, renderAcl, renderCors, renderPublic, renderBucketPolicy })=>{
     const { bucketName } = useBucketOverviewContext();
+    const { extraBucketOverviewPermissions } = useDataBrowserUICustomization();
     const { getS3Config } = useDataBrowserContext();
     const config = getS3Config();
     const { data: aclData, status: aclStatus } = useGetBucketAcl({
@@ -201,85 +412,58 @@ const PermissionsSection = ({ onEditPolicy, ownerField, aclField, corsField, pub
     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, 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,
+        aclData,
+        aclStatus,
+        corsData,
+        corsStatus,
+        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;

package/dist/components/buckets/BucketPage.js

@@ -5,7 +5,6 @@ import { Navigate, useNavigate, useParams } from "react-router-dom";
 import { BrowserPageLayout } from "../layouts/BrowserPageLayout.js";
 import { BucketDetails } from "./BucketDetails.js";
 import { BucketList } from "./BucketList.js";
-import { BucketLocation } from "./BucketLocation.js";
 const BucketPage_BucketPage = ()=>{
     const { data, status } = useBuckets();
     const { bucketName } = useParams();
@@ -35,10 +34,7 @@ const BucketPage_BucketPage = ()=>{
             selectedBucketName: bucketName,
             onBucketSelect: (bucketName)=>navigate(`/buckets/${bucketName}`),
             onCreateBucket: ()=>navigate("/buckets/-/create"),
-            onNavigateToBucket: (bucketName)=>navigate(`/buckets/${bucketName}/objects`),
-            renderBucketLocation: (bucketName)=>/*#__PURE__*/ jsx(BucketLocation, {
-                    bucketName: bucketName
-                })
+            onNavigateToBucket: (bucketName)=>navigate(`/buckets/${bucketName}/objects`)
         }),
         rightPanel: /*#__PURE__*/ jsx(BucketDetails, {})
     });

package/dist/components/buckets/BucketVersioning.js

@@ -58,6 +58,9 @@ function BucketVersioning({ tooltipOverlay }) {
         }) : "error" === versioningStatus ? /*#__PURE__*/ jsx(Fragment, {
             children: versioningError?.message
         }) : null,
+        overlayStyle: {
+            maxWidth: "16.5rem"
+        },
         children: /*#__PURE__*/ jsx(Toggle, {
             id: "versioningToggle",
             disabled: "pending" === versioningStatus || "pending" === objectLockStatus || "error" === versioningStatus || isVeeamBucket,

package/dist/components/buckets/EmptyBucketButton.js

@@ -21,7 +21,7 @@ const RetentionText = ()=>/*#__PURE__*/ jsx(Text, {
         children: "If some of the objects you are trying to delete are locked in governance mode, confirming the deletion will effectively delete them as the governance retention will be bypassed."
     });
 const LifecycleText = ()=>/*#__PURE__*/ jsx(Text, {
-        children: "The action of emptying can erase a maximum of 20,000 objects. For buckets with a substantial number of objects, an expiration workflow (lifecycle rule) could provide an effective alternative to emptying the bucket."
+        children: "The action of emptying can erase a maximum of 20 000 objects. For buckets with a substantial number of objects, an expiration workflow (lifecycle rule) could provide an effective alternative to emptying the bucket."
     });
 const EmptyBucketButton = ({ bucketName })=>{
     const [confirmText, setConfirmText] = useState("");