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

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

@@ -0,0 +1,302 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createTestWrapper } from "../../test/testUtils.js";
+import { EmptyBucketButton } from "../buckets/EmptyBucketButton.js";
+import { useIsBucketEmpty } from "../../hooks/useIsBucketEmpty.js";
+import { useEmptyBucket } from "../../hooks/useEmptyBucket.js";
+import { useGetBucketObjectLockConfiguration } from "../../hooks/bucketConfiguration.js";
+jest.mock("../../hooks/useIsBucketEmpty");
+jest.mock("../../hooks/useEmptyBucket");
+jest.mock("../../hooks/bucketConfiguration");
+const mockUseIsBucketEmpty = jest.mocked(useIsBucketEmpty);
+const mockUseEmptyBucket = jest.mocked(useEmptyBucket);
+const mockUseGetBucketObjectLockConfiguration = jest.mocked(useGetBucketObjectLockConfiguration);
+const renderEmptyBucketButton = (props = {})=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(Wrapper, {
+        children: /*#__PURE__*/ jsx(EmptyBucketButton, {
+            bucketName: "test-bucket",
+            ...props
+        })
+    }));
+};
+const mockHookDefaults = ()=>{
+    mockUseIsBucketEmpty.mockReturnValue({
+        isEmpty: false,
+        isLoading: false,
+        error: null
+    });
+    mockUseEmptyBucket.mockReturnValue({
+        emptyBucket: jest.fn(),
+        isEmptying: false,
+        error: null,
+        result: null,
+        reset: jest.fn()
+    });
+    mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+        data: void 0,
+        isLoading: false,
+        error: null
+    });
+};
+describe("EmptyBucketButton", ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockHookDefaults();
+    });
+    it("renders empty button with correct label", ()=>{
+        renderEmptyBucketButton();
+        expect(screen.getByRole("button", {
+            name: /empty bucket/i
+        })).toBeInTheDocument();
+    });
+    it("disables button when bucket is empty", ()=>{
+        mockUseIsBucketEmpty.mockReturnValue({
+            isEmpty: true,
+            isLoading: false,
+            error: null
+        });
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        expect(button).toBeDisabled();
+    });
+    it("enables button when bucket is not empty", ()=>{
+        mockUseIsBucketEmpty.mockReturnValue({
+            isEmpty: false,
+            isLoading: false,
+            error: null
+        });
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        expect(button).not.toBeDisabled();
+    });
+    it("opens confirmation modal when button is clicked", ()=>{
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/Empty Bucket 'test-bucket'\?/i)).toBeInTheDocument();
+        expect(screen.getByText(/Emptying a bucket removes all contents and cannot be reversed/i)).toBeInTheDocument();
+    });
+    it("shows information list in modal", ()=>{
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/Emptying a bucket removes all contents and cannot be reversed/i)).toBeInTheDocument();
+        expect(screen.getByText(/New objects added during the empty action may also be removed/i)).toBeInTheDocument();
+    });
+    it("shows confirmation input field", ()=>{
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        const input = screen.getByPlaceholderText(/test-bucket/i);
+        expect(input).toBeInTheDocument();
+    });
+    it("disables empty button until bucket name is typed", ()=>{
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        const emptyButton = screen.getByRole("button", {
+            name: /^empty$/i
+        });
+        expect(emptyButton).toBeDisabled();
+        const input = screen.getByPlaceholderText(/test-bucket/i);
+        fireEvent.change(input, {
+            target: {
+                value: "test-bucket"
+            }
+        });
+        expect(emptyButton).not.toBeDisabled();
+    });
+    it("closes modal when cancel is clicked", ()=>{
+        renderEmptyBucketButton();
+        const deleteButton = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(deleteButton);
+        const cancelButton = screen.getByRole("button", {
+            name: /cancel/i
+        });
+        fireEvent.click(cancelButton);
+        expect(screen.queryByText(/Empty Bucket 'test-bucket'\?/i)).not.toBeInTheDocument();
+    });
+    it("resets state when modal is cancelled", ()=>{
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        const input = screen.getByPlaceholderText(/test-bucket/i);
+        fireEvent.change(input, {
+            target: {
+                value: "test-bucket"
+            }
+        });
+        expect(input).toHaveValue("test-bucket");
+        const cancelButton = screen.getByRole("button", {
+            name: /cancel/i
+        });
+        fireEvent.click(cancelButton);
+        fireEvent.click(button);
+        const inputAfterReopen = screen.getByPlaceholderText(/test-bucket/i);
+        expect(inputAfterReopen).toHaveValue("");
+    });
+    it("displays correct bucket name in modal title", ()=>{
+        renderEmptyBucketButton({
+            bucketName: "my-special-bucket"
+        });
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/Empty Bucket 'my-special-bucket'\?/i)).toBeInTheDocument();
+    });
+    it("shows loading state during deletion", async ()=>{
+        const mockEmptyBucket = jest.fn();
+        mockUseEmptyBucket.mockReturnValue({
+            emptyBucket: mockEmptyBucket,
+            isEmptying: true,
+            error: null,
+            result: null,
+            reset: jest.fn()
+        });
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/Deletion in progress.../i)).toBeInTheDocument();
+    });
+    it("completes empty bucket operation successfully and shows summary", async ()=>{
+        const mockEmptyBucket = jest.fn().mockResolvedValue({
+            success: true,
+            deletedCount: 100,
+            errors: [],
+            limitReached: false
+        });
+        mockUseEmptyBucket.mockReturnValue({
+            emptyBucket: mockEmptyBucket,
+            isEmptying: false,
+            error: null,
+            result: null,
+            reset: jest.fn()
+        });
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        const input = screen.getByPlaceholderText(/test-bucket/i);
+        fireEvent.change(input, {
+            target: {
+                value: "test-bucket"
+            }
+        });
+        const emptyButton = screen.getByRole("button", {
+            name: /^empty$/i
+        });
+        fireEvent.click(emptyButton);
+        await waitFor(()=>{
+            expect(mockEmptyBucket).toHaveBeenCalledWith("test-bucket");
+        });
+    });
+    it("displays error when deletion fails", ()=>{
+        mockUseEmptyBucket.mockReturnValue({
+            emptyBucket: jest.fn(),
+            isEmptying: false,
+            error: new Error("Network error"),
+            result: null,
+            reset: jest.fn()
+        });
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/Network error/i)).toBeInTheDocument();
+    });
+    it("calls emptyBucket when user confirms", async ()=>{
+        const mockEmptyBucket = jest.fn().mockResolvedValue({
+            success: false,
+            deletedCount: 50,
+            errors: [
+                {
+                    key: "file1.txt",
+                    code: "AccessDenied",
+                    message: "Access denied"
+                }
+            ],
+            limitReached: false
+        });
+        mockUseEmptyBucket.mockReturnValue({
+            emptyBucket: mockEmptyBucket,
+            isEmptying: false,
+            error: null,
+            result: null,
+            reset: jest.fn()
+        });
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        const input = screen.getByPlaceholderText(/test-bucket/i);
+        fireEvent.change(input, {
+            target: {
+                value: "test-bucket"
+            }
+        });
+        const emptyButton = screen.getByRole("button", {
+            name: /^empty$/i
+        });
+        fireEvent.click(emptyButton);
+        await waitFor(()=>{
+            expect(mockEmptyBucket).toHaveBeenCalledWith("test-bucket");
+        });
+    });
+    it("displays Object Lock warning when enabled", ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            isLoading: false,
+            error: null
+        });
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/locked in governance mode/i)).toBeInTheDocument();
+    });
+    it("does not show Object Lock warning when disabled", ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Disabled"
+                }
+            },
+            isLoading: false,
+            error: null
+        });
+        renderEmptyBucketButton();
+        const button = screen.getByRole("button", {
+            name: /empty bucket/i
+        });
+        fireEvent.click(button);
+        expect(screen.queryByText(/locked in governance mode/i)).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,49 @@
+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>;
+export type BucketCreateFormData = {
+    name: string;
+    isVersioning: boolean;
+    isObjectLockEnabled: boolean;
+    isDefaultRetentionEnabled: boolean;
+    retentionMode: ObjectLockRetentionMode;
+    retentionPeriod: number;
+    retentionPeriodFrequencyChoice: string;
+    [key: string]: unknown;
+};
+type BucketCreateProps = {
+    subTitle?: string;
+    /**
+     * Custom validation schema - if not provided, uses baseBucketCreateSchema
+     *
+     * To enable uniqueness validation, provide context with existing bucket names:
+     * ```ts
+     * const schema = baseBucketCreateSchema.append({...});
+     * <BucketCreate
+     *   validationSchema={schema}
+     *   validationContext={{ existingBuckets: ['bucket1', 'bucket2'] }}
+     * />
+     * ```
+     */
+    validationSchema?: Joi.ObjectSchema;
+    /**
+     * Validation context passed to Joi schema
+     * Use this to provide existing bucket names for uniqueness validation
+     */
+    validationContext?: {
+        existingBuckets?: string[];
+        [key: string]: unknown;
+    };
+    /** Default form values - merged with base defaults */
+    defaultValues?: Partial<BucketCreateFormData>;
+    /** Children rendered between bucket name and versioning sections */
+    children?: React.ReactNode;
+    /** Callback when form is submitted with valid data */
+    onSubmit?: (data: BucketCreateFormData) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: () => void;
+};
+export declare const BucketCreate: ({ subTitle, validationSchema, validationContext, defaultValues: customDefaultValues, children, onSubmit: onSubmitProp, onCancel: onCancelProp, }: BucketCreateProps) => import("react/jsx-runtime").JSX.Element;
+export default BucketCreate;

