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

package/dist/components/providers/DataBrowserProvider.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { QueryClient } from "@tanstack/react-query";
+import { GetConfigFunction } from "../../types";
+import { CoreUITheme } from "@scality/core-ui/dist/style/theme";
+export interface DataBrowserContextValue {
+    getS3Config: GetConfigFunction;
+    theme: CoreUITheme;
+}
+export declare const DataBrowserContext: React.Context<DataBrowserContextValue | null>;
+export declare const useDataBrowserContext: () => DataBrowserContextValue;
+export declare const useDataBrowserTheme: () => CoreUITheme;
+interface DataBrowserProviderProps {
+    children: React.ReactNode;
+    queryClient?: QueryClient;
+    enableDevtools?: boolean;
+    getS3Config?: GetConfigFunction;
+    theme?: CoreUITheme;
+}
+export declare const DataBrowserProvider: React.FC<DataBrowserProviderProps>;
+export {};

package/dist/components/providers/DataBrowserProvider.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+const DataBrowserContext = /*#__PURE__*/ createContext(null);
+const useDataBrowserContext = ()=>{
+    const context = useContext(DataBrowserContext);
+    if (!context) throw new Error("useDataBrowserContext must be used within a DataBrowserProvider component");
+    return context;
+};
+const useDataBrowserTheme = ()=>{
+    const { theme } = useDataBrowserContext();
+    return theme;
+};
+const defaultQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 300000,
+            retry: 2
+        }
+    }
+});
+const DataBrowserProvider = ({ children, queryClient = defaultQueryClient, enableDevtools = "development" === process.env.NODE_ENV, getS3Config, theme })=>{
+    const content = /*#__PURE__*/ jsxs(QueryClientProvider, {
+        client: queryClient,
+        children: [
+            children,
+            enableDevtools && /*#__PURE__*/ jsx(ReactQueryDevtools, {
+                initialIsOpen: false
+            })
+        ]
+    });
+    if (getS3Config && theme) return /*#__PURE__*/ jsx(DataBrowserContext.Provider, {
+        value: {
+            getS3Config,
+            theme
+        },
+        children: content
+    });
+    return content;
+};
+export { DataBrowserContext, DataBrowserProvider, useDataBrowserContext, useDataBrowserTheme };

package/dist/components/search/MetadataSearch.d.ts

@@ -0,0 +1,5 @@
+type MetadataSearchProps = {
+    isError: boolean;
+};
+export declare const MetadataSearch: ({ isError }: MetadataSearchProps) => import("react/jsx-runtime").JSX.Element;
+export default MetadataSearch;

