Merge pull request AdaptiveConsulting#2286 from AdaptiveConsulting/bu…

…gfix/5569-confirmation-pill

Bugfix: Create RFQ confirmation pill in openfin and Web

packages/client/README.md

@@ -98,6 +98,22 @@ As a shortcut, to run the server and client in one command, use
 npm run openfin:start:<app>
 ```
 
+To debug OpenFin windows more easily (using Chromium devtools), check the relevant manifest for the appropriate port in e.g.
+
+```
+    "arguments": "--remote-debugging-port=9092"
+```
+
+navigate to [chrome://inspect/#devices](chrome://inspect/#devices) in a Chrome tab
+
+add the address in the dialog you get when you click "Configure ..."
+
+```
+http://localhost:<debug-port-from-above>
+```
+
+and any running OpenFin windows should be displayed, with Inspect links etc.
+
 ### NLP in the OpenFin Launcher and Workspace (below)
 
 The OpenFin Launcher and Workspace Home UI have a search command line interface powered by [DialogFlow](https://cloud.google.com/dialogflow), where you can enter commands like

packages/client/package.json

@@ -57,7 +57,7 @@
     "workspace:dev": "cross-env TARGET=workspace vite --config vite-ws.config.ts",
     "workspace:build": "cross-env TARGET=workspace vite build --config vite-ws.config.ts",
     "workspace:serve": "cross-env TARGET=workspace vite serve --config vite-ws.config.ts",
-    "workspace:run": "cross-env-shell \"wait-on -l http://localhost:2017/config/workspace.json && openfin -l http://localhost:2017/config/workspace.json\"",
+    "workspace:run": "cross-env-shell \"wait-on -l http://localhost:2017/config/workspace.json && openfin -l -c http://localhost:2017/config/workspace.json\"",
     "workspace:start": "concurrently \"npm:openfin:dev\" \"npm:workspace:dev\" \"npm:workspace:run\"",
     "finsemble:dev": "cross-env TARGET=finsemble vite",
     "finsemble:build": "cross-env TARGET=finsemble vite build",

packages/client/src/client/App.tsx

@@ -6,10 +6,6 @@ import { checkTradingGatewayCompatibility } from "@/services/tradingGatewayCompa
 
 import { ENVIRONMENT } from "./constants"
 import { getMainApp } from "./main"
-import {
-  registerCreditAcceptedNotifications,
-  registerFxNotifications,
-} from "./notifications"
 import { GlobalScrollbarStyle, GlobalStyle, ThemeProvider } from "./theme"
 
 const MainApp = getMainApp()
@@ -21,9 +17,6 @@ export async function initApp() {
 
   checkTradingGatewayCompatibility()
 
-  registerFxNotifications()
-  registerCreditAcceptedNotifications()
-
   const container = document.getElementById("root")
   const root = createRoot(container as HTMLElement)
 

packages/client/src/client/App/Credit/CreditRfqForm/CreditRfqFormCore.tsx

@@ -2,6 +2,10 @@ import { Subscribe } from "@react-rxjs/core"
 import { useEffect } from "react"
 import styled from "styled-components"
 
+import {
+  registerCreditRfqCreatedNotifications,
+  unregisterCreditRfqCreatedNotifications,
+} from "@/client/notifications"
 import { WithChildren } from "@/client/utils/utilityTypes"
 import { registerSimulatedDealerResponses } from "@/services/credit/creditRfqResponses"
 
@@ -60,9 +64,13 @@ const CreditRfqFooter = styled.footer`
 const CreditRfqFormCore = ({ children }: WithChildren) => {
   useEffect(() => {
     const subscription = registerSimulatedDealerResponses()
-
-    return () => subscription.unsubscribe()
+    registerCreditRfqCreatedNotifications()
+    return () => {
+      subscription.unsubscribe()
+      unregisterCreditRfqCreatedNotifications()
+    }
   }, [])
+
   return (
     <CreditRfqFormCoreWrapper>
       <Subscribe fallback={children}>

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqsCore.tsx

@@ -3,16 +3,14 @@ import { useEffect } from "react"
 import styled from "styled-components"
 
 import {
-  registerCreditQuoteNotifications,
-  unregisterCreditQuoteNotifications,
+  registerCreditQuoteAcceptedNotifications,
+  registerCreditQuoteReceivedNotifications,
+  unregisterCreditQuoteAcceptedNotifications,
+  unregisterCreditQuoteReceivedNotifications,
 } from "@/client/notifications"
 import { WithChildren } from "@/client/utils/utilityTypes"
 
 import { CreditRfqCardGrid } from "./CreditRfqCards"
-import {
-  CreditRfqAcceptedConfirmation,
-  CreditRfqCreatedConfirmation,
-} from "./CreditRfqConfirmation"
 import { CreditRfqsHeader } from "./CreditRfqsHeader"
 
 const CreditRfqsCoreWrapper = styled.div`
@@ -23,18 +21,22 @@ const CreditRfqsCoreWrapper = styled.div`
 `
 const CreditRfqsCore = ({ children }: WithChildren) => {
   useEffect(() => {
-    registerCreditQuoteNotifications()
+    registerCreditQuoteReceivedNotifications()
+    // the most logical place for accepted notifications,
+    // for all cases except the NLP-based nested RFQ ticket
+    registerCreditQuoteAcceptedNotifications()
 
-    return unregisterCreditQuoteNotifications
+    return () => {
+      unregisterCreditQuoteReceivedNotifications()
+      unregisterCreditQuoteAcceptedNotifications()
+    }
   }, [])
 
   return (
     <Subscribe fallback={children}>
       <CreditRfqsCoreWrapper>
         <CreditRfqsHeader />
         <CreditRfqCardGrid />
-        <CreditRfqCreatedConfirmation />
-        <CreditRfqAcceptedConfirmation />
       </CreditRfqsCoreWrapper>
     </Subscribe>
   )

packages/client/src/client/App/LiveRates/LiveRatesCore.tsx

@@ -1,18 +1,32 @@
 import { Subscribe } from "@react-rxjs/core"
+import { useEffect } from "react"
 import { merge } from "rxjs"
 
+import {
+  registerFxTradeNotifications,
+  unregisterFxTradeNotifications,
+} from "@/client/notifications"
 import { WithChildren } from "@/client/utils/utilityTypes"
 
 import { MainHeader, mainHeader$ } from "./MainHeader"
 import { Tiles, tiles$ } from "./Tiles"
 
 export const liveRates$ = merge(tiles$, mainHeader$)
 
-const LiveRates = ({ children }: WithChildren) => (
-  <Subscribe source$={liveRates$} fallback={children}>
-    <MainHeader />
-    <Tiles />
-  </Subscribe>
-)
+const LiveRates = ({ children }: WithChildren) => {
+  useEffect(() => {
+    registerFxTradeNotifications()
+    return () => {
+      unregisterFxTradeNotifications()
+    }
+  }, [])
+
+  return (
+    <Subscribe source$={liveRates$} fallback={children}>
+      <MainHeader />
+      <Tiles />
+    </Subscribe>
+  )
+}
 
 export default LiveRates

packages/client/src/client/App/Trades/CoreCreditTrades.tsx

@@ -1,3 +1,9 @@
+import { useEffect } from "react"
+
+import {
+  registerCreditQuoteAcceptedNotifications,
+  unregisterCreditQuoteAcceptedNotifications,
+} from "@/client/notifications"
 import { creditTrades$ } from "@/services/trades"
 
 import { TradesGrid } from "./TradesGrid"
@@ -6,6 +12,13 @@ import { creditColDef, creditColFields } from "./TradesState/colConfig"
 
 const CreditTrades = () => {
   const highlightedRow = useCreditTradeRowHighlight()
+  useEffect(() => {
+    registerCreditQuoteAcceptedNotifications()
+
+    return () => {
+      unregisterCreditQuoteAcceptedNotifications()
+    }
+  }, [])
   return (
     <TradesGrid
       caption="Reactive Trader Credit Trades Table"

packages/client/src/client/App/Trades/CoreFxTrades.tsx

@@ -1,13 +1,24 @@
 import { broadcast } from "@finos/fdc3"
-import { useCallback } from "react"
+import { useCallback, useEffect } from "react"
 
+import {
+  registerFxTradeNotifications,
+  unregisterFxTradeNotifications,
+} from "@/client/notifications"
 import { FxTrade, trades$ } from "@/services/trades"
 
 import { TradesGrid } from "./TradesGrid"
 import { useFxTradeRowHighlight } from "./TradesState"
 import { fxColDef, fxColFields } from "./TradesState/colConfig"
 
 const FxTrades = () => {
+  useEffect(() => {
+    registerFxTradeNotifications()
+    return () => {
+      unregisterFxTradeNotifications()
+    }
+  }, [])
+
   const highlightedRow = useFxTradeRowHighlight()
 
   const tryBroadcastContext = useCallback((trade: FxTrade) => {