Feat/pci rancher add pci rancher id tapc 1024

packages/manager/apps/pci-rancher/package.json

@@ -18,7 +18,8 @@
     "start": "lerna exec --stream --scope='@ovh-ux/manager-pci-rancher-app' --include-dependencies -- npm run build --if-present",
     "start:dev": "lerna exec --stream --scope='@ovh-ux/manager-pci-rancher-app' --include-dependencies -- npm run dev --if-present",
     "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/manager-pci-rancher-app' --include-dependencies -- npm run dev:watch --if-present",
-    "test": "jest"
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "@ovh-ux/manager-config": "^8.0.0",

packages/manager/apps/pci-rancher/src/components/Table/ClipBoardCell/ClipBoardCell.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Clipboard, DataGridTextCell } from '@ovh-ux/manager-react-components';
+import { Cell } from '@tanstack/react-table';
+import { RancherService } from '@/types/api.type';
+
+interface ClipBoardCellProps {
+  readonly cell: Cell<RancherService, unknown>;
+}
+
+const ClipBoardCell = ({ cell }: ClipBoardCellProps) => {
+  const id = cell.renderValue() as RancherService['id'];
+
+  return (
+    <DataGridTextCell>
+      <Clipboard aria-label="clipboard" value={id} />
+    </DataGridTextCell>
+  );
+};
+
+export default ClipBoardCell;

packages/manager/apps/pci-rancher/src/components/Table/ClipBoardCell/ClipBoardCell.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import * as managerReactComponents from '@ovh-ux/manager-react-components';
+import { Cell } from '@tanstack/react-table';
+import { screen } from '@testing-library/react';
+import ClipBoardCell from './ClipBoardCell.component';
+
+import { render } from '@/utils/test/test.provider';
+import { RancherService } from '@/types/api.type';
+
+jest.mock('@ovh-ux/manager-react-components', () => ({
+  ...jest.requireActual('@ovh-ux/manager-react-components'),
+  Clipboard: jest.fn(),
+  DataGridTextCell: jest.fn(),
+}));
+
+const mockCell = (value: string): Cell<RancherService, unknown> =>
+  ({
+    renderValue: () => value,
+  } as Cell<RancherService, unknown>);
+
+afterEach(() => {});
+
+const setupSpecTest = (cell: Cell<RancherService, unknown>) =>
+  render(<ClipBoardCell cell={cell} />);
+
+describe('DataGridCell', () => {
+  jest
+    .spyOn(managerReactComponents, 'Clipboard')
+    .mockImplementation(({ value }) => (
+      <div data-testid="clipboard">{value}</div>
+    ));
+  jest
+    .spyOn(managerReactComponents, 'DataGridTextCell')
+    .mockImplementation(({ children }) => <>{children}</>);
+
+  it('should render the component with the correct value', () => {
+    const cell = mockCell('12345');
+    setupSpecTest(cell);
+    expect(screen.getByTestId('clipboard')).toHaveTextContent('12345');
+  });
+
+  it('should render the component with a different value', () => {
+    const cell = mockCell('67890');
+    setupSpecTest(cell);
+    expect(screen.getByTestId('clipboard')).toHaveTextContent('67890');
+  });
+});

packages/manager/apps/pci-rancher/src/components/Table/TableContainer/TableContainer.component.tsx

@@ -23,6 +23,7 @@ import '../Table.scss';
 import { deleteRancherServiceQueryKey } from '@/data/api/services';
 import StatusChip from '../../StatusChip/StatusChip.component';
 import DisplayCellNumber from '../NumberCell/NumberCell.component';
+import ClipBoardCell from '../ClipBoardCell/ClipBoardCell.component';
 
 export default function TableContainer({
   data,
@@ -58,6 +59,12 @@ export default function TableContainer({
         accessorKey: 'currentState.name',
         cell: LinkService,
       },
+      {
+        id: 'id',
+        header: 'ID',
+        accessorKey: 'id',
+        cell: ClipBoardCell,
+      },
       {
         id: 'serviceLevel',
         header: t('serviceLevel'),