package/dist/components/search/MetadataSearch.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePrefixWithSlash, useQueryParams } from "../../utils/hooks.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { SearchContainer, SearchInputContainer, searchIcon } from "../ui/Search.elements.js";
+import { Box, Button, Input } from "@scality/core-ui/dist/next";
+import { Icon } from "@scality/core-ui";
+import { SearchHints } from "./SearchHints.js";
+const METADATA_SEARCH_HINT_ITEMS = [
+    {
+        label: 'files with extension ".pdf"',
+        query: "key like /pdf$/"
+    },
+    {
+        label: "files bigger than 1MB",
+        query: "content-length > 1000000"
+    },
+    {
+        label: "file names that contain scality (case insensitive)",
+        query: "key like /scality/i"
+    },
+    {
+        label: "files with metadata field color set to green",
+        query: 'x-amz-meta-color="green"'
+    },
+    {
+        label: "files tagged with color blue",
+        query: "tags.color=blue"
+    },
+    {
+        label: "PDF files (from content-type)",
+        query: "content-type=application/pdf"
+    },
+    {
+        label: "file names that contain the word Report (case sensitive)",
+        query: "key like Report"
+    },
+    {
+        label: "files waiting to be replicated",
+        query: 'replication-status="PENDING"'
+    }
+];
+const MetadataSearch = ({ isError })=>{
+    const navigate = useNavigate();
+    const location = useLocation();
+    const query = useQueryParams();
+    const searchInput = query.get("metadatasearch");
+    const [inputText, setInputText] = useState(searchInput || "");
+    const [hintsShown, setHintsShown] = useState(false);
+    const prefixWithSlash = usePrefixWithSlash();
+    const inputRef = useRef(null);
+    const hintsRef = useRef(null);
+    const handleSubmit = useCallback((e)=>{
+        e.preventDefault();
+        if (!inputText || prefixWithSlash) return;
+        const newQuery = new URLSearchParams(location.search);
+        newQuery.set("metadatasearch", inputText);
+        navigate(`${location.pathname}?${newQuery.toString()}`);
+    }, [
+        inputText,
+        prefixWithSlash,
+        location,
+        navigate
+    ]);
+    const handleChange = useCallback((e)=>{
+        setInputText(e.target.value);
+    }, []);
+    const handleHintClicked = useCallback((queryText)=>{
+        setInputText(queryText);
+        setHintsShown(false);
+    }, []);
+    const handleInputClick = useCallback(()=>{
+        if (inputText || hintsShown) return;
+        setHintsShown(true);
+    }, [
+        inputText,
+        hintsShown
+    ]);
+    useEffect(()=>{
+        const handleClickOutside = (event)=>{
+            if (hintsShown && inputRef.current && hintsRef.current && !inputRef.current.contains(event.target) && !hintsRef.current.contains(event.target)) setHintsShown(false);
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return ()=>{
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [
+        hintsShown
+    ]);
+    const reset = useCallback(()=>{
+        setHintsShown(false);
+        setInputText("");
+        const newQuery = new URLSearchParams(location.search);
+        newQuery.delete("metadatasearch");
+        navigate(`${location.pathname}?${newQuery.toString()}`);
+    }, [
+        location,
+        navigate
+    ]);
+    const handleHintClickWithFocus = useCallback((query)=>{
+        handleHintClicked(query);
+        if (inputRef.current) inputRef.current.focus();
+    }, [
+        handleHintClicked
+    ]);
+    const isSearchDisabled = !inputText || !!prefixWithSlash;
+    const shouldShowHints = hintsShown && !inputText;
+    const shouldShowResetButton = !!inputText;
+    const leftIcon = searchIcon({
+        isMetadata: !!searchInput,
+        isError
+    });
+    return /*#__PURE__*/ jsxs(SearchContainer, {
+        isHidden: !!prefixWithSlash,
+        onSubmit: handleSubmit,
+        children: [
+            /*#__PURE__*/ jsxs(SearchInputContainer, {
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        id: "metadata-search-input",
+                        ref: inputRef,
+                        onChange: handleChange,
+                        placeholder: "Metadata Search",
+                        value: inputText,
+                        onClick: handleInputClick,
+                        leftIcon: leftIcon.name,
+                        leftIconColor: leftIcon.color
+                    }),
+                    shouldShowResetButton && /*#__PURE__*/ jsx(Box, {
+                        position: "absolute",
+                        right: "1px",
+                        top: "0px",
+                        children: /*#__PURE__*/ jsx(Button, {
+                            icon: /*#__PURE__*/ jsx(Icon, {
+                                name: "Close"
+                            }),
+                            tooltip: {
+                                overlay: "Reset search"
+                            },
+                            onClick: reset,
+                            "aria-label": "Clear search input"
+                        })
+                    })
+                ]
+            }),
+            shouldShowHints && /*#__PURE__*/ jsx(SearchHints, {
+                ref: hintsRef,
+                hints: METADATA_SEARCH_HINT_ITEMS,
+                onHintClick: handleHintClickWithFocus
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                variant: "primary",
+                type: "submit",
+                label: "Search",
+                disabled: isSearchDisabled,
+                "aria-label": "Execute metadata search"
+            })
+        ]
+    });
+};
+const search_MetadataSearch = MetadataSearch;
+export { MetadataSearch, search_MetadataSearch as default };

package/dist/components/search/SearchHints.d.ts

