@scality/data-browser-library 1.0.8 → 1.1.0

package/dist/components/__tests__/BucketReplicationFormPage.test.js

@@ -4,6 +4,7 @@ import user_event from "@testing-library/user-event";
 import { MemoryRouter, Route, Routes } from "react-router";
 import { useGetBucketReplication, useSetBucketReplication } from "../../hooks/bucketConfiguration.js";
 import { useBuckets } from "../../hooks/bucketOperations.js";
+import { useFeatures } from "../../hooks/useFeatures.js";
 import { useISVBucketStatus } from "../../hooks/useISVBucketDetection.js";
 import { createTestWrapper, findToggleByLabel, mockErrorSubmit, mockOffsetSize, mockSuccessSubmit, submitForm } from "../../test/testUtils.js";
 import { BucketReplicationFormPage } from "../buckets/BucketReplicationFormPage.js";
@@ -14,12 +15,16 @@ jest.mock('../../hooks/bucketConfiguration', ()=>({
 jest.mock('../../hooks/bucketOperations', ()=>({
         useBuckets: jest.fn()
     }));
+jest.mock('../../hooks/useFeatures', ()=>({
+        useFeatures: jest.fn()
+    }));
 jest.mock('../../hooks/useISVBucketDetection', ()=>({
         useISVBucketStatus: jest.fn()
     }));
 const mockUseGetBucketReplication = jest.mocked(useGetBucketReplication);
 const mockUseSetBucketReplication = jest.mocked(useSetBucketReplication);
 const mockUseBuckets = jest.mocked(useBuckets);
+const mockUseFeatures = jest.mocked(useFeatures);
 const mockUseISVBucketStatus = jest.mocked(useISVBucketStatus);
 const mockNavigate = jest.fn();
 const mockShowToast = jest.fn();
@@ -56,6 +61,12 @@ const renderBucketReplicationFormPage = (bucketName = 'test-bucket', ruleId)=>{
         })
     }));
 };
