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

package/dist/components/buckets/BucketLifecycleList.d.ts

@@ -0,0 +1,10 @@
+import type { LifecycleRule } from "@aws-sdk/client-s3";
+interface BucketLifecycleListProps {
+    bucketName: string;
+    lifecycleRules: LifecycleRule[];
+    lifecycleStatus?: "idle" | "loading" | "error" | "success";
+    onCreateRule?: () => void;
+    onEditRule?: (ruleId: string) => void;
+}
+export declare function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCreateRule, onEditRule, }: BucketLifecycleListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/buckets/BucketLifecycleList.js

@@ -0,0 +1,270 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ConstrainedText, FormattedDateTime, Icon, Stack, Tooltip, Wrap, spacing } from "@scality/core-ui";
+import { Box, Button, Table } from "@scality/core-ui/dist/next";
+import { useMemo } from "react";
+import { useDeleteBucketLifecycle, useSetBucketLifecycle } from "../../hooks/bucketConfiguration.js";
+import { DeleteBucketConfigRuleButton } from "./DeleteBucketConfigRuleButton.js";
+import { useTableRowSelection } from "../../hooks/useTableRowSelection.js";
+const pluralizeDays = (days)=>1 === days ? `${days} day` : `${days} days`;
+const formatActions = (rule)=>{
+    const actions = [];
+    if (rule.Expiration) {
+        if (rule.Expiration.Days) actions.push({
+            text: `Expire current (${pluralizeDays(rule.Expiration.Days)})`,
+            description: `Expire current versions of objects after ${pluralizeDays(rule.Expiration.Days)}`
+        });
+        else if (rule.Expiration.Date) actions.push({
+            text: "Expire current",
+            description: "Expire current versions of objects on date",
+            date: rule.Expiration.Date
+        });
+        else if (rule.Expiration.ExpiredObjectDeleteMarker) actions.push({
+            text: "Delete expired markers",
+            description: "Delete expired object delete markers"
+        });
+    }
+    if (rule.NoncurrentVersionExpiration?.NoncurrentDays) {
+        const keepText = rule.NoncurrentVersionExpiration.NewerNoncurrentVersions ? `, keep ${rule.NoncurrentVersionExpiration.NewerNoncurrentVersions}` : "";
+        const keepDescription = rule.NoncurrentVersionExpiration.NewerNoncurrentVersions ? `, keep ${rule.NoncurrentVersionExpiration.NewerNoncurrentVersions} newest versions` : "";
+        actions.push({
+            text: `Expire noncurrent (${pluralizeDays(rule.NoncurrentVersionExpiration.NoncurrentDays)}${keepText})`,
+            description: `Permanently delete noncurrent versions of objects after ${pluralizeDays(rule.NoncurrentVersionExpiration.NoncurrentDays)}${keepDescription}`
+        });
+    }
+    if (rule.Transitions && rule.Transitions.length > 0) rule.Transitions.forEach((transition)=>{
+        if (transition.Days) actions.push({
+            text: `Transition current (${pluralizeDays(transition.Days)})`,
+            description: `Transition current versions of objects after ${pluralizeDays(transition.Days)}`
+        });
+        else if (transition.Date) actions.push({
+            text: "Transition current",
+            description: "Transition current versions of objects on date",
+            date: transition.Date
+        });
+    });
+    if (rule.NoncurrentVersionTransitions && rule.NoncurrentVersionTransitions.length > 0) rule.NoncurrentVersionTransitions.forEach((transition)=>{
+        if (transition.NoncurrentDays) {
+            const keepText = transition.NewerNoncurrentVersions ? `, keep ${transition.NewerNoncurrentVersions}` : "";
+            const keepDescription = transition.NewerNoncurrentVersions ? `, keep ${transition.NewerNoncurrentVersions} newest versions` : "";
+            actions.push({
+                text: `Transition noncurrent (${pluralizeDays(transition.NoncurrentDays)}${keepText})`,
+                description: `Transition noncurrent versions of objects after ${pluralizeDays(transition.NoncurrentDays)}${keepDescription}`
+            });
+        }
+    });
+    if (rule.AbortIncompleteMultipartUpload?.DaysAfterInitiation) actions.push({
+        text: `Abort Incomplete MPU (${pluralizeDays(rule.AbortIncompleteMultipartUpload.DaysAfterInitiation)})`,
+        description: `Abort incomplete multipart uploads after ${pluralizeDays(rule.AbortIncompleteMultipartUpload.DaysAfterInitiation)}`
+    });
+    return actions.length > 0 ? actions : [
+        {
+            text: "-",
+            description: "-"
+        }
+    ];
+};
+function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCreateRule, onEditRule }) {
+    const updateLifecycleMutation = useSetBucketLifecycle();
+    const deleteLifecycleMutation = useDeleteBucketLifecycle();
+    const columns = useMemo(()=>[
+            {
+                Header: "Rule ID",
+                accessor: "ID",
+                id: "id",
+                Cell: ({ value })=>/*#__PURE__*/ jsx(ConstrainedText, {
+                        text: value || "-",
+                        lineClamp: 2
+                    }),
+                cellStyle: {
+                    flex: "1",
+                    width: "unset"
+                }
+            },
+            {
+                Header: "Status",
+                accessor: "Status",
+                id: "status",
+                Cell: ({ value })=>{
+                    const statusText = "Enabled" === value ? "Active" : "Disabled" === value ? "Inactive" : value;
+                    return /*#__PURE__*/ jsx("span", {
+                        children: statusText || "-"
+                    });
+                },
+                cellStyle: {
+                    width: "unset",
+                    flex: "0.5"
+                }
+            },
+            {
+                Header: "Actions",
+                accessor: "Actions",
+                id: "actions",
+                Cell: ({ value })=>{
+                    if (!value || 0 === value.length || 1 === value.length && "-" === value[0].text) return /*#__PURE__*/ jsx("span", {
+                        children: "-"
+                    });
+                    const firstAction = value[0];
+                    const remainingCount = value.length - 1;
+                    const renderWithDate = (text, date)=>{
+                        if (date) return /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                text,
+                                " (",
+                                /*#__PURE__*/ jsx(FormattedDateTime, {
+                                    format: "date",
+                                    value: "string" == typeof date ? new Date(date) : date
+                                }),
+                                ")"
+                            ]
+                        });
+                        return text;
+                    };
+                    const renderAction = (action)=>renderWithDate(action.text, action.date);
+                    const renderDescription = (action)=>renderWithDate(action.description, action.date);
+                    const multiActionTooltip = /*#__PURE__*/ jsx("ul", {
+                        style: {
+                            margin: 0,
+                            paddingLeft: "1.5rem"
+                        },
+                        children: value.map((action, index)=>/*#__PURE__*/ jsx("li", {
+                                children: renderDescription(action)
+                            }, index))
+                    });
+                    if (value.length > 1) return /*#__PURE__*/ jsxs(Stack, {
+                        gap: "r4",
+                        direction: "horizontal",
+                        children: [
+                            /*#__PURE__*/ jsxs("span", {
+                                children: [
+                                    renderAction(firstAction),
+                                    ", +",
+                                    remainingCount
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Tooltip, {
+                                overlay: multiActionTooltip,
+                                placement: "top",
+                                overlayStyle: {
+                                    maxWidth: "30rem"
+                                },
+                                children: /*#__PURE__*/ jsx("span", {
+                                    style: {
+                                        cursor: "help"
+                                    },
+                                    children: /*#__PURE__*/ jsx(Icon, {
+                                        name: "Info",
+                                        size: "sm"
+                                    })
+                                })
+                            })
+                        ]
+                    });
+                    return /*#__PURE__*/ jsx("span", {
+                        children: renderAction(firstAction)
+                    });
+                },
+                cellStyle: {
+                    width: "unset",
+                    flex: "1.5"
+                }
+            },
+            {
+                Header: "",
+                accessor: "ID",
+                id: "operations",
+                cellStyle: {
+                    flex: "0.5",
+                    textAlign: "right",
+                    paddingRight: spacing.r16,
+                    width: "unset"
+                },
+                Cell: ({ value })=>/*#__PURE__*/ jsxs(Box, {
+                        display: "flex",
+                        gap: spacing.r8,
+                        justifyContent: "flex-end",
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                icon: /*#__PURE__*/ jsx(Icon, {
+                                    name: "Edit"
+                                }),
+                                variant: "secondary",
+                                type: "button",
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    onEditRule?.(value);
+                                },
+                                "aria-label": "Edit rule",
+                                tooltip: {
+                                    overlay: "Edit rule"
+                                }
+                            }),
+                            /*#__PURE__*/ jsx(DeleteBucketConfigRuleButton, {
+                                bucketName: bucketName,
+                                ruleId: value,
+                                rules: lifecycleRules,
+                                ruleType: "lifecycle",
+                                updateMutation: updateLifecycleMutation,
+                                deleteMutation: deleteLifecycleMutation,
+                                buildUpdateInput: (remainingRules)=>({
+                                        LifecycleConfiguration: {
+                                            Rules: remainingRules
+                                        }
+                                    }),
+                                successMessage: "Lifecycle rule deleted successfully",
+                                errorMessage: "Failed to delete lifecycle rule"
+                            })
+                        ]
+                    })
+            }
+        ], [
+        bucketName,
+        lifecycleRules,
+        onEditRule
+    ]);
+    const tableData = useMemo(()=>lifecycleRules.map((rule)=>({
+                ID: rule.ID || "-",
+                Status: rule.Status || "Disabled",
+                Actions: formatActions(rule),
+                rule
+            })), [
+        lifecycleRules
+    ]);
+    const { selectedId, onRowSelected } = useTableRowSelection(tableData);
+    return /*#__PURE__*/ jsxs(Table, {
+        columns: columns,
+        data: tableData,
+        status: lifecycleStatus,
+        defaultSortingKey: "id",
+        entityName: {
+            en: {
+                singular: "lifecycle rule",
+                plural: "lifecycle rules"
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx(Wrap, {
+                padding: spacing.r16,
+                children: /*#__PURE__*/ jsx(Box, {
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    children: /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(Icon, {
+                            name: "Create-add"
+                        }),
+                        label: "Create Rule",
+                        variant: "primary",
+                        onClick: onCreateRule,
+                        type: "button"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
+                rowHeight: "h48",
+                separationLineVariant: "backgroundLevel1",
+                selectedId: selectedId?.toString(),
+                onRowSelected: onRowSelected
+            })
+        ]
+    });
+}
+export { BucketLifecycleList };

package/dist/components/buckets/BucketList.d.ts

@@ -0,0 +1,15 @@
+import type { Bucket } from "@aws-sdk/client-s3";
+import type { Column } from "@scality/core-ui/dist/components/tablev2/Tablev2.component";
+interface BucketListProps<TData extends Bucket & Record<string, unknown> = Bucket & Record<string, unknown>> {
+    buckets: Bucket[];
+    bucketStatus?: "idle" | "loading" | "error" | "success";
+    selectedBucketName?: string | null;
+    onBucketSelect?: (bucketName: string) => void;
+    onCreateBucket?: () => void;
+    onNavigateToBucket?: (bucketName: string) => void;
+    renderBucketLocation?: (bucketName: string) => React.ReactNode;
+    additionalColumns?: Column<TData>[];
+    transformBucketData?: (bucket: Bucket) => TData;
+}
+export declare function BucketList<TData extends Bucket & Record<string, unknown> = Bucket & Record<string, unknown>>({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket, renderBucketLocation, additionalColumns, transformBucketData, }: BucketListProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/buckets/BucketList.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ConstrainedText, FormattedDateTime, Icon, Link, Wrap, spacing } from "@scality/core-ui";
+import { Box, Button, Table } from "@scality/core-ui/dist/next";
+import { useMemo } from "react";
+const SEARCH_QUERY_PARAM = "search";
+function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket, renderBucketLocation, additionalColumns, transformBucketData }) {
+    const columns = useMemo(()=>{
+        const baseColumns = [
+            {
+                Header: "Bucket Name",
+                accessor: "Name",
+                id: "name",
+                Cell: ({ value, row })=>{
+                    const name = value || row.original?.Name;
+                    if (!name) return /*#__PURE__*/ jsx("span", {
+                        children: "-"
+                    });
+                    return /*#__PURE__*/ jsx(ConstrainedText, {
+                        text: /*#__PURE__*/ jsx(Link, {
+                            onClick: (e)=>{
+                                e.stopPropagation();
+                                onNavigateToBucket?.(name);
+                            },
+                            children: name
+                        }),
+                        lineClamp: 2
+                    });
+                },
+                cellStyle: {
+                    flex: "1",
+                    width: "unset"
+                }
+            },
+            {
+                Header: "Storage Location",
+                accessor: "Name",
+                id: "location",
+                Cell ({ value }) {
+                    return renderBucketLocation ? renderBucketLocation(value) : /*#__PURE__*/ jsx("span", {
+                        children: "-"
+                    });
+                },
+                cellStyle: {
+                    width: "unset",
+                    flex: "1.2"
+                }
+            }
+        ];
+        if (additionalColumns) baseColumns.push(...additionalColumns);
+        baseColumns.push({
+            Header: "Created on",
+            accessor: "CreationDate",
+            id: "date",
+            cellStyle: {
+                flex: "1",
+                textAlign: "right",
+                paddingRight: spacing.r16,
+                width: "unset"
+            },
+            Cell: ({ value, row })=>{
+                const date = value || row.original?.CreationDate;
+                if (!date) return /*#__PURE__*/ jsx("span", {
+                    children: "-"
+                });
+                return /*#__PURE__*/ jsx(FormattedDateTime, {
+                    format: "date-time-second",
+                    value: new Date(date)
+                });
+            }
+        });
+        return baseColumns;
+    }, [
+        onNavigateToBucket,
+        renderBucketLocation,
+        additionalColumns
+    ]);
+    const tableData = useMemo(()=>buckets.map((bucket)=>{
+            if (transformBucketData) return transformBucketData(bucket);
+            const { Name, CreationDate, ...rest } = bucket;
+            return {
+                Name,
+                CreationDate,
+                ...rest
+            };
+        }), [
+        buckets,
+        transformBucketData
+    ]);
+    const selectedId = useMemo(()=>{
+        if (buckets && selectedBucketName) return buckets.findIndex((bucket)=>bucket.Name === selectedBucketName);
+        return null;
+    }, [
+        selectedBucketName,
+        buckets
+    ]);
+    return /*#__PURE__*/ jsxs(Table, {
+        columns: columns,
+        data: tableData,
+        status: bucketStatus,
+        defaultSortingKey: "CreationDate",
+        entityName: {
+            en: {
+                singular: "bucket",
+                plural: "buckets"
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsxs(Wrap, {
+                padding: spacing.r16,
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        gap: spacing.r4,
+                        children: /*#__PURE__*/ jsx(Table.SearchWithQueryParams, {
+                            queryParams: SEARCH_QUERY_PARAM
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        gap: "r16",
+                        children: /*#__PURE__*/ jsx(Button, {
+                            icon: /*#__PURE__*/ jsx(Icon, {
+                                name: "Create-add"
+                            }),
+                            label: "Create Bucket",
+                            variant: "primary",
+                            onClick: onCreateBucket,
+                            type: "submit"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
+                rowHeight: "h40",
+                selectedId: selectedId?.toString(),
+                onRowSelected: (row)=>{
+                    const isSelected = selectedBucketName === row.original.Name;
+                    if (!isSelected && row.original.Name) onBucketSelect?.(row.original.Name);
+                },
+                separationLineVariant: "backgroundLevel1"
+            })
+        ]
+    });
+}
+export { BucketList };

package/dist/components/buckets/BucketLocation.d.ts

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

package/dist/components/buckets/BucketLocation.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { useGetBucketLocation } from "../../hooks/index.js";
+import { Loader } from "@scality/core-ui";
+const BucketLocation = ({ bucketName })=>{
+    const { data: bucketLocation, status } = useGetBucketLocation({
+        Bucket: bucketName
+    });
+    if ("pending" === status) return /*#__PURE__*/ jsx(Loader, {});
+    if ("error" === status) return /*#__PURE__*/ jsx("div", {
+        children: "Error"
+    });
+    return /*#__PURE__*/ jsx("div", {
+        children: bucketLocation?.LocationConstraint || "us-east-1"
+    });
+};
+export { BucketLocation };

package/dist/components/buckets/BucketOverview.d.ts

@@ -0,0 +1,88 @@
+import React from "react";
+interface BucketOverviewContextValue {
+    bucketName: string;
+}
+/**
+ * Context for BucketOverview component.
+ *
+ * **Important**: Always use `useBucketOverviewContext()` hook instead of accessing this context directly.
+ * The hook provides proper error handling if the context is not available.
+ *
+ * This context is exported for testing purposes only.
+ */
+export declare const BucketOverviewContext: React.Context<BucketOverviewContextValue | null>;
+export declare function useBucketOverviewContext(): BucketOverviewContextValue;
+interface BucketOverviewProps {
+    bucketName: string;
+    children: React.ReactNode;
+}
+interface ActionsProps {
+    onEmptyBucket?: () => void;
+    onDeleteBucket?: () => void;
+    renderEmptyButton?: (bucketName: string) => React.ReactNode;
+    renderDeleteButton?: (bucketName: string) => React.ReactNode;
+    isEmptyBucketDisabled?: boolean;
+    isDeleteBucketDisabled?: boolean;
+}
+declare const Actions: React.FC<ActionsProps>;
+interface SectionProps {
+    title: string;
+    children: React.ReactNode;
+}
+declare const Section: React.FC<SectionProps>;
+interface FieldProps {
+    label: string;
+    value?: React.ReactNode;
+    loading?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    children?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+declare const Field: React.FC<FieldProps>;
+interface SectionsProps {
+    children: React.ReactNode;
+}
+declare const Sections: React.FC<SectionsProps>;
+interface GeneralSectionProps {
+    nameField?: React.ReactNode;
+    versioningField?: React.ReactNode;
+    locationField?: React.ReactNode;
+    renderName?: (bucketName: string) => React.ReactNode;
+    renderVersioning?: (bucketName: string) => React.ReactNode;
+    renderLocation?: (bucketName: string) => React.ReactNode;
+}
+declare const GeneralSection: React.FC<GeneralSectionProps>;
+interface DataProtectionSectionProps {
+    objectLockField?: React.ReactNode;
+    defaultRetentionField?: React.ReactNode;
+    renderObjectLock?: (bucketName: string) => React.ReactNode;
+    renderDefaultRetention?: (bucketName: string) => React.ReactNode;
+}
+declare const DataProtectionSection: React.FC<DataProtectionSectionProps>;
+interface PermissionsSectionProps {
+    onEditPolicy?: (bucketName: string) => void;
+    ownerField?: React.ReactNode;
+    aclField?: React.ReactNode;
+    corsField?: React.ReactNode;
+    publicField?: React.ReactNode;
+    bucketPolicyField?: React.ReactNode;
+    renderOwner?: (bucketName: string) => React.ReactNode;
+    renderAcl?: (bucketName: string) => React.ReactNode;
+    renderCors?: (bucketName: string) => React.ReactNode;
+    renderPublic?: (bucketName: string) => React.ReactNode;
+    renderBucketPolicy?: (bucketName: string, onEditPolicy?: (name: string) => void) => React.ReactNode;
+}
+declare const PermissionsSection: React.FC<PermissionsSectionProps>;
+type BucketOverviewComponent = React.FC<BucketOverviewProps> & {
+    Actions: typeof Actions;
+    Sections: typeof Sections;
+    Section: typeof Section;
+    Field: typeof Field;
+    GeneralSection: typeof GeneralSection;
+    DataProtectionSection: typeof DataProtectionSection;
+    PermissionsSection: typeof PermissionsSection;
+};
+declare const BucketOverview: BucketOverviewComponent;
+export { BucketOverview };
+export { Section as BucketOverviewSection, Field as BucketOverviewField };