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

package/dist/components/objects/ObjectDetails/index.d.ts

@@ -1,9 +1,25 @@
-import { TableItem } from "../ObjectList";
+import type { TableItem } from '../ObjectList';
 export interface ObjectCommonProps {
     bucketName: string;
     objectKey: string;
     versionId?: string;
 }
+interface ObjectDetailsContextValue {
+    bucketName: string;
+    objectKey: string;
+    versionId?: string;
+}
+/**
+ * Context for ObjectDetails component.
+ *
+ * **Important**: Always use `useObjectDetailsContext()` hook instead of accessing this context directly.
+ * The hook provides proper error handling if the context is not available.
+ *
+ * This context is exported for testing purposes only.
+ */
+export declare const ObjectDetailsContext: import("react").Context<ObjectDetailsContextValue | null>;
+export declare function useObjectDetailsContext(): ObjectDetailsContextValue;
 export declare const ObjectDetails: ({ item }: {
-    item: TableItem;
+    item: TableItem | null;
 }) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/objects/ObjectDetails/index.js

@@ -1,49 +1,161 @@
-import { jsx } from "react/jsx-runtime";
-import { useParams } from "react-router-dom";
-import { Text } from "@scality/core-ui";
-import { Tabs } from "@scality/core-ui/dist/next";
-import { ObjectSummary } from "./ObjectSummary.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Text, spacing } from "@scality/core-ui";
+import { Box, Tabs } from "@scality/core-ui/dist/next";
+import { createContext, memo, useContext, useMemo } from "react";
+import { useParams } from "react-router";
+import { useDataBrowserUICustomization } from "../../../contexts/DataBrowserUICustomizationContext.js";
 import { ObjectMetadata } from "./ObjectMetadata.js";
+import { ObjectSummary } from "./ObjectSummary.js";
 import { ObjectTags } from "./ObjectTags.js";
