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

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

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

@@ -1,39 +1,70 @@
 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";
+import { useCallback, useMemo } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { useSupportedNotificationEvents } from "../../../hooks/useSupportedNotificationEvents.js";
+import { getFilteredEventGroups } from "./events.js";
 function EventsSection() {
     const { control, formState: { errors } } = useFormContext();
+    const supportedEvents = useSupportedNotificationEvents();
+    const eventGroups = useMemo(()=>getFilteredEventGroups(supportedEvents), [
+        supportedEvents
+    ]);
+    const { objectCreation, objectDeletion, objectRestoration, lifecycle, replication, objectTagging, storageAccess, testing } = eventGroups;
+    const getRelatedEvents = useCallback((eventValue)=>{
+        const basePattern = eventValue.slice(0, -1);
+        const eventGroupMap = {
+            's3:ObjectCreated': objectCreation.events,
+            's3:ObjectRemoved': objectDeletion.events,
+            's3:ObjectRestore': objectRestoration.events,
+            's3:Replication': replication.events,
+            's3:ObjectTagging': objectTagging.events
+        };
+        for (const [prefix, events] of Object.entries(eventGroupMap))if (eventValue.startsWith(prefix)) return events;
+        if (eventValue.startsWith('s3:LifecycleExpiration')) return lifecycle.events.filter((e)=>e.startsWith(basePattern));
+        return [
+            eventValue
+        ];
+    }, [
+        objectCreation.events,
+        objectDeletion.events,
+        objectRestoration.events,
+        lifecycle.events,
+        replication.events,
+        objectTagging.events
+    ]);
     const toggleEvent = useCallback((currentEvents, eventValue, onChange)=>{
-        const isWildcard = eventValue.endsWith("*");
+        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")) : [
+        if (!isWildcard) {
+            const newEvents = isSelected ? currentEvents.filter((e)=>e !== eventValue) : [
+                ...currentEvents,
                 eventValue
             ];
+            onChange(newEvents);
+            return;
+        }
+        const relatedEvents = getRelatedEvents(eventValue);
+        if (isSelected) onChange(currentEvents.filter((e)=>!relatedEvents.includes(e)));
+        else {
             const newEvents = [
                 ...currentEvents.filter((e)=>!relatedEvents.includes(e)),
                 ...relatedEvents
             ];
             onChange(newEvents);
         }
-        else onChange(isSelected ? currentEvents.filter((e)=>e !== eventValue) : [
-            ...currentEvents,
-            eventValue
-        ]);
-    }, []);
+    }, [
+        getRelatedEvents
+    ]);
     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:*");
