feat: callback added to demo, add a server, and remove vite dependency (#11)

Co-authored-by: Alexandre Girard <[email protected]>

Author: teallarson

README.md

@@ -36,6 +36,8 @@ The built files will be in the `dist` directory.
 
 ## Usage
 
+### Authentication
+
 To use this library, you will first need to fetch an Airbyte Embedded token. You should do this in your server, though if you are simply testing this locally, you can use:
 
 ```bash
@@ -50,20 +52,45 @@ curl --location '$AIRBYTE_BASE_URL/api/public/v1/embedded/widget' \
 
 `AIRBYTE_BASE_URL`: where your Airbyte instance is deployed
 `CUSTOMER_WORKSPACE_ID`: the workspace you have associated with this customer
-`EMBEDDING_ORIGIN` here refers to where you are adding this widget to. It will be used to generate an `allowedOrigin` parameter for the webapp to open communications with the widget. If you are running the widget locally using our demo app, the allowed origin should be `https://localhost:3003`, for example.
+`EMBEDDING_ORIGIN` here refers to where you are adding this widget to. It will be used to generate an `allowedOrigin` parameter for the webapp to open communications with the widget.
 
 You can also, optionally, send an `externalUserId` in your request and we will attach it to the jwt encoded within the Airbyte Embedded token for provenance purposes.
 
 Embedded tokens are short-lived (15-minutes) and only allow an end user to create and edit Airbyte source configurations within the workspace you have created for them.
 
-These values should be passed to where you initializze the widget like so:
+### Event Callbacks
+
+The widget also accepts an `onEvent` function as an argument. This function, if provided, will be executed when a user completes the integration setup or update flow. These events have the following format:
+
+```typescript
+// successful events:
+{
+  type: "end_user_action_result";
+  message: "partial_user_config_created" | "partial_user_config_updated";
+  data: PartialUserConfigRead; // an object containing all data related to the user's configuration, including an actorId identifying the source created/updated
+}
+
+// errored events:
+{
+  type: "end_user_action_result";
+  message: "partial_user_config_update_error" | "partial_user_config_create_error";
+  error: Error; // an error object, including a message property
+}
+```
+
+This allows you to trigger operations based upon different types of results.
+
+### Configuration
+
+These values should be passed to where you initialize the widget like so:
 
 ```typescript
 import { EmbeddedWidget } from "airbyte-embedded-widget";
 
 // Initialize the widget
 const widget = new EmbeddedWidget({
   token: res.token,
+  onEvent: yourEventFunction,
 });
 
 // Mount the widget
@@ -74,38 +101,10 @@ widget.mount("#widget-container");
 
 The demo application in the `/demo` directory shows a complete example of integrating the widget. It includes:
 
-- HTTPS setup with Vite
 - Environment variable configuration
 - Basic styling and layout
 - API token handling
 
-To configure the demo, create a `.env` file in the `/demo` directory:
-
-```env
-VITE_AB_EMBEDDED_TOKEN=""
-```
-
-You can fetch an Airbyte Embedded token using the curl request example above.
-
-You can then run the demo app using `pnpm dev` and access a very simple example UI at `https://localhost:3003` in your browser.
-
-## Development
-
-To develop with the widget running against a locally running version of the Airbyte webapp, you can run
-
-```bash
-cd demo
-pnpm dev:local
-```
-
-and add the following to a .env file within `demo`:
-
-```env
-VITE_AB_EMBEDDED_TOKEN="your_embedded_token"
-AB_WEBAPP_URL="your_locally_running_webapp_url"
-VITE_AB_ADMIN_TOKEN="your_instance_admin_auth_token" # optional, allows for developing with a longer lived token
-```
-
 ## Publishing
 
 This repository is configured to publish to npmjs.org whenever:

demo/.env.test

@@ -18,42 +18,39 @@ This is a demo application showcasing the usage of the Airbyte Embedded Widget.
 pnpm install
 ```
 
-2. Fetch embedded token
-
-To use this library, you will first need to fetch an Airbyte Embedded token. You should do this in your server, though if you are simply testing this locally, you can use:
+3. Create a `.env` file in the `/demo` directory:
 
-```
-curl --location '$AIRBYTE_BASE_URL/api/public/v1/embedded/widget' \
---header 'Content-Type: application/json' \
---header 'Accept: text/plain' \
---data '{
-  "workspaceId": "$CUSTOMER_WORKSPACE_ID",
-  "allowedOrigin": "$EMBEDDING_ORIGIN"
-}'
+```env
+CLIENT_ID=
+CLIENT_SECRET=
+ORGANIZATION_ID=
+WORKSPACE_ID=
+ALLOWED_ORIGIN=
+BASE_URL=
 ```
 
