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

package/dist/components/__tests__/BucketNotificationCreatePage.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,316 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import user_event from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { createTestWrapper } from "../../test/testUtils.js";
+import { BucketNotificationCreatePage } from "../buckets/notifications/BucketNotificationCreatePage.js";
+import { useGetBucketNotification, useSetBucketNotification } from "../../hooks/index.js";
+jest.mock("../../hooks", ()=>({
+        useGetBucketNotification: jest.fn(),
+        useSetBucketNotification: jest.fn()
+    }));
+const mockUseGetBucketNotification = jest.mocked(useGetBucketNotification);
+const mockUseSetBucketNotification = jest.mocked(useSetBucketNotification);
+const mockNavigate = jest.fn();
+jest.mock("react-router-dom", ()=>({
+        ...jest.requireActual("react-router-dom"),
+        useNavigate: ()=>mockNavigate
+    }));
+const renderBucketNotificationCreatePage = (bucketName = "test-bucket")=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(MemoryRouter, {
+        initialEntries: [
+            `/buckets/${bucketName}/notifications/create`
+        ],
+        children: /*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(Routes, {
+                children: /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/notifications/create",
+                    element: /*#__PURE__*/ jsx(BucketNotificationCreatePage, {})
+                })
+            })
+        })
+    }));
+};
+describe("BucketNotificationCreatePage", ()=>{
+    const mockMutate = jest.fn();
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockNavigate.mockClear();
+        mockUseGetBucketNotification.mockReturnValue({
+            data: void 0
+        });
+        mockUseSetBucketNotification.mockReturnValue({
+            mutate: mockMutate,
+            isPending: false
+        });
+    });
+    it("renders create notification form with all fields", ()=>{
+        renderBucketNotificationCreatePage();
+        expect(screen.getByText("Create Bucket Notification")).toBeInTheDocument();
+        expect(screen.getByLabelText(/rule name/i)).toBeInTheDocument();
+        expect(screen.getByText("Events")).toBeInTheDocument();
+        expect(screen.getByLabelText(/destination queue/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/prefix/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/suffix/i)).toBeInTheDocument();
+    });
+    it("disables create button when form is pristine", ()=>{
+        renderBucketNotificationCreatePage();
+        expect(screen.getByRole("button", {
+            name: /create/i
+        })).toBeDisabled();
+    });
+    it("shows validation error when rule name is empty", async ()=>{
+        renderBucketNotificationCreatePage();
+        const ruleNameInput = screen.getByLabelText(/rule name/i);
+        await user_event.type(ruleNameInput, "a");
+        await user_event.clear(ruleNameInput);
+        await waitFor(()=>{
+            expect(screen.getByText(/this field is required/i)).toBeInTheDocument();
+        });
+    });
+    it("shows validation error when rule name already exists", async ()=>{
+        const existingConfig = {
+            QueueConfigurations: [
+                {
+                    Id: "existing-rule",
+                    QueueArn: "arn:aws:sqs:us-east-1:123:queue",
+                    Events: [
+                        "s3:ObjectCreated:*"
+                    ]
+                }
+            ]
+        };
+        mockUseGetBucketNotification.mockReturnValue({
+            data: existingConfig
+        });
+        renderBucketNotificationCreatePage();
+        const ruleNameInput = screen.getByLabelText(/rule name/i);
+        await user_event.type(ruleNameInput, "existing-rule");
+        await waitFor(()=>{
+            expect(screen.getByText(/a rule with this name already exists/i)).toBeInTheDocument();
+        });
+    });
+    it("shows validation error when queue ARN is invalid", async ()=>{
+        renderBucketNotificationCreatePage();
+        const queueArnInput = screen.getByLabelText(/destination queue/i);
+        await user_event.type(queueArnInput, "invalid-arn");
+        await waitFor(()=>{
+            expect(screen.getByText(/must be a valid arn/i)).toBeInTheDocument();
+        });
+    });
+    it("shows validation error when no event is selected", async ()=>{
+        renderBucketNotificationCreatePage();
+        const ruleNameInput = screen.getByLabelText(/rule name/i);
+        await user_event.type(ruleNameInput, "test-rule");
+        const queueArnInput = screen.getByLabelText(/destination queue/i);
+        await user_event.type(queueArnInput, "arn:aws:sqs:us-east-1:123:queue");
+        await waitFor(()=>{
+            expect(screen.getByRole("button", {
+                name: /create/i
+            })).toBeDisabled();
+        });
+    });
+    it("enables create button when form is valid", async ()=>{
+        renderBucketNotificationCreatePage();
+        await user_event.type(screen.getByLabelText(/rule name/i), "test-rule");
+        await user_event.type(screen.getByLabelText(/destination queue/i), "arn:aws:sqs:us-east-1:123:queue");
+        const checkbox = screen.getByRole("checkbox", {
+            name: /s3:ObjectCreated:\*/i
+        });
+        fireEvent.click(checkbox);
+        await waitFor(()=>{
+            expect(screen.getByRole("button", {
+                name: /create/i
+            })).toBeEnabled();
+        });
+    });
+    it("creates notification with all fields and navigates on success", async ()=>{
+        renderBucketNotificationCreatePage();
+        await user_event.type(screen.getByLabelText(/rule name/i), "test-rule");
+        await user_event.type(screen.getByLabelText(/destination queue/i), "arn:aws:sqs:us-east-1:123:my-queue");
+        fireEvent.click(screen.getByRole("checkbox", {
+            name: /s3:ObjectCreated:Put/i
+        }));
+        await user_event.type(screen.getByLabelText(/prefix/i), "uploads/");
+        await user_event.type(screen.getByLabelText(/suffix/i), ".jpg");
+        mockMutate.mockImplementation((_, options)=>{
+            options?.onSuccess?.();
+        });
+        const createButton = screen.getByRole("button", {
+            name: /create/i
+        });
+        await waitFor(()=>expect(createButton).toBeEnabled());
+        fireEvent.click(createButton);
+        await waitFor(()=>{
+            expect(mockMutate).toHaveBeenCalledWith({
+                Bucket: "test-bucket",
+                NotificationConfiguration: {
+                    QueueConfigurations: [
+                        {
+                            Id: "test-rule",
+                            QueueArn: "arn:aws:sqs:us-east-1:123:my-queue",
+                            Events: [
+                                "s3:ObjectCreated:Put"
+                            ],
+                            Filter: {
+                                Key: {
+                                    FilterRules: [
+                                        {
+                                            Name: "prefix",
+                                            Value: "uploads/"
+                                        },
+                                        {
+                                            Name: "suffix",
+                                            Value: ".jpg"
+                                        }
+                                    ]
+                                }
+                            }
+                        }
+                    ]
+                }
+            }, expect.any(Object));
+            expect(mockNavigate).toHaveBeenCalledWith("/buckets/test-bucket");
+        });
+    });
+    it("creates notification without filters when not provided", async ()=>{
+        renderBucketNotificationCreatePage();
+        await user_event.type(screen.getByLabelText(/rule name/i), "test-rule");
+        await user_event.type(screen.getByLabelText(/destination queue/i), "arn:aws:sqs:us-east-1:123:my-queue");
+        fireEvent.click(screen.getByRole("checkbox", {
+            name: /s3:ObjectRemoved:\*/i
+        }));
+        mockMutate.mockImplementation((_, options)=>{
+            options?.onSuccess?.();
+        });
+        const createButton = screen.getByRole("button", {
+            name: /create/i
+        });
+        await waitFor(()=>expect(createButton).toBeEnabled());
+        fireEvent.click(createButton);
+        await waitFor(()=>{
+            expect(mockMutate).toHaveBeenCalledWith({
+                Bucket: "test-bucket",
+                NotificationConfiguration: {
+                    QueueConfigurations: [
+                        {
+                            Id: "test-rule",
+                            QueueArn: "arn:aws:sqs:us-east-1:123:my-queue",
+                            Events: [
+                                "s3:ObjectRemoved:*"
+                            ]
+                        }
+                    ]
+                }
+            }, expect.any(Object));
+        });
+    });
+    it("preserves existing queue configurations when creating new notification", async ()=>{
+        const existingConfig = {
+            QueueConfigurations: [
+                {
+                    Id: "existing-rule",
+                    QueueArn: "arn:aws:sqs:us-east-1:123:existing-queue",
+                    Events: [
+                        "s3:ObjectCreated:*"
+                    ]
+                }
+            ]
+        };
+        mockUseGetBucketNotification.mockReturnValue({
+            data: existingConfig
+        });
+        renderBucketNotificationCreatePage();
+        await user_event.type(screen.getByLabelText(/rule name/i), "new-rule");
+        await user_event.type(screen.getByLabelText(/destination queue/i), "arn:aws:sqs:us-east-1:123:new-queue");
+        fireEvent.click(screen.getByRole("checkbox", {
+            name: /^s3:ObjectRemoved:Delete$/i
+        }));
+        mockMutate.mockImplementation((_, options)=>{
+            options?.onSuccess?.();
+        });
+        const createButton = screen.getByRole("button", {
+            name: /create/i
+        });
+        await waitFor(()=>expect(createButton).toBeEnabled());
+        fireEvent.click(createButton);
+        await waitFor(()=>{
+            const call = mockMutate.mock.calls[0][0];
+            expect(call.NotificationConfiguration.QueueConfigurations).toHaveLength(2);
+            expect(call.NotificationConfiguration.QueueConfigurations[0]).toEqual(existingConfig.QueueConfigurations[0]);
+            expect(call.NotificationConfiguration.QueueConfigurations[1]).toMatchObject({
+                Id: "new-rule",
+                QueueArn: "arn:aws:sqs:us-east-1:123:new-queue",
+                Events: [
+                    "s3:ObjectRemoved:Delete"
+                ]
+            });
+        });
+    });
+    it("displays error message when creation fails", async ()=>{
+        renderBucketNotificationCreatePage();
+        await user_event.type(screen.getByLabelText(/rule name/i), "test-rule");
+        await user_event.type(screen.getByLabelText(/destination queue/i), "arn:aws:sqs:us-east-1:123:my-queue");
+        fireEvent.click(screen.getByRole("checkbox", {
+            name: /s3:ObjectCreated:\*/i
+        }));
+        const error = new Error("Access Denied");
+        mockMutate.mockImplementation((_, options)=>{
+            options?.onError?.(error);
+        });
+        const createButton = screen.getByRole("button", {
+            name: /create/i
+        });
+        await waitFor(()=>expect(createButton).toBeEnabled());
+        fireEvent.click(createButton);
+        await waitFor(()=>{
+            expect(mockNavigate).not.toHaveBeenCalled();
+        });
+    });
+    it("handles cancel button click and navigates back", ()=>{
+        renderBucketNotificationCreatePage();
+        const cancelButton = screen.getByRole("button", {
+            name: /cancel/i
+        });
+        fireEvent.click(cancelButton);
+        expect(mockNavigate).toHaveBeenCalledWith("/buckets/test-bucket");
+    });
+    it("allows selecting multiple events", async ()=>{
+        renderBucketNotificationCreatePage();
+        await user_event.type(screen.getByLabelText(/rule name/i), "multi-event");
+        await user_event.type(screen.getByLabelText(/destination queue/i), "arn:aws:sqs:us-east-1:123:queue");
+        fireEvent.click(screen.getByRole("checkbox", {
+            name: /^s3:ObjectCreated:Put$/i
+        }));
+        fireEvent.click(screen.getByRole("checkbox", {
+            name: /^s3:ObjectCreated:Copy$/i
+        }));
+        fireEvent.click(screen.getByRole("checkbox", {
+            name: /^s3:ObjectRemoved:Delete$/i
+        }));
+        mockMutate.mockImplementation((_, options)=>{
+            options?.onSuccess?.();
+        });
+        const createButton = screen.getByRole("button", {
+            name: /create/i
+        });
+        await waitFor(()=>expect(createButton).toBeEnabled());
+        fireEvent.click(createButton);
+        await waitFor(()=>{
+            expect(mockMutate).toHaveBeenCalledWith(expect.objectContaining({
+                NotificationConfiguration: {
+                    QueueConfigurations: [
+                        expect.objectContaining({
+                            Events: expect.arrayContaining([
+                                "s3:ObjectCreated:Put",
+                                "s3:ObjectCreated:Copy",
+                                "s3:ObjectRemoved:Delete"
+                            ])
+                        })
+                    ]
+                }
+            }), expect.any(Object));
+        });
+    });
+});

