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

package/dist/components/buckets/BucketDetails.js

@@ -1,106 +1,226 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useQueryParams } from "../../utils/hooks.js";
-import { useNavigate, useParams } from "react-router-dom";
+import { createContext, memo, useCallback, useContext, useMemo } from "react";
+import { useParams } from "react-router";
 import { Tabs } from "@scality/core-ui/dist/next";
-import { BucketOverview } from "./BucketOverview.js";
-import { DeleteBucketButton } from "./DeleteBucketButton.js";
-import { EmptyBucketButton } from "./EmptyBucketButton.js";
-import { BucketLifecycleList } from "./BucketLifecycleList.js";
-import { BucketReplicationList } from "./BucketReplicationList.js";
+import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useGetBucketLifecycle, useGetBucketReplication } from "../../hooks/bucketConfiguration.js";
+import { BUCKET_ROUTES } from "../../utils/constants.js";
 import { isNotFoundError } from "../../utils/errorHandling.js";
+import { BucketLifecycleList } from "./BucketLifecycleList.js";
+import { BucketOverview } from "./BucketOverview.js";
+import { BucketReplicationList } from "./BucketReplicationList.js";
 import { BucketVersioning } from "./BucketVersioning.js";
-function BucketDetails() {
-    const query = useQueryParams();
-    const queryObject = Object.fromEntries(query.entries());
-    const { bucketName } = useParams();
-    const navigate = useNavigate();
+import { DeleteBucketButton } from "./DeleteBucketButton.js";
+import { EmptyBucketButton } from "./EmptyBucketButton.js";
+import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
+const BucketDetailsContext = /*#__PURE__*/ createContext(null);
+function useBucketDetailsContext() {
+    const context = useContext(BucketDetailsContext);
+    if (!context) throw new Error('BucketDetails components must be used within BucketDetails');
+    return context;
+}
+const getEffectiveStatus = (status, error)=>{
+    if (isNotFoundError(error)) return 'success';
+    if ('pending' === status) return 'loading';
+    if ('error' === status) return 'error';
+    return 'success';
+};
+const ExtraSectionContent = /*#__PURE__*/ memo(({ render })=>/*#__PURE__*/ jsx(Fragment, {
+        children: render()
+    }));
+ExtraSectionContent.displayName = 'BucketDetails.ExtraSectionContent';
+const OverviewTab = /*#__PURE__*/ memo(()=>{
+    const { bucketName, navigate } = useBucketDetailsContext();
+    const { extraBucketOverviewSections } = useDataBrowserUICustomization();
+    const renderDeleteButton = useCallback((name)=>/*#__PURE__*/ jsx(DeleteBucketButton, {
+            bucketName: name
+        }), []);
+    const renderEmptyButton = useCallback((name)=>/*#__PURE__*/ jsx(EmptyBucketButton, {
+            bucketName: name
+        }), []);
+    const renderVersioning = useCallback(()=>/*#__PURE__*/ jsx(BucketVersioning, {}), []);
+    const handleEditPolicy = useCallback((name)=>navigate(BUCKET_ROUTES.bucketPolicy(name)), [
+        navigate
+    ]);
+    return /*#__PURE__*/ jsxs(BucketOverview, {
+        bucketName: bucketName,
+        children: [
+            /*#__PURE__*/ jsx(BucketOverview.Actions, {
+                renderDeleteButton: renderDeleteButton,
+                renderEmptyButton: renderEmptyButton
+            }),
+            /*#__PURE__*/ jsxs(BucketOverview.Sections, {
+                children: [
+                    /*#__PURE__*/ jsx(BucketOverview.GeneralSection, {
+                        renderVersioning: renderVersioning
+                    }),
+                    extraBucketOverviewSections?.map((section)=>/*#__PURE__*/ jsx(BucketOverview.Section, {
+                            title: section.title,
+                            children: /*#__PURE__*/ jsx(ExtraSectionContent, {
+                                render: section.render
+                            })
+                        }, section.id)),
+                    /*#__PURE__*/ jsx(BucketOverview.DataProtectionSection, {}),
+                    /*#__PURE__*/ jsx(BucketOverview.PermissionsSection, {
+                        onEditPolicy: handleEditPolicy
+                    })
+                ]
+            })
+        ]
+    });
+});
+OverviewTab.displayName = 'BucketDetails.OverviewTab';
+const LifecycleTab = /*#__PURE__*/ memo(()=>{
+    const { bucketName, navigate } = useBucketDetailsContext();
     const { data: lifecycleData, status: lifecycleStatus, error: lifecycleError } = useGetBucketLifecycle({
         Bucket: bucketName
     });
+    const lifecycleRules = lifecycleData?.Rules || [];
+    const effectiveStatus = getEffectiveStatus(lifecycleStatus, lifecycleError);
+    const handleCreateRule = useCallback(()=>navigate(BUCKET_ROUTES.lifecycleCreate(bucketName)), [
+        navigate,
+        bucketName
+    ]);
+    const handleEditRule = useCallback((ruleId)=>navigate(BUCKET_ROUTES.lifecycleEdit(bucketName, ruleId)), [
+        navigate,
+        bucketName
+    ]);
+    return /*#__PURE__*/ jsx(BucketLifecycleList, {
+        bucketName: bucketName,
+        lifecycleRules: lifecycleRules,
+        lifecycleStatus: effectiveStatus,
+        onCreateRule: handleCreateRule,
+        onEditRule: handleEditRule
+    });
+});
+LifecycleTab.displayName = 'BucketDetails.LifecycleTab';
+const ReplicationTab = /*#__PURE__*/ memo(()=>{
+    const { bucketName, navigate } = useBucketDetailsContext();
     const { data: replicationData, status: replicationStatus, error: replicationError } = useGetBucketReplication({
         Bucket: bucketName
     });
-    const lifecycleRules = lifecycleData?.Rules || [];
     const replicationRules = replicationData?.ReplicationConfiguration?.Rules || [];
-    const replicationRole = replicationData?.ReplicationConfiguration?.Role || "";
-    const effectiveLifecycleStatus = isNotFoundError(lifecycleError) ? "success" : "pending" === lifecycleStatus ? "loading" : "error" === lifecycleStatus ? "error" : "success";
-    const effectiveReplicationStatus = isNotFoundError(replicationError) ? "success" : "pending" === replicationStatus ? "loading" : "error" === replicationStatus ? "error" : "success";
+    const replicationRole = replicationData?.ReplicationConfiguration?.Role || '';
+    const effectiveStatus = getEffectiveStatus(replicationStatus, replicationError);
+    const handleCreateRule = useCallback(()=>navigate(BUCKET_ROUTES.replicationCreate(bucketName)), [
+        navigate,
+        bucketName
+    ]);
+    const handleEditRule = useCallback((ruleId)=>navigate(BUCKET_ROUTES.replicationEdit(bucketName, ruleId)), [
+        navigate,
+        bucketName
+    ]);
+    return /*#__PURE__*/ jsx(BucketReplicationList, {
+        bucketName: bucketName,
+        replicationRules: replicationRules,
+        replicationRole: replicationRole,
+        replicationStatus: effectiveStatus,
+        onCreateRule: handleCreateRule,
+        onEditRule: handleEditRule
+    });
+});
+ReplicationTab.displayName = 'BucketDetails.ReplicationTab';
+const CustomTab = ({ config })=>/*#__PURE__*/ jsx(Fragment, {
+        children: config.render()
+    });
+CustomTab.displayName = 'BucketDetails.CustomTab';
+const BucketDetailsRoot = ({ children })=>{
+    const { bucketName } = useParams();
+    const navigate = useDataBrowserNavigate();
+    const contextValue = useMemo(()=>({
+            bucketName: bucketName || '',
+            navigate
+        }), [
+        bucketName,
+        navigate
+    ]);
     if (!bucketName) return /*#__PURE__*/ jsx("div", {
         children: "No bucket selected"
     });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: /*#__PURE__*/ jsxs(Tabs, {
-            children: [
-                /*#__PURE__*/ jsx(Tabs.Tab, {
-                    label: "Overview",
-                    path: "",
-                    query: {
-                        ...queryObject,
-                        tab: ""
-                    },
-                    children: /*#__PURE__*/ jsxs(BucketOverview, {
-                        bucketName: bucketName,
-                        children: [
-                            /*#__PURE__*/ jsx(BucketOverview.Actions, {
-                                renderDeleteButton: ()=>/*#__PURE__*/ jsx(DeleteBucketButton, {
-                                        bucketName: bucketName
-                                    }),
-                                renderEmptyButton: ()=>/*#__PURE__*/ jsx(EmptyBucketButton, {
-                                        bucketName: bucketName
-                                    })
-                            }),
-                            /*#__PURE__*/ jsxs(BucketOverview.Sections, {
-                                children: [
-                                    /*#__PURE__*/ jsx(BucketOverview.GeneralSection, {
-                                        renderVersioning: ()=>/*#__PURE__*/ jsx(BucketVersioning, {})
-                                    }),
-                                    /*#__PURE__*/ jsx(BucketOverview.DataProtectionSection, {}),
-                                    /*#__PURE__*/ jsx(BucketOverview.PermissionsSection, {
-                                        onEditPolicy: ()=>{
-                                            navigate(`/buckets/${bucketName}/policy`);
-                                        }
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ jsx(Tabs.Tab, {
-                    label: "Lifecycle",
-                    path: "",
-                    query: {
-                        ...queryObject,
-                        tab: "lifecycle"
-                    },
-                    withoutPadding: true,
-                    children: /*#__PURE__*/ jsx(BucketLifecycleList, {
-                        bucketName: bucketName,
-                        lifecycleRules: lifecycleRules,
-                        lifecycleStatus: effectiveLifecycleStatus,
-                        onCreateRule: ()=>navigate(`/buckets/${bucketName}/lifecycle/create`),
-                        onEditRule: (ruleId)=>navigate(`/buckets/${bucketName}/lifecycle/edit/${encodeURIComponent(ruleId)}`)
-                    })
-                }),
-                /*#__PURE__*/ jsx(Tabs.Tab, {
-                    label: "Replication",
-                    path: "",
-                    query: {
-                        ...queryObject,
-                        tab: "replication"
-                    },
-                    withoutPadding: true,
-                    children: /*#__PURE__*/ jsx(BucketReplicationList, {
-                        bucketName: bucketName,
-                        replicationRules: replicationRules,
-                        replicationRole: replicationRole,
-                        replicationStatus: effectiveReplicationStatus,
-                        onCreateRule: ()=>navigate(`/buckets/${bucketName}/replication/create`),
-                        onEditRule: (ruleId)=>navigate(`/buckets/${bucketName}/replication/edit/${encodeURIComponent(ruleId)}`)
-                    })
+    return /*#__PURE__*/ jsx(BucketDetailsContext.Provider, {
+        value: contextValue,
+        children: children || /*#__PURE__*/ jsx(DefaultTabs, {})
+    });
+};
+BucketDetailsRoot.displayName = 'BucketDetails';
+const DefaultTabs = ()=>{
+    const { extraBucketTabs } = useDataBrowserUICustomization();
+    const defaultTabsMap = useMemo(()=>({
+            overview: {
+                id: 'overview',
+                label: 'Overview',
+                path: '',
+                withoutPadding: false,
+                query: {
+                    tab: ''
+                },
+                type: 'default',
+                Component: OverviewTab
+            },
+            lifecycle: {
+                id: 'lifecycle',
+                label: 'Lifecycle',
+                path: '',
+                withoutPadding: true,
+                query: {
+                    tab: 'lifecycle'
+                },
+                type: 'default',
+                Component: LifecycleTab
+            },
+            replication: {
+                id: 'replication',
+                label: 'Replication',
+                path: '',
+                withoutPadding: true,
+                query: {
+                    tab: 'replication'
+                },
+                type: 'default',
+                Component: ReplicationTab
+            }
+        }), []);
+    const allTabs = useMemo(()=>{
+        const customTabConfigs = extraBucketTabs ? extraBucketTabs.map((tabConfig)=>({
+                id: tabConfig.id,
+                label: tabConfig.title,
+                path: tabConfig.path || '',
+                query: {
+                    tab: tabConfig.id
+                },
+                withoutPadding: tabConfig.withoutPadding || false,
+                type: 'custom',
+                config: tabConfig
+            })) : [];
+        const overrideIds = new Set(customTabConfigs.filter((t)=>t.id in defaultTabsMap).map((t)=>t.id));
+        const defaults = Object.values(defaultTabsMap).filter((tab)=>!overrideIds.has(tab.id));
+        return [
+            ...defaults,
+            ...customTabConfigs
+        ];
+    }, [
+        extraBucketTabs,
+        defaultTabsMap
+    ]);
+    return /*#__PURE__*/ jsx(Tabs, {
+        children: allTabs.map((tab)=>/*#__PURE__*/ jsx(Tabs.Tab, {
+                label: tab.label,
+                path: tab.path,
+                query: tab.query,
+                withoutPadding: tab.withoutPadding,
+                children: 'default' === tab.type ? /*#__PURE__*/ jsx(tab.Component, {}) : /*#__PURE__*/ jsx(CustomTab, {
+                    config: tab.config
                 })
-            ]
-        })
+            }, tab.id))
     });
+};
+DefaultTabs.displayName = 'BucketDetails.DefaultTabs';
+function BucketDetails() {
+    return /*#__PURE__*/ jsx(BucketDetailsRoot, {});
 }
-export { BucketDetails };
+const BucketDetailsCompound = BucketDetailsRoot;
+BucketDetailsCompound.OverviewTab = OverviewTab;
+BucketDetailsCompound.LifecycleTab = LifecycleTab;
+BucketDetailsCompound.ReplicationTab = ReplicationTab;
+BucketDetailsCompound.CustomTab = CustomTab;
+export { BucketDetails, BucketDetailsCompound, BucketDetailsContext, useBucketDetailsContext };