feat(#2273): orders and fills on trading page to be market specific (#2395)

* feat(#2273): make orders and fills tabs market specific in trade grid

* feat(#2273): fix order navigation and show orders for this market only checkbox

* fix(#2273): fills container should not require market

* feat(#2273): add marketId as hook dependency

* fix: use data-testid in trading orders

* fix(#2273): default to false

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

@@ -141,10 +141,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
       id: orderId,
       status: Schema.OrderStatus.STATUS_ACTIVE,
     });
-    cy.get(`[data-testid=order-status-${orderId}]`).should(
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Active');
-      'have.text',
-      'Active'
-    );
   });
   it('must see an expired order', () => {
     // 7002-SORD-042
@@ -152,10 +149,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
       id: orderId,
       status: Schema.OrderStatus.STATUS_EXPIRED,
     });
-    cy.get(`[data-testid=order-status-${orderId}]`).should(
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Expired');
-      'have.text',
-      'Expired'
-    );
   });
 
   it('must see a cancelled order', () => {
@@ -165,10 +159,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
       id: orderId,
       status: Schema.OrderStatus.STATUS_CANCELLED,
     });
-    cy.get(`[data-testid=order-status-${orderId}]`).should(
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Cancelled');
-      'have.text',
-      'Cancelled'
-    );
   });
 
   it('must see a stopped order', () => {
@@ -178,10 +169,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
       id: orderId,
       status: Schema.OrderStatus.STATUS_STOPPED,
     });
-    cy.get(`[data-testid=order-status-${orderId}]`).should(
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Stopped');
-      'have.text',
-      'Stopped'
-    );
   });
 
   it('must see a partially filled order', () => {
@@ -192,11 +180,11 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
       size: '5',
       remaining: '1',
     });
-    cy.get(`[data-testid=order-status-${orderId}]`).should(
+    cy.getByTestId(`order-status-${orderId}`).should(
       'have.text',
       'PartiallyFilled'
     );
-    cy.get(`[data-testid=order-status-${orderId}]`)
+    cy.getByTestId(`order-status-${orderId}`)
       .parent()
       .siblings(`[col-id=${orderRemaining}]`)
       .should('have.text', '4/5');
@@ -209,10 +197,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
       id: orderId,
       status: Schema.OrderStatus.STATUS_FILLED,
     });
-    cy.get(`[data-testid=order-status-${orderId}]`).should(
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Filled');
-      'have.text',
-      'Filled'
-    );
   });
 
   it('must see a rejected order', () => {
@@ -222,7 +207,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
       status: Schema.OrderStatus.STATUS_REJECTED,
       rejectionReason: Schema.OrderRejectionReason.ORDER_ERROR_INTERNAL_ERROR,
     });
-    cy.get(`[data-testid=order-status-${orderId}]`).should(
+    cy.getByTestId(`order-status-${orderId}`).should(
       'have.text',
       'Rejected: Internal error'
     );
@@ -235,9 +220,6 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
       id: orderId,
       status: Schema.OrderStatus.STATUS_PARKED,
     });
-    cy.get(`[data-testid=order-status-${orderId}]`).should(
+    cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Parked');
-      'have.text',
-      'Parked'
-    );
   });
 });

apps/trading/client-pages/market/trade-grid.tsx