@@ -0,0 +1,8 @@
+export interface SearchHintItem {
+    label: string;
+    query: string;
+}
+export declare const SearchHints: import("react").ForwardRefExoticComponent<{
+    hints: SearchHintItem[];
+    onHintClick: (query: string) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/search/SearchHints.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { HintItem, HintsContainer, HintsTitle } from "../ui/Search.elements.js";
+const SearchHints = /*#__PURE__*/ forwardRef(({ hints, onHintClick }, ref)=>/*#__PURE__*/ jsxs(HintsContainer, {
+        ref: ref,
+        role: "listbox",
+        "aria-label": "Suggestions",
+        children: [
+            /*#__PURE__*/ jsx(HintsTitle, {
+                children: "Suggestions"
+            }),
+            hints.map((item, index)=>/*#__PURE__*/ jsx(HintItem, {
+                    onClick: ()=>onHintClick(item.query),
+                    role: "option",
+                    tabIndex: 0,
+                    children: item.label
+                }, index))
+        ]
+    }));
+SearchHints.displayName = "SearchHints";
+export { SearchHints };

package/dist/components/ui/ArrayFieldActions.d.ts

@@ -0,0 +1,36 @@
+export type ArrayFieldActionsProps = {
+    /**
+     * Callback when remove button is clicked
+     */
+    onRemove: () => void;
+    /**
+     * Callback when add button is clicked
+     * Only called if showAdd is true
+     */
+    onAdd: () => void;
+    /**
+     * Whether the remove button should be enabled
+     */
+    canRemove: boolean;
+    /**
+     * Whether the add button should be enabled
+     * @default true
+     */
+    canAdd?: boolean;
+    /**
+     * Whether to show the add button
+     * Typically true only for the last item in the array
+     */
+    showAdd: boolean;
+    /**
+     * Aria label for remove button
+     * @default "Remove"
+     */
+    removeLabel?: string;
+    /**
+     * Aria label for add button
+     * @default "Add"
+     */
+    addLabel?: string;
+};
+export declare function ArrayFieldActions({ onRemove, onAdd, canRemove, canAdd, showAdd, removeLabel, addLabel, }: ArrayFieldActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/ArrayFieldActions.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button } from "@scality/core-ui/dist/next";
+import { Icon, spacing } from "@scality/core-ui";
+import { convertSizeToRem } from "@scality/core-ui/dist/components/inputv2/inputv2";
+function ArrayFieldActions({ onRemove, onAdd, canRemove, canAdd = true, showAdd, removeLabel = "Remove", addLabel = "Add" }) {
+    return /*#__PURE__*/ jsxs(Box, {
+        display: "flex",
+        width: convertSizeToRem("1/2"),
+        gap: spacing.r8,
+        justifyContent: "flex-start",
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Remove-minus"
+                }),
+                variant: "danger",
+                type: "button",
+                onClick: onRemove,
+                "aria-label": removeLabel,
+                disabled: !canRemove,
+                tooltip: {
+                    overlay: removeLabel,
+                    placement: "top"
+                }
+            }),
+            showAdd && /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Add-plus"
+                }),
+                variant: "outline",
+                type: "button",
+                onClick: onAdd,
+                "aria-label": addLabel,
+                tooltip: {
+                    overlay: addLabel,
+                    placement: "top"
+                },
+                disabled: !canAdd
+            })
+        ]
+    });
+}
+export { ArrayFieldActions };

package/dist/components/ui/ConfirmDeleteRuleModal.d.ts

@@ -0,0 +1,16 @@
+interface ConfirmDeleteRuleModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Rule ID to display in confirmation message */
+    ruleId: string;
+    /** Type of rule (e.g., "lifecycle", "replication") */
+    ruleType: "lifecycle" | "replication";
+    /** Whether deletion is in progress */
+    isDeleting: boolean;
+    /** Callback when user confirms deletion */
+    onConfirm: () => void;
+    /** Callback when user cancels deletion */
+    onCancel: () => void;
+}
+export declare function ConfirmDeleteRuleModal({ isOpen, ruleId, ruleType, isDeleting, onConfirm, onCancel, }: ConfirmDeleteRuleModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/ConfirmDeleteRuleModal.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader, Modal, Stack, Wrap } from "@scality/core-ui";
+import { Button } from "@scality/core-ui/dist/next";
+function ConfirmDeleteRuleModal({ isOpen, ruleId, ruleType, isDeleting, onConfirm, onCancel }) {
+    const ruleTypeLabel = "lifecycle" === ruleType ? "Lifecycle" : "Replication";
+    return /*#__PURE__*/ jsxs(Modal, {
+        close: onCancel,
+        isOpen: isOpen,
+        footer: /*#__PURE__*/ jsxs(Wrap, {
+            children: [
+                /*#__PURE__*/ jsx("p", {}),
+                /*#__PURE__*/ jsxs(Stack, {
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "outline",
+                            onClick: onCancel,
+                            label: "Cancel",
+                            disabled: isDeleting
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "danger",
+                            onClick: onConfirm,
+                            icon: isDeleting && /*#__PURE__*/ jsx(Loader, {
+                                size: "larger"
+                            }),
+                            label: "Delete",
+                            disabled: isDeleting
+                        })
+                    ]
+                })
+            ]
+        }),
+        title: `Delete ${ruleTypeLabel} Rule`,
+        children: [
+            "Are you sure you want to delete the ",
+            ruleType,
+            ' rule "',
+            ruleId,
+            '"?'
+        ]
+    });
+}
+export { ConfirmDeleteRuleModal };

