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

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

@@ -0,0 +1,11 @@
+import type { ReplicationRule } from "@aws-sdk/client-s3";
+interface BucketReplicationListProps {
+    bucketName: string;
+    replicationRules: ReplicationRule[];
+    replicationRole: string;
+    replicationStatus?: "idle" | "loading" | "error" | "success";
+    onCreateRule?: () => void;
+    onEditRule?: (ruleId: string) => void;
+}
+export declare function BucketReplicationList({ bucketName, replicationRules, replicationRole, replicationStatus, onCreateRule, onEditRule, }: BucketReplicationListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/buckets/BucketReplicationList.js

@@ -0,0 +1,189 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ConstrainedText, Icon, Wrap, spacing } from "@scality/core-ui";
+import { Box, Button, Table } from "@scality/core-ui/dist/next";
+import { useMemo } from "react";
+import { useDeleteBucketReplication, useSetBucketReplication } from "../../hooks/bucketConfiguration.js";
+import { DeleteBucketConfigRuleButton } from "./DeleteBucketConfigRuleButton.js";
+import { useTableRowSelection } from "../../hooks/useTableRowSelection.js";
+function BucketReplicationList({ bucketName, replicationRules, replicationRole, replicationStatus, onCreateRule, onEditRule }) {
+    const updateReplicationMutation = useSetBucketReplication();
+    const deleteReplicationMutation = useDeleteBucketReplication();
+    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: "Priority",
+                accessor: "Priority",
+                id: "priority",
+                Cell: ({ value })=>/*#__PURE__*/ jsx("span", {
+                        children: void 0 !== value ? value : "None"
+                    }),
+                cellStyle: {
+                    width: "unset",
+                    flex: "0.5",
+                    textAlign: "right",
+                    paddingRight: spacing.r16
+                }
+            },
+            {
+                Header: "Destination",
+                accessor: "Destination",
+                id: "destination",
+                Cell: ({ row })=>{
+                    const rule = row.original.Rule;
+                    const destination = rule.Destination;
+                    const bucketArn = destination?.Bucket || "";
+                    const accountMatch = bucketArn.match(/arn:aws:s3:::([^:]+):([^:]+)/);
+                    let bucketName;
+                    let accountId;
+                    if (accountMatch) {
+                        accountId = accountMatch[1];
+                        bucketName = accountMatch[2];
+                    } else {
+                        const parts = bucketArn.split(":::");
+                        bucketName = parts[parts.length - 1] || bucketArn;
+                        accountId = null;
+                    }
+                    const shortAccountId = accountId ? `${accountId.slice(0, 3)}...${accountId.slice(-3)}` : null;
+                    const storageClass = destination?.StorageClass;
+                    let displayText = `Replicate to ${bucketName}`;
+                    const details = [];
+                    if (shortAccountId) details.push(`account: ${shortAccountId}`);
+                    if (storageClass) details.push(storageClass);
+                    if (details.length > 0) displayText += ` (${details.join(", ")})`;
+                    return /*#__PURE__*/ jsx(ConstrainedText, {
+                        text: displayText || "-",
+                        lineClamp: 2
+                    });
+                },
+                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: replicationRules,
+                                ruleType: "replication",
+                                updateMutation: updateReplicationMutation,
+                                deleteMutation: deleteReplicationMutation,
+                                buildUpdateInput: (remainingRules)=>({
+                                        ReplicationConfiguration: {
+                                            Role: replicationRole,
+                                            Rules: remainingRules
+                                        }
+                                    }),
+                                successMessage: "Replication rule deleted successfully",
+                                errorMessage: "Failed to delete replication rule"
+                            })
+                        ]
+                    })
+            }
+        ], [
+        bucketName,
+        replicationRules,
+        replicationRole,
+        onEditRule,
+        updateReplicationMutation,
+        deleteReplicationMutation
+    ]);
+    const tableData = useMemo(()=>replicationRules.map((rule)=>({
+                ID: rule.ID || "-",
+                Status: rule.Status || "-",
+                Priority: rule.Priority,
+                Destination: rule.Destination?.Bucket || "-",
+                Rule: rule
+            })), [
+        replicationRules
+    ]);
+    const { selectedId, onRowSelected } = useTableRowSelection(tableData);
+    return /*#__PURE__*/ jsxs(Table, {
+        columns: columns,
+        data: tableData,
+        status: replicationStatus,
+        defaultSortingKey: "priority",
+        entityName: {
+            en: {
+                singular: "replication rule",
+                plural: "replication rules"
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx(Wrap, {
+                padding: spacing.r16,
+                children: /*#__PURE__*/ jsx(Button, {
+                    icon: /*#__PURE__*/ jsx(Icon, {
+                        name: "Create-add"
+                    }),
+                    label: "Create Rule",
+                    variant: "primary",
+                    onClick: onCreateRule
+                })
+            }),
+            /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
+                rowHeight: "h48",
+                separationLineVariant: "backgroundLevel1",
+                selectedId: selectedId?.toString(),
+                onRowSelected: onRowSelected
+            })
+        ]
+    });
+}
+export { BucketReplicationList };

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

