From f2ad04e126bf7a13a3cbfe1219ed76736fc97083 Mon Sep 17 00:00:00 2001
From: maciek <maciek@vegaprotocol.io>
Date: Wed, 3 May 2023 14:39:18 +0200
Subject: [PATCH] feat: persist table columns - enable in all other tables

---
 .../trading/client-pages/market/trade-grid.tsx | 18 +++++++++++++++---
 .../client-pages/portfolio/portfolio.tsx       |  8 ++++++--
 .../accounts-container/accounts-container.tsx  |  3 +++
 libs/accounts/src/lib/accounts-manager.tsx     |  3 +++
 libs/accounts/src/lib/accounts-table.tsx       |  3 ++-
 libs/deposits/src/lib/deposits-table.tsx       |  1 +
 libs/fills/src/lib/fills-container.tsx         |  3 +++
 libs/fills/src/lib/fills-manager.tsx           |  3 +++
 libs/fills/src/lib/fills-table.tsx             |  3 ++-
 libs/ledger/src/lib/ledger-table.tsx           |  3 ++-
 libs/positions/src/lib/positions-container.tsx |  3 +++
 libs/positions/src/lib/positions-manager.tsx   |  3 +++
 libs/positions/src/lib/positions-table.tsx     |  4 +++-
 libs/withdraws/src/lib/withdrawals-table.tsx   |  1 +
 14 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx
