feat(#521): pnl tooltip (#947)

* feat: add header tooltip for pnl column and fix tests

* fix: format of course

libs/positions/src/lib/positions-table.spec.tsx

@@ -67,13 +67,9 @@ it('Render correct columns', async () => {
   await act(async () => {
     render(<PositionsTable data={singleRowData} />);
     await waitFor(async () => {
-      const headers = await screen.getAllByRole('columnheader');
+      const headers = screen.getAllByRole('columnheader');
       expect(headers).toHaveLength(5);
-      expect(
-        headers.map((h) =>
-          h.querySelector('[ref="eText"]')?.textContent?.trim()
-        )
-      ).toEqual([
+      expect(headers.map((h) => h.textContent?.trim())).toEqual([
         'Market',
         'Amount',
         'Average Entry Price',

libs/positions/src/lib/positions-table.tsx

@@ -7,7 +7,7 @@ import {
   addDecimal,
   t,
 } from '@vegaprotocol/react-helpers';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { AgGridDynamic as AgGrid, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';
 import type { AgGridReact } from 'ag-grid-react';
 import type { Positions_party_positions } from './__generated__/Positions';
@@ -17,6 +17,22 @@ interface PositionsTableProps {
   data: Positions_party_positions[] | null;
 }
 
+type ColumnHeaderProps = {
+  displayName: string;
+  tooltipContent?: string;
+};
+
+const ColumnHeader = ({ displayName, tooltipContent }: ColumnHeaderProps) => {
+  if (tooltipContent) {
+    return (
+      <Tooltip description={tooltipContent}>
+        <span>{displayName}</span>
+      </Tooltip>
+    );
+  }
+  return displayName;
+};
+
 export const getRowId = ({ data }: { data: Positions_party_positions }) =>
   data.market.id;
 
@@ -77,7 +93,7 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
             ],
           });
         }}
-        components={{ PriceFlashCell }}
+        components={{ PriceFlashCell, agColumnHeader: ColumnHeader }}
       >
         <AgGridColumn
           headerName={t('Market')}
@@ -128,6 +144,9 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
           headerName={t('Realised PNL')}
           field="realisedPNL"
           type="rightAligned"
+          headerComponentParams={{
+            tooltipContent: t('P&L excludes any fees paid.'),
+          }}
           cellClassRules={{
             'color-vega-green': ({ value }: { value: string }) =>
               Number(value) > 0,