@@ -0,0 +1,18 @@
+import type { UseMutationResult } from "@tanstack/react-query";
+interface DeleteBucketConfigRuleButtonProps<TRule extends {
+    ID?: string;
+}> {
+    bucketName: string;
+    ruleId: string;
+    rules: TRule[];
+    ruleType: "lifecycle" | "replication";
+    updateMutation: UseMutationResult<any, any, any, unknown>;
+    deleteMutation: UseMutationResult<any, any, any, unknown>;
+    buildUpdateInput: (remainingRules: TRule[]) => Record<string, any>;
+    successMessage: string;
+    errorMessage: string;
+}
+export declare function DeleteBucketConfigRuleButton<TRule extends {
+    ID?: string;
+}>({ bucketName, ruleId, rules, ruleType, updateMutation, deleteMutation, buildUpdateInput, successMessage, errorMessage, }: DeleteBucketConfigRuleButtonProps<TRule>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/buckets/DeleteBucketConfigRuleButton.js

@@ -0,0 +1,53 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Icon } from "@scality/core-ui";
+import { Button } from "@scality/core-ui/dist/next";
+import { useDeleteBucketConfigRule } from "../../hooks/useDeleteBucketConfigRule.js";
+import { ConfirmDeleteRuleModal } from "../ui/ConfirmDeleteRuleModal.js";
+function DeleteBucketConfigRuleButton({ bucketName, ruleId, rules, ruleType, updateMutation, deleteMutation, buildUpdateInput, successMessage, errorMessage }) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { isDeleting, deleteRule } = useDeleteBucketConfigRule({
+        bucketName,
+        ruleId,
+        rules,
+        updateMutation,
+        deleteMutation,
+        buildUpdateInput,
+        successMessage,
+        errorMessage,
+        onSuccess: ()=>{
+            setIsModalOpen(false);
+        },
+        onError: ()=>{
+            setIsModalOpen(false);
+        }
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Delete"
+                }),
+                variant: "secondary",
+                type: "button",
+                onClick: (e)=>{
+                    e.stopPropagation();
+                    setIsModalOpen(true);
+                },
+                "aria-label": "Delete rule",
+                tooltip: {
+                    overlay: "Delete rule"
+                }
+            }),
+            /*#__PURE__*/ jsx(ConfirmDeleteRuleModal, {
+                isOpen: isModalOpen,
+                ruleId: ruleId,
+                ruleType: ruleType,
+                isDeleting: isDeleting,
+                onConfirm: deleteRule,
+                onCancel: ()=>setIsModalOpen(false)
+            })
+        ]
+    });
+}
+export { DeleteBucketConfigRuleButton };

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

