CMS UI Extensions

// src/cms-ui-extensions/fx/FxExperiment.sidebar.tsx
// The <Name>.<injection-point>.tsx suffix is how the Vite config finds entries.
import { AxiomProvider, Button, Text } from "@optiaxiom/react";
import { register, type ContentState, type ExtensionContext } from "@optimizely/cms-extensibility-sdk";
import { useEffect, useState } from "react";

function FxExperiment({ context }: { context: ExtensionContext }) {
  const [content, setContent] = useState<ContentState>(null);
  const [status, setStatus] = useState<unknown>(null);

  useEffect(() => {
    void context.extension.setReady();
    void context.content.get().then(setContent);
    return context.content.subscribe(setContent); // returns its own unsubscribe
  }, [context]);

  async function load() {
    const res = await context.extension.invokeFunction("cms_extension", {
      action: "getStatus",
      params: { content },
    });
    setStatus(res.data); // whatever the OCP function returned
  }

  return content?.key ? <Button onClick={load}>Load experiment</Button> : <Text>Open a page</Text>;
}

register((context) => (
  <AxiomProvider>
    <FxExperiment context={context} />
  </AxiomProvider>
));

// src/backend/functions/CmsUiExtension.ts - one function, routed by action
import * as App from "@zaiusinc/app-sdk";
import { storage } from "@zaiusinc/app-sdk";

export class CmsUiExtension extends App.Function {
  public async perform(): Promise<App.Response> {
    const { action, params } = this.request.bodyJSON ?? {};

    // Per-install values saved through forms/settings.yml
    const fx = await storage.settings.get<{ apiToken?: string; projectId?: string }>("fx");
    if (!fx.apiToken) return new App.Response(412, { ok: false, error: "not_configured" });

    switch (action) {
      case "getStatus":
        return new App.Response(200, { ok: true, result: await getStatus(fx, params) });
      default:
        return new App.Response(400, { ok: false, error: "unknown_action" });
    }
  }
}

# forms/settings.yml - OCP renders this as the app's settings screen
sections:
  - key: fx
    label: Feature Experimentation
    elements:
      - type: secret
        key: apiToken
        label: Personal access token
        help: Leave blank to keep the saved one.   # every input needs help, or validate fails
      - type: text
        key: projectId
        label: Project ID
        help: The FX project the site's SDK key belongs to.
      - type: button
        label: Save
        action: saveFx       # -> Lifecycle.onSettingsForm("fx", "saveFx", formData)
        style: primary

yarn validate          # lint + typecheck + build + ocp-app-sdk validate
ocp dev -p 3100        # 3000 is usually taken by next dev

# Mock CMS at http://localhost:3100 renders the sidebar and view bundles and routes
# invokeFunction to your local backend. Settings are read from .ocp-local/settings.json -
# keep .ocp-local/ in .gitignore, it holds your secrets.

# The CMS API token names its own instance - no guessing from a list of names
curl -s -X POST https://api.cms.optimizely.com/oauth/token \
  -H "Content-Type: application/json" \
  -d "{\"grant_type\":\"client_credentials\",\"client_id\":\"$CLIENT_ID\",\"client_secret\":\"$CLIENT_SECRET\"}" \
| node -e 'const t = JSON.parse(require("fs").readFileSync(0)).access_token;
  const c = JSON.parse(Buffer.from(t.split(".")[1], "base64url"));
  console.log(c.instanceId, c.siteUrl)'

ocp update                                         # --scope needs CLI 2.0.15+
ocp app register --appId fx_cms_experiments --name "FX Experiments" --product HUB --personal
ocp app prepare --bump-dev-version --publish       # build on OCP and publish a dev version

ocp directory status fx_cms_experiments@0.0.1-dev.1   # wait for PUBLISHED
ocp directory install fx_cms_experiments@0.0.1-dev.1 --scope <cms-instance-uuid>

# Every later version
ocp directory upgrade fx_cms_experiments --scope <cms-instance-uuid> -v 0.0.1-dev.2
ocp app logs --appId fx_cms_experiments --scope <cms-instance-uuid> --tail