Example raiseIntent

Author: raycashmore

frameworks/react/workspace-platform-starter/README.md

@@ -1,11 +1,12 @@
 # React Wrapper for Workspace Platform Starter
 
-This project provides a React wrapper for the [workspace-platform-starter](https://github.com/built-on-openfin/workspace-starter/tree/main/how-to/workspace-platform-starter) for teams 
-who prefer to use the build tooling available in the React ecosystem such as hot reloading.
+This project provides a React wrapper for the [workspace-platform-starter](https://github.com/built-on-openfin/workspace-starter/tree/main/how-to/workspace-platform-starter) for teams who prefer to use the build tooling available in the React ecosystem for a familiar development experience.
 
-The workspace platform starter source files are for demonstration purposes and to help get started building your own project. Once the source is added to your project, consider it your 
-source code to manage for your production build. Once initial setup is complete, you should review the features you need and turn off many of the modules in the manifest.fin.json, and 
-remove many of the app endpoints listed in "appProvider" / "endpointIds".
+To use this project, the source files are manually copied into the project from the [workspace-platform-starter](https://github.com/built-on-openfin/workspace-starter/tree/main/how-to/workspace-platform-starter) project. A simple React-based provider demonstrates how to bootstrap a platform.
+
+This can then form the basis of your own OpenFin platform. The source within the /openfin folder becomes your source code to customize as you need to.
+
+Once setup, see the next steps section below.
 
 ## Prerequsites
 
@@ -21,20 +22,20 @@ Clone the main workspace-starter repo:
 git clone https://github.com/built-on-openfin/workspace-starter.git --depth=1
 ```
 
-Manually copy the following folders from the **how-to/workspace-platform-starter** directory:
+Manually copy the following folders from the **how-to/workspace-platform-starter** directory into the openfin folder:
 
 ```
-client/src/framework 
-client/src/modules
-public/common
+client/src/framework -> openfin/framework
+client/src/modules -> openfin/modules
+public/common -> openfin/common
 ```
 
-And paste them into the **/openfin** folder in this project so that you have:
+The **/openfin** folder in this project should then look like:
 
 ```
-/openfin/common
 /openfin/framework
 /openfin/modules
+/openfin/common
 ```
 
 ### Develop
@@ -62,5 +63,12 @@ npm run preview
 ```
 Launch [fin://localhost:8080/manifest.fin.json](fin://localhost:8080/manifest.fin.json)
 
+## Next steps
 
+- Remove or disable modules you don't need in public/manifest.fin.json
+- If necessary, remove modules from the build step in rollup.config.mjs
+- Remove the example app endpoints listed in "appProvider" / "endpointIds" in manifest.fin.json
+- Define your apps in /public/apps.json
+- Customize your theme in the themeProvider section of the manifest.fin.json
+- Follow the [how-to](https://github.com/built-on-openfin/workspace-starter/tree/main/how-to/workspace-platform-starter/docs) documentation to further customize your platform
 

frameworks/react/workspace-platform-starter/package.json

@@ -1,7 +1,7 @@
 {
   "name": "workspace-platform-starter",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "prestart": "npm run build:openfin",

frameworks/react/workspace-platform-starter/public/apps.json

@@ -7,7 +7,8 @@
     "manifest": {
       "name": "view-1",
       "url": "http://localhost:8080/view1",
-      "autoShow": false
+      "autoShow": false,
+      "fdc3InteropApi": "2.0"
     },
     "manifestType": "inline-view",
     "icons": [{ "src": "http://localhost:8080/favicon.png" }],
@@ -23,12 +24,21 @@
     "manifest": {
       "name": "view-2",
       "url": "http://localhost:8080/view2",
-      "autoShow": false
+      "autoShow": false,
+      "fdc3InteropApi": "2.0"
     },
     "manifestType": "inline-view",
     "icons": [{ "src": "http://localhost:8080/favicon.png" }],
     "contactEmail": "[email protected]",
     "supportEmail": "[email protected]",
-    "publisher": "OpenFin"
+    "publisher": "OpenFin",
+    "intents": [
+      {
+        "name": "ViewQuote",
+        "displayName": "View Quote",
+        "contexts": ["custom.instrument"],
+        "customConfig": {}
+      }
+    ]
   }
 ]

frameworks/react/workspace-platform-starter/src/hooks/useRaiseIntent.tsx

@@ -0,0 +1,12 @@
+import { type Context } from '@finos/fdc3';
+import { useCallback } from 'react';
+
+export function useRaiseIntent() {
+	return useCallback((intentName: string, context: Context) => {
+		if (window.fdc3) {
+			return window.fdc3.raiseIntent(intentName, context);
+		} else {
+			console.log('fdc3 not found');
+		}
+	}, []);
+}

frameworks/react/workspace-platform-starter/src/index.css

@@ -39,6 +39,11 @@ h1 {
 	line-height: 1.1;
 }
 
+.flex-col {
+	display: flex;
+	flex-direction: column;
+}
+
 button {
 	border-radius: 8px;
 	border: 1px solid transparent;

frameworks/react/workspace-platform-starter/src/views/view1.tsx

@@ -1,3 +1,25 @@
+import { useRaiseIntent } from '../hooks/useRaiseIntent';
+
 export function View1() {
-	return <div>View 1</div>;
+	const raiseIntent = useRaiseIntent();
+
+	const handleViewContact = () => {
+		raiseIntent('ViewContact', { type: 'fdc3.contact' })
+	}
+
+	const handleViewQuote = () => {
+		raiseIntent('ViewQuote', { type: 'custom.instrument' })
+	}
+
+
+	return (
+		<div className="flex-col">
+			<button type="button" onClick={handleViewContact}>
+				View Contact
+			</button>
+			<button type="button" onClick={handleViewQuote}>
+				View Quote
+			</button>
+		</div>
+	);
 }