@cognite/dune 0.1.1 → 0.1.2

package/_templates/app/new/package.json.ejs.t

@@ -19,7 +19,7 @@ to: <%= name %>/package.json
   },
   "dependencies": {
     "@cognite/sdk": "^10.3.0",
-    "@cognite/dune": "^0.1.0",
+    "@cognite/dune": "^0.1.2",
     "@tanstack/react-query": "^5.90.10",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/dune",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Build and deploy React apps to Cognite Data Fusion",
   "keywords": [
     "cognite",
@@ -23,23 +23,26 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "development": "./src/index.ts",
+      "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./auth": {
-      "types": "./src/auth/index.ts",
+      "types": "./dist/auth/index.d.ts",
       "development": "./src/auth/index.ts",
+      "import": "./dist/auth/index.js",
       "default": "./dist/auth/index.js"
     },
     "./deploy": {
-      "types": "./src/deploy/index.ts",
+      "types": "./dist/deploy/index.d.ts",
       "development": "./src/deploy/index.ts",
+      "import": "./dist/deploy/index.js",
       "default": "./dist/deploy/index.js"
     },
     "./vite": {
-      "types": "./src/vite/index.ts",
-      "development": "./src/vite/index.ts",
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.js",
       "default": "./dist/vite/index.js"
     }
   },
@@ -49,6 +52,7 @@
   "files": [
     "bin",
     "dist",
+    "src",
     "_templates"
   ],
   "dependencies": {

package/src/auth/dune-auth-provider.tsx

@@ -0,0 +1,97 @@
+import { CogniteClient } from "@cognite/sdk";
+import type React from "react";
+import { createContext, useEffect } from "react";
+import { useState } from "react";
+import { EMPTY_SDK, handleCredentialsResponse, requestCredentials } from "./utils";
+
+export const DuneAuthProviderContext = createContext<{
+  sdk: CogniteClient;
+  isLoading: boolean;
+  error?: string;
+}>({
+  sdk: EMPTY_SDK,
+  isLoading: false,
+});
+
+export interface DuneAuthProviderProps {
+  children: React.ReactNode;
+  useIFrameAuthentication?: boolean;
+  useLocalConfiguration?: { org: string; project: string; baseUrl: string };
+  loadingComponent?: React.ReactNode;
+  errorComponent?: (error: string) => React.ReactNode;
+}
+
+export const DuneAuthProvider = ({
+  children,
+  loadingComponent = <div>Loading CDF authentication...</div>,
+  errorComponent = (error: string) => <div>Authentication error: {error}</div>,
+}: DuneAuthProviderProps) => {
+  return (
+    <FusionIframeAuthenticationInnerProvider
+      loadingComponent={loadingComponent}
+      errorComponent={errorComponent}
+    >
+      {children}
+    </FusionIframeAuthenticationInnerProvider>
+  );
+};
+
+export const FusionIframeAuthenticationInnerProvider = ({
+  children,
+  loadingComponent = <div>Loading CDF authentication...</div>,
+  errorComponent = (error: string) => <div>Authentication error: {error}</div>,
+}: DuneAuthProviderProps) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [sdk, setSdk] = useState<CogniteClient>(EMPTY_SDK);
+  const [error] = useState<string>();
+
+  // Within fusion: listen for messages from parent application (Fusion)
+  useEffect(() => {
+    requestCredentials();
+
+    const handleMessage = async (event: MessageEvent) => {
+      console.log("🔍 Handling message from Fusion");
+
+      const credentials = handleCredentialsResponse(event);
+
+      if (!credentials) {
+        return; // Ignore non-credential messages
+      }
+
+      // Process credentials (initial or refresh)
+      const sdk = new CogniteClient({
+        appId: "dune-app",
+        project: credentials.project,
+        baseUrl: credentials.baseUrl,
+        oidcTokenProvider: async () => {
+          return credentials.token;
+        },
+      });
+
+      await sdk.authenticate();
+
+      setSdk(sdk);
+      setIsLoading(false);
+    };
+
+    console.log("🔍 Adding message listener");
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+
+  console.log("🔍 CDFIframeAuthenticationInnerProvider", sdk, isLoading, error);
+
+  if (error && errorComponent) {
+    return <>{errorComponent(error)}</>;
+  }
+
+  if (isLoading && loadingComponent) {
+    return <>{loadingComponent}</>;
+  }
+
+  return (
+    <DuneAuthProviderContext.Provider value={{ sdk, isLoading, error }}>
+      {children}
+    </DuneAuthProviderContext.Provider>
+  );
+};

package/src/auth/index.ts

@@ -0,0 +1,11 @@
+// Auth exports for React applications
+export {
+  DuneAuthProvider,
+  DuneAuthProviderContext,
+} from "./dune-auth-provider";
+export { useDune } from "./use-dune";
+export { getToken, createCDFSDK, EMPTY_SDK } from "./utils";
+
+// Type exports
+export type { CDFConfig } from "./utils";
+export type { DuneAuthProviderProps } from "./dune-auth-provider";

package/src/auth/use-dune.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { DuneAuthProviderContext } from "./dune-auth-provider";
+
+export const useDune = () => {
+  const context = useContext(DuneAuthProviderContext);
+
+  if (!context) {
+    throw new Error("useDune must be used within a DuneAuthProvider");
+  }
+
+  return context;
+};

package/src/auth/utils.ts

@@ -0,0 +1,91 @@
+import { CogniteClient } from "@cognite/sdk";
+
+export const MESSAGE_TYPES = {
+  APP_HOST_READY: "APP_HOST_READY",
+  APP_READY: "APP_READY",
+  CREDENTIALS: "CREDENTIALS",
+  REQUEST_CREDENTIALS: "REQUEST_CREDENTIALS",
+} as const;
+
+export interface CDFConfig {
+  project: string;
+  baseUrl: string;
+  clientId: string;
+  clientSecret: string;
+  appId?: string;
+}
+
+export const getToken = async (clientId: string, clientSecret: string) => {
+  const header = `Basic ${btoa(`${clientId}:${clientSecret}`)}`;
+
+  const response = await fetch("https://auth.cognite.com/oauth2/token", {
+    method: "POST",
+    headers: {
+      Authorization: header,
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: new URLSearchParams({
+      grant_type: "client_credentials",
+    }),
+  });
+
+  const data = await response.json();
+  return data.access_token;
+};
+
+export const createCDFSDK = async (config: CDFConfig) => {
+  const { project, baseUrl, clientId, clientSecret, appId = "cdf-authentication-package" } = config;
+
+  if (!project || !baseUrl || !clientId || !clientSecret) {
+    throw new Error(
+      "Missing required configuration. Please provide: project, baseUrl, clientId, clientSecret"
+    );
+  }
+
+  const sdk = new CogniteClient({
+    appId,
+    project,
+    baseUrl,
+    oidcTokenProvider: async () => {
+      return await getToken(clientId, clientSecret);
+    },
+  });
+
+  await sdk.authenticate();
+  return sdk;
+};
+
+export const EMPTY_SDK = new CogniteClient({
+  appId: "cdf-authentication-package",
+  project: "",
+  oidcTokenProvider: async () => "",
+});
+
+interface Credentials {
+  project: string;
+  baseUrl: string;
+  token: string;
+}
+
+export const requestCredentials = () => {
+  console.log("🔑 Requesting credentials from parent...");
+  if (window.parent && window.parent !== window) {
+    window.parent.postMessage({ type: "REQUEST_CREDENTIALS" }, "*");
+  }
+};
+
+export const handleCredentialsResponse = (event: MessageEvent) => {
+  // Check if this is a credentials message (wrapped in type/credentials format)
+  if (event.data?.type === "PROVIDE_CREDENTIALS" && event.data?.credentials) {
+    const creds = event.data.credentials;
+    if (creds.token && creds.baseUrl && creds.project) {
+      console.log("🎉 useCredentials received credentials:", {
+        hasToken: !!creds.token,
+        tokenLength: creds.token?.length || 0,
+        project: creds.project,
+        baseUrl: creds.baseUrl,
+      });
+      return creds as Credentials;
+    }
+  }
+};

package/src/deploy/application-deployer.ts

@@ -0,0 +1,99 @@
+/**
+ * CDF Application Deployment
+ *
+ * Handles deployment of packaged applications to CDF.
+ */
+
+import fs from "node:fs";
+import type { CogniteClient } from "@cognite/sdk";
+
+export class CdfApplicationDeployer {
+  private client: CogniteClient;
+
+  /**
+   * @param {CogniteClient} client - Cognite SDK client
+   */
+  constructor(client: CogniteClient) {
+    this.client = client;
+  }
+
+  /**
+   * Upload application package to CDF Files API
+   * @param {string} appExternalId - Application external ID
+   * @param {string} name - Application name
+   * @param {string} description - Application description
+   * @param {string} versionTag - Version tag
+   * @param {string} zipFilename - Path to zip file
+   * @param {boolean} published - Whether the application should be published
+   */
+  async uploadToFilesApi(
+    appExternalId: string,
+    name: string,
+    description: string,
+    versionTag: string,
+    zipFilename: string,
+    published = false
+  ): Promise<void> {
+    console.log("📁 Creating file record...");
+
+    const fileContent = fs.readFileSync(zipFilename);
+    const metadata = {
+      published: String(published),
+      name: name,
+      description: description,
+      externalId: `${appExternalId}-${versionTag}`,
+      version: versionTag,
+    };
+
+    await this.client.files.upload(
+      {
+        name: `${appExternalId}-${versionTag}.zip`,
+        externalId: `${appExternalId}-${versionTag}`,
+        directory: "/dune-apps",
+        metadata: metadata,
+      },
+      fileContent,
+      true, // overwrite
+      true // waitUntilAcknowledged
+    );
+
+    console.log("✅ File record created");
+  }
+
+  /**
+   * Execute complete deployment to CDF
+   * @param {string} appExternalId - Application external ID
+   * @param {string} name - Application name
+   * @param {string} description - Application description
+   * @param {string} versionTag - Version tag
+   * @param {string} zipFilename - Path to zip file
+   * @param {boolean} published - Whether the application should be published
+   */
+  async deploy(
+    appExternalId: string,
+    name: string,
+    description: string,
+    versionTag: string,
+    zipFilename: string,
+    published = false
+  ): Promise<void> {
+    console.log("\n🚀 Deploying application to CDF...\n");
+
+    try {
+      // Upload to Files API
+      await this.uploadToFilesApi(
+        appExternalId,
+        name,
+        description,
+        versionTag,
+        zipFilename,
+        published
+      );
+
+      console.log("\n✅ Deployment successful!");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      throw new Error(`Deployment failed: ${message}`);
+    }
+  }
+}

package/src/deploy/application-packager.ts

@@ -0,0 +1,73 @@
+/**
+ * Application Packaging
+ *
+ * Handles packaging of build directories into deployment-ready zip files.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import archiver from "archiver";
+
+export class ApplicationPackager {
+  private distPath: string;
+
+  /**
+   * @param {string} distDirectory - Build directory to package (can be relative or absolute)
+   */
+  constructor(distDirectory = "dist") {
+    // If distDirectory is already an absolute path, use it as-is
+    // Otherwise, join it with the current working directory
+    this.distPath = path.isAbsolute(distDirectory)
+      ? distDirectory
+      : path.join(process.cwd(), distDirectory);
+  }
+
+  /**
+   * Validate that build directory exists
+   * @throws {Error} If build directory not found
+   */
+  validateBuildDirectory(): void {
+    if (!fs.existsSync(this.distPath)) {
+      throw new Error(`Build directory "${this.distPath}" not found. Run build first.`);
+    }
+  }
+
+  /**
+   * Create zip file from build directory
+   * @param {string} outputFilename - Output zip filename
+   * @param {boolean} verbose - Enable verbose logging
+   * @returns {Promise<string>} Path to created zip file
+   */
+  async createZip(outputFilename = "app.zip", verbose = false): Promise<string> {
+    this.validateBuildDirectory();
+
+    console.log("📦 Packaging application...");
+
+    return new Promise((resolve, reject) => {
+      const output = fs.createWriteStream(outputFilename);
+      const archive = archiver("zip", {
+        zlib: { level: 9 }, // Maximum compression
+      });
+
+      output.on("close", () => {
+        const sizeMB = (archive.pointer() / 1024 / 1024).toFixed(2);
+        console.log(`✅ App packaged: ${outputFilename} (${sizeMB} MB)`);
+        resolve(outputFilename);
+      });
+
+      archive.on("error", (err: Error) => {
+        reject(new Error(`Failed to create zip: ${err.message}`));
+      });
+
+      if (verbose) {
+        archive.on("entry", (entry: archiver.EntryData) => {
+          console.log(`  📄 ${entry.name}`);
+        });
+      }
+
+      archive.pipe(output);
+      archive.directory(this.distPath, false);
+      archive.finalize();
+    });
+  }
+}

package/src/deploy/deploy.ts

@@ -0,0 +1,25 @@
+import { CdfApplicationDeployer } from "./application-deployer";
+import { ApplicationPackager } from "./application-packager";
+import { getSdk } from "./get-sdk";
+import type { App, Deployment } from "./types";
+
+export const deploy = async (deployment: Deployment, app: App, folder: string) => {
+  // Step 1: Get an SDK instance
+  const sdk = await getSdk(deployment, folder);
+
+  // Step 2: Package application (from the dist subdirectory)
+  const distPath = `${folder}/dist`;
+  const packager = new ApplicationPackager(distPath);
+  const zipFilename = await packager.createZip("app.zip", true);
+
+  // Step 3: Deploy to CDF
+  const deployer = new CdfApplicationDeployer(sdk);
+  await deployer.deploy(
+    app.externalId,
+    app.name,
+    app.description,
+    app.versionTag,
+    zipFilename,
+    deployment.published
+  );
+};

package/src/deploy/get-sdk.ts

@@ -0,0 +1,17 @@
+import { CogniteClient } from "@cognite/sdk";
+import { getToken } from "./login";
+import type { Deployment } from "./types";
+
+export const getSdk = async (deployment: Deployment, folder: string) => {
+  const token = await getToken(deployment.deployClientId, deployment.deploySecretName);
+  const sdk = new CogniteClient({
+    appId: folder,
+    project: deployment.project,
+    baseUrl: deployment.baseUrl,
+    oidcTokenProvider: async () => {
+      return token;
+    },
+  });
+  await sdk.authenticate();
+  return sdk;
+};

package/src/deploy/index.ts

@@ -0,0 +1,9 @@
+// Deploy exports for CI/CD and programmatic deployment
+export { deploy } from "./deploy";
+export { CdfApplicationDeployer } from "./application-deployer";
+export { ApplicationPackager } from "./application-packager";
+export { getSdk } from "./get-sdk";
+export { getToken } from "./login";
+
+// Type exports
+export type { Deployment, App } from "./types";

package/src/deploy/login.ts

@@ -0,0 +1,69 @@
+/**
+ * Load secrets from DEPLOYMENT_SECRETS environment variable (JSON)
+ */
+const loadSecretsFromEnv = (): Record<string, string> => {
+  const secretsJson = process.env.DEPLOYMENT_SECRETS;
+  if (!secretsJson) {
+    return {};
+  }
+
+  try {
+    const secrets = JSON.parse(secretsJson);
+    // Convert GitHub secret names (UPPER_CASE) to deployment secret names (lower-case)
+    const normalizedSecrets: Record<string, string> = {};
+
+    for (const [key, value] of Object.entries(secrets)) {
+      if (typeof value === "string") {
+        // Convert UPPER_CASE to lower-case-with-dashes
+        const normalizedKey = key.toLowerCase().replace(/_/g, "-");
+        normalizedSecrets[normalizedKey] = value;
+      }
+    }
+
+    return normalizedSecrets;
+  } catch (error) {
+    console.error("Error parsing DEPLOYMENT_SECRETS:", error);
+    return {};
+  }
+};
+
+export const getToken = async (deployClientId: string, deploySecretName: string) => {
+  let deploySecret: string | undefined;
+
+  // First try DEPLOYMENT_SECRET (for matrix-based deployments)
+  if (process.env.DEPLOYMENT_SECRET) {
+    deploySecret = process.env.DEPLOYMENT_SECRET;
+  }
+
+  // Then try to get from DEPLOYMENT_SECRETS JSON
+  if (!deploySecret) {
+    const secrets = loadSecretsFromEnv();
+    deploySecret = secrets[deploySecretName];
+  }
+
+  // Fall back to direct environment variable for local development
+  if (!deploySecret) {
+    deploySecret = process.env[deploySecretName];
+  }
+
+  if (!deploySecret) {
+    throw new Error(`Deployment secret not found in environment: ${deploySecretName}`);
+  }
+
+  const header = `Basic ${btoa(`${deployClientId}:${deploySecret}`)}`;
+  const response = await fetch("https://auth.cognite.com/oauth2/token", {
+    method: "POST",
+    headers: {
+      Authorization: header,
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: new URLSearchParams({ grant_type: "client_credentials" }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to get token: ${response.status} ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  return data.access_token;
+};

package/src/deploy/types.ts

@@ -0,0 +1,15 @@
+export type Deployment = {
+  org: string;
+  project: string;
+  baseUrl: string;
+  deployClientId: string;
+  deploySecretName: string;
+  published: boolean;
+};
+
+export type App = {
+  externalId: string;
+  name: string;
+  description: string;
+  versionTag: string;
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+// Main entry point - re-exports auth for convenience
+export * from "./auth";

package/src/vite/fusion-open-plugin.ts

@@ -0,0 +1,51 @@
+import { exec } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+
+const openUrl = (url: string) => {
+  const start =
+    process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+  if (process.platform === "win32") {
+    exec(`start "" "${url}"`);
+  } else {
+    exec(`${start} "${url}"`);
+  }
+};
+
+interface ViteDevServer {
+  httpServer?: {
+    address: () => { port: number } | string | null;
+    on: (event: string, callback: () => void) => void;
+  } | null;
+}
+
+export const fusionOpenPlugin = () => {
+  return {
+    name: "fusion-open",
+    configureServer(server: ViteDevServer) {
+      server.httpServer?.on("listening", () => {
+        const address = server.httpServer?.address();
+        const port = address && typeof address === "object" ? address.port : 3000;
+
+        const appJsonPath = path.join(process.cwd(), "app.json");
+        if (fs.existsSync(appJsonPath)) {
+          try {
+            const appJson = JSON.parse(fs.readFileSync(appJsonPath, "utf-8"));
+            const firstDeployment = appJson.deployments?.[0];
+            const { org, project, baseUrl } = firstDeployment || {};
+
+            const parsedBaseUrl = baseUrl?.split("//")[1];
+
+            if (org && project && baseUrl) {
+              const fusionUrl = `https://${org}.fusion.cognite.com/${project}/streamlit-apps/dune/development/${port}?cluster=${parsedBaseUrl}&workspace=industrial-tools`;
+
+              openUrl(fusionUrl);
+            }
+          } catch (error) {
+            console.warn("Failed to read app.json for Fusion URL", error);
+          }
+        }
+      });
+    },
+  };
+};

package/src/vite/index.ts

@@ -0,0 +1,2 @@
+// Vite plugin exports
+export { fusionOpenPlugin } from "./fusion-open-plugin";