From f82d184a13be284a23f03bdae78ac60c4797739c Mon Sep 17 00:00:00 2001
From: Alex Boungnaseng <alex.boungnaseng.ext@corp.ovh.com>
Date: Mon, 2 Dec 2024 15:28:32 +0100
Subject: [PATCH] fix(manager-react-components): update filters components css

ref: MANAGER-15088

Signed-off-by: Alex Boungnaseng <alex.boungnaseng.ext@corp.ovh.com>
---
 .../datagrid/datagrid-cursor.stories.tsx      | 58 +------------------
 .../datagrid/datagrid.component.tsx           |  4 +-
 .../src/components/datagrid/datagrid.mock.tsx | 43 ++++++++++++++
 .../components/datagrid/datagrid.stories.tsx  | 45 +-------------
 .../filters/filter-list.component.tsx         |  2 +-
 5 files changed, 49 insertions(+), 103 deletions(-)
 create mode 100644 packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx

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
index 92c57d149a05..8f74ab7846c0 100644
--- 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,19 +2,11 @@ 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;
@@ -22,55 +14,7 @@ interface Item {
   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
index da4fd2860bdc..6ceaea8ba32f 100644
--- a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
+++ b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -184,7 +184,7 @@ export const Datagrid = <T,>({
       {isFilterable && (
         <>
           {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 +211,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
new file mode 100644
index 000000000000..26566fa853c5
--- /dev/null
+++ 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
index b7c594f6c8d1..525b7c1a278e 100644
--- 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/filters/filter-list.component.tsx b/packages/manager-react-components/src/components/filters/filter-list.component.tsx
index 727c32460179..4f890a6f50ce 100644
--- 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}