@scality/data-browser-library 1.0.0-preview.8 → 1.0.1

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

@@ -0,0 +1,316 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { joiResolver } from "@hookform/resolvers/joi";
+import { Form, FormGroup, FormSection, Icon, Loader, Stack, Text, spacing, useToast } from "@scality/core-ui";
+import { convertRemToPixels } from "@scality/core-ui/dist/components/tablev2/TableUtils";
+import { Box, Button, Input } from "@scality/core-ui/dist/next";
+import joi from "joi";
+import { useCallback, useEffect, useMemo } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useParams } from "react-router";
+import { useGetBucketNotification, useSetBucketNotification } from "../../../hooks/index.js";
+import { useDataBrowserNavigate } from "../../../hooks/useDataBrowserNavigate.js";
+import { EventsSection } from "./EventsSection.js";
+const baseSchema = 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 BucketNotificationFormPage() {
+    const { bucketName, ruleId } = useParams();
+    const navigate = useDataBrowserNavigate();
+    const { showToast } = useToast();
+    const isEditMode = !!ruleId;
+    const { data: existingNotificationData, status: notificationStatus, error: notificationError } = useGetBucketNotification({
+        Bucket: bucketName
+    });
+    const existingRule = useMemo(()=>{
+        if (!isEditMode || !existingNotificationData?.QueueConfigurations || !ruleId) return null;
+        return existingNotificationData.QueueConfigurations.find((config)=>config.Id === decodeURIComponent(ruleId));
+    }, [
+        isEditMode,
+        existingNotificationData,
+        ruleId
+    ]);
+    const existingRuleNames = useMemo(()=>existingNotificationData?.QueueConfigurations?.map((config)=>config.Id)?.filter((id)=>!!id)?.filter((id)=>!isEditMode || id !== existingRule?.Id) || [], [
+        existingNotificationData,
+        isEditMode,
+        existingRule
+    ]);
+    const dynamicSchema = useMemo(()=>baseSchema.keys({
+            ruleName: joi.string().required().invalid(...existingRuleNames).messages({
+                'string.empty': 'This field is required',
+                'any.invalid': 'A rule with this name already exists'
+            })
+        }), [
+        existingRuleNames
+    ]);
+    const methods = useForm({
+        resolver: joiResolver(dynamicSchema),
+        mode: 'onChange',
+        defaultValues: {
+            ruleName: '',
+            queueArn: '',
+            events: [],
+            prefix: '',
+            suffix: ''
+        }
+    });
+    const { mutate: setNotification, isPending: isSaving } = useSetBucketNotification();
+    const { handleSubmit, register, reset, formState: { isValid, isDirty, errors } } = methods;
+    useEffect(()=>{
+        if (isEditMode && existingRule) {
+            const prefixRule = existingRule.Filter?.Key?.FilterRules?.find((r)=>'prefix' === r.Name);
+            const suffixRule = existingRule.Filter?.Key?.FilterRules?.find((r)=>'suffix' === r.Name);
+            reset({
+                ruleName: existingRule.Id || '',
+                queueArn: existingRule.QueueArn || '',
+                events: existingRule.Events || [],
+                prefix: prefixRule?.Value || '',
+                suffix: suffixRule?.Value || ''
+            });
+        }
+    }, [
+        isEditMode,
+        existingRule,
+        reset
+    ]);
+    const handleCancel = useCallback(()=>{
+        navigate(`/buckets/${bucketName}?tab=notification`);
+    }, [
+        navigate,
+        bucketName
+    ]);
+    const onSubmit = useCallback((data)=>{
+        const filterRules = [
+            ...data.prefix ? [
+                {
+                    Name: 'prefix',
+                    Value: data.prefix
+                }
+            ] : [],
+            ...data.suffix ? [
+                {
+                    Name: 'suffix',
+                    Value: data.suffix
+                }
+            ] : []
+        ];
+        const wildcardPrefixes = [
+            's3:ObjectCreated:',
+            's3:ObjectRemoved:',
+            's3:ObjectRestore:',
+            's3:LifecycleExpiration:',
+            's3:Replication:',
+            's3:ObjectTagging:'
+        ];
+        const filteredEvents = data.events.filter((event)=>{
+            if (event.endsWith('*')) return true;
+            for (const prefix of wildcardPrefixes)if (event.startsWith(prefix)) return !data.events.includes(`${prefix}*`);
+            return true;
+        });
+        const newQueueConfiguration = {
+            Id: data.ruleName,
+            QueueArn: data.queueArn,
+            Events: filteredEvents,
+            ...filterRules.length > 0 && {
+                Filter: {
+                    Key: {
+                        FilterRules: filterRules
+                    }
+                }
+            }
+        };
+        const existingConfigurations = existingNotificationData?.QueueConfigurations || [];
+        const updatedConfigurations = isEditMode ? existingConfigurations.map((config)=>config.Id === existingRule?.Id ? newQueueConfiguration : config) : [
+            ...existingConfigurations,
+            newQueueConfiguration
+        ];
+        setNotification({
+            Bucket: bucketName,
+            NotificationConfiguration: {
+                QueueConfigurations: updatedConfigurations
+            }
+        }, {
+            onSuccess: ()=>{
+                showToast({
+                    open: true,
+                    message: `Notification rule ${isEditMode ? 'updated' : 'created'} successfully`,
+                    status: 'success'
+                });
+                navigate(`/buckets/${bucketName}?tab=notification`);
+            },
+            onError: (error)=>{
+                const errorMessage = error instanceof Error ? error.message : `Failed to ${isEditMode ? 'update' : 'create'} notification rule`;
+                showToast({
+                    open: true,
+                    message: errorMessage,
+                    status: 'error'
+                });
+            }
+        });
+    }, [
+        bucketName,
+        setNotification,
+        navigate,
+        showToast,
+        existingNotificationData,
+        isEditMode,
+        existingRule
+    ]);
+    if ('pending' === notificationStatus) return /*#__PURE__*/ jsx(Loader, {
+        centered: true,
+        children: /*#__PURE__*/ jsx(Text, {
+            children: "Loading..."
+        })
+    });
+    if ('error' === notificationStatus && notificationError) {
+        const errorMessage = notificationError instanceof Error ? notificationError.message : 'Failed to load notification configuration';
+        return /*#__PURE__*/ jsx(Form, {
+            layout: {
+                kind: 'page',
+                title: isEditMode ? 'Edit Bucket Notification' : 'Create Bucket Notification'
+            },
+            children: /*#__PURE__*/ jsx(Box, {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                padding: spacing.r16,
+                children: /*#__PURE__*/ jsx(Text, {
+                    color: "statusCritical",
+                    children: errorMessage
+                })
+            })
+        });
+    }
+    if (isEditMode && (!existingRule || !existingRule.Id)) return /*#__PURE__*/ jsx(Form, {
+        layout: {
+            kind: 'page',
+            title: 'Edit Bucket Notification'
+        },
+        children: /*#__PURE__*/ jsx(Box, {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: spacing.r16,
+            children: /*#__PURE__*/ jsx(Text, {
+                color: "statusCritical",
+                children: "Notification rule not found"
+            })
+        })
+    });
+    return /*#__PURE__*/ jsx(FormProvider, {
+        ...methods,
+        children: /*#__PURE__*/ jsxs(Form, {
+            layout: {
+                kind: 'page',
+                title: isEditMode ? 'Edit Bucket Notification' : '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: isEditMode ? 'save-notification-btn' : 'create-notification-btn',
+                        type: "submit",
+                        variant: "primary",
+                        label: isEditMode ? 'Save' : 'Create',
+                        icon: isEditMode ? /*#__PURE__*/ jsx(Icon, {
+                            name: "Save"
+                        }) : void 0,
+                        disabled: isEditMode ? !isDirty || !isValid || isSaving : !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: isEditMode ? /*#__PURE__*/ jsx(Text, {
+                            children: existingRule?.Id
+                        }) : /*#__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 { BucketNotificationFormPage };

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

@@ -0,0 +1,10 @@
+import type { QueueConfiguration } from '@aws-sdk/client-s3';
+interface BucketNotificationListProps {
+    bucketName: string;
+    notificationRules: QueueConfiguration[];
+    notificationStatus?: 'idle' | 'loading' | 'error' | 'success';
+    onCreateRule?: () => void;
+    onEditRule?: (ruleId: string) => void;
+}
+export declare function BucketNotificationList({ bucketName, notificationRules, notificationStatus, onCreateRule, onEditRule, }: BucketNotificationListProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,267 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ConstrainedText, Icon, Stack, Tooltip, spacing, useToast } from "@scality/core-ui";
+import { Box, Button, Table } from "@scality/core-ui/dist/next";
+import { useMemo, useState } from "react";
+import { useSetBucketNotification } from "../../../hooks/bucketConfiguration.js";
+import { useTableRowSelection } from "../../../hooks/useTableRowSelection.js";
+import { ConfirmDeleteRuleModal } from "../../ui/ConfirmDeleteRuleModal.js";
+const MAX_VISIBLE_EVENTS = 3;
+function BucketNotificationList({ bucketName, notificationRules, notificationStatus, onCreateRule, onEditRule }) {
+    const { showToast } = useToast();
+    const updateNotificationMutation = useSetBucketNotification();
+    const [deleteModalState, setDeleteModalState] = useState({
+        isOpen: false,
+        ruleId: ''
+    });
+    const handleDeleteConfirm = ()=>{
+        if (!deleteModalState.ruleId) {
+            showToast({
+                open: true,
+                message: 'Cannot delete rule: Invalid rule ID',
+                status: 'error'
+            });
+            setDeleteModalState({
+                isOpen: false,
+                ruleId: ''
+            });
+            return;
+        }
+        const remainingRules = notificationRules.filter((rule)=>rule.Id !== deleteModalState.ruleId);
+        updateNotificationMutation.mutate({
+            Bucket: bucketName,
+            NotificationConfiguration: {
+                QueueConfigurations: remainingRules
+            }
+        }, {
+            onSuccess: ()=>{
+                showToast({
+                    open: true,
+                    message: 'Notification rule deleted successfully',
+                    status: 'success'
+                });
+                setDeleteModalState({
+                    isOpen: false,
+                    ruleId: ''
+                });
+            },
+            onError: (error)=>{
+                const errorMessage = error instanceof Error ? error.message : 'Failed to delete notification rule';
+                showToast({
+                    open: true,
+                    message: errorMessage,
+                    status: 'error'
+                });
+                setDeleteModalState({
+                    isOpen: false,
+                    ruleId: ''
+                });
+            }
+        });
+    };
+    const columns = useMemo(()=>[
+            {
+                Header: 'Rule Name',
+                accessor: 'ID',
+                id: 'id',
+                Cell: ({ value })=>/*#__PURE__*/ jsx(ConstrainedText, {
+                        text: value || '-',
+                        lineClamp: 2
+                    }),
+                cellStyle: {
+                    flex: '1',
+                    width: 'unset'
+                }
+            },
+            {
+                Header: 'Events',
+                accessor: 'Events',
+                id: 'events',
+                Cell: ({ value })=>{
+                    if (!value || 0 === value.length) return /*#__PURE__*/ jsx("span", {
+                        children: "-"
+                    });
+                    const visibleEvents = value.slice(0, MAX_VISIBLE_EVENTS);
+                    const remainingCount = value.length - MAX_VISIBLE_EVENTS;
+                    const allEventsTooltip = /*#__PURE__*/ jsx("ul", {
+                        style: {
+                            margin: 0,
+                            paddingLeft: '1.5rem'
+                        },
+                        children: value.map((event)=>/*#__PURE__*/ jsx("li", {
+                                children: event
+                            }, event))
+                    });
+                    return /*#__PURE__*/ jsxs(Stack, {
+                        direction: "horizontal",
+                        gap: "r8",
+                        children: [
+                            /*#__PURE__*/ jsxs(Box, {
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: spacing.r4,
+                                style: {
+                                    borderLeft: '2px solid currentColor',
+                                    paddingLeft: spacing.r8,
+                                    opacity: 0.8
+                                },
+                                children: [
+                                    visibleEvents.map((event)=>/*#__PURE__*/ jsx("span", {
+                                            children: event
+                                        }, event)),
+                                    remainingCount > 0 && /*#__PURE__*/ jsxs("span", {
+                                        style: {
+                                            fontStyle: 'italic'
+                                        },
+                                        children: [
+                                            "+",
+                                            remainingCount,
+                                            " more"
+                                        ]
+                                    })
+                                ]
+                            }),
+                            remainingCount > 0 && /*#__PURE__*/ jsx(Tooltip, {
+                                overlay: allEventsTooltip,
+                                placement: "top",
+                                overlayStyle: {
+                                    maxWidth: '30rem'
+                                },
+                                children: /*#__PURE__*/ jsx("span", {
+                                    style: {
+                                        cursor: 'help'
+                                    },
+                                    children: /*#__PURE__*/ jsx(Icon, {
+                                        name: "Info",
+                                        size: "sm"
+                                    })
+                                })
+                            })
+                        ]
+                    });
+                },
+                cellStyle: {
+                    width: 'unset',
+                    flex: '2',
+                    alignItems: 'flex-start',
+                    paddingTop: spacing.r8,
+                    paddingBottom: spacing.r8
+                }
+            },
+            {
+                Header: '',
+                accessor: 'rule',
+                id: 'operations',
+                cellStyle: {
+                    flex: '0.5',
+                    textAlign: 'right',
+                    paddingRight: spacing.r16,
+                    width: 'unset'
+                },
+                Cell: ({ value })=>{
+                    const hasValidId = !!value.Id;
+                    return /*#__PURE__*/ jsxs(Box, {
+                        display: "flex",
+                        gap: spacing.r8,
+                        justifyContent: "flex-end",
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                icon: /*#__PURE__*/ jsx(Icon, {
+                                    name: "Edit"
+                                }),
+                                variant: "secondary",
+                                type: "button",
+                                disabled: !hasValidId,
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    if (hasValidId) onEditRule?.(value.Id);
+                                },
+                                "aria-label": "Edit rule",
+                                tooltip: {
+                                    overlay: hasValidId ? 'Edit rule' : 'Cannot edit rule without ID'
+                                }
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                icon: /*#__PURE__*/ jsx(Icon, {
+                                    name: "Delete"
+                                }),
+                                variant: "danger",
+                                type: "button",
+                                disabled: !hasValidId,
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    if (hasValidId) setDeleteModalState({
+                                        isOpen: true,
+                                        ruleId: value.Id
+                                    });
+                                },
+                                "aria-label": "Delete rule",
+                                tooltip: {
+                                    overlay: hasValidId ? 'Delete rule' : 'Cannot delete rule without ID'
+                                }
+                            })
+                        ]
+                    });
+                }
+            }
+        ], [
+        onEditRule
+    ]);
+    const tableData = useMemo(()=>notificationRules.map((rule)=>({
+                ID: rule.Id || '-',
+                Events: rule.Events || [],
+                rule
+            })), [
+        notificationRules
+    ]);
+    const { selectedId, onRowSelected } = useTableRowSelection(tableData);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Table, {
+                columns: columns,
+                data: tableData,
+                status: notificationStatus,
+                defaultSortingKey: "id",
+                entityName: {
+                    en: {
+                        singular: 'notification rule',
+                        plural: 'notification rules'
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        padding: spacing.r16,
+                        children: /*#__PURE__*/ jsx(Button, {
+                            icon: /*#__PURE__*/ jsx(Icon, {
+                                name: "Create-add"
+                            }),
+                            label: "Add Notification",
+                            variant: "primary",
+                            onClick: onCreateRule,
+                            type: "button"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
+                        rowHeight: "h64",
+                        separationLineVariant: "backgroundLevel1",
+                        selectedId: selectedId?.toString(),
+                        onRowSelected: onRowSelected
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ConfirmDeleteRuleModal, {
+                isOpen: deleteModalState.isOpen,
+                ruleId: deleteModalState.ruleId,
+                ruleType: "notification",
+                isDeleting: updateNotificationMutation.isPending,
+                onConfirm: handleDeleteConfirm,
+                onCancel: ()=>setDeleteModalState({
+                        isOpen: false,
+                        ruleId: ''
+                    })
+            })
+        ]
+    });
+}
+export { BucketNotificationList };