-`AIRBYTE_BASE_URL`: where your Airbyte instance is deployed
-`CUSTOMER_WORKSPACE_ID`: the workspace you have associated with this customer
-`EMBEDDING_ORIGIN` here refers to where you are adding this widget to. It will be used to generate an `allowedOrigin` parameter for the webapp to open communications with the widget. If you are running the widget locally using our demo app, the allowed origin should be `https://localhost:3003`, for example.
+4. Start the backend server
 
-You can also, optionally, send an `externalUserId` in your request and we will attach it to the jwt encoded within the Airbyte Embedded token for provenance purposes.
+```bash
+env $(cat .env | xargs) node server.js
+```
 
-Embedded tokens are short-lived (15-minutes) and only allow an end user to create and edit Airbyte source configurations within the workspace you have created for them.
+The server will start at `https://localhost:3001`.
 
-3. Create a `.env` file in the `/demo` directory:
+This server will be responsible for fetching your Airbyte Embedded token and sending it to the Embedded Widget. It is also called from the frontend of the demo to log the event responses from Airbyte when a user sets up or updates an integration.
 
-```env
-VITE_AB_EMBEDDED_TOKEN=""
-```
+5. Start the frontend server:
 
-You can fetch an Airbyte Embedded token using the curl request example above.
+```bash
+npx serve .
+```
 
-4. Run the demo app using `pnpm dev` and access a very simple example UI at `https://localhost:3003` in your browser.
+You may need to accept the self-signed certificate warning in your browser.
 
 ## Project Structure
 
-- `index.html` - Main HTML file with widget container
-- `vite.config.ts` - Vite configuration with HTTPS setup
+- `/public/index.html` - Main HTML file with widget container
+- `server.js` - Backend server requesting the embedded URL
 - `.env` - Environment variables (not committed to git)
 
 ## Note

demo/README.md

@@ -2,57 +2,44 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Airbyte Widget Demo</title>
-    <style>
-      .loading {
-        display: none;
-        color: #fff;
-        margin-top: 1rem;
-      }
-      .error {
-        color: red;
-        margin-top: 1rem;
-      }
-      #app {
-        min-height: 200px;
-      }
-    </style>
+    <title>Airbyte Embedded Widget</title>
   </head>
   <body>
-    <h1>Airbyte Widget Demo</h1>
-    <div id="app">
-      <div id="loading" class="loading">Loading widget...</div>
-      <div id="error" class="error"></div>
-    </div>
-    <script type="module">
-      import { EmbeddedWidget } from "@airbyte-embedded/airbyte-embedded-widget";
+    <div id="widget-container"></div>
 
-      const loadingEl = document.getElementById("loading");
-      const errorEl = document.getElementById("error");
+    <script type="module">
+      import { EmbeddedWidget } from "https://cdn.jsdelivr.net/npm/@airbyte-embedded/[email protected]/+esm";
 
-      async function initializeWidget() {
+      window.addEventListener("load", async () => {
         try {
-          new EmbeddedWidget({
-            token: import.meta.env.VITE_AB_EMBEDDED_TOKEN,
-          });
+          const response = await fetch("http://localhost:3001/api/widget_token");
+          const data = await response.json();
 
-          // Hide loading state on success
-          loadingEl.style.display = "none";
-        } catch (error) {
-          console.error("Error initializing widget:", error);
-          // Hide loading state and show error
-          loadingEl.style.display = "none";
-          errorEl.innerHTML = `
-            <p>Failed to initialize widget:</p>
-            <pre style="white-space: pre-wrap;">${error.message}</pre>
-            <p>Check console for more details.</p>
-          `;
-        }
-      }
+          if (!data.token) {
+            throw new Error("Missing 'token' in response");
+          }
 
-      // Start initialization
-      initializeWidget();
+          const widgetResultCallback = (result) => {
+            // Send the result data to the embedded_response endpoint
+            fetch("http://localhost:3001/api/embedded_response", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(result),
+            })
+              .then((response) => console.log("Callback response:", response.status))
+              .catch((err) => console.error("Callback error:", err));
+          };
+
+          const widget = new EmbeddedWidget({
+            token: data.token,
+            onEvent: widgetResultCallback,
+          });
+        } catch (err) {
+          console.error("Failed to load widget:", err);
+        }
+      });
     </script>
   </body>
 </html>