@@ -71,7 +71,9 @@ const MainGrid = ({
 }: {
   marketId: string;
   onSelect?: (marketId: string) => void;
-}) => (
+}) => {
+  const [showMarketOnly, setShowMarketOnly] = useState(false);
+  return (
     <ResizableGrid vertical>
       <ResizableGridPanel minSize={75} priority={LayoutPriority.High}>
         <ResizableGrid proportionalLayout={false} minSize={200}>
@@ -147,12 +149,32 @@ const MainGrid = ({
             </Tab>
             <Tab id="orders" name={t('Orders')}>
               <VegaWalletContainer>
-              <TradingViews.Orders />
+                <label className="flex align-right whitespace-nowrap overflow-hidden text-ellipsis m-1 text-xs">
+                  <input
+                    className="mr-1"
+                    type="checkbox"
+                    checked={showMarketOnly}
+                    onChange={() => setShowMarketOnly(!showMarketOnly)}
+                  />
+                  {t('Show orders for this market only')}
+                </label>
+                <TradingViews.Orders
+                  marketId={showMarketOnly ? marketId : ''}
+                />
               </VegaWalletContainer>
             </Tab>
             <Tab id="fills" name={t('Fills')}>
               <VegaWalletContainer>
-              <TradingViews.Fills />
+                <label className="flex align-right whitespace-nowrap overflow-hidden text-ellipsis m-1 text-xs">
+                  <input
+                    className="mr-1"
+                    type="checkbox"
+                    checked={showMarketOnly}
+                    onChange={() => setShowMarketOnly(!showMarketOnly)}
+                  />
+                  {t('Show fills for this market only')}
+                </label>
+                <TradingViews.Fills marketId={showMarketOnly ? marketId : ''} />
               </VegaWalletContainer>
             </Tab>
             <Tab id="accounts" name={t('Collateral')}>
@@ -165,6 +187,7 @@ const MainGrid = ({
       </ResizableGridPanel>
     </ResizableGrid>
   );
+};
 const MainGridWrapped = memo(MainGrid);
 
 export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {

libs/candles-chart/src/lib/candles-chart.tsx

@@ -61,7 +61,9 @@ export const CandlesChartContainer = ({
     <div className="h-full flex flex-col">
       <div className="px-4 py-2 flex flex-row flex-wrap gap-4">
         <DropdownMenu>
-          <DropdownMenuTrigger>{t('Interval')}</DropdownMenuTrigger>
+          <DropdownMenuTrigger>
+            {t(`Interval: ${intervalLabels[interval]}`)}
+          </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuRadioGroup
               value={interval}

libs/fills/src/lib/fills-container.tsx

@@ -3,7 +3,7 @@ import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { FillsManager } from './fills-manager';
 
-export const FillsContainer = () => {
+export const FillsContainer = ({ marketId }: { marketId?: string }) => {
   const { pubKey } = useVegaWallet();
 
   if (!pubKey) {
@@ -14,5 +14,5 @@ export const FillsContainer = () => {
     );
   }
 
-  return <FillsManager partyId={pubKey} />;
+  return <FillsManager partyId={pubKey} marketId={marketId} />;
 };

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

@@ -7,13 +7,15 @@ import { useFillsList } from './use-fills-list';
 
 interface FillsManagerProps {
   partyId: string;
+  marketId?: string;
 }
 
-export const FillsManager = ({ partyId }: FillsManagerProps) => {
+export const FillsManager = ({ partyId, marketId }: FillsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const scrolledToTop = useRef(true);
   const { data, error, loading, addNewRows, getRows } = useFillsList({
     partyId,
+    marketId,
     gridRef,
     scrolledToTop,
   });

libs/fills/src/lib/use-fills-list.ts

@@ -10,11 +10,17 @@ import { fillsWithMarketProvider } from './fills-data-provider';
 
 interface Props {
   partyId: string;
+  marketId?: string;
   gridRef: RefObject<AgGridReact>;
   scrolledToTop: RefObject<boolean>;
 }
 
-export const useFillsList = ({ partyId, gridRef, scrolledToTop }: Props) => {
+export const useFillsList = ({
+  partyId,
+  marketId,
+  gridRef,
+  scrolledToTop,
+}: Props) => {
   const dataRef = useRef<(TradeEdge | null)[] | null>(null);
   const totalCountRef = useRef<number | undefined>(undefined);
   const newRows = useRef(0);
@@ -72,7 +78,7 @@ export const useFillsList = ({ partyId, gridRef, scrolledToTop }: Props) => {
     []
   );
 
-  const variables = useMemo(() => ({ partyId }), [partyId]);
+  const variables = useMemo(() => ({ partyId, marketId }), [partyId, marketId]);
 
   const { data, error, loading, load, totalCount } = useDataProvider<
     (TradeEdge | null)[],

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

@@ -67,6 +67,7 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
           tooltipComponent: TooltipCellComponent,
           sortable: true,
         }}
+        enableCellTextSelection={true}
         rowData={data}
       >
         <AgGridColumn

libs/orders/src/lib/components/order-data-provider/Orders.graphql

@@ -62,8 +62,8 @@ fragment OrderUpdateFields on OrderUpdate {
   }
 }
 
-subscription OrdersUpdate($partyId: ID!) {
+subscription OrdersUpdate($partyId: ID!, $marketId: ID) {
-  orders(partyId: $partyId) {
+  orders(partyId: $partyId, marketId: $marketId) {
     ...OrderUpdateFields
   }
 }

libs/orders/src/lib/components/order-data-provider/__generated__/Orders.ts

@@ -18,6 +18,7 @@ export type OrderUpdateFieldsFragment = { __typename?: 'OrderUpdate', id: string
 
 export type OrdersUpdateSubscriptionVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
+  marketId?: Types.InputMaybe<Types.Scalars['ID']>;
 }>;
 
 
@@ -121,8 +122,8 @@ export type OrdersQueryHookResult = ReturnType<typeof useOrdersQuery>;
 export type OrdersLazyQueryHookResult = ReturnType<typeof useOrdersLazyQuery>;
 export type OrdersQueryResult = Apollo.QueryResult<OrdersQuery, OrdersQueryVariables>;
 export const OrdersUpdateDocument = gql`
-    subscription OrdersUpdate($partyId: ID!) {
+    subscription OrdersUpdate($partyId: ID!, $marketId: ID) {
-  orders(partyId: $partyId) {
+  orders(partyId: $partyId, marketId: $marketId) {
     ...OrderUpdateFields
   }
 }
@@ -141,6 +142,7 @@ export const OrdersUpdateDocument = gql`
  * const { data, loading, error } = useOrdersUpdateSubscription({
  *   variables: {
  *      partyId: // value for 'partyId'
+ *      marketId: // value for 'marketId'
  *   },
  * });
  */

libs/orders/src/lib/components/order-list-container.tsx

@@ -3,12 +3,12 @@ import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { OrderListManager } from './order-list-manager';
 
-export const OrderListContainer = () => {
+export const OrderListContainer = ({ marketId }: { marketId?: string }) => {
   const { pubKey } = useVegaWallet();
 
   if (!pubKey) {
     return <Splash>{t('Please connect Vega wallet')}</Splash>;
   }
 
-  return <OrderListManager partyId={pubKey} />;
+  return <OrderListManager partyId={pubKey} marketId={marketId} />;
 };

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -15,9 +15,13 @@ import type { Filter, Sort } from './use-order-list-data';
 
 export interface OrderListManagerProps {
   partyId: string;
+  marketId?: string;
 }
 
-export const OrderListManager = ({ partyId }: OrderListManagerProps) => {
+export const OrderListManager = ({
+  partyId,
+  marketId,
+}: OrderListManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const scrolledToTop = useRef(true);
   const [sort, setSort] = useState<Sort[] | undefined>();
@@ -25,6 +29,7 @@ export const OrderListManager = ({ partyId }: OrderListManagerProps) => {
 
   const { data, error, loading, addNewRows, getRows } = useOrderListData({
     partyId,
+    marketId,
     sort,
     filter,
     gridRef,
@@ -74,6 +79,7 @@ export const OrderListManager = ({ partyId }: OrderListManagerProps) => {
         onBodyScroll={onBodyScroll}
         onFilterChanged={onFilterChanged}
         onSortChanged={onSortChange}
+        marketId={marketId}
       />
       <div className="pointer-events-none absolute inset-0 top-5">
         <AsyncRenderer

libs/orders/src/lib/components/order-list-manager/use-order-list-data.ts

@@ -10,7 +10,10 @@ import type {
   OrderEdge,
   Order,
 } from '../order-data-provider/order-data-provider';
-import type { OrdersQueryVariables } from '../order-data-provider/__generated__/Orders';
+import type {
+  OrdersQueryVariables,
+  OrdersUpdateSubscriptionVariables,
+} from '../order-data-provider/__generated__/Orders';
 import type * as Types from '@vegaprotocol/types';
 export interface Sort {
   colId: string;
@@ -32,6 +35,7 @@ export interface Filter {
 }
 interface Props {
   partyId: string;
+  marketId?: string;
   filter?: Filter;
   sort?: Sort[];
   gridRef: RefObject<AgGridReact>;
@@ -40,6 +44,7 @@ interface Props {
 
 export const useOrderListData = ({
   partyId,
+  marketId,
   sort,
   filter,
   gridRef,
@@ -49,9 +54,11 @@ export const useOrderListData = ({
   const totalCountRef = useRef<number | undefined>(undefined);
   const newRows = useRef(0);
 
-  const variables = useMemo<OrdersQueryVariables>(
+  const variables = useMemo<
-    () => ({ partyId, dateRange: filter?.updatedAt?.value }),
+    OrdersQueryVariables & OrdersUpdateSubscriptionVariables
-    [partyId, filter]
+  >(
+    () => ({ partyId, dateRange: filter?.updatedAt?.value, marketId }),
+    [partyId, marketId, filter]
   );
 
   const addNewRows = useCallback(() => {
@@ -85,11 +92,14 @@ export const useOrderListData = ({
         (dataRef.current?.length && data?.length) ||
         (!dataRef.current?.length && !data?.length)
       );
-      dataRef.current = data;
+      dataRef.current =
+        !!marketId && !!data
+          ? data.filter((d) => d?.node.market?.id === marketId)
+          : data;
       gridRef.current?.api?.refreshInfiniteCache();
       return avoidRerender;
     },
-    [gridRef, scrolledToTop]
+    [gridRef, scrolledToTop, marketId]
   );
 
   const insert = useCallback(
@@ -100,11 +110,14 @@ export const useOrderListData = ({
       data: (OrderEdge | null)[] | null;
       totalCount?: number;
     }) => {
-      dataRef.current = data;
+      dataRef.current =
+        !!marketId && !!data
+          ? data.filter((d) => d?.node.market?.id === marketId)
+          : data;
       totalCountRef.current = totalCount;
       return true;
     },
-    []
+    [marketId]
   );
 
   const { data, error, loading, load, totalCount } = useDataProvider({

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -36,7 +36,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import type { Order } from '../order-data-provider';
 import type { OrderEventFieldsFragment } from '../../order-hooks';
 
-type OrderListProps = TypedDataAgGrid<Order>;
+type OrderListProps = TypedDataAgGrid<Order> & { marketId?: string };
 
 export const TransactionComplete = ({
   transaction,
@@ -84,7 +84,7 @@ export const OrderList = forwardRef<AgGridReact, OrderListProps>(
         <OrderListTable
           {...props}
           cancelAll={() => {
-            orderCancel.cancel({});
+            orderCancel.cancel({ marketId: props.marketId });
           }}
           cancel={(order: Order) => {
             if (!order.market) return;
@@ -174,9 +174,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
             'market.tradableInstrument.instrument.code'
           >) =>
             data?.market?.id ? (
-              <Link href={`/markets/${data?.market?.id}`} target="_blank">
+              <Link href={`/#/markets/${data?.market?.id}`}>{value}</Link>
-                {value}
-              </Link>
             ) : (
               value
             )