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

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

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

package/dist/components/buckets/BucketLifecycleList.js

@@ -0,0 +1,270 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ConstrainedText, FormattedDateTime, Icon, Stack, Tooltip, Wrap, spacing } from "@scality/core-ui";
+import { Box, Button, Table } from "@scality/core-ui/dist/next";
+import { useMemo } from "react";
+import { useDeleteBucketLifecycle, useSetBucketLifecycle } from "../../hooks/bucketConfiguration.js";
+import { useTableRowSelection } from "../../hooks/useTableRowSelection.js";
+import { DeleteBucketConfigRuleButton } from "./DeleteBucketConfigRuleButton.js";
+const pluralizeDays = (days)=>1 === days ? `${days} day` : `${days} days`;
+const formatActions = (rule)=>{
+    const actions = [];
+    if (rule.Expiration) {
+        if (rule.Expiration.Days) actions.push({
+            text: `Expire current (${pluralizeDays(rule.Expiration.Days)})`,
+            description: `Expire current versions of objects after ${pluralizeDays(rule.Expiration.Days)}`
+        });
+        else if (rule.Expiration.Date) actions.push({
+            text: 'Expire current',
+            description: 'Expire current versions of objects on date',
+            date: rule.Expiration.Date
+        });
+        else if (rule.Expiration.ExpiredObjectDeleteMarker) actions.push({
+            text: 'Delete expired markers',
+            description: 'Delete expired object delete markers'
+        });
+    }
+    if (rule.NoncurrentVersionExpiration?.NoncurrentDays) {
+        const keepText = rule.NoncurrentVersionExpiration.NewerNoncurrentVersions ? `, keep ${rule.NoncurrentVersionExpiration.NewerNoncurrentVersions}` : '';
+        const keepDescription = rule.NoncurrentVersionExpiration.NewerNoncurrentVersions ? `, keep ${rule.NoncurrentVersionExpiration.NewerNoncurrentVersions} newest versions` : '';
+        actions.push({
+            text: `Expire noncurrent (${pluralizeDays(rule.NoncurrentVersionExpiration.NoncurrentDays)}${keepText})`,
+            description: `Permanently delete noncurrent versions of objects after ${pluralizeDays(rule.NoncurrentVersionExpiration.NoncurrentDays)}${keepDescription}`
+        });
+    }
+    if (rule.Transitions && rule.Transitions.length > 0) rule.Transitions.forEach((transition)=>{
+        if (transition.Days) actions.push({
+            text: `Transition current (${pluralizeDays(transition.Days)})`,
+            description: `Transition current versions of objects after ${pluralizeDays(transition.Days)}`
+        });
+        else if (transition.Date) actions.push({
+            text: 'Transition current',
+            description: 'Transition current versions of objects on date',
+            date: transition.Date
+        });
+    });
+    if (rule.NoncurrentVersionTransitions && rule.NoncurrentVersionTransitions.length > 0) rule.NoncurrentVersionTransitions.forEach((transition)=>{
+        if (transition.NoncurrentDays) {
+            const keepText = transition.NewerNoncurrentVersions ? `, keep ${transition.NewerNoncurrentVersions}` : '';
+            const keepDescription = transition.NewerNoncurrentVersions ? `, keep ${transition.NewerNoncurrentVersions} newest versions` : '';
+            actions.push({
+                text: `Transition noncurrent (${pluralizeDays(transition.NoncurrentDays)}${keepText})`,
+                description: `Transition noncurrent versions of objects after ${pluralizeDays(transition.NoncurrentDays)}${keepDescription}`
+            });
+        }
+    });
+    if (rule.AbortIncompleteMultipartUpload?.DaysAfterInitiation) actions.push({
+        text: `Abort Incomplete MPU (${pluralizeDays(rule.AbortIncompleteMultipartUpload.DaysAfterInitiation)})`,
+        description: `Abort incomplete multipart uploads after ${pluralizeDays(rule.AbortIncompleteMultipartUpload.DaysAfterInitiation)}`
+    });
+    return actions.length > 0 ? actions : [
+        {
+            text: '-',
+            description: '-'
+        }
+    ];
+};
+function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCreateRule, onEditRule }) {
+    const updateLifecycleMutation = useSetBucketLifecycle();
+    const deleteLifecycleMutation = useDeleteBucketLifecycle();
+    const columns = useMemo(()=>[
+            {
+                Header: 'Rule ID',
+                accessor: 'ID',
+                id: 'id',
+                Cell: ({ value })=>/*#__PURE__*/ jsx(ConstrainedText, {
+                        text: value || '-',
+                        lineClamp: 2
+                    }),
+                cellStyle: {
+                    flex: '1',
+                    width: 'unset'
+                }
+            },
+            {
+                Header: 'Status',
+                accessor: 'Status',
+                id: 'status',
+                Cell: ({ value })=>{
+                    const statusText = 'Enabled' === value ? 'Active' : 'Disabled' === value ? 'Inactive' : value;
+                    return /*#__PURE__*/ jsx("span", {
+                        children: statusText || '-'
+                    });
+                },
+                cellStyle: {
+                    width: 'unset',
+                    flex: '0.5'
+                }
+            },
+            {
+                Header: 'Actions',
+                accessor: 'Actions',
+                id: 'actions',
+                Cell: ({ value })=>{
+                    if (!value || 0 === value.length || 1 === value.length && '-' === value[0].text) return /*#__PURE__*/ jsx("span", {
+                        children: "-"
+                    });
+                    const firstAction = value[0];
+                    const remainingCount = value.length - 1;
+                    const renderWithDate = (text, date)=>{
+                        if (date) return /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                text,
+                                " (",
+                                /*#__PURE__*/ jsx(FormattedDateTime, {
+                                    format: "date",
+                                    value: 'string' == typeof date ? new Date(date) : date
+                                }),
+                                ")"
+                            ]
+                        });
+                        return text;
+                    };
+                    const renderAction = (action)=>renderWithDate(action.text, action.date);
+                    const renderDescription = (action)=>renderWithDate(action.description, action.date);
+                    const multiActionTooltip = /*#__PURE__*/ jsx("ul", {
+                        style: {
+                            margin: 0,
+                            paddingLeft: '1.5rem'
+                        },
+                        children: value.map((action, index)=>/*#__PURE__*/ jsx("li", {
+                                children: renderDescription(action)
+                            }, index))
+                    });
+                    if (value.length > 1) return /*#__PURE__*/ jsxs(Stack, {
+                        gap: "r4",
+                        direction: "horizontal",
+                        children: [
+                            /*#__PURE__*/ jsxs("span", {
+                                children: [
+                                    renderAction(firstAction),
+                                    ", +",
+                                    remainingCount
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Tooltip, {
+                                overlay: multiActionTooltip,
+                                placement: "top",
+                                overlayStyle: {
+                                    maxWidth: '30rem'
+                                },
+                                children: /*#__PURE__*/ jsx("span", {
+                                    style: {
+                                        cursor: 'help'
+                                    },
+                                    children: /*#__PURE__*/ jsx(Icon, {
+                                        name: "Info",
+                                        size: "sm"
+                                    })
+                                })
+                            })
+                        ]
+                    });
+                    return /*#__PURE__*/ jsx("span", {
+                        children: renderAction(firstAction)
+                    });
+                },
+                cellStyle: {
+                    width: 'unset',
+                    flex: '1.5'
+                }
+            },
+            {
+                Header: '',
+                accessor: 'ID',
+                id: 'operations',
+                cellStyle: {
+                    flex: '0.5',
+                    textAlign: 'right',
+                    paddingRight: spacing.r16,
+                    width: 'unset'
+                },
+                Cell: ({ value })=>/*#__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",
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    onEditRule?.(value);
+                                },
+                                "aria-label": "Edit rule",
+                                tooltip: {
+                                    overlay: 'Edit rule'
+                                }
+                            }),
+                            /*#__PURE__*/ jsx(DeleteBucketConfigRuleButton, {
+                                bucketName: bucketName,
+                                ruleId: value,
+                                rules: lifecycleRules,
+                                ruleType: "lifecycle",
+                                updateMutation: updateLifecycleMutation,
+                                deleteMutation: deleteLifecycleMutation,
+                                buildUpdateInput: (remainingRules)=>({
+                                        LifecycleConfiguration: {
+                                            Rules: remainingRules
+                                        }
+                                    }),
+                                successMessage: "Lifecycle rule deleted successfully",
+                                errorMessage: "Failed to delete lifecycle rule"
+                            })
+                        ]
+                    })
+            }
+        ], [
+        bucketName,
+        lifecycleRules,
+        onEditRule
+    ]);
+    const tableData = useMemo(()=>lifecycleRules.map((rule)=>({
+                ID: rule.ID || '-',
+                Status: rule.Status || 'Disabled',
+                Actions: formatActions(rule),
+                rule
+            })), [
+        lifecycleRules
+    ]);
+    const { selectedId, onRowSelected } = useTableRowSelection(tableData);
+    return /*#__PURE__*/ jsxs(Table, {
+        columns: columns,
+        data: tableData,
+        status: lifecycleStatus,
+        defaultSortingKey: "id",
+        entityName: {
+            en: {
+                singular: 'lifecycle rule',
+                plural: 'lifecycle rules'
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx(Wrap, {
+                padding: spacing.r16,
+                children: /*#__PURE__*/ jsx(Box, {
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    children: /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(Icon, {
+                            name: "Create-add"
+                        }),
+                        label: "Create Rule",
+                        variant: "primary",
+                        onClick: onCreateRule,
+                        type: "button"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
+                rowHeight: "h48",
+                separationLineVariant: "backgroundLevel1",
+                selectedId: selectedId?.toString(),
+                onRowSelected: onRowSelected
+            })
+        ]
+    });
+}
+export { BucketLifecycleList };

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

@@ -1,12 +1,14 @@
-import type { Bucket } from "@aws-sdk/client-s3";
+import type { Bucket } from '@aws-sdk/client-s3';
 interface BucketListProps {
     buckets: Bucket[];
-    bucketStatus?: "idle" | "loading" | "error" | "success";
+    bucketStatus?: 'idle' | 'loading' | 'error' | 'success';
     selectedBucketName?: string | null;
     onBucketSelect?: (bucketName: string) => void;
     onCreateBucket?: () => void;
     onNavigateToBucket?: (bucketName: string) => void;
-    renderBucketLocation?: (bucketName: string) => React.ReactNode;
 }
-export declare function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket, renderBucketLocation, }: BucketListProps): import("react/jsx-runtime").JSX.Element;
+export declare function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket, }: BucketListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BucketList {
+    var displayName: string;
+}
 export {};

