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

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.js

@@ -1,8 +1,13 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@scality/core-ui/dist/next";
-import { Icon } from "@scality/core-ui";
-function ArrayFieldActions({ onRemove, onAdd, canRemove, canAdd = true, showAdd, removeLabel = "Remove", addLabel = "Add" }) {
-    return /*#__PURE__*/ jsxs(Fragment, {
+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, {
@@ -15,7 +20,7 @@ function ArrayFieldActions({ onRemove, onAdd, canRemove, canAdd = true, showAdd,
                 disabled: !canRemove,
                 tooltip: {
                     overlay: removeLabel,
-                    placement: "top"
+                    placement: 'top'
                 }
             }),
             showAdd && /*#__PURE__*/ jsx(Button, {
@@ -28,7 +33,7 @@ function ArrayFieldActions({ onRemove, onAdd, canRemove, canAdd = true, showAdd,
                 "aria-label": addLabel,
                 tooltip: {
                     overlay: addLabel,
-                    placement: "top"
+                    placement: 'top'
                 },
                 disabled: !canAdd
             })

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

@@ -3,8 +3,8 @@ interface ConfirmDeleteRuleModalProps {
     isOpen: boolean;
     /** Rule ID to display in confirmation message */
     ruleId: string;
-    /** Type of rule (e.g., "lifecycle", "replication") */
-    ruleType: "lifecycle" | "replication";
+    /** Type of rule (e.g., "lifecycle", "replication", "notification") */
+    ruleType: 'lifecycle' | 'replication' | 'notification';
     /** Whether deletion is in progress */
     isDeleting: boolean;
     /** Callback when user confirms deletion */

package/dist/components/ui/ConfirmDeleteRuleModal.js

@@ -2,7 +2,12 @@ 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";
+    const ruleTypeLabels = {
+        lifecycle: 'Lifecycle',
+        replication: 'Replication',
+        notification: 'Notification'
+    };
+    const ruleTypeLabel = ruleTypeLabels[ruleType];
     return /*#__PURE__*/ jsxs(Modal, {
         close: onCancel,
         isOpen: isOpen,

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

@@ -1,6 +1,6 @@
-import { UseFormRegisterReturn } from "react-hook-form";
+import type { UseFormRegisterReturn } from 'react-hook-form';
 export interface FilterFormValues {
-    filterType: "none" | "prefix" | "tags" | "and";
+    filterType: 'none' | 'prefix' | 'tags' | 'and';
     prefix: string;
     tags: Array<{
         key: string;

package/dist/components/ui/FilterFormSection.js

@@ -5,28 +5,28 @@ import { Box, Input, Select } from "@scality/core-ui/dist/next";
 import { ArrayFieldActions } from "./ArrayFieldActions.js";
 const filterTypeOptions = [
     {
-        value: "none",
-        label: "All objects"
+        value: 'none',
+        label: 'All objects'
     },
     {
-        value: "prefix",
-        label: "Prefix filter"
+        value: 'prefix',
+        label: 'Prefix filter'
     },
     {
-        value: "tags",
-        label: "Tags filter"
+        value: 'tags',
+        label: 'Tags filter'
     },
     {
-        value: "and",
-        label: "Prefix and tags filter"
+        value: 'and',
+        label: 'Prefix and tags filter'
     }
 ];
-const shouldShowPrefix = (filterType)=>"prefix" === filterType || "and" === filterType;
-const shouldShowTags = (filterType)=>"tags" === filterType || "and" === filterType;
+const shouldShowPrefix = (filterType)=>'prefix' === filterType || 'and' === filterType;
+const shouldShowTags = (filterType)=>'tags' === filterType || 'and' === filterType;
 function FilterFormSection({ filterType, onFilterTypeChange, prefixRegister, tagFields, tagKeyRegister, tagValueRegister, getTagKeyValue, getTagValueValue, appendTag, removeTag, errors, forceLabelWidth = convertRemToPixels(15) }) {
     return /*#__PURE__*/ jsxs(FormSection, {
         title: {
-            name: "Filter"
+            name: 'Filter'
         },
         forceLabelWidth: forceLabelWidth,
         children: [
@@ -50,7 +50,7 @@ function FilterFormSection({ filterType, onFilterTypeChange, prefixRegister, tag
                 direction: "horizontal",
                 error: errors?.prefix?.message,
                 helpErrorPosition: "bottom",
-                required: "prefix" === filterType,
+                required: 'prefix' === filterType,
                 content: /*#__PURE__*/ jsx(Input, {
                     id: "prefix",
                     placeholder: "folder/",
@@ -109,8 +109,8 @@ function FilterFormSection({ filterType, onFilterTypeChange, prefixRegister, tag
                                         showAdd: index === tagFields.length - 1,
                                         onRemove: ()=>removeTag(index),
                                         onAdd: ()=>appendTag({
-                                                key: "",
-                                                value: ""
+                                                key: '',
+                                                value: ''
                                             }),
                                         canRemove: tagFields.length > 1,
                                         canAdd: !!getTagKeyValue(index) && !!getTagValueValue(index),
@@ -126,32 +126,32 @@ function FilterFormSection({ filterType, onFilterTypeChange, prefixRegister, tag
     });
 }
 const createFilterValidationSchema = (Joi)=>({
-        filterType: Joi.string().valid("none", "prefix", "tags", "and").required(),
-        prefix: Joi.when("filterType", {
-            is: "prefix",
+        filterType: Joi.string().valid('none', 'prefix', 'tags', 'and').required(),
+        prefix: Joi.when('filterType', {
+            is: 'prefix',
             then: Joi.string().required().min(1).messages({
-                "string.empty": "Prefix is required when using prefix filter",
-                "string.min": "Prefix is required when using prefix filter"
+                'string.empty': 'Prefix is required when using prefix filter',
+                'string.min': 'Prefix is required when using prefix filter'
             }),
-            otherwise: Joi.when("filterType", {
-                is: "and",
-                then: Joi.string().allow("").optional(),
+            otherwise: Joi.when('filterType', {
+                is: 'and',
+                then: Joi.string().allow('').optional(),
                 otherwise: Joi.any()
             })
         }),
-        tags: Joi.when("filterType", {
-            is: Joi.valid("tags", "and"),
+        tags: Joi.when('filterType', {
+            is: Joi.valid('tags', 'and'),
             then: Joi.array().items(Joi.object({
                 key: Joi.string().required().max(128).messages({
-                    "string.empty": "Tag key is required",
-                    "string.max": "Tag key must not exceed 128 characters"
+                    'string.empty': 'Tag key is required',
+                    'string.max': 'Tag key must not exceed 128 characters'
                 }),
                 value: Joi.string().required().max(256).messages({
-                    "string.empty": "Tag value is required",
-                    "string.max": "Tag value must not exceed 256 characters"
+                    'string.empty': 'Tag value is required',
+                    'string.max': 'Tag value must not exceed 256 characters'
                 })
             })).min(1).messages({
-                "array.min": "At least one tag is required when using tag filter"
+                'array.min': 'At least one tag is required when using tag filter'
             }),
             otherwise: Joi.array().optional()
         })

package/dist/components/ui/Search.elements.d.ts

@@ -1,4 +1,4 @@
-import { IconColor, IconName } from "@scality/core-ui/dist/components/icon/Icon.component";
+import type { IconColor, IconName } from '@scality/core-ui/dist/components/icon/Icon.component';
 export declare const SearchContainer: import("styled-components").StyledComponent<"form", any, {
     isHidden?: boolean;
 }, never>;
@@ -10,7 +10,7 @@ type SearchIcon = {
     name: IconName;
     color: IconColor;
 };
-export declare const searchIcon: ({ isMetadata, isError, }: {
+export declare const searchIcon: ({ isMetadata, isError }: {
     isMetadata: boolean;
     isError: boolean;
 }) => SearchIcon;

package/dist/components/ui/Search.elements.js

@@ -5,7 +5,7 @@ const SearchContainer = styled_components.form`
   display: flex;
   max-width: 600px;
   margin-right: ${spacing.r20};
-  visibility: ${(props)=>props.isHidden ? "hidden" : "visible"};
+  visibility: ${(props)=>props.isHidden ? 'hidden' : 'visible'};
   gap: ${spacing.r8};
 `;
 const SearchInputContainer = styled_components.div`
@@ -44,16 +44,16 @@ const HintsTitle = styled_components.div`
 `;
 const searchIcon = ({ isMetadata, isError })=>{
     if (isError) return {
-        name: "Close",
-        color: "statusCritical"
+        name: 'Close',
+        color: 'statusCritical'
     };
     if (isMetadata) return {
-        name: "Check",
-        color: "statusHealthy"
+        name: 'Check',
+        color: 'statusHealthy'
     };
     return {
-        name: "Search",
-        color: "textSecondary"
+        name: 'Search',
+        color: 'textSecondary'
     };
 };
 export { HintItem, HintsContainer, HintsTitle, SearchContainer, SearchInputContainer, searchIcon };

package/dist/components/ui/Table.elements.d.ts

@@ -7,8 +7,9 @@ export declare const Body: ({ children, ...props }: {
 export declare const Group: ({ children, ...props }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const GroupName: ({ children, ...props }: {
+export declare const GroupName: ({ children, action, ...props }: {
     children: React.ReactNode;
+    action?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const GroupContent: ({ children, ...props }: {
     children: React.ReactNode;

package/dist/components/ui/Table.elements.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Text, spacing } from "@scality/core-ui";
 import { Box } from "@scality/core-ui/dist/next";
 import styled_components from "styled-components";
@@ -20,14 +20,20 @@ const Group = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
         ...props,
         children: children
     });
-const GroupName = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
+const GroupName = ({ children, action, ...props })=>/*#__PURE__*/ jsxs(Box, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
         marginBottom: spacing.r10,
         ...props,
-        children: /*#__PURE__*/ jsx(Text, {
-            isEmphazed: true,
-            color: "textPrimary",
-            children: children
-        })
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                isEmphazed: true,
+                color: "textPrimary",
+                children: children
+            }),
+            action
+        ]
     });
 const GroupContent = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
         display: "flex",
@@ -47,16 +53,16 @@ const Row = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
     });
 const RawKey = styled_components.div`
   color: ${(props)=>props.principal ? props.theme.textPrimary : props.theme?.textSecondary};
-  font-weight: ${(props)=>props.principal ? "bold" : "normal"};
+  font-weight: ${(props)=>props.principal ? 'bold' : 'normal'};
   ${(props)=>props.required ? `
         &:after {
             content: '*';
         }
-    ` : ""}
+    ` : ''}
 `;
 const Key = styled_components(RawKey)`
   && {
-    flex: ${(props)=>props.size || "0.35"};
+    flex: ${(props)=>props.size || '0.35'};
     min-width: 0;
   }
 `;
@@ -76,12 +82,12 @@ const TableContainer = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
     });
 const GroupValues = styled_components.div`
   display: flex;
-  flex: ${(props)=>props.size || "0.65"};
+  flex: ${(props)=>props.size || '0.65'};
   justify-content: space-between;
   align-items: center;
   min-width: 0;
 `;
 const ExtraCell = styled_components.div`
-  margin-left: ${(props)=>props.marginLeft || "1.429rem"};
+  margin-left: ${(props)=>props.marginLeft || '1.429rem'};
 `;
 export { Body, ExtraCell, Group, GroupContent, GroupName, GroupValues, Key, Row, Table, TableContainer, Value };

package/dist/config/__tests__/factory.test.d.ts

@@ -0,0 +1 @@
+export {};