feat(manager-react-components): add filters in datagrid

ref: MANAGER-15088

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

packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx

@@ -1,16 +1,19 @@
 import React, { useState } from 'react';
 import { ColumnSort } from '@tanstack/react-table';
 import { withRouter } from 'storybook-addon-react-router-v6';
+import { FilterCategories, applyFilters } from '@ovh-ux/manager-core-api';
 import { useSearchParams } from 'react-router-dom';
 import { Datagrid } from './datagrid.component';
 import { DataGridTextCell } from './text-cell.component';
+import { useDatagridSearchParams } from './useDatagridSearchParams';
+import { useColumnFilters } from '../filters';
 
 interface Item {
   label: string;
   price: number;
 }
 
-const columns = [
+const columsTmp = [
   {
     id: 'label',
     cell: (item: Item) => {
@@ -27,16 +30,38 @@ const columns = [
   },
 ];
 
+const columsFilters = [
+  {
+    id: 'label',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.label}</DataGridTextCell>;
+    },
+    label: 'Label',
+    comparator: FilterCategories.String,
+  },
+  {
+    id: 'price',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+    },
+    label: 'Price',
+    comparator: FilterCategories.String,
+  },
+];
+
 const DatagridStory = ({
   items,
   isSortable,
+  columns = columsTmp,
 }: {
   items: Item[];
   isSortable: boolean;
+  columns?: any;
 }) => {
   const [sorting, setSorting] = useState<ColumnSort>();
   const [data, setData] = useState(items);
   const [searchParams] = useSearchParams();
+  const { filters, addFilter, removeFilter } = useColumnFilters();
 
   const fetchNextPage = () => {
     const itemsIndex = data.length;
@@ -57,10 +82,11 @@ const DatagridStory = ({
       )}
       <Datagrid
         columns={columns}
-        items={data}
+        items={applyFilters(data, filters)}
         totalItems={data.length}
         hasNextPage={data.length > 0 && data.length < 30}
         onFetchNextPage={fetchNextPage}
+        filters={{ filters: filters, add: addFilter, remove: removeFilter }}
         {...(isSortable
           ? {
               sorting,
@@ -99,6 +125,17 @@ export const Sortable = {
   },
 };
 
+export const Filters = {
+  args: {
+    items: [...Array(10).keys()].map((_, i) => ({
+      label: `Item #${i}`,
+      price: Math.floor(1 + Math.random() * 100),
+    })),
+    isSortable: true,
+    columns: columsFilters,
+  },
+};
+
 export default {
   title: 'Components/Datagrid Cursor',
   component: DatagridStory,

packages/manager-react-components/src/components/datagrid/datagrid.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   ColumnDef,
   ColumnSort as TanstackColumnSort,
@@ -8,15 +8,23 @@ import {
   useReactTable,
   getSortedRowModel,
 } from '@tanstack/react-table';
-import { ODS_ICON_NAME, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 import {
+  ODS_ICON_NAME,
+  ODS_BUTTON_VARIANT,
+  ODS_BUTTON_SIZE,
+} from '@ovhcloud/ods-components';
+import {
+  OdsPopover,
   OdsButton,
   OdsIcon,
   OdsPagination,
   OdsTable,
 } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
+import { FilterAdd, FilterList } from '../filters';
+import { FilterWithLabel } from '../filters/interface';
 import { DataGridTextCell } from './text-cell.component';
+import { FilterComparator } from '@ovh-ux/manager-core-api';
 import './translations';
 
 export type ColumnSort = TanstackColumnSort;
@@ -35,6 +43,14 @@ export interface DatagridColumn<T> {
   label: string;
   /** is the column sortable ? (defaults is true) */
   isSortable?: boolean;
+  /** set column filter */
+  comparator?: FilterComparator;
+}
+
+export interface FilterProps {
+  filters: FilterWithLabel[];
+  add: any;
+  remove: any;
 }
 
 export interface DatagridProps<T> {
@@ -68,6 +84,7 @@ export interface DatagridProps<T> {
   /** setSorting?: OnChangeFn<SortingState>; */
   /** label displayed if there is no item in the datagrid */
   noResultLabel?: string;
+  filters?: FilterProps;
 }
 
 export const Datagrid = <T,>({
@@ -85,6 +102,7 @@ export const Datagrid = <T,>({
   manualSorting = true,
   manualPagination = true,
   noResultLabel,
+  filters,
 }: DatagridProps<T>) => {
   const { t } = useTranslation('datagrid');
   const pageCount = pagination
@@ -131,8 +149,53 @@ export const Datagrid = <T,>({
     }),
   });
 
+  const [columnsFilters, setColumnsFilters] = useState([]);
+  useEffect(() => {
+    const clmFilters = columns
+      .filter((item) => item.hasOwnProperty('comparator'))
+      .map((column) => ({
+        id: column.id,
+        label: column.label,
+        comparators: column.comparator,
+      }));
+    setColumnsFilters(clmFilters);
+  }, [columns]);
+
   return (
     <div>
+      {columnsFilters.length > 0 && (
+        <div className="flex flex-row-reverse pb-[5px]">
+          <div id="datagrid-filter-popover-trigger">
+            <OdsButton
+              slot="datagrid-filter-popover-trigger"
+              size={ODS_BUTTON_SIZE.sm}
+              variant={ODS_BUTTON_VARIANT.outline}
+              icon={ODS_ICON_NAME.filter}
+              label="Filter"
+            />
+          </div>
+          <OdsPopover triggerId="datagrid-filter-popover-trigger" with-arrow>
+            <FilterAdd
+              columns={columnsFilters}
+              onAddFilter={(addedFilter, column) => {
+                filters.add({
+                  ...addedFilter,
+                  label: column.label,
+                });
+              }}
+            />
+          </OdsPopover>
+        </div>
+      )}
+      {filters?.filters && (
+        <div id="datagrid-filter-list" className="my-5">
+          <FilterList
+            filters={filters.filters}
+            onRemoveFilter={filters.remove}
+          />
+        </div>
+      )}
+
       <div className={`contents px-[1px] ${className || ''}`}>
         <OdsTable className="overflow-x-visible">
           <table className="w-full border-collapse">

packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx

@@ -4,10 +4,11 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import {
   ColumnSort,
   Datagrid,
-  DatagridColumn,
   PaginationState,
+  FilterProps,
 } from './datagrid.component';
 import DataGridTextCell from './text-cell.component';
+import { FilterCategories } from '@ovh-ux/manager-core-api';
 
 vitest.mock('react-i18next', async () => {
   const originalModule = await vitest.importActual('react-i18next');
@@ -32,11 +33,13 @@ const sampleColumns = [
       return <span>{name}</span>;
     },
     label: 'Name',
+    comparator: FilterCategories.String,
   },
   {
     id: 'another-column',
     label: 'test',
     cell: () => <DataGridTextCell />,
+    comparator: FilterCategories.String,
   },
 ];
 
@@ -46,12 +49,14 @@ const DatagridTest = ({
   pageIndex,
   className,
   noResultLabel,
+  filters,
 }: {
-  columns: DatagridColumn<string>[];
+  columns: any;
   items: string[];
   pageIndex: number;
   className?: string;
   noResultLabel?: string;
+  filters?: FilterProps;
 }) => {
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex,
@@ -70,6 +75,7 @@ const DatagridTest = ({
       onSortChange={() => {}}
       className={className || ''}
       noResultLabel={noResultLabel}
+      filters={filters}
     />
   );
 };
@@ -220,3 +226,44 @@ it('should disable overflow of table', async () => {
   );
   expect(container.querySelectorAll('.overflow-hidden').length).toBe(1);
 });
+
+it('should disable overflow of table', async () => {
+  const { container } = render(
+    <DatagridTest
+      columns={sampleColumns}
+      items={[]}
+      pageIndex={0}
+      className={'overflow-hidden'}
+    />,
+  );
+  expect(container.querySelectorAll('.overflow-hidden').length).toBe(1);
+});
+
+it('should display filter add and filter list', async () => {
+  const filters = {
+    filters: [
+      {
+        key: 'customName',
+        comparator: 'includes',
+        value: 'coucou',
+        label: 'customName',
+      },
+    ],
+    add: null,
+    remove: null,
+  } as FilterProps;
+  console.info('sampleColumns : ', sampleColumns);
+  const { container } = render(
+    <DatagridTest
+      columns={sampleColumns}
+      items={[]}
+      pageIndex={0}
+      className={'overflow-hidden'}
+      filters={filters}
+    />,
+  );
+  expect(
+    container.querySelectorAll('#datagrid-filter-popover-trigger').length,
+  ).toBe(1);
+  expect(container.querySelectorAll('#datagrid-filter-list').length).toBe(1);
+});