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

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

Hide file tree

Showing 7 changed files with 58 additions and 43 deletions.
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { ColumnSort } from '@tanstack/react-table';
+import { OdsDivider } from '@ovhcloud/ods-components/react';
 import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 import { withRouter } from 'storybook-addon-react-router-v6';
 import { useSearchParams } from 'react-router-dom';
 import { Datagrid } from './datagrid.component';
 import { useColumnFilters } from '../filters';
-import { columsTmp, columsFilters } from './datagrid.mock';
+import { columns, columsFilters } from './datagrid.mock';
 import { ActionMenu } from '../navigation';
 
 interface Item {
@@ -34,7 +35,7 @@ const DatagridStory = (args) => {
       {`${searchParams}` && (
         <>
           <pre>Search params: ?{`${searchParams}`}</pre>
-          <hr />
+          <OdsDivider />
         </>
       )}
       <Datagrid
@@ -59,7 +60,7 @@ const DatagridStory = (args) => {
 export const Basic = DatagridStory.bind({});
 
 Basic.args = {
-  columns: columsTmp,
+  columns,
   items: [...Array(10).keys()].map((_, i) => ({
     label: `Item #${i}`,
     price: Math.floor(1 + Math.random() * 100),
@@ -72,14 +73,14 @@ Basic.args = {
 export const Empty = DatagridStory.bind({});
 
 Empty.args = {
-  columns: columsTmp,
+  columns,
   items: [],
 };
 
 export const Sortable = DatagridStory.bind({});
 
 Sortable.args = {
-  columns: columsTmp,
+  columns,
   items: [...Array(10).keys()].map((_, i) => ({
     label: `Item #${i}`,
     price: Math.floor(1 + Math.random() * 100),
@@ -98,7 +99,7 @@ const actionsColumns = {
 export const WithActions = DatagridStory.bind({});
 
 WithActions.args = {
-  columns: [...columsTmp, actionsColumns],
+  columns: [...columns, actionsColumns],
   items: [...Array(8).keys()].map((_, i) => {
     return {
       label: `Service #${i}`,

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   ColumnDef,
@@ -28,6 +28,7 @@ import {
   FilterTypeCategories,
 } from '@ovh-ux/manager-core-api';
 import { FilterAdd, FilterList } from '../filters';
+import { ColumnFilter } from '../filters/filter-add.component';
 import { FilterWithLabel } from '../filters/interface';
 import { DataGridTextCell } from './text-cell.component';
 import { defaultNumberOfLoadingRows } from './datagrid.contants';
@@ -50,7 +51,7 @@ export interface DatagridColumn<T> {
   /** is the column sortable ? (defaults is true) */
   isSortable?: boolean;
   /** set column comparator for the filter */
-  comparator?: FilterComparator;
+  comparator?: FilterComparator[];
   /** Filters displayed for the column */
   type?: FilterTypeCategories;
   /** Trigger the column filter */
@@ -129,6 +130,7 @@ export const Datagrid = <T,>({
   numberOfLoadingRows,
 }: DatagridProps<T>) => {
   const { t } = useTranslation('datagrid');
+  const { t: tfilters } = useTranslation('filters');
   const filterPopoverRef = useRef(null);
   const pageCount = pagination
     ? Math.ceil(totalItems / pagination.pageSize)
@@ -174,23 +176,23 @@ export const Datagrid = <T,>({
     }),
   });
 
-  const [columnsFilters, setColumnsFilters] = useState([]);
-  useEffect(() => {
-    const clmFilters = columns
-      .filter(
-        (item) =>
-          ('comparator' in item || 'type' in item) &&
-          'isFilterable' in item &&
-          item.isFilterable,
-      )
-      .map((column) => ({
-        id: column.id,
-        label: column.label,
-        ...(column?.type && { comparators: FilterCategories[column.type] }),
-        ...(column?.comparator && { comparators: column.comparator }),
-      }));
-    setColumnsFilters(clmFilters);
-  }, [columns]);
+  const columnsFilters = useMemo<ColumnFilter[]>(
+    () =>
+      columns
+        .filter(
+          (item) =>
+            ('comparator' in item || 'type' in item) &&
+            'isFilterable' in item &&
+            item.isFilterable,
+        )
+        .map((column) => ({
+          id: column.id,
+          label: column.label,
+          ...(column?.type && { comparators: FilterCategories[column.type] }),
+          ...(column?.comparator && { comparators: column.comparator }),
+        })),
+    [columns],
+  );
 
   return (
     <div>
@@ -202,6 +204,7 @@ export const Datagrid = <T,>({
               size={ODS_BUTTON_SIZE.sm}
               variant={ODS_BUTTON_VARIANT.ghost}
               icon={ODS_ICON_NAME.filter}
+              aria-label={tfilters('common_criteria_adder_filter_label')}
               label=""
             />
           </div>

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,8 +46,23 @@ const sampleColumns = [
   },
 ];
 
+const cols = [
+  {
+    id: 'name',
+    cell: (name: string) => {
+      return <span>{name}</span>;
+    },
+    label: 'Name',
+  },
+  {
+    id: 'another-column',
+    label: 'test',
+    cell: () => <DataGridTextCell />,
+  },
+];
+
 const DatagridTest = ({
-  columns,
+  columns = cols,
   items,
   pageIndex,
   className,
@@ -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={cols} 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={cols}
       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={cols}
       items={[]}
       totalItems={0}
       pagination={{ pageIndex: 0, pageSize }}
@@ -269,15 +284,11 @@ 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}
-      items={[]}
-      totalItems={0}
-      isLoading
-      hasNextPage
-    />,
+    <Datagrid columns={cols} 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/components/filters/filter-add.component.tsx b/packages/manager-react-components/src/components/filters/filter-add.component.tsx
@@ -11,7 +11,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import './translations';
 
-type ColumnFilter = {
+export type ColumnFilter = {
   id: string;
   label: string;
   comparators: FilterComparator[];

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[];