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

package/dist/utils/errorHandling.js

@@ -0,0 +1,84 @@
+import { InvalidObjectState, InvalidRequest, InvalidWriteOffset, NoSuchBucket, NoSuchKey, NoSuchUpload, ObjectAlreadyInActiveTierError, ObjectNotInActiveTierError } from "@aws-sdk/client-s3";
+var errorHandling_ErrorCategory = /*#__PURE__*/ function(ErrorCategory) {
+    ErrorCategory["CLIENT_ERROR"] = "CLIENT_ERROR";
+    ErrorCategory["SERVER_ERROR"] = "SERVER_ERROR";
+    ErrorCategory["NETWORK_ERROR"] = "NETWORK_ERROR";
+    ErrorCategory["CANCELLATION"] = "CANCELLATION";
+    ErrorCategory["AUTHORIZATION"] = "AUTHORIZATION";
+    ErrorCategory["NOT_FOUND"] = "NOT_FOUND";
+    ErrorCategory["UNKNOWN"] = "UNKNOWN";
+    return ErrorCategory;
+}({});
+class EnhancedS3Error extends Error {
+    category;
+    statusCode;
+    metadata;
+    originalError;
+    context;
+    constructor(message, name, category, originalError, statusCode, metadata, context){
+        super(message);
+        this.name = name;
+        this.category = category;
+        this.statusCode = statusCode;
+        this.metadata = metadata;
+        this.originalError = originalError;
+        this.context = context;
+        Object.setPrototypeOf(this, EnhancedS3Error.prototype);
+    }
+    shouldRetry() {
+        return "SERVER_ERROR" === this.category || "NETWORK_ERROR" === this.category;
+    }
+}
+function classifyByStatusCode(statusCode) {
+    if (statusCode >= 400 && statusCode < 500) {
+        if (401 === statusCode || 403 === statusCode) return "AUTHORIZATION";
+        if (404 === statusCode) return "NOT_FOUND";
+        return "CLIENT_ERROR";
+    }
+    return statusCode >= 500 ? "SERVER_ERROR" : "UNKNOWN";
+}
+function isS3ServiceException(error) {
+    return error instanceof Error && "$metadata" in error;
+}
+function isEnhancedS3Error(error) {
+    return error instanceof EnhancedS3Error;
+}
+function createS3Error(error, context) {
+    if (error instanceof Error && "AbortError" === error.name) return new EnhancedS3Error("Operation was cancelled", "AbortError", "CANCELLATION", error, void 0, void 0, context);
+    if (error instanceof NoSuchBucket || error instanceof NoSuchKey || error instanceof NoSuchUpload) return new EnhancedS3Error(error.message, error.name, "NOT_FOUND", error, error.$metadata?.httpStatusCode, error.$metadata, context);
+    if (error instanceof InvalidRequest || error instanceof InvalidObjectState || error instanceof InvalidWriteOffset || error instanceof ObjectAlreadyInActiveTierError || error instanceof ObjectNotInActiveTierError) return new EnhancedS3Error(error.message, error.name, "CLIENT_ERROR", error, error.$metadata?.httpStatusCode, error.$metadata, context);
+    if (isS3ServiceException(error)) {
+        const category = error.$metadata?.httpStatusCode ? classifyByStatusCode(error.$metadata.httpStatusCode) : "UNKNOWN";
+        return new EnhancedS3Error(error.message, error.name, category, error, error.$metadata?.httpStatusCode, error.$metadata, context);
+    }
+    if (error instanceof Error) {
+        const isNetwork = /network|connection|timeout|dns/i.test(error.message) || error.name.includes("Network") || error.name.includes("Timeout");
+        return new EnhancedS3Error(error.message, error.name, isNetwork ? "NETWORK_ERROR" : "UNKNOWN", error, void 0, void 0, context);
+    }
+    const message = "string" == typeof error ? error : "Unknown error occurred";
+    return new EnhancedS3Error(message, "UnknownError", "UNKNOWN", new Error(message), void 0, void 0, context);
+}
+function createS3OperationError(error, operation, bucketName, objectKey) {
+    const context = {
+        operation,
+        bucketName,
+        objectKey,
+        timestamp: new Date().toISOString()
+    };
+    const enhancedError = createS3Error(error, context);
+    if (!enhancedError.message.includes(operation)) {
+        const prefix = bucketName ? `${operation} failed for bucket '${bucketName}'${objectKey ? `, key '${objectKey}'` : ""}` : `${operation} failed`;
+        return new EnhancedS3Error(`${prefix}: ${enhancedError.message}`, enhancedError.name, enhancedError.category, enhancedError.originalError, enhancedError.statusCode, enhancedError.metadata, context);
+    }
+    return enhancedError;
+}
+function shouldRetryError(error, failureCount, maxRetries = 3) {
+    if (failureCount >= maxRetries) return false;
+    return isEnhancedS3Error(error) ? error.shouldRetry() : createS3Error(error).shouldRetry();
+}
+function isNotFoundError(error) {
+    if (!error) return false;
+    const enhancedError = isEnhancedS3Error(error) ? error : createS3Error(error);
+    return "NOT_FOUND" === enhancedError.category;
+}
+export { EnhancedS3Error, errorHandling_ErrorCategory as ErrorCategory, createS3Error, createS3OperationError, isEnhancedS3Error, isNotFoundError, isS3ServiceException, shouldRetryError };