index 41a8e5d9c..8112ffbc0 100644
--- a/apps/trading/client-pages/market/trade-grid.tsx
+++ b/apps/trading/client-pages/market/trade-grid.tsx
@@ -111,7 +111,7 @@ const MarketBottomPanel = memo(
                     onMarketClick={onMarketClick}
                     onOrderTypeClick={onOrderTypeClick}
                     enforceBottomPlaceholder
-                    id="bottomOrders"
+                    id="marketOrders"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -120,6 +120,7 @@ const MarketBottomPanel = memo(
                   <TradingViews.Fills
                     marketId={marketId}
                     onMarketClick={onMarketClick}
+                    id="marketFills"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -138,6 +139,7 @@ const MarketBottomPanel = memo(
                   <TradingViews.Positions
                     onMarketClick={onMarketClick}
                     noBottomPlaceholder
+                    id="marketPositions"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -147,6 +149,7 @@ const MarketBottomPanel = memo(
                     pinnedAsset={pinnedAsset}
                     noBottomPlaceholder
                     hideButtons
+                    id="marketCollateral"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -159,7 +162,10 @@ const MarketBottomPanel = memo(
         <Tabs storageKey="console-trade-grid-bottom">
           <Tab id="positions" name={t('Positions')}>
             <VegaWalletContainer>
-              <TradingViews.Positions onMarketClick={onMarketClick} />
+              <TradingViews.Positions
+                onMarketClick={onMarketClick}
+                id="marketPositions"
+              />
             </VegaWalletContainer>
           </Tab>
           <Tab id="orders" name={t('Orders')}>
@@ -169,6 +175,7 @@ const MarketBottomPanel = memo(
                 onMarketClick={onMarketClick}
                 onOrderTypeClick={onOrderTypeClick}
                 enforceBottomPlaceholder
+                id="marketOrders"
               />
             </VegaWalletContainer>
           </Tab>
@@ -177,12 +184,17 @@ const MarketBottomPanel = memo(
               <TradingViews.Fills
                 marketId={marketId}
                 onMarketClick={onMarketClick}
+                id="marketFills"
               />
             </VegaWalletContainer>
           </Tab>
           <Tab id="accounts" name={t('Collateral')}>
             <VegaWalletContainer>
-              <TradingViews.Collateral pinnedAsset={pinnedAsset} hideButtons />
+              <TradingViews.Collateral
+                pinnedAsset={pinnedAsset}
+                hideButtons
+                id="marketCollateral"
+              />
             </VegaWalletContainer>
           </Tab>
         </Tabs>
diff --git a/apps/trading/client-pages/portfolio/portfolio.tsx b/apps/trading/client-pages/portfolio/portfolio.tsx
index 51a9820f4..6bdd2a8b9 100644
--- a/apps/trading/client-pages/portfolio/portfolio.tsx
+++ b/apps/trading/client-pages/portfolio/portfolio.tsx
@@ -53,6 +53,7 @@ export const Portfolio = () => {
                   <PositionsContainer
                     onMarketClick={onMarketClick}
                     noBottomPlaceholder
+                    id="portfolioPositions"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -67,7 +68,10 @@ export const Portfolio = () => {
               </Tab>
               <Tab id="fills" name={t('Fills')}>
                 <VegaWalletContainer>
-                  <FillsContainer onMarketClick={onMarketClick} />
+                  <FillsContainer
+                    onMarketClick={onMarketClick}
+                    id="portfolioFills"
+                  />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="ledger-entries" name={t('Ledger entries')}>
@@ -87,7 +91,7 @@ export const Portfolio = () => {
             <Tabs storageKey="console-portfolio-bottom">
               <Tab id="collateral" name={t('Collateral')}>
                 <VegaWalletContainer>
-                  <AccountsContainer />
+                  <AccountsContainer id="portfolioCollateral" />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="deposits" name={t('Deposits')}>
diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx
index 779741249..c97641f6c 100644
--- a/apps/trading/components/accounts-container/accounts-container.tsx
+++ b/apps/trading/components/accounts-container/accounts-container.tsx
@@ -13,10 +13,12 @@ export const AccountsContainer = ({
   pinnedAsset,
   hideButtons,
   noBottomPlaceholder,
+  id,
 }: {
   pinnedAsset?: PinnedAsset;
   hideButtons?: boolean;
   noBottomPlaceholder?: boolean;
+  id?: string;
 }) => {
   const { pubKey, isReadOnly } = useVegaWallet();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
@@ -42,6 +44,7 @@ export const AccountsContainer = ({
   return (
     <div className="h-full relative">
       <AccountManager
+        id={id}
         partyId={pubKey}
         onClickAsset={onClickAsset}
         onClickWithdraw={openWithdrawalDialog}
diff --git a/libs/accounts/src/lib/accounts-manager.tsx b/libs/accounts/src/lib/accounts-manager.tsx
index 2d67b7423..f4f7cac70 100644
--- a/libs/accounts/src/lib/accounts-manager.tsx
+++ b/libs/accounts/src/lib/accounts-manager.tsx
@@ -19,6 +19,7 @@ interface AccountManagerProps {
   isReadOnly: boolean;
   pinnedAsset?: PinnedAsset;
   noBottomPlaceholder?: boolean;
+  id?: string;
 }
 
 export const AccountManager = ({
@@ -29,6 +30,7 @@ export const AccountManager = ({
   isReadOnly,
   pinnedAsset,
   noBottomPlaceholder,
+  id,
 }: AccountManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const variables = useMemo(() => ({ partyId }), [partyId]);
@@ -52,6 +54,7 @@ export const AccountManager = ({
   return (
     <div className="relative h-full">
       <AccountTable
+        id={id}
         ref={gridRef}
         rowData={error ? [] : data}
         onClickAsset={onClickAsset}
diff --git a/libs/accounts/src/lib/accounts-table.tsx b/libs/accounts/src/lib/accounts-table.tsx
index fc0dc3c78..9d90aeb0b 100644
--- a/libs/accounts/src/lib/accounts-table.tsx
+++ b/libs/accounts/src/lib/accounts-table.tsx
@@ -100,6 +100,7 @@ export interface AccountTableProps extends AgGridReactProps {
   onClickDeposit?: (assetId: string) => void;
   isReadOnly: boolean;
   pinnedAsset?: PinnedAsset;
+  id?: string;
 }
 
 export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
@@ -149,7 +150,6 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
             (data) => data.asset.id !== pinnedAssetId
           )}
           defaultColDef={{
-            flex: 1,
             resizable: true,
             tooltipComponent: TooltipCellComponent,
             sortable: true,
@@ -356,6 +356,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                   );
                 }
               }}
+              flex={1}
             />
           }
         </AgGrid>
diff --git a/libs/deposits/src/lib/deposits-table.tsx b/libs/deposits/src/lib/deposits-table.tsx
index 798b815ad..661ea2a69 100644
--- a/libs/deposits/src/lib/deposits-table.tsx
+++ b/libs/deposits/src/lib/deposits-table.tsx
@@ -24,6 +24,7 @@ export const DepositsTable = forwardRef<
 >((props, ref) => {
   return (
     <AgGrid
+      id="depositTable"
       ref={ref}
       overlayNoRowsTemplate={t('No deposits')}
       defaultColDef={{ flex: 1, resizable: true }}
diff --git a/libs/fills/src/lib/fills-container.tsx b/libs/fills/src/lib/fills-container.tsx
index 84a79f462..fb201553e 100644
--- a/libs/fills/src/lib/fills-container.tsx
+++ b/libs/fills/src/lib/fills-container.tsx
@@ -6,9 +6,11 @@ import { FillsManager } from './fills-manager';
 export const FillsContainer = ({
   marketId,
   onMarketClick,
+  id,
 }: {
   marketId?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+  id?: string;
 }) => {
   const { pubKey } = useVegaWallet();
 
@@ -25,6 +27,7 @@ export const FillsContainer = ({
       partyId={pubKey}
       marketId={marketId}
       onMarketClick={onMarketClick}
+      id={id}
     />
   );
 };
diff --git a/libs/fills/src/lib/fills-manager.tsx b/libs/fills/src/lib/fills-manager.tsx
index 8ca9d30af..35db5b5bb 100644
--- a/libs/fills/src/lib/fills-manager.tsx
+++ b/libs/fills/src/lib/fills-manager.tsx
@@ -12,12 +12,14 @@ interface FillsManagerProps {
   partyId: string;
   marketId?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+  id?: string;
 }
 
 export const FillsManager = ({
   partyId,
   marketId,
   onMarketClick,
+  id,
 }: FillsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const scrolledToTop = useRef(true);
@@ -70,6 +72,7 @@ export const FillsManager = ({
   return (
     <div className="h-full relative">
       <FillsTable
+        id={id}
         ref={gridRef}
         partyId={partyId}
         rowModelType="infinite"
diff --git a/libs/fills/src/lib/fills-table.tsx b/libs/fills/src/lib/fills-table.tsx
index 1b22473f8..3b2a3ef2f 100644
--- a/libs/fills/src/lib/fills-table.tsx
+++ b/libs/fills/src/lib/fills-table.tsx
@@ -34,6 +34,7 @@ export type Role = typeof TAKER | typeof MAKER | '-';
 export type Props = (AgGridReactProps | AgReactUiProps) & {
   partyId: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+  id?: string;
 };
 
 export const FillsTable = forwardRef<AgGridReact, Props>(
@@ -42,7 +43,7 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
       <AgGrid
         ref={ref}
         overlayNoRowsTemplate={t('No fills')}
-        defaultColDef={{ flex: 1, resizable: true }}
+        defaultColDef={{ resizable: true }}
         style={{ width: '100%', height: '100%' }}
         getRowId={({ data }) => data?.id}
         tooltipShowDelay={0}
diff --git a/libs/ledger/src/lib/ledger-table.tsx b/libs/ledger/src/lib/ledger-table.tsx
index 57ceb5581..cde07c420 100644
--- a/libs/ledger/src/lib/ledger-table.tsx
+++ b/libs/ledger/src/lib/ledger-table.tsx
@@ -49,11 +49,11 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
   (props, ref) => {
     return (
       <AgGrid
+        id="ledgerTable"
         style={{ width: '100%', height: 'calc(100% - 50px)' }}
         ref={ref}
         tooltipShowDelay={500}
         defaultColDef={{
-          flex: 1,
           resizable: true,
           sortable: true,
           tooltipComponent: TransferTooltipCellComponent,
@@ -203,6 +203,7 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
           }
           filterParams={dateRangeFilterParams}
           filter={DateRangeFilter}
+          flex={1}
         />
       </AgGrid>
     );
diff --git a/libs/positions/src/lib/positions-container.tsx b/libs/positions/src/lib/positions-container.tsx
index f79d997bc..aa5f1f254 100644
--- a/libs/positions/src/lib/positions-container.tsx
+++ b/libs/positions/src/lib/positions-container.tsx
@@ -6,9 +6,11 @@ import { PositionsManager } from './positions-manager';
 export const PositionsContainer = ({
   onMarketClick,
   noBottomPlaceholder,
+  id,
 }: {
   onMarketClick?: (marketId: string) => void;
   noBottomPlaceholder?: boolean;
+  id?: string;
 }) => {
   const { pubKey, isReadOnly } = useVegaWallet();
 
@@ -25,6 +27,7 @@ export const PositionsContainer = ({
       onMarketClick={onMarketClick}
       isReadOnly={isReadOnly}
       noBottomPlaceholder={noBottomPlaceholder}
+      id={id}
     />
   );
 };
diff --git a/libs/positions/src/lib/positions-manager.tsx b/libs/positions/src/lib/positions-manager.tsx
index 75d73da54..e5591bab9 100644
--- a/libs/positions/src/lib/positions-manager.tsx
+++ b/libs/positions/src/lib/positions-manager.tsx
@@ -13,6 +13,7 @@ interface PositionsManagerProps {
   onMarketClick?: (marketId: string) => void;
   isReadOnly: boolean;
   noBottomPlaceholder?: boolean;
+  id?: string;
 }
 
 export const PositionsManager = ({
@@ -20,6 +21,7 @@ export const PositionsManager = ({
   onMarketClick,
   isReadOnly,
   noBottomPlaceholder,
+  id,
 }: PositionsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const { data, error, loading, reload } = usePositionsData(partyId, gridRef);
@@ -82,6 +84,7 @@ export const PositionsManager = ({
         onFilterChanged={updateRowCount}
         onRowDataUpdated={updateRowCount}
         {...bottomPlaceholderProps}
+        id={id}
       />
       <div className="pointer-events-none absolute inset-0">
         <AsyncRenderer
diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx
index 0d7fc3cf9..9d79652b0 100644
--- a/libs/positions/src/lib/positions-table.tsx
+++ b/libs/positions/src/lib/positions-table.tsx
@@ -46,6 +46,7 @@ interface Props extends TypedDataAgGrid<Position> {
   onMarketClick?: (id: string, metaKey?: boolean) => void;
   style?: CSSProperties;
   isReadOnly: boolean;
+  id?: string;
 }
 
 export interface AmountCellProps {
@@ -89,7 +90,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
         ref={ref}
         tooltipShowDelay={500}
         defaultColDef={{
-          flex: 1,
           resizable: true,
           sortable: true,
           filter: true,
@@ -368,6 +368,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
             return getDateTimeFormat().format(new Date(value));
           }}
           minWidth={150}
+          flex={1}
         />
         {onClose && !props.isReadOnly ? (
           <AgGridColumn
@@ -383,6 +384,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
               ) : null
             }
             minWidth={80}
+            flex={1}
           />
         ) : null}
       </AgGrid>
diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx
index 2d6ed18d7..a420e7a83 100644
--- a/libs/withdraws/src/lib/withdrawals-table.tsx
+++ b/libs/withdraws/src/lib/withdrawals-table.tsx
@@ -34,6 +34,7 @@ export const WithdrawalsTable = (
   const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
   return (
     <AgGrid
+      id="withdrawals"
       overlayNoRowsTemplate={t('No withdrawals')}
       defaultColDef={{ flex: 1, resizable: true }}
       style={{ width: '100%', height: '100%' }}