chore(2559): filter ledger entries by account type (#2631)

* chore: ledger entries - add account type filters

* chore: ledger entries filtering - add int test

* chore: ledger entries filtering - fix linter fails

* chore: ledger entries filtering - fix int test failing

* chore: ledger entries filtering - fix int test failing

apps/trading-e2e/src/integration/home.cy.ts

@@ -51,6 +51,7 @@ const generateProposal = (code: string): ProposalListFieldsFragment => ({
 
 describe('home', { tags: '@regression' }, () => {
   beforeEach(() => {
+    cy.clearLocalStorage();
     cy.mockTradingPage();
     cy.mockSubscription();
   });
@@ -226,9 +227,6 @@ describe('home', { tags: '@regression' }, () => {
   });
 
   describe('redirect should take last visited market into consideration', () => {
-    beforeEach(() => {
-      cy.clearLocalStorage();
-    });
     it('marketId comes from existing market', () => {
       cy.window().then((window) => {
         window.localStorage.setItem('marketId', 'market-1');

apps/trading-e2e/src/integration/trading-portfolio.cy.ts

@@ -37,5 +37,21 @@ describe('Portfolio page', { tags: '@smoke' }, () => {
         '[data-testid="tab-ledger-entries"] .ag-center-cols-container .ag-row'
       ).should('have.length', ledgerEntriesQuery().ledgerEntries.edges.length);
     });
+
+    it('account filters should be callable', () => {
+      cy.visit('/#/portfolio');
+      cy.getByTestId('"Ledger entries"').click();
+      cy.get('[role="columnheader"][col-id="senderAccountType"]').realHover();
+      cy.get(
+        '[role="columnheader"][col-id="senderAccountType"] .ag-header-cell-menu-button'
+      ).click();
+      cy.get('fieldset.ag-simple-filter-body-wrapper')
+        .should('be.visible')
+        .within((fields) => {
+          cy.wrap(fields).find('label').should('have.length', 16);
+        });
+      cy.getByTestId('"Ledger entries"').click();
+      cy.get('fieldset.ag-simple-filter-body-wrapper').should('not.exist');
+    });
   });
 });

libs/apollo-client/src/lib/apollo-client.ts

@@ -28,6 +28,7 @@ export function createClient(base?: string, cacheConfig?: InMemoryCacheConfig) {
   // Replace http with ws, preserving if its a secure connection eg. https => wss
   urlWS.protocol = urlWS.protocol.replace('http', 'ws');
   const timeoutLink = new ApolloLinkTimeout(10000);
+  const enlargedTimeoutLink = new ApolloLinkTimeout(100000);
   const retryLink = new RetryLink({
     delay: {
       initial: 300,
@@ -76,8 +77,14 @@ export function createClient(base?: string, cacheConfig?: InMemoryCacheConfig) {
     }
   });
 
+  const composedTimeoutLink = split(
+    ({ getContext }) => Boolean(getContext()['isEnlargedTimeout']),
+    enlargedTimeoutLink,
+    timeoutLink
+  );
+
   return new ApolloClient({
-    link: from([errorLink, timeoutLink, retryLink, splitLink]),
+    link: from([errorLink, composedTimeoutLink, retryLink, splitLink]),
     cache: new InMemoryCache(cacheConfig),
   });
 }

libs/ledger/src/lib/LedgerEntries.graphql

@@ -15,11 +15,19 @@ query LedgerEntries(
   $partyId: ID!
   $pagination: Pagination
   $dateRange: DateRange
+  $senderAccountType: [AccountType!]
+  $receiverAccountType: [AccountType!]
 ) {
   ledgerEntries(
     filter: {
-      SenderAccountFilter: { partyIds: [$partyId] }
-      ReceiverAccountFilter: { partyIds: [$partyId] }
+      SenderAccountFilter: {
+        partyIds: [$partyId]
+        accountTypes: $senderAccountType
+      }
+      ReceiverAccountFilter: {
+        partyIds: [$partyId]
+        accountTypes: $receiverAccountType
+      }
     }
     pagination: $pagination
     dateRange: $dateRange

libs/ledger/src/lib/__generated__/LedgerEntries.ts

@@ -9,6 +9,8 @@ export type LedgerEntriesQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
   pagination?: Types.InputMaybe<Types.Pagination>;
   dateRange?: Types.InputMaybe<Types.DateRange>;
+  senderAccountType?: Types.InputMaybe<Array<Types.AccountType> | Types.AccountType>;
+  receiverAccountType?: Types.InputMaybe<Array<Types.AccountType> | Types.AccountType>;
 }>;
 
 
@@ -29,9 +31,9 @@ export const LedgerEntryFragmentDoc = gql`
 }
     `;
 export const LedgerEntriesDocument = gql`
-    query LedgerEntries($partyId: ID!, $pagination: Pagination, $dateRange: DateRange) {
+    query LedgerEntries($partyId: ID!, $pagination: Pagination, $dateRange: DateRange, $senderAccountType: [AccountType!], $receiverAccountType: [AccountType!]) {
   ledgerEntries(
-    filter: {SenderAccountFilter: {partyIds: [$partyId]}, ReceiverAccountFilter: {partyIds: [$partyId]}}
+    filter: {SenderAccountFilter: {partyIds: [$partyId], accountTypes: $senderAccountType}, ReceiverAccountFilter: {partyIds: [$partyId], accountTypes: $receiverAccountType}}
     pagination: $pagination
     dateRange: $dateRange
   ) {
@@ -65,6 +67,8 @@ export const LedgerEntriesDocument = gql`
  *      partyId: // value for 'partyId'
  *      pagination: // value for 'pagination'
  *      dateRange: // value for 'dateRange'
+ *      senderAccountType: // value for 'senderAccountType'
+ *      receiverAccountType: // value for 'receiverAccountType'
  *   },
  * });
  */

libs/ledger/src/lib/ledger-entries-data-provider.ts

@@ -106,6 +106,9 @@ const ledgerEntriesOnlyProvider = makeDataProvider({
     append,
     first: 100,
   },
+  additionalContext: {
+    isEnlargedTimeout: true,
+  },
 });
 
 export const ledgerEntriesProvider = makeDerivedDataProvider<
@@ -147,6 +150,8 @@ export const useLedgerEntriesDataProvider = ({
     () => ({
       partyId,
       dateRange: filter?.vegaTime?.value,
+      senderAccountType: filter?.senderAccountType?.value ?? null,
+      receiverAccountType: filter?.receiverAccountType?.value ?? null,
     }),
     [partyId, filter]
   );

libs/ledger/src/lib/ledger-manager.tsx

@@ -3,14 +3,17 @@ import type * as Schema from '@vegaprotocol/types';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { FilterChangedEvent } from 'ag-grid-community';
 import type { AgGridReact } from 'ag-grid-react';
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useLedgerEntriesDataProvider } from './ledger-entries-data-provider';
 import { LedgerTable } from './ledger-table';
+import type * as Types from '@vegaprotocol/types';
 
 export interface Filter {
   vegaTime?: {
     value: Schema.DateRange;
   };
+  senderAccountType?: { value: Types.AccountType[] };
+  receiverAccountType?: { value: Types.AccountType[] };
 }
 
 type LedgerManagerProps = { partyId: string };
@@ -24,14 +27,17 @@ export const LedgerManager = ({ partyId }: LedgerManagerProps) => {
     gridRef,
   });
 
-  const onFilterChanged = (event: FilterChangedEvent) => {
-    const updatedFilter = event.api.getFilterModel();
-    if (Object.keys(updatedFilter).length) {
-      setFilter(updatedFilter);
-    } else if (filter) {
-      setFilter(undefined);
-    }
-  };
+  const onFilterChanged = useCallback(
+    (event: FilterChangedEvent) => {
+      const updatedFilter = event.api.getFilterModel();
+      if (Object.keys(updatedFilter).length) {
+        setFilter(updatedFilter);
+      } else if (filter) {
+        setFilter(undefined);
+      }
+    },
+    [filter]
+  );
 
   return (
     <div className="h-full relative">

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

@@ -3,6 +3,7 @@ import {
   DateRangeFilter,
   fromNanoSeconds,
   getDateTimeFormat,
+  SetFilter,
   t,
   truncateByChars,
 } from '@vegaprotocol/react-helpers';
@@ -50,6 +51,7 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
           resizable: true,
           sortable: true,
           tooltipComponent: TransferTooltipCellComponent,
+          filterParams: { buttons: ['reset'] },
         }}
         {...props}
       >
@@ -64,6 +66,10 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
         />
         <AgGridColumn
           headerName={t('Account type')}
+          filter={SetFilter}
+          filterParams={{
+            set: AccountTypeMapping,
+          }}
           field="senderAccountType"
           cellRenderer={({
             value,
@@ -92,6 +98,10 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
         />
         <AgGridColumn
           headerName={t('Account type')}
+          filter={SetFilter}
+          filterParams={{
+            set: AccountTypeMapping,
+          }}
           field="receiverAccountType"
           cellRenderer={({
             value,

libs/react-helpers/src/lib/generic-data-provider.ts

@@ -171,6 +171,7 @@ interface DataProviderParams<
   };
   fetchPolicy?: FetchPolicy;
   resetDelay?: number;
+  additionalContext?: Record<string, unknown>;
 }
 
 /**
@@ -196,6 +197,7 @@ function makeDataProviderInternal<
   pagination,
   fetchPolicy,
   resetDelay,
+  additionalContext,
 }: DataProviderParams<
   QueryData,
   Data,
@@ -275,6 +277,7 @@ function makeDataProviderInternal<
         pagination: paginationVariables,
       },
       fetchPolicy: fetchPolicy || 'no-cache',
+      context: additionalContext,
     });
     const insertionData = getData(res.data, variables);
     const insertionPageInfo = pagination.getPageInfo(res.data);
@@ -311,6 +314,7 @@ function makeDataProviderInternal<
           ? { ...variables, pagination: { first: pagination.first } }
           : variables,
         fetchPolicy: fetchPolicy || 'no-cache',
+        context: additionalContext,
       });
       data = getData(res.data, variables);
       if (data && pagination) {