Use ECP sendData API in CleverDeal operations page

AppExamples/CleverDeal.React/README.md

@@ -32,8 +32,14 @@ HTTPS=true yarn start
 
 ## Query params
 
-- `ecpOrigin`: URL of the target pod to be loaded in ECP (supported values are `corporate.symphony.com` [default] and `st3.symphony.com`)
+- `ecpOrigin`: URL of the target pod to be loaded in ECP (supported values are `corporate.symphony.com` [default], `st3.symphony.com` or `preview.symphony.com`)
 - `partnerId`: loads ECP with a given partnerId, useful if your environment has partnership configurations (use partnerId=3 to allow Symphony to be loaded on localhost)
 - `sdkPath`: used to target a specific version of ECP (supported values are `/embed/sdk.js` [default] and `/apps/embed/{tag}/sdk.js`)
-
 
+### Run against ECP (SFE-Lite) running locally
+
+```sh
+HTTPS=true yarn start
+```
+
+- go to https://localhost:3000/?ecpOrigin=local-dev.symphony.com:9090&sdkPath=/client-bff/sdk.js

AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDashboard.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   INITIAL_TRADE_EXCEPTIONS,
   TRADE_EXCEPTION_REQUEST_INTENT,
@@ -17,11 +17,12 @@ interface TradeExceptionDashboardProps {
 export const TradeExceptionDashboard = (
   props: TradeExceptionDashboardProps
 ) => {
+  const { ecpOrigin } = props;
   const [tradeExceptions, setTradeExceptions] = useState<TradeException[]>([
     ...INITIAL_TRADE_EXCEPTIONS,
   ]);
   const tradeExceptionsLatest = useRef<TradeException[]>(tradeExceptions);
-
+  const dataListenersRef = useRef<string[]>([]);
   const [selectedException, setSelectedException] = useState<TradeException>();
 
   const updateTradeException = (newTradeException: TradeException) => {
@@ -35,17 +36,49 @@ export const TradeExceptionDashboard = (
     newTradeExceptions[tradeExceptionIndex] = newTradeException;
 
     setTradeExceptions(newTradeExceptions);
-    setSelectedException(newTradeException);
+    setSelectedException((currentSelection) => {
+      if (!currentSelection || currentSelection.streamId?.[ecpOrigin] === newTradeException.streamId?.[ecpOrigin]) {
+        return newTradeException
+      }
+      return currentSelection;
+    });
   };
 
   useEffect(() => {
     tradeExceptionsLatest.current = tradeExceptions;
+    tradeExceptions.forEach((tradeException: TradeException) => {
+      const streamId = tradeException.streamId?.[ecpOrigin];
+      if (streamId && !dataListenersRef.current.includes(streamId)) {
+        dataListenersRef.current = [...dataListenersRef.current, streamId];
+        (window as any).symphony.listen({
+          type: 'DataNotifications',
+          params: {
+            type: TRADE_EXCEPTION_REQUEST_INTENT,
+            streamId
+          },
+          callback: onReceivedData
+        });
+      }
+    })
   }, [tradeExceptions]);
 
+  const sendData = (tradeException: TradeException) => {
+    const streamId = tradeException.streamId?.[ecpOrigin];
+    (window as any).symphony.sendData({
+      type: TRADE_EXCEPTION_REQUEST_INTENT,
+      content: tradeException,
+    }, {streamId});
+  };
+
+  const onReceivedData = useCallback(({content}: any) => {
+    updateTradeException(content);
+  }, [selectedException]);
+
   useEffect(() => {
     (window as any).symphony.registerInterop((intent: any, context: any) => {
       if (intent === TRADE_EXCEPTION_REQUEST_INTENT) {
         updateTradeException(context.tradeException);
+        sendData(context.tradeException);
       }
     });
   }, []);
@@ -56,13 +89,13 @@ export const TradeExceptionDashboard = (
         <div className="content-header">
           <FakeTopMenu />
         </div>
-
+        
         <div className="table-container">
           <TradeExceptionTable
             selectedException={selectedException}
             onRowSelect={setSelectedException}
             tradeExceptions={tradeExceptions}
-            ecpOrigin={props.ecpOrigin}
+            ecpOrigin={ecpOrigin}
           />
         </div>
       </div>
@@ -71,8 +104,9 @@ export const TradeExceptionDashboard = (
         <div className="details-container">
           <TradeExceptionDetails
             tradeException={selectedException}
-            ecpOrigin={props.ecpOrigin}
+            ecpOrigin={ecpOrigin}
             updateTradeExceptionHandler={updateTradeException}
+            sendData={sendData}
           />
         </div>
       )}

AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDetails/TradeExceptionDetails.tsx

@@ -27,12 +27,14 @@ interface TraceExceptionDetailsProps {
   tradeException: TradeException;
   ecpOrigin: string;
   updateTradeExceptionHandler: (newTradeException: TradeException) => void;
+  sendData: (tradeException: TradeException) => void;
 }
 
 const TradeExceptionDetails = ({
   updateTradeExceptionHandler,
   tradeException,
   ecpOrigin,
+  sendData
 }: TraceExceptionDetailsProps) => {
   const [loadedStreamId, setLoadedStreamId] = useState<string>();
   const [isStreamReady, setIsStreamReady] = useState<boolean>(false);
@@ -145,6 +147,7 @@ const TradeExceptionDetails = ({
       .then((response: EcpApiResponse) => {
         if (response.messages) {
           updateTradeExceptionHandler(newTradeException);
+          sendData(newTradeException);
         }
       });
   };

AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionTable/TradeExceptionTable.tsx

@@ -36,9 +36,9 @@ const TradeExceptionTable = ({
       </tr>
     </thead>
     <tbody>
-      {tradeExceptions.map((tradeException) => (
+      {tradeExceptions.map((tradeException, index: number) => (
         <TradeExceptionRow
-          key={tradeException.entry1.executingParty}
+          key={`${tradeException.entry1.executingParty}-${index}`}
           isActive={tradeException === selectedException}
           tradeException={tradeException}
           onClick={