@scality/data-browser-library 1.0.0-preview.8 → 1.0.1

package/dist/components/providers/DataBrowserProvider.js

@@ -1,42 +1,64 @@
-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;
+import { jsx } from "react/jsx-runtime";
+import { CoreUiThemeProvider } from "@scality/core-ui/dist/next";
+import { coreUIAvailableThemes } from "@scality/core-ui/dist/style/theme";
+import { useQueryClient } from "@tanstack/react-query";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { ANONYMOUS_S3_CONFIG_IDENTIFIER, computeS3ConfigIdentifier } from "../../utils/s3ConfigIdentifier.js";
+import { QueryProvider } from "./QueryProvider.js";
+const DEFAULT_CONTEXT_VALUE = {
+    getS3Config: null,
+    s3ConfigIdentifier: ANONYMOUS_S3_CONFIG_IDENTIFIER
 };
-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
+const DataBrowserContext = /*#__PURE__*/ createContext(DEFAULT_CONTEXT_VALUE);
+const useDataBrowserContext = ()=>useContext(DataBrowserContext);
+const DataBrowserProvider = ({ children, queryClient, theme, enableDevtools, getS3Config })=>{
+    const currentConfig = getS3Config?.();
+    const s3ConfigIdentifier = useMemo(()=>currentConfig ? computeS3ConfigIdentifier(currentConfig) : ANONYMOUS_S3_CONFIG_IDENTIFIER, [
+        currentConfig?.cacheKey,
+        currentConfig?.credentials?.accessKeyId,
+        currentConfig?.credentials?.sessionToken,
+        currentConfig?.region,
+        currentConfig?.endpoint
+    ]);
+    const contextValue = useMemo(()=>({
+            getS3Config: getS3Config ?? null,
+            s3ConfigIdentifier
+        }), [
+        getS3Config,
+        s3ConfigIdentifier
+    ]);
+    return /*#__PURE__*/ jsx(CoreUiThemeProvider, {
+        theme: theme ?? coreUIAvailableThemes.darkRebrand,
+        children: /*#__PURE__*/ jsx(QueryProvider, {
+            queryClient: queryClient,
+            enableDevtools: enableDevtools,
+            children: /*#__PURE__*/ jsx(DataBrowserContext.Provider, {
+                value: contextValue,
+                children: children
             })
-        ]
-    });
-    if (getS3Config && theme) return /*#__PURE__*/ jsx(DataBrowserContext.Provider, {
-        value: {
-            getS3Config,
-            theme
-        },
-        children: content
+        })
     });
-    return content;
 };
-export { DataBrowserContext, DataBrowserProvider, useDataBrowserContext, useDataBrowserTheme };
+const useDataBrowserConfig = ()=>{
+    const { getS3Config } = useDataBrowserContext();
+    if (!getS3Config) throw new Error("useDataBrowserConfig: S3 config not available. Ensure DataBrowserProvider has getS3Config prop set.");
+    return getS3Config();
+};
+const useInvalidateQueries = ()=>{
+    const { s3ConfigIdentifier } = useDataBrowserContext();
+    const queryClient = useQueryClient();
+    return useCallback((filters)=>{
+        const { queryKey, ...rest } = filters;
+        return queryClient.invalidateQueries({
+            ...rest,
+            queryKey: [
+                s3ConfigIdentifier,
+                ...queryKey
+            ]
+        });
+    }, [
+        queryClient,
+        s3ConfigIdentifier
+    ]);
+};
+export { DataBrowserContext, DataBrowserProvider, useDataBrowserConfig, useDataBrowserContext, useInvalidateQueries };

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

@@ -0,0 +1,9 @@
+import { QueryClient } from '@tanstack/react-query';
+import type React from 'react';
+export interface QueryProviderProps {
+    children: React.ReactNode;
+    queryClient?: QueryClient;
+    enableDevtools?: boolean;
+}
+export declare const defaultQueryClient: QueryClient;
+export declare const QueryProvider: React.FC<QueryProviderProps>;

package/dist/components/providers/QueryProvider.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+const defaultQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 300000,
+            retry: 2
+        }
+    }
+});
+const QueryProvider = ({ children, queryClient = defaultQueryClient, enableDevtools = 'development' === process.env.NODE_ENV })=>/*#__PURE__*/ jsxs(QueryClientProvider, {
+        client: queryClient,
+        children: [
+            children,
+            enableDevtools && /*#__PURE__*/ jsx(ReactQueryDevtools, {
+                initialIsOpen: false
+            })
+        ]
+    });
+export { QueryProvider, defaultQueryClient };

package/dist/components/search/MetadataSearch.js

@@ -1,51 +1,52 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { usePrefixWithSlash, useQueryParams } from "../../utils/hooks.js";
+import { Icon } from "@scality/core-ui";
+import { Box, Button, Input } from "@scality/core-ui/dist/next";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router";
+import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
+import { usePrefixWithSlash, useQueryParams } from "../../utils/hooks.js";
 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$/"
