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

package/dist/config/factory.js

@@ -1,70 +1,25 @@
-let runtimeConfig = null;
-class S3ConfigurationFactory {
-    static async loadRuntimeConfig() {
-        try {
-            const response = await fetch("/_/s3-browser/config.json");
-            if (response.ok) {
-                const data = await response.json();
-                runtimeConfig = data.s3;
-                console.log("Loaded runtime S3 configuration:", runtimeConfig);
-            }
-        } catch (error) {
-            console.warn("Could not load runtime config, using build-time config:", error);
-        }
-    }
-    static getBuildTimeConfig() {
-        return {
-            s3: __S3_CONFIG__,
-            dev: __DEV_CONFIG__,
-            isDevelopment: __IS_DEVELOPMENT__,
-            isProduction: __IS_PRODUCTION__
-        };
-    }
-    static createClientConfiguration(credentials) {
-        const buildConfig = this.getBuildTimeConfig();
-        const s3Config = buildConfig.isProduction && runtimeConfig ? runtimeConfig : buildConfig.s3;
-        const baseConfig = {
-            credentials,
-            region: s3Config.region,
-            forcePathStyle: s3Config.forcePathStyle ?? true,
-            endpoint: s3Config.endpoint
-        };
-        if (buildConfig.isDevelopment && buildConfig.dev.useProxy && buildConfig.dev.proxyEndpoint) baseConfig.endpoint = buildConfig.dev.proxyEndpoint;
-        return baseConfig;
-    }
-    static createProxyConfiguration() {
-        const buildConfig = this.getBuildTimeConfig();
-        const config = {
-            endpoint: buildConfig.s3.endpoint,
-            region: buildConfig.s3.region,
-            forcePathStyle: buildConfig.s3.forcePathStyle,
-            useProxy: buildConfig.isDevelopment && buildConfig.dev.useProxy
-        };
-        if (config.useProxy) config.proxyConfig = {
-            realHost: buildConfig.s3.realHost,
-            proxyBasePath: buildConfig.dev.proxyBasePath,
-            proxyHost: buildConfig.dev.proxyHost,
-            proxyPort: buildConfig.dev.proxyPort
-        };
-        return config;
-    }
-    static shouldUseProxyMiddleware() {
-        const buildConfig = this.getBuildTimeConfig();
-        return buildConfig.isDevelopment && buildConfig.dev.useProxy;
-    }
-    static getBuildInfo() {
-        const buildConfig = this.getBuildTimeConfig();
-        return {
-            environment: buildConfig.isDevelopment ? "development" : "production",
-            useProxy: buildConfig.dev.useProxy,
-            s3Endpoint: buildConfig.s3.endpoint,
-            proxyEndpoint: buildConfig.dev.proxyEndpoint
-        };
+import joi from "joi";
+const s3RuntimeConfigSchema = joi.object({
+    s3: joi.object({
+        endpoint: joi.string().optional().allow('origin'),
+        region: joi.string().min(1).required(),
+        forcePathStyle: joi.boolean().optional()
+    }).required()
+});
+async function loadRuntimeConfig(configUrl) {
+    const response = await fetch(configUrl);
+    if (!response.ok) throw new Error(`Failed to load config: ${response.statusText} (${response.status})`);
+    const data = await response.json();
+    const { error } = s3RuntimeConfigSchema.validate(data, {
+        allowUnknown: true,
+        abortEarly: false
+    });
+    if (error) {
+        const messages = error.details.map((d)=>d.message).join('; ');
+        throw new Error(`Invalid config: ${messages}`);
     }
+    if (data.s3?.endpoint === 'origin') if ('undefined' != typeof window && window.location?.origin) data.s3.endpoint = window.location.origin;
+    else throw new Error('Cannot use "origin" keyword outside browser');
+    return data;
 }
-const createS3Config = (credentials)=>S3ConfigurationFactory.createClientConfiguration(credentials);
-const shouldUseProxy = ()=>S3ConfigurationFactory.shouldUseProxyMiddleware();
-const getProxyConfig = ()=>S3ConfigurationFactory.createProxyConfiguration();
-const getBuildInfo = ()=>S3ConfigurationFactory.getBuildInfo();
-const loadRuntimeConfig = ()=>S3ConfigurationFactory.loadRuntimeConfig();
-export { S3ConfigurationFactory, createS3Config, getBuildInfo, getProxyConfig, loadRuntimeConfig, shouldUseProxy };
+export { loadRuntimeConfig, s3RuntimeConfigSchema };

package/dist/config/types.d.ts

@@ -1,46 +1,224 @@
 /**
- * Build-time configuration types injected by RSBuild
+ * Runtime configuration types
  */
-export interface S3Configuration {
+import type { Bucket } from '@aws-sdk/client-s3';
+import type { TableItem } from '../components/objects/ObjectList';
+/**
+ * Proxy configuration for development or custom proxy setups
+ *
+ * This enables proper S3 request signing through a proxy:
+ * 1. Requests are signed using the target S3 service endpoint
+ * 2. Signed requests are routed through the proxy endpoint
+ *
+ * Uses discriminated union for type safety: when enabled=true, target is required.
+ *
+ * @example Local development
+ * ```typescript
+ * {
+ *   enabled: true,
+ *   endpoint: "http://localhost:3000/api/s3",
+ *   target: "https://s3.amazonaws.com"
+ * }
+ * ```
+ *
+ * @example Kubernetes/Gateway with origin-relative path
+ * ```typescript
+ * {
+ *   enabled: true,
+ *   endpoint: "/zenko/s3",              // Uses window.location.origin
+ *   target: "http://s3.pod-choco.local" // Internal service
+ * }
+ * ```
+ *
+ * @example Using origin keyword
+ * ```typescript
+ * {
+ *   enabled: true,
+ *   endpoint: "origin",                 // Uses window.location.origin
+ *   target: "http://s3.internal.local"
+ * }
+ * ```
+ *
+ * @example Disabled proxy
+ * ```typescript
+ * {
+ *   enabled: false,
+ *   endpoint: "http://localhost:3000/api/s3",
+ *   // target is optional when disabled
+ * }
+ * ```
+ */
+export type ProxyConfiguration = {
+    /** Proxy is disabled */
+    enabled: false;
+    /**
+     * Proxy endpoint where requests are sent.
+     *
+     * Supports three formats:
+     * - Full URL: `"http://localhost:3000/api/s3"`
+     * - Origin-relative path: `"/api/s3"` (prepends window.location.origin)
+     * - Special keyword: `"origin"` (uses window.location.origin)
+     */
     endpoint: string;
-    region: string;
-    realHost: string;
-    forcePathStyle: boolean;
+    /**
+     * Target S3 service endpoint for request signing (optional when disabled).
+     *
+     * Supports:
+     * - Full URL: `"http://s3.amazonaws.com:9000"`
+     * - Hostname only: `"s3.pod-choco.local"` (defaults to http://)
+     */
+    target?: string;
+} | {
+    /** Proxy is enabled */
+    enabled: true;
+    /**
+     * Proxy endpoint where requests are sent.
+     *
+     * Supports three formats:
+     * - Full URL: `"http://localhost:3000/api/s3"`
+     * - Origin-relative path: `"/api/s3"` (prepends window.location.origin)
+     * - Special keyword: `"origin"` (uses window.location.origin)
+     */
+    endpoint: string;
+    /**
+     * Target S3 service endpoint for request signing (required when enabled).
+     * Requests are signed as if going to this endpoint, then routed through proxy.
+     *
+     * Supports:
+     * - Full URL: `"http://s3.amazonaws.com:9000"`
+     * - Hostname only: `"s3.pod-choco.local"` (defaults to http://)
+     */
+    target: string;
+};
+/**
+ * Column configuration for lists (bucket list, object list)
+ */
+export interface ColumnConfig<T = unknown> {
+    id: keyof T | (string & {});
+    header: string;
+    width?: number | string;
+    render: React.ComponentType<{
+        data: T;
+    }>;
+    cellStyle?: React.CSSProperties;
+}
+/**
+ * Action configuration for list-level actions (buttons at top of list)
+ */
+export interface ActionConfig {
+    id: string;
+    render: () => React.ReactNode;
 }
-export interface DevelopmentConfiguration {
-    useProxy: boolean;
-    proxyEndpoint?: string;
-    proxyBasePath: string;
-    proxyHost: string;
-    proxyPort: number;
+/**
+ * Tab configuration for detail pages
+ */
+export interface TabConfig {
+    id: string;
+    title: string;
+    path?: string;
+    render: () => React.ReactNode;
+    hidden?: boolean;
+    withoutPadding?: boolean;
+}
+/**
+ * Field configuration for overview sections
+ *
+ * Default field IDs by section:
+ * - General: "name", "versioning", "location"
+ * - Data Protection: "objectLock", "defaultRetention"
+ * - Permissions: "owner", "acl", "cors", "public", "bucketPolicy"
+ */
+export interface FieldConfig {
+    id: string;
+    label?: string;
+    render: React.ComponentType<{
+        entityName: string;
+    }>;
 }
-export interface BuildTimeConfig {
-    s3: S3Configuration;
-    dev: DevelopmentConfiguration;
-    isDevelopment: boolean;
-    isProduction: boolean;
+/**
+ * Section configuration for overview pages
+ */
+export interface SectionConfig {
+    id: string;
+    title: string;
+    render: () => React.ReactNode;
 }
 /**
- * Runtime configuration for S3 client
+ * Storage class selector props
  */
-export interface S3ClientConfiguration {
-    endpoint: string;
-    region: string;
-    forcePathStyle: boolean;
-    useProxy: boolean;
-    proxyConfig?: {
-        realHost: string;
-        proxyBasePath: string;
-        proxyHost: string;
-        proxyPort: number;
-    };
+export interface StorageClassSelectorProps {
+    value: string;
+    onChange: (newValue: string) => void;
 }
 /**
- * Global type declarations for build-time constants
+ * Main DataBrowserUI component props
  */
-declare global {
-    const __S3_CONFIG__: S3Configuration;
-    const __DEV_CONFIG__: DevelopmentConfiguration;
-    const __IS_DEVELOPMENT__: boolean;
-    const __IS_PRODUCTION__: boolean;
+export interface DataBrowserUIProps {
+    basePath?: string;
+    /**
+     * Custom header component to render above the main content.
+     * Typically used for breadcrumbs or navigation.
+     */
+    header?: React.ReactNode;
+    storageClassSelector?: React.ComponentType<StorageClassSelectorProps>;
+    extraBucketListColumns?: ColumnConfig<Bucket>[];
+    extraBucketListActions?: ActionConfig[];
+    extraBucketTabs?: TabConfig[];
+    extraBucketOverviewGeneral?: FieldConfig[];
+    extraBucketOverviewDataProtection?: FieldConfig[];
+    extraBucketOverviewPermissions?: FieldConfig[];
+    extraBucketOverviewSections?: SectionConfig[];
+    /**
+     * Extra columns for object list.
+     *
+     * Default column IDs for replacement:
+     * - "name" - Name column (file/folder icon, legal hold indicator)
+     * - "versionId" - Version ID column (only shown when versions enabled)
+     * - "lastModified" - Modified on column
+     * - "size" - Size column
+     * - "storageClass" - Storage Location column
+     *
+     * Extra columns are inserted between Version ID and Modified on.
+     */
+    extraObjectListColumns?: ColumnConfig<TableItem>[];
+    /**
+     * Extra actions for object list header.
+     *
+     * Default action IDs for replacement:
+     * - "upload" - Upload button
+     * - "createFolder" - Create Folder button
+     * - "delete" - Delete Object button
+     */
+    extraObjectListActions?: ActionConfig[];
+    /**
+     * Extra tabs for object details page.
+     *
+     * Default tab IDs for replacement:
+     * - "summary" - Summary tab
+     * - "metadata" - Metadata tab
+     * - "tags" - Tags tab
+     */
+    extraObjectTabs?: TabConfig[];
+    /**
+     * Extra fields for object summary Information section.
+     *
+     * Default field IDs for replacement:
+     * - "name" - Name field
+     * - "versionId" - Version ID field
+     * - "size" - Size field
+     * - "lastModified" - Modified On field
+     * - "etag" - ETag field
+     * - "location" - Location field
+     */
+    extraObjectSummaryInformation?: FieldConfig[];
+    /**
+     * Extra fields for object summary Data Protection section.
+     *
+     * Default field IDs for replacement:
+     * - "lock" - Lock (Retention) field
+     * - "legalHold" - Legal Hold field
+     */
+    extraObjectSummaryDataProtection?: FieldConfig[];
 }
+export type S3EventType = 's3:ObjectCreated:*' | 's3:ObjectCreated:Put' | 's3:ObjectCreated:Post' | 's3:ObjectCreated:Copy' | 's3:ObjectCreated:CompleteMultipartUpload' | 's3:ObjectRemoved:*' | 's3:ObjectRemoved:Delete' | 's3:ObjectRemoved:DeleteMarkerCreated' | 's3:ObjectRestore:*' | 's3:ObjectRestore:Post' | 's3:ObjectRestore:Completed' | 's3:ObjectRestore:Delete' | 's3:LifecycleExpiration:*' | 's3:LifecycleExpiration:Delete' | 's3:LifecycleExpiration:DeleteMarkerCreated' | 's3:LifecycleTransition' | 's3:Replication:*' | 's3:Replication:OperationFailedReplication' | 's3:Replication:OperationMissedThreshold' | 's3:Replication:OperationReplicatedAfterThreshold' | 's3:Replication:OperationNotTracked' | 's3:ObjectTagging:*' | 's3:ObjectTagging:Put' | 's3:ObjectTagging:Delete' | 's3:ReducedRedundancyLostObject' | 's3:IntelligentTiering' | 's3:ObjectAcl:Put' | 's3:TestEvent';
+export type S3EventCategory = 'Object Creation' | 'Object Deletion' | 'Object Restoration' | 'Lifecycle' | 'Replication' | 'Object Tagging' | 'Storage & Access' | 'Testing';

package/dist/contexts/DataBrowserUICustomizationContext.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Internal UI customization context for DataBrowserUI.
+ * NOT intended for external use - all configuration should be passed as props to DataBrowserUI.
+ *
+ * @internal
+ */
+import type React from 'react';
+import type { DataBrowserUIProps } from '../config/types';
+interface DataBrowserUICustomizationProviderProps {
+    config: DataBrowserUIProps;
+    children: React.ReactNode;
+}
+/**
+ * Internal provider for DataBrowserUI customization options.
+ * @internal
+ */
+export declare const DataBrowserUICustomizationProvider: React.FC<DataBrowserUICustomizationProviderProps>;
+/**
+ * Internal hook to access DataBrowserUI customization options (extra columns, actions, tabs, etc.).
+ * Always returns a valid configuration object (empty object if no customizations provided).
+ *
+ * @internal
+ * @returns {DataBrowserUIProps} The UI customization options
+ * @throws {Error} If used outside of DataBrowserUICustomizationProvider
+ */
+export declare const useDataBrowserUICustomization: () => DataBrowserUIProps;
+export {};

package/dist/contexts/DataBrowserUICustomizationContext.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const DataBrowserUICustomizationContext = /*#__PURE__*/ createContext(void 0);
+const DataBrowserUICustomizationProvider = ({ config, children })=>/*#__PURE__*/ jsx(DataBrowserUICustomizationContext.Provider, {
+        value: config,
+        children: children
+    });
+const useDataBrowserUICustomization = ()=>{
+    const context = useContext(DataBrowserUICustomizationContext);
+    if (void 0 === context) throw new Error("useDataBrowserUICustomization must be used within DataBrowserUI component. Ensure your component is rendered inside <DataBrowserUI>.");
+    return context;
+};
+export { DataBrowserUICustomizationProvider, useDataBrowserUICustomization };

package/dist/hooks/__tests__/useAccessibleBuckets.test.d.ts

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

package/dist/hooks/__tests__/useAccessibleBuckets.test.js

@@ -0,0 +1,145 @@
+import { act } from "@testing-library/react";
+import { renderHookWithWrapper, testConfig, testCredentials } from "../../test/testUtils.js";
+import { computeS3ConfigIdentifier } from "../../utils/s3ConfigIdentifier.js";
+import { useAccessibleBuckets } from "../useAccessibleBuckets.js";
+describe('useAccessibleBuckets', ()=>{
+    const mockS3ConfigIdentifier = computeS3ConfigIdentifier({
+        ...testConfig,
+        credentials: testCredentials
+    });
+    const storageKey = `data-browser-accessible-buckets-${mockS3ConfigIdentifier}`;
+    const flagKey = `data-browser-limited-access-${mockS3ConfigIdentifier}`;
+    beforeEach(()=>{
+        sessionStorage.clear();
+        jest.clearAllMocks();
+    });
+    afterEach(()=>{
+        sessionStorage.clear();
+    });
+    it('starts with empty bucket list and no limited access flag', ()=>{
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        expect(result.current.accessibleBuckets).toEqual([]);
+        expect(result.current.hasLimitedAccess).toBe(false);
+    });
+    it('loads existing buckets from session on mount', ()=>{
+        sessionStorage.setItem(storageKey, JSON.stringify([
+            'bucket1',
+            'bucket2'
+        ]));
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        expect(result.current.accessibleBuckets).toHaveLength(2);
+        expect(result.current.accessibleBuckets[0].Name).toBe('bucket1');
+        expect(result.current.accessibleBuckets[1].Name).toBe('bucket2');
+    });
+    it('loads limited access flag from session on mount', ()=>{
+        sessionStorage.setItem(flagKey, 'true');
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        expect(result.current.hasLimitedAccess).toBe(true);
+    });
+    it('handles corrupted session data gracefully', ()=>{
+        sessionStorage.setItem(storageKey, 'invalid-json');
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        expect(result.current.accessibleBuckets).toEqual([]);
+    });
+    it('adds a bucket to the accessible list', ()=>{
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        act(()=>{
+            result.current.addAccessibleBucket('new-bucket');
+        });
+        expect(result.current.accessibleBuckets).toHaveLength(1);
+        expect(result.current.accessibleBuckets[0].Name).toBe('new-bucket');
+    });
+    it('prevents duplicate buckets from being added', ()=>{
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        act(()=>{
+            result.current.addAccessibleBucket('duplicate-bucket');
+            result.current.addAccessibleBucket('duplicate-bucket');
+        });
+        expect(result.current.accessibleBuckets).toHaveLength(1);
+    });
+    it('adds multiple unique buckets', ()=>{
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        act(()=>{
+            result.current.addAccessibleBucket('bucket1');
+            result.current.addAccessibleBucket('bucket2');
+            result.current.addAccessibleBucket('bucket3');
+        });
+        expect(result.current.accessibleBuckets).toHaveLength(3);
+        expect(result.current.accessibleBuckets.map((b)=>b.Name)).toEqual([
+            'bucket1',
+            'bucket2',
+            'bucket3'
+        ]);
+    });
+    it('toggles limited access mode', ()=>{
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        act(()=>{
+            result.current.setLimitedAccess(true);
+        });
+        expect(result.current.hasLimitedAccess).toBe(true);
+        act(()=>{
+            result.current.setLimitedAccess(false);
+        });
+        expect(result.current.hasLimitedAccess).toBe(false);
+    });
+    it('clears all accessible buckets and resets limited access', ()=>{
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        act(()=>{
+            result.current.addAccessibleBucket('bucket1');
+            result.current.addAccessibleBucket('bucket2');
+            result.current.setLimitedAccess(true);
+        });
+        expect(result.current.accessibleBuckets).toHaveLength(2);
+        expect(result.current.hasLimitedAccess).toBe(true);
+        act(()=>{
+            result.current.clearAccessibleBuckets();
+        });
+        expect(result.current.accessibleBuckets).toEqual([]);
+        expect(result.current.hasLimitedAccess).toBe(false);
+    });
+    it('handles storage quota errors without crashing', ()=>{
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        jest.spyOn(Storage.prototype, 'setItem').mockImplementationOnce(()=>{
+            throw new Error('Storage quota exceeded');
+        });
+        expect(()=>{
+            act(()=>{
+                result.current.addAccessibleBucket('new-bucket');
+            });
+        }).not.toThrow();
+    });
+    it('returns buckets with required S3 properties', ()=>{
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        act(()=>{
+            result.current.addAccessibleBucket('test-bucket');
+        });
+        const bucket = result.current.accessibleBuckets[0];
+        expect(bucket).toHaveProperty('Name', 'test-bucket');
+        expect(bucket).toHaveProperty('CreationDate');
+        expect(bucket.CreationDate).toBeInstanceOf(Date);
+    });
+    it('maintains consistent CreationDate for added buckets', ()=>{
+        const { result: result1 } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        act(()=>{
+            result1.current.addAccessibleBucket('consistent-bucket');
+        });
+        const firstCreationDate = result1.current.accessibleBuckets[0].CreationDate;
+        expect(firstCreationDate).toBeInstanceOf(Date);
+        const { result: result2 } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        const secondCreationDate = result2.current.accessibleBuckets[0].CreationDate;
+        expect(secondCreationDate).toBeInstanceOf(Date);
+        expect(firstCreationDate.getTime()).toBe(secondCreationDate.getTime());
+    });
+    it('migrates legacy string array format to new format', ()=>{
+        sessionStorage.setItem(storageKey, JSON.stringify([
+            'legacy-bucket'
+        ]));
+        const { result } = renderHookWithWrapper(()=>useAccessibleBuckets());
+        expect(result.current.accessibleBuckets).toHaveLength(1);
+        expect(result.current.accessibleBuckets[0].Name).toBe('legacy-bucket');
+        expect(result.current.accessibleBuckets[0].CreationDate).toBeInstanceOf(Date);
+        const stored = JSON.parse(sessionStorage.getItem(storageKey) || '[]');
+        expect(stored[0]).toHaveProperty('name');
+        expect(stored[0]).toHaveProperty('addedAt');
+    });
+});

package/dist/hooks/__tests__/useISVBucketDetection.test.d.ts

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