package/dist/components/buckets/BucketCreate.js

@@ -0,0 +1,237 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { joiResolver } from "@hookform/resolvers/joi";
+import { Checkbox, Form, FormGroup, FormSection, Stack, useToast } from "@scality/core-ui";
+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 { 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",
+    invert: false
+}).messages({
+    "string.pattern.name": bucketErrorMessage
+}).custom((value, helpers)=>{
+    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"
+    });
+    const forbiddenPrefixes = [
+        "xn--",
+        "sthree-",
+        "amzn-s3-demo-"
+    ];
+    if (forbiddenPrefixes.some((prefix)=>value.startsWith(prefix))) return helpers.message({
+        custom: `Bucket names must not start with ${forbiddenPrefixes.join(", ")}`
+    });
+    const forbiddenSuffixes = [
+        "-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(", ")}`
+    });
+    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"
+        });
+    }
+    return value;
+}, "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 { showToast } = useToast();
+    const baseDefaultValues = {
+        name: "",
+        isVersioning: false,
+        isObjectLockEnabled: false,
+        isDefaultRetentionEnabled: false,
+        retentionMode: "GOVERNANCE",
+        retentionPeriod: 1,
+        retentionPeriodFrequencyChoice: "DAYS",
+        ...customDefaultValues
+    };
+    const useFormMethods = useForm({
+        mode: "all",
+        resolver: joiResolver(validationSchema || baseBucketCreateSchema, {
+            context: validationContext || {}
+        }),
+        defaultValues: baseDefaultValues,
+        context: validationContext
+    });
+    const { register, handleSubmit, formState, watch } = useFormMethods;
+    const { isValid, errors } = formState;
+    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");
+    };
+    const handleSuccess = (bucketName)=>{
+        showToast({
+            open: true,
+            message: `Bucket "${bucketName}" created successfully`,
+            status: "success"
+        });
+        navigate(`/buckets/${bucketName}`);
+    };
+    const handleError = (error, operation)=>{
+        showToast({
+            open: true,
+            message: error instanceof Error ? error.message : `Failed to ${operation}`,
+            status: "error"
+        });
+    };
+    const onSubmit = (data)=>{
+        if (onSubmitProp) return void onSubmitProp(data);
+        const bucketName = data.name;
+        const needsExplicitVersioning = data.isVersioning && !data.isObjectLockEnabled;
+        const needsRetentionConfig = data.isObjectLockEnabled && data.isDefaultRetentionEnabled;
+        createBucket({
+            Bucket: bucketName,
+            ObjectLockEnabledForBucket: data.isObjectLockEnabled || void 0
+        }, {
+            onSuccess: ()=>{
+                if (needsExplicitVersioning) setBucketVersioning({
+                    Bucket: bucketName,
+                    VersioningConfiguration: {
+                        Status: "Enabled"
+                    }
+                }, {
+                    onSuccess: ()=>handleSuccess(bucketName),
+                    onError: (error)=>handleError(error, "enable versioning")
+                });
+                else if (needsRetentionConfig) {
+                    const retentionConfig = {
+                        Bucket: bucketName,
+                        ObjectLockConfiguration: {
+                            ObjectLockEnabled: "Enabled",
+                            Rule: {
+                                DefaultRetention: {
+                                    Mode: data.retentionMode,
+                                    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")
+                    });
+                } else handleSuccess(bucketName);
+            },
+            onError: (error)=>handleError(error, "create bucket")
+        });
+    };
+    return /*#__PURE__*/ jsx(FormProvider, {
+        ...useFormMethods,
+        children: /*#__PURE__*/ jsxs(Form, {
+            layout: {
+                kind: "page",
+                title: "Create a New Bucket",
+                subTitle
+            },
+            requireMode: "partial",
+            onSubmit: handleSubmit(onSubmit),
+            rightActions: /*#__PURE__*/ jsxs(Stack, {
+                gap: "r16",
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        id: "cancel-btn",
+                        variant: "outline",
+                        onClick: handleCancel,
+                        type: "button",
+                        label: "Cancel"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        disabled: !isValid,
+                        isLoading: isCreatingBucket,
+                        id: "create-bucket-btn",
+                        type: "submit",
+                        variant: "primary",
+                        label: "Create"
+                    })
+                ]
+            }),
+            children: [
+                /*#__PURE__*/ jsx(FormSection, {
+                    forceLabelWidth: convertRemToPixels(17.5),
+                    children: /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormGroup, {
+                                id: "name",
+                                label: "Bucket Name",
+                                required: true,
+                                direction: "horizontal",
+                                content: /*#__PURE__*/ jsx(Input, {
+                                    id: "name",
+                                    autoFocus: true,
+                                    ...register("name")
+                                }),
+                                labelHelpTooltip: /*#__PURE__*/ jsxs("ul", {
+                                    children: [
+                                        /*#__PURE__*/ jsx("li", {
+                                            children: "Must be unique"
+                                        }),
+                                        /*#__PURE__*/ jsx("li", {
+                                            children: "Cannot be modified after creation"
+                                        }),
+                                        /*#__PURE__*/ jsx("li", {
+                                            children: bucketErrorMessage
+                                        })
+                                    ]
+                                }),
+                                helpErrorPosition: "bottom",
+                                error: errors.name ? errors.name?.type === "string.pattern.base" ? bucketErrorMessage : errors.name?.message : void 0
+                            }),
+                            children,
+                            /*#__PURE__*/ jsx(FormGroup, {
+                                id: "isVersioning",
+                                label: "Versioning",
+                                disabled: isObjectLockEnabled,
+                                labelHelpTooltip: /*#__PURE__*/ jsxs("ul", {
+                                    children: [
+                                        /*#__PURE__*/ jsx("li", {
+                                            children: "Versioning keeps multiple versions of each objects in your bucket. You can restore deleted or overwritten objects as a result of unintended user actions or application failures."
+                                        }),
+                                        /*#__PURE__*/ jsx("li", {
+                                            children: "It's possible to enable and suspend versioning at the bucket level after the bucket creation."
+                                        })
+                                    ]
+                                }),
+                                help: isObjectLockEnabled ? "Automatically activated when Object-lock is Enabled" : void 0,
+                                helpErrorPosition: "bottom",
+                                content: /*#__PURE__*/ jsx(Checkbox, {
+                                    id: "isVersioning",
+                                    disabled: isObjectLockEnabled,
+                                    ...register("isVersioning")
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(ObjectLockRetentionSettings, {})
+            ]
+        })
+    });
+};
+const buckets_BucketCreate = BucketCreate;
+export { BucketCreate, baseBucketCreateSchema, bucketErrorMessage, bucketNameValidationSchema, buckets_BucketCreate as default };