@scality/data-browser-library 1.0.3 → 1.0.5

package/dist/components/objects/ObjectList.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ConstrainedText, FormattedDateTime, Icon, Link, PrettyBytes, Text, Toggle, Wrap, spacing, useToast } from "@scality/core-ui";
+import { ConstrainedText, FormattedDateTime, Icon, Link, PrettyBytes, SearchInput, Text, Toggle, Wrap, spacing, useToast } from "@scality/core-ui";
 import { Box, Table } from "@scality/core-ui/dist/next";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router";
+import styled_components from "styled-components";
 import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useSearchObjects, useSearchObjectsVersions } from "../../hooks/index.js";
 import { useGetPresignedDownload } from "../../hooks/presignedOperations.js";
@@ -13,6 +15,19 @@ import MetadataSearch from "../search/MetadataSearch.js";
 import CreateFolderButton from "./CreateFolderButton.js";
 import DeleteObjectButton from "./DeleteObjectButton.js";
 import UploadButton from "./UploadButton.js";
+const TableWithAlignedRows = styled_components.div`
+  height: 100%;
+  flex: 1;
+  .tr {
+    gap: ${spacing.r16};
+  }
+`;
+const TruncatedName = styled_components.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+`;
 const DEFAULT_PAGE_SIZE = 20;
 const SEARCH_QUERY_PARAM = 'search';
 const NAME_COLUMN_FLEX = '2';
@@ -26,6 +41,21 @@ const getVersionTextColor = (row)=>{
     const isVersion = 'version' === row.original.type;
     return !isLatest && isVersion ? 'infoPrimary' : 'textPrimary';
 };
+const pinFolderFirst = (rowA, rowB, desc)=>{
+    const aIsFolder = 'folder' === rowA.original.type;
+    const bIsFolder = 'folder' === rowB.original.type;
+    if (aIsFolder === bIsFolder) return 0;
+    if (aIsFolder) return desc ? 1 : -1;
+    return desc ? -1 : 1;
+};
+const pinLatestVersion = (rowA, rowB, desc)=>{
+    const aKey = rowA.original.Key || '';
+    const bKey = rowB.original.Key || '';
+    if (!aKey || !bKey || aKey !== bKey) return 0;
+    if (rowA.original.IsLatest && !rowB.original.IsLatest) return desc ? 1 : -1;
+    if (!rowA.original.IsLatest && rowB.original.IsLatest) return desc ? -1 : 1;
+    return 0;
+};
 const removePrefix = (path, prefix)=>{
     if (!prefix) return path;
     if (path.startsWith(prefix)) return path.slice(prefix.length);
@@ -55,16 +85,20 @@ const createNameColumn = (onPrefixChange, onDownload)=>({
         Header: 'Name',
         accessor: 'displayName',
         id: 'name',
-        sortType: (rowA, rowB)=>{
-            const aIsFolder = 'folder' === rowA.original.type;
-            const bIsFolder = 'folder' === rowB.original.type;
-            if (aIsFolder && !bIsFolder) return -1;
-            if (!aIsFolder && bIsFolder) return 1;
+        sortType: (rowA, rowB, _columnId, desc)=>{
+            const folderOrder = pinFolderFirst(rowA, rowB, desc);
+            if (0 !== folderOrder) return folderOrder;
             const aName = String(rowA.values.displayName || '');
             const bName = String(rowB.values.displayName || '');
-            return aName.localeCompare(bName, 'en', {
+            const nameComparison = aName.localeCompare(bName, 'en', {
                 sensitivity: 'base'
             });
+            if (0 !== nameComparison) return nameComparison;
+            const pinOrder = pinLatestVersion(rowA, rowB, desc);
+            if (0 !== pinOrder) return pinOrder;
+            const aTime = rowA.original.LastModified ? new Date(rowA.original.LastModified).getTime() : 0;
+            const bTime = rowB.original.LastModified ? new Date(rowB.original.LastModified).getTime() : 0;
+            return bTime - aTime;
         },
         Cell: ({ value, row })=>{
             const isFolder = 'folder' === row.original.type;
@@ -75,24 +109,25 @@ const createNameColumn = (onPrefixChange, onDownload)=>({
             iconName = isFolder ? 'Folder' : isDeleteMarker ? 'Deletion-marker' : 'File';
             const shouldIndent = isVersion && !isLatest;
             const isLegalHoldEnabled = isObjectLike(row.original) && Boolean(row.original.isLegalHoldEnabled);
-            return /*#__PURE__*/ jsx(ConstrainedText, {
-                text: /*#__PURE__*/ jsxs(Box, {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: spacing.r8,
-                    paddingLeft: shouldIndent ? spacing.r24 : 0,
-                    children: [
-                        /*#__PURE__*/ jsx(Icon, {
-                            name: iconName,
-                            size: "sm",
-                            color: getVersionTextColor(row)
-                        }),
-                        isLegalHoldEnabled && /*#__PURE__*/ jsx(Icon, {
-                            name: "Rebalance",
-                            size: "sm",
-                            color: getVersionTextColor(row)
-                        }),
-                        isDeleteMarker ? /*#__PURE__*/ jsx(Text, {
+            return /*#__PURE__*/ jsxs(Box, {
+                display: "flex",
+                alignItems: "center",
+                gap: spacing.r8,
+                paddingLeft: shouldIndent ? spacing.r24 : 0,
+                minWidth: 0,
+                children: [
+                    /*#__PURE__*/ jsx(Icon, {
+                        name: iconName,
+                        size: "sm",
+                        color: getVersionTextColor(row)
+                    }),
+                    isLegalHoldEnabled && /*#__PURE__*/ jsx(Icon, {
+                        name: "Rebalance",
+                        size: "sm",
+                        color: getVersionTextColor(row)
+                    }),
+                    /*#__PURE__*/ jsx(TruncatedName, {
+                        children: isDeleteMarker ? /*#__PURE__*/ jsx(Text, {
                             color: getVersionTextColor(row),
                             children: value
                         }) : /*#__PURE__*/ jsx(Text, {
@@ -106,14 +141,14 @@ const createNameColumn = (onPrefixChange, onDownload)=>({
                                 children: value
                             })
                         })
-                    ]
-                }),
-                lineClamp: 2
+                    })
+                ]
             });
         },
         cellStyle: {
             flex: NAME_COLUMN_FLEX,
-            width: 'unset'
+            width: 'unset',
+            minWidth: 0
         }
     });
 const createVersionIdColumn = ()=>({
@@ -132,7 +167,11 @@ const createVersionIdColumn = ()=>({
             return /*#__PURE__*/ jsx(ConstrainedText, {
                 text: versionId,
                 lineClamp: 1,
-                color: textColor
+                color: textColor,
+                tooltipStyle: {
+                    maxWidth: '20rem',
+                    wordBreak: 'break-all'
+                }
             });
         },
         cellStyle: {
@@ -143,10 +182,25 @@ const createVersionIdColumn = ()=>({
             maxWidth: '8rem'
         }
     });
-const createLastModifiedColumn = ()=>({
+const createLastModifiedColumn = (groupLatestModified)=>({
         Header: 'Modified on',
         accessor: 'LastModified',
         id: 'lastModified',
+        sortType: (rowA, rowB, _columnId, desc)=>{
+            const folderOrder = pinFolderFirst(rowA, rowB, desc);
+            if (0 !== folderOrder) return folderOrder;
+            const pinOrder = pinLatestVersion(rowA, rowB, desc);
+            if (0 !== pinOrder) return pinOrder;
+            const aKey = rowA.original.Key || '';
+            const bKey = rowB.original.Key || '';
+            const sameKey = '' !== aKey && '' !== bKey && aKey === bKey;
+            const a = !sameKey && groupLatestModified?.get(aKey) || rowA.original.LastModified;
+            const b = !sameKey && groupLatestModified?.get(bKey) || rowB.original.LastModified;
+            if (!a && !b) return 0;
+            if (!a) return -1;
+            if (!b) return 1;
+            return new Date(a).getTime() - new Date(b).getTime();
+        },
         Cell: ({ value, row })=>{
             if ('folder' === row.original.type || null == value) return /*#__PURE__*/ jsx(Text, {
                 children: "-"
@@ -162,7 +216,6 @@ const createLastModifiedColumn = ()=>({
         cellStyle: {
             flex: LAST_MODIFIED_COLUMN_FLEX,
             textAlign: 'right',
-            paddingRight: spacing.r16,
             width: 'unset',
             minWidth: '10rem'
         }
@@ -190,7 +243,6 @@ const createSizeColumn = ()=>({
         cellStyle: {
             flex: SIZE_COLUMN_FLEX,
             textAlign: 'right',
-            paddingRight: spacing.r16,
             width: 'unset'
         }
     });
@@ -239,12 +291,16 @@ function createOverrideMap(customItems) {
             item
         ]));
 }
-const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
+const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange, onSelectedObjectsChange })=>{
     const { extraObjectListColumns, extraObjectListActions } = useDataBrowserUICustomization();
     const invalidateQueries = useInvalidateQueries();
     const [showVersions, setShowVersions] = useState(false);
     const isMetadataSearchEnabled = useFeatures('metadatasearch');
-    const metadataSearchQuery = useQueryParams().get('metadatasearch');
+    const queryParams = useQueryParams();
+    const metadataSearchQuery = queryParams.get('metadatasearch');
+    const { search: locationSearch, pathname } = useLocation();
+    const navigate = useNavigate();
+    const [searchValue, setSearchValue] = useState(queryParams.get(SEARCH_QUERY_PARAM) || '');
     const [selectedObjects, setSelectedObjects] = useState([]);
     const { mutateAsync: getPresignedDownload } = useGetPresignedDownload();
     const downloadingRef = useRef(new Set());
@@ -338,7 +394,8 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     const versionSearchParams = useMemo(()=>({
             Bucket: bucketName,
             Prefix: prefix,
-            MaxKeys: DEFAULT_PAGE_SIZE
+            MaxKeys: DEFAULT_PAGE_SIZE,
+            Delimiter: '/'
         }), [
         bucketName,
         prefix
@@ -348,6 +405,7 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     });
     useEffect(()=>{
         setSelectedObjects([]);
+        onObjectSelectRef.current(null);
     }, [
         prefix,
         showVersions
@@ -429,9 +487,10 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     }, [
         prefix
     ]);
-    const tableData = useMemo(()=>{
+    const { tableData, versionGroupLatestModified } = useMemo(()=>{
         let folders = [];
         const items = [];
+        const latestModifiedMap = new Map();
         if (showVersions) {
             folders = listObjectsQuery.data?.pages ? processFolders(listObjectsQuery.data.pages) : [];
             const objectsWithVersions = new Set();
@@ -467,6 +526,8 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
                         const bTime = b.LastModified?.getTime() ?? 0;
                         return bTime - aTime;
                     });
+                    const latestItem = allItems[0];
+                    if (latestItem?.Key && latestItem.LastModified) latestModifiedMap.set(latestItem.Key, latestItem.LastModified);
                     allItems.forEach((item)=>{
                         if (!item.Key) return;
                         if (item.Key.endsWith('/')) return;
@@ -506,11 +567,13 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
                 });
             });
         }
-        const allItems = [
-            ...folders,
-            ...items
-        ];
-        return allItems;
+        return {
+            tableData: [
+                ...folders,
+                ...items
+            ],
+            versionGroupLatestModified: latestModifiedMap
+        };
     }, [
         showVersions,
         listObjectsQuery.data,
@@ -520,7 +583,9 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
         createObjectItem
     ]);
     const versionIdColumn = useMemo(()=>createVersionIdColumn(), []);
-    const lastModifiedColumn = useMemo(()=>createLastModifiedColumn(), []);
+    const lastModifiedColumn = useMemo(()=>createLastModifiedColumn(versionGroupLatestModified), [
+        versionGroupLatestModified
+    ]);
     const sizeColumn = useMemo(()=>createSizeColumn(), []);
     const storageClassColumn = useMemo(()=>createStorageClassColumn(), []);
     const nameColumn = useMemo(()=>createNameColumn(handlePrefixChange, handleDownload), [
@@ -587,6 +652,19 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     }, [
         invalidateQueries
     ]);
+    const handleSearchChange = useCallback((value)=>{
+        setSearchValue(value);
+        const params = new URLSearchParams(locationSearch);
+        if (value) params.set(SEARCH_QUERY_PARAM, value);
+        else params.delete(SEARCH_QUERY_PARAM);
+        navigate(`${pathname}?${params.toString()}`, {
+            replace: true
+        });
+    }, [
+        locationSearch,
+        pathname,
+        navigate
+    ]);
     const handleUploadError = useCallback(()=>{}, []);
     const handleFolderError = useCallback(()=>{}, []);
     const renderUploadAction = useCallback(()=>/*#__PURE__*/ jsx(UploadButton, {
@@ -611,12 +689,21 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
         handleFolderSuccess,
         handleFolderError
     ]);
+    const handleDeleteSuccess = useCallback(()=>{
+        setSelectedObjects([]);
+        onSelectedObjectsChange?.([]);
+        onObjectSelectRef.current(null);
+    }, [
+        onSelectedObjectsChange
+    ]);
     const renderDeleteAction = useCallback(()=>/*#__PURE__*/ jsx(DeleteObjectButton, {
             objects: selectedObjects,
-            bucketName: bucketName
+            bucketName: bucketName,
+            onDeleteSuccess: handleDeleteSuccess
         }), [
         selectedObjects,
-        bucketName
+        bucketName,
+        handleDeleteSuccess
     ]);
     const actions = useMemo(()=>{
         const defaultActionsMap = {
@@ -662,73 +749,86 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     const handleMultiSelectionChanged = useCallback((rows)=>{
         const objects = rows.map((row)=>row.original);
         setSelectedObjects(objects);
-    }, []);
+        onSelectedObjectsChange?.(objects);
+    }, [
+        onSelectedObjectsChange
+    ]);
     const handleSingleRowSelected = useCallback((row)=>{
         handleObjectSelect(row.original);
+        setSelectedObjects([
+            row.original
+        ]);
+        onSelectedObjectsChange?.([
+            row.original
+        ]);
     }, [
-        handleObjectSelect
+        handleObjectSelect,
+        onSelectedObjectsChange
     ]);
     const handleToggleAll = useCallback((selected)=>{
-        selected ? setSelectedObjects(tableData) : setSelectedObjects([]);
+        const objects = selected ? tableData : [];
+        setSelectedObjects(objects);
+        onSelectedObjectsChange?.(objects);
     }, [
-        tableData
+        tableData,
+        onSelectedObjectsChange
     ]);
     const tableStatus = isLoading ? 'loading' : error ? 'error' : 'success';
-    const entityName = useMemo(()=>({
-            en: {
-                singular: 'object',
-                plural: 'objects'
-            }
-        }), []);
-    return /*#__PURE__*/ jsxs(Table, {
-        columns: columns,
-        data: tableData,
-        status: tableStatus,
-        onBottom: handleReachBottom,
-        entityName: entityName,
-        children: [
-            /*#__PURE__*/ jsxs(Wrap, {
-                padding: spacing.r16,
-                children: [
-                    isMetadataSearchEnabled ? /*#__PURE__*/ jsx(MetadataSearch, {
-                        isError: !!error
-                    }) : /*#__PURE__*/ jsx(Table.SearchWithQueryParams, {
-                        queryParams: SEARCH_QUERY_PARAM
-                    }),
-                    /*#__PURE__*/ jsxs(Box, {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                        gap: spacing.r8,
-                        children: [
-                            /*#__PURE__*/ jsx(Box, {
-                                display: "flex",
-                                alignItems: "center",
-                                gap: spacing.r8,
-                                children: actions.map((action)=>/*#__PURE__*/ jsx(Fragment, {
-                                        children: action.render()
-                                    }, action.id))
-                            }),
-                            /*#__PURE__*/ jsx(Toggle, {
-                                toggle: showVersions,
-                                onChange: (e)=>setShowVersions(e.target.checked),
-                                label: "List Versions",
-                                "aria-label": showVersions ? 'Hide object versions' : 'Show object versions',
-                                "aria-pressed": showVersions
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Table.MultiSelectableContent, {
-                rowHeight: "h40",
-                onMultiSelectionChanged: handleMultiSelectionChanged,
-                onSingleRowSelected: handleSingleRowSelected,
-                onToggleAll: handleToggleAll,
-                separationLineVariant: "backgroundLevel1",
-                isLoadingMoreItems: isFetchingNextPage
-            })
-        ]
+    return /*#__PURE__*/ jsx(TableWithAlignedRows, {
+        children: /*#__PURE__*/ jsxs(Table, {
+            columns: columns,
+            data: tableData,
+            status: tableStatus,
+            onBottom: handleReachBottom,
+            globalFilter: isMetadataSearchEnabled ? void 0 : searchValue,
+            children: [
+                /*#__PURE__*/ jsxs(Wrap, {
+                    padding: spacing.r16,
+                    children: [
+                        isMetadataSearchEnabled ? /*#__PURE__*/ jsx(MetadataSearch, {
+                            isError: !!error
+                        }) : /*#__PURE__*/ jsx(SearchInput, {
+                            value: searchValue,
+                            placeholder: "Search",
+                            size: "1",
+                            onChange: (e)=>handleSearchChange(e.target.value),
+                            onReset: ()=>handleSearchChange('')
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            gap: spacing.r8,
+                            children: [
+                                /*#__PURE__*/ jsx(Box, {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: spacing.r8,
+                                    children: actions.map((action)=>/*#__PURE__*/ jsx(Fragment, {
+                                            children: action.render()
+                                        }, action.id))
+                                }),
+                                /*#__PURE__*/ jsx(Toggle, {
+                                    toggle: showVersions,
+                                    onChange: (e)=>setShowVersions(e.target.checked),
+                                    label: "List Versions",
+                                    "aria-label": showVersions ? 'Hide object versions' : 'Show object versions',
+                                    "aria-pressed": showVersions
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Table.MultiSelectableContent, {
+                    rowHeight: "h40",
+                    onMultiSelectionChanged: handleMultiSelectionChanged,
+                    onSingleRowSelected: handleSingleRowSelected,
+                    onToggleAll: handleToggleAll,
+                    separationLineVariant: "backgroundLevel1",
+                    isLoadingMoreItems: isFetchingNextPage
+                })
+            ]
+        })
     });
 };
 export { ObjectList, isObjectLike };

package/dist/components/objects/ObjectPage.js

@@ -10,11 +10,13 @@ const ObjectPage = ()=>{
     const navigate = useDataBrowserNavigate();
     const [searchParams] = useSearchParams();
     const [item, setItem] = useState(null);
+    const [multipleSelected, setMultipleSelected] = useState(false);
     const prefix = searchParams.get('prefix') || '';
     const handlePrefixChange = useCallback((newPrefix)=>{
         const newSearchParams = new URLSearchParams(searchParams);
         newSearchParams.set('prefix', newPrefix);
         setItem(null);
+        setMultipleSelected(false);
         navigate(`?${newSearchParams.toString()}`, {
             replace: true
         });
@@ -22,12 +24,25 @@ const ObjectPage = ()=>{
         navigate,
         searchParams
     ]);
+    const handleObjectSelect = useCallback((object)=>{
+        setItem(object);
+        setMultipleSelected(false);
+    }, []);
+    const handleSelectedObjectsChange = useCallback((objects)=>{
+        if (1 === objects.length) {
+            setItem(objects[0]);
+            setMultipleSelected(false);
+        } else if (objects.length > 1) {
+            setItem(null);
+            setMultipleSelected(true);
+        } else {
+            setItem(null);
+            setMultipleSelected(false);
+        }
+    }, []);
     if (!bucketName) return /*#__PURE__*/ jsx("div", {
         children: "Bucket name is required"
     });
-    const handleObjectSelect = (object)=>{
-        setItem(object);
-    };
     return /*#__PURE__*/ jsx(BrowserPageLayout, {
         iconName: "Bucket",
         title: bucketName,
@@ -35,10 +50,12 @@ const ObjectPage = ()=>{
             bucketName: bucketName,
             prefix: prefix,
             onObjectSelect: handleObjectSelect,
-            onPrefixChange: handlePrefixChange
+            onPrefixChange: handlePrefixChange,
+            onSelectedObjectsChange: handleSelectedObjectsChange
         }),
         rightPanel: /*#__PURE__*/ jsx(ObjectDetails, {
-            item: item
+            item: item,
+            multipleSelected: multipleSelected
         }),
         withArrowNavigation: true,
         arrowNavigationPath: `/buckets/${bucketName}`

package/dist/components/ui/ArrayFieldActions.js

@@ -1,11 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Icon, spacing } from "@scality/core-ui";
-import { convertSizeToRem } from "@scality/core-ui/dist/components/inputv2/inputv2";
 import { Box, Button } from "@scality/core-ui/dist/next";
 function ArrayFieldActions({ onRemove, onAdd, canRemove, canAdd = true, showAdd, removeLabel = 'Remove', addLabel = 'Add' }) {
     return /*#__PURE__*/ jsxs(Box, {
         display: "flex",
-        width: convertSizeToRem('1/2'),
         gap: spacing.r8,
         justifyContent: "flex-start",
         children: [

package/dist/components/ui/FilterFormSection.js

@@ -1,8 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { FormGroup, FormSection, Stack, Text } from "@scality/core-ui";
+import { FormGroup, FormSection, Stack } from "@scality/core-ui";
 import { convertRemToPixels } from "@scality/core-ui/dist/components/tablev2/TableUtils";
-import { Box, Input, Select } from "@scality/core-ui/dist/next";
+import { Input, Select } from "@scality/core-ui/dist/next";
 import { ArrayFieldActions } from "./ArrayFieldActions.js";
+import { FormCell, FormColumnHeaders, FormRow } from "./FormGrid.js";
 const filterTypeOptions = [
     {
         value: 'none',
@@ -68,42 +69,22 @@ function FilterFormSection({ filterType, onFilterTypeChange, prefixRegister, tag
                     direction: "vertical",
                     gap: "r8",
                     children: [
-                        /*#__PURE__*/ jsxs(Stack, {
-                            gap: "r8",
-                            children: [
-                                /*#__PURE__*/ jsx(Box, {
-                                    flex: "1",
-                                    children: /*#__PURE__*/ jsx(Text, {
-                                        color: "textSecondary",
-                                        children: "Key"
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Box, {
-                                    flex: "1",
-                                    children: /*#__PURE__*/ jsx(Text, {
-                                        color: "textSecondary",
-                                        children: "Value"
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Box, {
-                                    width: "80px"
-                                })
-                            ]
-                        }),
-                        tagFields.map((field, index)=>/*#__PURE__*/ jsxs(Stack, {
-                                gap: "r8",
+                        /*#__PURE__*/ jsx(FormColumnHeaders, {}),
+                        tagFields.map((field, index)=>/*#__PURE__*/ jsxs(FormRow, {
                                 children: [
-                                    /*#__PURE__*/ jsx(Input, {
-                                        id: `tag-key-${index}`,
-                                        placeholder: "Key",
-                                        size: "1/2",
-                                        ...tagKeyRegister(index)
+                                    /*#__PURE__*/ jsx(FormCell, {
+                                        children: /*#__PURE__*/ jsx(Input, {
+                                            id: `tag-key-${index}`,
+                                            placeholder: "Key",
+                                            ...tagKeyRegister(index)
+                                        })
                                     }),
-                                    /*#__PURE__*/ jsx(Input, {
-                                        id: `tag-value-${index}`,
-                                        placeholder: "Value",
-                                        size: "1/2",
-                                        ...tagValueRegister(index)
+                                    /*#__PURE__*/ jsx(FormCell, {
+                                        children: /*#__PURE__*/ jsx(Input, {
+                                            id: `tag-value-${index}`,
+                                            placeholder: "Value",
+                                            ...tagValueRegister(index)
+                                        })
                                     }),
                                     /*#__PURE__*/ jsx(ArrayFieldActions, {
                                         showAdd: index === tagFields.length - 1,

package/dist/components/ui/FormGrid.d.ts

@@ -0,0 +1,7 @@
+export declare const FormRow: import("styled-components").StyledComponent<"div", any, {
+    columns?: string;
+}, never>;
+export declare const FormCell: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormColumnHeaders: ({ wideKey }: {
+    wideKey?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/FormGrid.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text, spacing } from "@scality/core-ui";
+import styled_components from "styled-components";
+const ACTIONS_WIDTH = `calc(${spacing.r32} * 2 + ${spacing.r8})`;
+const FormRow = styled_components.div`
+  display: grid;
+  grid-template-columns: ${({ columns })=>columns || '1fr 1fr'} ${ACTIONS_WIDTH};
+  gap: ${spacing.r8};
+  align-items: center;
+`;
+const FormCell = styled_components.div`
+  min-width: 0;
+  > * {
+    width: 100% !important;
+  }
+`;
+const FormColumnHeaders = ({ wideKey })=>/*#__PURE__*/ jsxs(FormRow, {
+        columns: wideKey ? '3fr auto 2fr' : void 0,
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                color: "textPrimary",
+                children: "Key"
+            }),
+            wideKey && /*#__PURE__*/ jsx("span", {
+                style: {
+                    visibility: 'hidden'
+                },
+                children: ":"
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                color: "textPrimary",
+                children: "Value"
+            }),
+            /*#__PURE__*/ jsx("span", {})
+        ]
+    });
+export { FormCell, FormColumnHeaders, FormRow };