@scality/data-browser-library 1.0.0-preview.9 → 1.0.3

package/dist/components/buckets/BucketPage.js

@@ -1,28 +1,53 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useBuckets } from "../../hooks/index.js";
 import { TextBadge } from "@scality/core-ui";
-import { Navigate, useNavigate, useParams } from "react-router-dom";
+import { useEffect, useMemo } from "react";
+import { useParams } from "react-router";
+import { useAccessibleBuckets, useBuckets } from "../../hooks/index.js";
+import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
 import { BrowserPageLayout } from "../layouts/BrowserPageLayout.js";
 import { BucketDetails } from "./BucketDetails.js";
 import { BucketList } from "./BucketList.js";
-import { BucketLocation } from "./BucketLocation.js";
-const BucketPage_BucketPage = ()=>{
+const BucketPage = ()=>{
     const { data, status } = useBuckets();
     const { bucketName } = useParams();
-    const navigate = useNavigate();
-    const buckets = data?.Buckets || [];
+    const navigate = useDataBrowserNavigate();
+    const { hasLimitedAccess, accessibleBuckets } = useAccessibleBuckets();
+    const buckets = useMemo(()=>{
+        if (hasLimitedAccess) return accessibleBuckets;
+        return data?.Buckets || [];
+    }, [
+        hasLimitedAccess,
+        accessibleBuckets,
+        data?.Buckets
+    ]);
     const numInstance = buckets.length;
-    if (!bucketName && buckets.length > 0 && "success" === status) {
-        const firstBucketName = buckets[0]?.Name;
-        if (firstBucketName) return /*#__PURE__*/ jsx(Navigate, {
-            to: `/buckets/${firstBucketName}`,
-            replace: true
-        });
-    }
+    const bucketStatus = useMemo(()=>{
+        if (hasLimitedAccess) return 'success';
+        if ('pending' === status) return 'loading';
+        if ('error' === status) return 'error';
+        return 'success';
+    }, [
+        hasLimitedAccess,
+        status
+    ]);
+    useEffect(()=>{
+        if (!bucketName && buckets.length > 0 && ('success' === status || hasLimitedAccess)) {
+            const firstBucketName = buckets[0]?.Name;
+            if (firstBucketName) navigate(`/buckets/${firstBucketName}`, {
+                replace: true
+            });
+        }
+    }, [
+        bucketName,
+        buckets.length,
+        status,
+        hasLimitedAccess,
+        navigate
+    ]);
     return /*#__PURE__*/ jsx(BrowserPageLayout, {
         title: /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                "All Buckets",
+                'All Buckets',
                 /*#__PURE__*/ jsx(TextBadge, {
                     text: numInstance.toString(),
                     variant: "infoPrimary"
@@ -31,17 +56,14 @@ const BucketPage_BucketPage = ()=>{
         }),
         leftPanel: /*#__PURE__*/ jsx(BucketList, {
             buckets: buckets,
-            bucketStatus: "pending" === status ? "loading" : "error" === status ? "error" : "success",
+            bucketStatus: bucketStatus,
             selectedBucketName: bucketName,
             onBucketSelect: (bucketName)=>navigate(`/buckets/${bucketName}`),
             onCreateBucket: ()=>navigate("/buckets/-/create"),
-            onNavigateToBucket: (bucketName)=>navigate(`/buckets/${bucketName}/objects`),
-            renderBucketLocation: (bucketName)=>/*#__PURE__*/ jsx(BucketLocation, {
-                    bucketName: bucketName
-                })
+            onNavigateToBucket: (bucketName)=>navigate(`/buckets/${bucketName}/objects`)
         }),
         rightPanel: /*#__PURE__*/ jsx(BucketDetails, {})
     });
 };
-const BucketPage = BucketPage_BucketPage;
-export { BucketPage_BucketPage as BucketPage, BucketPage as default };
+const buckets_BucketPage = BucketPage;
+export { BucketPage, buckets_BucketPage as default };

package/dist/components/buckets/BucketPolicyPage.js

@@ -1,12 +1,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { Form, FormGroup, FormSection, Icon, Loader, Stack, Text } from "@scality/core-ui";
+import { Banner, Form, FormGroup, FormSection, Icon, Loader, Stack, Text, useToast } from "@scality/core-ui";
 import { Box, Button, CopyButton } from "@scality/core-ui/dist/next";
-import { Controller, useForm } from "react-hook-form";
-import { Editor } from "../Editor.js";
-import { useGetBucketPolicy, useSetBucketPolicy } from "../../hooks/index.js";
+import { useCallback, useMemo } from "react";
+import { Controller } from "react-hook-form";
+import { useParams } from "react-router";
+import { useBucketConfigEditor, useGetBucketPolicy, useISVBucketStatus, useSetBucketPolicy } from "../../hooks/index.js";
 import bucketPolicySchema from "../../schemas/bucketPolicySchema.json";
+import { Editor } from "../Editor.js";
 const getDefaultPolicyTemplate = (bucketName)=>`{
   "Version": "2012-10-17",
   "Statement": [
@@ -19,116 +19,125 @@ const getDefaultPolicyTemplate = (bucketName)=>`{
     }
   ]
 }`;
+const validatePolicyConfig = (content)=>{
+    try {
+        JSON.parse(content);
+        return {
+            isValid: true
+        };
+    } catch  {
+        return {
+            isValid: false,
+            error: 'Invalid JSON format'
+        };
+    }
+};
 const BucketPolicyPage = ()=>{
     const { bucketName } = useParams();
-    const navigate = useNavigate();
-    const { mutate: savePolicy, isPending: isSaving } = useSetBucketPolicy();
-    const { control, handleSubmit, watch, setValue, setError, formState: { isDirty, isValid, errors } } = useForm({
-        mode: "onChange",
-        defaultValues: {
-            policyDocument: ""
-        }
-    });
-    const policyDocument = watch("policyDocument");
+    const { showToast } = useToast();
+    const { isISVManaged, isvApplication, isLoading: isISVLoading } = useISVBucketStatus(bucketName);
     const { data: policyData, status: policyStatus, error: policyError } = useGetBucketPolicy({
         Bucket: bucketName
     });
-    const isCreateMode = useMemo(()=>policyError && ("NoSuchBucketPolicy" === policyError.name || policyError.message?.includes("does not exist")), [
-        policyError
-    ]);
-    const initialPolicy = useMemo(()=>{
-        const policyString = policyData?.Policy;
-        if (policyString) try {
-            const parsed = JSON.parse(policyString);
-            return JSON.stringify(parsed, null, 2);
-        } catch  {
-            return policyString;
-        }
-        return getDefaultPolicyTemplate(bucketName);
-    }, [
-        policyData,
-        bucketName
-    ]);
-    useEffect(()=>{
-        setValue("policyDocument", initialPolicy);
+    const initialContent = useMemo(()=>{
+        if (policyData?.Policy) return policyData.Policy;
     }, [
-        initialPolicy,
-        setValue
-    ]);
-    const handleBeforeMount = useCallback((monaco)=>{
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            validate: true,
-            schemas: [
-                {
-                    uri: "http://myserver/bucket-policy-schema.json",
-                    fileMatch: [
-                        "*"
-                    ],
-                    schema: bucketPolicySchema
-                }
-            ]
-        });
-    }, []);
-    const handleCancel = useCallback(()=>{
-        navigate(`/buckets/${bucketName}`);
-    }, [
-        navigate,
-        bucketName
+        policyData
     ]);
+    const { form, content, isCreateMode, isValidFormat, handleBeforeMount, navigateToBucket } = useBucketConfigEditor({
+        bucketName: bucketName,
+        initialContent,
+        defaultTemplate: getDefaultPolicyTemplate(bucketName),
+        isLoading: 'pending' === policyStatus,
+        notFoundErrorNames: [
+            'NoSuchBucketPolicy'
+        ],
+        errorInstance: policyError,
+        validate: validatePolicyConfig,
+        monacoSchema: bucketPolicySchema
+    });
+    const { control, handleSubmit, setError, clearErrors, formState: { isDirty, errors } } = form;
+    const { mutate: savePolicy, isPending: isSaving } = useSetBucketPolicy();
     const onSubmit = useCallback((data)=>{
-        try {
-            JSON.parse(data.policyDocument);
-        } catch (error) {
-            const errorMessage = "Invalid JSON format";
-            setError("policyDocument", {
-                type: "custom",
-                message: errorMessage
-            });
-            return;
-        }
-        const minifiedPolicy = JSON.stringify(JSON.parse(data.policyDocument));
+        const result = validatePolicyConfig(data.content);
+        if (!result.isValid) return;
+        const minifiedPolicy = JSON.stringify(JSON.parse(data.content));
         savePolicy({
             Bucket: bucketName,
             Policy: minifiedPolicy
         }, {
             onSuccess: ()=>{
-                navigate(`/buckets/${bucketName}`);
+                showToast({
+                    open: true,
+                    message: 'Bucket policy saved',
+                    status: 'success'
+                });
+                navigateToBucket();
             },
             onError: (error)=>{
-                const errorMessage = error instanceof Error ? error.message : "Failed to save policy";
-                setError("policyDocument", {
-                    type: "custom",
-                    message: `Save policy error: ${errorMessage}`
+                setError('content', {
+                    type: 'server',
+                    message: error instanceof Error ? error.message : 'Failed to save'
                 });
             }
         });
     }, [
         bucketName,
         savePolicy,
-        navigate,
+        navigateToBucket,
+        showToast,
         setError
     ]);
-    if ("pending" === policyStatus) return /*#__PURE__*/ jsx(Loader, {
+    const hasUnexpectedError = policyError && 'NoSuchBucketPolicy' !== policyError.name;
+    if ('pending' === policyStatus || isISVLoading) return /*#__PURE__*/ jsx(Loader, {
         centered: true,
         size: "massive",
         children: /*#__PURE__*/ jsx(Fragment, {
             children: "Loading policy..."
         })
     });
+    if (hasUnexpectedError) return /*#__PURE__*/ jsx(Box, {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        gap: "1.5rem",
+        children: /*#__PURE__*/ jsxs(Stack, {
+            gap: "r8",
+            style: {
+                alignItems: 'center'
+            },
+            children: [
+                /*#__PURE__*/ jsx(Icon, {
+                    name: "Exclamation-circle",
+                    size: "2x",
+                    color: "statusWarning"
+                }),
+                /*#__PURE__*/ jsxs(Text, {
+                    variant: "Large",
+                    children: [
+                        "Failed to load bucket policy: ",
+                        policyError.message || 'Unknown error'
+                    ]
+                })
+            ]
+        })
+    });
     return /*#__PURE__*/ jsx(Form, {
         onSubmit: handleSubmit(onSubmit),
         layout: {
-            kind: "page",
-            title: `Bucket Policy ${isCreateMode ? "Creation" : "Edition"}`
+            kind: 'page',
+            title: `${isCreateMode ? 'Create' : 'Edit'} Bucket Policy`
         },
-        requireMode: isCreateMode ? "partial" : "all",
+        requireMode: isCreateMode ? 'partial' : 'all',
         rightActions: /*#__PURE__*/ jsxs(Stack, {
             gap: "r16",
             children: [
                 /*#__PURE__*/ jsx(Button, {
                     variant: "outline",
                     label: "Cancel",
-                    onClick: handleCancel,
+                    onClick: navigateToBucket,
                     type: "button",
                     disabled: isSaving
                 }),
@@ -139,64 +148,83 @@ const BucketPolicyPage = ()=>{
                         name: "Save"
                     }),
                     type: "submit",
-                    disabled: !isDirty || !isValid || isSaving
+                    disabled: !isDirty && !isCreateMode || isSaving || !isValidFormat
                 })
             ]
         }),
-        children: /*#__PURE__*/ jsxs(FormSection, {
+        children: /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                /*#__PURE__*/ jsx(FormGroup, {
-                    id: "bucketName",
-                    label: "Bucket Name",
-                    required: true,
-                    direction: "horizontal",
-                    content: /*#__PURE__*/ jsx(Text, {
-                        children: bucketName
-                    })
-                }),
-                /*#__PURE__*/ jsx(FormGroup, {
-                    id: "policyDocument",
-                    label: "Policy Document",
-                    required: true,
-                    direction: "vertical",
-                    help: "AWS Bucket policy standards are supported.",
-                    helpErrorPosition: "bottom",
-                    error: errors?.policyDocument?.message,
-                    content: /*#__PURE__*/ jsxs(Stack, {
+                isISVManaged && /*#__PURE__*/ jsx(Banner, {
+                    variant: "warning",
+                    icon: /*#__PURE__*/ jsx(Icon, {
+                        color: "statusWarning",
+                        name: "Exclamation-circle"
+                    }),
+                    children: /*#__PURE__*/ jsxs(Text, {
                         children: [
-                            /*#__PURE__*/ jsx(Controller, {
-                                control: control,
-                                name: "policyDocument",
-                                rules: {
-                                    required: "The policy document is required",
-                                    validate: (value)=>{
-                                        try {
-                                            JSON.parse(value);
-                                            return true;
-                                        } catch  {
-                                            return "Invalid JSON format";
-                                        }
-                                    }
-                                },
-                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Editor, {
-                                        value: value,
-                                        onChange: onChange,
-                                        language: "json",
-                                        height: "60vh",
-                                        width: "33rem",
-                                        beforeMount: handleBeforeMount
-                                    })
+                            /*#__PURE__*/ jsx("strong", {
+                                children: "Warning:"
                             }),
-                            /*#__PURE__*/ jsx(Box, {
-                                alignSelf: "baseline",
-                                children: /*#__PURE__*/ jsx(CopyButton, {
-                                    textToCopy: policyDocument,
-                                    label: "Policy",
-                                    variant: "outline"
-                                })
-                            })
+                            " This bucket is managed by ",
+                            isvApplication,
+                            ". Adding a Bucket Policy may conflict with IAM policies created by ",
+                            isvApplication,
+                            ", potentially disrupting ",
+                            isvApplication,
+                            " operations (e.g., backup cleanup). Ensure your Bucket Policy does not deny actions that ",
+                            isvApplication,
+                            " requires."
                         ]
                     })
+                }),
+                /*#__PURE__*/ jsxs(FormSection, {
+                    children: [
+                        /*#__PURE__*/ jsx(FormGroup, {
+                            id: "bucketName",
+                            label: "Bucket Name",
+                            required: true,
+                            direction: "horizontal",
+                            content: /*#__PURE__*/ jsx(Text, {
+                                children: bucketName
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(FormGroup, {
+                            id: "policyDocument",
+                            label: "Policy Document",
+                            required: true,
+                            direction: "vertical",
+                            help: "AWS Bucket policy standards are supported.",
+                            helpErrorPosition: "bottom",
+                            error: errors.content?.message,
+                            content: /*#__PURE__*/ jsxs(Stack, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Controller, {
+                                        control: control,
+                                        name: "content",
+                                        render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Editor, {
+                                                value: value,
+                                                onChange: (newValue)=>{
+                                                    onChange(newValue);
+                                                    if (errors.content) clearErrors('content');
+                                                },
+                                                language: "json",
+                                                height: "60vh",
+                                                width: "33rem",
+                                                beforeMount: handleBeforeMount
+                                            })
+                                    }),
+                                    /*#__PURE__*/ jsx(Box, {
+                                        alignSelf: "baseline",
+                                        children: /*#__PURE__*/ jsx(CopyButton, {
+                                            textToCopy: content,
+                                            label: "Policy",
+                                            variant: "outline"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
                 })
             ]
         })