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

package/dist/components/objects/ObjectLock/__tests__/ObjectLockSettings.test.js

@@ -0,0 +1,374 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import user_event from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { createTestWrapper } from "../../../../test/testUtils.js";
+import { ObjectLockSettings } from "../ObjectLockSettings.js";
+import { useGetBucketObjectLockConfiguration, useSetBucketObjectLockConfiguration } from "../../../../hooks/index.js";
+jest.mock("../../../../hooks", ()=>({
+        useGetBucketObjectLockConfiguration: jest.fn(),
+        useSetBucketObjectLockConfiguration: jest.fn()
+    }));
+const mockUseGetBucketObjectLockConfiguration = jest.mocked(useGetBucketObjectLockConfiguration);
+const mockUseSetBucketObjectLockConfiguration = jest.mocked(useSetBucketObjectLockConfiguration);
+const mockNavigate = jest.fn();
+jest.mock("react-router-dom", ()=>({
+        ...jest.requireActual("react-router-dom"),
+        useNavigate: ()=>mockNavigate
+    }));
+const renderObjectLockSettings = (bucketName = "test-bucket")=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(MemoryRouter, {
+        initialEntries: [
+            `/buckets/${bucketName}/objects/settings`
+        ],
+        children: /*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(Routes, {
+                children: /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/objects/settings",
+                    element: /*#__PURE__*/ jsx(ObjectLockSettings, {})
+                })
+            })
+        })
+    }));
+};
+describe("ObjectLockSettings", ()=>{
+    const mockMutate = jest.fn();
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockNavigate.mockClear();
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: void 0,
+            status: "success"
+        });
+        mockUseSetBucketObjectLockConfiguration.mockReturnValue({
+            mutate: mockMutate,
+            isPending: false
+        });
+    });
+    it("displays loading state while fetching bucket configuration", ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: void 0,
+            status: "pending"
+        });
+        renderObjectLockSettings();
+        expect(screen.getByText("Loading retention settings...")).toBeInTheDocument();
+    });
+    it("renders form with Object Lock checkbox", async ()=>{
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            expect(screen.getByText("Object-lock settings")).toBeInTheDocument();
+        });
+        expect(screen.getByLabelText(/object-lock/i)).toBeInTheDocument();
+    });
+    it("disables save button when Object Lock is not enabled", async ()=>{
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            const saveButton = screen.getByRole("button", {
+                name: /save/i
+            });
+            expect(saveButton).toBeDisabled();
+        });
+    });
+    it("shows Default Retention fields when Object Lock is enabled", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            expect(screen.getByText("Default Retention")).toBeInTheDocument();
+            expect(screen.getByText("Retention mode")).toBeInTheDocument();
+            expect(screen.getByText("Retention period")).toBeInTheDocument();
+        }, {
+            timeout: 3000
+        });
+    });
+    it("enables save button when Object Lock is enabled", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            const saveButton = screen.getByRole("button", {
+                name: /save/i
+            });
+            expect(saveButton).toBeEnabled();
+        }, {
+            timeout: 3000
+        });
+    });
+    it("enables retention fields when Default Retention is checked", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            expect(screen.getByText("Default Retention")).toBeInTheDocument();
+        });
+        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
+        expect(defaultRetentionCheckbox).not.toBeChecked();
+        fireEvent.click(defaultRetentionCheckbox);
+        await waitFor(()=>{
+            const governanceRadio = screen.getByLabelText(/governance/i);
+            expect(governanceRadio).not.toBeDisabled();
+        }, {
+            timeout: 3000
+        });
+    });
+    it("disables retention fields when Default Retention is unchecked", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled",
+                    Rule: {
+                        DefaultRetention: {
+                            Mode: "GOVERNANCE",
+                            Days: 30
+                        }
+                    }
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
+            fireEvent.click(defaultRetentionCheckbox);
+        });
+        await waitFor(()=>{
+            const governanceRadio = screen.getByLabelText(/governance/i);
+            expect(governanceRadio).toBeDisabled();
+        });
+    });
+    it("shows validation error when retention period is invalid", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            expect(screen.getByText("Default Retention")).toBeInTheDocument();
+        });
+        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
+        fireEvent.click(defaultRetentionCheckbox);
+        await waitFor(()=>{
+            const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+            expect(retentionPeriodInput).toBeInTheDocument();
+        });
+        const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+        await user_event.clear(retentionPeriodInput);
+        await user_event.type(retentionPeriodInput, "0");
+        await waitFor(()=>{
+            const saveButton = screen.getByRole("button", {
+                name: /save/i
+            });
+            expect(saveButton).toBeDisabled();
+        }, {
+            timeout: 3000
+        });
+    });
+    it("saves Object Lock configuration with Default Retention and navigates on success", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            expect(screen.getByText("Default Retention")).toBeInTheDocument();
+        });
+        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
+        fireEvent.click(defaultRetentionCheckbox);
+        await waitFor(()=>{
+            const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+            expect(retentionPeriodInput).toBeInTheDocument();
+        });
+        const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+        await user_event.clear(retentionPeriodInput);
+        await user_event.type(retentionPeriodInput, "30");
+        const governanceRadio = screen.getByLabelText(/governance/i);
+        fireEvent.click(governanceRadio);
+        mockMutate.mockImplementation((_, options)=>{
+            options?.onSuccess?.();
+        });
+        const saveButton = screen.getByRole("button", {
+            name: /save/i
+        });
+        await waitFor(()=>expect(saveButton).toBeEnabled(), {
+            timeout: 3000
+        });
+        fireEvent.click(saveButton);
+        await waitFor(()=>{
+            expect(mockMutate).toHaveBeenCalled();
+            const callArgs = mockMutate.mock.calls[0][0];
+            expect(callArgs.Bucket).toBe("test-bucket");
+            expect(callArgs.ObjectLockConfiguration.ObjectLockEnabled).toBe("Enabled");
+            expect(callArgs.ObjectLockConfiguration.Rule.DefaultRetention.Mode).toBe("GOVERNANCE");
+            expect(callArgs.ObjectLockConfiguration.Rule.DefaultRetention.Days || callArgs.ObjectLockConfiguration.Rule.DefaultRetention.Years).toBe(30);
+            expect(mockNavigate).toHaveBeenCalledWith("/buckets/test-bucket");
+        });
+    });
+    it("saves Object Lock configuration with Years frequency", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            expect(screen.getByText("Default Retention")).toBeInTheDocument();
+        });
+        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
+        fireEvent.click(defaultRetentionCheckbox);
+        await waitFor(()=>{
+            const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+            expect(retentionPeriodInput).toBeInTheDocument();
+        });
+        const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+        await user_event.clear(retentionPeriodInput);
+        await user_event.type(retentionPeriodInput, "2");
+        mockMutate.mockImplementation((_, options)=>{
+            options?.onSuccess?.();
+        });
+        const saveButton = screen.getByRole("button", {
+            name: /save/i
+        });
+        await waitFor(()=>expect(saveButton).toBeEnabled(), {
+            timeout: 3000
+        });
+        fireEvent.click(saveButton);
+        await waitFor(()=>{
+            expect(mockMutate).toHaveBeenCalled();
+            const callArgs = mockMutate.mock.calls[0][0];
+            expect(callArgs.Bucket).toBe("test-bucket");
+            expect(callArgs.ObjectLockConfiguration.ObjectLockEnabled).toBe("Enabled");
+            expect(callArgs.ObjectLockConfiguration.Rule.DefaultRetention.Mode).toBe("GOVERNANCE");
+            expect(callArgs.ObjectLockConfiguration.Rule.DefaultRetention.Days || callArgs.ObjectLockConfiguration.Rule.DefaultRetention.Years).toBe(2);
+        });
+    });
+    it("saves Object Lock configuration without Default Retention", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            const saveButton = screen.getByRole("button", {
+                name: /save/i
+            });
+            expect(saveButton).toBeEnabled();
+        }, {
+            timeout: 3000
+        });
+        mockMutate.mockImplementation((_, options)=>{
+            options?.onSuccess?.();
+        });
+        const saveButton = screen.getByRole("button", {
+            name: /save/i
+        });
+        fireEvent.click(saveButton);
+        await waitFor(()=>{
+            expect(mockMutate).toHaveBeenCalled();
+            const callArgs = mockMutate.mock.calls[0][0];
+            expect(callArgs.Bucket).toBe("test-bucket");
+            expect(callArgs.ObjectLockConfiguration.ObjectLockEnabled).toBe("Enabled");
+            expect(callArgs.ObjectLockConfiguration.Rule).toBeUndefined();
+        });
+    });
+    it("displays error toast when save fails", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled"
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            const saveButton = screen.getByRole("button", {
+                name: /save/i
+            });
+            expect(saveButton).toBeEnabled();
+        }, {
+            timeout: 3000
+        });
+        const error = new Error("Access Denied");
+        mockMutate.mockImplementation((_, options)=>{
+            options?.onError?.(error);
+        });
+        const saveButton = screen.getByRole("button", {
+            name: /save/i
+        });
+        fireEvent.click(saveButton);
+        await waitFor(()=>{
+            expect(mockNavigate).not.toHaveBeenCalled();
+        });
+    });
+    it("navigates back when cancel button is clicked", async ()=>{
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            const cancelButton = screen.getByRole("button", {
+                name: /cancel/i
+            });
+            fireEvent.click(cancelButton);
+        });
+        expect(mockNavigate).toHaveBeenCalledWith("/buckets/test-bucket");
+    });
+    it("populates form with existing bucket configuration", async ()=>{
+        mockUseGetBucketObjectLockConfiguration.mockReturnValue({
+            data: {
+                ObjectLockConfiguration: {
+                    ObjectLockEnabled: "Enabled",
+                    Rule: {
+                        DefaultRetention: {
+                            Mode: "COMPLIANCE",
+                            Days: 60
+                        }
+                    }
+                }
+            },
+            status: "success"
+        });
+        renderObjectLockSettings();
+        await waitFor(()=>{
+            const objectLockCheckbox = screen.getByLabelText(/object-lock/i);
+            expect(objectLockCheckbox).toBeChecked();
+        });
+        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
+        expect(defaultRetentionCheckbox).toBeChecked();
+        const complianceRadio = screen.getByLabelText(/compliance/i);
+        expect(complianceRadio).toBeChecked();
+        const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+        expect(retentionPeriodInput).toHaveValue(60);
+    });
+});

