feat(#2323): don't allow cancel all if there are no cancellable orders (#2472)

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

@@ -31,7 +31,7 @@ describe('orders list', { tags: '@smoke' }, () => {
     cy.visit('/#/markets/market-0');
     cy.getByTestId('Orders').click();
     cy.wait('@Orders').then(() => {
-      expect(subscriptionMocks.OrdersUpdate).to.be.calledOnce;
+      expect(subscriptionMocks.OrdersUpdate).to.be.calledTwice;
     });
     cy.wait('@Markets');
   });
@@ -129,7 +129,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
     cy.visit('/#/markets/market-0');
     cy.getByTestId('Orders').click();
     cy.wait('@Orders').then(() => {
-      expect(subscriptionMocks.OrdersUpdate).to.be.calledOnce;
+      expect(subscriptionMocks.OrdersUpdate).to.be.calledTwice;
     });
   });
   const orderId = '1234567890';
@@ -345,7 +345,7 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
     cy.visit('/#/markets/market-0');
     cy.getByTestId('Orders').click();
     cy.wait('@Orders').then(() => {
-      expect(subscriptionMocks.OrdersUpdate).to.be.calledOnce;
+      expect(subscriptionMocks.OrdersUpdate).to.be.calledTwice;
     });
     cy.mockVegaWalletTransaction();
   });

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

@@ -16,6 +16,7 @@ import {
 } from '../mocks/generate-orders';
 
 const defaultProps: OrderListTableProps = {
+  hasActiveOrder: true,
   rowData: [],
   setEditOrder: jest.fn(),
   cancel: jest.fn(),

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

@@ -17,6 +17,7 @@ const Template: Story = (args) => {
   return (
     <div style={{ height: 1000 }}>
       <OrderListTable
+        hasActiveOrder
         rowData={args.data}
         cancel={cancel}
         cancelAll={cancel}
@@ -46,6 +47,7 @@ const Template2: Story = (args) => {
     <>
       <div style={{ height: 1000 }}>
         <OrderListTable
+          hasActiveOrder
           rowData={args.data}
           cancel={cancel}
           cancelAll={cancel}

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

@@ -24,6 +24,7 @@ import BigNumber from 'bignumber.js';
 import { forwardRef, useState } from 'react';
 import type { TypedDataAgGrid } from '@vegaprotocol/ui-toolkit';
 import { useOrderCancel } from '../../order-hooks/use-order-cancel';
+import { useHasActiveOrder } from '../../order-hooks/use-has-active-order';
 import { useOrderEdit } from '../../order-hooks/use-order-edit';
 import { OrderFeedback } from '../order-feedback';
 import { OrderEditDialog } from './order-edit-dialog';
@@ -78,11 +79,13 @@ export const OrderList = forwardRef<AgGridReact, OrderListProps>(
     const [editOrder, setEditOrder] = useState<Order | null>(null);
     const orderCancel = useOrderCancel();
     const orderEdit = useOrderEdit(editOrder);
+    const hasActiveOrder = useHasActiveOrder(props.marketId);
 
     return (
       <>
         <OrderListTable
           {...props}
+          hasActiveOrder={hasActiveOrder}
           cancelAll={() => {
             orderCancel.cancel({
               marketId: props.marketId,
@@ -144,11 +147,12 @@ export const OrderList = forwardRef<AgGridReact, OrderListProps>(
 export type OrderListTableProps = OrderListProps & {
   cancel: (order: Order) => void;
   cancelAll: () => void;
+  hasActiveOrder: boolean;
   setEditOrder: (order: Order) => void;
 };
 
 export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
-  ({ cancel, cancelAll, setEditOrder, ...props }, ref) => {
+  ({ cancel, cancelAll, setEditOrder, hasActiveOrder, ...props }, ref) => {
     return (
       <AgGrid
         ref={ref}
@@ -365,6 +369,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
           cellRenderer={({ data, node }: VegaICellRendererParams<Order>) => {
             if (node?.rowPinned) {
               return (
+                hasActiveOrder && (
                   <div className="flex gap-2 items-center h-full justify-end">
                     <Button
                       size="xs"
@@ -374,6 +379,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
                       {t('Cancel all')}
                     </Button>
                   </div>
+                )
               );
             }
             if (isOrderAmendable(data)) {

libs/orders/src/lib/order-hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './__generated__/OrderEvent';
+export * from './use-has-active-order';
 export * from './use-order-cancel';
 export * from './use-order-submit';
 export * from './use-order-edit';

libs/orders/src/lib/order-hooks/use-has-active-order.ts

@@ -0,0 +1,47 @@
+import { useState, useEffect, useMemo } from 'react';
+import {
+  useOrdersUpdateSubscription,
+  useOrdersQuery,
+} from '../components/order-data-provider/__generated__/Orders';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import * as Schema from '@vegaprotocol/types';
+
+export const useHasActiveOrder = (marketId?: string) => {
+  const { pubKey } = useVegaWallet();
+  const skip = !pubKey;
+  const [hasActiveOrder, setHasActiveOrder] = useState(false);
+  const subscriptionVariables = useMemo(
+    () => ({
+      partyId: pubKey || '',
+      marketId,
+    }),
+    [pubKey, marketId]
+  );
+  const queryVariables = useMemo(
+    () => ({
+      ...subscriptionVariables,
+      pagination: { first: 1 },
+      filter: { status: [Schema.OrderStatus.STATUS_ACTIVE] },
+    }),
+    [subscriptionVariables]
+  );
+
+  const { refetch, data, loading } = useOrdersQuery({
+    variables: queryVariables,
+    fetchPolicy: 'no-cache',
+    skip,
+  });
+  useEffect(() => {
+    if (!loading && data) {
+      setHasActiveOrder(!!data.party?.ordersConnection?.edges?.length);
+    }
+  }, [loading, data]);
+
+  useOrdersUpdateSubscription({
+    variables: subscriptionVariables,
+    onData: () => refetch(),
+    skip,
+  });
+
+  return hasActiveOrder;
+};