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

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 joi 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 = joi.object({
+    ruleName: joi.string().required().messages({
+        "string.empty": "This field is required"
+    }),
+    queueArn: joi.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: joi.array().min(1).required().messages({
+        "array.min": "At least one event must be selected"
+    }),
+    prefix: joi.string().allow("").optional(),
+    suffix: joi.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: joi.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

@@ -0,0 +1,21 @@
+export { DeleteBucketButton } from "./buckets/DeleteBucketButton";
+export { BucketList } from "./buckets/BucketList";
+export { BucketOverview, BucketOverviewSection, BucketOverviewField, } from "./buckets/BucketOverview";
+export { BucketPage } from "./buckets/BucketPage";
+export { BucketPolicyPage } from "./buckets/BucketPolicyPage";
+export { BucketLifecycleFormPage } from "./buckets/BucketLifecycleFormPage";
+export { BucketReplicationFormPage } from "./buckets/BucketReplicationFormPage";
+export { BucketNotificationCreatePage } from "./buckets/notifications/BucketNotificationCreatePage";
+export { EmptyBucketButton } from "./buckets/EmptyBucketButton";
+export { BucketCreate, baseBucketCreateSchema, bucketNameValidationSchema, bucketErrorMessage, type BucketCreateFormData, } from "./buckets/BucketCreate";
+export { BucketVersioning } from "./buckets/BucketVersioning";
+export { UploadButton } from "./objects/UploadButton";
+export { CreateFolderButton } from "./objects/CreateFolderButton";
+export { ObjectDetails } from "./objects/ObjectDetails";
+export { ObjectList } from "./objects/ObjectList";
+export { ObjectPage } from "./objects/ObjectPage";
+export { ObjectLockSettings } from "./objects/ObjectLock/ObjectLockSettings";
+export { EditRetentionButton } from "./objects/ObjectLock/EditRetentionButton";
+export { MetadataSearch } from "./search/MetadataSearch";
+export { ArrayFieldActions } from "./ui/ArrayFieldActions";
+export { DataBrowserProvider, useDataBrowserContext, useDataBrowserTheme, } from "./providers/DataBrowserProvider";

package/dist/components/index.js

@@ -0,0 +1,22 @@
+import { DeleteBucketButton } from "./buckets/DeleteBucketButton.js";
+import { BucketList } from "./buckets/BucketList.js";
+import { BucketOverview, BucketOverviewField, BucketOverviewSection } from "./buckets/BucketOverview.js";
+import { BucketPage } from "./buckets/BucketPage.js";
+import { BucketPolicyPage } from "./buckets/BucketPolicyPage.js";
+import { BucketLifecycleFormPage } from "./buckets/BucketLifecycleFormPage.js";
+import { BucketReplicationFormPage } from "./buckets/BucketReplicationFormPage.js";
+import { BucketNotificationCreatePage } from "./buckets/notifications/BucketNotificationCreatePage.js";
+import { EmptyBucketButton } from "./buckets/EmptyBucketButton.js";
+import { BucketCreate, baseBucketCreateSchema, bucketErrorMessage, bucketNameValidationSchema } from "./buckets/BucketCreate.js";
+import { BucketVersioning } from "./buckets/BucketVersioning.js";
+import { UploadButton } from "./objects/UploadButton.js";
+import { CreateFolderButton } from "./objects/CreateFolderButton.js";
+import { ObjectDetails } from "./objects/ObjectDetails/index.js";
+import { ObjectList } from "./objects/ObjectList.js";
+import { ObjectPage } from "./objects/ObjectPage.js";
+import { ObjectLockSettings } from "./objects/ObjectLock/ObjectLockSettings.js";
+import { EditRetentionButton } from "./objects/ObjectLock/EditRetentionButton.js";
+import { MetadataSearch } from "./search/MetadataSearch.js";
+import { ArrayFieldActions } from "./ui/ArrayFieldActions.js";
+import { DataBrowserProvider, useDataBrowserContext, useDataBrowserTheme } from "./providers/DataBrowserProvider.js";
+export { ArrayFieldActions, BucketCreate, BucketLifecycleFormPage, BucketList, BucketNotificationCreatePage, BucketOverview, BucketOverviewField, BucketOverviewSection, BucketPage, BucketPolicyPage, BucketReplicationFormPage, BucketVersioning, CreateFolderButton, DataBrowserProvider, DeleteBucketButton, EditRetentionButton, EmptyBucketButton, MetadataSearch, ObjectDetails, ObjectList, ObjectLockSettings, ObjectPage, UploadButton, baseBucketCreateSchema, bucketErrorMessage, bucketNameValidationSchema, useDataBrowserContext, useDataBrowserTheme };

package/dist/components/layouts/ArrowNavigation.d.ts

@@ -0,0 +1,4 @@
+import { To } from "react-router-dom";
+export default function ArrowNavigation({ path }: {
+    path: To;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layouts/ArrowNavigation.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "@scality/core-ui";
+import { useNavigate } from "react-router-dom";
+function ArrowNavigation({ path }) {
+    const navigate = useNavigate();
+    return /*#__PURE__*/ jsx(Icon, {
+        name: "Arrow-left",
+        size: "2x",
+        color: "textPrimary",
+        style: {
+            cursor: "pointer"
+        },
+        onClick: ()=>navigate(path)
+    });
+}
+export { ArrowNavigation as default };

package/dist/components/layouts/BrowserPageLayout.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { To } from "react-router-dom";
+export declare const HeadTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface BrowserPageLayoutProps {
+    title: React.ReactNode;
+    leftPanel: React.ReactNode;
+    rightPanel: React.ReactNode;
+    withArrowNavigation?: boolean;
+    arrowNavigationPath?: To;
+}
+export declare const BrowserPageLayout: React.FC<BrowserPageLayoutProps>;
+export {};

package/dist/components/layouts/BrowserPageLayout.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AppContainer, Icon, Stack, TwoPanelLayout } from "@scality/core-ui";
+import { fontSize } from "@scality/core-ui/dist/style/theme";
+import "react";
+import styled_components from "styled-components";
+import ArrowNavigation from "./ArrowNavigation.js";
+const HeadTitle = styled_components.div`
+  display: flex;
+  color: ${(props)=>props.theme.textPrimary};
+  font-size: ${fontSize.large};
+  align-items: center;
+`;
+const BrowserPageLayout = ({ title, leftPanel, rightPanel, withArrowNavigation = false, arrowNavigationPath })=>/*#__PURE__*/ jsxs(AppContainer, {
+        children: [
+            /*#__PURE__*/ jsx(AppContainer.OverallSummary, {
+                children: /*#__PURE__*/ jsxs(Stack, {
+                    gap: "r20",
+                    children: [
+                        withArrowNavigation && arrowNavigationPath && /*#__PURE__*/ jsx(ArrowNavigation, {
+                            path: arrowNavigationPath
+                        }),
+                        /*#__PURE__*/ jsx(Icon, {
+                            name: "Account",
+                            size: "2x",
+                            withWrapper: true
+                        }),
+                        /*#__PURE__*/ jsx(HeadTitle, {
+                            children: title
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(AppContainer.MainContent, {
+                background: "backgroundLevel1",
+                children: /*#__PURE__*/ jsx(TwoPanelLayout, {
+                    panelsRatio: "65-35",
+                    leftPanel: {
+                        children: /*#__PURE__*/ jsx(Fragment, {
+                            children: leftPanel
+                        })
+                    },
+                    rightPanel: {
+                        children: /*#__PURE__*/ jsx(Fragment, {
+                            children: rightPanel
+                        })
+                    }
+                })
+            })
+        ]
+    });
+export { BrowserPageLayout, HeadTitle };

package/dist/components/objects/CreateFolderButton.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+interface CreateFolderButtonProps {
+    /**
+     * The S3 bucket name where folder will be created
+     */
+    bucket: string;
+    /**
+     * The prefix/path where folder will be created within the bucket
+     */
+    prefix?: string;
+    /**
+     * Button label text
+     */
+    label?: string;
+    /**
+     * Button variant
+     */
+    variant?: "primary" | "secondary" | "outline";
+    /**
+     * Called when folder creation is successful
+     */
+    onFolderSuccess?: (folderName: string) => void;
+    /**
+     * Called when folder creation fails
+     */
+    onFolderError?: (error: Error, folderName: string) => void;
+}
+export declare const CreateFolderButton: React.FC<CreateFolderButtonProps>;
+export default CreateFolderButton;