@scality/data-browser-library 1.0.7 → 1.0.9

package/dist/hooks/useBucketConfigEditor.d.ts

@@ -1,4 +1,4 @@
-import type { BeforeMount } from '@monaco-editor/react';
+import type { JSONSchema7 } from 'json-schema';
 import { useForm } from 'react-hook-form';
 type FormValues = {
     content: string;
@@ -13,10 +13,9 @@ export type BucketConfigEditorConfig = {
     initialContent: string | undefined;
     defaultTemplate: string;
     isLoading: boolean;
-    notFoundErrorNames: string[];
     errorInstance: Error | null;
     validate: (content: string) => ValidationResult;
-    monacoSchema?: unknown;
+    jsonSchema?: JSONSchema7;
 };
 export type BucketConfigEditorResult = {
     bucketName: string;
@@ -24,8 +23,9 @@ export type BucketConfigEditorResult = {
     content: string;
     isCreateMode: boolean;
     isValidFormat: boolean;
-    handleBeforeMount: BeforeMount;
+    jsonSchema?: JSONSchema7;
     navigateToBucket: () => void;
+    loadTemplate: () => void;
 };
 export declare const useBucketConfigEditor: (config: BucketConfigEditorConfig) => BucketConfigEditorResult;
 export {};

package/dist/hooks/useBucketConfigEditor.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
+import { isNotFoundError } from "../utils/errorHandling.js";
 import { useDataBrowserNavigate } from "./useDataBrowserNavigate.js";
 const useBucketConfigEditor = (config)=>{
     const navigate = useDataBrowserNavigate();
@@ -12,12 +13,8 @@ const useBucketConfigEditor = (config)=>{
     });
     const { watch, reset } = form;
     const content = watch('content');
-    const isCreateMode = useMemo(()=>{
-        if (!config.errorInstance) return false;
-        return config.notFoundErrorNames.some((name)=>config.errorInstance?.name === name);
-    }, [
-        config.errorInstance,
-        config.notFoundErrorNames
+    const isCreateMode = useMemo(()=>isNotFoundError(config.errorInstance), [
+        config.errorInstance
     ]);
     const initialValue = useMemo(()=>{
         if (config.initialContent) try {
@@ -26,10 +23,9 @@ const useBucketConfigEditor = (config)=>{
         } catch  {
             return config.initialContent;
         }
-        return config.defaultTemplate;
+        return '';
     }, [
-        config.initialContent,
-        config.defaultTemplate
+        config.initialContent
     ]);
     useEffect(()=>{
         reset({
@@ -43,40 +39,29 @@ const useBucketConfigEditor = (config)=>{
         content,
         config.validate
     ]);
-    const handleBeforeMount = useCallback((monaco)=>{
-        const jsonLanguage = monaco.languages.json;
-        if (jsonLanguage?.jsonDefaults) if (config.monacoSchema) jsonLanguage.jsonDefaults.setDiagnosticsOptions({
-            validate: true,
-            schemas: [
-                {
-                    uri: 'http://myserver/schema.json',
-                    fileMatch: [
-                        '*'
-                    ],
-                    schema: config.monacoSchema
-                }
-            ]
-        });
-        else jsonLanguage.jsonDefaults.setDiagnosticsOptions({
-            validate: true
-        });
-    }, [
-        config.monacoSchema
-    ]);
     const navigateToBucket = useCallback(()=>{
         navigate(`/buckets/${bucketName}`);
     }, [
         navigate,
         bucketName
     ]);
+    const loadTemplate = useCallback(()=>{
+        form.setValue('content', config.defaultTemplate, {
+            shouldDirty: true
+        });
+    }, [
+        form,
+        config.defaultTemplate
+    ]);
     return {
         bucketName,
         form,
         content,
         isCreateMode,
         isValidFormat,
-        handleBeforeMount,
-        navigateToBucket
+        jsonSchema: config.jsonSchema,
+        navigateToBucket,
+        loadTemplate
     };
 };
 export { useBucketConfigEditor };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './config/factory';
+export * from './config/resolveBrandingTheme';
 export * from './config/types';
 export * from './hooks';
 export * from './types';

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from "./components/index.js";
 export * from "./config/factory.js";
+export * from "./config/resolveBrandingTheme.js";
 export * from "./config/types.js";
 export * from "./hooks/index.js";
 export * from "./types/index.js";

package/dist/test/mocks/esmOnlyModules.js

@@ -0,0 +1,4 @@
+module.exports = {
+    createHighlighterCore: ()=>Promise.resolve({}),
+    fromHighlighter: ()=>()=>{}
+};

package/dist/types/index.d.ts

@@ -2,7 +2,6 @@ import type { S3ClientConfig } from '@aws-sdk/client-s3';
 import type { AwsCredentialIdentity } from '@aws-sdk/types';
 import type { ProxyConfiguration, S3EventType } from '../config/types';
 export type { _Object, Bucket, BucketCannedACL, BucketLocationConstraint, CopyObjectCommandInput, CopyObjectCommandOutput, CreateBucketCommandInput, CreateBucketCommandOutput, DeleteBucketCommandInput, DeleteBucketCommandOutput, DeleteBucketCorsCommandOutput, DeleteBucketLifecycleCommandOutput, DeleteBucketPolicyCommandOutput, DeleteBucketReplicationCommandOutput, DeleteBucketTaggingCommandOutput, DeleteMarkerEntry, DeleteObjectCommandInput, DeleteObjectCommandOutput, DeleteObjectsCommandInput, DeleteObjectsCommandOutput, DeleteObjectTaggingCommandOutput, GetBucketAclCommandOutput, GetBucketCorsCommandOutput, GetBucketEncryptionCommandOutput, GetBucketLifecycleConfigurationCommandOutput, GetBucketLocationCommandInput, GetBucketLocationCommandOutput, GetBucketNotificationConfigurationCommandOutput, GetBucketPolicyCommandOutput, GetBucketReplicationCommandOutput, GetBucketTaggingCommandOutput, GetBucketVersioningCommandOutput, GetObjectAclCommandOutput, GetObjectAttributesCommandInput, GetObjectAttributesCommandOutput, GetObjectCommandInput, GetObjectCommandOutput, GetObjectLegalHoldCommandOutput, GetObjectLockConfigurationCommandOutput, GetObjectRetentionCommandOutput, GetObjectTaggingCommandOutput, GetObjectTorrentCommandOutput, HeadObjectCommandInput, HeadObjectCommandOutput, ListBucketsCommandOutput, ListMultipartUploadsCommandInput, ListMultipartUploadsCommandOutput, ListObjectsV2CommandInput, ListObjectsV2CommandOutput, ListObjectVersionsCommandInput, ListObjectVersionsCommandOutput, ObjectCannedACL, ObjectVersion, Owner, PutBucketAclCommandInput, PutBucketCorsCommandInput, PutBucketEncryptionCommandInput, PutBucketLifecycleConfigurationCommandInput, PutBucketNotificationConfigurationCommandInput, PutBucketPolicyCommandInput, PutBucketReplicationCommandInput, PutBucketTaggingCommandInput, PutBucketTaggingCommandOutput, PutBucketVersioningCommandInput, PutObjectAclCommandInput, PutObjectCommandInput, PutObjectCommandOutput, PutObjectLegalHoldCommandInput, PutObjectLockConfigurationCommandInput, PutObjectRetentionCommandInput, PutObjectTaggingCommandInput, RestoreObjectCommandInput, RestoreObjectCommandOutput, SelectObjectContentCommandInput, SelectObjectContentCommandOutput, Tag, } from '@aws-sdk/client-s3';
-export type { MonacoJsonDefaults, MonacoLanguagesJson } from './monaco';
 /**
  * S3 backend capabilities configuration.
  */

package/dist/utils/__tests__/proxyMiddleware.test.js

@@ -333,12 +333,45 @@ describe('createProxyMiddleware', ()=>{
             expect(mockRequest.protocol).toBe('http:');
             expect(mockRequest.path).toBe('/api/s3/bucket/key');
             expect(mockRequest.headers.host).toBe('localhost:3000');
+            expect(mockRequest.headers['x-s3-target-endpoint']).toBe('https://s3.amazonaws.com');
             expect(mockRequest.query).toEqual({
                 param: 'value'
             });
             expect(mockRequest.headers.authorization).toBe('AWS4-HMAC-SHA256 Credential=...');
             expect(mockNext).toHaveBeenCalledTimes(1);
         });
+        it('should set X-S3-Target-Endpoint header with custom port', async ()=>{
+            const mockNext = jest.fn().mockResolvedValue({
+                output: {}
+            });
+            const mockStack = {
+                add: jest.fn((middleware, config)=>{
+                    if ('finalizeRequest' === config.step) mockStack.postSigningMiddleware = middleware;
+                }),
+                postSigningMiddleware: null
+            };
+            const middleware = createProxyMiddleware({
+                enabled: true,
+                endpoint: 'http://localhost:3000/api/s3',
+                target: 'http://s3.local:9000'
+            });
+            middleware.applyToStack(mockStack);
+            const postSigningMiddleware = mockStack.postSigningMiddleware(mockNext);
+            const mockRequest = new HttpRequest({
+                hostname: 's3.local',
+                port: 9000,
+                path: '/bucket/key',
+                protocol: 'http:',
+                headers: {
+                    host: 's3.local:9000'
+                }
+            });
+            await postSigningMiddleware({
+                request: mockRequest,
+                input: {}
+            });
+            expect(mockRequest.headers['x-s3-target-endpoint']).toBe('http://s3.local:9000');
+        });
         it('should preserve authorization header when routing through proxy', async ()=>{
             const mockNext = jest.fn().mockResolvedValue({
                 output: {}
@@ -574,6 +607,7 @@ describe('createProxyMiddleware', ()=>{
             expect(mockRequest.hostname).toBe(originalHostname);
             expect(mockRequest.path).toBe(originalPath);
             expect(mockRequest.port).toBe(originalPort);
+            expect(mockRequest.headers['x-s3-target-endpoint']).toBeUndefined();
         });
     });
 });

package/dist/utils/proxyMiddleware.js

@@ -52,6 +52,7 @@ const createProxyMiddleware = (config)=>{
     const resolvedProxyEndpoint = resolveProxyEndpoint(config.endpoint);
     const target = parseEndpoint(config.target);
     const proxy = parseEndpoint(resolvedProxyEndpoint);
+    const targetEndpointUrl = `${target.protocol}//${target.hostname}${80 !== target.port && 443 !== target.port ? `:${target.port}` : ''}`;
     return {
         applyToStack: (clientStack)=>{
             const preSigningMiddleware = (next)=>async (args)=>{
@@ -90,6 +91,7 @@ const createProxyMiddleware = (config)=>{
                         request.protocol = proxy.protocol;
                         request.path = '' === proxy.pathname || '/' === proxy.pathname ? request.path : proxy.pathname + request.path;
                         request.headers.host = proxy.port && 80 !== proxy.port && 443 !== proxy.port ? `${proxy.hostname}:${proxy.port}` : proxy.hostname;
+                        request.headers['x-s3-target-endpoint'] = targetEndpointUrl;
                         request.query = queryParams;
                     }
                     return next(args);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/data-browser-library",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A modular React component library for browsing S3 buckets and objects",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -30,8 +30,7 @@
     "@aws-sdk/s3-presigned-post": "^3.983.0",
     "@aws-sdk/s3-request-presigner": "^3.983.0",
     "@hookform/resolvers": "^5.2.2",
-    "@monaco-editor/react": "^4.7.0",
-    "@scality/zenkoclient": "^2.0.0-preview.1",
+    "@scality/cloudserverclient": "^1.0.4",
     "@tanstack/react-query": "^5.8.0",
     "@tanstack/react-query-devtools": "^5.8.0",
     "@testing-library/user-event": "^14.6.1",
@@ -40,7 +39,7 @@
     "react-hook-form": "^7.48.0"
   },
   "peerDependencies": {
-    "@scality/core-ui": ">=0.197.0",
+    "@scality/core-ui": ">=0.202.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router": ">=7.1.3",
@@ -54,6 +53,7 @@
     "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
+    "@types/json-schema": "^7.0.15",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/styled-components": "^5.1.34",

package/dist/components/Editor.d.ts

@@ -1,12 +0,0 @@
-import { type BeforeMount, type EditorProps } from '@monaco-editor/react';
-interface EditorComponentProps {
-    value: string;
-    onChange: (value: string | undefined) => void;
-    readOnly?: boolean;
-    language?: string;
-    height?: string;
-    width?: string;
-    beforeMount?: BeforeMount;
-}
-export declare const Editor: React.FC<EditorComponentProps & EditorProps>;
-export {};

package/dist/components/Editor.js

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import react from "@monaco-editor/react";
-const Editor = ({ value, onChange, readOnly = false, language = 'json', height = '400px', width = '100%', beforeMount, ...rest })=>{
-    const editorTheme = 'vs-dark';
-    return /*#__PURE__*/ jsx(react, {
-        height: height,
-        width: width,
-        language: language,
-        value: value,
-        theme: editorTheme,
-        onChange: onChange,
-        options: {
-            readOnly,
-            scrollBeyondLastLine: false,
-            minimap: {
-                enabled: false
-            },
-            fontSize: 12,
-            lineNumbers: 'on',
-            automaticLayout: true,
-            formatOnPaste: true,
-            formatOnType: true
-        },
-        beforeMount: beforeMount,
-        ...rest
-    });
-};
-export { Editor };

package/dist/types/monaco.d.ts

@@ -1,13 +0,0 @@
-export interface MonacoJsonDefaults {
-    setDiagnosticsOptions(options: {
-        validate: boolean;
-        schemas?: Array<{
-            uri: string;
-            fileMatch: string[];
-            schema: unknown;
-        }>;
-    }): void;
-}
-export interface MonacoLanguagesJson {
-    jsonDefaults: MonacoJsonDefaults;
-}