package/dist/utils/hooks.d.ts

@@ -0,0 +1,2 @@
+export declare const useQueryParams: () => URLSearchParams;
+export declare const usePrefixWithSlash: () => string;

package/dist/utils/hooks.js

@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+import { useLocation } from "react-router-dom";
+const useQueryParams = ()=>{
+    const location = useLocation();
+    return useMemo(()=>new URLSearchParams(location.search), [
+        location.search
+    ]);
+};
+const usePrefixWithSlash = ()=>{
+    const query = useQueryParams();
+    return useMemo(()=>{
+        const prefix = query.get("prefix");
+        if (!prefix) return "";
+        if (!prefix || "/" === prefix.slice(-1)) return prefix;
+        {
+            const prefixArr = prefix.split("/");
+            prefixArr.pop();
+            if (!prefixArr.length) return "";
+            const joinedPrefix = prefixArr.join("/");
+            return joinedPrefix ? "/" !== joinedPrefix.slice(-1) ? `${joinedPrefix}/` : joinedPrefix : "";
+        }
+    }, [
+        query
+    ]);
+};
+export { usePrefixWithSlash, useQueryParams };

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./s3Client";
+export * from "./errorHandling";
+export * from "./constants";
+export * from "./s3RuleUtils";

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+export * from "./s3Client.js";
+export * from "./errorHandling.js";
+export * from "./constants.js";
+export * from "./s3RuleUtils.js";

package/dist/utils/proxyMiddleware.d.ts

@@ -0,0 +1,18 @@
+import { Pluggable } from "@aws-sdk/types";
+interface ProxyConfig {
+    realS3Host: string;
+    proxyBasePath: string;
+    proxyHost: string;
+    proxyPort: number;
+}
+/**
+ * Creates a two-stage proxy middleware for AWS SDK v3
+ *
+ * This middleware enables proper S3 request signing through a development proxy:
+ * 1. Pre-signing: Modifies requests to use real S3 host for correct signature calculation
+ * 2. Post-signing: Routes signed requests through proxy to avoid CORS issues
+ *
+ * @param config Proxy configuration from build-time constants
+ */
+export declare const createProxyMiddleware: (config: ProxyConfig) => Pluggable<any, any>;
+export {};

package/dist/utils/proxyMiddleware.js

@@ -0,0 +1,56 @@
+import { HttpRequest } from "@aws-sdk/protocol-http";
+const createProxyMiddleware = (config)=>({
+        applyToStack: (clientStack)=>{
+            const preSigningMiddleware = (next)=>async (args)=>{
+                    const { request } = args;
+                    if (HttpRequest.isInstance(request) && request.hostname === config.proxyHost) {
+                        const originalQuery = request.query || {};
+                        if (request.path.startsWith(config.proxyBasePath)) {
+                            request.path = request.path.replace(config.proxyBasePath, '');
+                            if (!request.path.startsWith('/')) request.path = '/' + request.path;
+                        }
+                        request.hostname = config.realS3Host;
+                        request.port = 443;
+                        request.protocol = 'https:';
+                        request.headers.host = config.realS3Host;
+                        request.query = originalQuery;
+                        console.log('Pre-signing: Modified for real S3 signing', {
+                            path: request.path,
+                            host: request.hostname,
+                            query: request.query
+                        });
+                    }
+                    return next(args);
+                };
+            const postSigningMiddleware = (next)=>async (args)=>{
+                    const { request } = args;
+                    if (HttpRequest.isInstance(request) && request.hostname === config.realS3Host) {
+                        const queryParams = request.query || {};
+                        request.hostname = config.proxyHost;
+                        request.port = config.proxyPort;
+                        request.protocol = 'http:';
+                        request.path = config.proxyBasePath + request.path;
+                        request.headers.host = `${config.proxyHost}:${config.proxyPort}`;
+                        request.query = queryParams;
+                        console.log('Post-signing: Routed to proxy', {
+                            host: request.hostname,
+                            path: request.path,
+                            query: request.query,
+                            hasAuth: !!request.headers.authorization
+                        });
+                    }
+                    return next(args);
+                };
+            clientStack.add(preSigningMiddleware, {
+                step: "build",
+                name: "proxyPreSigningMiddleware",
+                priority: "high"
+            });
+            clientStack.add(postSigningMiddleware, {
+                step: "finalizeRequest",
+                name: "proxyPostSigningMiddleware",
+                priority: "high"
+            });
+        }
+    });
+export { createProxyMiddleware };

