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

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

@@ -0,0 +1,300 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Icon, Loader, Text, spacing } from "@scality/core-ui";
+import { Box, Button, Input } from "@scality/core-ui/dist/next";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { useDeleteObjectTagging, useObjectTagging, useSetObjectTagging } from "../../../hooks/index.js";
+const MAX_TAGS_PER_OBJECT = 10;
+const MAX_TAG_KEY_LENGTH = 128;
+const MAX_TAG_VALUE_LENGTH = 256;
+const ObjectTags = ({ bucketName, objectKey, versionId })=>{
+    const getVersionParams = ()=>versionId ? {
+            VersionId: versionId
+        } : {};
+    const { data: tagsData, status: tagsStatus } = useObjectTagging({
+        Bucket: bucketName,
+        Key: objectKey,
+        ...getVersionParams()
+    });
+    const setTaggingMutation = useSetObjectTagging();
+    const deleteTaggingMutation = useDeleteObjectTagging();
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [lastUsedMutation, setLastUsedMutation] = useState(null);
+    const { control, handleSubmit, setValue, formState: { errors, isValid, isSubmitting } } = useForm({
+        mode: "onChange",
+        defaultValues: {
+            tags: []
+        }
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "tags"
+    });
+    useEffect(()=>{
+        setIsInitialized(false);
+        setLastUsedMutation(null);
+        setTaggingMutation.reset();
+        deleteTaggingMutation.reset();
+    }, [
+        bucketName,
+        objectKey,
+        versionId
+    ]);
+    useEffect(()=>{
+        if (tagsData && "success" === tagsStatus && !isInitialized) {
+            const tags = tagsData.TagSet || [];
+            const rows = tags.map((tag)=>({
+                    key: tag.Key || "",
+                    value: tag.Value || ""
+                }));
+            setValue("tags", rows);
+            setIsInitialized(true);
+        }
+    }, [
+        tagsData,
+        tagsStatus,
+        setValue,
+        isInitialized
+    ]);
+    const onSubmit = async (data)=>{
+        try {
+            if (0 === data.tags.length) {
+                setLastUsedMutation("delete");
+                await deleteTaggingMutation.mutateAsync({
+                    Bucket: bucketName,
+                    Key: objectKey,
+                    ...getVersionParams()
+                });
+            } else {
+                setLastUsedMutation("set");
+                await setTaggingMutation.mutateAsync({
+                    Bucket: bucketName,
+                    Key: objectKey,
+                    ...getVersionParams(),
+                    Tagging: {
+                        TagSet: data.tags.map((row)=>({
+                                Key: row.key.trim(),
+                                Value: row.value.trim()
+                            }))
+                    }
+                });
+            }
+        } catch (error) {
+            console.error("Failed to save tags:", error);
+        }
+    };
+    if ("pending" === tagsStatus) return /*#__PURE__*/ jsx(Box, {
+        display: "flex",
+        justifyContent: "center",
+        padding: spacing.r32,
+        children: /*#__PURE__*/ jsx(Loader, {})
+    });
+    if ("error" === tagsStatus) return /*#__PURE__*/ jsx(Box, {
+        padding: spacing.r16,
+        children: /*#__PURE__*/ jsx(Text, {
+            color: "statusCritical",
+            children: "Error loading tags"
+        })
+    });
+    return /*#__PURE__*/ jsx(Box, {
+        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 Tags"
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: spacing.r8,
+                            children: [
+                                "set" === lastUsedMutation && setTaggingMutation.isSuccess && /*#__PURE__*/ jsx(Text, {
+                                    color: "statusHealthy",
+                                    children: "Saved successfully"
+                                }),
+                                "delete" === lastUsedMutation && deleteTaggingMutation.isSuccess && /*#__PURE__*/ jsx(Text, {
+                                    color: "statusHealthy",
+                                    children: "Saved successfully"
+                                }),
+                                "set" === lastUsedMutation && setTaggingMutation.isError && /*#__PURE__*/ jsx(Text, {
+                                    color: "statusCritical",
+                                    children: setTaggingMutation.error?.message || "Failed to save"
+                                }),
+                                "delete" === lastUsedMutation && deleteTaggingMutation.isError && /*#__PURE__*/ jsx(Text, {
+                                    color: "statusCritical",
+                                    children: deleteTaggingMutation.error?.message || "Failed to save"
+                                }),
+                                /*#__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: [
+                        fields.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"
+                                    })
+                                })
+                            ]
+                        }),
+                        0 === fields.length && "success" === tagsStatus && /*#__PURE__*/ jsx(Box, {
+                            padding: spacing.r16,
+                            children: /*#__PURE__*/ jsx(Text, {
+                                color: "textSecondary",
+                                children: "No tags configured. Add tags to categorize this object."
+                            })
+                        }),
+                        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: `tags.${index}.key`,
+                                                rules: {
+                                                    required: "Key is required",
+                                                    maxLength: {
+                                                        value: MAX_TAG_KEY_LENGTH,
+                                                        message: `Key must be ${MAX_TAG_KEY_LENGTH} characters or less`
+                                                    },
+                                                    validate: (value, formValues)=>{
+                                                        if (!value.trim()) return "Key cannot be empty or whitespace only";
+                                                        const keys = formValues.tags.map((t)=>t.key.trim());
+                                                        const duplicates = keys.filter((k)=>k === value.trim());
+                                                        return duplicates.length > 1 ? `Duplicate key "${value.trim()}"` : true;
+                                                    }
+                                                },
+                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
+                                                        id: `key-${field.id}`,
+                                                        value: value,
+                                                        onChange: onChange,
+                                                        placeholder: "Key",
+                                                        "aria-label": `Tag ${index + 1} key`
+                                                    })
+                                            }),
+                                            /*#__PURE__*/ jsx(Text, {
+                                                color: "textSecondary",
+                                                children: ":"
+                                            }),
+                                            /*#__PURE__*/ jsx(Controller, {
+                                                control: control,
+                                                name: `tags.${index}.value`,
+                                                rules: {
+                                                    required: "Value is required",
+                                                    maxLength: {
+                                                        value: MAX_TAG_VALUE_LENGTH,
+                                                        message: `Value must be ${MAX_TAG_VALUE_LENGTH} characters or less`
+                                                    },
+                                                    validate: (value)=>{
+                                                        if (!value.trim()) return "Value cannot be empty or whitespace only";
+                                                        return true;
+                                                    }
+                                                },
+                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
+                                                        id: `value-${field.id}`,
+                                                        value: value,
+                                                        onChange: onChange,
+                                                        placeholder: "Value",
+                                                        "aria-label": `Tag ${index + 1} value`
+                                                    })
+                                            }),
+                                            /*#__PURE__*/ jsx(Button, {
+                                                variant: "secondary",
+                                                icon: /*#__PURE__*/ jsx(Icon, {
+                                                    name: "Delete"
+                                                }),
+                                                onClick: ()=>remove(index),
+                                                "aria-label": "Delete row",
+                                                type: "button"
+                                            })
+                                        ]
+                                    }),
+                                    (errors.tags?.[index]?.key || errors.tags?.[index]?.value) && /*#__PURE__*/ jsxs(Box, {
+                                        paddingTop: spacing.r4,
+                                        children: [
+                                            errors.tags?.[index]?.key && /*#__PURE__*/ jsx(Text, {
+                                                color: "statusCritical",
+                                                children: errors.tags[index]?.key?.message
+                                            }),
+                                            errors.tags?.[index]?.value && /*#__PURE__*/ jsx(Text, {
+                                                color: "statusCritical",
+                                                children: errors.tags[index]?.value?.message
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, field.id)),
+                        /*#__PURE__*/ jsxs(Box, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    variant: "secondary",
+                                    icon: /*#__PURE__*/ jsx(Icon, {
+                                        name: "Create-add"
+                                    }),
+                                    label: "Add Tag",
+                                    onClick: ()=>append({
+                                            key: "",
+                                            value: ""
+                                        }),
+                                    type: "button",
+                                    disabled: fields.length >= MAX_TAGS_PER_OBJECT
+                                }),
+                                fields.length >= MAX_TAGS_PER_OBJECT && /*#__PURE__*/ jsx(Box, {
+                                    paddingTop: spacing.r8,
+                                    children: /*#__PURE__*/ jsxs(Text, {
+                                        color: "statusWarning",
+                                        children: [
+                                            "Maximum ",
+                                            MAX_TAGS_PER_OBJECT,
+                                            " tags allowed per object"
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { ObjectTags };

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

@@ -0,0 +1,9 @@
+import { TableItem } from "../ObjectList";
+export interface ObjectCommonProps {
+    bucketName: string;
+    objectKey: string;
+    versionId?: string;
+}
+export declare const ObjectDetails: ({ item }: {
+    item: TableItem;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { useParams } from "react-router-dom";
+import { Text } from "@scality/core-ui";
+import { Tabs } from "@scality/core-ui/dist/next";
+import { ObjectSummary } from "./ObjectSummary.js";
+import { ObjectMetadata } from "./ObjectMetadata.js";
+import { ObjectTags } from "./ObjectTags.js";
+const ObjectDetails = ({ item })=>{
+    const { bucketName } = useParams();
+    if (!bucketName || !item.Key) return /*#__PURE__*/ jsx(Text, {
+        children: "No object selected"
+    });
+    if ("deleteMarker" === item.type) return /*#__PURE__*/ jsx(Text, {
+        children: 'A "Delete Marker" is selected'
+    });
+    const versionId = "version" === item.type ? item.VersionId : void 0;
+    const mainTabs = [
+        {
+            label: "Summary",
+            Component: ObjectSummary,
+            query: ""
+        },
+        {
+            label: "Metadata",
+            Component: ObjectMetadata,
+            query: "metadata"
+        },
+        {
+            label: "Tags",
+            Component: ObjectTags,
+            query: "tags"
+        }
+    ];
+    return /*#__PURE__*/ jsx(Tabs, {
+        children: mainTabs.map((tab)=>/*#__PURE__*/ jsx(Tabs.Tab, {
+                label: tab.label,
+                path: "",
+                query: {
+                    tab: tab.query
+                },
+                children: /*#__PURE__*/ jsx(tab.Component, {
+                    bucketName: bucketName,
+                    objectKey: item.Key,
+                    versionId: versionId
+                })
+            }, tab.query || "summary"))
+    });
+};
+export { ObjectDetails };

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

@@ -0,0 +1,40 @@
+import type { _Object, DeleteMarkerEntry, ObjectVersion } from "@aws-sdk/client-s3";
+type FolderItem = {
+    Key: string;
+    displayName: string;
+    type: "folder";
+    LastModified?: undefined;
+    Size?: undefined;
+    StorageClass?: undefined;
+    VersionId?: undefined;
+    IsLatest?: undefined;
+};
+type ObjectItem = _Object & {
+    displayName: string;
+    type: "object";
+    IsLatest?: boolean;
+    VersionId?: string;
+};
+type VersionItem = ObjectVersion & {
+    displayName: string;
+    type: "version";
+    IsLatest?: boolean;
+};
+type DeleteMarkerItem = DeleteMarkerEntry & {
+    displayName: string;
+    type: "deleteMarker";
+    isDeleteMarker: true;
+    IsLatest?: boolean;
+    Size?: number;
+};
+export type TableItem = (FolderItem | ObjectItem | VersionItem | DeleteMarkerItem) & {
+    [key: string]: unknown;
+};
+interface ObjectListProps {
+    bucketName: string;
+    prefix: string;
+    onObjectSelect: (object: TableItem) => void;
+    onPrefixChange: (newPrefix: string) => void;
+}
+export declare const ObjectList: ({ bucketName, prefix, onObjectSelect, onPrefixChange, }: ObjectListProps) => import("react/jsx-runtime").JSX.Element;
+export {};