fix: [console-lite] - empty portfolio views (#1433)

* fix: [console-lite] - empty protfolio views

* fix: [console-lite] - empty portfolio views - fix linters

Co-authored-by: maciek <maciek@vegaprotocol.io>

apps/console-lite-e2e/src/integration/portfolio-page.test.ts

@@ -3,7 +3,10 @@ import {
   disconnectVegaWallet,
 } from '../support/connect-wallet';
 import { aliasQuery } from '@vegaprotocol/cypress';
-import { generatePositions } from '../support/mocks/generate-positions';
+import {
+  generatePositions,
+  emptyPositions,
+} from '../support/mocks/generate-positions';
 import { generateAccounts } from '../support/mocks/generate-accounts';
 import { generateOrders } from '../support/mocks/generate-orders';
 import { generateFills } from '../support/mocks/generate-fills';
@@ -112,4 +115,42 @@ describe('Portfolio page', { tags: '@smoke' }, () => {
       cy.get('.ag-center-cols-container .ag-row').should('have.length', 4);
     });
   });
+
+  describe('Empty views', () => {
+    beforeEach(() => {
+      cy.mockGQL((req) => {
+        aliasQuery(req, 'Positions', emptyPositions());
+        aliasQuery(req, 'Accounts', { party: null });
+        aliasQuery(req, 'Orders', { party: null });
+        aliasQuery(req, 'Fills', { party: null });
+        aliasQuery(req, 'Markets', {
+          marketsConnection: { edges: [], __typename: 'MarketConnection' },
+        });
+      });
+      cy.visit('/portfolio');
+      connectVegaWallet();
+    });
+
+    it('"No data to display" should be always displayed', () => {
+      cy.getByTestId('assets').click();
+      cy.get('div.flex.items-center.justify-center').contains(
+        'No data to display'
+      );
+
+      cy.getByTestId('positions').click();
+      cy.get('div.flex.items-center.justify-center').contains(
+        'No data to display'
+      );
+
+      cy.getByTestId('orders').click();
+      cy.get('div.flex.items-center.justify-center').contains(
+        'No data to display'
+      );
+
+      cy.getByTestId('fills').click();
+      cy.get('div.flex.items-center.justify-center').contains(
+        'No data to display'
+      );
+    });
+  });
 });

apps/console-lite-e2e/src/support/mocks/generate-positions.ts

@@ -189,3 +189,13 @@ export const generatePositions = (
 
   return merge(defaultResult, override);
 };
+
+export const emptyPositions = () => {
+  return {
+    party: {
+      id: Cypress.env('VEGA_PUBLIC_KEY'),
+      positionsConnection: { edges: null, __typename: 'PositionConnection' },
+      __typename: 'Party',
+    },
+  };
+};

apps/console-lite/src/app/components/console-lite-grid/console-lite-grid.tsx

