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

package/dist/components/objects/CreateFolderButton.js

@@ -0,0 +1,118 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Icon, InfoMessage, Modal, Stack, Wrap, spacing } from "@scality/core-ui";
+import { Button, Input } from "@scality/core-ui/dist/next";
+import { useCreateFolder } from "../../hooks/index.js";
+import styled_components from "styled-components";
+const Description = styled_components.div`
+  margin-top: ${spacing.r16};
+  width: 20.5rem;
+`;
+const CreateFolderButton = ({ bucket, prefix = "", label = "Folder", variant = "secondary", onFolderSuccess, onFolderError })=>{
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [folderName, setFolderName] = useState("");
+    const createFolderMutation = useCreateFolder();
+    const openModal = useCallback(()=>{
+        setIsModalOpen(true);
+    }, []);
+    const closeModal = useCallback(()=>{
+        setFolderName("");
+        setIsModalOpen(false);
+    }, []);
+    const handleSave = useCallback(()=>{
+        if (!folderName.trim()) return;
+        const folderKey = prefix ? `${prefix}/${folderName}/` : `${folderName}/`;
+        createFolderMutation.mutate({
+            Bucket: bucket,
+            Key: folderKey,
+            Body: ""
+        }, {
+            onSuccess: ()=>{
+                onFolderSuccess?.(folderName);
+                setFolderName("");
+                setIsModalOpen(false);
+            },
+            onError: (error)=>{
+                onFolderError?.(error, folderName);
+            }
+        });
+    }, [
+        folderName,
+        prefix,
+        bucket,
+        createFolderMutation,
+        onFolderSuccess,
+        onFolderError
+    ]);
+    const handleChange = useCallback((e)=>{
+        setFolderName(e.target.value);
+    }, []);
+    const hasInvalidFormat = folderName.startsWith("/");
+    const isEmpty = "" === folderName.trim();
+    const isLoading = createFolderMutation.isPending;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Create-add"
+                }),
+                label: label,
+                variant: variant,
+                onClick: openModal
+            }),
+            /*#__PURE__*/ jsxs(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: isLoading
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    disabled: isLoading || isEmpty || hasInvalidFormat,
+                                    variant: "secondary",
+                                    onClick: handleSave,
+                                    label: "Save",
+                                    tooltip: hasInvalidFormat ? {
+                                        overlay: "The folder name is not valid."
+                                    } : void 0
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                isOpen: isModalOpen,
+                title: "Create a folder",
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        id: "folder-name",
+                        value: folderName,
+                        placeholder: "New folder",
+                        error: hasInvalidFormat ? "Folder name cannot start with '/'" : void 0,
+                        onChange: handleChange,
+                        autoFocus: true
+                    }),
+                    /*#__PURE__*/ jsx(Description, {
+                        children: /*#__PURE__*/ jsx(InfoMessage, {
+                            title: "Creating a folder",
+                            content: /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    "Ensure the folder name does not begin with a slash. ",
+                                    /*#__PURE__*/ jsx("br", {}),
+                                    'When you create a folder, Data Browser creates an object with the above name appended by suffix "/" and that object is displayed as a folder in the Data Browser.'
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const objects_CreateFolderButton = CreateFolderButton;
+export { CreateFolderButton, objects_CreateFolderButton as default };

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

@@ -0,0 +1,8 @@
+import { TableItem } from "./ObjectList";
+export type Objects = TableItem[];
+interface DeleteObjectButtonProps {
+    objects: Objects;
+    bucketName: string;
+}
+export declare const DeleteObjectButton: React.FC<DeleteObjectButtonProps>;
+export default DeleteObjectButton;

package/dist/components/objects/DeleteObjectButton.js

@@ -0,0 +1,191 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Banner, Icon, Modal, PrettyBytes, Stack, Text, Wrap, spacing, useToast } from "@scality/core-ui";
+import { Box, Button } from "@scality/core-ui/dist/next";
+import { useDeleteObjects, useGetBucketVersioning } from "../../hooks/index.js";
+import { getDeletionMessages } from "../../utils/deletion/index.js";
+import { DeleteObjectModalContent } from "../ui/DeleteObjectModalContent.js";
+const Title = ({ objects, isCurrentSelectionPermanentlyDeleted })=>{
+    const foldersSize = objects.filter((object)=>"folder" === object.type).length;
+    const objectsSize = objects.length - foldersSize;
+    if (0 === objects.length) return null;
+    return /*#__PURE__*/ jsxs(Text, {
+        children: [
+            "Do you want to",
+            " ",
+            /*#__PURE__*/ jsxs("strong", {
+                children: [
+                    " ",
+                    isCurrentSelectionPermanentlyDeleted ? "permanently" : "",
+                    " "
+                ]
+            }),
+            " ",
+            "delete the selected",
+            " ",
+            objectsSize > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    objectsSize,
+                    " ",
+                    isCurrentSelectionPermanentlyDeleted ? `object version${objectsSize > 1 ? "s" : ""}` : `object${objectsSize > 1 ? "s" : ""}`,
+                    foldersSize > 0 && " and "
+                ]
+            }),
+            foldersSize > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    foldersSize,
+                    " folder",
+                    foldersSize > 1 ? "s" : ""
+                ]
+            }),
+            "?"
+        ]
+    });
+};
+const DeleteObjectButton = ({ objects, bucketName })=>{
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [selectedObjects, setSelectedObjects] = useState(objects);
+    const { data: versioningData } = useGetBucketVersioning({
+        Bucket: bucketName
+    });
+    const { mutate: deleteObjects, status: deleteObjectsStatus } = useDeleteObjects();
+    const { showToast } = useToast();
+    const isVersioningEnabled = versioningData?.Status === "Enabled";
+    const isCurrentSelectionPermanentlyDeleted = !isVersioningEnabled || selectedObjects.some((object)=>!!object.VersionId);
+    const { info: notificationText } = getDeletionMessages({
+        numberOfObjects: selectedObjects.length,
+        selectedObjectsAreSpecificVersions: isCurrentSelectionPermanentlyDeleted,
+        isBucketVersioned: isVersioningEnabled
+    });
+    const handleDeleteClick = useCallback(()=>{
+        setIsModalOpen(true);
+    }, []);
+    const cancel = useCallback(()=>{
+        setIsModalOpen(false);
+    }, []);
+    const deleteSelectedFiles = useCallback(()=>{
+        const objectsToDelete = selectedObjects.filter((object)=>"object" === object.type && object.Key).map((object)=>{
+            const deleteItem = {
+                Key: object.Key
+            };
+            if (object.VersionId && "string" == typeof object.VersionId) deleteItem.VersionId = object.VersionId;
+            return deleteItem;
+        });
+        const foldersToDelete = selectedObjects.filter((object)=>"folder" === object.type && object.Key).map((object)=>({
+                Key: object.Key
+            }));
+        deleteObjects({
+            Bucket: bucketName,
+            Delete: {
+                Objects: [
+                    ...objectsToDelete,
+                    ...foldersToDelete
+                ]
+            }
+        }, {
+            onSuccess: ()=>{
+                showToast({
+                    open: true,
+                    message: "Objects deleted successfully",
+                    status: "success"
+                });
+                setIsModalOpen(false);
+            },
+            onError: (error)=>{
+                showToast({
+                    open: true,
+                    message: error instanceof Error ? error.message : "Objects deleted failed",
+                    status: "error"
+                });
+                setIsModalOpen(false);
+            }
+        });
+    }, [
+        bucketName,
+        selectedObjects,
+        deleteObjects,
+        showToast
+    ]);
+    const totalSize = selectedObjects.reduce((acc, object)=>object.Size ? acc + object.Size : acc, 0);
+    useEffect(()=>{
+        setSelectedObjects(objects);
+    }, [
+        objects
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                id: "object-list-delete-button",
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Delete"
+                }),
+                variant: "danger",
+                disabled: 0 === selectedObjects.length,
+                onClick: handleDeleteClick,
+                label: "Delete"
+            }),
+            /*#__PURE__*/ jsxs(Modal, {
+                close: cancel,
+                footer: /*#__PURE__*/ jsxs(Wrap, {
+                    children: [
+                        /*#__PURE__*/ jsx("p", {}),
+                        /*#__PURE__*/ jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    id: "object-delete-cancel-button",
+                                    variant: "outline",
+                                    onClick: cancel,
+                                    label: "Cancel"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    isLoading: "pending" === deleteObjectsStatus,
+                                    id: "object-delete-delete-button",
+                                    variant: "danger",
+                                    onClick: deleteSelectedFiles,
+                                    disabled: 0 === selectedObjects.length,
+                                    label: "Delete"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                isOpen: isModalOpen,
+                title: "Confirmation",
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        children: /*#__PURE__*/ jsx(Title, {
+                            objects: selectedObjects,
+                            isCurrentSelectionPermanentlyDeleted: isCurrentSelectionPermanentlyDeleted
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(DeleteObjectModalContent, {
+                        objects: selectedObjects,
+                        onRemove: (key)=>{
+                            setSelectedObjects(selectedObjects.filter((object)=>object.Key !== key));
+                        }
+                    }),
+                    /*#__PURE__*/ jsxs(Box, {
+                        mb: spacing.r12,
+                        children: [
+                            "Total: ",
+                            PrettyBytes({
+                                bytes: totalSize
+                            })
+                        ]
+                    }),
+                    selectedObjects.length > 0 && notificationText && /*#__PURE__*/ jsx(Banner, {
+                        variant: "base",
+                        icon: /*#__PURE__*/ jsx(Icon, {
+                            name: "Info-circle"
+                        }),
+                        children: /*#__PURE__*/ jsx("span", {
+                            children: notificationText
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const objects_DeleteObjectButton = DeleteObjectButton;
+export { DeleteObjectButton, objects_DeleteObjectButton as default };

package/dist/components/objects/ObjectDetails/ObjectMetadata.d.ts

@@ -0,0 +1,2 @@
+import { ObjectCommonProps } from ".";
+export declare const ObjectMetadata: ({ bucketName, objectKey, versionId, }: ObjectCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/objects/ObjectDetails/ObjectMetadata.js

@@ -0,0 +1,356 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Icon, Loader, Text, spacing, useToast } from "@scality/core-ui";
+import { Box, Button, Input, Select } from "@scality/core-ui/dist/next";
+import { convertSizeToRem } from "@scality/core-ui/dist/components/inputv2/inputv2";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCopyObject, useObjectMetadata } from "../../../hooks/index.js";
+import { TableContainer } from "../../ui/Table.elements.js";
+import { ArrayFieldActions } from "../../ui/ArrayFieldActions.js";
+const METADATA_KEYS = [
+    {
+        key: "CacheControl",
+        label: "cache-control"
+    },
+    {
+        key: "ContentDisposition",
+        label: "content-disposition"
+    },
+    {
+        key: "ContentEncoding",
+        label: "content-encoding"
+    },
+    {
+        key: "ContentType",
+        label: "content-type"
+    },
+    {
+        key: "WebsiteRedirectLocation",
+        label: "website-redirect-location"
+    },
+    {
+        key: "x-amz-meta",
+        label: "x-amz-meta"
+    }
+];
+const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
+    const getVersionParams = ()=>versionId ? {
+            VersionId: versionId
+        } : {};
+    const { data: metadata, status: metadataStatus } = useObjectMetadata({
+        Bucket: bucketName,
+        Key: objectKey,
+        ...getVersionParams()
+    });
+    const copyObjectMutation = useCopyObject();
+    const { showToast } = useToast();
+    const queryClient = useQueryClient();
+    const [isInitialized, setIsInitialized] = useState(false);
+    const { control, handleSubmit, setValue, watch, formState: { errors, isValid, isSubmitting } } = useForm({
+        mode: "onChange",
+        defaultValues: {
+            metadata: []
+        }
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "metadata"
+    });
+    useEffect(()=>{
+        setIsInitialized(false);
+        copyObjectMutation.reset();
+    }, [
+        bucketName,
+        objectKey,
+        versionId
+    ]);
+    useEffect(()=>{
+        if (metadata && "success" === metadataStatus && !isInitialized) {
+            const rows = [];
+            const standardKeys = [
+                "CacheControl",
+                "ContentDisposition",
+                "ContentEncoding",
+                "ContentType",
+                "WebsiteRedirectLocation"
+            ];
+            standardKeys.forEach((keyType)=>{
+                const value = metadata[keyType];
+                if (value) rows.push({
+                    keyType,
+                    customKey: "",
+                    value
+                });
+            });
+            const userMetadata = metadata.Metadata || {};
+            Object.entries(userMetadata).forEach(([key, value])=>{
+                rows.push({
+                    keyType: "x-amz-meta",
+                    customKey: key,
+                    value: value
+                });
+            });
+            if (0 === rows.length) rows.push({
+                keyType: "",
+                customKey: "",
+                value: ""
+            });
+            setValue("metadata", rows);
+            setIsInitialized(true);
+        }
+    }, [
+        metadata,
+        metadataStatus,
+        setValue,
+        isInitialized
+    ]);
+    const getAvailableOptions = (currentIndex)=>{
+        const allMetadata = watch("metadata") || [];
+        const usedKeys = new Set(allMetadata.filter((row, idx)=>idx !== currentIndex && "x-amz-meta" !== row.keyType).map((row)=>row.keyType));
+        return METADATA_KEYS.filter((key)=>"x-amz-meta" === key.key || !usedKeys.has(key.key));
+    };
+    const onSubmit = async (data)=>{
+        if (!metadata) return;
+        try {
+            const validMetadata = data.metadata.filter((row)=>row.keyType && row.value.trim());
+            const encodedKey = encodeURIComponent(objectKey);
+            const copySource = versionId ? `${bucketName}/${encodedKey}?versionId=${versionId}` : `${bucketName}/${encodedKey}`;
+            const copyParams = {
+                Bucket: bucketName,
+                Key: objectKey,
+                CopySource: copySource,
+                MetadataDirective: "REPLACE",
+                Metadata: {}
+            };
+            validMetadata.forEach((row)=>{
+                if ("x-amz-meta" === row.keyType) copyParams.Metadata[row.customKey.trim()] = row.value.trim();
+                else if (row.keyType) copyParams[row.keyType] = row.value.trim();
+            });
+            if (!copyParams.ContentType && metadata.ContentType) copyParams.ContentType = metadata.ContentType;
+            await copyObjectMutation.mutateAsync(copyParams);
+            await queryClient.invalidateQueries({
+                queryKey: [
+                    "HeadObject",
+                    {
+                        Bucket: bucketName,
+                        Key: objectKey,
+                        ...getVersionParams()
+                    }
+                ]
+            });
+            showToast({
+                open: true,
+                message: "Metadata saved successfully",
+                status: "success"
+            });
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to save metadata";
+            showToast({
+                open: true,
+                message: errorMessage,
+                status: "error"
+            });
+        }
+    };
+    if ("pending" === metadataStatus) return /*#__PURE__*/ jsx(TableContainer, {
+        children: /*#__PURE__*/ jsx(Box, {
+            display: "flex",
+            justifyContent: "center",
+            padding: spacing.r32,
+            children: /*#__PURE__*/ jsx(Loader, {})
+        })
+    });
+    if ("error" === metadataStatus) return /*#__PURE__*/ jsx(TableContainer, {
+        children: /*#__PURE__*/ jsx(Box, {
+            padding: spacing.r16,
+            children: /*#__PURE__*/ jsx(Text, {
+                color: "statusCritical",
+                children: "Error loading metadata"
+            })
+        })
+    });
+    return /*#__PURE__*/ jsx(TableContainer, {
+        children: /*#__PURE__*/ jsxs("form", {
+            onSubmit: handleSubmit(onSubmit),
+            children: [
+                /*#__PURE__*/ jsxs(Box, {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    padding: spacing.r16,
+                    borderBottom: "1px solid",
+                    borderColor: "backgroundLevel3",
+                    children: [
+                        /*#__PURE__*/ jsx(Text, {
+                            isEmphazed: true,
+                            children: "Edit Metadata"
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "primary",
+                            label: "Save",
+                            disabled: !isValid || isSubmitting,
+                            type: "submit",
+                            icon: /*#__PURE__*/ jsx(Icon, {
+                                name: "Save"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Box, {
+                    padding: spacing.r16,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: spacing.r12,
+                    children: [
+                        /*#__PURE__*/ jsxs(Box, {
+                            display: "flex",
+                            gap: spacing.r8,
+                            children: [
+                                /*#__PURE__*/ jsx(Box, {
+                                    flex: "1",
+                                    children: /*#__PURE__*/ jsx(Text, {
+                                        color: "textSecondary",
+                                        isEmphazed: true,
+                                        children: "Key"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    flex: "1",
+                                    children: /*#__PURE__*/ jsx(Text, {
+                                        color: "textSecondary",
+                                        isEmphazed: true,
+                                        children: "Value"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    width: convertSizeToRem("1/3")
+                                })
+                            ]
+                        }),
+                        fields.map((field, index)=>/*#__PURE__*/ jsxs(Box, {
+                                children: [
+                                    /*#__PURE__*/ jsxs(Box, {
+                                        display: "flex",
+                                        gap: spacing.r8,
+                                        alignItems: "center",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Controller, {
+                                                control: control,
+                                                name: `metadata.${index}.keyType`,
+                                                rules: {
+                                                    validate: (value, formValues)=>{
+                                                        if (1 === formValues.metadata.length && !value && !formValues.metadata[0].value.trim()) return true;
+                                                        if (!value) return "Please select a metadata key";
+                                                        const allMetadata = formValues.metadata;
+                                                        const usedKeys = allMetadata.map((row, idx)=>{
+                                                            if (idx === index) return null;
+                                                            if ("x-amz-meta" === row.keyType) return row.customKey ? `x-amz-meta-${row.customKey.trim()}` : null;
+                                                            return row.keyType;
+                                                        }).filter(Boolean);
+                                                        const currentKey = "x-amz-meta" === value ? formValues.metadata[index].customKey ? `x-amz-meta-${formValues.metadata[index].customKey.trim()}` : null : value;
+                                                        if (currentKey && usedKeys.includes(currentKey)) return `Duplicate key "${currentKey}"`;
+                                                        return true;
+                                                    }
+                                                },
+                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Select, {
+                                                        id: `key-${field.id}`,
+                                                        value: value,
+                                                        onChange: (newValue)=>{
+                                                            onChange(newValue);
+                                                            if ("x-amz-meta" !== newValue) setValue(`metadata.${index}.customKey`, "");
+                                                        },
+                                                        placeholder: "Select key",
+                                                        children: getAvailableOptions(index).map((key)=>/*#__PURE__*/ jsx(Select.Option, {
+                                                                value: key.key,
+                                                                children: key.label
+                                                            }, key.key))
+                                                    })
+                                            }),
+                                            "x-amz-meta" === watch(`metadata.${index}.keyType`) && /*#__PURE__*/ jsx(Controller, {
+                                                control: control,
+                                                name: `metadata.${index}.customKey`,
+                                                rules: {
+                                                    validate: (value, formValues)=>{
+                                                        if ("x-amz-meta" === formValues.metadata[index].keyType) {
+                                                            if (!value.trim()) return "Custom key required";
+                                                        }
+                                                        return true;
+                                                    }
+                                                },
+                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
+                                                        id: `customKey-${field.id}`,
+                                                        value: value,
+                                                        onChange: onChange,
+                                                        size: "1/3"
+                                                    })
+                                            }),
+                                            /*#__PURE__*/ jsx(Text, {
+                                                color: "textSecondary",
+                                                children: ":"
+                                            }),
+                                            /*#__PURE__*/ jsx(Controller, {
+                                                control: control,
+                                                name: `metadata.${index}.value`,
+                                                rules: {
+                                                    validate: (value, formValues)=>{
+                                                        if (1 === formValues.metadata.length && !value.trim() && !formValues.metadata[0].keyType) return true;
+                                                        if (!value.trim()) return "Value cannot be empty";
+                                                        return true;
+                                                    }
+                                                },
+                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
+                                                        id: `value-${field.id}`,
+                                                        value: value,
+                                                        onChange: onChange,
+                                                        placeholder: "Value"
+                                                    })
+                                            }),
+                                            /*#__PURE__*/ jsx(ArrayFieldActions, {
+                                                showAdd: index === fields.length - 1,
+                                                onRemove: ()=>{
+                                                    remove(index);
+                                                    if (1 === fields.length) append({
+                                                        keyType: "",
+                                                        customKey: "",
+                                                        value: ""
+                                                    });
+                                                },
+                                                onAdd: ()=>append({
+                                                        keyType: "",
+                                                        customKey: "",
+                                                        value: ""
+                                                    }),
+                                                canRemove: true,
+                                                canAdd: !!watch(`metadata.${index}.keyType`) && !!watch(`metadata.${index}.value`),
+                                                removeLabel: "Remove metadata",
+                                                addLabel: "Add metadata"
+                                            })
+                                        ]
+                                    }),
+                                    (errors.metadata?.[index]?.keyType || errors.metadata?.[index]?.customKey || errors.metadata?.[index]?.value) && /*#__PURE__*/ jsxs(Box, {
+                                        paddingTop: spacing.r4,
+                                        children: [
+                                            errors.metadata?.[index]?.keyType && /*#__PURE__*/ jsx(Text, {
+                                                color: "statusCritical",
+                                                children: errors.metadata[index]?.keyType?.message
+                                            }),
+                                            errors.metadata?.[index]?.customKey && /*#__PURE__*/ jsx(Text, {
+                                                color: "statusCritical",
+                                                children: errors.metadata[index]?.customKey?.message
+                                            }),
+                                            errors.metadata?.[index]?.value && /*#__PURE__*/ jsx(Text, {
+                                                color: "statusCritical",
+                                                children: errors.metadata[index]?.value?.message
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, field.id))
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { ObjectMetadata };