@scality/data-browser-library 1.0.8 → 1.0.9

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
         }), []);