Apps can work in panels or browser tabs

Author: robmoffat

directory/local-conformance-2_0.v2.json

@@ -21,6 +21,7 @@
     "@kite9/client": "2.2.0-beta.6",
     "@kite9/da-server": "2.2.0-beta.6",
     "@kite9/fdc3": "2.2.0-beta.6",
+    "@kite9/fdc3-common": "2.2.0-beta.6",
     "@types/react-dom": "^18.2.25",
     "@types/uuid": "^9.0.8",
     "@types/ws": "^8.5.10",

package-lock.json

@@ -5,12 +5,12 @@ import { FDC3_APP_EVENT, FDC3_DA_EVENT } from "../server/da/message-types"
 
 export function link(socket: Socket, channel: MessageChannel, source: InstanceID) {
     socket.on(FDC3_DA_EVENT, (data: any, to: InstanceID) => {
-        console.log(`DA Sent ${JSON.stringify(data)} from socket`)
+        //console.log(`DA Sent ${JSON.stringify(data)} from socket`)
         channel.port2.postMessage(data)
     })
 
     channel.port2.onmessage = function (event) {
-        console.log(`App Sent ${JSON.stringify(event.data)} from message port`)
+        //console.log(`App Sent ${JSON.stringify(event.data)} from message port`)
         socket.emit(FDC3_APP_EVENT, event.data, source)
     }
 }

package.json

@@ -1,9 +1,10 @@
 import { Component } from "react";
 import { Icon } from "../icon/icon";
-import { getServerState } from "../state/serverConnectivity";
+import { getServerState } from "../state/ServerState";
 import * as styles from "./styles.module.css";
 import { Popup, PopupButton } from "../popups/popup";
 import { DirectoryApp } from "@kite9/da-server";
+import { getAppState } from "../state/AppState";
 
 const DEFAULT_ICON = "/static/icons/control/choose-app.svg";
 
