From 4fbd2e5eba9e25c4e51b7e3309005ceed83bc2ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Thu, 5 Jan 2023 14:11:58 +0100
Subject: [PATCH] feat(#2323): don't allow cancel all if there are no
 cancellable orders (#2472)

---
 .../src/integration/trading-orders.cy.ts      |  6 +--
 .../components/order-list/order-list.spec.tsx |  1 +
 .../order-list/order-list.stories.tsx         |  2 +
 .../lib/components/order-list/order-list.tsx  | 26 ++++++----
 libs/orders/src/lib/order-hooks/index.ts      |  1 +
 .../lib/order-hooks/use-has-active-order.ts   | 47 +++++++++++++++++++
 6 files changed, 70 insertions(+), 13 deletions(-)
 create mode 100644 libs/orders/src/lib/order-hooks/use-has-active-order.ts

diff --git a/apps/trading-e2e/src/integration/trading-orders.cy.ts b/apps/trading-e2e/src/integration/trading-orders.cy.ts
index 507ffee21..164fbf786 100644
--- a/apps/trading-e2e/src/integration/trading-orders.cy.ts
+++ b/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();
   });
diff --git a/libs/orders/src/lib/components/order-list/order-list.spec.tsx b/libs/orders/src/lib/components/order-list/order-list.spec.tsx
index a0d94cc71..dd64c2659 100644
--- a/libs/orders/src/lib/components/order-list/order-list.spec.tsx
+++ b/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(),
diff --git a/libs/orders/src/lib/components/order-list/order-list.stories.tsx b/libs/orders/src/lib/components/order-list/order-list.stories.tsx
index f12f9a9b0..5f92de0e3 100644
--- a/libs/orders/src/lib/components/order-list/order-list.stories.tsx
+++ b/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}
diff --git a/libs/orders/src/lib/components/order-list/order-list.tsx b/libs/orders/src/lib/components/order-list/order-list.tsx
index 3a2e6a13a..6a4a9d7eb 100644
--- a/libs/orders/src/lib/components/order-list/order-list.tsx
+++ b/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,15 +369,17 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
           cellRenderer={({ data, node }: VegaICellRendererParams<Order>) => {
             if (node?.rowPinned) {
               return (
-                <div className="flex gap-2 items-center h-full justify-end">
-                  <Button
-                    size="xs"
-                    data-testid="cancelAll"
-                    onClick={() => cancelAll()}
-                  >
-                    {t('Cancel all')}
-                  </Button>
-                </div>
+                hasActiveOrder && (
+                  <div className="flex gap-2 items-center h-full justify-end">
+                    <Button
+                      size="xs"
+                      data-testid="cancelAll"
+                      onClick={() => cancelAll()}
+                    >
+                      {t('Cancel all')}
+                    </Button>
+                  </div>
+                )
               );
             }
             if (isOrderAmendable(data)) {
diff --git a/libs/orders/src/lib/order-hooks/index.ts b/libs/orders/src/lib/order-hooks/index.ts
index 9fbcf508c..3213dd1d9 100644
--- a/libs/orders/src/lib/order-hooks/index.ts
+++ b/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';
diff --git a/libs/orders/src/lib/order-hooks/use-has-active-order.ts b/libs/orders/src/lib/order-hooks/use-has-active-order.ts
new file mode 100644
index 000000000..c3d1d4a09
--- /dev/null
+++ b/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;
+};