Channel Selector screen added

packages/client/src/channel-selector/DefaultDesktopAgentChannelSelector.ts

@@ -1,15 +1,7 @@
 import { Messaging } from "da-proxy";
-import { ChannelSelector, ChannelSelectorDetails, CSSPositioning, ChannelSelectionChoiceRequest } from "fdc3-common";
+import { ChannelSelector, ChannelSelectorDetails, CSSPositioning, ChannelSelectionChoiceAgentRequest } from "fdc3-common";
 import { Channel } from "@finos/fdc3";
-
-const DEFAULT_SELECTOR_CONTAINER_CSS: CSSPositioning = {
-    position: "fixed",
-    zIndex: "1000",
-    right: "0",
-    bottom: "10%",
-    width: "150px",
-    height: "200px"
-}
+import { DEFAULT_CONTAINER_CSS } from "../intent-resolution/DefaultDesktopAgentIntentResolver";
 
 const DEFAULT_ICON_CSS: CSSPositioning = {
     position: "fixed",
@@ -93,6 +85,7 @@ export class DefaultDesktopAgentChannelSelector implements ChannelSelector {
         return this.details.selector?.uri
             + "?currentId=" + encodeURIComponent(JSON.stringify(this.currentId))
             + "&availableChannels=" + encodeURIComponent(JSON.stringify(this.serializeChannels()))
+            + "&source=" + encodeURIComponent(JSON.stringify(this.m.getSource()))
     }
 
     serializeChannels(): any {
@@ -110,7 +103,7 @@ export class DefaultDesktopAgentChannelSelector implements ChannelSelector {
         this.container = document.createElement("div")
         const ifrm = document.createElement("iframe")
 
-        this.theme(this.container, this.details.selector?.css ?? DEFAULT_SELECTOR_CONTAINER_CSS)
+        this.theme(this.container, this.details.selector?.css ?? DEFAULT_CONTAINER_CSS)
         this.themeFrame(ifrm)
 
         ifrm.setAttribute("src", this.buildUrl())
@@ -126,7 +119,7 @@ export class DefaultDesktopAgentChannelSelector implements ChannelSelector {
     async chooseChannel(): Promise<void> {
         this.openFrame()
 
-        const choice = await this.m.waitFor<ChannelSelectionChoiceRequest>(m => m.type == 'channelSelectionChoice')
+        const choice = await this.m.waitFor<ChannelSelectionChoiceAgentRequest>(m => m.type == 'channelSelectionChoice')
 
         this.removeFrame()
 

packages/client/src/intent-resolution/DefaultDesktopAgentIntentResolver.ts

@@ -2,7 +2,7 @@ import { AppIntent, IntentResult } from "@finos/fdc3";
 import { Messaging } from "da-proxy";
 import { IntentResolver, SingleAppIntent, IntentResolutionChoiceAgentResponse, IntentResolverDetails, CSSPositioning } from "fdc3-common";
 
-const DEFAULT_CONTAINER_CSS: CSSPositioning = {
+export const DEFAULT_CONTAINER_CSS: CSSPositioning = {
     position: "fixed",
     zIndex: "1000",
     left: "10%",

packages/demo/src/client/da/DemoServerContext.ts

@@ -158,7 +158,7 @@ export class DemoServerContext implements ServerContext {
                 }
             },
             selector: {
-                url: window.location.origin + "/static/da/channel-selector.html"
+                uri: window.location.origin + "/static/da/channel-selector.html"
             }
 
         }

packages/demo/src/client/ui/channel-selector.ts

@@ -0,0 +1,88 @@
+import { AppIdentifier } from "@finos/fdc3";
+import { io } from "socket.io-client"
+import { FDC3_APP_EVENT } from "../../message-types";
+import { ChannelSelectionChoiceAgentRequest } from "fdc3-common";
+import { v4 as uuid } from 'uuid'
+
+function getQueryVariable(variable: string): string {
+    var query = window.location.search.substring(1);
+    var vars = query.split("&");
+    for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split("=");
+        if (pair[0] == variable) {
+            return pair[1];
+        }
+    }
+
+    return ""
+}
+
+function getAvailableChannels(): any[] {
+    const intentDetails = getQueryVariable("availableChannels")
+    const decoded = decodeURIComponent(intentDetails)
+    const object: any[] = JSON.parse(decoded)
+    return object
+}
+
+function getCurrentChannel(): string {
+    const source = getQueryVariable("currentId")
+    const decoded = decodeURIComponent(source)
+    const object: string = JSON.parse(decoded)
+    return object
+}
+
+function getSource(): AppIdentifier {
+    const source = getQueryVariable("source")
+    const decoded = decodeURIComponent(source)
+    const object: AppIdentifier = JSON.parse(decoded)
+    return object
+}
+
+const socket = io()
+
+socket.on("connect", async () => {
+
+    const currentChannelId = getCurrentChannel()
+    const channels = getAvailableChannels()
+    const source = getSource()
+
+    const list = document.getElementById("channel-list")!!
+
+    function sendChosenChannel(channelId: string, cancel: boolean) {
+        const out: ChannelSelectionChoiceAgentRequest = {
+            type: "channelSelectionChoice",
+            payload: {
+                cancel,
+                channelId
+            },
+            meta: {
+                requestUuid: uuid(),
+                timestamp: new Date(),
+                source
+            },
+        }
+
+        socket.emit(FDC3_APP_EVENT, out, source)
+    }
+
+    const debug = document.createElement("p")
+    debug.textContent = JSON.stringify(source)
+    document.body.appendChild(debug)
+
+    channels.forEach(channel => {
+
+        const li = document.createElement("li")
+        li.style.backgroundColor = channel.displayMetadata.color
+        const a = document.createElement("a")
+        const description = document.createElement("em")
+        description.textContent = channel.displayMetadata.name
+        a.textContent = channel.id
+
+        li.appendChild(a)
+        li.appendChild(description)
+        list.appendChild(li)
+        a.setAttribute("href", "#")
+        a.onclick = () => sendChosenChannel(channel.id, false)
+    })
+
+})

packages/demo/src/server/main.ts

@@ -65,6 +65,11 @@ io.on('connection', (socket: Socket) => {
       myInstance = Array.from(instances.values()).find(cw => cw.apps.get(from.instanceId))
     }
 
+    if ((myInstance == null) && (data.type == 'channelSelectionChoice')) {
+      // message from app's channelSelector
+      myInstance = Array.from(instances.values()).find(cw => cw.apps.get(from.instanceId))
+    }
+
     if (myInstance != undefined) {
       myInstance!!.server.emit(FDC3_APP_EVENT, data, from)
     }

packages/demo/static/da/channel-selector.html

@@ -3,7 +3,7 @@
 <head>
     <title>Desktop Agent Intent Resolver</title>
     <meta charset="UTF-8" />
-    <script type="module" src="/src/client/da/channel-selector.ts"></script>
+    <script type="module" src="/src/client/ui/channel-selector.ts"></script>
 </head>
 
 <body style="background-color: white;">

packages/demo/static/da/intent-resolver.html

@@ -3,7 +3,7 @@
 <head>
     <title>Desktop Agent Intent Resolver</title>
     <meta charset="UTF-8" />
-    <script type="module" src="/src/client/da/intent-resolver.ts"></script>
+    <script type="module" src="/src/client/ui/intent-resolver.ts"></script>
 </head>
 
 <body style="background-color: white;">

packages/fdc3-common/src/index.ts

@@ -184,8 +184,9 @@ export type IntentResolutionChoiceAgentResponse = {
 export type IntentResolutionChoiceAgentRequest = IntentResolutionChoiceAgentResponse
 
 
-export type ChannelSelectionChoiceRequest = {
+export type ChannelSelectionChoiceAgentRequest = {
     type: 'channelSelectionChoice',
+    meta: PrivateChannelOnAddContextListenerAgentRequestMeta,
     payload: {
         channelId: string,
         cancelled: boolean,