@@ -39,13 +40,13 @@ export class AppDPanel extends Component<AppPanelProps, AppPanelState> {
         //console.log("loaded - ready to display")
         this.setState({
           chosen: null,
-          apps,
+          apps: apps.filter((d) => onlyRelevantApps(d)),
         });
       });
   };
 
   setChosen(app: DirectoryApp) {
-    console.log("state changed " + app.appId);
+    //console.log("state changed " + app.appId);
     this.setState({
       apps: this.state.apps,
       chosen: app,
@@ -81,7 +82,7 @@ export class AppDPanel extends Component<AppPanelProps, AppPanelState> {
                   <ul>{app.categories?.map((c: any) => <li>{c}</li>)}</ul>
                   <div className={styles.appDScreenshots}>
                     {app.screenshots?.map((s: any) => (
-                      <img src={s.src} title={s.label} />
+                      <img key={s.src} src={s.src} title={s.label} />
                     ))}
                   </div>
                 </div>
@@ -91,11 +92,12 @@ export class AppDPanel extends Component<AppPanelProps, AppPanelState> {
         }
         buttons={[
           <PopupButton
+            key="open"
             text="open"
             disabled={this.state.chosen == null}
             onClick={async () => {
               if (this.state.chosen) {
-                getServerState().registerAppLaunch(this.state.chosen.appId);
+                getAppState().open(this.state.chosen);
                 this.props.closeAction();
               }
             }}
@@ -106,3 +108,10 @@ export class AppDPanel extends Component<AppPanelProps, AppPanelState> {
     );
   }
 }
+function onlyRelevantApps(d: DirectoryApp): boolean {
+  const sail = d.hostManifests?.sail;
+  const show = sail ? sail.searchable != false : true;
+  const type = d.type == "web";
+  const url = d.details?.url;
+  return show && type && url;
+}

src/app/app1.ts

@@ -2,6 +2,8 @@
     display: flex;
     flex-direction: row;
     gap: 1rem;
+    width: 60rem;
+    height: 30rem;
 }
 
 .appDApps {
@@ -21,6 +23,7 @@
     flex-basis: 7.5rem;
     flex-grow: 0;
     flex-shrink: 0;
+    max-height: 7.5rem;
     display: flex;
     flex-direction: column;
     justify-content: center;

src/app/util.ts

@@ -8,11 +8,7 @@ import { AppDPanel } from "../appd/appd";
 import { Content, Grids } from "../grid/grid";
 import { GridsStateImpl, GridsState } from "../grid/gridstate";
 import { ConfigPanel } from "../config/config";
-import {
-  EXAMPLE_APP_INTENTS,
-  EXAMPLE_CONTEXT,
-  ResolverPanel,
-} from "../resolver/resolver";
+import { ResolverPanel } from "../resolver/resolver";
 
 enum Popup {
   NONE,
@@ -57,15 +53,6 @@ export class Frame extends Component<FrameProps, FrameState> {
         <div className={styles.left}>
           <Tabs cs={this.props.cs} />
           <Controls>
-            <Resolver
-              onClick={() => {
-                this.props.cs.setIntentResolution({
-                  appIntents: EXAMPLE_APP_INTENTS,
-                  context: EXAMPLE_CONTEXT,
-                  requestId: "123",
-                });
-              }}
-            />
             <NewPanel onClick={() => this.setState({ popup: Popup.APPD })} />
             <Bin />
           </Controls>
@@ -88,6 +75,7 @@ export class Frame extends Component<FrameProps, FrameState> {
         ) : null}
         {this.state?.popup == Popup.SETTINGS ? (
           <ConfigPanel
+            key="config"
             cs={this.props.cs}
             closeAction={() =>
               this.setState({
@@ -98,6 +86,7 @@ export class Frame extends Component<FrameProps, FrameState> {
         ) : null}
         {this.props.cs.getIntentResolution() ? (
           <ResolverPanel
+            key="resolver"
             cs={this.props.cs}
             appIntents={this.props.cs.getIntentResolution()!!.appIntents}
             context={this.props.cs.getIntentResolution()!!.context}

src/client/appd/appd.tsx

@@ -3,17 +3,16 @@ import { AppPanel, ClientState } from "../state/clientState";
 import * as styles from "./styles.module.css";
 import "gridstack/dist/gridstack.css";
 import { GridsState } from "./gridstate";
+import { getAppState } from "../state/AppState";
 
 type GridsProps = { cs: ClientState; gs: GridsState; id: string };
 
 export class Grids extends Component<GridsProps> {
   componentDidMount(): void {
-    console.log("CDM");
     this.componentDidUpdate();
   }
 
   componentDidUpdate(): void {
-    console.log("CDU");
     this.props.gs.updatePanels();
   }
 
@@ -32,10 +31,20 @@ const AppFrame = ({ panel }: { panel: AppPanel }) => {
   return (
     <iframe
       src={panel.url}
-      id={"iframe_" + panel.id}
-      name={panel.id}
-      slot={"slot_" + panel.id}
+      id={"iframe_" + panel.panelId}
+      name={panel.panelId}
+      slot={"slot_" + panel.panelId}
       className={styles.iframe}
+      ref={(ref) => {
+        setTimeout(() => {
+          // this is a bit hacky but we need to track the window objects
+          // in the app state so we make sure we know who we're talking to
+          if (ref) {
+            const contentWindow = (ref as HTMLIFrameElement).contentWindow;
+            getAppState().registerAppWindow(contentWindow!!, panel.panelId);
+          }
+        }, 10);
+      }}
     />
   );
 };
@@ -50,12 +59,13 @@ const LockIcon = () => {
   );
 };
 
-const PopOutIcon = () => {
+const PopOutIcon = ({ action }: { action: () => void }) => {
   return (
     <img
       src="/static/icons/control/pop-out.svg"
       className={styles.contentTitleIcon}
       title="Pop Out"
+      onClick={() => action()}
     />
   );
 };
@@ -73,8 +83,8 @@ const CloseIcon = ({ action }: { action: () => void }) => {
 
 const AppSlot = ({ panel }: { panel: AppPanel }) => {
   return (
-    <div id={"app_" + panel.id}>
-      <slot name={"slot_" + panel.id} />
+    <div id={"app_" + panel.panelId}>
+      <slot name={"slot_" + panel.panelId} />
     </div>
   );
 };
@@ -92,12 +102,17 @@ export const Content = ({
     <div className={styles.content} id={id}>
       <div className={styles.contentInner}>
         <div className={styles.contentTitle}>
-          <CloseIcon action={() => cs.removePanel(panel.id)} />
+          <CloseIcon action={() => cs.removePanel(panel.panelId)} />
           <p className={styles.contentTitleText}>
             <span className={styles.contentTitleTextSpan}>{panel.title}</span>
           </p>
           <LockIcon />
-          <PopOutIcon />
+          <PopOutIcon
+            action={() => {
+              cs.removePanel(panel.panelId);
+              window.open(panel.url, "_blank");
+            }}
+          />
         </div>
         <div className={styles.contentBody}>
           {panel.url ? <AppSlot panel={panel} /> : <div />}