+const findStatusToggle = ()=>{
+    const label = document.querySelector('[for="status"]');
+    let current = label?.parentElement;
+    while(current && !current.querySelector('input[type="checkbox"]'))current = current.parentElement;
+    return current?.querySelector('input[type="checkbox"]');
+};
 describe('BucketReplicationFormPage', ()=>{
     const mockMutate = jest.fn();
     const fillRequiredFields = async (options)=>{
@@ -101,6 +112,7 @@ describe('BucketReplicationFormPage', ()=>{
             },
             status: 'success'
         });
+        mockUseFeatures.mockReturnValue(true);
         mockUseISVBucketStatus.mockReturnValue({
             isVeeamBucket: false,
             isCommvaultBucket: false,
@@ -185,7 +197,7 @@ describe('BucketReplicationFormPage', ()=>{
             expect(screen.getByRole('textbox', {
                 name: /rule id/i
             })).toBeInTheDocument();
-            expect(screen.getByLabelText(/status/i)).toBeInTheDocument();
+            expect(document.querySelector('[id="label-status"]')).toBeInTheDocument();
             expect(screen.getByLabelText(/target bucket/i)).toBeInTheDocument();
         });
         it('shows Role ARN input when no existing rules', ()=>{
@@ -256,15 +268,15 @@ describe('BucketReplicationFormPage', ()=>{
                 name: /rule id/i
             })).not.toBeInTheDocument();
         });
-        it('renders Status select field', async ()=>{
+        it('renders Status toggle field', async ()=>{
             renderBucketReplicationFormPage();
             await waitFor(()=>{
                 expect(screen.getByRole('textbox', {
                     name: /rule id/i
                 })).toBeInTheDocument();
             });
-            const statusElement = document.querySelector('[id="status"]');
-            expect(statusElement).toBeInTheDocument();
+            const statusToggle = findStatusToggle();
+            expect(statusToggle).toBeInTheDocument();
         });
         it('renders Priority number input with auto-assigned placeholder', ()=>{
             renderBucketReplicationFormPage();
@@ -892,11 +904,8 @@ describe('BucketReplicationFormPage', ()=>{
             await waitFor(()=>{
                 expect(screen.getByText('Edit Replication Rule')).toBeInTheDocument();
             });
-            const statusSelect = screen.getByLabelText(/status/i);
-            await user_event.click(statusSelect);
-            await user_event.click(screen.getByRole('option', {
-                name: 'Disabled'
-            }));
+            const statusToggle = findStatusToggle();
+            fireEvent.click(statusToggle);
             mockMutate.mockImplementation((_, options)=>{
                 options?.onSuccess?.();
             });
@@ -942,11 +951,8 @@ describe('BucketReplicationFormPage', ()=>{
             await waitFor(()=>{
                 expect(screen.getByText('Edit Replication Rule')).toBeInTheDocument();
             });
-            const statusSelect = screen.getByLabelText(/status/i);
-            await user_event.click(statusSelect);
-            await user_event.click(screen.getByRole('option', {
-                name: 'Disabled'
-            }));
+            const statusToggle = findStatusToggle();
+            fireEvent.click(statusToggle);
             mockMutate.mockImplementation((_, options)=>{
                 options?.onSuccess?.();
             });
@@ -987,11 +993,8 @@ describe('BucketReplicationFormPage', ()=>{
             await waitFor(()=>{
                 expect(screen.getByText('Edit Replication Rule')).toBeInTheDocument();
             });
-            const statusSelect = screen.getByLabelText(/status/i);
-            await user_event.click(statusSelect);
-            await user_event.click(screen.getByRole('option', {
-                name: 'Disabled'
-            }));
+            const statusToggle = findStatusToggle();
+            fireEvent.click(statusToggle);
             mockMutate.mockImplementation((_, options)=>{
                 options?.onSuccess?.();
             });
@@ -1036,11 +1039,8 @@ describe('BucketReplicationFormPage', ()=>{
             await waitFor(()=>{
                 expect(screen.getByText('Edit Replication Rule')).toBeInTheDocument();
             });
-            const statusSelect = screen.getByLabelText(/status/i);
-            await user_event.click(statusSelect);
-            await user_event.click(screen.getByRole('option', {
-                name: 'Disabled'
-            }));
+            const statusToggle = findStatusToggle();
+            fireEvent.click(statusToggle);
             const error = new Error('Network Error');
             mockMutate.mockImplementation((_, options)=>{
                 options?.onError?.(error);
@@ -1952,4 +1952,31 @@ describe('BucketReplicationFormPage', ()=>{
             expect(screen.getByText(/bucket used for external integration with Kasten/i)).toBeInTheDocument();
         });
     });
+    describe('Feature Flag - replicationAdvanced', ()=>{
+        it('hides Additional Options section when replicationAdvanced is disabled', ()=>{
+            mockUseFeatures.mockReturnValue(false);
+            renderBucketReplicationFormPage();
+            expect(screen.queryByText('Replication Time Control (RTC)')).not.toBeInTheDocument();
+            expect(screen.queryByText('RTC metrics and notifications')).not.toBeInTheDocument();
+            expect(screen.queryByText('Replica modification sync')).not.toBeInTheDocument();
+            expect(screen.queryByText('Delete marker replication')).not.toBeInTheDocument();
+        });
+        it('hides switchObjectOwnership toggle when replicationAdvanced is disabled', async ()=>{
+            mockUseFeatures.mockReturnValue(false);
+            renderBucketReplicationFormPage();
+            const sameAccountToggle = findToggleByLabel('Same account destination');
+            await user_event.click(sameAccountToggle);
+            await waitFor(()=>{
+                expect(screen.queryByText('Switch Object ownership')).not.toBeInTheDocument();
+            });
+        });
+        it('shows Additional Options section when replicationAdvanced is enabled', ()=>{
+            mockUseFeatures.mockReturnValue(true);
+            renderBucketReplicationFormPage();
+            expect(screen.getByText('Replication Time Control (RTC)')).toBeInTheDocument();
+            expect(screen.getByText('RTC metrics and notifications')).toBeInTheDocument();
+            expect(screen.getByText('Replica modification sync')).toBeInTheDocument();
+            expect(screen.getByText('Delete marker replication')).toBeInTheDocument();
+        });
+    });
 });

package/dist/components/__tests__/ObjectList.test.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { act, fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import { HttpResponse, http } from "msw";
 import { MemoryRouter } from "react-router";
 import { DataBrowserUICustomizationProvider } from "../../contexts/DataBrowserUICustomizationContext.js";
-import { useListObjectVersions, useListObjects } from "../../hooks/index.js";
-import { createTestWrapper, mockOffsetSize, setupMswServer } from "../../test/testUtils.js";
+import { useListObjectVersions, useListObjects, useSearchObjects } from "../../hooks/index.js";
+import { getS3BaseUrl } from "../../test/msw/utils.js";
+import { createTestWrapper, mockOffsetSize, overrideHandlers, setupMswServer } from "../../test/testUtils.js";
 import { ObjectList } from "../objects/ObjectList.js";
 import * as __rspack_external__hooks_useFeatures_js_a6a84786 from "../../hooks/useFeatures.js";
 setupMswServer();
@@ -391,6 +393,45 @@ describe('ObjectList', ()=>{
             });
             jest.useRealTimers();
         });
+        it('passes the search query parameter to the S3 request when metadata search is active', async ()=>{
+            let capturedSearchParam = null;
+            overrideHandlers(http.get(`${getS3BaseUrl()}/:bucketName`, async ({ request })=>{
+                const url = new URL(request.url);
+                if ('2' !== url.searchParams.get('list-type')) return;
+                capturedSearchParam = url.searchParams.get('search');
+                return HttpResponse.xml(`<?xml version="1.0" encoding="UTF-8"?>
+            <ListBucketResult xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
+              <Name>test-bucket</Name>
+              <Prefix></Prefix>
+              <Delimiter>/</Delimiter>
+              <MaxKeys>100</MaxKeys>
+              <IsTruncated>false</IsTruncated>
+              <Contents>
+                <Key>matched-file.pdf</Key>
+                <LastModified>2023-10-12T17:50:00.000Z</LastModified>
+                <ETag>&quot;abc123&quot;</ETag>
+                <Size>2048</Size>
+                <StorageClass>STANDARD</StorageClass>
+              </Contents>
+            </ListBucketResult>`, {
+                    status: 200
+                });
+            }));
+            const searchQuery = 'key like /pdf$/';
+            const { result } = renderHook(()=>useSearchObjects({
+                    Bucket: 'test-bucket',
+                    Prefix: '',
+                    MaxKeys: 100,
+                    Delimiter: '/',
+                    Query: searchQuery
+                }), {
+                wrapper: createTestWrapper()
+            });
+            await waitFor(()=>{
+                expect(result.current.isSuccess).toBe(true);
+            });
+            expect(capturedSearchParam).toBe(searchQuery);
+        });
     });
     describe('Multi-Selection', ()=>{
         it('integrates with MultiSelectableContent', async ()=>{

package/dist/components/buckets/BucketConfigEditButton.d.ts

@@ -3,6 +3,8 @@ interface BucketConfigEditButtonProps {
     isLoading?: boolean;
     onEdit: () => void;
     configName: string;
+    disabled?: boolean;
+    tooltipOverlay?: string;
 }
 export declare const BucketConfigEditButton: React.FC<BucketConfigEditButtonProps>;
 export {};

package/dist/components/buckets/BucketConfigEditButton.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Icon, spacing } from "@scality/core-ui";
 import { Box, Button } from "@scality/core-ui/dist/next";
-const BucketConfigEditButton = ({ hasConfig, isLoading, onEdit, configName })=>{
+const BucketConfigEditButton = ({ hasConfig, isLoading, onEdit, configName, disabled, tooltipOverlay })=>{
     const action = hasConfig ? 'Edit' : 'Create';
     return /*#__PURE__*/ jsx(Box, {
         display: "flex",
@@ -12,10 +12,16 @@ const BucketConfigEditButton = ({ hasConfig, isLoading, onEdit, configName })=>{
             variant: "outline",
             label: action,
             icon: /*#__PURE__*/ jsx(Icon, {
-                name: hasConfig ? 'Pen' : 'Create-add'
+                name: hasConfig ? 'Pencil' : 'Create-add'
             }),
             onClick: onEdit,
-            "aria-label": `${action} ${configName}`
+            "aria-label": `${action} ${configName}`,
+            disabled: disabled,
+            ...tooltipOverlay && {
+                tooltip: {
+                    overlay: tooltipOverlay
+                }
+            }
         })
     });
 };

package/dist/components/buckets/BucketCorsPage.js

@@ -1,18 +1,20 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Form, FormGroup, FormSection, Icon, Loader, Stack, Text, useToast } from "@scality/core-ui";
-import { Box, Button, CopyButton } from "@scality/core-ui/dist/next";
-import { useCallback, useMemo } from "react";
+import { Box, Button, CopyButton, Editor } from "@scality/core-ui/dist/next";
+import { useCallback, useEffect, useMemo } from "react";
 import { Controller } from "react-hook-form";
 import { useParams } from "react-router";
-import { useBucketConfigEditor, useDeleteBucketCors, useGetBucketCors, useSetBucketCors } from "../../hooks/index.js";
-import { Editor } from "../Editor.js";
+import { useBucketConfigEditor, useDeleteBucketCors, useGetBucketCors, useISVBucketStatus, useSetBucketCors } from "../../hooks/index.js";
+import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
+import { isNotFoundError } from "../../utils/errorHandling.js";
 const DEFAULT_CORS_TEMPLATE = `[
   {
     "AllowedHeaders": [
       "Authorization"
     ],
     "AllowedMethods": [
-      "GET"
+      "GET",
+      "PUT"
     ],
     "AllowedOrigins": [
       "*"
@@ -47,22 +49,35 @@ const validateCorsConfig = (content)=>{
 const BucketCorsPage = ()=>{
     const { bucketName } = useParams();
     const { showToast } = useToast();
+    const { isISVManaged, isLoading: isISVLoading } = useISVBucketStatus(bucketName);
+    const navigate = useDataBrowserNavigate();
+    useEffect(()=>{
+        if (isISVManaged) navigate(`/buckets/${bucketName}`, {
+            replace: true
+        });
+    }, [
+        isISVManaged,
+        bucketName,
+        navigate
+    ]);
+    const shouldFetchData = !isISVManaged && !isISVLoading;
     const { data: corsData, status: corsStatus, error: corsError } = useGetBucketCors({
         Bucket: bucketName
+    }, {
+        enabled: shouldFetchData
     });
     const initialContent = useMemo(()=>{
+        if (isNotFoundError(corsError)) return;
         if (corsData?.CORSRules && corsData.CORSRules.length > 0) return JSON.stringify(corsData.CORSRules);
     }, [
-        corsData
+        corsData,
+        corsError
     ]);
-    const { form, content, isCreateMode, isValidFormat, handleBeforeMount, navigateToBucket } = useBucketConfigEditor({
+    const { form, content, isCreateMode, isValidFormat, navigateToBucket, loadTemplate } = useBucketConfigEditor({
         bucketName: bucketName,
         initialContent,
         defaultTemplate: DEFAULT_CORS_TEMPLATE,
         isLoading: 'pending' === corsStatus,
-        notFoundErrorNames: [
-            'NoSuchCORSConfiguration'
-        ],
         errorInstance: corsError,
         validate: validateCorsConfig
     });
@@ -121,7 +136,8 @@ const BucketCorsPage = ()=>{
         setError
     ]);
     const isPending = isSaving || isDeleting;
-    const hasUnexpectedError = corsError && 'NoSuchCORSConfiguration' !== corsError.name;
+    if (isISVManaged || isISVLoading) return null;
+    const hasUnexpectedError = corsError && !isNotFoundError(corsError);
     if ('pending' === corsStatus) return /*#__PURE__*/ jsx(Loader, {
         centered: true,
         size: "massive",
@@ -200,6 +216,11 @@ const BucketCorsPage = ()=>{
                     direction: "vertical",
                     error: errors.content?.message,
                     content: /*#__PURE__*/ jsxs(Stack, {
+                        direction: "horizontal",
+                        gap: "r16",
+                        style: {
+                            alignItems: 'flex-start'
+                        },
                         children: [
                             /*#__PURE__*/ jsx(Controller, {
                                 control: control,
@@ -212,17 +233,33 @@ const BucketCorsPage = ()=>{
                                         },
                                         language: "json",
                                         height: "60vh",
-                                        width: "33rem",
-                                        beforeMount: handleBeforeMount
+                                        width: "33rem"
                                     })
                             }),
-                            /*#__PURE__*/ jsx(Box, {
-                                alignSelf: "baseline",
-                                children: /*#__PURE__*/ jsx(CopyButton, {
-                                    textToCopy: content,
-                                    label: "CORS",
-                                    variant: "outline"
-                                })
+                            /*#__PURE__*/ jsxs(Stack, {
+                                direction: "vertical",
+                                gap: "r8",
+                                children: [
+                                    /*#__PURE__*/ jsx(CopyButton, {
+                                        textToCopy: content,
+                                        label: "CORS",
+                                        variant: "outline"
+                                    }),
+                                    isCreateMode && !content && /*#__PURE__*/ jsx(Text, {
+                                        variant: "Smaller",
+                                        color: "textSecondary",
+                                        children: "Empty CORS rule"
+                                    }),
+                                    isCreateMode && !content && /*#__PURE__*/ jsx(Button, {
+                                        variant: "outline",
+                                        label: "Load a template",
+                                        onClick: loadTemplate,
+                                        type: "button",
+                                        style: {
+                                            minWidth: '9rem'
+                                        }
+                                    })
+                                ]
                             })
                         ]
                     })

package/dist/components/buckets/BucketDetails.js

@@ -1,7 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
 import { Tabs } from "@scality/core-ui/dist/next";
 import { createContext, memo, useCallback, useContext, useMemo } from "react";
 import { useParams } from "react-router";
+import { useDataBrowserContext } from "../providers/DataBrowserProvider.js";
 import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useGetBucketLifecycle, useGetBucketNotification, useGetBucketReplication } from "../../hooks/bucketConfiguration.js";
 import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
@@ -30,12 +32,35 @@ const ExtraSectionContent = /*#__PURE__*/ memo(({ render })=>/*#__PURE__*/ jsx(F
         children: render()
     }));
 ExtraSectionContent.displayName = 'BucketDetails.ExtraSectionContent';
+const LIST_BUCKETS_QUERY_KEY = 'ListBuckets';
 const OverviewTab = /*#__PURE__*/ memo(()=>{
     const { bucketName, navigate } = useBucketDetailsContext();
     const { extraBucketOverviewSections } = useDataBrowserUICustomization();
+    const queryClient = useQueryClient();
+    const { s3ConfigIdentifier } = useDataBrowserContext();
+    const handleDeleteSuccess = useCallback(()=>{
+        queryClient.setQueriesData({
+            queryKey: [
+                s3ConfigIdentifier,
+                LIST_BUCKETS_QUERY_KEY
+            ]
+        }, (prev)=>prev?.Buckets ? {
+                ...prev,
+                Buckets: prev.Buckets.filter((b)=>b.Name !== bucketName)
+            } : prev);
+        navigate('/buckets');
+    }, [
+        queryClient,
+        s3ConfigIdentifier,
+        navigate,
+        bucketName
+    ]);
     const renderDeleteButton = useCallback((name)=>/*#__PURE__*/ jsx(DeleteBucketButton, {
-            bucketName: name
-        }), []);
+            bucketName: name,
+            onDeleteSuccess: handleDeleteSuccess
+        }), [
+        handleDeleteSuccess
+    ]);
     const renderEmptyButton = useCallback((name)=>/*#__PURE__*/ jsx(EmptyBucketButton, {
             bucketName: name
         }), []);