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

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

package/dist/components/buckets/EmptyBucketSummaryList.js

@@ -0,0 +1,140 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BasicText, Icon, IconHelp, Stack, Text } from "@scality/core-ui";
+import { Table } from "@scality/core-ui/dist/components/tablev2/Tablev2.component";
+import { useMemo } from "react";
+const getUniqueErrorMessages = (errorMessages)=>{
+    const uniqueArray = errorMessages.reduce((acc, message)=>{
+        const existingItem = acc.find((item)=>item.message === message);
+        if (existingItem) existingItem.errorNumbers++;
+        else acc.push({
+            message,
+            errorNumbers: 1
+        });
+        return acc;
+    }, []);
+    return uniqueArray;
+};
+const ErrorsTable = ({ messages })=>{
+    const messagesColumns = [
+        {
+            Header: "Error Message",
+            accessor: "message",
+            cellStyle: {
+                minWidth: "8rem"
+            },
+            Cell ({ value }) {
+                return /*#__PURE__*/ jsx(Text, {
+                    children: value
+                });
+            }
+        },
+        {
+            Header: "Number of errors",
+            accessor: "errorNumbers",
+            cellStyle: {
+                minWidth: "8rem"
+            },
+            Cell ({ value }) {
+                return /*#__PURE__*/ jsx(Text, {
+                    children: value
+                });
+            }
+        }
+    ];
+    const list = getUniqueErrorMessages(messages);
+    const TABLE_HEIGHT = 5 * list.length;
+    return /*#__PURE__*/ jsx(IconHelp, {
+        placement: "top",
+        overlayStyle: {
+            width: "30rem"
+        },
+        tooltipMessage: /*#__PURE__*/ jsx("div", {
+            style: {
+                height: `${TABLE_HEIGHT}rem`
+            },
+            children: /*#__PURE__*/ jsx(Table, {
+                columns: messagesColumns,
+                data: list,
+                children: /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
+                    rowHeight: "h32",
+                    separationLineVariant: "backgroundLevel3"
+                })
+            })
+        })
+    });
+};
+const SummaryCell = (value, isFailed = false, withIcon = false, messages)=>{
+    const text = 1 === value ? "1 object" : `${value} objects`;
+    if (withIcon) return /*#__PURE__*/ jsxs(Stack, {
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                name: isFailed ? "Exclamation-circle" : "Check-circle",
+                color: isFailed ? "statusCritical" : "statusHealthy"
+            }),
+            /*#__PURE__*/ jsx(BasicText, {
+                children: text
+            }),
+            messages?.length ? /*#__PURE__*/ jsx(ErrorsTable, {
+                messages: messages
+            }) : null
+        ]
+    });
+    return /*#__PURE__*/ jsx(BasicText, {
+        children: text
+    });
+};
+const useCreateDeleteSummaryColumns = ()=>useMemo(()=>[
+            {
+                Header: "Total attempts",
+                accessor: "attempts",
+                cellStyle: {
+                    minWidth: "12rem"
+                },
+                Cell ({ value }) {
+                    return SummaryCell(value);
+                }
+            },
+            {
+                Header: "Successfully deleted",
+                accessor: "deleted",
+                cellStyle: {
+                    minWidth: "12rem"
+                },
+                Cell ({ value }) {
+                    return SummaryCell(value, false, true);
+                }
+            },
+            {
+                Header: "Deletion failed",
+                accessor: "errors",
+                cellStyle: {
+                    minWidth: "12rem"
+                },
+                Cell ({ value }) {
+                    return SummaryCell(value.nbErrors, true, true, value.messages);
+                }
+            }
+        ], []);
+const EmptyBucketSummaryList = ({ summaryData })=>{
+    const summaryColumns = useCreateDeleteSummaryColumns();
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            height: "15rem"
+        },
+        children: /*#__PURE__*/ jsx(Table, {
+            columns: summaryColumns,
+            data: summaryData,
+            children: /*#__PURE__*/ jsx("div", {
+                style: {
+                    height: "10rem",
+                    paddingBottom: "5rem"
+                },
+                children: /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
+                    rowHeight: "h40",
+                    separationLineVariant: "backgroundLevel1"
+                })
+            })
+        })
+    });
+};
+export { EmptyBucketSummaryList };

package/dist/components/buckets/__tests__/BucketVersioning.test.d.ts

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

package/dist/components/buckets/__tests__/BucketVersioning.test.js