-const ObjectDetails = ({ item })=>{
-    const { bucketName } = useParams();
-    if (!bucketName || !item.Key) return /*#__PURE__*/ jsx(Text, {
-        children: "No object selected"
+const ObjectDetailsContext = /*#__PURE__*/ createContext(null);
+function useObjectDetailsContext() {
+    const context = useContext(ObjectDetailsContext);
+    if (!context) throw new Error('ObjectDetails components must be used within ObjectDetails');
+    return context;
+}
+const SummaryTab = /*#__PURE__*/ memo(()=>{
+    const { bucketName, objectKey, versionId } = useObjectDetailsContext();
+    return /*#__PURE__*/ jsx(ObjectSummary, {
+        bucketName: bucketName,
+        objectKey: objectKey,
+        versionId: versionId
     });
-    if ("deleteMarker" === item.type) return /*#__PURE__*/ jsx(Text, {
-        children: 'A "Delete Marker" is selected'
+});
+SummaryTab.displayName = 'ObjectDetails.SummaryTab';
+const MetadataTab = /*#__PURE__*/ memo(()=>{
+    const { bucketName, objectKey, versionId } = useObjectDetailsContext();
+    return /*#__PURE__*/ jsx(ObjectMetadata, {
+        bucketName: bucketName,
+        objectKey: objectKey,
+        versionId: versionId
     });
-    const versionId = "version" === item.type ? item.VersionId : void 0;
-    const mainTabs = [
-        {
-            label: "Summary",
-            Component: ObjectSummary,
-            query: ""
-        },
-        {
-            label: "Metadata",
-            Component: ObjectMetadata,
-            query: "metadata"
-        },
-        {
-            label: "Tags",
-            Component: ObjectTags,
-            query: "tags"
-        }
-    ];
-    return /*#__PURE__*/ jsx(Tabs, {
-        children: mainTabs.map((tab)=>/*#__PURE__*/ jsx(Tabs.Tab, {
-                label: tab.label,
-                path: "",
+});
+MetadataTab.displayName = 'ObjectDetails.MetadataTab';
+const TagsTab = /*#__PURE__*/ memo(()=>{
+    const { bucketName, objectKey, versionId } = useObjectDetailsContext();
+    return /*#__PURE__*/ jsx(ObjectTags, {
+        bucketName: bucketName,
+        objectKey: objectKey,
+        versionId: versionId
+    });
+});
+TagsTab.displayName = 'ObjectDetails.TagsTab';
+const CustomTab = ({ config })=>/*#__PURE__*/ jsx(Fragment, {
+        children: config.render()
+    });
+CustomTab.displayName = 'ObjectDetails.CustomTab';
+const ObjectDetails = ({ item })=>{
+    const { bucketName } = useParams();
+    const { extraObjectTabs } = useDataBrowserUICustomization();
+    const getPlaceholderMessage = ()=>{
+        if (!bucketName || !item || !item.Key) return /*#__PURE__*/ jsx(Text, {
+            children: "Select an object to view details"
+        });
+        if ('deleteMarker' === item.type) return /*#__PURE__*/ jsx(Text, {
+            children: 'A "Delete Marker" is selected'
+        });
+        if ('folder' === item.type) return /*#__PURE__*/ jsx(Text, {
+            children: 'A "Folder" is selected'
+        });
+        return /*#__PURE__*/ jsx(Text, {
+            children: "Select an object to view details"
+        });
+    };
+    const defaultTabsMap = useMemo(()=>({
+            summary: {
+                id: 'summary',
+                label: 'Summary',
+                path: '',
+                withoutPadding: false,
+                query: {
+                    tab: ''
+                },
+                type: 'default',
+                Component: SummaryTab
+            },
+            metadata: {
+                id: 'metadata',
+                label: 'Metadata',
+                path: '',
+                withoutPadding: false,
+                query: {
+                    tab: 'metadata'
+                },
+                type: 'default',
+                Component: MetadataTab
+            },
+            tags: {
+                id: 'tags',
+                label: 'Tags',
+                path: '',
+                withoutPadding: false,
+                query: {
+                    tab: 'tags'
+                },
+                type: 'default',
+                Component: TagsTab
+            }
+        }), []);
+    const allTabs = useMemo(()=>{
+        const customTabConfigs = extraObjectTabs ? extraObjectTabs.map((tabConfig)=>({
+                id: tabConfig.id,
+                label: tabConfig.title,
+                path: tabConfig.path || '',
                 query: {
-                    tab: tab.query
+                    tab: tabConfig.id
                 },
-                children: /*#__PURE__*/ jsx(tab.Component, {
-                    bucketName: bucketName,
-                    objectKey: item.Key,
-                    versionId: versionId
+                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
+        ];
+    }, [
+        extraObjectTabs,
+        defaultTabsMap
+    ]);
+    const versionId = item?.type === 'version' ? item.VersionId : void 0;
+    const objectKey = item?.Key || '';
+    const contextValue = useMemo(()=>({
+            bucketName: bucketName || '',
+            objectKey,
+            versionId
+        }), [
+        bucketName,
+        objectKey,
+        versionId
+    ]);
+    const isPlaceholder = !bucketName || !item || !item.Key || 'deleteMarker' === item.type || 'folder' === item.type;
+    const placeholderMessage = isPlaceholder ? getPlaceholderMessage() : null;
+    const tabsContent = useMemo(()=>allTabs.map((tab)=>/*#__PURE__*/ jsx(Tabs.Tab, {
+                label: tab.label,
+                path: tab.path,
+                query: tab.query,
+                withoutPadding: tab.withoutPadding,
+                children: isPlaceholder ? /*#__PURE__*/ jsx(Box, {
+                    padding: spacing.r16,
+                    display: "flex",
+                    justifyContent: "center",
+                    children: placeholderMessage
+                }) : 'default' === tab.type ? /*#__PURE__*/ jsx(tab.Component, {}) : /*#__PURE__*/ jsx(CustomTab, {
+                    config: tab.config
                 })
-            }, tab.query || "summary"))
+            }, tab.id)), [
+        allTabs,
+        isPlaceholder,
+        placeholderMessage
+    ]);
+    return isPlaceholder ? /*#__PURE__*/ jsx(Tabs, {
+        children: tabsContent
+    }) : /*#__PURE__*/ jsx(ObjectDetailsContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(Tabs, {
+            children: tabsContent
+        })
     });
 };
-export { ObjectDetails };
+export { ObjectDetails, ObjectDetailsContext, useObjectDetailsContext };

package/dist/components/objects/ObjectList.d.ts

@@ -1,40 +1,42 @@
-import type { _Object, DeleteMarkerEntry, ObjectVersion } from "@aws-sdk/client-s3";
+import type { DeleteMarkerEntry, ObjectVersion, _Object as S3Object } from '@aws-sdk/client-s3';
 type FolderItem = {
     Key: string;
     displayName: string;
-    type: "folder";
+    type: 'folder';
     LastModified?: undefined;
     Size?: undefined;
     StorageClass?: undefined;
     VersionId?: undefined;
     IsLatest?: undefined;
 };
-type ObjectItem = _Object & {
+type ObjectItem = S3Object & {
     displayName: string;
-    type: "object";
+    type: 'object';
     IsLatest?: boolean;
     VersionId?: string;
+    isLegalHoldEnabled?: boolean;
 };
 type VersionItem = ObjectVersion & {
     displayName: string;
-    type: "version";
+    type: 'version';
     IsLatest?: boolean;
+    isLegalHoldEnabled?: boolean;
 };
 type DeleteMarkerItem = DeleteMarkerEntry & {
     displayName: string;
-    type: "deleteMarker";
+    type: 'deleteMarker';
     isDeleteMarker: true;
     IsLatest?: boolean;
     Size?: number;
+    isLegalHoldEnabled?: boolean;
 };
-export type TableItem = (FolderItem | ObjectItem | VersionItem | DeleteMarkerItem) & {
-    [key: string]: unknown;
-};
+export type TableItem = FolderItem | ObjectItem | VersionItem | DeleteMarkerItem;
+export declare const isObjectLike: (item: TableItem) => item is ObjectItem | VersionItem | DeleteMarkerItem;
 interface ObjectListProps {
     bucketName: string;
     prefix: string;
     onObjectSelect: (object: TableItem) => void;
     onPrefixChange: (newPrefix: string) => void;
 }
-export declare const ObjectList: ({ bucketName, prefix, onObjectSelect, onPrefixChange, }: ObjectListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ObjectList: ({ bucketName, prefix, onObjectSelect, onPrefixChange }: ObjectListProps) => import("react/jsx-runtime").JSX.Element;
 export {};