package/dist/components/buckets/BucketList.js

@@ -1,97 +1,169 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ConstrainedText, FormattedDateTime, Icon, Link, Wrap, spacing } from "@scality/core-ui";
 import { Box, Button, Table } from "@scality/core-ui/dist/next";
-import { useMemo } from "react";
-const SEARCH_QUERY_PARAM = "search";
-function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket, renderBucketLocation }) {
-    const columns = useMemo(()=>[
-            {
-                Header: "Bucket Name",
-                accessor: "Name",
-                id: "name",
-                Cell: ({ value, row })=>{
-                    const name = value || row.original?.Name;
-                    if (!name) return /*#__PURE__*/ jsx("span", {
-                        children: "-"
-                    });
-                    return /*#__PURE__*/ jsx(ConstrainedText, {
-                        text: /*#__PURE__*/ jsx(Link, {
-                            onClick: (e)=>{
-                                e.stopPropagation();
-                                onNavigateToBucket?.(name);
-                            },
-                            children: name
-                        }),
-                        lineClamp: 2
-                    });
-                },
-                cellStyle: {
-                    flex: "1",
-                    width: "unset"
-                }
-            },
-            {
-                Header: "Storage Location",
-                accessor: "Name",
-                id: "location",
-                Cell ({ value }) {
-                    return renderBucketLocation ? renderBucketLocation(value) : /*#__PURE__*/ jsx("span", {
-                        children: "-"
-                    });
-                },
-                cellStyle: {
-                    width: "unset",
-                    flex: "1.2"
-                }
-            },
-            {
-                Header: "Created on",
-                accessor: "CreationDate",
-                id: "date",
-                cellStyle: {
-                    flex: "1",
-                    textAlign: "right",
-                    paddingRight: spacing.r16,
-                    width: "unset"
-                },
-                Cell: ({ value, row })=>{
-                    const date = value || row.original?.CreationDate;
-                    if (!date) return /*#__PURE__*/ jsx("span", {
-                        children: "-"
-                    });
-                    return /*#__PURE__*/ jsx(FormattedDateTime, {
-                        format: "date-time-second",
-                        value: new Date(date)
-                    });
-                }
-            }
-        ], [
+import { Fragment, useCallback, useMemo } from "react";
+import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
+import { BucketLocation } from "./BucketLocation.js";
+const SEARCH_QUERY_PARAM = 'search';
+const LOCATION_COLUMN_FLEX = '1.2';
+const createBucketNameColumn = (onNavigateToBucket)=>({
+        Header: 'Bucket Name',
+        accessor: 'Name',
+        id: 'name',
+        Cell: ({ value })=>{
+            if (!value) return /*#__PURE__*/ jsx("span", {
+                children: "-"
+            });
+            return /*#__PURE__*/ jsx(ConstrainedText, {
+                text: /*#__PURE__*/ jsx(Link, {
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                        onNavigateToBucket?.(value);
+                    },
+                    children: value
+                }),
+                lineClamp: 2
+            });
+        },
+        cellStyle: {
+            flex: '1',
+            width: 'unset'
+        }
+    });
+const createLocationColumn = ()=>({
+        Header: 'Storage Location',
+        accessor: 'Name',
+        id: 'location',
+        Cell: ({ value })=>{
+            if (!value) return /*#__PURE__*/ jsx("span", {
+                children: "-"
+            });
+            return /*#__PURE__*/ jsx(BucketLocation, {
+                bucketName: value
+            });
+        },
+        cellStyle: {
+            width: 'unset',
+            flex: LOCATION_COLUMN_FLEX
+        }
+    });
+const createDateColumn = ()=>({
+        Header: 'Created on',
+        accessor: 'CreationDate',
+        id: 'date',
+        cellStyle: {
+            flex: '1',
+            textAlign: 'right',
+            paddingRight: spacing.r16,
+            width: 'unset'
+        },
+        Cell: ({ value })=>{
+            if (!value) return /*#__PURE__*/ jsx("span", {
+                children: "-"
+            });
+            return /*#__PURE__*/ jsx(FormattedDateTime, {
+                format: "date-time-second",
+                value: new Date(value)
+            });
+        }
+    });
+const buildCustomColumn = (columnConfig)=>({
+        Header: columnConfig.header,
+        id: String(columnConfig.id),
+        Cell: ({ row })=>{
+            const RenderComponent = columnConfig.render;
+            return /*#__PURE__*/ jsx(RenderComponent, {
+                data: row.original
+            });
+        },
+        cellStyle: {
+            width: columnConfig.width ?? 'unset',
+            flex: columnConfig.width ? void 0 : '1',
+            ...columnConfig.cellStyle
+        }
+    });
+function createOverrideMap(customItems) {
+    return new Map(customItems.filter((item)=>item.id).map((item)=>[
+            String(item.id),
+            item
+        ]));
+}
+function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket }) {
+    const { extraBucketListColumns, extraBucketListActions } = useDataBrowserUICustomization();
+    const columns = useMemo(()=>{
+        const defaultColumnsMap = {
+            name: createBucketNameColumn(onNavigateToBucket),
+            location: createLocationColumn(),
+            date: createDateColumn()
+        };
+        const customColumns = (extraBucketListColumns || []).map((config)=>buildCustomColumn(config));
+        const customColumnsMap = createOverrideMap(customColumns);
+        const getColumn = (id)=>customColumnsMap.get(id) || defaultColumnsMap[id];
+        const extraColumns = customColumns.filter((col)=>col.id && !(col.id in defaultColumnsMap));
+        return [
+            getColumn('name'),
+            getColumn('location'),
+            ...extraColumns,
+            getColumn('date')
+        ];
+    }, [
         onNavigateToBucket,
-        renderBucketLocation
-    ]);
-    const tableData = useMemo(()=>buckets.map(({ Name, CreationDate, ...bucket })=>({
-                Name,
-                CreationDate,
-                ...bucket
-            })), [
-        buckets
+        extraBucketListColumns
     ]);
     const selectedId = useMemo(()=>{
-        if (buckets && selectedBucketName) return buckets.findIndex((bucket)=>bucket.Name === selectedBucketName);
-        return null;
+        if (!buckets || !selectedBucketName) return;
+        const index = buckets.findIndex((bucket)=>bucket.Name === selectedBucketName);
+        return index >= 0 ? String(index) : void 0;
     }, [
         selectedBucketName,
         buckets
     ]);
+    const actions = useMemo(()=>{
+        const defaultActionsMap = {
+            createBucket: {
+                id: 'createBucket',
+                render: ()=>/*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(Icon, {
+                            name: "Create-add"
+                        }),
+                        label: "Create Bucket",
+                        variant: "primary",
+                        onClick: onCreateBucket,
+                        type: "submit"
+                    })
+            }
+        };
+        const customActions = (extraBucketListActions || []).map((config)=>({
+                id: config.id,
+                render: config.render
+            }));
+        const customActionsMap = createOverrideMap(customActions);
+        const getAction = (id)=>customActionsMap.get(id) || defaultActionsMap[id];
+        const extraActions = customActions.filter((action)=>!(action.id in defaultActionsMap));
+        return [
+            getAction('createBucket'),
+            ...extraActions
+        ];
+    }, [
+        onCreateBucket,
+        extraBucketListActions
+    ]);
+    const handleRowSelected = useCallback((row)=>{
+        const isSelected = selectedBucketName === row.original.Name;
+        if (!isSelected && row.original.Name) onBucketSelect?.(row.original.Name);
+    }, [
+        selectedBucketName,
+        onBucketSelect
+    ]);
     return /*#__PURE__*/ jsxs(Table, {
         columns: columns,
-        data: tableData,
+        data: buckets,
         status: bucketStatus,
         defaultSortingKey: "CreationDate",
         entityName: {
             en: {
-                singular: "bucket",
-                plural: "buckets"
+                singular: 'bucket',
+                plural: 'buckets'
             }
         },
         children: [
@@ -108,29 +180,24 @@ function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect,
                         })
                     }),
                     /*#__PURE__*/ jsx(Box, {
-                        gap: "r16",
-                        children: /*#__PURE__*/ jsx(Button, {
-                            icon: /*#__PURE__*/ jsx(Icon, {
-                                name: "Create-add"
-                            }),
-                            label: "Create Bucket",
-                            variant: "primary",
-                            onClick: onCreateBucket,
-                            type: "submit"
-                        })
+                        display: "flex",
+                        gap: spacing.r16,
+                        alignItems: "center",
+                        children: actions.map((action)=>/*#__PURE__*/ jsx(Fragment, {
+                                children: action.render()
+                            }, action.id))
                     })
                 ]
             }),
             /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
                 rowHeight: "h40",
-                selectedId: selectedId?.toString(),
-                onRowSelected: (row)=>{
-                    const isSelected = selectedBucketName === row.original.Name;
-                    if (!isSelected && row.original.Name) onBucketSelect?.(row.original.Name);
-                },
-                separationLineVariant: "backgroundLevel1"
+                selectedId: selectedId,
+                onRowSelected: handleRowSelected,
+                separationLineVariant: "backgroundLevel1",
+                autoScrollToSelected: true
             })
         ]
     });
 }
+BucketList.displayName = 'BucketList';
 export { BucketList };

package/dist/components/buckets/BucketLocation.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { useGetBucketLocation } from "../../hooks/index.js";
 import { Loader } from "@scality/core-ui";
+import { useGetBucketLocation } from "../../hooks/index.js";
 const BucketLocation = ({ bucketName })=>{
     const { data: bucketLocation, status } = useGetBucketLocation({
         Bucket: bucketName
     });
-    if ("pending" === status) return /*#__PURE__*/ jsx(Loader, {});
-    if ("error" === status) return /*#__PURE__*/ jsx("div", {
+    if ('pending' === status) return /*#__PURE__*/ jsx(Loader, {});
+    if ('error' === status) return /*#__PURE__*/ jsx("div", {
         children: "Error"
     });
     return /*#__PURE__*/ jsx("div", {
-        children: bucketLocation?.LocationConstraint || "us-east-1"
+        children: bucketLocation?.LocationConstraint || 'us-east-1'
     });
 };
 export { BucketLocation };