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

package/dist/components/__tests__/UploadButton.test.js

@@ -3,10 +3,10 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user_event from "@testing-library/user-event";
 import { createTestWrapper } from "../../test/testUtils.js";
 import { UploadButton } from "../objects/UploadButton.js";
-describe("UploadButton - Core Functionality", ()=>{
+describe('UploadButton - Core Functionality', ()=>{
     const defaultProps = {
-        bucket: "test-bucket",
-        prefix: "test-prefix"
+        bucket: 'test-bucket',
+        prefix: 'test-prefix'
     };
     const renderUploadButton = (props = {})=>{
         const Wrapper = createTestWrapper();
@@ -17,128 +17,128 @@ describe("UploadButton - Core Functionality", ()=>{
             })
         }));
     };
-    it("renders upload button with default label", ()=>{
+    it('renders upload button with default label', ()=>{
         renderUploadButton();
-        expect(screen.getByRole("button", {
+        expect(screen.getByRole('button', {
             name: /upload/i
         })).toBeInTheDocument();
     });
-    it("renders upload button", ()=>{
+    it('renders upload button', ()=>{
         renderUploadButton();
-        expect(screen.getByRole("button", {
+        expect(screen.getByRole('button', {
             name: /upload/i
         })).toBeInTheDocument();
     });
-    it("opens modal when upload button is clicked", async ()=>{
+    it('opens modal when upload button is clicked', async ()=>{
         renderUploadButton();
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
         });
     });
-    it("closes modal when cancel button is clicked", async ()=>{
+    it('closes modal when cancel button is clicked', async ()=>{
         renderUploadButton();
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
         });
-        const cancelButton = screen.getByRole("button", {
+        const cancelButton = screen.getByRole('button', {
             name: /cancel/i
         });
         fireEvent.click(cancelButton);
         await waitFor(()=>{
-            expect(screen.queryByText("Upload Files")).not.toBeInTheDocument();
+            expect(screen.queryByText('Upload Files')).not.toBeInTheDocument();
         });
     });
-    it("displays empty state initially", async ()=>{
+    it('displays empty state initially', async ()=>{
         renderUploadButton();
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Drag and drop files and folders here")).toBeInTheDocument();
-            expect(screen.getByRole("button", {
+            expect(screen.getByText('Drag and drop files and folders here')).toBeInTheDocument();
+            expect(screen.getByRole('button', {
                 name: /add files/i
             })).toBeInTheDocument();
         });
     });
-    it("can add files and shows upload button enabled", async ()=>{
+    it('can add files and shows upload button enabled', async ()=>{
         const onUploadSuccess = jest.fn();
         renderUploadButton({
             onUploadSuccess
         });
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
         });
-        const uploadButtons = screen.getAllByRole("button", {
-            name: "Upload"
+        const uploadButtons = screen.getAllByRole('button', {
+            name: 'Upload'
         });
-        const modalUploadButton = uploadButtons.find((button)=>!button.querySelector("svg"));
+        const modalUploadButton = uploadButtons.find((button)=>!button.querySelector('svg'));
         expect(modalUploadButton).toBeDisabled();
-        const fileInput = screen.getByRole("presentation").querySelector('input[type="file"]');
+        const fileInput = screen.getByRole('presentation').querySelector('input[type="file"]');
         const testFile = new File([
-            "test content"
-        ], "test.txt", {
-            type: "text/plain"
+            'test content'
+        ], 'test.txt', {
+            type: 'text/plain'
         });
         await user_event.upload(fileInput, testFile);
         await waitFor(()=>{
-            expect(screen.getByText("test.txt")).toBeInTheDocument();
-            expect(screen.getByText("12 B")).toBeInTheDocument();
+            expect(screen.getByText('test.txt')).toBeInTheDocument();
+            expect(screen.getByText('12 B')).toBeInTheDocument();
         });
         expect(modalUploadButton).toBeEnabled();
     });
-    it("displays correct bucket and prefix information", ()=>{
-        const customBucket = "custom-bucket";
-        const customPrefix = "custom/prefix";
+    it('displays correct bucket and prefix information', ()=>{
+        const customBucket = 'custom-bucket';
+        const customPrefix = 'custom/prefix';
         renderUploadButton({
             bucket: customBucket,
             prefix: customPrefix
         });
-        expect(screen.getByRole("button", {
+        expect(screen.getByRole('button', {
             name: /upload/i
         })).toBeInTheDocument();
     });
-    it("handles different button variants", ()=>{
+    it('handles different button variants', ()=>{
         renderUploadButton({
-            variant: "primary"
+            variant: 'primary'
         });
-        const button = screen.getByRole("button", {
+        const button = screen.getByRole('button', {
             name: /upload/i
         });
         expect(button).toBeInTheDocument();
     });
-    it("resets state when modal is closed", async ()=>{
+    it('resets state when modal is closed', async ()=>{
         renderUploadButton();
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
         });
-        const cancelButton = screen.getByRole("button", {
+        const cancelButton = screen.getByRole('button', {
             name: /cancel/i
         });
         fireEvent.click(cancelButton);
         await waitFor(()=>{
-            expect(screen.queryByText("Upload Files")).not.toBeInTheDocument();
+            expect(screen.queryByText('Upload Files')).not.toBeInTheDocument();
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
-            expect(screen.getByText("Drag and drop files and folders here")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
+            expect(screen.getByText('Drag and drop files and folders here')).toBeInTheDocument();
         });
     });
 });

package/dist/components/buckets/BucketCreate.d.ts

@@ -1,5 +1,5 @@
-import Joi from "joi";
-import { ObjectLockRetentionMode } from "@aws-sdk/client-s3";
+import Joi from 'joi';
+import { ObjectLockRetentionMode } from '@aws-sdk/client-s3';
 export declare const bucketErrorMessage = "Bucket names can include only lowercase letters, numbers, dots (.), and hyphens (-)";
 export declare const bucketNameValidationSchema: Joi.StringSchema<string>;
 export declare const baseBucketCreateSchema: Joi.ObjectSchema<any>;

package/dist/components/buckets/BucketCreate.js

@@ -5,69 +5,69 @@ import { Button, Input } from "@scality/core-ui/dist/next";
 import { convertRemToPixels } from "@scality/core-ui/dist/utils";
 import joi from "joi";
 import { FormProvider, useForm } from "react-hook-form";
-import { useNavigate } from "react-router";
 import ObjectLockRetentionSettings from "../objects/ObjectLock/ObjectLockRetentionSettings.js";
+import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
 import { objectLockRetentionSettingsValidationRules } from "../objects/ObjectLock/ObjectLockSettings.js";
 import { useCreateBucket, useSetBucketObjectLockConfiguration, useSetBucketVersioning } from "../../hooks/index.js";
-const bucketErrorMessage = "Bucket names can include only lowercase letters, numbers, dots (.), and hyphens (-)";
-const bucketNameValidationSchema = joi.string().label("Bucket Name").required().min(3).max(63).pattern(/^[a-z0-9]([a-z0-9.-]*[a-z0-9])?$/, {
-    name: "bucketName",
+const bucketErrorMessage = 'Bucket names can include only lowercase letters, numbers, dots (.), and hyphens (-)';
+const bucketNameValidationSchema = joi.string().label('Bucket Name').required().min(3).max(63).pattern(/^[a-z0-9]([a-z0-9.-]*[a-z0-9])?$/, {
+    name: 'bucketName',
     invert: false
 }).messages({
-    "string.pattern.name": bucketErrorMessage
+    'string.pattern.name': bucketErrorMessage
 }).custom((value, helpers)=>{
-    if (value.includes("..")) return helpers.message({
-        custom: "Bucket names cannot contain two adjacent periods"
+    if (value.includes('..')) return helpers.message({
+        custom: 'Bucket names cannot contain two adjacent periods'
     });
     if (/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) return helpers.message({
-        custom: "Bucket names must not be formatted as an IP address"
+        custom: 'Bucket names must not be formatted as an IP address'
     });
     const forbiddenPrefixes = [
-        "xn--",
-        "sthree-",
-        "amzn-s3-demo-"
+        'xn--',
+        'sthree-',
+        'amzn-s3-demo-'
     ];
     if (forbiddenPrefixes.some((prefix)=>value.startsWith(prefix))) return helpers.message({
-        custom: `Bucket names must not start with ${forbiddenPrefixes.join(", ")}`
+        custom: `Bucket names must not start with ${forbiddenPrefixes.join(', ')}`
     });
     const forbiddenSuffixes = [
-        "-s3alias",
-        "--ol-s3",
-        "--x-s3",
-        ".mrap"
+        '-s3alias',
+        '--ol-s3',
+        '--x-s3',
+        '.mrap'
     ];
     if (forbiddenSuffixes.some((suffix)=>value.endsWith(suffix))) return helpers.message({
-        custom: `Bucket names must not end with ${forbiddenSuffixes.join(", ")}`
+        custom: `Bucket names must not end with ${forbiddenSuffixes.join(', ')}`
     });
     const existingBuckets = helpers.prefs.context?.existingBuckets;
     if (Array.isArray(existingBuckets)) {
         const isDuplicate = existingBuckets.some((bucketName)=>bucketName.toLowerCase() === value.toLowerCase());
         if (isDuplicate) return helpers.message({
-            custom: "A bucket with this name already exists"
+            custom: 'A bucket with this name already exists'
         });
     }
     return value;
-}, "AWS S3 bucket naming rules");
+}, 'AWS S3 bucket naming rules');
 const baseBucketCreateSchema = joi.object({
     name: bucketNameValidationSchema,
     isVersioning: joi.boolean(),
     ...objectLockRetentionSettingsValidationRules
 });
 const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultValues: customDefaultValues, children, onSubmit: onSubmitProp, onCancel: onCancelProp })=>{
-    const navigate = useNavigate();
+    const navigate = useDataBrowserNavigate();
     const { showToast } = useToast();
     const baseDefaultValues = {
-        name: "",
+        name: '',
         isVersioning: false,
         isObjectLockEnabled: false,
         isDefaultRetentionEnabled: false,
-        retentionMode: "GOVERNANCE",
+        retentionMode: 'GOVERNANCE',
         retentionPeriod: 1,
-        retentionPeriodFrequencyChoice: "DAYS",
+        retentionPeriodFrequencyChoice: 'DAYS',
         ...customDefaultValues
     };
     const useFormMethods = useForm({
-        mode: "all",
+        mode: 'all',
         resolver: joiResolver(validationSchema || baseBucketCreateSchema, {
             context: validationContext || {}
         }),
@@ -76,19 +76,19 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
     });
     const { register, handleSubmit, formState, watch } = useFormMethods;
     const { isValid, errors } = formState;
-    const isObjectLockEnabled = watch("isObjectLockEnabled");
+    const isObjectLockEnabled = watch('isObjectLockEnabled');
     const { mutate: createBucket, isPending: isCreatingBucket } = useCreateBucket();
     const { mutate: setBucketVersioning } = useSetBucketVersioning();
     const { mutate: setObjectLockConfig } = useSetBucketObjectLockConfiguration();
     const handleCancel = ()=>{
         if (onCancelProp) onCancelProp();
-        else navigate("/buckets");
+        else navigate('/buckets');
     };
     const handleSuccess = (bucketName)=>{
         showToast({
             open: true,
             message: `Bucket "${bucketName}" created successfully`,
-            status: "success"
+            status: 'success'
         });
         navigate(`/buckets/${bucketName}`);
     };
@@ -96,7 +96,7 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
         showToast({
             open: true,
             message: error instanceof Error ? error.message : `Failed to ${operation}`,
-            status: "error"
+            status: 'error'
         });
     };
     const onSubmit = (data)=>{
@@ -112,41 +112,41 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
                 if (needsExplicitVersioning) setBucketVersioning({
                     Bucket: bucketName,
                     VersioningConfiguration: {
-                        Status: "Enabled"
+                        Status: 'Enabled'
                     }
                 }, {
                     onSuccess: ()=>handleSuccess(bucketName),
-                    onError: (error)=>handleError(error, "enable versioning")
+                    onError: (error)=>handleError(error, 'enable versioning')
                 });
                 else if (needsRetentionConfig) {
                     const retentionConfig = {
                         Bucket: bucketName,
                         ObjectLockConfiguration: {
-                            ObjectLockEnabled: "Enabled",
+                            ObjectLockEnabled: 'Enabled',
                             Rule: {
                                 DefaultRetention: {
                                     Mode: data.retentionMode,
-                                    Days: "DAYS" === data.retentionPeriodFrequencyChoice ? data.retentionPeriod : void 0,
-                                    Years: "YEARS" === data.retentionPeriodFrequencyChoice ? data.retentionPeriod : void 0
+                                    Days: 'DAYS' === data.retentionPeriodFrequencyChoice ? data.retentionPeriod : void 0,
+                                    Years: 'YEARS' === data.retentionPeriodFrequencyChoice ? data.retentionPeriod : void 0
                                 }
                             }
                         }
                     };
                     setObjectLockConfig(retentionConfig, {
                         onSuccess: ()=>handleSuccess(bucketName),
-                        onError: (error)=>handleError(error, "configure object lock retention")
+                        onError: (error)=>handleError(error, 'configure object lock retention')
                     });
                 } else handleSuccess(bucketName);
             },
-            onError: (error)=>handleError(error, "create bucket")
+            onError: (error)=>handleError(error, 'create bucket')
         });
     };
     return /*#__PURE__*/ jsx(FormProvider, {
         ...useFormMethods,
         children: /*#__PURE__*/ jsxs(Form, {
             layout: {
-                kind: "page",
-                title: "Create a New Bucket",
+                kind: 'page',
+                title: 'Create a New Bucket',
                 subTitle
             },
             requireMode: "partial",
@@ -184,7 +184,7 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
                                 content: /*#__PURE__*/ jsx(Input, {
                                     id: "name",
                                     autoFocus: true,
-                                    ...register("name")
+                                    ...register('name')
                                 }),
                                 labelHelpTooltip: /*#__PURE__*/ jsxs("ul", {
                                     children: [
@@ -200,7 +200,7 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
                                     ]
                                 }),
                                 helpErrorPosition: "bottom",
-                                error: errors.name ? errors.name?.type === "string.pattern.base" ? bucketErrorMessage : errors.name?.message : void 0
+                                error: errors.name ? errors.name?.type === 'string.pattern.base' ? bucketErrorMessage : errors.name?.message : void 0
                             }),
                             children,
                             /*#__PURE__*/ jsx(FormGroup, {
@@ -217,12 +217,12 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
                                         })
                                     ]
                                 }),
-                                help: isObjectLockEnabled ? "Automatically activated when Object-lock is Enabled" : void 0,
+                                help: isObjectLockEnabled ? 'Automatically activated when Object-lock is Enabled' : void 0,
                                 helpErrorPosition: "bottom",
                                 content: /*#__PURE__*/ jsx(Checkbox, {
                                     id: "isVersioning",
                                     disabled: isObjectLockEnabled,
-                                    ...register("isVersioning")
+                                    ...register('isVersioning')
                                 })
                             })
                         ]

package/dist/components/buckets/BucketDetails.d.ts

@@ -1,7 +1,7 @@
-import { useNavigate } from "react-router-dom";
+import { useDataBrowserNavigate } from '../../hooks/useDataBrowserNavigate';
 interface BucketDetailsContextValue {
     bucketName: string;
-    navigate: ReturnType<typeof useNavigate>;
+    navigate: ReturnType<typeof useDataBrowserNavigate>;
 }
 /**
  * Context for BucketDetails component.

package/dist/components/buckets/BucketDetails.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, memo, useCallback, useContext, useMemo } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { Tabs } from "@scality/core-ui/dist/next";
 import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useGetBucketLifecycle, useGetBucketReplication } from "../../hooks/bucketConfiguration.js";
@@ -12,20 +12,26 @@ import { BucketReplicationList } from "./BucketReplicationList.js";
 import { BucketVersioning } from "./BucketVersioning.js";
 import { DeleteBucketButton } from "./DeleteBucketButton.js";
 import { EmptyBucketButton } from "./EmptyBucketButton.js";
+import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
 const BucketDetailsContext = /*#__PURE__*/ createContext(null);
 function useBucketDetailsContext() {
     const context = useContext(BucketDetailsContext);
-    if (!context) throw new Error("BucketDetails components must be used within BucketDetails");
+    if (!context) throw new Error('BucketDetails components must be used within BucketDetails');
     return context;
 }
 const getEffectiveStatus = (status, error)=>{
-    if (isNotFoundError(error)) return "success";
-    if ("pending" === status) return "loading";
-    if ("error" === status) return "error";
-    return "success";
+    if (isNotFoundError(error)) return 'success';
+    if ('pending' === status) return 'loading';
+    if ('error' === status) return 'error';
+    return 'success';
 };
+const ExtraSectionContent = /*#__PURE__*/ memo(({ render })=>/*#__PURE__*/ jsx(Fragment, {
+        children: render()
+    }));
+ExtraSectionContent.displayName = 'BucketDetails.ExtraSectionContent';
 const OverviewTab = /*#__PURE__*/ memo(()=>{
     const { bucketName, navigate } = useBucketDetailsContext();
+    const { extraBucketOverviewSections } = useDataBrowserUICustomization();
     const renderDeleteButton = useCallback((name)=>/*#__PURE__*/ jsx(DeleteBucketButton, {
             bucketName: name
         }), []);
@@ -48,6 +54,12 @@ const OverviewTab = /*#__PURE__*/ memo(()=>{
                     /*#__PURE__*/ jsx(BucketOverview.GeneralSection, {
                         renderVersioning: renderVersioning
                     }),
+                    extraBucketOverviewSections?.map((section)=>/*#__PURE__*/ jsx(BucketOverview.Section, {
+                            title: section.title,
+                            children: /*#__PURE__*/ jsx(ExtraSectionContent, {
+                                render: section.render
+                            })
+                        }, section.id)),
                     /*#__PURE__*/ jsx(BucketOverview.DataProtectionSection, {}),
                     /*#__PURE__*/ jsx(BucketOverview.PermissionsSection, {
                         onEditPolicy: handleEditPolicy
@@ -57,7 +69,7 @@ const OverviewTab = /*#__PURE__*/ memo(()=>{
         ]
     });
 });
-OverviewTab.displayName = "BucketDetails.OverviewTab";
+OverviewTab.displayName = 'BucketDetails.OverviewTab';
 const LifecycleTab = /*#__PURE__*/ memo(()=>{
     const { bucketName, navigate } = useBucketDetailsContext();
     const { data: lifecycleData, status: lifecycleStatus, error: lifecycleError } = useGetBucketLifecycle({
@@ -81,14 +93,14 @@ const LifecycleTab = /*#__PURE__*/ memo(()=>{
         onEditRule: handleEditRule
     });
 });
-LifecycleTab.displayName = "BucketDetails.LifecycleTab";
+LifecycleTab.displayName = 'BucketDetails.LifecycleTab';
 const ReplicationTab = /*#__PURE__*/ memo(()=>{
     const { bucketName, navigate } = useBucketDetailsContext();
     const { data: replicationData, status: replicationStatus, error: replicationError } = useGetBucketReplication({
         Bucket: bucketName
     });
     const replicationRules = replicationData?.ReplicationConfiguration?.Rules || [];
-    const replicationRole = replicationData?.ReplicationConfiguration?.Role || "";
+    const replicationRole = replicationData?.ReplicationConfiguration?.Role || '';
     const effectiveStatus = getEffectiveStatus(replicationStatus, replicationError);
     const handleCreateRule = useCallback(()=>navigate(BUCKET_ROUTES.replicationCreate(bucketName)), [
         navigate,
@@ -107,64 +119,64 @@ const ReplicationTab = /*#__PURE__*/ memo(()=>{
         onEditRule: handleEditRule
     });
 });
-ReplicationTab.displayName = "BucketDetails.ReplicationTab";
+ReplicationTab.displayName = 'BucketDetails.ReplicationTab';
 const CustomTab = ({ config })=>/*#__PURE__*/ jsx(Fragment, {
         children: config.render()
     });
-CustomTab.displayName = "BucketDetails.CustomTab";
+CustomTab.displayName = 'BucketDetails.CustomTab';
 const BucketDetailsRoot = ({ children })=>{
     const { bucketName } = useParams();
-    const navigate = useNavigate();
-    if (!bucketName) return /*#__PURE__*/ jsx("div", {
-        children: "No bucket selected"
-    });
+    const navigate = useDataBrowserNavigate();
     const contextValue = useMemo(()=>({
-            bucketName,
+            bucketName: bucketName || '',
             navigate
         }), [
         bucketName,
         navigate
     ]);
+    if (!bucketName) return /*#__PURE__*/ jsx("div", {
+        children: "No bucket selected"
+    });
     return /*#__PURE__*/ jsx(BucketDetailsContext.Provider, {
         value: contextValue,
         children: children || /*#__PURE__*/ jsx(DefaultTabs, {})
     });
 };
-BucketDetailsRoot.displayName = "BucketDetails";
+BucketDetailsRoot.displayName = 'BucketDetails';
 const DefaultTabs = ()=>{
     const { extraBucketTabs } = useDataBrowserUICustomization();
     const defaultTabsMap = useMemo(()=>({
             overview: {
-                id: "overview",
-                label: "Overview",
-                path: "",
+                id: 'overview',
+                label: 'Overview',
+                path: '',
                 withoutPadding: false,
                 query: {
-                    tab: ""
+                    tab: ''
                 },
-                type: "default",
+                type: 'default',
                 Component: OverviewTab
             },
             lifecycle: {
-                id: "lifecycle",
-                label: "Lifecycle",
-                path: "",
+                id: 'lifecycle',
+                label: 'Lifecycle',
+                path: '',
                 withoutPadding: true,
                 query: {
-                    tab: "lifecycle"
+                    tab: 'lifecycle'
                 },
-                type: "default",
+                type: 'default',
                 Component: LifecycleTab
             },
             replication: {
-                id: "replication",
-                label: "Replication",
-                path: "",
+                id: 'replication',
+                label: 'Replication',
+                path: '',
                 withoutPadding: true,
                 query: {
-                    tab: "replication"
+                    tab: 'replication'
                 },
-                type: "default",
+                type: 'default',
                 Component: ReplicationTab
             }
         }), []);
@@ -172,12 +184,12 @@ const DefaultTabs = ()=>{
         const customTabConfigs = extraBucketTabs ? extraBucketTabs.map((tabConfig)=>({
                 id: tabConfig.id,
                 label: tabConfig.title,
-                path: tabConfig.path || "",
+                path: tabConfig.path || '',
                 query: {
                     tab: tabConfig.id
                 },
                 withoutPadding: tabConfig.withoutPadding || false,
-                type: "custom",
+                type: 'custom',
                 config: tabConfig
             })) : [];
         const overrideIds = new Set(customTabConfigs.filter((t)=>t.id in defaultTabsMap).map((t)=>t.id));
@@ -196,13 +208,13 @@ const DefaultTabs = ()=>{
                 path: tab.path,
                 query: tab.query,
                 withoutPadding: tab.withoutPadding,
-                children: "default" === tab.type ? /*#__PURE__*/ jsx(tab.Component, {}) : /*#__PURE__*/ jsx(CustomTab, {
+                children: 'default' === tab.type ? /*#__PURE__*/ jsx(tab.Component, {}) : /*#__PURE__*/ jsx(CustomTab, {
                     config: tab.config
                 })
             }, tab.id))
     });
 };
-DefaultTabs.displayName = "BucketDetails.DefaultTabs";
+DefaultTabs.displayName = 'BucketDetails.DefaultTabs';
 function BucketDetails() {
     return /*#__PURE__*/ jsx(BucketDetailsRoot, {});
 }