+        query: 'key like /pdf$/'
     },
     {
-        label: "files bigger than 1MB",
-        query: "content-length > 1000000"
+        label: 'files bigger than 1MB',
+        query: 'content-length > 1000000'
     },
     {
-        label: "file names that contain scality (case insensitive)",
-        query: "key like /scality/i"
+        label: 'file names that contain scality (case insensitive)',
+        query: 'key like /scality/i'
     },
     {
-        label: "files with metadata field color set to green",
+        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: 'files tagged with color blue',
+        query: 'tags.color=blue'
     },
     {
-        label: "PDF files (from content-type)",
-        query: "content-type=application/pdf"
+        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: 'file names that contain the word Report (case sensitive)',
+        query: 'key like Report'
     },
     {
-        label: "files waiting to be replicated",
+        label: 'files waiting to be replicated',
         query: 'replication-status="PENDING"'
     }
 ];
 const MetadataSearch = ({ isError })=>{
-    const navigate = useNavigate();
+    const navigate = useDataBrowserNavigate();
     const location = useLocation();
     const query = useQueryParams();
-    const searchInput = query.get("metadatasearch");
-    const [inputText, setInputText] = useState(searchInput || "");
+    const searchInput = query.get('metadatasearch');
+    const [inputText, setInputText] = useState(searchInput || '');
     const [hintsShown, setHintsShown] = useState(false);
     const prefixWithSlash = usePrefixWithSlash();
     const inputRef = useRef(null);
@@ -54,8 +55,8 @@ const MetadataSearch = ({ isError })=>{
         e.preventDefault();
         if (!inputText || prefixWithSlash) return;
         const newQuery = new URLSearchParams(location.search);
-        newQuery.set("metadatasearch", inputText);
-        navigate(`${location.pathname}?${newQuery.toString()}`);
+        newQuery.set('metadatasearch', inputText);
+        navigate(`?${newQuery.toString()}`);
     }, [
         inputText,
         prefixWithSlash,
@@ -80,19 +81,19 @@ const MetadataSearch = ({ isError })=>{
         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);
+        document.addEventListener('mousedown', handleClickOutside);
         return ()=>{
-            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [
         hintsShown
     ]);
     const reset = useCallback(()=>{
         setHintsShown(false);
-        setInputText("");
+        setInputText('');
         const newQuery = new URLSearchParams(location.search);
-        newQuery.delete("metadatasearch");
-        navigate(`${location.pathname}?${newQuery.toString()}`);
+        newQuery.delete('metadatasearch');
+        navigate(`?${newQuery.toString()}`);
     }, [
         location,
         navigate
@@ -135,7 +136,7 @@ const MetadataSearch = ({ isError })=>{
                                 name: "Close"
                             }),
                             tooltip: {
-                                overlay: "Reset search"
+                                overlay: 'Reset search'
                             },
                             onClick: reset,
                             "aria-label": "Clear search input"

package/dist/components/search/SearchHints.js

@@ -17,5 +17,5 @@ const SearchHints = /*#__PURE__*/ forwardRef(({ hints, onHintClick }, ref)=>/*#_
                 }, index))
         ]
     }));
-SearchHints.displayName = "SearchHints";
+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 { Icon, spacing } from "@scality/core-ui";
+import { convertSizeToRem } from "@scality/core-ui/dist/components/inputv2/inputv2";
+import { Box, Button } from "@scality/core-ui/dist/next";
+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", "notification") */
+    ruleType: 'lifecycle' | 'replication' | 'notification';
+    /** 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,48 @@
+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 ruleTypeLabels = {
+        lifecycle: 'Lifecycle',
+        replication: 'Replication',
+        notification: 'Notification'
+    };
+    const ruleTypeLabel = ruleTypeLabels[ruleType];
+    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

@@ -1,4 +1,4 @@
-import { Objects } from "../objects/DeleteObjectButton";
+import type { Objects } from '../objects/DeleteObjectButton';
 export declare const DeleteObjectModalContent: ({ objects, onRemove, }: {
     objects: Objects;
     onRemove: (key: string) => void;

package/dist/components/ui/DeleteObjectModalContent.js

@@ -12,30 +12,30 @@ const Container = styled_components(Box)`
 const DeleteObjectModalContent = ({ objects, onRemove })=>{
     const columns = useMemo(()=>[
             {
-                Header: "Name",
-                accessor: "Key",
+                Header: 'Name',
+                accessor: 'Key',
                 Cell: ({ value })=>/*#__PURE__*/ jsx(ConstrainedText, {
                         text: value,
                         lineClamp: 1
                     }),
-                id: "name"
+                id: 'name'
             },
             {
-                Header: "Size",
-                accessor: "Size",
+                Header: 'Size',
+                accessor: 'Size',
                 cellStyle: {
-                    textAlign: "right"
+                    textAlign: 'right'
                 },
                 Cell: ({ value })=>/*#__PURE__*/ jsx(PrettyBytes, {
                         bytes: Number(value)
                     }),
-                id: "size"
+                id: 'size'
             },
             {
-                Header: "",
-                accessor: "type",
+                Header: '',
+                accessor: 'type',
                 cellStyle: {
-                    width: "0.625rem"
+                    width: '0.625rem'
                 },
                 Cell: (row)=>{
                     const objectKey = row.row.original.Key;
@@ -52,7 +52,7 @@ const DeleteObjectModalContent = ({ objects, onRemove })=>{
         onRemove
     ]);
     const HEADER_AND_SPACING_ROWS = 3;
-    const rowHeight = "h40";
+    const rowHeight = 'h40';
     const tableRowHeightInRem = tableRowHeight[rowHeight];
     return /*#__PURE__*/ jsx(Container, {
         height: `calc(${objects.length + HEADER_AND_SPACING_ROWS} * (${tableRowHeightInRem}rem + 1px))`,
@@ -62,7 +62,7 @@ const DeleteObjectModalContent = ({ objects, onRemove })=>{
             children: /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
                 rowHeight: "h40",
                 separationLineVariant: "backgroundLevel3",
-                selectedId: "Name",
+                selectedId: 'Name',
                 onRowSelected: ()=>{}
             })
         })

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

@@ -0,0 +1,44 @@
+import type { 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 {};