Intent Raising in tabs, server shutdowns.

directory/appd.json

@@ -7,7 +7,7 @@
             "description": "App will connect to the desktop agent and broadcast on the red channel when you hit the button",
             "type": "web",
             "details": {
-                "url": "http://localhost:8090/static/app1/index.html"
+                "url": "http://localhost:8095/static/app1/index.html"
             },
             "hostManifests": {},
             "version": "1.0.0",

src/app/channel-selector.tsx

@@ -47,7 +47,7 @@ window.addEventListener("load", () => {
       type: "iframeHello",
       payload: {
         initialCSS: DEFAULT_COLLAPSED_CSS,
-        implementationDetails: "Demo Channel Selector v1.0",
+        implementationDetails: "Sail Channel Selector v1.0",
       },
     } as any as IframeHello,
     "*",

src/app/intent-resolver.tsx

@@ -0,0 +1,112 @@
+import { BrowserTypes, AppIdentifier } from "@kite9/fdc3"
+import { createRoot } from "react-dom/client"
+import { ResolverPanel } from "../client/resolver/resolver"
+
+type IframeResolveAction = BrowserTypes.IframeResolveAction
+type IframeResolvePayload = BrowserTypes.IframeResolvePayload
+type IframeHello = BrowserTypes.IframeHello
+type IframeRestyle = BrowserTypes.IframeRestyle
+
+const DEFAULT_COLLAPSED_CSS = {
+  position: "fixed",
+  "z-index": 1000,
+  right: "0",
+  bottom: "0",
+  width: "0",
+  height: "0",
+}
+
+const DEFAULT_EXPANDED_CSS = {
+  position: "fixed",
+  "z-index": 1000,
+  left: "0",
+  top: "0",
+  right: "0",
+  bottom: "0",
+}
+window.addEventListener("load", () => {
+  const parent = window.parent
+  const container = document.getElementById("intentResolver")!!
+  const root = createRoot(container!)
+
+  const mc = new MessageChannel()
+  const myPort = mc.port1
+  myPort.start()
+
+  // ISSUE: 1302
+  parent.postMessage(
+    {
+      type: "iframeHello",
+      payload: {
+        initialCSS: DEFAULT_COLLAPSED_CSS,
+        implementationDetails: "Sail Intent Resolver v1.0",
+      },
+    } as any as IframeHello,
+    "*",
+    [mc.port2],
+  )
+
+  function renderIntentResolver(data: IframeResolvePayload | null) {
+    if (data) {
+      myPort.postMessage({
+        type: "iframeRestyle",
+        payload: { updatedCSS: DEFAULT_EXPANDED_CSS },
+      } as IframeRestyle)
+      root.render(
+        <ResolverPanel
+          context={data.context}
+          appIntents={data.appIntents}
+          closeAction={() => {
+            renderIntentResolver(null)
+          }}
+          chooseAction={(app, intent) => {
+            callback(intent, app)
+            renderIntentResolver(null)
+          }}
+        />,
+      )
+    } else {
+      myPort.postMessage({
+        type: "iframeRestyle",
+        payload: { updatedCSS: DEFAULT_COLLAPSED_CSS },
+      } as IframeRestyle)
+    }
+  }
+
+  function callback(intent: string | null, app: AppIdentifier | null) {
+    myPort.postMessage({
+      type: "iframeRestyle",
+      payload: { updatedCSS: DEFAULT_COLLAPSED_CSS },
+    } as IframeRestyle)
+
+    if (intent && app) {
+      myPort.postMessage({
+        type: "iframeResolveAction",
+        payload: {
+          action: "click",
+          appIdentifier: app,
+          intent: intent,
+        },
+      } as IframeResolveAction)
+    } else {
+      myPort.postMessage({
+        type: "iframeResolveAction",
+        payload: {
+          action: "cancel",
+        },
+      } as IframeResolveAction)
+    }
+  }
+
+  myPort.addEventListener("message", (e) => {
+    if (e.data.type == "iframeHandshake") {
+      renderIntentResolver(null)
+    } else if (e.data.type == "iframeResolve") {
+      renderIntentResolver(e.data.payload)
+    }
+  })
+
+  document.getElementById("cancel")!!.addEventListener("click", () => {
+    callback(null, null)
+  })
+})

src/client/frame/frame.tsx

@@ -1,14 +1,15 @@
-import { Bin, Controls, NewPanel } from "../controls/controls";
-import { Logo, Settings } from "../top/top";
-import { Tabs } from "../tabs/tabs";
-import * as styles from "./styles.module.css";
-import { ClientState, getClientState } from "../state/ClientState";
-import { Component } from "react";
-import { AppDPanel } from "../appd/appd";
-import { Content, Grids } from "../grid/grid";
-import { GridsStateImpl, GridsState } from "../grid/gridstate";
-import { ConfigPanel } from "../config/config";
-import { ResolverPanel } from "../resolver/resolver";
+import { Bin, Controls, NewPanel } from "../controls/controls"
+import { Logo, Settings } from "../top/top"
+import { Tabs } from "../tabs/tabs"
+import * as styles from "./styles.module.css"
+import { ClientState, getClientState } from "../state/ClientState"
+import { Component } from "react"
+import { AppDPanel } from "../appd/appd"
+import { Content, Grids } from "../grid/grid"
+import { GridsStateImpl, GridsState } from "../grid/gridstate"
+import { ConfigPanel } from "../config/config"
+import { ResolverPanel } from "../resolver/resolver"
+import { getServerState } from "../state/ServerState"
 
 enum Popup {
   NONE,
@@ -18,31 +19,31 @@ enum Popup {
 }
 
 interface FrameProps {
-  cs: ClientState;
+  cs: ClientState
 }
 
 interface FrameState {
-  popup: Popup;
+  popup: Popup
 }
 
-const CONTAINER_ID = "container-id";
+const CONTAINER_ID = "container-id"
 
 export class Frame extends Component<FrameProps, FrameState> {
   private gs: GridsState = new GridsStateImpl(
     CONTAINER_ID,
     (ap, id) => <Content panel={ap} cs={this.props.cs} id={id} />,
     getClientState(),
-  );
+  )
 
   constructor(p: FrameProps) {
-    super(p);
+    super(p)
     this.state = {
       popup: Popup.NONE,
-    };
+    }
   }
 
   render() {
-    const activeTab = this.props.cs.getActiveTab();
+    const activeTab = this.props.cs.getActiveTab()
 
     return (
       <div className={styles.outer}>
@@ -87,15 +88,17 @@ export class Frame extends Component<FrameProps, FrameState> {
         {this.props.cs.getIntentResolution() ? (
           <ResolverPanel
             key="resolver"
-            cs={this.props.cs}
             appIntents={this.props.cs.getIntentResolution()!!.appIntents}
             context={this.props.cs.getIntentResolution()!!.context}
             closeAction={() => {
-              this.props.cs.setIntentResolution(null);
+              this.props.cs.setIntentResolution(null)
             }}
+            chooseAction={(chosenApp, chosenIntent) =>
+              getServerState().intentChosen(chosenApp, chosenIntent)
+            }
           />
         ) : null}
       </div>
-    );
+    )
   }
 }