package/dist/components/objects/ObjectPage.d.ts

@@ -0,0 +1 @@
+export declare const ObjectPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/objects/ObjectPage.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useCallback, useState } from "react";
+import { ObjectList } from "./ObjectList.js";
+import { ObjectDetails } from "./ObjectDetails/index.js";
+import { BrowserPageLayout } from "../layouts/BrowserPageLayout.js";
+const ObjectPage = ()=>{
+    const { bucketName } = useParams();
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const [item, setItem] = useState(null);
+    const prefix = searchParams.get("prefix") || "";
+    const handlePrefixChange = useCallback((newPrefix)=>{
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set("prefix", newPrefix);
+        setItem(null);
+        navigate(`?${newSearchParams.toString()}`, {
+            replace: true
+        });
+    }, [
+        navigate,
+        searchParams
+    ]);
+    if (!bucketName) return /*#__PURE__*/ jsx("div", {
+        children: "Bucket name is required"
+    });
+    const handleObjectSelect = (object)=>{
+        setItem(object);
+    };
+    return /*#__PURE__*/ jsx(BrowserPageLayout, {
+        title: bucketName,
+        leftPanel: /*#__PURE__*/ jsx(ObjectList, {
+            bucketName: bucketName,
+            prefix: prefix,
+            onObjectSelect: handleObjectSelect,
+            onPrefixChange: handlePrefixChange
+        }),
+        rightPanel: /*#__PURE__*/ jsx(ObjectDetails, {
+            item: item
+        }),
+        withArrowNavigation: true,
+        arrowNavigationPath: `/buckets/${bucketName}`
+    });
+};
+export { ObjectPage };

