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

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

@@ -0,0 +1,323 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Icon, Loader, Text, spacing } from "@scality/core-ui";
+import { Box, Button, Input, Select } from "@scality/core-ui/dist/next";
+import { useCopyObject, useObjectMetadata } from "../../../hooks/index.js";
+import { TableContainer } from "../../ui/Table.elements.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 { data: metadata, status: metadataStatus } = useObjectMetadata({
+        Bucket: bucketName,
+        Key: objectKey,
+        ...versionId && {
+            VersionId: versionId
+        }
+    });
+    const copyObjectMutation = useCopyObject();
+    const [metadataRows, setMetadataRows] = useState([]);
+    useEffect(()=>{
+        setMetadataRows([]);
+        copyObjectMutation.reset();
+    }, [
+        bucketName,
+        objectKey,
+        versionId
+    ]);
+    useEffect(()=>{
+        if (metadata && "success" === metadataStatus) {
+            const rows = [];
+            const standardKeys = [
+                "CacheControl",
+                "ContentDisposition",
+                "ContentEncoding",
+                "ContentType",
+                "WebsiteRedirectLocation"
+            ];
+            standardKeys.forEach((keyType)=>{
+                const value = metadata[keyType];
+                if (value) rows.push({
+                    id: `init-${rows.length}`,
+                    keyType,
+                    customKey: "",
+                    value
+                });
+            });
+            const userMetadata = metadata.Metadata || {};
+            Object.entries(userMetadata).forEach(([key, value])=>{
+                rows.push({
+                    id: `init-${rows.length}`,
+                    keyType: "x-amz-meta",
+                    customKey: key,
+                    value: value
+                });
+            });
+            setMetadataRows(rows);
+        }
+    }, [
+        metadata,
+        metadataStatus
+    ]);
+    const handleAddRow = useCallback(()=>{
+        setMetadataRows((prev)=>[
+                ...prev,
+                {
+                    id: `new-${Date.now()}`,
+                    keyType: "",
+                    customKey: "",
+                    value: ""
+                }
+            ]);
+    }, []);
+    const handleDeleteRow = useCallback((id)=>{
+        setMetadataRows((prev)=>prev.filter((row)=>row.id !== id));
+    }, []);
+    const handleRowChange = useCallback((id, field, value)=>{
+        setMetadataRows((prev)=>prev.map((row)=>row.id === id ? {
+                    ...row,
+                    [field]: value,
+                    ..."keyType" === field && "x-amz-meta" !== value && {
+                        customKey: ""
+                    }
+                } : row));
+    }, []);
+    const validationErrors = useMemo(()=>{
+        const errors = [];
+        const seenKeys = new Set();
+        metadataRows.forEach((row, index)=>{
+            if (!row.keyType) return void errors.push(`Row ${index + 1}: Please select a metadata key`);
+            if ("x-amz-meta" === row.keyType && !row.customKey.trim()) return void errors.push(`Row ${index + 1}: Please provide a custom key name`);
+            if (!row.value.trim()) return void errors.push(`Row ${index + 1}: Please provide a value`);
+            const fullKey = "x-amz-meta" === row.keyType ? `x-amz-meta-${row.customKey}` : row.keyType;
+            if (seenKeys.has(fullKey)) errors.push(`Row ${index + 1}: Duplicate key "${"x-amz-meta" === row.keyType ? `x-amz-meta-${row.customKey}` : row.keyType}"`);
+            else seenKeys.add(fullKey);
+        });
+        return errors;
+    }, [
+        metadataRows
+    ]);
+    const canSave = metadataRows.length > 0 && 0 === validationErrors.length;
+    const getAvailableOptions = useCallback((currentRowId)=>{
+        const usedKeys = new Set(metadataRows.filter((row)=>row.id !== currentRowId && "x-amz-meta" !== row.keyType).map((row)=>row.keyType));
+        return METADATA_KEYS.filter((key)=>"x-amz-meta" === key.key || !usedKeys.has(key.key));
+    }, [
+        metadataRows
+    ]);
+    const handleSave = useCallback(async ()=>{
+        if (!canSave || !metadata) return;
+        try {
+            const encodedKey = encodeURIComponent(objectKey);
+            const copySource = versionId ? `${bucketName}/${encodedKey}?versionId=${versionId}` : `${bucketName}/${encodedKey}`;
+            const copyParams = {
+                Bucket: bucketName,
+                Key: objectKey,
+                CopySource: copySource,
+                MetadataDirective: "REPLACE",
+                Metadata: {}
+            };
+            metadataRows.forEach((row)=>{
+                if ("x-amz-meta" === row.keyType) copyParams.Metadata[row.customKey] = row.value;
+                else if (row.keyType) copyParams[row.keyType] = row.value;
+            });
+            if (!copyParams.ContentType && metadata.ContentType) copyParams.ContentType = metadata.ContentType;
+            await copyObjectMutation.mutateAsync(copyParams);
+        } catch (error) {
+            console.error("Failed to save metadata:", error);
+        }
+    }, [
+        canSave,
+        metadata,
+        bucketName,
+        objectKey,
+        metadataRows,
+        copyObjectMutation
+    ]);
+    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__*/ jsxs(TableContainer, {
+        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__*/ jsxs(Box, {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: spacing.r8,
+                        children: [
+                            copyObjectMutation.isSuccess && /*#__PURE__*/ jsx(Text, {
+                                color: "statusHealthy",
+                                children: "Saved successfully"
+                            }),
+                            copyObjectMutation.isError && /*#__PURE__*/ jsx(Text, {
+                                color: "statusCritical",
+                                children: "Failed to save"
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                variant: "primary",
+                                label: "Save",
+                                disabled: !canSave || copyObjectMutation.isPending,
+                                onClick: handleSave,
+                                icon: /*#__PURE__*/ jsx(Icon, {
+                                    name: "Save"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            validationErrors.length > 0 && /*#__PURE__*/ jsxs(Box, {
+                padding: spacing.r16,
+                backgroundColor: "backgroundLevel2",
+                borderLeft: "3px solid",
+                borderColor: "statusCritical",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "statusCritical",
+                        isEmphazed: true,
+                        children: "Validation Errors:"
+                    }),
+                    validationErrors.map((error, index)=>/*#__PURE__*/ jsx(Box, {
+                            paddingLeft: spacing.r8,
+                            children: /*#__PURE__*/ jsxs(Text, {
+                                color: "statusCritical",
+                                children: [
+                                    "• ",
+                                    error
+                                ]
+                            })
+                        }, index))
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Box, {
+                padding: spacing.r16,
+                display: "flex",
+                flexDirection: "column",
+                gap: spacing.r12,
+                flex: "1",
+                children: [
+                    metadataRows.length > 0 && /*#__PURE__*/ jsxs(Box, {
+                        display: "flex",
+                        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"
+                                })
+                            })
+                        ]
+                    }),
+                    metadataRows.map((row)=>/*#__PURE__*/ jsxs(Box, {
+                            display: "flex",
+                            gap: spacing.r8,
+                            alignItems: "center",
+                            children: [
+                                /*#__PURE__*/ jsx(Select, {
+                                    id: `key-${row.id}`,
+                                    value: row.keyType,
+                                    onChange: (value)=>handleRowChange(row.id, "keyType", value),
+                                    placeholder: "Select key",
+                                    children: getAvailableOptions(row.id).map((key)=>/*#__PURE__*/ jsx(Select.Option, {
+                                            value: key.key,
+                                            children: key.label
+                                        }, key.key))
+                                }),
+                                "x-amz-meta" === row.keyType && /*#__PURE__*/ jsx(Input, {
+                                    id: `customKey-${row.id}`,
+                                    value: row.customKey,
+                                    onChange: (e)=>handleRowChange(row.id, "customKey", e.target.value),
+                                    placeholder: "custom-key"
+                                }),
+                                /*#__PURE__*/ jsx(Text, {
+                                    color: "textSecondary",
+                                    children: ":"
+                                }),
+                                /*#__PURE__*/ jsx(Input, {
+                                    id: `value-${row.id}`,
+                                    value: row.value,
+                                    onChange: (e)=>handleRowChange(row.id, "value", e.target.value),
+                                    placeholder: "Value"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    variant: "secondary",
+                                    icon: /*#__PURE__*/ jsx(Icon, {
+                                        name: "Delete"
+                                    }),
+                                    onClick: ()=>handleDeleteRow(row.id),
+                                    "aria-label": "Delete row"
+                                })
+                            ]
+                        }, row.id)),
+                    /*#__PURE__*/ jsx(Box, {
+                        children: /*#__PURE__*/ jsx(Button, {
+                            variant: "secondary",
+                            icon: /*#__PURE__*/ jsx(Icon, {
+                                name: "Create-add"
+                            }),
+                            label: "Add Metadata",
+                            onClick: handleAddRow
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { ObjectMetadata };

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

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

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

@@ -0,0 +1,193 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ConstrainedText, FormattedDateTime, Loader, PrettyBytes, spacing } from "@scality/core-ui";
+import { useObjectLegalHold, useObjectMetadata, useObjectRetention } from "../../../hooks/index.js";
+import { Body, ExtraCell, Group, GroupContent, GroupName, GroupValues, Key, Row, Table, TableContainer, Value } from "../../ui/Table.elements.js";
+import { CopyButton } from "@scality/core-ui/dist/components/buttonv2/CopyButton.component";
+import { Box } from "@scality/core-ui/dist/next";
+const ObjectSummary = ({ bucketName, objectKey, versionId })=>{
+    const { data: metadata, status: metadataStatus } = useObjectMetadata({
+        Bucket: bucketName,
+        Key: objectKey,
+        ...versionId && {
+            VersionId: versionId
+        }
+    });
+    const { data: legalHoldData, status: legalHoldStatus } = useObjectLegalHold({
+        Bucket: bucketName,
+        Key: objectKey,
+        ...versionId && {
+            VersionId: versionId
+        }
+    });
+    const { data: retentionData, status: retentionStatus } = useObjectRetention({
+        Bucket: bucketName,
+        Key: objectKey,
+        ...versionId && {
+            VersionId: versionId
+        }
+    });
+    return /*#__PURE__*/ jsx(TableContainer, {
+        children: /*#__PURE__*/ jsx(Table, {
+            children: /*#__PURE__*/ jsxs(Body, {
+                children: [
+                    /*#__PURE__*/ jsxs(Group, {
+                        children: [
+                            /*#__PURE__*/ jsx(GroupName, {
+                                children: "Information"
+                            }),
+                            /*#__PURE__*/ jsxs(GroupContent, {
+                                children: [
+                                    /*#__PURE__*/ jsxs(Row, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Key, {
+                                                children: "Name"
+                                            }),
+                                            /*#__PURE__*/ jsx(Value, {
+                                                width: "15rem",
+                                                children: /*#__PURE__*/ jsx(ConstrainedText, {
+                                                    text: objectKey,
+                                                    lineClamp: 2
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(Row, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Key, {
+                                                children: "Version ID"
+                                            }),
+                                            /*#__PURE__*/ jsx(Value, {
+                                                children: "pending" === metadataStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === metadataStatus ? "Error" : /*#__PURE__*/ jsxs(GroupValues, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(Box, {
+                                                            flex: "1",
+                                                            minWidth: "0",
+                                                            children: /*#__PURE__*/ jsx(ConstrainedText, {
+                                                                text: metadata?.VersionId || versionId || "N/A",
+                                                                lineClamp: 1
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsx(ExtraCell, {
+                                                            marginLeft: spacing.f8,
+                                                            children: /*#__PURE__*/ jsx(CopyButton, {
+                                                                textToCopy: metadata?.VersionId || versionId || ""
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(Row, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Key, {
+                                                children: "Size"
+                                            }),
+                                            /*#__PURE__*/ jsx(Value, {
+                                                children: "pending" === metadataStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === metadataStatus ? "Error" : /*#__PURE__*/ jsx(PrettyBytes, {
+                                                    bytes: metadata?.ContentLength || 0
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(Row, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Key, {
+                                                children: "Modified On"
+                                            }),
+                                            /*#__PURE__*/ jsx(Value, {
+                                                children: "pending" === metadataStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === metadataStatus ? "Error" : metadata?.LastModified ? /*#__PURE__*/ jsx(FormattedDateTime, {
+                                                    value: metadata.LastModified,
+                                                    format: "date-time-second"
+                                                }) : "N/A"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(Row, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Key, {
+                                                children: "ETag"
+                                            }),
+                                            /*#__PURE__*/ jsx(Value, {
+                                                children: "pending" === metadataStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === metadataStatus ? "Error" : /*#__PURE__*/ jsxs(GroupValues, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(Box, {
+                                                            flex: "1",
+                                                            minWidth: "0",
+                                                            children: /*#__PURE__*/ jsx(ConstrainedText, {
+                                                                text: metadata.ETag?.replace(/^"|"$/g, "") || "N/A",
+                                                                lineClamp: 1
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsx(ExtraCell, {
+                                                            marginLeft: spacing.f8,
+                                                            children: /*#__PURE__*/ jsx(CopyButton, {
+                                                                textToCopy: metadata.ETag?.replace(/^"|"$/g, "") || ""
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(Row, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Key, {
+                                                children: "Location"
+                                            }),
+                                            /*#__PURE__*/ jsx(Value, {
+                                                children: "default"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Group, {
+                        children: [
+                            /*#__PURE__*/ jsx(GroupName, {
+                                children: "Data protection"
+                            }),
+                            /*#__PURE__*/ jsxs(GroupContent, {
+                                children: [
+                                    /*#__PURE__*/ jsxs(Row, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Key, {
+                                                children: "Lock"
+                                            }),
+                                            /*#__PURE__*/ jsx(Value, {
+                                                children: "pending" === retentionStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === retentionStatus ? "No Retention" : retentionData?.Retention?.Mode ? /*#__PURE__*/ jsxs(Fragment, {
+                                                    children: [
+                                                        retentionData.Retention.Mode,
+                                                        " until",
+                                                        " ",
+                                                        retentionData.Retention.RetainUntilDate ? /*#__PURE__*/ jsx(FormattedDateTime, {
+                                                            format: "date-time-second",
+                                                            value: new Date(retentionData.Retention.RetainUntilDate)
+                                                        }) : "N/A"
+                                                    ]
+                                                }) : "No Retention"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(Row, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Key, {
+                                                children: "Legal Hold"
+                                            }),
+                                            /*#__PURE__*/ jsx(Value, {
+                                                children: "pending" === legalHoldStatus ? /*#__PURE__*/ jsx(Loader, {}) : "error" === legalHoldStatus ? "OFF" : legalHoldData?.LegalHold?.Status === "ON" ? "ON" : "OFF"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+};
+export { ObjectSummary };

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

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