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

package/dist/components/DataBrowserUI.d.ts

@@ -1,18 +1,25 @@
-import React from "react";
-import type { DataBrowserUIProps } from "../config/types";
+import React from 'react';
+import type { DataBrowserUIProps } from '../config/types';
 /**
  * DataBrowserUI component - Main UI component for data browser.
  * Must be wrapped with DataBrowserProvider for S3 client and theme context,
  * and a BrowserRouter for routing.
  *
+ * Uses relative routing for route definitions, but absolute paths for navigation.
+ * Pass basePath to DataBrowserUI to specify where the UI is mounted.
+ *
  * @example
  * ```tsx
- * <BrowserRouter basename="/data-browser">
- *   <DataBrowserProvider getS3Config={getS3Config} theme={theme}>
- *     <DataBrowserUI
- *       extraBucketListColumns={[...]}
- *       extraObjectListActions={[...]}
- *     />
+ * <BrowserRouter>
+ *   <DataBrowserProvider
+ *     getS3Config={getS3Config}
+ *     theme={theme}
+ *   >
+ *     <Routes>
+ *       <Route path="/accounts/:accountName/buckets/*" element={
+ *         <DataBrowserUI basePath="/accounts/my-account" />
+ *       } />
+ *     </Routes>
  *   </DataBrowserProvider>
  * </BrowserRouter>
  * ```

package/dist/components/DataBrowserUI.js

@@ -1,64 +1,88 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Route, Routes } from "react-router";
+import styled_components from "styled-components";
 import { DataBrowserUICustomizationProvider } from "../contexts/DataBrowserUICustomizationContext.js";
 import { BucketCreate, BucketLifecycleFormPage, BucketNotificationCreatePage, BucketPage, BucketPolicyPage, BucketReplicationFormPage, ObjectLockSettings, ObjectPage } from "./index.js";
-const DataBrowserUI = (props)=>/*#__PURE__*/ jsx(DataBrowserUICustomizationProvider, {
-        config: props,
-        children: /*#__PURE__*/ jsxs(Routes, {
-            children: [
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/",
-                    element: /*#__PURE__*/ jsx(Navigate, {
-                        to: "/buckets",
-                        replace: true
+import { useS3ConfigSwitch } from "../hooks/useS3ConfigSwitch.js";
+import { AppContainer } from "@scality/core-ui";
+const RoutesContainer = styled_components.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+`;
+const DataBrowserUIContent = ({ header })=>{
+    useS3ConfigSwitch();
+    return /*#__PURE__*/ jsx(AppContainer, {
+        children: [
+            ...header ? [
+                /*#__PURE__*/ jsx(AppContainer.ContextContainer, {
+                    children: /*#__PURE__*/ jsx("div", {
+                        children: header
+                    })
+                }, "header")
+            ] : [],
+            /*#__PURE__*/ jsx(AppContainer.MainContent, {
+                children: /*#__PURE__*/ jsx(RoutesContainer, {
+                    children: /*#__PURE__*/ jsxs(Routes, {
+                        children: [
+                            /*#__PURE__*/ jsx(Route, {
+                                index: true,
+                                element: /*#__PURE__*/ jsx(BucketPage, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: "-/create",
+                                element: /*#__PURE__*/ jsx(BucketCreate, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: ":bucketName/objects/object-lock-settings",
+                                element: /*#__PURE__*/ jsx(ObjectLockSettings, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: ":bucketName/lifecycle/edit/:ruleId",
+                                element: /*#__PURE__*/ jsx(BucketLifecycleFormPage, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: ":bucketName/lifecycle/create",
+                                element: /*#__PURE__*/ jsx(BucketLifecycleFormPage, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: ":bucketName/replication/edit/:ruleId",
+                                element: /*#__PURE__*/ jsx(BucketReplicationFormPage, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: ":bucketName/replication/create",
+                                element: /*#__PURE__*/ jsx(BucketReplicationFormPage, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: ":bucketName/notifications/create",
+                                element: /*#__PURE__*/ jsx(BucketNotificationCreatePage, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: ":bucketName/objects",
+                                element: /*#__PURE__*/ jsx(ObjectPage, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: ":bucketName/policy",
+                                element: /*#__PURE__*/ jsx(BucketPolicyPage, {})
+                            }),
+                            /*#__PURE__*/ jsx(Route, {
+                                path: ":bucketName/*",
+                                element: /*#__PURE__*/ jsx(BucketPage, {})
+                            })
+                        ]
                     })
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets",
-                    element: /*#__PURE__*/ jsx(BucketPage, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/-/create",
-                    element: /*#__PURE__*/ jsx(BucketCreate, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/:bucketName/*",
-                    element: /*#__PURE__*/ jsx(BucketPage, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/:bucketName/policy",
-                    element: /*#__PURE__*/ jsx(BucketPolicyPage, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/:bucketName/objects",
-                    element: /*#__PURE__*/ jsx(ObjectPage, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/:bucketName/notifications/create",
-                    element: /*#__PURE__*/ jsx(BucketNotificationCreatePage, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/:bucketName/lifecycle/create",
-                    element: /*#__PURE__*/ jsx(BucketLifecycleFormPage, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/:bucketName/lifecycle/edit/:ruleId",
-                    element: /*#__PURE__*/ jsx(BucketLifecycleFormPage, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/:bucketName/replication/create",
-                    element: /*#__PURE__*/ jsx(BucketReplicationFormPage, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/:bucketName/replication/edit/:ruleId",
-                    element: /*#__PURE__*/ jsx(BucketReplicationFormPage, {})
-                }),
-                /*#__PURE__*/ jsx(Route, {
-                    path: "/buckets/:bucketName/objects/object-lock-settings",
-                    element: /*#__PURE__*/ jsx(ObjectLockSettings, {})
                 })
-            ]
+            }, "main")
+        ]
+    });
+};
+const DataBrowserUI = (props)=>/*#__PURE__*/ jsx(DataBrowserUICustomizationProvider, {
+        config: props,
+        children: /*#__PURE__*/ jsx(DataBrowserUIContent, {
+            header: props.header
         })
     });
 export { DataBrowserUI };

package/dist/components/Editor.d.ts

@@ -1,4 +1,4 @@
-import { EditorProps, BeforeMount } from "@monaco-editor/react";
+import { EditorProps, BeforeMount } from '@monaco-editor/react';
 interface EditorComponentProps {
     value: string;
     onChange: (value: string | undefined) => void;

package/dist/components/Editor.js

@@ -1,7 +1,7 @@
 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";
+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,
@@ -16,7 +16,7 @@ const Editor = ({ value, onChange, readOnly = false, language = "json", height =
                 enabled: false
             },
             fontSize: 12,
-            lineNumbers: "on",
+            lineNumbers: 'on',
             automaticLayout: true,
             formatOnPaste: true,
             formatOnType: true