package/dist/utils/s3Client.d.ts

@@ -0,0 +1,5 @@
+import { S3Client } from "@aws-sdk/client-s3";
+import { S3BrowserConfig, S3Credentials } from "../types";
+export declare const createS3Client: (config: S3BrowserConfig & {
+    credentials: S3Credentials;
+}) => S3Client;

package/dist/utils/s3Client.js

@@ -0,0 +1,36 @@
+import { S3Client } from "@aws-sdk/client-s3";
+import { createProxyMiddleware } from "./proxyMiddleware.js";
+import { S3ConfigurationFactory } from "../config/factory.js";
+function extractProxyConfig(config) {
+    if (config.useDevProxy && config.realS3Host && config.proxyPath) return {
+        realS3Host: config.realS3Host,
+        proxyBasePath: config.proxyPath,
+        proxyHost: config.proxyHost || "localhost",
+        proxyPort: config.proxyPort || 8084
+    };
+    const proxyConfig = S3ConfigurationFactory.createProxyConfiguration();
+    if (proxyConfig.useProxy && proxyConfig.proxyConfig) return {
+        realS3Host: proxyConfig.proxyConfig.realHost,
+        proxyBasePath: proxyConfig.proxyConfig.proxyBasePath,
+        proxyHost: proxyConfig.proxyConfig.proxyHost,
+        proxyPort: proxyConfig.proxyConfig.proxyPort
+    };
+    return null;
+}
+const createS3Client = (config)=>{
+    const client = new S3Client({
+        ...config,
+        credentials: config.credentials,
+        forcePathStyle: config.forcePathStyle ?? true,
+        region: config.region
+    });
+    const proxyConfig = extractProxyConfig(config);
+    if (proxyConfig) client.middlewareStack.use(createProxyMiddleware({
+        realS3Host: proxyConfig.realS3Host,
+        proxyBasePath: proxyConfig.proxyBasePath,
+        proxyHost: proxyConfig.proxyHost,
+        proxyPort: proxyConfig.proxyPort
+    }));
+    return client;
+};
+export { createS3Client };

package/dist/utils/s3RuleUtils.d.ts

@@ -0,0 +1,53 @@
+export declare const AWS_RULE_LIMITS: {
+    RULE_ID_MAX_LENGTH: number;
+    TAG_KEY_MAX_LENGTH: number;
+    TAG_VALUE_MAX_LENGTH: number;
+};
+export declare const STATUS_OPTIONS: readonly [{
+    readonly value: "Enabled";
+    readonly label: "Enabled";
+}, {
+    readonly value: "Disabled";
+    readonly label: "Disabled";
+}];
+export type FilterType = "none" | "prefix" | "tags" | "and";
+/**
+ * Filter data for S3 rules. All fields are present for form handling,
+ * but only certain fields are used based on filterType.
+ */
+export interface FilterData {
+    filterType: FilterType;
+    prefix: string;
+    tags: Array<{
+        key: string;
+        value: string;
+    }>;
+}
+/**
+ * Type-safe filter specification for S3 rule building.
+ * Each variant only includes the fields relevant to that filter type.
+ */
+export type FilterSpec = {
+    type: "none";
+} | {
+    type: "prefix";
+    prefix: string;
+} | {
+    type: "tags";
+    tags: Array<{
+        key: string;
+        value: string;
+    }>;
+} | {
+    type: "and";
+    prefix: string;
+    tags: Array<{
+        key: string;
+        value: string;
+    }>;
+};
+/**
+ * Converts form FilterData to type-safe FilterSpec.
+ */
+export declare function toFilterSpec(data: FilterData): FilterSpec;
+export declare function buildS3Filter(data: FilterData): Record<string, unknown>;

package/dist/utils/s3RuleUtils.js

