fix(trading): liquidity table improve readability and remove grouping (#5598)

apps/trading/e2e/tests/liquidity_provision/test_liquidity_provision.py

@@ -16,7 +16,6 @@ def vega(request):
 def continuous_market(vega):
     return setup_continuous_market(vega)
 
-@pytest.mark.skip("Issue 5581")
 @pytest.mark.usefixtures("auth", "risk_accepted")
 def test_liquidity_provision_amendment(continuous_market, vega: VegaServiceNull, page: Page):
     # TODO Refactor asserting the grid

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

@@ -83,11 +83,6 @@ describe('LiquidityTable', () => {
       h.querySelector('[ref="eText"]')?.textContent?.trim()
     );
     const expectedHeaders = [
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
       'Party',
       'Status',
       'Commitment ()',

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

@@ -18,7 +18,7 @@ import {
   truncateMiddle,
 } from '@vegaprotocol/ui-toolkit';
 import type {
-  ColGroupDef,
+  ColDef,
   ITooltipParams,
   ValueFormatterParams,
 } from 'ag-grid-community';
@@ -60,10 +60,11 @@ const dateValueFormatter = ({ value }: { value?: string | null }) => {
   return getDateTimeFormat().format(new Date(value));
 };
 
-const defaultColDef = {
+const defaultColDef: ColDef = {
   resizable: true,
   sortable: true,
   tooltipComponent: TooltipCellComponent,
+  minWidth: 120,
 };
 
 export interface LiquidityTableProps
@@ -168,24 +169,14 @@ export const LiquidityTable = ({
       )}`;
     };
 
-    const defs: ColGroupDef[] = [
-      {
-        headerName: '',
-        children: [
+    const defs: ColDef[] = [
       {
         headerName: t('Party'),
         field: 'partyId',
-            headerTooltip: t(
-              'The public key of the party making this commitment.'
-            ),
+        headerTooltip: t('The public key of the party making this commitment.'),
         cellRenderer: copyCellRenderer,
+        pinned: 'left',
       },
-        ],
-      },
-      {
-        headerName: t('Commitment details'),
-        marryChildren: true,
-        children: [
       {
         headerName: t('Status'),
         headerTooltip: t('The current status of this liquidity provision.'),
@@ -200,9 +191,7 @@ export const LiquidityTable = ({
             (data?.currentCommitmentAmount || data?.currentFee)
           ) {
             return (
-                  <span className="text-warning">
-                    {t('Updating next epoch')}
-                  </span>
+              <span className="text-warning">{t('Updating next epoch')}</span>
             );
           }
           return (
@@ -339,8 +328,7 @@ export const LiquidityTable = ({
         }: VegaICellRendererParams<LiquidityProvisionData, 'fee'>) => {
           if (!value) return '-';
           const formattedPendingFee =
-                formatNumberPercentage(new BigNumber(value).times(100), 2) ||
-                '-';
+            formatNumberPercentage(new BigNumber(value).times(100), 2) || '-';
           if (data?.currentFee && data?.currentFee !== value) {
             const formattedCurrentFee = formatNumberPercentage(
               new BigNumber(data.currentFee).times(100),
@@ -376,12 +364,6 @@ export const LiquidityTable = ({
         ),
         valueFormatter: percentageFormatter,
       },
-        ],
-      },
-      {
-        headerName: t('Live liquidity data'),
-        marryChildren: true,
-        children: [
       {
         headerName: t('Live supplied liquidity'),
         field: 'balance',
@@ -437,12 +419,6 @@ export const LiquidityTable = ({
         ),
         valueFormatter: percentageFormatter,
       },
-        ],
-      },
-      {
-        headerName: t('Last epoch SLA details'),
-        marryChildren: true,
-        children: [
       {
         headerName: t(`Last time on book`),
         field: 'sla.lastEpochFractionOfTimeOnBook',
@@ -470,12 +446,6 @@ export const LiquidityTable = ({
         ),
         valueFormatter: percentageFormatter,
       },
-        ],
-      },
-      {
-        headerName: '',
-        marryChildren: true,
-        children: [
       {
         headerName: t('Created'),
         headerTooltip: t(
@@ -494,8 +464,6 @@ export const LiquidityTable = ({
         type: 'rightAligned',
         valueFormatter: dateValueFormatter,
       },
-        ],
-      },
     ];
     return defs;
   }, [assetDecimalPlaces, quantum, stakeToCcyVolume, symbol, t]);