fix(manager-react-components): update filters components css

ref: MANAGER-15088 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Dec 13, 2024 · bab90b0 · bab90b0
1 parent 8bec787
commit bab90b0
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 193 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
@@ -2,75 +2,19 @@ import React, { useState } from 'react';
 import { ColumnSort } from '@tanstack/react-table';
 import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 import { withRouter } from 'storybook-addon-react-router-v6';
-<<<<<<< HEAD
-=======
-import { applyFilters, FilterCategories } from '@ovh-ux/manager-core-api';
->>>>>>> 2f9eca4b15 (feat(generator): update v6 listing filter)
 import { useSearchParams } from 'react-router-dom';
-import DataGridTextCell from './text-cell.component';
 import { Datagrid } from './datagrid.component';
 import { useColumnFilters } from '../filters';
-<<<<<<< HEAD
-import { columsTmp, columsFilters } from './datagrid.stories';
+import { columsTmp, columsFilters } from './datagrid.mock';
 import { ActionMenu } from '../navigation';
-=======
->>>>>>> 2f9eca4b15 (feat(generator): update v6 listing filter)
 
 interface Item {
   label: string;
   price: number;
   actions: React.ReactElement;
 }
 
-<<<<<<< HEAD
 const DatagridStory = (args) => {
-=======
-const columsTmp = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-  },
-];
-
-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;
-}) => {
->>>>>>> 2f9eca4b15 (feat(generator): update v6 listing filter)
   const [sorting, setSorting] = useState<ColumnSort>();
   const [data, setData] = useState(args.items);
   const [searchParams] = useSearchParams();

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -179,12 +179,17 @@ export const Datagrid = <T,>({
     setColumnsFilters(clmFilters);
   }, [columns]);
 
+  console.info('*************************');
+  console.info('columns : ', columns);
+  console.info('isFilterable : ', isFilterable);
+  console.info('columnsFilters : ', columnsFilters);
   return (
     <div>
       {isFilterable && (
         <>
+          <div>TOTO ALEX Filtre</div>
           {columnsFilters.length > 0 && (
-            <div className="flex flex-row-reverse pb-[5px]">
+            <div className="flex flex-row-reverse py-[24px]">
               <div id="datagrid-filter-popover-trigger">
                 <OdsButton
                   slot="datagrid-filter-popover-trigger"
@@ -211,7 +216,7 @@ export const Datagrid = <T,>({
             </div>
           )}
           {filters?.filters.length > 0 && (
-            <div id="datagrid-filter-list" className="my-5">
+            <div id="datagrid-filter-list" className="mb-[24px]">
               <FilterList
                 filters={filters.filters}
                 onRemoveFilter={filters.remove}

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx
@@ -0,0 +1,43 @@
+import { FilterCategories } from '@ovh-ux/manager-core-api';
+import { DataGridTextCell } from './text-cell.component';
+
+export interface Item {
+  label: string;
+  price: number;
+}
+
+export const columsTmp = [
+  {
+    id: 'label',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.label}</DataGridTextCell>;
+    },
+    label: 'Label',
+  },
+  {
+    id: 'price',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+    },
+    label: 'Price',
+  },
+];
+
+export 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,
+  },
+];
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx
@@ -1,52 +1,11 @@
 import React from 'react';
 import { withRouter } from 'storybook-addon-react-router-v6';
 import { useSearchParams } from 'react-router-dom';
-import { FilterCategories, applyFilters } from '@ovh-ux/manager-core-api';
+import { applyFilters } from '@ovh-ux/manager-core-api';
 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 columsTmp = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-  },
-];
-
-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,
-  },
-];
+import { columsTmp, columsFilters, Item } from './datagrid.mock';
 
 function sortItems(
   itemList: Item[],

diff --git a/packages/manager-react-components/src/components/datagrid/documentation.mdx b/packages/manager-react-components/src/components/datagrid/documentation.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Canvas, Source } from '@storybook/blocks';
 
 <Meta title="Components/Datagrid Cursor/Documentation" />
 
@@ -34,18 +34,73 @@ Why Use TanStack Table?
 
 ---
 
-#### API V6
+#### Filters
 
-##### usage with Iceberg
+##### How to use It
 
-We provide a custom hook `useResourcesIcebergV6`
+1 - In your columns definition, fill `type` or `comparator` attributes
 
-##### usage without Iceberg
+- `type`comparator is a `FilterTypeCategories`
 
-We provide a custom hook `useResourcesV6`
+- `comparator`is a `string` of `FilterCategories`, if you fill this attribute, it override the `type` attributes
 
-#### API V2
+<Source
+  code={`
+    export const colums = [
+        {
+            id: 'label',
+            cell: (item: Item) => {
+                return <DataGridTextCell>{item.label}</DataGridTextCell>;
+            },
+            label: 'Label',
+            type: FilterTypeCategories.String
+        },
+        {
+            id: 'price',
+            cell: (item: Item) => {
+                return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+            },
+            label: 'Price',
+            comparator: FilterCategories.String,
+        },
+    ];
+    `}
+  language="javascript"
+/>
 