package/dist/components/objects/UploadButton.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { PutObjectCommandInput } from "@aws-sdk/client-s3";
+interface UploadButtonProps {
+    /**
+     * The S3 bucket name where files will be uploaded
+     */
+    bucket: string;
+    /**
+     * The prefix/path where files will be uploaded within the bucket
+     */
+    prefix?: string;
+    /**
+     * Button label text
+     */
+    label?: string;
+    /**
+     * Button variant
+     */
+    variant?: "primary" | "secondary" | "outline";
+    /**
+     * Upload options to configure metadata, encryption, etc.
+     */
+    uploadOptions?: Partial<PutObjectCommandInput>;
+    /**
+     * Called when upload is successful
+     */
+    onUploadSuccess?: (files: File[]) => void;
+    /**
+     * Called when upload fails
+     */
+    onUploadError?: (error: Error, files: File[]) => void;
+}
+export declare const UploadButton: React.FC<UploadButtonProps>;
+export default UploadButton;

package/dist/components/objects/UploadButton.js

@@ -0,0 +1,229 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Icon, Modal, PrettyBytes, Stack, Wrap, spacing } from "@scality/core-ui";
+import { Button } from "@scality/core-ui/dist/components/buttonv2/Buttonv2.component";
+import styled_components from "styled-components";
+import { useUploadObjects } from "../../hooks/index.js";
+const DropZone = styled_components.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  width: 500px;
+  padding: ${spacing.r20};
+  border-width: ${spacing.r2};
+  border-radius: ${spacing.r2};
+  border-color: ${(props)=>props.theme.border};
+  border-style: dashed;
+`;
+const Files = styled_components.div`
+  height: 250px;
+  overflow-y: scroll;
+  margin: ${spacing.r8} 0px;
+`;
+const EmptyFile = styled_components.div`
+  text-align: center;
+  margin-top: 60px;
+  & > * {
+    margin-bottom: ${spacing.r16};
+  }
+`;
+const FileRow = styled_components.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${spacing.r8};
+  border-bottom: 1px solid ${(props)=>props.theme.border};
+`;
+const FileInfo = styled_components.div`
+  flex: 1;
+`;
+const RemoveButton = styled_components.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: ${spacing.r4};
+  color: ${(props)=>props.theme.textPrimary};
+
+  &:hover {
+    color: ${(props)=>props.theme.textSecondary};
+  }
+`;
+const maybePluralize = (count, word)=>1 === count ? `1 ${word}` : `${count} ${word}s`;
+const getTitle = (fileCount)=>0 === fileCount ? "Upload Files" : `Upload ${maybePluralize(fileCount, "file")}`;
+const FileList = ({ acceptedFiles, open, removeFile })=>/*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Create-add"
+                }),
+                label: "Add more files",
+                variant: "secondary",
+                onClick: open
+            }),
+            /*#__PURE__*/ jsx(Files, {
+                children: acceptedFiles.map((file)=>/*#__PURE__*/ jsxs(FileRow, {
+                        children: [
+                            /*#__PURE__*/ jsx(FileInfo, {
+                                children: /*#__PURE__*/ jsxs("div", {
+                                    children: [
+                                        file.name,
+                                        /*#__PURE__*/ jsx("br", {}),
+                                        /*#__PURE__*/ jsx("small", {
+                                            children: /*#__PURE__*/ jsx(PrettyBytes, {
+                                                bytes: file.size
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(RemoveButton, {
+                                onClick: ()=>removeFile(file.name),
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "Close"
+                                })
+                            })
+                        ]
+                    }, file.name))
+            })
+        ]
+    });
+const NoFile = ({ open })=>/*#__PURE__*/ jsxs(EmptyFile, {
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                name: "Upload",
+                size: "3x"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                children: "Drag and drop files and folders here"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                children: "OR"
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Create-add"
+                }),
+                label: "Add files",
+                variant: "secondary",
+                onClick: open
+            })
+        ]
+    });
+const UploadButton_UploadButton = ({ bucket, prefix = "", uploadOptions = {}, onUploadSuccess, onUploadError })=>{
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [acceptedFiles, setAcceptedFiles] = useState([]);
+    const uploadMutation = useUploadObjects();
+    const onDrop = useCallback((accepted)=>{
+        if (accepted.length > 0) setAcceptedFiles((prevFiles)=>{
+            const filtered = accepted.filter((newFile)=>!prevFiles.find((existingFile)=>existingFile.name === newFile.name));
+            return filtered.length > 0 ? [
+                ...prevFiles,
+                ...filtered
+            ] : prevFiles;
+        });
+    }, []);
+    const { getRootProps, getInputProps, open } = useDropzone({
+        noClick: true,
+        noKeyboard: true,
+        onDrop
+    });
+    const openModal = useCallback(()=>{
+        setIsModalOpen(true);
+    }, []);
+    const closeModal = useCallback(()=>{
+        setAcceptedFiles([]);
+        setIsModalOpen(false);
+    }, []);
+    const removeFile = useCallback((fileName)=>{
+        setAcceptedFiles((prevFiles)=>prevFiles.filter((file)=>file.name !== fileName));
+    }, []);
+    const handleUpload = useCallback(async ()=>{
+        if (0 === acceptedFiles.length) return;
+        const successfulFiles = [];
+        const failedFiles = [];
+        for (const file of acceptedFiles)try {
+            const fileBuffer = await file.arrayBuffer();
+            await uploadMutation.mutateAsync({
+                Bucket: bucket,
+                Key: prefix ? `${prefix}/${file.name}` : file.name,
+                Body: new Uint8Array(fileBuffer),
+                ContentType: file.type,
+                ...uploadOptions
+            });
+            successfulFiles.push(file);
+        } catch (error) {
+            failedFiles.push(file);
+            if (1 === failedFiles.length) onUploadError?.(error, [
+                file
+            ]);
+        }
+        if (successfulFiles.length > 0) onUploadSuccess?.(successfulFiles);
+        setAcceptedFiles([]);
+        setIsModalOpen(false);
+    }, [
+        acceptedFiles,
+        bucket,
+        prefix,
+        uploadMutation,
+        uploadOptions,
+        onUploadSuccess,
+        onUploadError
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Simple-upload"
+                }),
+                label: "Upload",
+                variant: "secondary",
+                onClick: openModal
+            }),
+            isModalOpen && /*#__PURE__*/ jsx(Modal, {
+                close: closeModal,
+                footer: /*#__PURE__*/ jsxs(Wrap, {
+                    children: [
+                        /*#__PURE__*/ jsx("p", {}),
+                        /*#__PURE__*/ jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    variant: "outline",
+                                    onClick: closeModal,
+                                    label: "Cancel",
+                                    disabled: uploadMutation.isPending
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    disabled: 0 === acceptedFiles.length || uploadMutation.isPending,
+                                    variant: "secondary",
+                                    onClick: handleUpload,
+                                    label: uploadMutation.isPending ? "Uploading..." : "Upload"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                isOpen: true,
+                title: getTitle(acceptedFiles.length),
+                children: /*#__PURE__*/ jsxs(DropZone, {
+                    ...getRootProps(),
+                    children: [
+                        /*#__PURE__*/ jsx("input", {
+                            ...getInputProps()
+                        }),
+                        acceptedFiles.length > 0 ? /*#__PURE__*/ jsx(FileList, {
+                            acceptedFiles: acceptedFiles,
+                            open: open,
+                            removeFile: removeFile
+                        }) : /*#__PURE__*/ jsx(NoFile, {
+                            open: open
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const UploadButton = UploadButton_UploadButton;
+export { UploadButton_UploadButton as UploadButton, UploadButton as default };