package/dist/components/buckets/notifications/BucketNotificationCreatePage.d.ts

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

package/dist/components/buckets/notifications/BucketNotificationCreatePage.js

@@ -0,0 +1,234 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { joiResolver } from "@hookform/resolvers/joi";
+import { Form, FormGroup, FormSection, Loader, Stack, Text, useToast } from "@scality/core-ui";
+import { convertRemToPixels } from "@scality/core-ui/dist/components/tablev2/TableUtils";
+import { Button, Input } from "@scality/core-ui/dist/next";
+import { array, object, string } from "joi";
+import { useCallback } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useNavigate, useParams } from "react-router-dom";
+import { useGetBucketNotification, useSetBucketNotification } from "../../../hooks/index.js";
+import { EventsSection } from "./EventsSection.js";
+const schema = object({
+    ruleName: string().required().messages({
+        "string.empty": "This field is required"
+    }),
+    queueArn: string().required().pattern(/^arn:aws:sqs:[a-z0-9-]+:\d+:.+$/).messages({
+        "string.empty": "This field is required",
+        "string.pattern.base": "Must be a valid ARN (e.g., arn:aws:sqs:region:account-id:queue-name)"
+    }),
+    events: array().min(1).required().messages({
+        "array.min": "At least one event must be selected"
+    }),
+    prefix: string().allow("").optional(),
+    suffix: string().allow("").optional()
+});
+function BucketNotificationCreatePage() {
+    const { bucketName } = useParams();
+    const navigate = useNavigate();
+    const { showToast } = useToast();
+    const { data: existingNotificationData, status: notificationStatus } = useGetBucketNotification({
+        Bucket: bucketName
+    });
+    const existingRuleNames = existingNotificationData?.QueueConfigurations?.map((config)=>config.Id) || [];
+    const dynamicSchema = schema.keys({
+        ruleName: string().required().invalid(...existingRuleNames).messages({
+            "string.empty": "This field is required",
+            "any.invalid": "A rule with this name already exists"
+        })
+    });
+    const methods = useForm({
+        resolver: joiResolver(dynamicSchema),
+        mode: "onChange",
+        defaultValues: {
+            ruleName: "",
+            queueArn: "",
+            events: [],
+            prefix: "",
+            suffix: ""
+        }
+    });
+    const { mutate: setNotification, isPending: isSaving } = useSetBucketNotification();
+    const { handleSubmit, register, formState: { isValid, isDirty, errors } } = methods;
+    const handleCancel = useCallback(()=>{
+        navigate(`/buckets/${bucketName}`);
+    }, [
+        navigate,
+        bucketName
+    ]);
+    const onSubmit = useCallback((data)=>{
+        if (!bucketName) return;
+        const filterRules = [
+            ...data.prefix ? [
+                {
+                    Name: "prefix",
+                    Value: data.prefix
+                }
+            ] : [],
+            ...data.suffix ? [
+                {
+                    Name: "suffix",
+                    Value: data.suffix
+                }
+            ] : []
+        ];
+        const filteredEvents = data.events.filter((event)=>{
+            if (event.endsWith("*")) return true;
+            if (event.startsWith("s3:ObjectCreated:")) return !data.events.includes("s3:ObjectCreated:*");
+            if (event.startsWith("s3:ObjectRemoved:")) return !data.events.includes("s3:ObjectRemoved:*");
+            if (event.startsWith("s3:LifecycleExpiration:")) return !data.events.includes("s3:LifecycleExpiration:*");
+            return true;
+        });
+        const newQueueConfiguration = {
+            Id: data.ruleName,
+            QueueArn: data.queueArn,
+            Events: filteredEvents,
+            ...filterRules.length > 0 && {
+                Filter: {
+                    Key: {
+                        FilterRules: filterRules
+                    }
+                }
+            }
+        };
+        setNotification({
+            Bucket: bucketName,
+            NotificationConfiguration: {
+                QueueConfigurations: [
+                    ...existingNotificationData?.QueueConfigurations || [],
+                    newQueueConfiguration
+                ]
+            }
+        }, {
+            onSuccess: ()=>{
+                showToast({
+                    open: true,
+                    message: "Notification created successfully",
+                    status: "success"
+                });
+                navigate(`/buckets/${bucketName}`);
+            },
+            onError: (error)=>{
+                const errorMessage = error instanceof Error ? error.message : "Failed to create notification";
+                showToast({
+                    open: true,
+                    message: errorMessage,
+                    status: "error"
+                });
+            }
+        });
+    }, [
+        bucketName,
+        setNotification,
+        navigate,
+        showToast,
+        existingNotificationData
+    ]);
+    if ("pending" === notificationStatus) return /*#__PURE__*/ jsx(Loader, {
+        centered: true,
+        children: /*#__PURE__*/ jsx(Text, {
+            children: "Loading..."
+        })
+    });
+    return /*#__PURE__*/ jsx(FormProvider, {
+        ...methods,
+        children: /*#__PURE__*/ jsxs(Form, {
+            layout: {
+                kind: "page",
+                title: "Create Bucket Notification"
+            },
+            requireMode: "partial",
+            onSubmit: handleSubmit(onSubmit),
+            rightActions: /*#__PURE__*/ jsxs(Stack, {
+                gap: "r16",
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        id: "cancel-btn",
+                        variant: "outline",
+                        type: "button",
+                        label: "Cancel",
+                        onClick: handleCancel,
+                        disabled: isSaving
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        id: "create-notification-btn",
+                        type: "submit",
+                        variant: "primary",
+                        label: "Create",
+                        disabled: !isDirty || !isValid || isSaving
+                    })
+                ]
+            }),
+            children: [
+                /*#__PURE__*/ jsx(FormSection, {
+                    forceLabelWidth: convertRemToPixels(13),
+                    children: /*#__PURE__*/ jsx(FormGroup, {
+                        label: "Rule name",
+                        id: "ruleName",
+                        direction: "horizontal",
+                        error: errors?.ruleName?.message,
+                        helpErrorPosition: "bottom",
+                        labelHelpTooltip: /*#__PURE__*/ jsx(Fragment, {}),
+                        required: true,
+                        content: /*#__PURE__*/ jsx(Input, {
+                            id: "ruleName",
+                            ...register("ruleName")
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(EventsSection, {}),
+                /*#__PURE__*/ jsx(FormSection, {
+                    forceLabelWidth: convertRemToPixels(13),
+                    children: /*#__PURE__*/ jsx(FormGroup, {
+                        label: "Destination Queue",
+                        id: "queueArn",
+                        direction: "horizontal",
+                        error: errors?.queueArn?.message,
+                        helpErrorPosition: "bottom",
+                        labelHelpTooltip: /*#__PURE__*/ jsx(Fragment, {}),
+                        required: true,
+                        content: /*#__PURE__*/ jsx(Input, {
+                            id: "queueArn",
+                            placeholder: "arn:aws:sqs:us-east-1:1xx:name",
+                            ...register("queueArn")
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(FormSection, {
+                    title: {
+                        name: "Filters"
+                    },
+                    children: /*#__PURE__*/ jsxs(Stack, {
+                        direction: "horizontal",
+                        gap: "r16",
+                        children: [
+                            /*#__PURE__*/ jsx(FormGroup, {
+                                label: "Prefix",
+                                id: "prefix",
+                                direction: "horizontal",
+                                content: /*#__PURE__*/ jsx(Input, {
+                                    id: "prefix",
+                                    placeholder: "",
+                                    size: "2/3",
+                                    ...register("prefix")
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(FormGroup, {
+                                label: "Suffix",
+                                id: "suffix",
+                                direction: "horizontal",
+                                content: /*#__PURE__*/ jsx(Input, {
+                                    id: "suffix",
+                                    placeholder: "",
+                                    size: "2/3",
+                                    ...register("suffix")
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+export { BucketNotificationCreatePage };

package/dist/components/buckets/notifications/EventsSection.d.ts

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

package/dist/components/buckets/notifications/EventsSection.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox, FormGroup, FormSection, Stack, Text, Wrap } from "@scality/core-ui";
+import { useCallback } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { objectCreationEvents, objectDeletionEvents, othersEvents } from "./events.js";
+import { Box } from "@scality/core-ui/dist/next";
+function EventsSection() {
+    const { control, formState: { errors } } = useFormContext();
+    const toggleEvent = useCallback((currentEvents, eventValue, onChange)=>{
+        const isWildcard = eventValue.endsWith("*");
+        const isSelected = currentEvents.includes(eventValue);
+        if (isWildcard) if (isSelected) {
+            const relatedEvents = eventValue.startsWith("s3:ObjectCreated") ? objectCreationEvents.events : eventValue.startsWith("s3:ObjectRemoved") ? objectDeletionEvents.events : eventValue.startsWith("s3:LifecycleExpiration") ? othersEvents.events.filter((e)=>e.startsWith("s3:LifecycleExpiration")) : [
+                eventValue
+            ];
+            onChange(currentEvents.filter((e)=>!relatedEvents.includes(e)));
+        } else {
+            const relatedEvents = eventValue.startsWith("s3:ObjectCreated") ? objectCreationEvents.events : eventValue.startsWith("s3:ObjectRemoved") ? objectDeletionEvents.events : eventValue.startsWith("s3:LifecycleExpiration") ? othersEvents.events.filter((e)=>e.startsWith("s3:LifecycleExpiration")) : [
+                eventValue
+            ];
+            const newEvents = [
+                ...currentEvents.filter((e)=>!relatedEvents.includes(e)),
+                ...relatedEvents
+            ];
+            onChange(newEvents);
+        }
+        else onChange(isSelected ? currentEvents.filter((e)=>e !== eventValue) : [
+            ...currentEvents,
+            eventValue
+        ]);
+    }, []);
+    const isEventDisabled = (event, selectedEvents)=>{
+        if (event.endsWith("*")) return false;
+        if (event.startsWith("s3:ObjectCreated")) return selectedEvents.includes("s3:ObjectCreated:*");
+        if (event.startsWith("s3:ObjectRemoved")) return selectedEvents.includes("s3:ObjectRemoved:*");
+        if (event.startsWith("s3:LifecycleExpiration")) return selectedEvents.includes("s3:LifecycleExpiration:*");
+        return false;
+    };
+    return /*#__PURE__*/ jsxs(FormSection, {
+        children: [
+            /*#__PURE__*/ jsx(Wrap, {
+                children: /*#__PURE__*/ jsx(Box, {
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: "r8",
+                    children: /*#__PURE__*/ jsx(Text, {
+                        isEmphazed: true,
+                        color: "textPrimary",
+                        children: "Events"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(FormGroup, {
+                id: "events",
+                label: "",
+                direction: "vertical",
+                error: errors?.events?.message,
+                content: /*#__PURE__*/ jsx(Controller, {
+                    control: control,
+                    name: "events",
+                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsxs(Stack, {
+                            direction: "vertical",
+                            gap: "r16",
+                            children: [
+                                /*#__PURE__*/ jsxs(Stack, {
+                                    direction: "vertical",
+                                    gap: "r8",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            color: "textPrimary",
+                                            children: objectCreationEvents.label
+                                        }),
+                                        objectCreationEvents.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                                id: event,
+                                                label: event,
+                                                checked: value.includes(event),
+                                                disabled: isEventDisabled(event, value),
+                                                onChange: ()=>toggleEvent(value, event, onChange)
+                                            }, event))
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Stack, {
+                                    direction: "vertical",
+                                    gap: "r8",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            color: "textPrimary",
+                                            children: objectDeletionEvents.label
+                                        }),
+                                        objectDeletionEvents.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                                id: event,
+                                                label: event,
+                                                checked: value.includes(event),
+                                                disabled: isEventDisabled(event, value),
+                                                onChange: ()=>toggleEvent(value, event, onChange)
+                                            }, event))
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Stack, {
+                                    direction: "vertical",
+                                    gap: "r8",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            color: "textPrimary",
+                                            children: othersEvents.label
+                                        }),
+                                        othersEvents.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                                id: event,
+                                                label: event,
+                                                checked: value.includes(event),
+                                                disabled: isEventDisabled(event, value),
+                                                onChange: ()=>toggleEvent(value, event, onChange)
+                                            }, event))
+                                    ]
+                                })
+                            ]
+                        })
+                })
+            })
+        ]
+    });
+}
+export { EventsSection };

package/dist/components/buckets/notifications/events.d.ts

@@ -0,0 +1,12 @@
+export declare const objectCreationEvents: {
+    label: string;
+    events: string[];
+};
+export declare const objectDeletionEvents: {
+    label: string;
+    events: string[];
+};
+export declare const othersEvents: {
+    label: string;
+    events: string[];
+};

package/dist/components/buckets/notifications/events.js

@@ -0,0 +1,27 @@
+const objectCreationEvents = {
+    label: "Object creation",
+    events: [
+        "s3:ObjectCreated:*",
+        "s3:ObjectCreated:Put",
+        "s3:ObjectCreated:Copy",
+        "s3:ObjectCreated:CompleteMultipartUpload"
+    ]
+};
+const objectDeletionEvents = {
+    label: "Object deletion",
+    events: [
+        "s3:ObjectRemoved:*",
+        "s3:ObjectRemoved:Delete",
+        "s3:ObjectRemoved:DeleteMarkerCreated"
+    ]
+};
+const othersEvents = {
+    label: "Others",
+    events: [
+        "s3:Replication:OperationFailedReplication",
+        "s3:LifecycleExpiration:*",
+        "s3:LifecycleExpiration:DeleteMarkerCreated",
+        "s3:LifecycleExpiration:Delete"
+    ]
+};
+export { objectCreationEvents, objectDeletionEvents, othersEvents };

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ export { BucketList } from "./buckets/BucketList";
 export { BucketOverview } from "./buckets/BucketOverview";
 export { BucketPage } from "./buckets/BucketPage";
 export { BucketPolicyPage } from "./buckets/BucketPolicyPage";
+export { BucketNotificationCreatePage } from "./buckets/notifications/BucketNotificationCreatePage";
 export { UploadButton } from "./objects/UploadButton";
 export { CreateFolderButton } from "./objects/CreateFolderButton";
 export { ObjectDetails } from "./objects/ObjectDetails";

package/dist/components/index.js

@@ -3,6 +3,7 @@ import { BucketList } from "./buckets/BucketList.js";
 import { BucketOverview } from "./buckets/BucketOverview.js";
 import { BucketPage } from "./buckets/BucketPage.js";
 import { BucketPolicyPage } from "./buckets/BucketPolicyPage.js";
+import { BucketNotificationCreatePage } from "./buckets/notifications/BucketNotificationCreatePage.js";
 import { UploadButton } from "./objects/UploadButton.js";
 import { CreateFolderButton } from "./objects/CreateFolderButton.js";
 import { ObjectDetails } from "./objects/ObjectDetails/index.js";
@@ -10,4 +11,4 @@ import { ObjectList } from "./objects/ObjectList.js";
 import { ObjectPage } from "./objects/ObjectPage.js";
 import { MetadataSearch } from "./search/MetadataSearch.js";
 import { DataBrowserProvider, useDataBrowserContext, useDataBrowserTheme } from "./providers/DataBrowserProvider.js";
-export { BucketList, BucketOverview, BucketPage, BucketPolicyPage, CreateFolderButton, DataBrowserProvider, DeleteBucketButton, MetadataSearch, ObjectDetails, ObjectList, ObjectPage, UploadButton, useDataBrowserContext, useDataBrowserTheme };
+export { BucketList, BucketNotificationCreatePage, BucketOverview, BucketPage, BucketPolicyPage, CreateFolderButton, DataBrowserProvider, DeleteBucketButton, MetadataSearch, ObjectDetails, ObjectList, ObjectPage, UploadButton, useDataBrowserContext, useDataBrowserTheme };

package/dist/hooks/__tests__/useIsBucketEmpty.test.js

@@ -23,8 +23,8 @@ describe("useIsBucketEmpty", ()=>{
             data: {
                 pages: [
                     {
-                        objects: [],
-                        commonPrefixes: []
+                        Contents: [],
+                        CommonPrefixes: []
                     }
                 ]
             },
@@ -40,12 +40,12 @@ describe("useIsBucketEmpty", ()=>{
             data: {
                 pages: [
                     {
-                        objects: [
+                        Contents: [
                             {
                                 Key: "file.txt"
                             }
                         ],
-                        commonPrefixes: []
+                        CommonPrefixes: []
                     }
                 ]
             },
@@ -61,8 +61,8 @@ describe("useIsBucketEmpty", ()=>{
             data: {
                 pages: [
                     {
-                        objects: [],
-                        commonPrefixes: [
+                        Contents: [],
+                        CommonPrefixes: [
                             {
                                 Prefix: "folder/"
                             }
@@ -94,7 +94,7 @@ describe("useIsBucketEmpty", ()=>{
             data: {
                 pages: [
                     {
-                        objects: [
+                        Contents: [
                             {
                                 Key: void 0
                             },
@@ -102,7 +102,7 @@ describe("useIsBucketEmpty", ()=>{
                                 Key: ""
                             }
                         ],
-                        commonPrefixes: [
+                        CommonPrefixes: [
                             {
                                 Prefix: null
                             },

package/dist/hooks/useIsBucketEmpty.js

@@ -13,12 +13,12 @@ const useIsBucketEmpty = (bucketName)=>{
         if ("pending" === status || !data) return null;
         if (!isInfiniteData(data)) return null;
         for (const page of data.pages){
-            if (page?.objects && page.objects.length > 0) {
-                const validObjects = page.objects.filter((obj)=>obj?.Key);
+            if (page?.Contents && page.Contents.length > 0) {
+                const validObjects = page.Contents.filter((obj)=>obj?.Key);
                 if (validObjects.length > 0) return false;
             }
-            if (page?.commonPrefixes && page.commonPrefixes.length > 0) {
-                const validPrefixes = page.commonPrefixes.filter((cp)=>cp?.Prefix);
+            if (page?.CommonPrefixes && page.CommonPrefixes.length > 0) {
+                const validPrefixes = page.CommonPrefixes.filter((cp)=>cp?.Prefix);
                 if (validPrefixes.length > 0) return false;
             }
         }

package/dist/test/testUtils.js

@@ -22,7 +22,7 @@ var __webpack_require__ = {};
 const testConfig = {
     endpoint: "https://s3.amazonaws.com",
     region: "us-east-1",
-    forcePathStyle: false
+    forcePathStyle: true
 };
 const testCredentials = {
     accessKeyId: "test-access-key",

package/dist/types/index.d.ts

@@ -8,6 +8,8 @@ export interface S3BrowserConfig extends Omit<S3ClientConfig, "credentials"> {
     useDevProxy?: boolean;
     realS3Host?: string;
     proxyPath?: string;
+    proxyHost?: string;
+    proxyPort?: number;
     publicAclIndicator?: string;
 }
 export interface S3Credentials extends AwsCredentialIdentity {

package/dist/utils/s3Client.js

@@ -1,35 +1,36 @@
 import { S3Client } from "@aws-sdk/client-s3";
 import { createProxyMiddleware } from "./proxyMiddleware.js";
-import { getBuildInfo, getProxyConfig, shouldUseProxy } from "../config/factory.js";
+import { S3ConfigurationFactory } from "../config/factory.js";
+function extractProxyConfig(config) {
+    if (config.useDevProxy && config.realS3Host && config.proxyPath) return {
+        realS3Host: config.realS3Host,
+        proxyBasePath: config.proxyPath,
+        proxyHost: config.proxyHost || "localhost",
+        proxyPort: config.proxyPort || 8084
+    };
+    const proxyConfig = S3ConfigurationFactory.createProxyConfiguration();
+    if (proxyConfig.useProxy && proxyConfig.proxyConfig) return {
+        realS3Host: proxyConfig.proxyConfig.realHost,
+        proxyBasePath: proxyConfig.proxyConfig.proxyBasePath,
+        proxyHost: proxyConfig.proxyConfig.proxyHost,
+        proxyPort: proxyConfig.proxyConfig.proxyPort
+    };
+    return null;
+}
 const createS3Client = (config)=>{
     const client = new S3Client({
         ...config,
         credentials: config.credentials,
-        forcePathStyle: true,
+        forcePathStyle: config.forcePathStyle ?? true,
         region: config.region
     });
-    if (shouldUseProxy()) {
-        const proxyConfig = getProxyConfig();
-        if (proxyConfig.proxyConfig) {
-            client.middlewareStack.use(createProxyMiddleware({
-                realS3Host: proxyConfig.proxyConfig.realHost,
-                proxyBasePath: proxyConfig.proxyConfig.proxyBasePath,
-                proxyHost: proxyConfig.proxyConfig.proxyHost,
-                proxyPort: proxyConfig.proxyConfig.proxyPort
-            }));
-            const buildInfo = getBuildInfo();
-            console.log("S3Client configured with proxy middleware", {
-                buildInfo,
-                proxyConfig: proxyConfig.proxyConfig
-            });
-        }
-    } else {
-        const buildInfo = getBuildInfo();
-        console.log("S3Client configured for direct connection", {
-            buildInfo,
-            endpoint: config.endpoint
-        });
-    }
+    const proxyConfig = extractProxyConfig(config);
+    if (proxyConfig) client.middlewareStack.use(createProxyMiddleware({
+        realS3Host: proxyConfig.realS3Host,
+        proxyBasePath: proxyConfig.proxyBasePath,
+        proxyHost: proxyConfig.proxyHost,
+        proxyPort: proxyConfig.proxyPort
+    }));
     return client;
 };
 export { createS3Client };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/data-browser-library",
-  "version": "1.0.0-preview.5",
+  "version": "1.0.0-preview.7",
   "description": "A modular React component library for browsing S3 buckets and objects",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -27,21 +27,26 @@
     "@aws-sdk/protocol-http": "^3.370.0",
     "@aws-sdk/s3-presigned-post": "^3.888.0",
     "@aws-sdk/s3-request-presigner": "^3.478.0",
+    "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-query": "^5.8.0",
     "@tanstack/react-query-devtools": "^5.8.0",
     "@testing-library/user-event": "^14.6.1",
+    "joi": "^18.0.1",
     "react-dropzone": "^14.2.0",
-    "react-hook-form": "^7.48.0"
+    "react-hook-form": "^7.48.0",
+    "@scality/zenkoclient": "^2.0.0-preview.1"
   },
   "peerDependencies": {
-    "@scality/core-ui": "0.174.0",
+    "@scality/core-ui": "^0.174.0",
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "react-router-dom": ">=6.0.0",
+    "styled-components": "^5.0.0"
   },
   "devDependencies": {
-    "@rslib/core": "^0.14.0",
     "@rsbuild/plugin-react": "^1.4.1",
+    "@rslib/core": "^0.14.0",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.6.1",