feat: make storing grid sizes opt in

Merge remote-tracking branch 'origin/develop' into feat/3393-persist-table-column-sizes
feat: persist table columns - add unit test
2023-05-04 18:52:44 -07:00 · 2023-05-04 16:22:10 +02:00 · 2023-05-04 16:21:41 +02:00 · 2023-05-04 13:26:04 +02:00 · 2023-05-04 13:14:26 +02:00 · 2023-05-04 13:01:44 +02:00
33 changed files with 324 additions and 28 deletions
@@ -6,6 +6,7 @@ import '@testing-library/jest-dom';
 import dev from './i18n/translations/dev.json';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import ResizeObserver from 'resize-observer-polyfill';

 // Set up i18n instance so that components have the correct default
 // en translations
@@ -22,3 +23,5 @@ i18n.use(initReactI18next).init({
  ns: ['translations'],
  defaultNS: 'translations',
 });
+
+global.ResizeObserver = ResizeObserver;
@@ -155,6 +155,7 @@ const MarketBottomPanel = memo(
                    onMarketClick={onMarketClick}
                    onOrderTypeClick={onOrderTypeClick}
                    enforceBottomPlaceholder
+                    id="marketOpenOrders"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -166,6 +167,7 @@ const MarketBottomPanel = memo(
                    onMarketClick={onMarketClick}
                    onOrderTypeClick={onOrderTypeClick}
                    enforceBottomPlaceholder
+                    id="marketClosedOrders"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -177,6 +179,7 @@ const MarketBottomPanel = memo(
                    onMarketClick={onMarketClick}
                    onOrderTypeClick={onOrderTypeClick}
                    enforceBottomPlaceholder
+                    id="marketRejectOrders"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -187,6 +190,7 @@ const MarketBottomPanel = memo(
                    onMarketClick={onMarketClick}
                    onOrderTypeClick={onOrderTypeClick}
                    enforceBottomPlaceholder
+                    id="marketAllOrders"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -195,6 +199,7 @@ const MarketBottomPanel = memo(
                  <TradingViews.fills.component
                    marketId={marketId}
                    onMarketClick={onMarketClick}
+                    id="marketFills"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -213,6 +218,7 @@ const MarketBottomPanel = memo(
                  <TradingViews.positions.component
                    onMarketClick={onMarketClick}
                    noBottomPlaceholder
+                    id="marketPositions"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -222,6 +228,7 @@ const MarketBottomPanel = memo(
                    pinnedAsset={pinnedAsset}
                    noBottomPlaceholder
                    hideButtons
+                    id="marketCollateral"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -234,7 +241,10 @@ const MarketBottomPanel = memo(
        <Tabs storageKey="console-trade-grid-bottom">
          <Tab id="positions" name={t('Positions')}>
            <VegaWalletContainer>
-              <TradingViews.positions.component onMarketClick={onMarketClick} />
+              <TradingViews.positions.component
+                onMarketClick={onMarketClick}
+                id="marketPositions"
+              />
            </VegaWalletContainer>
          </Tab>
          <Tab id="open-orders" name={t('Open')}>
@@ -245,6 +255,7 @@ const MarketBottomPanel = memo(
                onMarketClick={onMarketClick}
                onOrderTypeClick={onOrderTypeClick}
                enforceBottomPlaceholder
+                id="marketOpenOrders"
              />
            </VegaWalletContainer>
          </Tab>
@@ -256,6 +267,7 @@ const MarketBottomPanel = memo(
                onMarketClick={onMarketClick}
                onOrderTypeClick={onOrderTypeClick}
                enforceBottomPlaceholder
+                id="marketClosedOrders"
              />
            </VegaWalletContainer>
          </Tab>
@@ -267,6 +279,7 @@ const MarketBottomPanel = memo(
                onMarketClick={onMarketClick}
                onOrderTypeClick={onOrderTypeClick}
                enforceBottomPlaceholder
+                id="marketRejectedOrders"
              />
            </VegaWalletContainer>
          </Tab>
@@ -277,6 +290,7 @@ const MarketBottomPanel = memo(
                onMarketClick={onMarketClick}
                onOrderTypeClick={onOrderTypeClick}
                enforceBottomPlaceholder
+                id="marketAllOrders"
              />
            </VegaWalletContainer>
          </Tab>
@@ -285,6 +299,7 @@ const MarketBottomPanel = memo(
              <TradingViews.fills.component
                marketId={marketId}
                onMarketClick={onMarketClick}
+                id="marketFills"
              />
            </VegaWalletContainer>
          </Tab>
@@ -293,6 +308,7 @@ const MarketBottomPanel = memo(
              <TradingViews.collateral.component
                pinnedAsset={pinnedAsset}
                hideButtons
+                id="marketCollateral"
              />
            </VegaWalletContainer>
          </Tab>
@@ -264,6 +264,7 @@ const ClosedMarketsDataGrid = ({ rowData }: { rowData: Row[] }) => {
      {
        headerName: t('Market ID'),
        field: 'id',
+        flex: 1,
      },
    ];
    return cols;
@@ -271,12 +272,12 @@ const ClosedMarketsDataGrid = ({ rowData }: { rowData: Row[] }) => {

  return (
    <AgGrid
+      id="closedMarkets"
      style={{ width: '100%', height: '100%' }}
      rowData={rowData}
      columnDefs={colDefs}
      getRowId={({ data }) => data.id}
      defaultColDef={{
-        flex: 1,
        resizable: true,
      }}
      overlayNoRowsTemplate="No data"
@@ -53,6 +53,7 @@ export const Portfolio = () => {
                  <PositionsContainer
                    onMarketClick={onMarketClick}
                    noBottomPlaceholder
+                    id="portfolioPositions"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -61,12 +62,16 @@ export const Portfolio = () => {
                  <OrderListContainer
                    onMarketClick={onMarketClick}
                    onOrderTypeClick={onOrderTypeClick}
+                    id="portfolioOrders"
                  />
                </VegaWalletContainer>
              </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')}>
@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import {
  addDecimalsFormatNumber,
  isNumeric,
@@ -9,6 +9,7 @@ import type {
  VegaICellRendererParams,
  VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
+import { useColumnSizes } from '@vegaprotocol/datagrid';
 import {
  Button,
  ButtonLink,
@@ -100,10 +101,16 @@ export interface AccountTableProps extends AgGridReactProps {
  onClickDeposit?: (assetId: string) => void;
  isReadOnly: boolean;
  pinnedAsset?: PinnedAsset;
+  id?: string;
 }

 export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
  ({ onClickAsset, onClickWithdraw, onClickDeposit, ...props }, ref) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const { onGridReady, onColumnResized } = useColumnSizes({
+      id: 'accounts',
+      container: containerRef,
+    });
    const [openBreakdown, setOpenBreakdown] = useState(false);
    const [row, setRow] = useState<AccountFields>();
    const pinnedAssetId = props.pinnedAsset?.id;
@@ -143,7 +150,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
    );

    return (
-      <>
+      <div className="w-full h-full" ref={containerRef}>
        <AgGrid
          {...props}
          style={{ width: '100%', height: '100%' }}
@@ -154,8 +161,9 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
          rowData={props.rowData?.filter(
            (data) => data.asset.id !== pinnedAssetId
          )}
+          onGridReady={onGridReady}
+          onColumnResized={onColumnResized}
          defaultColDef={{
-            flex: 1,
            resizable: true,
            tooltipComponent: TooltipCellComponent,
            sortable: true,
@@ -187,7 +195,6 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                </ButtonLink>
              );
            }}
-            maxWidth={300}
          />
          <AgGridColumn
            headerName={t('Used')}
@@ -362,6 +369,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                  );
                }
              }}
+              flex={1}
            />
          }
        </AgGrid>
@@ -387,7 +395,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
            />
          </div>
        </Dialog>
-      </>
+      </div>
    );
  }
 );
@@ -1,4 +1,5 @@
 export * from './lib/ag-grid/ag-grid-lazy';
+export * from './lib/ag-grid/use-column-sizes';

 export * from './lib/cells/cumulative-vol-cell';
 export * from './lib/cells/flash-cell';
@@ -1,15 +1,23 @@
+import React, { useCallback, useRef } from 'react';
+import type { ReactNode } from 'react';
 import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
+import type { ColumnResizedEvent, GridReadyEvent } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
+import { useColumnSizes } from './use-column-sizes';
 import classNames from 'classnames';

 export const AgGridThemed = ({
  style,
  gridRef,
+  id,
+  children,
  ...props
 }: (AgGridReactProps | AgReactUiProps) & {
  style?: React.CSSProperties;
  gridRef?: React.ForwardedRef<AgGridReact>;
+  id?: string;
+  children?: ReactNode[];
 }) => {
  const { theme } = useThemeSwitcher();
  const defaultProps = {
@@ -17,14 +25,16 @@ export const AgGridThemed = ({
    headerHeight: 22,
    enableCellTextSelection: true,
  };
+
  const wrapperClasses = classNames('vega-ag-grid', {
    'ag-theme-balham': theme === 'light',
    'ag-theme-balham-dark': theme === 'dark',
  });
-
  return (
    <div className={wrapperClasses} style={style}>
-      <AgGridReact {...defaultProps} {...props} ref={gridRef} />
+      <AgGridReact {...defaultProps} {...props} ref={gridRef}>
+        {children}
+      </AgGridReact>
    </div>
  );
 };
@@ -4,6 +4,7 @@ import type { AgGridReactProps, AgGridReact } from 'ag-grid-react';
 type Props = AgGridReactProps & {
  style?: React.CSSProperties;
  gridRef?: React.Ref<AgGridReact>;
+  id?: string;
 };

 export const AgGridLazyInternal = lazy(() =>
@@ -0,0 +1,85 @@
+import type { MutableRefObject, ReactElement } from 'react';
+import type { Column } from 'ag-grid-community';
+import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
+import { renderHook } from '@testing-library/react';
+import { useColumnSizes } from './use-column-sizes';
+
+const mockValueSetter = jest.fn();
+let mockStore = { sizes: {}, valueSetter: mockValueSetter };
+jest.mock('zustand', () => ({
+  ...jest.requireActual('zustand'),
+  create: () =>
+    jest.fn(() =>
+      jest.fn().mockImplementation((creator) => {
+        return creator(mockStore);
+      })
+    ),
+}));
+describe('UseColumnsSizes hook', () => {
+  const id = 'testid';
+  const container = {
+    current: { getBoundingClientRect: () => ({ width: 1000 }) },
+  } as MutableRefObject<HTMLDivElement>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  it('should return proper methods', () => {
+    const { result } = renderHook(() => useColumnSizes({ id, container }));
+    expect(result.current).toHaveLength(3);
+    expect(result.current).toStrictEqual([
+      expect.any(Function),
+      expect.any(Function),
+      expect.any(Function),
+    ]);
+  });
+
+  it('handleOnChange should fill up store', () => {
+    jest.useFakeTimers();
+    const columns: Column[] = [
+      { getColId: () => 'col1', getActualWidth: () => 100 },
+      { getColId: () => 'col2', getActualWidth: () => 200 },
+    ] as Column[];
+    const sizeObj = { col1: 100, col2: 200, width: 1000 };
+    const { result } = renderHook(() => useColumnSizes({ id, container }));
+    result.current[0](columns);
+    jest.runAllTimers();
+    expect(mockValueSetter).toHaveBeenCalledWith(id, sizeObj);
+  });
+
+  it('children should be reshaped', () => {
+    mockStore = {
+      sizes: { [id]: { col1: 100, col2: 200, width: 1000 } },
+      valueSetter: mockValueSetter,
+    };
+    const children = [
+      { props: { colId: 'col1' } },
+      { props: { colId: 'col2' } },
+    ] as ReactElement[];
+    const { result } = renderHook(() => useColumnSizes({ id, container }));
+    expect(result.current[1](children)).toStrictEqual([
+      { props: { colId: 'col1', width: 100 } },
+      { props: { colId: 'col2', width: 200 } },
+    ]);
+  });
+
+  it('props should be reshaped', () => {
+    mockStore = {
+      sizes: { [id]: { col1: 100, col2: 200, width: 1000 } },
+      valueSetter: mockValueSetter,
+    };
+    const props = { columnDefs: [{ colId: 'col1' }, { colId: 'col2' }] } as
+      | AgGridReactProps
+      | AgReactUiProps;
+    const { result } = renderHook(() => useColumnSizes({ id, container }));
+    expect(result.current[2](props, undefined)).toStrictEqual({
+      columnDefs: [
+        { colId: 'col1', width: 100 },
+        { colId: 'col2', width: 200 },
+      ],
+    });
+  });
+});
@@ -0,0 +1,121 @@
+import type { MutableRefObject, ReactElement } from 'react';
+import { useCallback, useState } from 'react';
+import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
+import type {
+  Column,
+  ColDef,
+  ColumnResizedEvent,
+  GridReadyEvent,
+} from 'ag-grid-community';
+import debounce from 'lodash/debounce';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { useResizeObserver } from '@vegaprotocol/react-helpers';
+
+const STORAGE_KEY = 'vega_columns_sizes_store';
+const COLUMNS_SET_DEBOUNCE_TIME = 300;
+
+export const useColumnSizesStore = create<{
+  sizes: Record<string, Record<string, number>>;
+  valueSetter: (id: string, value: Record<string, number>) => void;
+}>()(
+  persist(
+    immer((set) => ({
+      sizes: {},
+      valueSetter: (id, value) =>
+        set((state) => {
+          state.sizes[id] = {
+            ...(state.sizes[id] || {}),
+            ...value,
+          };
+          return state;
+        }),
+    })),
+    { name: STORAGE_KEY }
+  )
+);
+
+interface UseColumnSizesProps {
+  id?: string;
+  container?: MutableRefObject<HTMLDivElement | null>;
+}
+export const useColumnSizes = ({ id = '', container }: UseColumnSizesProps) => {
+  const sizes = useColumnSizesStore((store) => store.sizes[id] || {});
+  const valueSetter = useColumnSizesStore((store) => store.valueSetter);
+  const getWidthOfAll = useCallback(
+    () =>
+      (container?.current as HTMLDivElement)?.getBoundingClientRect().width ??
+      0,
+    [container]
+  );
+  // const recalculateSizes = useCallback(
+  //   (sizes: Record<string, number>) => {
+  //     const width = getWidthOfAll();
+  //     if (width && sizes['width'] && width !== sizes['width']) {
+  //       const oldWidth = sizes['width'];
+  //       const ratio = width / oldWidth;
+  //       return {
+  //         ...Object.entries(sizes).reduce((agg, [key, value]) => {
+  //           agg[key] = value * ratio;
+  //           return agg;
+  //         }, {} as Record<string, number>),
+  //         width,
+  //       } as Record<string, number>;
+  //     }
+  //     return sizes;
+  //   },
+  //   [getWidthOfAll]
+  // );
+  // const [calculatedSizes, setCalculatedSizes] = useState(
+  //   recalculateSizes(sizes)
+  // );
+  // const onResize = useCallback(() => {
+  //   const width = getWidthOfAll();
+  //   if (width && sizes['width'] && width !== sizes['width']) {
+  //     setCalculatedSizes(recalculateSizes(sizes));
+  //   }
+  // }, [getWidthOfAll, recalculateSizes, sizes]);
+  // useResizeObserver(container?.current as Element, onResize);
+
+  const onColumnResized = useCallback(
+    (event: ColumnResizedEvent) => {
+      if (
+        event.finished &&
+        event.source === 'uiColumnDragged' &&
+        event.columns
+      ) {
+        const colState = event.columnApi.getColumnState();
+        const store: { [colId: string]: number } = {};
+        colState.forEach((c) => {
+          if (c.width) {
+            store[c.colId] = c.width;
+          }
+        });
+        valueSetter(id, store);
+      }
+    },
+    [valueSetter, id]
+  );
+
+  const onGridReady = useCallback(
+    (event: GridReadyEvent) => {
+      console.log(event);
+      if (!Object.keys(sizes).length) {
+        event.columnApi.sizeColumnsToFit(getWidthOfAll());
+      } else {
+        const initialSizes = Object.entries(sizes).map(([key, newWidth]) => ({
+          key,
+          newWidth,
+        }));
+        event.columnApi.setColumnWidths(initialSizes);
+      }
+    },
+    [sizes, getWidthOfAll]
+  );
+
+  return {
+    onColumnResized,
+    onGridReady,
+  };
+};
@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;
@@ -24,9 +24,10 @@ export const DepositsTable = forwardRef<
 >((props, ref) => {
  return (
    <AgGrid
+      id="depositTable"
      ref={ref}
      overlayNoRowsTemplate={t('No deposits')}
-      defaultColDef={{ flex: 1, resizable: true }}
+      defaultColDef={{ resizable: true }}
      style={{ width: '100%', height: '100%' }}
      suppressCellFocus={true}
      {...props}
@@ -80,6 +81,7 @@ export const DepositsTable = forwardRef<
            </EtherscanLink>
          );
        }}
+        flex={1}
      />
    </AgGrid>
  );
@@ -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}
    />
  );
 };
@@ -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"
@@ -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}
@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;
@@ -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>
    );
@@ -54,13 +54,13 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(

    return (
      <AgGrid
+        id="liquidityProvisionTable"
        style={{ width: '100%', height: '100%' }}
        overlayNoRowsTemplate={t('No liquidity provisions')}
        getRowId={({ data }) => getId(data)}
        ref={ref}
        tooltipShowDelay={500}
        defaultColDef={{
-          flex: 1,
          resizable: true,
          minWidth: 100,
          tooltipComponent: TooltipCellComponent,
@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;
@@ -33,11 +33,11 @@ export const MarketListTable = forwardRef<
  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
  return (
    <AgGrid
+      id="allMarkets"
      style={{ width: '100%', height: '100%' }}
      getRowId={getRowId}
      ref={ref}
      defaultColDef={{
-        flex: 1,
        resizable: true,
        sortable: true,
        filter: true,
@@ -198,7 +198,7 @@ export const MarketListTable = forwardRef<
          );
        }}
      />
-      <AgGridColumn headerName={t('Market ID')} field="id" />
+      <AgGridColumn headerName={t('Market ID')} field="id" flex={1} />
    </AgGrid>
  );
 });
@@ -10,6 +10,7 @@ export interface OrderListContainerProps {
  onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
  enforceBottomPlaceholder?: boolean;
  filter?: Filter;
+  id?: string;
 }

 export const OrderListContainer = ({
@@ -18,6 +19,7 @@ export const OrderListContainer = ({
  onOrderTypeClick,
  enforceBottomPlaceholder,
  filter,
+  id,
 }: OrderListContainerProps) => {
  const { pubKey, isReadOnly } = useVegaWallet();

@@ -34,6 +36,7 @@ export const OrderListContainer = ({
      onOrderTypeClick={onOrderTypeClick}
      isReadOnly={isReadOnly}
      enforceBottomPlaceholder={enforceBottomPlaceholder}
+      id={id}
    />
  );
 };
@@ -45,6 +45,7 @@ export interface OrderListManagerProps {
  isReadOnly: boolean;
  enforceBottomPlaceholder?: boolean;
  filter?: Filter;
+  id?: string;
 }

 const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
@@ -68,6 +69,7 @@ export const OrderListManager = ({
  isReadOnly,
  enforceBottomPlaceholder,
  filter,
+  id,
 }: OrderListManagerProps) => {
  const gridRef = useRef<AgGridReact | null>(null);
  const [hasData, setHasData] = useState(false);
@@ -141,6 +143,7 @@ export const OrderListManager = ({
    <>
      <div className="h-full relative">
        <OrderListTable
+          id={id}
          rowData={data as Order[]}
          ref={gridRef}
          readonlyStatusFilter={filter !== undefined}
@@ -154,6 +157,7 @@ export const OrderListManager = ({
          blockLoadDebounceMillis={100}
          suppressLoadingOverlay
          suppressNoRowsOverlay
+          suppressAutoSize
          {...bottomPlaceholderProps}
        />
        <div className="pointer-events-none absolute inset-0">
@@ -8,6 +8,7 @@ import * as Schema from '@vegaprotocol/types';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';
 import BigNumber from 'bignumber.js';
+import type { ForwardedRef } from 'react';
 import { memo, forwardRef } from 'react';
 import {
  AgGridLazy as AgGrid,
@@ -25,6 +26,7 @@ import type {
 } from '@vegaprotocol/datagrid';
 import type { AgGridReact } from 'ag-grid-react';
 import type { Order } from '../order-data-provider';
+import * as React from 'react';

 type OrderListProps = TypedDataAgGrid<Order> & { marketId?: string };

@@ -35,9 +37,12 @@ export type OrderListTableProps = OrderListProps & {
  onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
  readonlyStatusFilter?: boolean;
  isReadOnly: boolean;
+  id?: string;
 };

-export const OrderListTable = memo(
+export const OrderListTable = memo<
+  OrderListTableProps & { ref?: ForwardedRef<AgGridReact> }
+>(
  forwardRef<AgGridReact, OrderListTableProps>(
    (
      {
@@ -54,7 +59,6 @@ export const OrderListTable = memo(
        <AgGrid
          ref={ref}
          defaultColDef={{
-            flex: 1,
            resizable: true,
            sortable: true,
            filterParams: { buttons: ['reset'] },
@@ -163,7 +167,6 @@ export const OrderListTable = memo(
            valueFormatter={({
              data,
              value,
-              node,
            }: VegaValueFormatterParams<Order, 'remaining'>) => {
              if (!data) {
                return undefined;
@@ -189,7 +192,6 @@ export const OrderListTable = memo(
            valueFormatter={({
              value,
              data,
-              node,
            }: VegaValueFormatterParams<Order, 'price'>) => {
              if (!data) {
                return undefined;
@@ -240,7 +242,6 @@ export const OrderListTable = memo(
            field="createdAt"
            filter={DateRangeFilter}
            cellRenderer={({
-              data,
              value,
            }: VegaICellRendererParams<Order, 'createdAt'>) => {
              return (
@@ -291,6 +292,7 @@ export const OrderListTable = memo(
              ) : null;
            }}
            sortable={false}
+            flex={1}
          />
        </AgGrid>
      );
@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;
@@ -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}
    />
  );
 };
@@ -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
@@ -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,
@@ -383,6 +383,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
              ) : null
            }
            minWidth={80}
+            flex={1}
          />
        ) : null}
      </AgGrid>
@@ -21,9 +21,6 @@ export const getNewMarketProposals = (data: ProposalListFieldsFragment[]) =>
 export const ProposalsList = () => {
  const gridRef = useRef<AgGridReact | null>(null);
  const [dataCount, setDataCount] = useState(0);
-  const handleOnGridReady = useCallback(() => {
-    gridRef.current?.api?.sizeColumnsToFit();
-  }, [gridRef]);
  const { data, loading, error, reload } = useDataProvider({
    dataProvider: proposalsDataProvider,
    variables: {
@@ -41,13 +38,13 @@ export const ProposalsList = () => {
  return (
    <div className="relative">
      <AgGrid
+        id="proposedMarkets"
        ref={gridRef}
        className="w-full h-full"
        domLayout="autoHeight"
        columnDefs={columnDefs}
        rowData={filteredData}
        defaultColDef={defaultColDef}
-        onGridReady={handleOnGridReady}
        suppressLoadingOverlay
        suppressNoRowsOverlay
        onFilterChanged={onFilterChanged}
@@ -129,6 +129,7 @@ export const useColumnDefs = () => {
          'terms.enactmentDatetime'
        >) => (value ? getDateTimeFormat().format(new Date(value)) : '-'),
        filter: DateRangeFilter,
+        flex: 1,
      },
    ];
  }, [VEGA_TOKEN_URL, requiredMajorityPercentage]);
@@ -136,7 +137,6 @@ export const useColumnDefs = () => {
    return {
      sortable: true,
      cellClass: cellCss,
-      flex: 1,
      resizable: true,
      filter: true,
      filterParams: { buttons: ['reset'] },
@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;
@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;
@@ -34,8 +34,9 @@ export const WithdrawalsTable = (
  const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
  return (
    <AgGrid
+      id="withdrawals"
      overlayNoRowsTemplate={t('No withdrawals')}
-      defaultColDef={{ flex: 1, resizable: true }}
+      defaultColDef={{ resizable: true }}
      style={{ width: '100%', height: '100%' }}
      components={{
        RecipientCell,
@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;
Author	SHA1	Message	Date
Matthew Russell	0dbd96ef1f	feat: make storing grid sizes opt in	2023-05-04 18:52:44 -07:00
maciek	7030b3c9cf	Merge remote-tracking branch 'origin/develop' into feat/3393-persist-table-column-sizes	2023-05-04 16:22:10 +02:00
maciek	3cca711eea	feat: persist table columns - add unit test	2023-05-04 16:21:41 +02:00
maciek	fd69a4915b	feat: persist table columns - fix lint errors	2023-05-04 13:26:04 +02:00
maciek	72a2a1be99	feat: persist table columns - resolve conflicts	2023-05-04 13:14:26 +02:00
maciek	97d923c94d	feat: persist table columns - hook refactor to have better flow	2023-05-04 13:01:44 +02:00
maciek	2b6e7bcfab	Merge remote-tracking branch 'origin/develop' into feat/3393-persist-table-column-sizes	2023-05-04 10:20:37 +02:00
maciek	e4139f6d36	feat: persist table columns - fix failing int test	2023-05-04 10:20:14 +02:00
maciek	4033ed960e	feat: persist table columns - fix failing unit test	2023-05-03 18:50:18 +02:00
maciek	e23dd57ec5	feat: persist table columns - adjust confs of tables	2023-05-03 18:14:30 +02:00
maciek	acdf209cef	Merge remote-tracking branch 'origin/develop' into feat/3393-persist-table-column-sizes	2023-05-03 17:47:17 +02:00
maciek	e0d1412562	feat: persist table columns - enable for markets	2023-05-03 17:46:53 +02:00
maciek	395d05b4b8	Merge remote-tracking branch 'origin/develop' into feat/3393-persist-table-column-sizes	2023-05-03 14:39:39 +02:00
maciek	f2ad04e126	feat: persist table columns - enable in all other tables	2023-05-03 14:39:18 +02:00
maciek	ddaebea67d	feat: persist table columns - fix ts errors	2023-05-03 13:42:58 +02:00
maciek	e89e37e5b6	feat: persist table columns - resolve conflicts	2023-05-03 13:25:15 +02:00
maciek	bfcd66248c	feat: persist table columns - first responsive solution	2023-05-03 12:53:32 +02:00
maciek	f5f214aaff	Merge remote-tracking branch 'origin/develop' into feat/3393-persist-table-column-sizes	2023-05-02 13:42:42 +02:00
maciek	44658b00d5	feat: persist table columns - further works	2023-05-02 13:42:26 +02:00
maciek	32a70a69a3	feat: persist table columns - initial commit	2023-04-28 17:31:03 +02:00