feat(generator): update v6 template listing page

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

Hide file tree

Showing 8 changed files with 61 additions and 94 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
@@ -135,15 +135,15 @@ WithActions.args = {
   isSortable: true,
 };
 
-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 const Filters = DatagridStory.bind({});
+
+Filters.args = {
+  items: [...Array(10).keys()].map((_, i) => ({
+    label: `Item #${i}`,
+    price: Math.floor(1 + Math.random() * 100),
+  })),
+  isSortable: true,
+  columns: columsFilters,
 };
 
 export default {

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -177,13 +177,12 @@ export const Datagrid = <T,>({
   const [columnsFilters, setColumnsFilters] = useState([]);
   useEffect(() => {
     const clmFilters = columns
-      .filter((item) => 'comparator' in item || 'type' in item)
-      // .filter(
-      //   (item) =>
-      //     ('comparator' in item || 'type' in item) &&
-      //     'isFilterable' in item &&
-      //     item['isFilterable'],
-      // )
+      .filter(
+        (item) =>
+          ('comparator' in item || 'type' in item) &&
+          'isFilterable' in item &&
+          item.isFilterable,
+      )
       .map((column) => ({
         id: column.id,
         label: column.label,
@@ -193,8 +192,6 @@ export const Datagrid = <T,>({
     setColumnsFilters(clmFilters);
   }, [columns]);
 
-  console.info('columnsFilters : ', columnsFilters);
-
   return (
     <div>
       {columnsFilters.length > 0 && (

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx
@@ -35,12 +35,14 @@ const sampleColumns = [
     },
     label: 'Name',
     comparator: FilterCategories.String,
+    isFilterable: true,
   },
   {
     id: 'another-column',
     label: 'test',
     cell: () => <DataGridTextCell />,
     comparator: FilterCategories.String,
+    isFilterable: true,
   },
 ];
 
@@ -301,7 +303,6 @@ it('should display filter add and filter list', async () => {
     add: null,
     remove: null,
   } as FilterProps;
-  console.info('sampleColumns : ', sampleColumns);
   const { container } = render(
     <DatagridTest
       columns={sampleColumns}

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx
@@ -95,16 +95,16 @@ Sortable.args = {
   isSortable: true,
 };
 
-export const Filters = {
-  args: {
-    items: [...Array(50).keys()].map((_, i) => ({
-      label: `Item #${i}`,
-      price: Math.floor(1 + Math.random() * 100),
-    })),
-    isPaginated: true,
-    isSortable: true,
-    columns: columsFilters,
-  },
+export const Filters = DatagridStory.bind({});
+
+Filters.args = {
+  items: [...Array(50).keys()].map((_, i) => ({
+    label: `Item #${i}`,
+    price: Math.floor(1 + Math.random() * 100),
+  })),
+  isPaginated: true,
+  isSortable: true,
+  columns: columsFilters,
 };
 
 export default {

diff --git a/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.spec.tsx b/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.spec.tsx
@@ -5,12 +5,8 @@ import {
   QueryClientProvider,
   useQuery,
 } from '@tanstack/react-query';
-import { act, renderHook, waitFor } from '@testing-library/react';
-import {
-  IcebergFetchParamsV6,
-  FilterCategories,
-  FilterComparator,
-} from '@ovh-ux/manager-core-api';
+import { act, renderHook } from '@testing-library/react';
+import { IcebergFetchParamsV6 } from '@ovh-ux/manager-core-api';
 import { ResourcesV6Hook, useResourcesV6 } from './useResourcesV6';
 
 vitest.mock('@tanstack/react-query', async () => {
@@ -36,16 +32,6 @@ const renderUseResourcesV6Hook = (
       header: 'name',
       label: 'name',
       accessorKey: 'name',
-      comparator: FilterCategories.String,
-      type: 'string',
-      cell: (props: any) => <div>{props.name}</div>,
-    },
-    {
-      id: 'name2',
-      header: 'name2',
-      label: 'name2',
-      accessorKey: 'name2',
-      comparator: FilterCategories.String,
       type: 'string',
       cell: (props: any) => <div>{props.name}</div>,
     },
@@ -124,26 +110,4 @@ describe('useResourcesV6', () => {
     const { totalCount } = result.current;
     expect(totalCount).toEqual(26);
   });
-
-  it('should match ip-51-7 with a filter name', async () => {
-    const { result } = renderUseResourcesV6Hook();
-    act(() => {
-      result.current.filters.add({
-        comparator: 'includes' as FilterComparator,
-        key: 'name',
-        value: 'ns5007027.ip-51-7-XXXXX5.net',
-        label: 'name',
-      });
-    });
-    waitFor(() => {
-      const { flattenData, filters } = result.current;
-      expect(flattenData.length).toBe(1);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      expect(flattenData[0].name).toBe('ns5007027.ip-51-7-XXXXX5.net');
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      expect(filters.value).toBe('ns5007027.ip-51-7-XXXXX5.net');
-    });
-  });
 });
diff --git a/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.tsx b/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.tsx
@@ -3,11 +3,10 @@ import isDate from 'lodash.isdate';
 import {
   IcebergFetchParamsV6,
   fetchIcebergV6,
-  applyFilters,
   FilterTypeCategories,
 } from '@ovh-ux/manager-core-api';
 import { useQuery } from '@tanstack/react-query';
-import { useColumnFilters, ColumnSort } from '../../components';
+import { ColumnSort } from '../../components';
 
 export interface ColumnDatagrid {
   cell: (props: any) => React.JSX.Element;
@@ -18,7 +17,7 @@ export interface ColumnDatagrid {
 
 export interface ResourcesV6Hook {
   queryKey: string[];
-  columns: ColumnDatagrid[];
+  columns?: ColumnDatagrid[];
 }
 
 export function dataType(a: any) {
@@ -31,17 +30,17 @@ export function dataType(a: any) {
 
 function sortColumn(type: string, a: any, b: any, desc: boolean) {
   switch (type) {
-    case FilterTypeCategories.Numeric:
+    case 'number':
       return desc
         ? parseFloat(a) - parseFloat(b)
         : parseFloat(b) - parseFloat(a);
-    case FilterTypeCategories.Date:
+    case 'date':
       return desc
         ? new Date(a).getTime() - new Date(b).getTime()
         : new Date(b).getTime() - new Date(a).getTime();
-    case FilterTypeCategories.Boolean:
+    case 'boolean':
       return desc ? Number(a) - Number(b) : Number(b) - Number(a);
-    case FilterTypeCategories.String:
+    case 'string':
       return desc
         ? a
             ?.trim()
@@ -61,6 +60,10 @@ function sortColumn(type: string, a: any, b: any, desc: boolean) {
  * @deprecated use fetchIcebergV6 from @ovh-ux/manager-core-api
  */
 export const getResourcesV6 = fetchIcebergV6;
+// export const getResourcesV6 = async ({ route }: IcebergFetchParamsV6) => {
+//   const { data, status, totalCount } = (await fetchIcebergV6({ route })) as any;
+//   return { data, status, totalCount };
+// };
 
 export function useResourcesV6<T = unknown>({
   route,
@@ -78,14 +81,13 @@ export function useResourcesV6<T = unknown>({
   const [totalCount, setTotalCount] = useState(0);
   const [sortData, setSortData] = useState<T[]>([]);
   const [flattenData, setFlattenData] = useState<T[]>([]);
-  const { filters, addFilter, removeFilter } = useColumnFilters();
 
   useEffect(() => {
     if (data?.data && data?.data?.length > 0) {
       setTotalCount(data.data.length);
       setSortData(data.data);
     }
-  }, [data, filters]);
+  }, [data]);
 
   useEffect(() => {
     if (sortData) {
@@ -111,15 +113,6 @@ export function useResourcesV6<T = unknown>({
     }
   }, [sorting]);
 
-  useEffect(() => {
-    if (sortData.length > 0) {
-      setPageIndex(0);
-      const dataFiltered = applyFilters(data?.data, filters);
-      setFlattenData([]);
-      setSortData([...dataFiltered]);
-    }
-  }, [filters]);
-
   const onFetchNextPage = () => {
     setPageIndex(pageIndex + 1);
   };
@@ -130,17 +123,12 @@ export function useResourcesV6<T = unknown>({
     setSorting,
     pageIndex,
     totalCount,
-    flattenData: applyFilters(flattenData, filters),
+    flattenData,
     isError,
     isLoading,
-    hasNextPage: pageIndex * pageSize + pageSize <= flattenData.length,
+    hasNextPage: pageIndex * pageSize + pageSize <= totalCount,
     fetchNextPage: onFetchNextPage,
     error,
     status,
-    filters: {
-      filters,
-      add: addFilter,
-      remove: removeFilter,
-    },
   };
 }
diff --git a/packages/manager/core/generator/app/conditional-templates/listing/v2/index.tsx.hbs b/packages/manager/core/generator/app/conditional-templates/listing/v2/index.tsx.hbs
@@ -104,7 +104,15 @@ export default function Listing() {
   };
 
   return (
-    <BaseLayout breadcrumb={<Breadcrumb rootLabel={appConfig.rootLabel} appName="{{appName}}" />} header={header}>
+    <BaseLayout
+      breadcrumb={
+        <Breadcrumb
+          rootLabel={appConfig.rootLabel}
+          appName="{{appName}}"
+        />
+      }
+      header={header}
+    >
       <React.Suspense>
         {columns && flattenData && (
           <Datagrid

diff --git a/packages/manager/core/generator/app/conditional-templates/listing/v6/index.tsx.hbs b/packages/manager/core/generator/app/conditional-templates/listing/v6/index.tsx.hbs
@@ -68,6 +68,7 @@ export default function Listing() {
         .map((element) => ({
           id: element,
           label: element,
+          isFilterable: true,
           // @ts-ignore
           type: dataType(flattenData[0][element]),
           // @ts-ignore
@@ -124,7 +125,15 @@ export default function Listing() {
   };
 
   return (
-    <BaseLayout breadcrumb={<Breadcrumb rootLabel={appConfig.rootLabel} appName="{{appName}}" />} header={header}>} header={header}>
+    <BaseLayout
+      breadcrumb={
+        <Breadcrumb
+          rootLabel={appConfig.rootLabel}
+          appName="{{appName}}"
+        />
+      }
+      header={header}
+    >
       <React.Suspense>
         {columns && flattenData && (
           <Datagrid