package/dist/components/ui/DeleteObjectModalContent.d.ts

@@ -0,0 +1,5 @@
+import { Objects } from "../objects/DeleteObjectButton";
+export declare const DeleteObjectModalContent: ({ objects, onRemove, }: {
+    objects: Objects;
+    onRemove: (key: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/DeleteObjectModalContent.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { ConstrainedText, Icon, PrettyBytes, spacing } from "@scality/core-ui";
+import { tableRowHeight } from "@scality/core-ui/dist/components/tablev2/TableUtils";
+import { Box, Table } from "@scality/core-ui/dist/next";
+import { useMemo } from "react";
+import styled_components from "styled-components";
+const Container = styled_components(Box)`
+  height: ${({ height })=>height};
+  min-height: 15.63rem;
+  margin: ${spacing.r8} 0rem;
+`;
+const DeleteObjectModalContent = ({ objects, onRemove })=>{
+    const columns = useMemo(()=>[
+            {
+                Header: "Name",
+                accessor: "Key",
+                Cell: ({ value })=>/*#__PURE__*/ jsx(ConstrainedText, {
+                        text: value,
+                        lineClamp: 1
+                    }),
+                id: "name"
+            },
+            {
+                Header: "Size",
+                accessor: "Size",
+                cellStyle: {
+                    textAlign: "right"
+                },
+                Cell: ({ value })=>/*#__PURE__*/ jsx(PrettyBytes, {
+                        bytes: Number(value)
+                    }),
+                id: "size"
+            },
+            {
+                Header: "",
+                accessor: "type",
+                cellStyle: {
+                    width: "0.625rem"
+                },
+                Cell: (row)=>{
+                    const objectKey = row.row.original.Key;
+                    return /*#__PURE__*/ jsx("div", {
+                        onClick: ()=>onRemove(objectKey),
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "Close",
+                            color: "buttonSecondary"
+                        })
+                    });
+                }
+            }
+        ], [
+        onRemove
+    ]);
+    const HEADER_AND_SPACING_ROWS = 3;
+    const rowHeight = "h40";
+    const tableRowHeightInRem = tableRowHeight[rowHeight];
+    return /*#__PURE__*/ jsx(Container, {
+        height: `calc(${objects.length + HEADER_AND_SPACING_ROWS} * (${tableRowHeightInRem}rem + 1px))`,
+        children: /*#__PURE__*/ jsx(Table, {
+            columns: columns,
+            data: objects,
+            children: /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
+                rowHeight: "h40",
+                separationLineVariant: "backgroundLevel3",
+                selectedId: "Name",
+                onRowSelected: ()=>{}
+            })
+        })
+    });
+};
+export { DeleteObjectModalContent };

package/dist/components/ui/FilterFormSection.d.ts

@@ -0,0 +1,44 @@
+import { UseFormRegisterReturn } from "react-hook-form";
+export interface FilterFormValues {
+    filterType: "none" | "prefix" | "tags" | "and";
+    prefix: string;
+    tags: Array<{
+        key: string;
+        value: string;
+    }>;
+}
+interface FilterFormSectionProps {
+    filterType: string;
+    onFilterTypeChange: (value: string) => void;
+    prefixRegister: UseFormRegisterReturn;
+    tagFields: Array<{
+        id: string;
+        key: string;
+        value: string;
+    }>;
+    tagKeyRegister: (index: number) => UseFormRegisterReturn;
+    tagValueRegister: (index: number) => UseFormRegisterReturn;
+    getTagKeyValue: (index: number) => string;
+    getTagValueValue: (index: number) => string;
+    appendTag: (value: {
+        key: string;
+        value: string;
+    }) => void;
+    removeTag: (index: number) => void;
+    errors?: {
+        prefix?: {
+            message?: string;
+        };
+        tags?: {
+            message?: string;
+        };
+    };
+    forceLabelWidth?: number;
+}
+export declare function FilterFormSection({ filterType, onFilterTypeChange, prefixRegister, tagFields, tagKeyRegister, tagValueRegister, getTagKeyValue, getTagValueValue, appendTag, removeTag, errors, forceLabelWidth, }: FilterFormSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare const createFilterValidationSchema: (Joi: typeof import("joi")) => {
+    filterType: import("joi").StringSchema<string>;
+    prefix: import("joi").AlternativesSchema<any>;
+    tags: import("joi").AlternativesSchema<any>;
+};
+export {};