@@ -0,0 +1,163 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useGetBucketObjectLockConfiguration, useGetBucketVersioning, useISVBucketStatus, useSetBucketVersioning } from "../../../hooks/index.js";
+import { createMockMutationResult, createTestWrapper, findToggleByLabel } from "../../../test/testUtils.js";
+import { BucketVersioning } from "../BucketVersioning.js";
+import { BucketOverviewContext } from "../BucketOverview.js";
+const mockShowToast = jest.fn();
+jest.mock("@scality/core-ui", ()=>({
+        ...jest.requireActual("@scality/core-ui"),
+        useToast: ()=>({
+                showToast: mockShowToast
+            })
+    }));
+jest.mock("../../../hooks");
+const mockUseGetBucketVersioning = jest.mocked(useGetBucketVersioning);
+const mockUseGetBucketObjectLockConfiguration = jest.mocked(useGetBucketObjectLockConfiguration);
+const mockUseISVBucketStatus = jest.mocked(useISVBucketStatus);
+const mockUseSetBucketVersioning = jest.mocked(useSetBucketVersioning);
+const renderBucketVersioning = (props = {})=>{
+    const mockMutate = jest.fn();
+    mockUseSetBucketVersioning.mockReturnValue(createMockMutationResult(mockMutate));
+    const Wrapper = createTestWrapper();
+    return {
+        ...render(/*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(BucketOverviewContext.Provider, {
+                value: {
+                    bucketName: "test-bucket"
+                },
+                children: /*#__PURE__*/ jsx(BucketVersioning, {
+                    ...props
+                })
+            })
+        })),
+        mutate: mockMutate
+    };
+};
+const mockHookDefaults = ()=>{
+    mockUseGetBucketVersioning.mockReturnValue({
+        data: {
+            Status: "Enabled"
+        },
+        status: "success",
+        error: null
+    });
+    mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+        data: {
+            ObjectLockConfiguration: {
+                ObjectLockEnabled: "Disabled"
+            }
+        },
+        status: "success",
+        error: null
+    });
+    mockUseISVBucketStatus.mockReturnValue({
+        isVeeamBucket: false,
+        isCommvaultBucket: false,
+        isISVManaged: false,
+        isvApplication: void 0,
+        isLoading: false,
+        bucketTagsStatus: "success"
+    });
+};
+describe("BucketVersioning", ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockHookDefaults();
+    });
+    it("renders toggle with Active label when versioning is enabled", ()=>{
+        renderBucketVersioning();
+        const toggle = findToggleByLabel("Active");
+        expect(toggle).toBeInTheDocument();
+        expect(toggle).toBeChecked();
+    });
+    it("renders toggle with Inactive label when versioning is suspended", ()=>{
+        mockUseGetBucketVersioning.mockReturnValue({
+            data: {
+                Status: "Suspended"
+            },
+            status: "success",
+            error: null
+        });
+        renderBucketVersioning();
+        const toggle = findToggleByLabel("Inactive");
+        expect(toggle).toBeInTheDocument();
+        expect(toggle).not.toBeChecked();
+    });
+    it("calls mutation with Suspended status when disabling versioning", ()=>{
+        const { mutate } = renderBucketVersioning();
+        const toggle = findToggleByLabel("Active");
+        fireEvent.click(toggle);
+        expect(mutate).toHaveBeenCalledWith({
+            Bucket: "test-bucket",
+            VersioningConfiguration: {
+                Status: "Suspended"
+            }
+        }, expect.any(Object));
+    });
+    it("calls mutation with Enabled status when enabling versioning", ()=>{
+        mockUseGetBucketVersioning.mockReturnValue({
+            data: {
+                Status: "Suspended"
+            },
+            status: "success",
+            error: null
+        });
+        const { mutate } = renderBucketVersioning();
+        const toggle = findToggleByLabel("Inactive");
+        fireEvent.click(toggle);
+        expect(mutate).toHaveBeenCalledWith({
+            Bucket: "test-bucket",
+            VersioningConfiguration: {
+                Status: "Enabled"
+            }
+        }, expect.any(Object));
+    });
+    it("disables toggle when versioning data is loading", ()=>{
+        mockUseGetBucketVersioning.mockReturnValue({
+            data: void 0,
+            status: "pending",
+            error: null
+        });
+        renderBucketVersioning();
+        const toggle = screen.getByRole("checkbox");
+        expect(toggle).toHaveAttribute("aria-disabled", "true");
+    });
+    it("renders static Enabled text when Object Lock is enabled", ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            status: "success"
+        });
+        renderBucketVersioning();
+        expect(screen.getByText("Enabled")).toBeInTheDocument();
+        expect(screen.getByText(/Versioning cannot be suspended because Object-lock is enabled/i)).toBeInTheDocument();
+        expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
+    });
+    it("disables toggle when bucket is managed by Veeam", ()=>{
+        mockUseISVBucketStatus.mockReturnValue({
+            isVeeamBucket: true,
+            isCommvaultBucket: false,
+            isISVManaged: true,
+            isvApplication: "Veeam",
+            isLoading: false,
+            bucketTagsStatus: "success"
+        });
+        renderBucketVersioning();
+        const toggle = screen.getByRole("checkbox");
+        expect(toggle).toHaveAttribute("aria-disabled", "true");
+    });
+    it("disables toggle when versioning query errors", ()=>{
+        mockUseGetBucketVersioning.mockReturnValue({
+            data: void 0,
+            status: "error",
+            error: new Error("Failed to fetch versioning")
+        });
+        renderBucketVersioning();
+        const toggle = screen.getByRole("checkbox");
+        expect(toggle).toHaveAttribute("aria-disabled", "true");
+    });
+});

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

@@ -0,0 +1 @@
+export declare function BucketNotificationCreatePage(): import("react/jsx-runtime").JSX.Element;