@@ -0,0 +1,5 @@
+interface EmptyBucketButtonProps {
+    bucketName: string;
+}
+export declare const EmptyBucketButton: ({ bucketName }: EmptyBucketButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/buckets/EmptyBucketButton.js

@@ -0,0 +1,232 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Banner, Icon, Loader, Modal, Stack, Text, Tooltip, Wrap } from "@scality/core-ui";
+import { Box, Button } from "@scality/core-ui/dist/next";
+import { Input } from "@scality/core-ui/dist/components/inputv2/inputv2";
+import { useMemo, useState } from "react";
+import { useIsBucketEmpty } from "../../hooks/useIsBucketEmpty.js";
+import { useEmptyBucket } from "../../hooks/useEmptyBucket.js";
+import { useGetBucketObjectLockConfiguration } from "../../hooks/bucketConfiguration.js";
+import styled_components from "styled-components";
+import { EmptyBucketSummary } from "./EmptyBucketSummary.js";
+const MAX_OBJECTS_TO_DELETE = 20000;
+const CustomListItem = styled_components.li`
+  padding: 0.5rem;
+`;
+const emptyBucketInfosList = [
+    "Emptying a bucket removes all contents and cannot be reversed.",
+    "New objects added during the empty action may also be removed.",
+    "Adjust workflows linked to this bucket to avoid adding objects during the emptying action."
+];
+const RetentionText = ()=>/*#__PURE__*/ jsx(Text, {
+        children: "If some of the objects you are trying to delete are locked in governance mode, confirming the deletion will effectively delete them as the governance retention will be bypassed."
+    });
+const LifecycleText = ()=>/*#__PURE__*/ jsx(Text, {
+        children: "The action of emptying can erase a maximum of 20,000 objects. For buckets with a substantial number of objects, an expiration workflow (lifecycle rule) could provide an effective alternative to emptying the bucket."
+    });
+const EmptyBucketButton = ({ bucketName })=>{
+    const [confirmText, setConfirmText] = useState("");
+    const [isEmptyModalOpen, setIsEmptyModalOpen] = useState(false);
+    const [showSummary, setShowSummary] = useState(false);
+    const { isEmpty, isLoading: isCheckingEmpty } = useIsBucketEmpty(bucketName);
+    const { data: objectLockData } = useGetBucketObjectLockConfiguration({
+        Bucket: bucketName
+    });
+    const isObjectLockEnabled = objectLockData?.ObjectLockConfiguration?.ObjectLockEnabled === "Enabled";
+    const { emptyBucket, isEmptying, error, result, reset } = useEmptyBucket({
+        maxObjects: MAX_OBJECTS_TO_DELETE,
+        bypassGovernanceRetention: true
+    });
+    const isConfirmed = confirmText === bucketName;
+    const deleteResultForSummary = useMemo(()=>{
+        if (!result) return;
+        return {
+            $metadata: {},
+            Deleted: Array.from({
+                length: result.deletedCount
+            }, (_, i)=>({
+                    Key: `object-${i}`,
+                    VersionId: void 0
+                })),
+            Errors: result.errors.map((error)=>({
+                    Key: error.key,
+                    Code: error.code,
+                    Message: error.message
+                }))
+        };
+    }, [
+        result
+    ]);
+    const handleEmptyBucket = async ()=>{
+        const bucketResult = await emptyBucket(bucketName);
+        if (bucketResult) {
+            setIsEmptyModalOpen(false);
+            setShowSummary(true);
+        }
+    };
+    const handleCloseSummary = ()=>{
+        setShowSummary(false);
+        setConfirmText("");
+        reset();
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Tooltip, {
+                overlay: isCheckingEmpty ? "Checking if bucket is empty" : "Bucket is already empty",
+                overlayStyle: {
+                    width: "9rem",
+                    display: isEmpty ? void 0 : "none"
+                },
+                children: /*#__PURE__*/ jsx(Button, {
+                    icon: /*#__PURE__*/ jsx(Icon, {
+                        name: "Eraser"
+                    }),
+                    disabled: Boolean(isEmpty) || isCheckingEmpty,
+                    variant: "danger",
+                    onClick: ()=>setIsEmptyModalOpen(true),
+                    label: "Empty Bucket",
+                    style: {
+                        marginRight: "1rem"
+                    }
+                })
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                isOpen: isEmptyModalOpen,
+                title: `Empty Bucket '${bucketName}'?`,
+                close: ()=>{
+                    if (!isEmptying) {
+                        setIsEmptyModalOpen(false);
+                        setConfirmText("");
+                        reset();
+                    }
+                },
+                footer: /*#__PURE__*/ jsxs(Wrap, {
+                    children: [
+                        isEmptying && /*#__PURE__*/ jsx(Text, {
+                            variant: "Larger",
+                            children: result?.deletedCount ? `${result?.deletedCount} deletion attempts...` : "Deletion in progress..."
+                        }),
+                        /*#__PURE__*/ jsx("p", {}),
+                        /*#__PURE__*/ jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    variant: "outline",
+                                    onClick: ()=>{
+                                        setIsEmptyModalOpen(false);
+                                        setConfirmText("");
+                                        reset();
+                                    },
+                                    label: "Cancel",
+                                    disabled: isEmptying
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    disabled: !isConfirmed || isEmptying,
+                                    variant: "danger",
+                                    onClick: handleEmptyBucket,
+                                    icon: isEmptying ? /*#__PURE__*/ jsx(Loader, {
+                                        size: "larger"
+                                    }) : /*#__PURE__*/ jsx(Icon, {
+                                        name: "Eraser"
+                                    }),
+                                    label: "Empty"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                children: /*#__PURE__*/ jsxs(Box, {
+                    maxWidth: "35rem",
+                    children: [
+                        error && /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx(Banner, {
+                                    variant: "danger",
+                                    icon: /*#__PURE__*/ jsx(Icon, {
+                                        name: "Exclamation-circle",
+                                        color: "statusCritical"
+                                    }),
+                                    title: "Error",
+                                    children: error.message
+                                }),
+                                /*#__PURE__*/ jsx("br", {})
+                            ]
+                        }),
+                        isObjectLockEnabled && /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx(Banner, {
+                                    icon: /*#__PURE__*/ jsx(Box, {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        marginLeft: "0.571rem",
+                                        children: /*#__PURE__*/ jsx(Icon, {
+                                            name: "Exclamation-circle",
+                                            color: "statusWarning",
+                                            size: "lg"
+                                        })
+                                    }),
+                                    variant: "warning",
+                                    children: /*#__PURE__*/ jsx(RetentionText, {})
+                                }),
+                                /*#__PURE__*/ jsx("br", {})
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("ul", {
+                            style: {
+                                padding: "2rem"
+                            },
+                            children: emptyBucketInfosList.map((listInfo, i)=>/*#__PURE__*/ jsx(CustomListItem, {
+                                    children: listInfo
+                                }, i))
+                        }),
+                        /*#__PURE__*/ jsx(Banner, {
+                            icon: /*#__PURE__*/ jsx("div", {
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    marginLeft: "0.571rem"
+                                },
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "Info-circle",
+                                    size: "lg"
+                                })
+                            }),
+                            variant: "base",
+                            children: /*#__PURE__*/ jsx(LifecycleText, {})
+                        }),
+                        /*#__PURE__*/ jsx("br", {}),
+                        /*#__PURE__*/ jsxs(Box, {
+                            display: "flex",
+                            alignItems: "center",
+                            paddingTop: "1rem",
+                            children: [
+                                /*#__PURE__*/ jsx("label", {
+                                    style: {
+                                        float: "left",
+                                        marginRight: "1rem"
+                                    },
+                                    children: "Type the name of the bucket to delete all its content."
+                                }),
+                                /*#__PURE__*/ jsx(Input, {
+                                    id: "confirm-input",
+                                    "aria-label": "confirm",
+                                    autoFocus: isEmptyModalOpen,
+                                    placeholder: bucketName,
+                                    type: "text",
+                                    value: confirmText,
+                                    onChange: (e)=>setConfirmText(e.target.value),
+                                    disabled: isEmptying
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            deleteResultForSummary && /*#__PURE__*/ jsx(EmptyBucketSummary, {
+                deleteResult: deleteResultForSummary,
+                close: handleCloseSummary,
+                open: showSummary,
+                isFetchNextPage: !result?.limitReached
+            })
+        ]
+    });
+};
+export { EmptyBucketButton };

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

@@ -0,0 +1,9 @@
+import type { DeleteObjectsCommandOutput } from "@aws-sdk/client-s3";
+interface EmptyBucketSummaryProps {
+    deleteResult: DeleteObjectsCommandOutput;
+    close: () => void;
+    open: boolean;
+    isFetchNextPage: boolean;
+}
+export declare const EmptyBucketSummary: ({ deleteResult, close, open, isFetchNextPage, }: EmptyBucketSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/buckets/EmptyBucketSummary.js

@@ -0,0 +1,60 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Banner, Icon, Modal, Wrap } from "@scality/core-ui";
+import { Button } from "@scality/core-ui/dist/next";
+import { useMemo } from "react";
+import { EmptyBucketSummaryList } from "./EmptyBucketSummaryList.js";
+const useCreateDeleteSummaryData = (deleteResult)=>useMemo(()=>{
+        const deleteSummaryData = [
+            {
+                attempts: (deleteResult.Deleted?.length || 0) + (deleteResult.Errors?.length || 0),
+                deleted: deleteResult.Deleted?.length || 0,
+                errors: {
+                    nbErrors: deleteResult.Errors?.length || 0,
+                    messages: deleteResult.Errors?.map((error)=>error.Message || "") || []
+                }
+            }
+        ];
+        return deleteSummaryData;
+    }, [
+        deleteResult
+    ]);
+const EmptyBucketSummary = ({ deleteResult, close, open, isFetchNextPage })=>{
+    const deleteSummaryData = useCreateDeleteSummaryData(deleteResult);
+    return /*#__PURE__*/ jsx(Modal, {
+        title: "Summary",
+        close: close,
+        isOpen: open,
+        footer: /*#__PURE__*/ jsxs(Wrap, {
+            children: [
+                /*#__PURE__*/ jsx("p", {}),
+                /*#__PURE__*/ jsx(Button, {
+                    variant: "primary",
+                    onClick: close,
+                    label: "Close"
+                })
+            ]
+        }),
+        children: /*#__PURE__*/ jsxs("div", {
+            children: [
+                !isFetchNextPage && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Banner, {
+                            variant: "danger",
+                            icon: /*#__PURE__*/ jsx(Icon, {
+                                name: "Exclamation-circle",
+                                color: "statusCritical"
+                            }),
+                            title: "Error",
+                            children: "Your bucket contains too many objects. We can delete up to 20 000 objects."
+                        }),
+                        /*#__PURE__*/ jsx("br", {})
+                    ]
+                }),
+                /*#__PURE__*/ jsx(EmptyBucketSummaryList, {
+                    summaryData: deleteSummaryData
+                })
+            ]
+        })
+    });
+};
+export { EmptyBucketSummary };

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

@@ -0,0 +1,13 @@
+interface DeleteSummaryData extends Record<string, unknown> {
+    attempts: number;
+    deleted: number;
+    errors: {
+        nbErrors: number;
+        messages: string[];
+    };
+}
+interface EmptyBucketSummaryListProps {
+    summaryData: DeleteSummaryData[];
+}
+export declare const EmptyBucketSummaryList: ({ summaryData, }: EmptyBucketSummaryListProps) => import("react/jsx-runtime").JSX.Element;
+export {};