feat(manager-react-components): udpate datagrid spec

ref: MANAGER-15088 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Jan 28, 2025 · f2cc7b2 · f2cc7b2
1 parent a0b74df
commit f2cc7b2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx
@@ -6,7 +6,7 @@ export interface Item {
   price: number;
 }
 
-export const columsTmp = [
+export const columns = [
   {
     id: 'label',
     cell: (item: Item) => {

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx
@@ -46,6 +46,21 @@ const sampleColumns = [
   },
 ];
 
+const columns = [
+  {
+    id: 'name',
+    cell: (name: string) => {
+      return <span>{name}</span>;
+    },
+    label: 'Name',
+  },
+  {
+    id: 'another-column',
+    label: 'test',
+    cell: () => <DataGridTextCell />,
+  },
+];
+
 const DatagridTest = ({
   columns,
   items,
@@ -232,7 +247,7 @@ it('should disable overflow of table', async () => {
 
 it('should have the default number of loading row when isLoading is true and numberOfLoadingRows is not specified', async () => {
   const { queryAllByTestId } = render(
-    <Datagrid columns={sampleColumns} items={[]} totalItems={0} isLoading />,
+    <Datagrid columns={columns} items={[]} totalItems={0} isLoading />,
   );
   expect(queryAllByTestId('loading-row').length).toBe(
     defaultNumberOfLoadingRows,
@@ -243,7 +258,7 @@ it('should display the specified number of loading rows when isLoading is true',
   const numberOfLoadingRows = 2;
   const { queryAllByTestId } = render(
     <Datagrid
-      columns={sampleColumns}
+      columns={columns}
       items={[]}
       totalItems={0}
       numberOfLoadingRows={numberOfLoadingRows}
@@ -257,7 +272,7 @@ it('should display take the pageSize and not the default one as numberOfLoadingR
   const pageSize = 10;
   const { queryAllByTestId } = render(
     <Datagrid
-      columns={sampleColumns}
+      columns={columns}
       items={[]}
       totalItems={0}
       pagination={{ pageIndex: 0, pageSize }}
@@ -270,14 +285,16 @@ it('should display take the pageSize and not the default one as numberOfLoadingR
 it('should set isLoading to load more button when isLoading is true', async () => {
   const { getByTestId } = render(
     <Datagrid
-      columns={sampleColumns}
+      columns={columns}
       items={[]}
       totalItems={0}
       isLoading
       hasNextPage
     />,
   );
   expect(getByTestId('load-more-btn')).toHaveAttribute('is-loading', 'true');
+});
+
 it('should disable overflow of table', async () => {
   const { container } = render(
     <DatagridTest

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx
@@ -5,7 +5,7 @@ import { applyFilters } from '@ovh-ux/manager-core-api';
 import { Datagrid } from './datagrid.component';
 import { useDatagridSearchParams } from './useDatagridSearchParams';
 import { useColumnFilters } from '../filters';
-import { columsTmp, columsFilters, Item } from './datagrid.mock';
+import { columns as clm, columsFilters, Item } from './datagrid.mock';
 
 function sortItems(
   itemList: Item[],
@@ -24,7 +24,7 @@ const DatagridStory = ({
   items,
   isPaginated,
   isSortable,
-  columns = columsTmp,
+  columns = clm,
 }: {
   items: Item[];
   isPaginated: boolean;
@@ -75,7 +75,7 @@ const DatagridStory = ({
 export const Basic = DatagridStory.bind({});
 
 Basic.args = {
-  columns: columsTmp,
+  columns: clm,
   items: [...Array(50).keys()].map((_, i) => ({
     label: `Item #${i}`,
     price: Math.floor(1 + Math.random() * 100),
@@ -87,7 +87,7 @@ Basic.args = {
 export const Sortable = DatagridStory.bind({});
 
 Sortable.args = {
-  columns: columsTmp,
+  columns: clm,
   items: [...Array(8).keys()].map((_, i) => ({
     label: `Service #${i}`,
     price: Math.floor(1 + Math.random() * 100),

diff --git a/packages/manager-react-components/src/hooks/datagrid/useIcebergV2.tsx b/packages/manager-react-components/src/hooks/datagrid/useIcebergV2.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { IcebergFetchParamsV2, fetchIcebergV2 } from '@ovh-ux/manager-core-api';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { defaultPageSize } from './index';
-import { useColumnFilters, ColumnSort } from '../../components';
+import { ColumnSort } from '../../components';
 
 interface IcebergV2Hook<T> {
   queryKey: string[];