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

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 };

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

@@ -0,0 +1 @@
+export declare function BucketDetails(): import("react/jsx-runtime").JSX.Element;

package/dist/components/buckets/BucketDetails.js

@@ -0,0 +1,106 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useQueryParams } from "../../utils/hooks.js";
+import { useNavigate, useParams } from "react-router-dom";
+import { Tabs } from "@scality/core-ui/dist/next";
+import { BucketOverview } from "./BucketOverview.js";
+import { DeleteBucketButton } from "./DeleteBucketButton.js";
+import { EmptyBucketButton } from "./EmptyBucketButton.js";
+import { BucketLifecycleList } from "./BucketLifecycleList.js";
+import { BucketReplicationList } from "./BucketReplicationList.js";
+import { useGetBucketLifecycle, useGetBucketReplication } from "../../hooks/bucketConfiguration.js";
+import { isNotFoundError } from "../../utils/errorHandling.js";
+import { BucketVersioning } from "./BucketVersioning.js";
+function BucketDetails() {
+    const query = useQueryParams();
+    const queryObject = Object.fromEntries(query.entries());
+    const { bucketName } = useParams();
+    const navigate = useNavigate();
+    const { data: lifecycleData, status: lifecycleStatus, error: lifecycleError } = useGetBucketLifecycle({
+        Bucket: bucketName
+    });
+    const { data: replicationData, status: replicationStatus, error: replicationError } = useGetBucketReplication({
+        Bucket: bucketName
+    });
+    const lifecycleRules = lifecycleData?.Rules || [];
+    const replicationRules = replicationData?.ReplicationConfiguration?.Rules || [];
+    const replicationRole = replicationData?.ReplicationConfiguration?.Role || "";
+    const effectiveLifecycleStatus = isNotFoundError(lifecycleError) ? "success" : "pending" === lifecycleStatus ? "loading" : "error" === lifecycleStatus ? "error" : "success";
+    const effectiveReplicationStatus = isNotFoundError(replicationError) ? "success" : "pending" === replicationStatus ? "loading" : "error" === replicationStatus ? "error" : "success";
+    if (!bucketName) return /*#__PURE__*/ jsx("div", {
+        children: "No bucket selected"
+    });
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs(Tabs, {
+            children: [
+                /*#__PURE__*/ jsx(Tabs.Tab, {
+                    label: "Overview",
+                    path: "",
+                    query: {
+                        ...queryObject,
+                        tab: ""
+                    },
+                    children: /*#__PURE__*/ jsxs(BucketOverview, {
+                        bucketName: bucketName,
+                        children: [
+                            /*#__PURE__*/ jsx(BucketOverview.Actions, {
+                                renderDeleteButton: ()=>/*#__PURE__*/ jsx(DeleteBucketButton, {
+                                        bucketName: bucketName
+                                    }),
+                                renderEmptyButton: ()=>/*#__PURE__*/ jsx(EmptyBucketButton, {
+                                        bucketName: bucketName
+                                    })
+                            }),
+                            /*#__PURE__*/ jsxs(BucketOverview.Sections, {
+                                children: [
+                                    /*#__PURE__*/ jsx(BucketOverview.GeneralSection, {
+                                        renderVersioning: ()=>/*#__PURE__*/ jsx(BucketVersioning, {})
+                                    }),
+                                    /*#__PURE__*/ jsx(BucketOverview.DataProtectionSection, {}),
+                                    /*#__PURE__*/ jsx(BucketOverview.PermissionsSection, {
+                                        onEditPolicy: ()=>{
+                                            navigate(`/buckets/${bucketName}/policy`);
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(Tabs.Tab, {
+                    label: "Lifecycle",
+                    path: "",
+                    query: {
+                        ...queryObject,
+                        tab: "lifecycle"
+                    },
+                    withoutPadding: true,
+                    children: /*#__PURE__*/ jsx(BucketLifecycleList, {
+                        bucketName: bucketName,
+                        lifecycleRules: lifecycleRules,
+                        lifecycleStatus: effectiveLifecycleStatus,
+                        onCreateRule: ()=>navigate(`/buckets/${bucketName}/lifecycle/create`),
+                        onEditRule: (ruleId)=>navigate(`/buckets/${bucketName}/lifecycle/edit/${encodeURIComponent(ruleId)}`)
+                    })
+                }),
+                /*#__PURE__*/ jsx(Tabs.Tab, {
+                    label: "Replication",
+                    path: "",
+                    query: {
+                        ...queryObject,
+                        tab: "replication"
+                    },
+                    withoutPadding: true,
+                    children: /*#__PURE__*/ jsx(BucketReplicationList, {
+                        bucketName: bucketName,
+                        replicationRules: replicationRules,
+                        replicationRole: replicationRole,
+                        replicationStatus: effectiveReplicationStatus,
+                        onCreateRule: ()=>navigate(`/buckets/${bucketName}/replication/create`),
+                        onEditRule: (ruleId)=>navigate(`/buckets/${bucketName}/replication/edit/${encodeURIComponent(ruleId)}`)
+                    })
+                })
+            ]
+        })
+    });
+}
+export { BucketDetails };

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

@@ -0,0 +1,15 @@
+/**
+ * BucketLifecycleFormPage - Form for creating and editing S3 bucket lifecycle rules
+ *
+ * Features:
+ * - Create new or edit existing lifecycle rules
+ * - Support for all AWS S3 lifecycle actions (transitions, expirations, etc.)
+ * - Comprehensive validation based on AWS S3 requirements
+ * - Filter options: prefix, tags, or combination
+ * - Current and noncurrent version management
+ * - Abort incomplete multipart upload configuration
+ *
+ * AWS S3 Lifecycle Documentation:
+ * https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutBucketLifecycleConfiguration.html
+ */
+export declare function BucketLifecycleFormPage(): import("react/jsx-runtime").JSX.Element;