@@ -8,11 +8,7 @@ import React, {
 import classNames from 'classnames';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
-import {
-  t,
-  ThemeContext,
-  useScreenDimensions,
-} from '@vegaprotocol/react-helpers';
+import { ThemeContext, useScreenDimensions } from '@vegaprotocol/react-helpers';
 import type {
   GridOptions,
   GetRowIdParams,
@@ -20,6 +16,7 @@ import type {
   CellKeyDownEvent,
   FullWidthCellKeyDownEvent,
 } from 'ag-grid-community';
+import { NO_DATA_MESSAGE } from '../../constants';
 import * as constants from '../simple-market-list/constants';
 
 interface Props<T> extends GridOptions {
@@ -85,7 +82,7 @@ const ConsoleLiteGrid = <T extends { id?: string }>(
       rowClass={isMobile ? 'mobile' : ''}
       rowClassRules={constants.ROW_CLASS_RULES}
       ref={ref || gridRef}
-      overlayNoRowsTemplate={t('No data to display')}
+      overlayNoRowsTemplate={NO_DATA_MESSAGE}
       suppressContextMenu
       getRowId={getRowId || getRowIdLocal}
       suppressMovableColumns

apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx

@@ -15,6 +15,7 @@ import {
   AssetDetailsDialog,
   useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
+import { NO_DATA_MESSAGE } from '../../../constants';
 import { ConsoleLiteGrid } from '../../console-lite-grid';
 import { useAccountColumnDefinitions } from '.';
 
@@ -34,7 +35,7 @@ const AccountsManager = ({ partyId }: Props) => {
   } = useAssetDetailsDialogStore();
   const gridRef = useRef<AgGridReact | null>(null);
   const variables = useMemo(() => ({ partyId }), [partyId]);
-  const update = accountsManagerUpdate(gridRef);
+  const update = useMemo(() => accountsManagerUpdate(gridRef), []);
   const { data, error, loading } = useDataProvider<
     AccountFieldsFragment[],
     AccountEventsSubscription['accounts']
@@ -42,7 +43,12 @@ const AccountsManager = ({ partyId }: Props) => {
   const { columnDefs, defaultColDef } = useAccountColumnDefinitions();
   return (
     <>
-      <AsyncRenderer loading={loading} error={error} data={data}>
+      <AsyncRenderer
+        loading={loading}
+        error={error}
+        data={data}
+        noDataMessage={NO_DATA_MESSAGE}
+      >
         <ConsoleLiteGrid<AccountObj>
           data={data as AccountObj[]}
           columnDefs={columnDefs}

apps/console-lite/src/app/components/portfolio/fills/fills.tsx

@@ -5,6 +5,7 @@ import { useFillsList } from '@vegaprotocol/fills';
 import type { BodyScrollEndEvent, BodyScrollEvent } from 'ag-grid-community';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { ConsoleLiteGrid } from '../../console-lite-grid';
+import { NO_DATA_MESSAGE } from '../../../constants';
 import useColumnDefinitions from './use-column-definitions';
 
 interface Props {
@@ -32,7 +33,12 @@ const FillsManager = ({ partyId }: Props) => {
   };
 
   return (
-    <AsyncRenderer loading={loading} error={error} data={data}>
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={data?.length ? data : null}
+      noDataMessage={NO_DATA_MESSAGE}
+    >
       <ConsoleLiteGrid<TradeWithMarket>
         ref={gridRef}
         rowModelType="infinite"

apps/console-lite/src/app/components/portfolio/orders/orders.tsx

@@ -14,6 +14,7 @@ import {
 } from '@vegaprotocol/orders';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { ConsoleLiteGrid } from '../../console-lite-grid';
+import { NO_DATA_MESSAGE } from '../../../constants';
 import useColumnDefinitions from './use-column-definitions';
 
 interface Props {
@@ -49,7 +50,12 @@ const OrdersManager = ({ partyId }: Props) => {
   };
 
   return (
-    <AsyncRenderer loading={loading} error={error} data={data}>
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={data?.length ? data : null}
+      noDataMessage={NO_DATA_MESSAGE}
+    >
       <ConsoleLiteGrid<OrderWithMarket>
         ref={gridRef}
         rowModelType="infinite"

apps/console-lite/src/app/components/portfolio/positions/positions.tsx

@@ -13,7 +13,7 @@ const Positions = ({ partyId }: Props) => {
   });
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
-      {assetSymbols && assetSymbols.length && (
+      {assetSymbols && assetSymbols.length > 0 && (
         <div className="w-full, h-max">
           {assetSymbols?.map((assetSymbol) => (
             <PositionsAsset

apps/console-lite/src/app/constants/index.ts

@@ -24,3 +24,5 @@ export const MARKET_STATES_MAP: Record<MarketState | '', string> = {
   [MarketState.STATE_TRADING_TERMINATED]: t('TradingTerminated'),
   '': t('Unknown'),
 };
+
+export const NO_DATA_MESSAGE = t('No data to display');

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

@@ -66,7 +66,7 @@ export const accountsManagerUpdate =
 export const AccountsManager = ({ partyId }: AccountsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const variables = useMemo(() => ({ partyId }), [partyId]);
-  const update = accountsManagerUpdate(gridRef);
+  const update = useMemo(() => accountsManagerUpdate(gridRef), []);
   const { data, error, loading } = useDataProvider<
     AccountFieldsFragment[],
     AccountEventsSubscription['accounts']