feat(muk): update datagrid attributes

ref: #MANAGER-20066

Signed-off-by: Alex Boungnaseng <[email protected]>

Author: aboungnaseng-ovhcloud

packages/manager-ui-kit/src/components/datagrid/Datagrid.component.tsx

@@ -1,18 +1,15 @@
 import { useRef } from 'react';
 
-import { Table } from '@ovhcloud/ods-react';
+import { TABLE_SIZE, TABLE_VARIANT, Table } from '@ovhcloud/ods-react';
 
-import { DatagridProps } from './Datagrid.props';
+import { ContainerHeight, DatagridProps, RowHeight } from './Datagrid.props';
 import { TableBody } from './table/table-body/TableBody.component';
 import { TableFooter } from './table/table-footer/TableFooter.component';
 import { TableHeaderContent } from './table/table-head/table-header-content/TableHeaderContent.component';
 import { Topbar } from './topbar/Topbar.component';
 import './translations';
 import { useDatagrid } from './useDatagrid';
 
-const DEFAULT_ROW_HEIGHT = 50;
-const DEFAULT_CONTAINER_HEIGHT = 570;
-
 export const Datagrid = <T extends Record<string, unknown>>({
   autoScroll = true,
   columns,
@@ -24,18 +21,22 @@ export const Datagrid = <T extends Record<string, unknown>>({
   filters,
   hasNextPage,
   isLoading,
-  maxRowHeight = DEFAULT_ROW_HEIGHT,
+  maxRowHeight,
   resourceType,
   rowSelection,
   search,
   sorting,
+  size = TABLE_SIZE.md,
   subComponentHeight,
   topbar,
   totalCount,
+  variant = TABLE_VARIANT.default,
   onFetchAllPages,
   onFetchNextPage,
   renderSubComponent,
 }: DatagridProps<T>) => {
+  const rowHeight = RowHeight[size];
+  const DEFAULT_CONTAINER_HEIGHT = maxRowHeight || ContainerHeight[size];
   const {
     features,
     getHeaderGroups,
@@ -55,21 +56,31 @@ export const Datagrid = <T extends Record<string, unknown>>({
     setColumnVisibility: columnVisibility?.setColumnVisibility,
     rowSelection,
     expandable,
+    sizeRow: size,
   });
-  const { hasSortingFeature, hasSearchFeature, hasColumnVisibilityFeature, hasFilterFeature } =
-    features;
+  const {
+    hasSortingFeature,
+    hasSearchFeature,
+    hasColumnVisibilityFeature,
+    hasFilterFeature,
+  } = features;
   const rowModel = getRowModel();
   const { rows } = rowModel;
   const headerGroups = getHeaderGroups();
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const visibleColumns = getAllLeafColumns();
-  const containerSize = data?.length < 10 ? '100%' : `${DEFAULT_CONTAINER_HEIGHT}px`;
+  const containerSize =
+    data?.length < 10 ? '100%' : `${DEFAULT_CONTAINER_HEIGHT}px`;
   const containerStyle = {
     maxHeight: containerHeight ? `${containerHeight}px` : containerSize,
     height: containerHeight ? `${containerHeight}px` : containerSize,
   };
   const shouldRenderTopbar =
-    topbar || hasSearchFeature || hasFilterFeature || hasColumnVisibilityFeature;
+    topbar ||
+    hasSearchFeature ||
+    hasFilterFeature ||
+    hasColumnVisibilityFeature;
+
   return (
     <>
       {shouldRenderTopbar && (
@@ -89,8 +100,12 @@ export const Datagrid = <T extends Record<string, unknown>>({
           setColumnVisibility={columnVisibility?.setColumnVisibility}
         />
       )}
-      <div className="overflow-auto relative w-full" ref={tableContainerRef} style={containerStyle}>
-        <Table className="w-full">
+      <div
+        className="overflow-auto relative w-full"
+        ref={tableContainerRef}
+        style={containerStyle}
+      >
+        <Table size={size} variant={variant}>
           <TableHeaderContent<T>
             headerGroups={headerGroups}
             onSortChange={sorting?.setSorting}
@@ -106,7 +121,7 @@ export const Datagrid = <T extends Record<string, unknown>>({
             isLoading={isLoading ?? false}
             renderSubComponent={renderSubComponent}
             subComponentHeight={subComponentHeight}
-            maxRowHeight={maxRowHeight}
+            maxRowHeight={rowHeight}
             contentAlignLeft={contentAlignLeft}
           />
         </Table>

packages/manager-ui-kit/src/components/datagrid/Datagrid.props.ts

@@ -10,6 +10,8 @@ import {
   VisibilityState,
 } from '@tanstack/react-table';
 
+import { TABLE_SIZE, TABLE_VARIANT } from '@ovhcloud/ods-react';
+
 import {
   FilterTypeCategories as DatagridColumnTypes,
   FilterComparator,
@@ -78,9 +80,11 @@ export type DatagridProps<T extends Record<string, unknown>> = {
   rowSelection?: RowSelectionProps<T>;
   search?: SearchProps;
   sorting?: SortingProps;
+  size?: TABLE_SIZE;
   subComponentHeight?: number;
   topbar?: ReactNode;
   totalCount?: number;
+  variant?: TABLE_VARIANT;
   onFetchAllPages?: () => void;
   onFetchNextPage?: () => void;
   renderSubComponent?: (
@@ -95,7 +99,18 @@ export enum ColumnMetaType {
   BADGE = 'badge',
 }
 
-// export type ManagerColumnDef<T> = ColumnDef<T> & {
+export enum RowHeight {
+  sm = 32.5,
+  md = 48.5,
+  lg = 64.5,
+}
+
+export enum ContainerHeight {
+  sm = 375,
+  md = 550,
+  lg = 725,
+}
+
 export type DatagridColumn<T> = ColumnDef<T> & {
   /** set column comparator for the filter */
   comparator?: FilterComparator[];

packages/manager-ui-kit/src/components/datagrid/builder/TableBuilderProps.props.ts

@@ -1,6 +1,13 @@
 import { MutableRefObject } from 'react';
 
-import { ColumnDef, ColumnSort, Row, VisibilityState } from '@tanstack/react-table';
+import {
+  ColumnDef,
+  ColumnSort,
+  Row,
+  VisibilityState,
+} from '@tanstack/react-table';
+
+import { TABLE_SIZE } from '@ovhcloud/ods-react';
 
 import { ExpandedProps, RowSelectionProps } from '../Datagrid.props';
 import { ExpandableRow } from '../useDatagrid.props';
@@ -21,4 +28,5 @@ export type TableBuilderProps<T extends ExpandableRow<T>> = {
   rowSelection: RowSelectionProps<T>;
   setColumnVisibility: (columnVisibility: VisibilityState) => void;
   sorting: ColumnSort[];
+  size: TABLE_SIZE;
 };

packages/manager-ui-kit/src/components/datagrid/builder/TableHeaderBuilder.tsx

@@ -7,27 +7,44 @@ import {
   CheckboxControl,
   ICON_NAME,
   Icon,
+  TABLE_SIZE,
 } from '@ovhcloud/ods-react';
 
 import { Button } from '../../button';
 import { ExpandedProps } from '../Datagrid.props';
 
-export const getExpandable = <T,>(expandable: ExpandedProps) => ({
+export const getExpandable = <T,>(
+  expandable: ExpandedProps,
+  size: TABLE_SIZE,
+) => ({
   cell: ({ row }: { row: Row<T> }) => {
+    const ButtonSize =
+      size === TABLE_SIZE.sm
+        ? BUTTON_SIZE.xs
+        : size === TABLE_SIZE.md
+          ? BUTTON_SIZE.sm
+          : BUTTON_SIZE.md;
+    console.info('ButtonSize : ', ButtonSize);
     return row.getCanExpand() ? (
       <div
-        className="text-center"
         style={{
           ...(expandable && { paddingLeft: `${row.depth * 2}rem` }),
         }}
       >
         {expandable && row.depth ? null : (
           <Button
+            className="m-0 p-0"
             onClick={row.getToggleExpandedHandler()}
             variant={BUTTON_VARIANT.ghost}
-            size={BUTTON_SIZE.xs}
+            size={ButtonSize}
           >
-            <Icon name={row.getIsExpanded() ? ICON_NAME.chevronDown : ICON_NAME.chevronRight} />
+            <Icon
+              name={
+                row.getIsExpanded()
+                  ? ICON_NAME.chevronDown
+                  : ICON_NAME.chevronRight
+              }
+            />
           </Button>
         )}
       </div>
@@ -36,7 +53,8 @@ export const getExpandable = <T,>(expandable: ExpandedProps) => ({
   enableHiding: false,
   enableResizing: true,
   id: 'expander',
-  maxSize: 20,
+  maxSize: 30,
+  minSize: 30,
 });
 
 export const getRowSelection = <T,>() => ({
@@ -52,7 +70,6 @@ export const getRowSelection = <T,>() => ({
     </Checkbox>
   ),
   enableHiding: true,
-  enableResizing: true,
   header: ({ table: tableHeader }) => (
     <Checkbox
       id="select-all"
@@ -66,5 +83,7 @@ export const getRowSelection = <T,>() => ({
     </Checkbox>
   ),
   id: 'select',
-  maxSize: 20,
+  enableResizing: false,
+  maxSize: 30,
+  minSize: 30,
 });

packages/manager-ui-kit/src/components/datagrid/builder/useTableBuilder.ts

@@ -22,6 +22,7 @@ export const useTableBuilder = <T extends ExpandableRow<T>>({
   rowSelection,
   setColumnVisibility,
   sorting,
+  size,
 }: TableBuilderProps<T>) => {
   const params: Partial<TableOptions<T>> = {};
   const builder = {
@@ -32,7 +33,7 @@ export const useTableBuilder = <T extends ExpandableRow<T>>({
         cols = [getRowSelection(), ...cols];
       }
       if ((hasExpandableFeature && expandable) || renderSubComponent) {
-        cols = [getExpandable(expandable), ...cols];
+        cols = [getExpandable(expandable, size), ...cols];
       }
       params.columns = cols;
       return builder;

packages/manager-ui-kit/src/components/datagrid/table/table-body/TableBody.component.tsx

@@ -29,52 +29,64 @@ export const TableBody = <T,>({
     estimateSize: useCallback(() => maxRowHeight, [maxRowHeight]),
     getScrollElement: () => tableContainerRef.current,
     measureElement:
-      typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1
+      typeof window !== 'undefined' &&
+      navigator.userAgent.indexOf('Firefox') === -1
         ? (el) => el?.getBoundingClientRect().height
         : undefined,
     overscan: 15,
   });
 
   useEffect(() => {
-    if (autoScroll && previousRowsLength !== undefined && rows?.length > previousRowsLength) {
+    if (
+      autoScroll &&
+      previousRowsLength !== undefined &&
+      rows?.length > previousRowsLength
+    ) {
       rowVirtualizer.scrollToIndex(previousRowsLength, { align: 'start' });
     }
   }, [rows?.length]);
 
-  const EXPANDED_SIZE = subComponentHeight;
   const getOffset = useCallback(
-    (index: number) => {
+    (index: number, size: number) => {
       let count = 0;
+      console.info('getOffset size : ', size);
       for (let i = 0; i < index; i += 1) {
         if (rows[i]?.getIsExpanded()) count += 1;
       }
-      return count * EXPANDED_SIZE;
+      return count * subComponentHeight;
     },
-    [rows],
+    [subComponentHeight],
   );
 
   const totalHeight = useMemo(() => {
     const total = rows.reduce((acc, row) => {
-      return acc + maxRowHeight + (row.getIsExpanded() ? subComponentHeight : 0);
+      return (
+        acc + maxRowHeight + (row.getIsExpanded() ? subComponentHeight : 0)
+      );
     }, 0);
-    return isLoading ? total + (pageSize - 1) * maxRowHeight : total + rows.length;
+    return isLoading
+      ? total + (pageSize - 1) * maxRowHeight
+      : total + rows.length;
   }, [rows, maxRowHeight, subComponentHeight, isLoading, expanded]);
 
   if (rows?.length === 0 && !isLoading) {
     return <EmptyRow />;
   }
 
+  console.info('tableBody totalHeight : ', totalHeight);
   return (
     <tbody
       key={`table-body-${rows.length}`}
-      className="w-full relative p-0 overflow-hidden"
+      className="relative p-0 overflow-hidden"
       style={{
         height: totalHeight,
       }}
     >
       {rowVirtualizer.getVirtualItems().map((virtualRow) => {
         const row = rows[virtualRow?.index] as Row<T>;
-        const offset = renderSubComponent ? getOffset(virtualRow?.index) : 0;
+        const offset = renderSubComponent
+          ? getOffset(virtualRow?.index, virtualRow?.size)
+          : 0;
         return (
           <Fragment key={`table-body-tr-${row.id}`}>
             <tr
@@ -91,15 +103,18 @@ export const TableBody = <T,>({
               {row.getVisibleCells().map((cell) => (
                 <td
                   key={cell.id}
-                  className={`py-[8px] ${contentAlignLeft ? 'pl-4' : 'text-center'}`}
+                  className={`${contentAlignLeft ? 'pl-4' : 'text-center'}`}
                   style={{
                     width: cell.column.getSize(),
                     minWidth: cell.column.columnDef.minSize ?? 0,
                     maxWidth: cell.column.columnDef.maxSize ?? 'auto',
                     borderTop: 'none',
                   }}
                 >
-                  <div className="overflow-hidden text-ellipsis block w-full">
+                  <div
+                    className="overflow-hidden text-ellipsis flex items-center w-full"
+                    style={{ lineHeight: 1 }}
+                  >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </div>
                 </td>
@@ -113,7 +128,7 @@ export const TableBody = <T,>({
                 offset={offset}
                 renderSubComponent={renderSubComponent}
                 subComponentHeight={subComponentHeight}
-                maxRowHeight={maxRowHeight}
+                maxRowHeight={virtualRow?.size ?? maxRowHeight}
               />
             )}
           </Fragment>

packages/manager-ui-kit/src/components/datagrid/table/table-body/sub-row/SubRow.component.tsx

@@ -13,20 +13,17 @@ export const SubRow = ({
   <tr
     key={`${row.id}-expanded-tr`}
     data-index={`${virtualRow.index}-expanded-tr`}
-    className={`overflow-hidden absolute top-0 display-table table-layout-fixed`}
+    className={`overflow-hidden absolute top-0 display-table table-layout-fixed h-full`}
     style={{
       left: -1,
       height: `${subComponentHeight}px`,
       width: '-webkit-fill-available',
-      borderRight: '1px solid var(--ods-color-neutral-100)',
-      borderLeft: '1px solid var(--ods-color-neutral-100)',
-      borderBottom: '1px solid var(--ods-color-neutral-100)',
-      transform: `translateY(${virtualRow.start + offset + maxRowHeight}px)`,
+      transform: `translateY(${virtualRow.start + offset + maxRowHeight - 1}px)`,
     }}
   >
-    <div className="overflow-hidden p-[8px] text-ellipsis block w-full">
+    <td className="overflow-hidden p-[8px] text-ellipsis block w-full h-full">
       {renderSubComponent(row)}
-    </div>
+    </td>
   </tr>
 );