+        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:ObjectRestore')) return selectedEvents.includes('s3:ObjectRestore:*');
+        if (event.startsWith('s3:LifecycleExpiration')) return selectedEvents.includes('s3:LifecycleExpiration:*');
+        if (event.startsWith('s3:Replication')) return selectedEvents.includes('s3:Replication:*');
+        else if (event.startsWith('s3:ObjectTagging')) return selectedEvents.includes('s3:ObjectTagging:*');
         return false;
     };
     return /*#__PURE__*/ jsxs(FormSection, {
@@ -62,15 +93,100 @@ function EventsSection() {
                             direction: "vertical",
                             gap: "r16",
                             children: [
-                                /*#__PURE__*/ jsxs(Stack, {
+                                objectCreation.events.length > 0 && /*#__PURE__*/ jsxs(Stack, {
+                                    direction: "vertical",
+                                    gap: "r8",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            color: "textPrimary",
+                                            children: objectCreation.label
+                                        }),
+                                        objectCreation.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                                id: event,
+                                                label: event,
+                                                checked: value.includes(event),
+                                                disabled: isEventDisabled(event, value),
+                                                onChange: ()=>toggleEvent(value, event, onChange)
+                                            }, event))
+                                    ]
+                                }),
+                                objectDeletion.events.length > 0 && /*#__PURE__*/ jsxs(Stack, {
+                                    direction: "vertical",
+                                    gap: "r8",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            color: "textPrimary",
+                                            children: objectDeletion.label
+                                        }),
+                                        objectDeletion.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                                id: event,
+                                                label: event,
+                                                checked: value.includes(event),
+                                                disabled: isEventDisabled(event, value),
+                                                onChange: ()=>toggleEvent(value, event, onChange)
+                                            }, event))
+                                    ]
+                                }),
+                                objectRestoration.events.length > 0 && /*#__PURE__*/ jsxs(Stack, {
+                                    direction: "vertical",
+                                    gap: "r8",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            color: "textPrimary",
+                                            children: objectRestoration.label
+                                        }),
+                                        objectRestoration.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                                id: event,
+                                                label: event,
+                                                checked: value.includes(event),
+                                                disabled: isEventDisabled(event, value),
+                                                onChange: ()=>toggleEvent(value, event, onChange)
+                                            }, event))
+                                    ]
+                                }),
+                                lifecycle.events.length > 0 && /*#__PURE__*/ jsxs(Stack, {
+                                    direction: "vertical",
+                                    gap: "r8",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            color: "textPrimary",
+                                            children: lifecycle.label
+                                        }),
+                                        lifecycle.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                                id: event,
+                                                label: event,
+                                                checked: value.includes(event),
+                                                disabled: isEventDisabled(event, value),
+                                                onChange: ()=>toggleEvent(value, event, onChange)
+                                            }, event))
+                                    ]
+                                }),
+                                replication.events.length > 0 && /*#__PURE__*/ jsxs(Stack, {
+                                    direction: "vertical",
+                                    gap: "r8",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            color: "textPrimary",
+                                            children: replication.label
+                                        }),
+                                        replication.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                                id: event,
+                                                label: event,
+                                                checked: value.includes(event),
+                                                disabled: isEventDisabled(event, value),
+                                                onChange: ()=>toggleEvent(value, event, onChange)
+                                            }, event))
+                                    ]
+                                }),
+                                objectTagging.events.length > 0 && /*#__PURE__*/ jsxs(Stack, {
                                     direction: "vertical",
                                     gap: "r8",
                                     children: [
                                         /*#__PURE__*/ jsx(Text, {
                                             color: "textPrimary",
-                                            children: objectCreationEvents.label
+                                            children: objectTagging.label
                                         }),
-                                        objectCreationEvents.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                        objectTagging.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
                                                 id: event,
                                                 label: event,
                                                 checked: value.includes(event),
@@ -79,15 +195,15 @@ function EventsSection() {
                                             }, event))
                                     ]
                                 }),
-                                /*#__PURE__*/ jsxs(Stack, {
+                                storageAccess.events.length > 0 && /*#__PURE__*/ jsxs(Stack, {
                                     direction: "vertical",
                                     gap: "r8",
                                     children: [
                                         /*#__PURE__*/ jsx(Text, {
                                             color: "textPrimary",
-                                            children: objectDeletionEvents.label
+                                            children: storageAccess.label
                                         }),
-                                        objectDeletionEvents.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                        storageAccess.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
                                                 id: event,
                                                 label: event,
                                                 checked: value.includes(event),
@@ -96,15 +212,15 @@ function EventsSection() {
                                             }, event))
                                     ]
                                 }),