-##### usage **_ONLY_** with Iceberg
+2 - In the datagrid component, pass `filters` object
 
-We provide a custom hook `useResourcesIcebergV2`
+<Source
+  code={`
+import { useResourcesV6, useResourcesIcebergV6 } from '@ovh-ux/manager-react-components';
+
+const { filters } = useResourcesIcebergV6({ ... });
+const { filters } = useResourcesV6({ ... });
+
+<Datagrid
+    {...}
+    filters={filters}
+/>
+    `}
+
+language="javascript"
+/>
+
+If you are using a custom hook
+
+<Source
+  code={`
+import { useColumnFilters } from '@ovh-ux/manager-react-components';
+
+const { filters, addFilter, removeFilter } = useColumnFilters();
+
+<Datagrid
+    {...}
+    filters={{filters: filters, add: addFilter, remove: removeFilter}}
+/>
+    `}
+
+language="javascript"
+/>
+
+---
diff --git a/packages/manager-react-components/src/components/filters/filter-list.component.tsx b/packages/manager-react-components/src/components/filters/filter-list.component.tsx
@@ -22,7 +22,7 @@ export function FilterList({
     <>
       {filters?.map((filter, key) => (
         <OdsTag
-          className="m-3"
+          className="mr-3"
           color={ODS_TAG_COLOR.information}
           size="lg"
           key={key}

diff --git a/packages/manager-react-components/src/hooks/datagrid/useIcebergV2.tsx b/packages/manager-react-components/src/hooks/datagrid/useIcebergV2.tsx
@@ -1,11 +1,7 @@
 import { useEffect, useState } from 'react';
-import {
-  IcebergFetchParamsV2,
-  fetchIcebergV2,
-  applyFilters,
-} from '@ovh-ux/manager-core-api';
+import { IcebergFetchParamsV2, fetchIcebergV2 } from '@ovh-ux/manager-core-api';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { useColumnFilters, ColumnSort } from '../../components';
+import { ColumnSort } from '../../components';
 
 interface IcebergV2Hook<T> {
   queryKey: string[];
@@ -45,20 +41,12 @@ export function useResourcesIcebergV2<T = unknown>({
     retry: false,
     getNextPageParam: (lastPage) => lastPage.cursorNext,
   });
-  const { filters, addFilter, removeFilter } = useColumnFilters();
 
   useEffect(() => {
     const flatten = data?.pages.map((page) => page.data).flat() as T[];
     setFlattenData(flatten);
   }, [data]);
 
-  useEffect(() => {
-    if (flattenData.length > 0) {
-      const flatten = data?.pages.map((page) => page.data).flat() as T[];
-      setFlattenData(applyFilters(flatten, filters));
-    }
-  }, [filters]);
-
   return {
     data,
     fetchNextPage,
@@ -70,10 +58,5 @@ export function useResourcesIcebergV2<T = unknown>({
     sorting,
     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
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FilterCategories } from '@ovh-ux/manager-core-api';
 import { {{#if isPCI }}useParams, {{/if}} useNavigate, useLocation } from 'react-router-dom';
 import { OdsButton } from '@ovhcloud/ods-components/react';
 import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
@@ -40,7 +39,6 @@ export default function Listing() {
     setSorting,
     error,
     status,
-    filters,
   } = useResourcesIcebergV2({
     route: `{{#if this.isPCI }}{{this.mainApiPathPci}}{{else}}{{this.mainApiPath}}{{/if}}`,
     queryKey: ['{{appName}}', `{{#if this.isPCI }}{{this.mainApiPathPci}}{{else}}{{this.mainApiPath}}{{/if}}`],
@@ -52,13 +50,6 @@ export default function Listing() {
     navigate(`${path}${label}`);
   };
 
-  // Code to remove
-  const comparatorType = {
-    number: FilterCategories.Numeric,
-    data: FilterCategories.Date,
-    string: FilterCategories.String,
-  };
-
   // Code to remove and declare definition columns in const variable
   useEffect(() => {
     if (status === 'success' && data?.pages[0].data.length === 0) {
@@ -69,12 +60,6 @@ export default function Listing() {
         .map((element) => ({
           id: element,
           label: element,
-          // @ts-ignore
-          ...(comparatorType[dataType(data?.pages[0].data[0][element])] && {
-            comparator:
-              // @ts-ignore
-              comparatorType[dataType(data?.pages[0].data[0][element])],
-          }),
           cell: (props: any) => {
             const label = props[element] as string;
             if (typeof label === 'string' || typeof label === 'number') {
@@ -122,7 +107,6 @@ export default function Listing() {
             sorting={sorting}
             onSortChange={setSorting}
             manualSorting={false}
-            filters={filters}
           />
         )}
       </React.Suspense>