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

package/dist/components/search/MetadataSearch.js

@@ -1,7 +1,8 @@
 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 { useLocation } from "react-router";
+import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.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";
@@ -9,43 +10,43 @@ 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

@@ -2,10 +2,10 @@ 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" }) {
+function ArrayFieldActions({ onRemove, onAdd, canRemove, canAdd = true, showAdd, removeLabel = 'Remove', addLabel = 'Add' }) {
     return /*#__PURE__*/ jsxs(Box, {
         display: "flex",
-        width: convertSizeToRem("1/2"),
+        width: convertSizeToRem('1/2'),
         gap: spacing.r8,
         justifyContent: "flex-start",
         children: [
@@ -20,7 +20,7 @@ function ArrayFieldActions({ onRemove, onAdd, canRemove, canAdd = true, showAdd,
                 disabled: !canRemove,
                 tooltip: {
                     overlay: removeLabel,
-                    placement: "top"
+                    placement: 'top'
                 }
             }),
             showAdd && /*#__PURE__*/ jsx(Button, {
@@ -33,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

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

package/dist/components/ui/ConfirmDeleteRuleModal.js

@@ -2,7 +2,7 @@ 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 ruleTypeLabel = 'lifecycle' === ruleType ? 'Lifecycle' : 'Replication';
     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 { 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 { 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 { IconColor, IconName } from '@scality/core-ui/dist/components/icon/Icon.component';
 export declare const SearchContainer: import("styled-components").StyledComponent<"form", any, {
     isHidden?: boolean;
 }, never>;

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

@@ -47,16 +47,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 +76,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/factory.d.ts

@@ -1,15 +1,14 @@
-import type { S3ClientConfiguration } from "./types";
-import type { S3BrowserConfig, S3Credentials } from "../types";
-import { CoreUIThemeName } from "@scality/core-ui/dist/style/theme";
-interface RuntimeConfig {
+import Joi from 'joi';
+import type { S3BrowserConfig, S3Credentials } from '../types';
+import type { S3ClientConfiguration } from './types';
+export type S3RuntimeConfig = {
     s3: {
         endpoint?: string;
         region: string;
         forcePathStyle?: boolean;
     };
-    theme?: CoreUIThemeName;
-    basePath?: string;
-}
+};
+export declare const s3RuntimeConfigSchema: Joi.ObjectSchema<any>;
 /**
  * Configuration factory that uses build-time constants
  * No runtime environment detection or hardcoded values
@@ -18,8 +17,23 @@ export declare class S3ConfigurationFactory {
     /**
      * Load runtime configuration from config.json
      * Should be called at app startup
+     *
+     * @template T - Extended runtime config type that must include S3RuntimeConfig
+     * @param configUrl - URL to fetch the config.json from
+     * @returns Promise resolving to the loaded config or null if loading failed
+     *
+     * @example
+     * ```typescript
+     * type MyConfig = S3RuntimeConfig & {
+     *   theme?: string;
+     *   basePath?: string;
+     *   more: "type";
+     * };
+     *
+     * const config = await loadRuntimeConfig<MyConfig>("/config.json");
+     * ```
      */
-    static loadRuntimeConfig(configUrl: string): Promise<RuntimeConfig | null>;
+    static loadRuntimeConfig<T extends S3RuntimeConfig = S3RuntimeConfig>(configUrl: string): Promise<T>;
     private static getBuildTimeConfig;
     /**
      * Create S3 client configuration based on build-time settings
@@ -59,5 +73,4 @@ export declare const getBuildInfo: () => {
     s3Endpoint: string;
     proxyEndpoint: string | undefined;
 };
-export declare const loadRuntimeConfig: (configUrl: string) => Promise<RuntimeConfig | null>;
-export {};
+export declare const loadRuntimeConfig: <T extends S3RuntimeConfig = S3RuntimeConfig>(configUrl: string) => Promise<T>;

package/dist/config/factory.js

@@ -1,3 +1,11 @@
+import joi from "joi";
+const s3RuntimeConfigSchema = joi.object({
+    s3: joi.object({
+        endpoint: joi.string().optional(),
+        region: joi.string().required(),
+        forcePathStyle: joi.boolean().optional()
+    })
+});
 let runtimeConfig = null;
 class S3ConfigurationFactory {
     static async loadRuntimeConfig(configUrl) {
@@ -6,14 +14,21 @@ class S3ConfigurationFactory {
             if (response.ok) {
                 const data = await response.json();
                 runtimeConfig = data;
-                if (runtimeConfig?.s3?.endpoint === "origin") runtimeConfig.s3.endpoint = window.location.origin;
-                console.log("Loaded runtime configuration:", runtimeConfig);
+                const { error } = s3RuntimeConfigSchema.validate(data, {
+                    allowUnknown: true,
+                    stripUnknown: false,
+                    abortEarly: false
+                });
+                if (error) {
+                    const errorMessages = error.details.map((detail)=>detail.message).join(`\n`);
+                    throw new Error(`Invalid runtime configuration, please check your config.json: \n${errorMessages}`);
+                }
+                if (runtimeConfig?.s3?.endpoint === 'origin') runtimeConfig.s3.endpoint = window.location.origin;
                 return data;
             }
-            return null;
+            throw new Error('Failed to load runtime configuration');
         } catch (error) {
-            console.warn("Could not load runtime config, using build-time config:", error);
-            return null;
+            throw error;
         }
     }
     static getBuildTimeConfig() {
@@ -59,7 +74,7 @@ class S3ConfigurationFactory {
     static getBuildInfo() {
         const buildConfig = this.getBuildTimeConfig();
         return {
-            environment: buildConfig.isDevelopment ? "development" : "production",
+            environment: buildConfig.isDevelopment ? 'development' : 'production',
             useProxy: buildConfig.dev.useProxy,
             s3Endpoint: buildConfig.s3.endpoint,
             proxyEndpoint: buildConfig.dev.proxyEndpoint
@@ -71,4 +86,4 @@ const shouldUseProxy = ()=>S3ConfigurationFactory.shouldUseProxyMiddleware();
 const getProxyConfig = ()=>S3ConfigurationFactory.createProxyConfiguration();
 const getBuildInfo = ()=>S3ConfigurationFactory.getBuildInfo();
 const loadRuntimeConfig = (configUrl)=>S3ConfigurationFactory.loadRuntimeConfig(configUrl);
-export { S3ConfigurationFactory, createS3Config, getBuildInfo, getProxyConfig, loadRuntimeConfig, shouldUseProxy };
+export { S3ConfigurationFactory, createS3Config, getBuildInfo, getProxyConfig, loadRuntimeConfig, s3RuntimeConfigSchema, shouldUseProxy };