@scality/data-browser-library 1.1.2 → 1.1.3

package/dist/components/objects/ObjectList.js

@@ -6,7 +6,7 @@ import { useLocation, useNavigate } from "react-router";
 import styled_components from "styled-components";
 import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useListObjectVersions, useListObjects, useSearchObjects, useSearchObjectsVersions } from "../../hooks/index.js";
-import { useGetPresignedDownload } from "../../hooks/presignedOperations.js";
+import { useDownloadObject } from "../../hooks/useDownloadObject.js";
 import { useBatchObjectLegalHold } from "../../hooks/useBatchObjectLegalHold.js";
 import { useFeatures } from "../../hooks/useFeatures.js";
 import { useQueryParams } from "../../utils/hooks.js";
@@ -62,25 +62,6 @@ const removePrefix = (path, prefix)=>{
     return path;
 };
 const createLegalHoldKey = (key, versionId)=>`${key}:${versionId ?? 'null'}`;
-const downloadFile = (url, filename, onCleanup)=>{
-    try {
-        new URL(url);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = filename;
-        link.style.display = 'none';
-        link.rel = 'noopener noreferrer';
-        document.body.appendChild(link);
-        link.click();
-        const timeoutId = setTimeout(()=>{
-            if (document.body.contains(link)) document.body.removeChild(link);
-        }, 100);
-        onCleanup?.(timeoutId);
-    } catch (error) {
-        console.error('Invalid download URL:', url, error);
-        throw new Error('Failed to initiate download: Invalid URL');
-    }
-};
 const createNameColumn = (onPrefixChange, onDownload)=>({
         Header: 'Name',
         accessor: 'displayName',
@@ -302,7 +283,7 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange, onSele
     const navigate = useNavigate();
     const [searchValue, setSearchValue] = useState(queryParams.get(SEARCH_QUERY_PARAM) || '');
     const [selectedObjects, setSelectedObjects] = useState([]);
-    const { mutateAsync: getPresignedDownload } = useGetPresignedDownload();
+    const { mutateAsync: downloadObject } = useDownloadObject();
     const downloadingRef = useRef(new Set());
     const downloadTimeoutsRef = useRef(new Map());
     const { showToast } = useToast();
@@ -337,18 +318,13 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange, onSele
         try {
             const rawFilename = object.displayName || object.Key.split('/').pop() || 'download';
             const sanitized = rawFilename.replace(/["\r\n\t]/g, '');
-            const encoded = encodeURIComponent(sanitized);
-            const result = await getPresignedDownload({
+            await downloadObject({
                 Bucket: bucketName,
                 Key: object.Key,
-                ResponseContentDisposition: `attachment; filename="${sanitized}"; filename*=UTF-8''${encoded}`,
                 ...versionId ? {
                     VersionId: versionId
-                } : {}
-            });
-            if (!result?.Url) throw new Error('Failed to generate presigned URL: No URL returned');
-            downloadFile(result.Url, sanitized, (timeoutId)=>{
-                downloadTimeoutsRef.current.set(`${downloadKey}_link`, timeoutId);
+                } : {},
+                filename: sanitized
             });
         } catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
@@ -361,13 +337,12 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange, onSele
             const timeoutId = setTimeout(()=>{
                 downloadingRef.current.delete(downloadKey);
                 downloadTimeoutsRef.current.delete(downloadKey);
-                downloadTimeoutsRef.current.delete(`${downloadKey}_link`);
             }, 1000);
             downloadTimeoutsRef.current.set(downloadKey, timeoutId);
         }
     }, [
         bucketName,
-        getPresignedDownload,
+        downloadObject,
         showToast
     ]);
     const isSearchActive = isMetadataSearchEnabled && Boolean(metadataSearchQuery);

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

@@ -24,7 +24,7 @@ describe('usePresigningS3Client', ()=>{
             }));
     });
     it('should create an S3 client with the direct endpoint when no proxy is configured', ()=>{
-        renderHook(()=>usePresigningS3Client(), {
+        const { result } = renderHook(()=>usePresigningS3Client(), {
             wrapper: createTestWrapper(testConfig, testCredentials)
         });
         expect(MockedS3Client).toHaveBeenCalledWith(expect.objectContaining({
@@ -32,34 +32,38 @@ describe('usePresigningS3Client', ()=>{
             region: testConfig.region,
             forcePathStyle: true
         }));
+        expect(result.current.client).toBeDefined();
+    });
+    it('should return identity rewriteUrl when no proxy is configured', ()=>{
+        const { result } = renderHook(()=>usePresigningS3Client(), {
+            wrapper: createTestWrapper(testConfig, testCredentials)
+        });
+        const url = 'http://s3.example.com/bucket/key?X-Amz-Signature=abc';
+        expect(result.current.rewriteUrl(url)).toBe(url);
     });
-    it('should create an S3 client with the proxy endpoint (not target) when proxy is enabled', ()=>{
+    it('should create an S3 client with the target endpoint when proxy is enabled', ()=>{
         renderHook(()=>usePresigningS3Client(), {
             wrapper: createTestWrapper(proxyConfig, testCredentials)
         });
         expect(MockedS3Client).toHaveBeenCalledWith(expect.objectContaining({
-            endpoint: 'https://proxy.example.com/s3',
+            endpoint: 'http://internal-s3.cluster.local',
             region: testConfig.region,
             forcePathStyle: true
         }));
         const constructorCall = MockedS3Client.mock.calls[0][0];
-        expect(constructorCall?.endpoint).not.toContain('internal-s3.cluster.local');
+        expect(constructorCall?.endpoint).not.toContain('proxy.example.com');
     });
-    it('should not attach proxy middleware even when proxy is enabled', ()=>{
-        const mockUse = jest.fn();
-        MockedS3Client.mockImplementation(()=>({
-                config: {},
-                middlewareStack: {
-                    use: mockUse,
-                    add: jest.fn()
-                }
-            }));
-        renderHook(()=>usePresigningS3Client(), {
+    it('should rewrite presigned URLs from target to proxy endpoint', ()=>{
+        const { result } = renderHook(()=>usePresigningS3Client(), {
             wrapper: createTestWrapper(proxyConfig, testCredentials)
         });
-        expect(mockUse).not.toHaveBeenCalled();
+        const targetUrl = 'http://internal-s3.cluster.local/my-bucket/my-key?X-Amz-Signature=abc123';
+        const rewritten = result.current.rewriteUrl(targetUrl);
+        expect(rewritten).toContain('https://proxy.example.com');
+        expect(rewritten).toContain('/s3/my-bucket/my-key');
+        expect(rewritten).toContain('X-Amz-Signature=abc123');
     });
-    it('should use origin-relative proxy endpoint resolved with window.location.origin', ()=>{
+    it('should rewrite URLs with origin-relative proxy endpoint', ()=>{
         const originRelativeConfig = {
             ...testConfig,
             proxy: {
@@ -68,13 +72,30 @@ describe('usePresigningS3Client', ()=>{
                 target: 'http://artesca-data-connector-s3api.zenko.svc.cluster.local'
             }
         };
-        const originalOrigin = window.location.origin;
-        renderHook(()=>usePresigningS3Client(), {
+        const { result } = renderHook(()=>usePresigningS3Client(), {
             wrapper: createTestWrapper(originRelativeConfig, testCredentials)
         });
         expect(MockedS3Client).toHaveBeenCalledWith(expect.objectContaining({
-            endpoint: `${originalOrigin}/zenko/s3`
+            endpoint: 'http://artesca-data-connector-s3api.zenko.svc.cluster.local'
         }));
+        const targetUrl = 'http://artesca-data-connector-s3api.zenko.svc.cluster.local/bucket/key?X-Amz-Signature=xyz';
+        const rewritten = result.current.rewriteUrl(targetUrl);
+        expect(rewritten).toContain('/zenko/s3/bucket/key');
+        expect(rewritten).toContain('X-Amz-Signature=xyz');
+    });
+    it('should not attach proxy middleware even when proxy is enabled', ()=>{
+        const mockUse = jest.fn();
+        MockedS3Client.mockImplementation(()=>({
+                config: {},
+                middlewareStack: {
+                    use: mockUse,
+                    add: jest.fn()
+                }
+            }));
+        renderHook(()=>usePresigningS3Client(), {
+            wrapper: createTestWrapper(proxyConfig, testCredentials)
+        });
+        expect(mockUse).not.toHaveBeenCalled();
     });
     it('should use direct endpoint when proxy is disabled', ()=>{
         const disabledProxyConfig = {
@@ -91,14 +112,14 @@ describe('usePresigningS3Client', ()=>{
             endpoint: testConfig.endpoint
         }));
     });
-    it('should return the same client instance on re-render when s3ConfigIdentifier is unchanged', ()=>{
+    it('should return the same result on re-render when s3ConfigIdentifier is unchanged', ()=>{
         const { result, rerender } = renderHook(()=>usePresigningS3Client(), {
             wrapper: createTestWrapper(testConfig, testCredentials)
         });
-        const firstClient = result.current;
+        const first = result.current;
         rerender();
-        const secondClient = result.current;
-        expect(firstClient).toBe(secondClient);
+        const second = result.current;
+        expect(first).toBe(second);
         expect(MockedS3Client).toHaveBeenCalledTimes(1);
     });
 });

package/dist/hooks/factories/index.d.ts

@@ -14,5 +14,5 @@
  */
 export { useCreateS3InfiniteQueryHook } from './useCreateS3InfiniteQueryHook';
 export { useCreateS3LoginHook } from './useCreateS3LoginHook';
-export { useCreatePresigningMutationHook, useCreateS3FunctionMutationHook, useCreateS3MutationHook, } from './useCreateS3MutationHook';
+export { type UrlRewriter, useCreatePresigningMutationHook, useCreateS3FunctionMutationHook, useCreateS3MutationHook, } from './useCreateS3MutationHook';
 export { useCreateS3QueryHook } from './useCreateS3QueryHook';

package/dist/hooks/factories/useCreateS3MutationHook.d.ts

@@ -3,4 +3,5 @@ import { type UseMutationOptions, type UseMutationResult } from '@tanstack/react
 import { type EnhancedS3Error } from '../../utils/errorHandling';
 export declare function useCreateS3MutationHook<TInput extends object, TOutput>(Command: new (input: TInput) => any, operationName: string, invalidationKeys?: string[]): (options?: Omit<UseMutationOptions<TOutput, EnhancedS3Error, TInput>, "mutationFn">) => UseMutationResult<TOutput, EnhancedS3Error, TInput>;
 export declare function useCreateS3FunctionMutationHook<TInput, TOutput>(operation: (s3Client: S3Client, input: TInput) => Promise<TOutput>, invalidationKeys?: string[]): (options?: Omit<UseMutationOptions<TOutput, EnhancedS3Error, TInput, unknown>, "mutationFn"> | undefined) => UseMutationResult<TOutput, EnhancedS3Error, TInput>;
-export declare function useCreatePresigningMutationHook<TInput, TOutput>(operation: (s3Client: S3Client, input: TInput) => Promise<TOutput>, invalidationKeys?: string[]): (options?: Omit<UseMutationOptions<TOutput, EnhancedS3Error, TInput, unknown>, "mutationFn"> | undefined) => UseMutationResult<TOutput, EnhancedS3Error, TInput>;
+export type UrlRewriter = (url: string) => string;
+export declare function useCreatePresigningMutationHook<TInput, TOutput>(operation: (s3Client: S3Client, input: TInput, rewriteUrl: UrlRewriter) => Promise<TOutput>, invalidationKeys?: string[]): (options?: Omit<UseMutationOptions<TOutput, EnhancedS3Error, TInput>, "mutationFn">) => UseMutationResult<TOutput, EnhancedS3Error, TInput>;

package/dist/hooks/factories/useCreateS3MutationHook.js

@@ -57,6 +57,24 @@ function useCreateS3FunctionMutationHook(operation, invalidationKeys) {
     return createFunctionMutationHook(operation, useS3Client, invalidationKeys);
 }
 function useCreatePresigningMutationHook(operation, invalidationKeys) {
-    return createFunctionMutationHook(operation, usePresigningS3Client, invalidationKeys);
+    return (options)=>{
+        const { s3ConfigIdentifier } = useDataBrowserContext();
+        const { client, rewriteUrl } = usePresigningS3Client();
+        const queryClient = useQueryClient();
+        return useMutation({
+            mutationFn: async (params)=>operation(client, params, rewriteUrl),
+            onSuccess: (_data, _variables)=>{
+                if (invalidationKeys) invalidationKeys.forEach((key)=>{
+                    queryClient.invalidateQueries({
+                        queryKey: [
+                            s3ConfigIdentifier,
+                            key
+                        ]
+                    });
+                });
+            },
+            ...options
+        });
+    };
 }
 export { useCreatePresigningMutationHook, useCreateS3FunctionMutationHook, useCreateS3MutationHook };

package/dist/hooks/presignedOperations.js

@@ -3,7 +3,7 @@ import { createPresignedPost } from "@aws-sdk/s3-presigned-post";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 import { createS3OperationError } from "../utils/errorHandling.js";
 import { useCreatePresigningMutationHook } from "./factories/index.js";
-const generatePresignedDownloadUrl = async (client, config)=>{
+const generatePresignedDownloadUrl = async (client, config, rewriteUrl)=>{
     try {
         const { Bucket, Key, expiresIn = 3600, ...awsOptions } = config;
         const command = new GetObjectCommand({
@@ -16,7 +16,7 @@ const generatePresignedDownloadUrl = async (client, config)=>{
         });
         const expiresAt = new Date(Date.now() + 1000 * expiresIn);
         return {
-            Url: url,
+            Url: rewriteUrl(url),
             ExpiresAt: expiresAt,
             Bucket: Bucket,
             Key: Key,
@@ -26,7 +26,7 @@ const generatePresignedDownloadUrl = async (client, config)=>{
         throw createS3OperationError(error, 'GeneratePresignedDownload', config.Bucket, config.Key);
     }
 };
-const generatePresignedUploadUrl = async (client, config)=>{
+const generatePresignedUploadUrl = async (client, config, rewriteUrl)=>{
     try {
         const { Bucket, Key, expiresIn = 3600, ...awsOptions } = config;
         const command = new PutObjectCommand({
@@ -39,7 +39,7 @@ const generatePresignedUploadUrl = async (client, config)=>{
         });
         const expiresAt = new Date(Date.now() + 1000 * expiresIn);
         return {
-            Url: url,
+            Url: rewriteUrl(url),
             ExpiresAt: expiresAt,
             Bucket: Bucket,
             Key: Key
@@ -48,7 +48,7 @@ const generatePresignedUploadUrl = async (client, config)=>{
         throw createS3OperationError(error, 'GeneratePresignedUpload', config.Bucket, config.Key);
     }
 };
-const generatePresignedPost = async (client, config)=>{
+const generatePresignedPost = async (client, config, rewriteUrl)=>{
     try {
         const { Bucket, Key, expiresIn = 3600, ...awsOptions } = config;
         const presignedPost = await createPresignedPost(client, {
@@ -60,6 +60,7 @@ const generatePresignedPost = async (client, config)=>{
         const expiresAt = new Date(Date.now() + 1000 * expiresIn);
         return {
             ...presignedPost,
+            url: rewriteUrl(presignedPost.url),
             ExpiresAt: expiresAt
         };
     } catch (error) {

package/dist/hooks/useDownloadObject.d.ts

@@ -0,0 +1,18 @@
+import { type GetObjectCommandInput } from '@aws-sdk/client-s3';
+import { type EnhancedS3Error } from '../utils/errorHandling';
+type DownloadObjectInput = GetObjectCommandInput & {
+    filename: string;
+};
+/**
+ * Hook for downloading S3 objects via the S3 SDK client.
+ *
+ * Uses the normal S3 client (with proxy middleware) to fetch the object,
+ * avoiding presigned URL signature issues through reverse proxies.
+ *
+ * Download strategy:
+ * 1. If File System Access API is available (Chrome/Edge): stream
+ *    directly to disk via showSaveFilePicker, no memory buffering
+ * 2. Otherwise: buffer via transformToByteArray and download via Blob URL
+ */
+export declare const useDownloadObject: () => import("@tanstack/react-query").UseMutationResult<void, EnhancedS3Error, DownloadObjectInput, unknown>;
+export {};

package/dist/hooks/useDownloadObject.js

@@ -0,0 +1,59 @@
+import { GetObjectCommand } from "@aws-sdk/client-s3";
+import { useMutation } from "@tanstack/react-query";
+import { createS3OperationError } from "../utils/errorHandling.js";
+import { useS3Client } from "./useS3Client.js";
+const supportsStreamDownload = ()=>'undefined' != typeof window && 'showSaveFilePicker' in window;
+async function streamDownload(stream, filename) {
+    const handle = await window.showSaveFilePicker({
+        suggestedName: filename
+    });
+    const writable = await handle.createWritable();
+    await stream.pipeTo(writable);
+}
+function downloadViaBlob(bytes, filename, contentType) {
+    const blob = new Blob([
+        bytes
+    ], {
+        type: contentType
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(()=>{
+        URL.revokeObjectURL(url);
+        if (document.body.contains(link)) document.body.removeChild(link);
+    }, 100);
+}
+const useDownloadObject = ()=>{
+    const s3Client = useS3Client();
+    return useMutation({
+        mutationFn: async ({ filename, ...params })=>{
+            try {
+                if (supportsStreamDownload()) {
+                    const response = await s3Client.send(new GetObjectCommand(params));
+                    if (!response.Body) throw new Error('Empty response body');
+                    try {
+                        const stream = response.Body.transformToWebStream();
+                        await streamDownload(stream, filename);
+                        return;
+                    } catch (error) {
+                        if (error?.name === 'AbortError') return;
+                        console.warn('Stream download failed, falling back to blob:', error);
+                    }
+                }
+                const response = await s3Client.send(new GetObjectCommand(params));
+                if (!response.Body) throw new Error('Empty response body');
+                const bytes = await response.Body.transformToByteArray();
+                const contentType = response.ContentType || 'application/octet-stream';
+                downloadViaBlob(bytes, filename, contentType);
+            } catch (error) {
+                throw createS3OperationError(error, 'DownloadObject', params.Bucket, params.Key);
+            }
+        }
+    });
+};
+export { useDownloadObject };

package/dist/hooks/usePresigningS3Client.d.ts

@@ -1,13 +1,20 @@
 import { S3Client } from '@aws-sdk/client-s3';
 /**
- * Hook to get an S3 client specifically for presigned URL generation.
+ * Hook for presigned URL generation that works through reverse proxies.
  *
- * When proxy is configured, presigned URLs must use the proxy endpoint
- * (browser-accessible) rather than the internal target. This client is
- * created WITHOUT proxy middleware so that `getSignedUrl` produces URLs
- * pointing to the proxy endpoint instead of the internal S3 service.
+ * Returns an S3 client pointed at the real S3 target (for correct SigV4
+ * signing) plus a `rewriteUrl` function that rewrites the generated URL
+ * to go through the proxy so browsers can reach it.
  *
- * For non-proxy configurations, this returns a standard S3 client
- * identical to `useS3Client`.
+ * Flow:
+ * 1. getSignedUrl() signs against the S3 target → signature covers
+ *    target host + clean path (no proxy prefix)
+ * 2. rewriteUrl() replaces host/protocol/port and prepends the proxy
+ *    path prefix → URL is browser-accessible
+ * 3. Browser hits the proxy (NGINX), which strips the prefix and
+ *    forwards to S3 with the target Host → matches the signature
  */
-export declare const usePresigningS3Client: () => S3Client;
+export declare const usePresigningS3Client: () => {
+    client: S3Client;
+    rewriteUrl: (url: string) => string;
+};

package/dist/hooks/usePresigningS3Client.js

@@ -1,19 +1,47 @@
 import { S3Client } from "@aws-sdk/client-s3";
 import { useMemo } from "react";
 import { useDataBrowserContext } from "../components/providers/DataBrowserProvider.js";
-import { resolveProxyEndpoint } from "../utils/proxyMiddleware.js";
+import { parseEndpoint, resolveProxyEndpoint } from "../utils/proxyMiddleware.js";
 const usePresigningS3Client = ()=>{
     const { s3ConfigIdentifier, getS3Config } = useDataBrowserContext();
     if (!getS3Config) throw new Error('usePresigningS3Client: S3 config not available. Ensure DataBrowserProvider has getS3Config prop set.');
     return useMemo(()=>{
         const config = getS3Config();
-        const endpoint = config.proxy?.enabled ? resolveProxyEndpoint(config.proxy.endpoint) : config.endpoint;
-        return new S3Client({
-            endpoint,
+        if (!config.proxy?.enabled) {
+            const client = new S3Client({
+                endpoint: config.endpoint,
+                credentials: config.credentials,
+                forcePathStyle: config.forcePathStyle ?? true,
+                region: config.region
+            });
+            return {
+                client,
+                rewriteUrl: (url)=>url
+            };
+        }
+        const target = parseEndpoint(config.proxy.target);
+        const targetEndpoint = `${target.protocol}//${target.hostname}${80 !== target.port && 443 !== target.port ? `:${target.port}` : ''}`;
+        const client = new S3Client({
+            endpoint: targetEndpoint,
             credentials: config.credentials,
             forcePathStyle: config.forcePathStyle ?? true,
             region: config.region
         });
+        const proxyEndpoint = resolveProxyEndpoint(config.proxy.endpoint);
+        const proxy = parseEndpoint(proxyEndpoint);
+        const proxyOrigin = `${proxy.protocol}//${proxy.hostname}${80 !== proxy.port && 443 !== proxy.port ? `:${proxy.port}` : ''}`;
+        const proxyPathPrefix = proxy.pathname || '';
+        const rewriteUrl = (url)=>{
+            const parsed = new URL(url);
+            const rewritten = new URL(proxyOrigin);
+            rewritten.pathname = proxyPathPrefix + parsed.pathname;
+            rewritten.search = parsed.search;
+            return rewritten.toString();
+        };
+        return {
+            client,
+            rewriteUrl
+        };
     }, [
         s3ConfigIdentifier
     ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/data-browser-library",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A modular React component library for browsing S3 buckets and objects",
   "type": "module",
   "types": "./dist/index.d.ts",