-                                /*#__PURE__*/ jsxs(Stack, {
+                                testing.events.length > 0 && /*#__PURE__*/ jsxs(Stack, {
                                     direction: "vertical",
                                     gap: "r8",
                                     children: [
                                         /*#__PURE__*/ jsx(Text, {
                                             color: "textPrimary",
-                                            children: othersEvents.label
+                                            children: testing.label
                                         }),
-                                        othersEvents.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
+                                        testing.events.map((event)=>/*#__PURE__*/ jsx(Checkbox, {
                                                 id: event,
                                                 label: event,
                                                 checked: value.includes(event),

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

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

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

@@ -0,0 +1,56 @@
+import { filterSupportedEvents, getFilteredEventGroups } from "../events.js";
+describe('events', ()=>{
+    it('returns all events when supportedEvents is not configured', ()=>{
+        const events = [
+            's3:ObjectCreated:*',
+            's3:ObjectCreated:Put'
+        ];
+        const result = filterSupportedEvents(events);
+        expect(result).toEqual(events);
+    });
+    it('filters events to only include supported ones', ()=>{
+        const events = [
+            's3:ObjectCreated:*',
+            's3:ObjectCreated:Put',
+            's3:ObjectCreated:Copy'
+        ];
+        const supportedEvents = [
+            's3:ObjectCreated:*',
+            's3:ObjectCreated:Put'
+        ];
+        const result = filterSupportedEvents(events, supportedEvents);
+        expect(result).toEqual([
+            's3:ObjectCreated:*',
+            's3:ObjectCreated:Put'
+        ]);
+    });
+    it('filters event groups based on supported events', ()=>{
+        const supportedEvents = [
+            's3:ObjectCreated:Put',
+            's3:ObjectRemoved:Delete',
+            's3:Replication:OperationFailedReplication'
+        ];
+        const result = getFilteredEventGroups(supportedEvents);
+        expect(result.objectCreation.events).toEqual([
+            's3:ObjectCreated:Put'
+        ]);
+        expect(result.objectDeletion.events).toEqual([
+            's3:ObjectRemoved:Delete'
+        ]);
+        expect(result.replication.events).toEqual([
+            's3:Replication:OperationFailedReplication'
+        ]);
+        expect(result.lifecycle.events).toEqual([]);
+    });
+    it('preserves category labels in filtered groups', ()=>{
+        const result = getFilteredEventGroups();
+        expect(result.objectCreation.label).toBe('Object Creation');
+        expect(result.objectDeletion.label).toBe('Object Deletion');
+        expect(result.objectRestoration.label).toBe('Object Restoration');
+        expect(result.lifecycle.label).toBe('Lifecycle');
+        expect(result.replication.label).toBe('Replication');
+        expect(result.objectTagging.label).toBe('Object Tagging');
+        expect(result.storageAccess.label).toBe('Storage & Access');
+        expect(result.testing.label).toBe('Testing');
+    });
+});

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

@@ -1,12 +1,76 @@
+import type { S3EventCategory, S3EventType } from '../../../config/types';
 export declare const objectCreationEvents: {
-    label: string;
-    events: string[];
+    label: S3EventCategory;
+    events: S3EventType[];
 };
 export declare const objectDeletionEvents: {
-    label: string;
-    events: string[];
+    label: S3EventCategory;
+    events: S3EventType[];
 };
-export declare const othersEvents: {
-    label: string;
-    events: string[];
+export declare const objectRestorationEvents: {
+    label: S3EventCategory;
+    events: S3EventType[];
+};
+export declare const lifecycleEvents: {
+    label: S3EventCategory;
+    events: S3EventType[];
+};
+export declare const replicationEvents: {
+    label: S3EventCategory;
+    events: S3EventType[];
+};
+export declare const objectTaggingEvents: {
+    label: S3EventCategory;
+    events: S3EventType[];
+};
+export declare const storageAccessEvents: {
+    label: S3EventCategory;
+    events: S3EventType[];
+};
+export declare const testingEvents: {
+    label: S3EventCategory;
+    events: S3EventType[];
+};
+/**
+ * Filters events to only include supported ones
+ * If no supported events are configured, all events are returned
+ */
+export declare function filterSupportedEvents(events: S3EventType[], supportedEvents?: S3EventType[]): S3EventType[];
+/**
+ * Gets filtered event groups based on supported events
+ * If a wildcard is not supported, but specific events are, the wildcard is filtered out
+ */
+export declare function getFilteredEventGroups(supportedEvents?: S3EventType[]): {
+    objectCreation: {
+        label: S3EventCategory;
+        events: S3EventType[];
+    };
+    objectDeletion: {
+        label: S3EventCategory;
+        events: S3EventType[];
+    };
+    objectRestoration: {
+        label: S3EventCategory;
+        events: S3EventType[];
+    };
+    lifecycle: {
+        label: S3EventCategory;
+        events: S3EventType[];
+    };
+    replication: {
+        label: S3EventCategory;
+        events: S3EventType[];
+    };
+    objectTagging: {
+        label: S3EventCategory;
+        events: S3EventType[];
+    };
+    storageAccess: {
+        label: S3EventCategory;
+        events: S3EventType[];
+    };
+    testing: {
+        label: S3EventCategory;
+        events: S3EventType[];
+    };
 };