@@ -0,0 +1,101 @@
+const AWS_RULE_LIMITS = {
+    RULE_ID_MAX_LENGTH: 255,
+    TAG_KEY_MAX_LENGTH: 128,
+    TAG_VALUE_MAX_LENGTH: 256
+};
+const STATUS_OPTIONS = [
+    {
+        value: "Enabled",
+        label: "Enabled"
+    },
+    {
+        value: "Disabled",
+        label: "Disabled"
+    }
+];
+function toFilterSpec(data) {
+    switch(data.filterType){
+        case "none":
+            return {
+                type: "none"
+            };
+        case "prefix":
+            return {
+                type: "prefix",
+                prefix: data.prefix
+            };
+        case "tags":
+            return {
+                type: "tags",
+                tags: data.tags
+            };
+        case "and":
+            return {
+                type: "and",
+                prefix: data.prefix,
+                tags: data.tags
+            };
+    }
+}
+function buildS3Filter(data) {
+    const spec = toFilterSpec(data);
+    switch(spec.type){
+        case "none":
+            return {};
+        case "prefix":
+            return {
+                Prefix: spec.prefix
+            };
+        case "tags":
+            if (0 === spec.tags.length) return {};
+            if (1 === spec.tags.length) return {
+                Tag: {
+                    Key: spec.tags[0].key,
+                    Value: spec.tags[0].value
+                }
+            };
+            return {
+                And: {
+                    Tags: spec.tags.map((tag)=>({
+                            Key: tag.key,
+                            Value: tag.value
+                        }))
+                }
+            };
+        case "and":
+            {
+                const hasPrefix = spec.prefix && "" !== spec.prefix.trim();
+                const hasTags = spec.tags.length > 0;
+                if (!hasTags && !hasPrefix) return {};
+                if (!hasTags && hasPrefix) return {
+                    Prefix: spec.prefix
+                };
+                if (hasTags && !hasPrefix) {
+                    if (1 === spec.tags.length) return {
+                        Tag: {
+                            Key: spec.tags[0].key,
+                            Value: spec.tags[0].value
+                        }
+                    };
+                    return {
+                        And: {
+                            Tags: spec.tags.map((tag)=>({
+                                    Key: tag.key,
+                                    Value: tag.value
+                                }))
+                        }
+                    };
+                }
+                return {
+                    And: {
+                        Prefix: spec.prefix,
+                        Tags: spec.tags.map((tag)=>({
+                                Key: tag.key,
+                                Value: tag.value
+                            }))
+                    }
+                };
+            }
+    }
+}
+export { AWS_RULE_LIMITS, STATUS_OPTIONS, buildS3Filter, toFilterSpec };

package/dist/utils/useFeatures.d.ts

@@ -0,0 +1 @@
+export declare function useFeatures(feature: string): boolean | undefined;

package/dist/utils/useFeatures.js

@@ -0,0 +1,7 @@
+import { useDataBrowserContext } from "../components/index.js";
+function useFeatures(feature) {
+    const { getS3Config } = useDataBrowserContext();
+    const config = getS3Config();
+    return config?.credentials?.features?.includes(feature);
+}
+export { useFeatures };

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@scality/data-browser-library",
+  "version": "1.0.0-preview.11",
+  "description": "A modular React component library for browsing S3 buckets and objects",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "jest",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.478.0",
+    "@aws-sdk/protocol-http": "^3.370.0",
+    "@aws-sdk/s3-presigned-post": "^3.888.0",
+    "@aws-sdk/s3-request-presigner": "^3.478.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@monaco-editor/react": "^4.7.0",
+    "@tanstack/react-query": "^5.8.0",
+    "@tanstack/react-query-devtools": "^5.8.0",
+    "@testing-library/user-event": "^14.6.1",
+    "joi": "^18.0.1",
+    "react-dropzone": "^14.2.0",
+    "react-hook-form": "^7.48.0",
+    "@scality/zenkoclient": "^2.0.0-preview.1"
+  },
+  "peerDependencies": {
+    "@scality/core-ui": "^0.174.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "react-router-dom": ">=6.0.0",
+    "styled-components": "^5.0.0"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^1.4.1",
+    "@rslib/core": "^0.14.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^15.0.6",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/styled-components": "^5.1.34",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5",
+    "msw": "^0.28.2",
+    "ts-jest": "^29.4.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scality/data-browser.git",
+    "directory": "packages/data-browser-library"
+  },
+  "keywords": [
+    "s3",
+    "aws",
+    "react",
+    "browser",
+    "data",
+    "scality",
+    "tanstack",
+    "react-query",
+    "component-library"
+  ],
+  "author": "Scality",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  }
+}